/* technologie.css — Technologie-Seite.
   Lädt nach tokens.css + home.css. */

/* ---- Header: in normalem Dokumentfluss (kein Hero-Overlay) ---- */
.subpage header{position:relative;}

/* ---- Nav: aktive Seite ---- */
.nav-active{color:var(--color-ink)!important;opacity:1!important;text-decoration:underline;text-underline-offset:3px;}

/* ---- Page Hero ---- */
.page-hero h1{color:var(--color-off-white);font-size:clamp(2rem,4.5vw,var(--fs-3xl));line-height:1.1;margin-bottom:var(--space-6);max-width:22ch;}
.page-hero-sub{color:rgba(252,252,252,.8);font-size:var(--fs-md);max-width:60ch;line-height:var(--lh-body);}

/* ---- PFAS-frei ---- */
.pfas-inner{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:center;}
.pfas-text h2{font-size:clamp(1.8rem,3vw,var(--fs-2xl));margin-bottom:var(--space-6);line-height:1.15;}
.pfas-text p{color:var(--color-text-muted);}

/* ---- OBSIDIAN SHELL ---- */
.obsidian h2{font-size:clamp(1.8rem,3vw,var(--fs-2xl));margin-bottom:var(--space-8);line-height:1.15;}
.obsidian-layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:start;margin-bottom:var(--space-12);}
.obsidian-text p{color:rgba(252,252,252,.8);margin-bottom:var(--space-8);}
.spec-row{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;margin:0;padding:0;}
.spec-row li{font-family:var(--font-heading);font-size:var(--fs-xs);letter-spacing:var(--ls-eyebrow);color:var(--color-off-white);border:1px solid rgba(252,252,252,.2);padding:var(--space-1) var(--space-3);}
.obsidian-how{border-top:1px solid rgba(252,252,252,.1);padding-top:var(--space-8);max-width:70ch;margin-top: 80px;}
.obsidian-how h3{font-size:var(--fs-lg);letter-spacing:var(--ls-heading);margin-bottom:var(--space-4);}
.obsidian-how p{color:rgba(252,252,252,.75);}

/* ---- Weitere Beschichtungen ---- */
.beschichtungen h2{font-size:clamp(1.8rem,3vw,var(--fs-2xl));margin-bottom:var(--space-8);line-height:1.15;}
.beschichtungen-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);margin-bottom:var(--space-6);}
.beschichtung-card h3{font-family:var(--font-heading);font-weight:var(--fw-regular);font-size:var(--fs-lg);letter-spacing:var(--ls-heading);color:var(--color-ink);margin-bottom:var(--space-3);}
.beschichtung-card p{color:var(--color-text-muted);}
.beschichtungen-note{font-family:var(--font-heading);font-size:var(--fs-xs);color:var(--color-text-muted);letter-spacing:.3px;}
.beschichtungen-note a{color:var(--color-accent);}

/* ---- Effizienz ---- */
.effizienz h2{font-size:clamp(1.8rem,3vw,var(--fs-2xl));margin-bottom:var(--space-6);line-height:1.15;}

/* ---- Vorteile ---- */
.vorteile-stat{display:flex;align-items:center;gap:var(--space-8);margin-bottom:var(--space-12);padding-bottom:var(--space-8);}
.stat-number{font-family:var(--font-heading);font-size:var(--fs-4xl);color:var(--color-ink);line-height:1;letter-spacing:-1px;flex-shrink:0;}
.stat-label{font-family:var(--font-heading);font-size:var(--fs-md);color:var(--color-ink);letter-spacing:var(--ls-heading);}
.stat-note{font-family:var(--font-heading);font-size:var(--fs-xs);color:var(--color-text-muted);letter-spacing:.3px;}
.vorteile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-8);}
.vorteil-item{border-top:2px solid var(--color-accent);padding-top:var(--space-6);}
.vorteil-item h3{font-family:var(--font-heading);font-weight:var(--fw-regular);font-size:var(--fs-base);letter-spacing:var(--ls-heading);margin-bottom:var(--space-3);color:var(--color-ink);}
.vorteil-item p{color:var(--color-text-muted);font-size:var(--fs-sm);line-height:var(--lh-body);}

/* ---- Bilder ---- */
.tech-img{width:100%;aspect-ratio:6 / 4;object-fit:cover;border-radius:var(--radius-md);display:block;}

/* ---- Responsive ---- */
@media(max-width:900px){
  .pfas-inner{grid-template-columns:1fr;}
  .obsidian-layout{grid-template-columns:1fr;}
  .beschichtungen-grid{grid-template-columns:1fr;}
  .vorteile-grid{grid-template-columns:1fr 1fr;gap:var(--space-6);}
}
@media(max-width:760px){
  .vorteile-grid{grid-template-columns:1fr;}
  .vorteile-stat{flex-direction:column;align-items:flex-start;gap:var(--space-3);}
}