/* =============================================================
   BLOG SINGLE: proZerspanung Website
   Gemeinsames CSS fuer alle Blog-Artikel
   ============================================================= */

/* =============================================================
       ARTICLE HERO
       ============================================================= */

    .article-hero {
      background: var(--color-schwarz);
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 580px;
    }

    @media (max-width: 768px) {
      .article-hero {
        grid-template-columns: 1fr;
        min-height: auto;
      }
    }

    .article-hero__content {
      padding: calc(var(--nav-height) + var(--space-2xl)) max(2rem, 5vw) var(--space-2xl);
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .article-hero__content::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 80% 40%, rgba(238, 62, 73, 0.08) 0%, transparent 65%);
      pointer-events: none;
      z-index: 0;
    }

    .article-hero__image {
      position: relative;
      overflow: hidden;
    }

    .article-hero__image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    @media (max-width: 768px) {
      .article-hero__image {
        display: block;
        order: -1;
        height: 220px;
      }

      .article-hero__content {
        padding-top: var(--space-l);
      }
    }

    .article-hero__inner {
      position: relative;
      z-index: 1;
      max-width: 600px;
    }

    .article-hero__meta {
      display: flex;
      align-items: center;
      gap: var(--space-s);
      margin-bottom: var(--space-m);
      flex-wrap: wrap;
    }

    .article-hero__category {
      font-family: var(--font-heading);
      font-size: 0.6875rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      /* --color-rot auf --color-schwarz nur 4,40:1, --color-rot-hover erreicht 6,57:1 */
      color: var(--color-rot-hover);
    }

    .article-hero__dot {
      width: 3px;
      height: 3px;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 50%;
    }

    .article-hero__date,
    .article-hero__readtime {
      font-family: var(--font-heading);
      font-size: 0.6875rem;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.55);
    }

    .article-hero__headline {
      font-size: clamp(1.75rem, 4.5vw, 2.75rem);
      font-weight: 900;
      color: var(--color-weiss);
      line-height: 1.15;
      letter-spacing: -0.02em;
      margin: 0 0 var(--space-m);
      text-wrap: balance;
      max-width: 22ch;
    }

    .article-hero__lead {
      font-family: var(--font-body);
      font-size: 1.0625rem;
      color: rgba(255, 255, 255, 0.65);
      line-height: 1.75;
      max-width: 60ch;
    }

    .article-hero__ctas {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-s);
      margin-top: var(--space-m);
    }

    /* =============================================================
       ARTICLE LAYOUT
       ============================================================= */

    .article-body-section {
      padding: var(--space-2xl) 0;
    }

    .article-layout {
      display: grid;
      grid-template-columns: 1fr 280px;
      gap: var(--space-2xl);
      align-items: start;
    }

    @media (max-width: 900px) {
      .article-layout {
        grid-template-columns: 1fr;
      }
      .article-sidebar {
        display: none;
      }
    }

    /* =============================================================
       ARTICLE CONTENT
       ============================================================= */

    .article-content {
      max-width: 68ch;
    }

    .article-content p {
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.85;
      color: var(--color-grau-72);
      margin-bottom: var(--space-m);
    }

    .article-content h2 {
      font-family: var(--font-heading);
      font-size: 1.375rem;
      font-weight: 800;
      color: var(--color-schwarz);
      margin: var(--space-2xl) 0 var(--space-s);
      line-height: 1.25;
    }

    .article-content h2:first-child {
      margin-top: 0;
    }

    .article-content h3 {
      font-family: var(--font-heading);
      font-size: 1.0625rem;
      font-weight: 700;
      color: var(--color-grau-80);
      margin: var(--space-l) 0 var(--space-xs);
      line-height: 1.3;
    }

    .article-content ul {
      margin: 0 0 var(--space-m) var(--space-m);
    }

    .article-content ul li {
      font-family: var(--font-body);
      font-size: 1rem;
      line-height: 1.75;
      color: var(--color-grau-72);
      margin-bottom: 0.375rem;
      padding-left: 0.25rem;
    }

    .article-content ul li::marker {
      color: var(--color-rot);
    }

    /* Pull Quote */
    .article-pullquote {
      border-left: 3px solid var(--color-rot);
      padding: var(--space-s) var(--space-m);
      margin: var(--space-l) 0;
      background: var(--color-grau-4);
      border-radius: 0 var(--radius-m) var(--radius-m) 0;
    }

    .article-pullquote p {
      font-family: var(--font-body) !important;
      font-size: 1.0625rem !important;
      font-style: italic;
      color: var(--color-schwarz) !important;
      line-height: 1.65 !important;
      margin: 0 !important;
    }

    .article-pullquote cite {
      display: block;
      margin-top: var(--space-xs);
      font-family: var(--font-heading);
      font-size: 0.8125rem;
      font-style: normal;
      color: var(--color-grau-57);
    }

    /* Fact Box */
    .article-factbox {
      background: var(--color-schwarz);
      border-radius: var(--radius-m);
      padding: var(--space-m) var(--space-l);
      margin: var(--space-l) 0;
    }

    .article-factbox__title {
      font-family: var(--font-heading);
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      /* --color-rot auf --color-schwarz nur 4,40:1, --color-rot-hover erreicht 6,57:1 */
      color: var(--color-rot-hover);
      margin-bottom: var(--space-s);
    }

    .article-factbox ul {
      margin: 0;
      padding-left: var(--space-m);
    }

    .article-factbox ul li {
      font-family: var(--font-heading) !important;
      font-size: 0.9375rem !important;
      color: rgba(255, 255, 255, 0.85) !important;
      line-height: 1.75 !important;
      margin-bottom: 0.25rem !important;
    }

    .article-factbox ul li::marker {
      color: var(--color-rot) !important;
    }

    /* Comparison Table */
    .article-table {
      width: 100%;
      border-collapse: collapse;
      margin: var(--space-l) 0;
      font-family: var(--font-heading);
      font-size: 0.9rem;
    }

    .article-table thead th {
      background: var(--color-schwarz);
      color: var(--color-weiss);
      font-weight: 700;
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      padding: 0.75rem 1rem;
      text-align: left;
    }

    .article-table thead th:first-child {
      border-radius: var(--radius-s) 0 0 0;
    }

    .article-table thead th:last-child {
      border-radius: 0 var(--radius-s) 0 0;
      /* weiß auf --color-rot nur 3,87:1, --color-rot-active erreicht 5,2:1 */
      background: var(--color-rot-active);
    }

    .article-table tbody tr {
      border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    }

    .article-table tbody tr:last-child {
      border-bottom: none;
    }

    .article-table tbody td {
      padding: 0.75rem 1rem;
      color: var(--color-grau-72);
      line-height: 1.4;
    }

    .article-table tbody td:last-child {
      color: var(--color-schwarz);
      font-weight: 700;
    }

    .article-table tbody tr:nth-child(even) {
      background: var(--color-grau-4);
    }

    /* Divider */
    .article-divider {
      border: none;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
      margin: var(--space-2xl) 0;
    }

    /* =============================================================
       ARTICLE SIDEBAR
       ============================================================= */

    .article-sidebar {
      position: sticky;
      top: calc(var(--nav-height) + var(--space-m));
    }

    .article-sidebar__card {
      background: var(--color-grau-4);
      border-radius: var(--radius-m);
      padding: var(--space-m);
      margin-bottom: var(--space-m);
    }

    .article-sidebar__title {
      font-family: var(--font-heading);
      font-size: 0.6875rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-grau-57);
      margin-bottom: var(--space-s);
    }

    .article-sidebar__toc {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .article-sidebar__toc li {
      border-bottom: 1px solid rgba(0, 0, 0, 0.07);
      padding: 0.5rem 0;
    }

    .article-sidebar__toc li:last-child {
      border-bottom: none;
    }

    .article-sidebar__toc a {
      font-family: var(--font-heading);
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--color-grau-72);
      text-decoration: none;
      line-height: 1.4;
      display: block;
      transition: color var(--transition-fast);
    }

    .article-sidebar__toc a:hover {
      color: var(--color-rot);
    }

    .article-sidebar__cta {
      background: var(--color-schwarz);
      border-radius: var(--radius-m);
      padding: var(--space-m);
    }

    .article-sidebar__cta-label {
      font-family: var(--font-heading);
      font-size: 0.6875rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      /* --color-rot auf --color-schwarz nur 4,40:1, --color-rot-hover erreicht 6,57:1 */
      color: var(--color-rot-hover);
      margin-bottom: var(--space-xs);
    }

    .article-sidebar__cta-text {
      font-family: var(--font-heading);
      font-size: 0.9375rem;
      font-weight: 700;
      color: var(--color-weiss);
      line-height: 1.35;
      margin-bottom: var(--space-m);
    }

    /* =============================================================
       PRODUCT CTA SECTION
       ============================================================= */

    .article-product-cta {
      background: var(--color-grau-4);
      border-radius: var(--radius-m);
      padding: var(--space-l) var(--space-xl);
      margin-top: var(--space-2xl);
      display: grid;
      grid-template-columns: 1fr auto;
      gap: var(--space-l);
      align-items: center;
    }

    @media (max-width: 640px) {
      .article-product-cta {
        grid-template-columns: 1fr;
        padding: var(--space-m);
      }
    }

    .article-product-cta__label {
      font-family: var(--font-heading);
      font-size: 0.6875rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      /* --color-rot auf hellem Grund nur 3,87:1, --color-rot-active erreicht 5,2:1 */
      color: var(--color-rot-active);
      margin-bottom: var(--space-xs);
    }

    .article-product-cta__headline {
      font-family: var(--font-heading);
      font-size: 1.25rem;
      font-weight: 800;
      color: var(--color-schwarz);
      line-height: 1.3;
      margin-bottom: var(--space-xs);
    }

    .article-product-cta__text {
      font-family: var(--font-body);
      font-size: 0.9375rem;
      color: var(--color-grau-72);
      line-height: 1.65;
      margin: 0;
    }

    .article-product-cta__actions {
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
      flex-shrink: 0;
    }

    /* =============================================================
       RELATED PRODUCTS
       ============================================================= */

    .related-section {
      padding: var(--space-2xl) 0;
      border-top: 1px solid rgba(0, 0, 0, 0.07);
    }

    .related-section__title {
      font-family: var(--font-heading);
      font-size: 1.25rem;
      font-weight: 800;
      color: var(--color-schwarz);
      margin-bottom: var(--space-l);
    }

    .related-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-m);
    }

    @media (max-width: 768px) {
      .related-grid {
        grid-template-columns: 1fr;
      }
    }

    .related-card {
      display: flex;
      flex-direction: column;
      text-decoration: none;
      color: inherit;
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: var(--radius-m);
      overflow: hidden;
      transition: box-shadow var(--transition-base), transform var(--transition-base);
    }

    .related-card:hover {
      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.09);
      transform: translateY(-2px);
    }

    .related-card:active {
      transform: translateY(0);
    }

    .related-card__img {
      aspect-ratio: 3 / 2;
      object-fit: cover;
      display: block;
      width: 100%;
      height: auto;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .related-card:hover .related-card__img {
      transform: scale(1.04);
    }

    .related-card__body {
      padding: var(--space-s) var(--space-m);
    }

    .related-card__label {
      font-family: var(--font-heading);
      font-size: 0.625rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      /* --color-rot auf hellem Grund nur 3,87:1, --color-rot-active erreicht 5,2:1 */
      color: var(--color-rot-active);
      margin-bottom: 0.25rem;
    }

    .related-card__name {
      font-family: var(--font-heading);
      font-size: 0.9375rem;
      font-weight: 700;
      color: var(--color-schwarz);
      line-height: 1.3;
    }