/* ---------- Sticky nav ---------- */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  /* Voll deckend. Die Transparenz liess den Hero durchscheinen — Muth,
     08.09.2026. Ohne Transparenz hat der Weichzeichner nichts mehr zu tun. */
  background:#fff;
  border-bottom:1px solid transparent;
  transition:box-shadow .25s, border-color .25s, background .25s;
}

.nav.scrolled{
  border-bottom-color:var(--line);
  box-shadow:0 6px 24px rgba(0,0,0,.06);
}

.nav-inner{
  display:flex;
  align-items:center;
  gap:20px;
  width:100%;
}

.brand{ display:flex; align-items:center; text-decoration:none; }
/* Höhe 52px; rechter Transparenz-Rand (~20%) per cover/links weggeschnitten */
/* 46 -> 51px, zehn Prozent groesser. TE, 08.09.2026. */
.brand img{ height:51px; width:auto; display:block; }

.nav-links{
  display:flex;
  gap:22px;
  margin-left:auto;
  font-size:14px;
  font-weight:500;
}

.nav-links a{
  color:#3a3d44;
  text-decoration:none;
  transition:color .15s;
}
.nav-links a:hover{ color:var(--ink); }

.nav-cta{ margin-left:8px; }

/* ---------- Mobiles Menue ----------
   Die Linkleiste verschwindet unter 1000 px. Ohne Ersatz war die Seite dort
   ohne Navigation — der Knopf tritt an ihre Stelle. TE, 10.09.2026. */
.nav-burger{
  display:none;                      /* erst in responsive.css eingeschaltet */
  margin-left:auto; width:44px; height:44px;   /* 44px = bequeme Trefferflaeche */
  border:1px solid var(--line); border-radius:var(--radius);
  background:#fff; cursor:pointer; padding:0;
  align-items:center; justify-content:center;
}
.nav-burger:focus-visible{ outline:2px solid var(--red-dark); outline-offset:2px; }
.nav-burger-bars, .nav-burger-bars::before, .nav-burger-bars::after{
  display:block; width:20px; height:2px; background:var(--ink);
  transition:transform .2s, opacity .2s;
}
.nav-burger-bars::before, .nav-burger-bars::after{ content:""; position:relative; }
.nav-burger-bars::before{ top:-6px; }
.nav-burger-bars::after{ top:4px; }
/* Offen: aus drei Balken wird ein Kreuz */
.nav-burger[aria-expanded="true"] .nav-burger-bars{ background:transparent; }
.nav-burger[aria-expanded="true"] .nav-burger-bars::before{ top:2px; transform:rotate(45deg); }
.nav-burger[aria-expanded="true"] .nav-burger-bars::after{ top:0; transform:rotate(-45deg); }

.nav-menu{
  /* display:flex wuerde das hidden-Attribut aushebeln — deshalb erst
     einschalten, wenn es weg ist. Fehler gefunden von TE, 10.09.2026. */
  display:none; flex-direction:column;
  background:#fff; border-top:1px solid var(--line);
  padding:10px 22px 20px;
  box-shadow:0 18px 34px rgba(0,0,0,.10);
}
.nav-menu:not([hidden]){ display:flex; }
.nav-menu a{
  padding:13px 2px; text-decoration:none; font-size:16px; font-weight:500;
  color:var(--ink); border-bottom:1px solid var(--line);
}
.nav-menu a:last-of-type{ border-bottom:0; }
.nav-menu .nav-menu-cta{
  margin-top:16px; text-align:center; border-bottom:0; color:#fff;
}

/* ---------- Buttons ---------- */
.ctaRow{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

.btn{
  display:inline-block;
  padding:12px 20px;
  border-radius:10px;
  border:1px solid var(--red);
  background:var(--red);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  line-height:1.2;
  transition:transform .12s, background .15s, color .15s;
}
.btn:hover{ background:var(--red-dark); border-color:var(--red-dark); transform:translateY(-1px); }

.btn.primary{ background:var(--red-dark); color:#fff; border-color:var(--red-dark); }
.btn.primary:hover{ background:#a82a22; border-color:#a82a22; }

.btn.secondary{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.45);
}
.btn.secondary:hover{ background:rgba(255,255,255,.10); border-color:#fff; transform:translateY(-1px); }

.btn.big{ padding:15px 26px; font-size:15px; }

/* nav cta sits on light bg */
.nav .btn.primary{ color:#fff; }

/* ---------- Cards / media ---------- */
.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
}

.card.darkish{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.12);
  box-shadow:none;
}

.card .pad{ padding:16px 18px 14px; }

.img{ width:100%; height:auto; display:block; }

.caption{ font-size:13px; color:var(--mid); margin:0; }
.dark .caption{ color:rgba(255,255,255,.65); }

/* ---------- Bullets ---------- */
.bullets{ margin:14px 0 0; padding:0; list-style:none; }
.bullets li{
  margin:11px 0;
  padding-left:20px;
  position:relative;
  color:#3c3f46;
}
.dark .bullets li{ color:rgba(255,255,255,.82); }
.bullets li::before{
  content:"";
  position:absolute;
  left:0; top:.62em;
  width:9px; height:2px;
  background:var(--grey);
  border-radius:2px;
}

/* ---------- Feature blocks (deliverable) ---------- */
.feature{ margin-top:24px; }
.feature h3{ margin-bottom:6px; }
.feature p{ color:#43464d; margin:0; }
.dark .feature p{ color:rgba(255,255,255,.8); }

/* ---------- Segment cards (opportunity) ---------- */
.seg-card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  padding:26px 24px;
}
.seg-card h3{ color:#fff; }
.seg-card p{ color:rgba(255,255,255,.78); font-size:15px; }
.seg-card .seg-take{ color:#fff; font-weight:600; margin-bottom:0; }
.seg-card.highlight{
  background:rgba(224,69,59,.14);
  border-color:rgba(224,69,59,.5);
}

/* ---------- Moat cards ---------- */
.moat-card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  padding:28px 24px;
}
.moat-num{
  font-family:var(--serif);
  font-size:44px;
  line-height:1;
  color:var(--ink);
  margin-bottom:14px;
}
.moat-card h3{ color:#fff; margin-bottom:8px; }
.moat-card p{ color:rgba(255,255,255,.78); font-size:15px; margin:0; }

/* ---------- Fit cards ---------- */
.fit-single{ max-width:780px; }
.fit-card{
  border-radius:var(--radius);
  padding:26px 26px 30px;
  border:1px solid var(--line);
  background:#fff;
}
.fit-card.yes{ border-left:4px solid var(--ink); }
.fit-card.no{ background:#efeeec; }
.fit-card.no .bullets li::before{ background:var(--mid); }
.fit-card h3{ margin-top:0; }

/* ---------- Trust logos ---------- */
.logoRow{ display:flex; gap:26px; align-items:center; flex-wrap:wrap; }
.trust-logos{ justify-content:center; margin:30px 0 14px; }
.logo{ height:28px; width:auto; opacity:.9; }
.logo-ph{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:130px;
  height:54px;
  padding:0 18px;
  border:1px dashed var(--line);
  border-radius:10px;
  color:var(--mid);
  font-size:13px;
  letter-spacing:.04em;
  background:#fff;
}
.center .caption{ color:var(--mid); }

/* AeroLas logo in About */
.aerolas-logo{ height:72px; width:auto; margin-top:22px; opacity:.95; }
/* About: mehr Abstand zwischen Sub-Headline (lead-muted) und Fließtext (~1 Zeile) */
.about-block .lead-muted{ margin-bottom:34px; }

/* ---------- FAQ ---------- */
details{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:16px 18px;
  margin:10px 0;
}
.dark details{ background:rgba(255,255,255,.05); }
summary{
  cursor:pointer;
  font-weight:600;
  list-style:none;
  font-family:var(--serif);
  font-size:19px;
  color:#fff;
  position:relative;
  padding-right:28px;
}
summary::-webkit-details-marker{ display:none; }
summary::after{
  content:"+";
  position:absolute; right:2px; top:-2px;
  color:var(--grey);
  font-family:var(--sans);
  font-size:22px;
}
details[open] summary::after{ content:"–"; }
details p{ margin:12px 0 0; color:rgba(255,255,255,.78); font-family:var(--sans); font-size:15px; }

/* ---------- Footer ---------- */
.footer{
  padding:34px 0;
  background:#101116;
  color:rgba(255,255,255,.7);
  font-size:13px;
}
/* Fuss dreigeteilt, TE 10.09.2026: Top links, Menue und Copyright mittig,
   LinkedIn rechts. 1fr auto 1fr haelt die Mitte unabhaengig von den Aussen-
   breiten wirklich in der Mitte. */
.footer-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px 24px;
}
.footer-top{ justify-self:start; }
.footer-mitte{ text-align:center; display:grid; gap:8px; }
.footer-li{ justify-self:end; }
.footer-logo{ height:26px; width:auto; filter:brightness(0) invert(1); opacity:.9; }
.footer-meta{ margin:0; opacity:.72; }
.footer-links{ margin:0; }
.footer-links a{ color:rgba(255,255,255,.7); text-decoration:none; }
.footer-links a:hover{ color:#fff; }
/* Trennzeichen duerfen beim Umbruch nicht an den Zeilenanfang rutschen */
.trenner{ opacity:.45; padding:0 4px; }
.nichtbrechen{ white-space:nowrap; }
.footer-li{
  display:inline-flex; align-items:center; gap:8px;
  color:rgba(255,255,255,.72); text-decoration:none;
  font-size:13px; font-weight:600;
}
.footer-li:hover{ color:#fff; }
.footer-top{ color:rgba(255,255,255,.72); text-decoration:none; font-size:13px; font-weight:600; }
.footer-top:hover{ color:#fff; }

/* ---------- Briefing steps (visible text box) ---------- */
.briefing-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:8px 0 40px; }
.step-box{
  background:#fff;
  border:1px solid var(--line);
  border-top:3px solid var(--ink);
  border-radius:var(--radius);
  padding:22px 22px 24px;
}
.step-box h3{ margin:0 0 8px; }
.step-box p{ margin:0; color:#43464d; font-size:15px; line-height:1.5; }

/* ---------- Customer references (trust) ---------- */
.ref-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin:8px 0 30px;
}
.ref-card{
  background:#fff;
  border:1px solid var(--line);
  border-top:3px solid var(--ink);
  border-radius:var(--radius);
  padding:22px 22px 24px;
}
.ref-name{
  font-family:var(--serif);
  font-size:22px;
  font-weight:700;
  letter-spacing:.01em;
  color:#15171c;
  margin-bottom:12px;
  min-height:30px;
}
.ref-card p{ font-size:17px; line-height:1.55; color:#2f3238; margin:0; }

.ref-banner{
  background:var(--red);
  color:#fff;
  border-radius:var(--radius);
  padding:22px 26px;
  font-size:clamp(16px,1.4vw,19px);
  line-height:1.5;
  margin:0 0 30px;
}
.ref-banner strong{ font-weight:700; }

.partners{
  display:flex;
  align-items:center;
  gap:18px 26px;
  flex-wrap:wrap;
  padding-top:6px;
}
.partners-label{
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mid);
}
.partners-list{ display:flex; gap:14px 22px; flex-wrap:wrap; }
.partners-list span{
  font-family:var(--serif);
  font-size:16px;
  color:#5a5d64;
}

/* ---------- Team (who you'll talk to) ---------- */
.team-title{ margin:4px 0 18px; }
.team-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-bottom:44px;
}
.person{
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  cursor:pointer;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.person:hover, .person:focus-within{ border-color:var(--ink); box-shadow:0 10px 30px rgba(0,0,0,.07); }
.person-photo{
  width:72px; height:72px;
  border-radius:50%;
  object-fit:cover;
  filter:grayscale(100%);
  flex:none;
}
.person-meta{ display:flex; flex-direction:column; gap:2px; }
.person-name{ font-family:var(--serif); font-size:18px; font-weight:700; line-height:1.15; color:#15171c; }
.person-title{ font-size:13px; color:#5c5f66; letter-spacing:.03em; text-transform:uppercase; }
.person-arrow{ color:#5c5f66; font-size:12px; margin-top:5px; transition:transform .2s; }
/* LinkedIn am rechten Kartenrand. Die Karte selbst ist klickbar und oeffnet die
   Kurzbiografie — der Link darf das nicht ausloesen, siehe stopPropagation. */
.person-li{
  margin-left:auto; align-self:center;
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:var(--radius);
  color:#5c5f66; text-decoration:none;
  transition:color .2s, background .2s;
}
.person-li:hover{ color:#0a66c2; background:rgba(10,102,194,.08); }
.person-li:focus-visible{ outline:2px solid var(--red-dark); outline-offset:2px; }
.person:hover .person-arrow, .person:focus-within .person-arrow{ transform:translateX(4px); }

/* Bio pop-up */
.person-bio{
  position:absolute;
  left:0; right:0;
  bottom:calc(100% + 12px);
  background:var(--ink);
  color:rgba(255,255,255,.9);
  border-radius:12px;
  padding:18px 20px;
  box-shadow:0 20px 54px rgba(0,0,0,.30);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s, transform .2s, visibility .2s;
  z-index:30;
}
.person-bio::after{
  content:"";
  position:absolute; left:38px; top:100%;
  border:8px solid transparent;
  border-top-color:var(--ink);
}
.person-bio p{ font-size:13.5px; line-height:1.55; margin:0 0 10px; }
.person-bio p:last-child{ margin:0; }
.person:hover .person-bio, .person:focus-within .person-bio{ opacity:1; visibility:visible; transform:translateY(0); }
/* zu wenig Platz oben → Popup nach unten klappen (Pfeil dreht mit) */
.person.bio-below .person-bio{ bottom:auto; top:calc(100% + 12px); }
.person.bio-below .person-bio::after{ top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:var(--ink); }

/* Honeypot: unsichtbares Anti-Spam-Feld (nur Bots füllen es aus) */
.hp-field{ position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden; }

/* ---------------------------------------------------------------
   Renobrac
   --------------------------------------------------------------- */

/* Echte Wortmarke als SVG (Text liegt in Kurven vor).
   Die Hoehe steht bei .brand img — dort gewinnt sie ohnehin. */
.brand-logo{ width:auto; display:block; }

/* Zweiter Headline-Teil in Grau — das Kontrastmittel des Brand Guide */
h1 .g, h2 .g, h3 .g{ color:var(--grey); }
.hero .kicker b{ color:#fff; font-weight:600; }

/* seg-card war bei Soloia nur für dunkle Abschnitte gebaut.
   Auf hellem Grund (.paper) braucht es die invertierte Variante. */
.paper .seg-card{
  background:#fff;
  border:1px solid var(--line);
  border-top:3px solid var(--ink);
}
.paper .seg-card h3{ color:var(--ink); }
.paper .seg-card p{ color:#43464d; }

/* ---------- Produktwelt: Branche + Bauteil + entscheidende Zahl ---------- */
.product-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:34px;
}
.product{ background:#fff; border:1px solid var(--line); border-top:3px solid var(--ink); }
.product h3{ margin:20px 22px 8px; font-size:20px; }
.product p{ margin:0 22px 16px; font-size:15px; color:#43464d; line-height:1.5; }
.product .metric{
  margin:0 22px 22px; padding-top:14px; border-top:1px solid var(--line);
  font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--ink);
}

/* Bildplatz — Platzhalter, bis die echten Produktbilder vorliegen */
.shot{
  aspect-ratio:4/3; background:#141414; position:relative; overflow:hidden;
  background-image:repeating-linear-gradient(135deg,#141414 0 9px,#191919 9px 18px);
}
.shot::after{
  content:attr(data-slot) " · image to follow";
  position:absolute; inset:auto 0 0 0; padding:10px 14px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.shot.sm{ aspect-ratio:1/1; }

.also{
  margin-top:28px; padding-top:20px; border-top:1px solid var(--line);
  font-size:15px; color:#43464d; line-height:1.6;
}

@media (max-width:900px){
  .product-grid{ grid-template-columns:1fr; }
  .forms-row{ grid-template-columns:repeat(2,1fr); }
}

/* Kennzahlen-Block statt Bild im Problem-Abschnitt */
.stat-block{ padding:6px 0; }
.stat-block .big{
  font-family:var(--serif); font-weight:900; font-size:clamp(52px,6vw,76px);
  /* Rot statt Weiss, TE 10.09.2026. Ueber 24px gilt 3:1 — bei 52-76px traegt
     die Markenfarbe. Der text-shadow weiter unten sichert die helle Stelle
     des Fotos ab. */
  line-height:.95; letter-spacing:-.04em; color:var(--red); margin-bottom:6px;
}
.stat-block .big + p{ color:rgba(255,255,255,.72); font-size:15px; line-height:1.5; margin:0 0 30px; }
.stat-block p:last-child{ margin-bottom:0; }

/* Rohstoff-Tabelle */
.feedstock{ margin-top:38px; padding-top:32px; border-top:1px solid var(--line); }
.feedstock h3{ font-size:26px; margin-bottom:10px; }
.grades{ width:100%; border-collapse:collapse; margin-top:22px; }
.grades th, .grades td{
  text-align:left; vertical-align:top; padding:16px 20px 16px 0;
  border-top:1px solid var(--line); font-size:15px; line-height:1.5;
}
.grades th{ width:31%; font-weight:600; color:var(--ink); padding-right:28px; }
.grades td{ color:#43464d; }
.grades tr:first-child th, .grades tr:first-child td{ border-top:none; }
.feed-take{
  margin-top:24px; padding:18px 22px; background:var(--ink); color:#fff;
  font-size:16px; font-weight:600; line-height:1.5;
}
@media (max-width:760px){
  .grades th, .grades td{ display:block; width:auto; padding:0 0 6px; border:none; }
  .grades tr{ display:block; padding:14px 0; border-top:1px solid var(--line); }
}
/* Kennzahlen-Block sitzt frei im dunklen Abschnitt, nicht in einer weissen Karte.
   Gemessen am 10.09.2026: Der Verlauf dunkelt an dieser Stelle nur auf 30-38 %
   ab, der Grund liegt dort bei Helligkeit 83-116. Weiss trug das (4,7-8,7:1),
   die Markenfarbe nicht — Rot kam auf 1,1-2,1:1. Deshalb eine eigene dunkle
   Flaeche unter den Zahlen, gleicher Wert wie bei .bleed .seg-card. */
.stat-block{ border-left:3px solid #fff; padding-left:26px; }
/* Lesbarkeit ueber dem Bild sichern, ohne es abzudunkeln */
.stat-block .big{ text-shadow:0 3px 18px rgba(0,0,0,.8); }
.stat-block p{ text-shadow:0 2px 10px rgba(0,0,0,.85); }

/* ---------- Prozessgrafik: Garn -> Verfahren -> Bauteil ---------- */
.routes{ margin-top:46px; padding-top:38px; border-top:1px solid var(--line); }
.routes-head h3{ font-size:clamp(22px,2.4vw,30px); margin-bottom:10px; max-width:22ch; }
.routes-head p{ font-size:16px; color:#43464d; line-height:1.55; max-width:62ch; margin:0; }

.flow{ display:grid; grid-template-columns:auto 1fr auto; gap:0; align-items:stretch; margin-top:30px; }

.flow-start, .flow-end{
  background:var(--ink); color:#fff; padding:22px 24px;
  display:flex; flex-direction:column; justify-content:center; min-width:150px;
}
.flow-start .lbl, .flow-end .lbl{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.75); margin-bottom:6px;
}
.flow-end .lbl{ color:#fff; }
.flow-start strong, .flow-end strong{ font-size:21px; font-weight:900; letter-spacing:-.02em; line-height:1.1; }
.flow-end{ background:var(--red-dark); }     /* einziger Farbakzent: das Ergebnis */

.flow-steps{ display:grid; grid-template-columns:repeat(6,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.step{
  padding:20px 16px; border-right:1px solid var(--line); background:#fff;
  display:flex; flex-direction:column; gap:5px;
}
.step:last-child{ border-right:none; }
.step .n{ font-size:11px; font-weight:700; letter-spacing:.12em; color:#5c5f66; }
.step b{ font-size:16px; font-weight:900; letter-spacing:-.01em; color:var(--ink); }
.step i{ font-style:normal; font-size:13px; line-height:1.4; color:#5a5d64; }

.routes-take{
  margin-top:24px; font-size:16px; line-height:1.55; color:#43464d;
  padding-left:18px; border-left:3px solid var(--ink); max-width:74ch;
}

@media (max-width:1000px){
  .flow{ grid-template-columns:1fr; }
  .flow-steps{ grid-template-columns:repeat(2,1fr); }
  .step{ border-bottom:1px solid var(--line); }
  .flow-start, .flow-end{ min-width:0; }
}

/* Thermoforming als Schluesselschritt hervorheben */
.step.key{ background:var(--ink); position:relative; }
.step.key .n{ color:rgba(255,255,255,.5); }
.step.key b{ color:#fff; }
.step.key i{ color:rgba(255,255,255,.75); }
.step.key .flag{
  margin-top:8px; align-self:flex-start;
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:var(--red-dark); padding:3px 8px;
}

/* Warum Schritt 04 die Rechnung veraendert */
.why-fast{ margin-top:30px; border:1px solid var(--line); border-top:3px solid var(--ink); padding:28px 30px; background:#fff; }
.why-fast h4{ font-size:20px; font-weight:900; letter-spacing:-.02em; margin:0 0 20px; color:var(--ink); }
.fast-cols{ display:grid; grid-template-columns:1fr 1fr; gap:34px; }
.fast-cols .lbl{
  display:block; font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:#5c5f66; margin-bottom:8px;
}
.fast-cols p{ font-size:15px; line-height:1.55; color:#43464d; margin:0 0 12px; }
.fast-cols b{ font-size:22px; font-weight:900; letter-spacing:-.02em; color:var(--ink); }
.fast-cols > div:last-child b{ color:var(--red); }
.fast-note{
  margin:24px 0 0; padding-top:18px; border-top:1px solid var(--line);
  font-size:15px; line-height:1.55; color:#43464d;
}
@media (max-width:760px){ .fast-cols{ grid-template-columns:1fr; gap:24px; } }

/* ---------- Halbzeuge (Lieferformen) ---------- */
.forms-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:24px; margin-top:32px; }
.form-item{ padding-top:18px; border-top:2px solid rgba(255,255,255,.35); }
.form-item h3{ font-size:17px; margin:0 0 7px; color:#fff; }
.form-item p{ font-size:14px; color:rgba(255,255,255,.7); line-height:1.45; margin:0; }
@media (max-width:900px){ .forms-row{ grid-template-columns:repeat(2,1fr); } }

/* ================================================================
   INVESTOREN-UMBAU — neue Bausteine
   ================================================================ */

/* ---------- Zwei bestehende Ketten, ein fehlender Link ---------- */
.chains{
  display:grid;
  grid-template-columns:1fr auto 1.05fr auto 1fr;
  align-items:stretch;
  gap:0;
  margin-top:34px;
}
.chain{
  background:#fff;
  border:1px solid var(--line);
  border-top:3px solid var(--grey);
  padding:22px 24px 24px;
}
.chain-tag{
  display:block; font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:#5c5f66; margin-bottom:10px;
}
.chain h4{
  font-family:var(--serif); font-weight:900; letter-spacing:-.02em;
  font-size:20px; line-height:1.1; margin:0 0 10px; color:var(--ink);
}
.chain p{ font-size:14px; line-height:1.55; color:#43464d; margin:0; }

/* Der fehlende Link: der einzige rote Akzent in der Grafik */
.chain.is-link{
  background:var(--ink);
  border-color:var(--ink);
  border-top-color:var(--red);
}
.chain.is-link .chain-tag{ color:var(--red); }
.chain.is-link h4{ color:#fff; }
.chain.is-link p{ color:rgba(255,255,255,.82); }
.chain-note{
  display:block; margin-top:14px; padding-top:12px;
  border-top:1px solid rgba(255,255,255,.18);
  font-size:12px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--red);
}

.chain-join{
  display:flex; align-items:center; justify-content:center;
  padding:0 14px; font-size:22px; color:#5c5f66; line-height:1;
}

.chains-take{
  margin:22px 0 0; padding:16px 20px;
  background:#f2f2f2; border-left:3px solid var(--red);
  font-size:15px; line-height:1.55; color:#2c2f35;
}

@media (max-width:900px){
  .chains{ grid-template-columns:1fr; }
  .chain-join{ padding:8px 0; transform:rotate(90deg); }
}

/* ---------- Thermoforming-Bild im why-fast-Block ---------- */
.why-fast-fig{ margin:26px 0 0; }
.why-fast-fig img{ width:100%; height:auto; display:block; border:1px solid var(--line); }
.why-fast-fig figcaption{ font-size:13px; color:var(--mid); margin-top:8px; }

/* ---------- Dicht beschriftete Grafiken ueber die volle Breite ----------
   Beide Prozessgrafiken (10.09.2026) sind Diagramme mit Beschriftung, keine
   Stimmungsbilder. In der halben Rasterspalte kamen sie auf 505 bzw. 470 px —
   die Schrift darin lag unter 6 px. Deshalb unter den Text statt daneben. */
/* Das Prozessdiagramm ist sehr breit (3,24:1). Ueber die volle Seitenbreite
   wurde es zu dominant — begrenzte Hoehe, und der Kasten faellt auf die Breite
   des Bildes zusammen statt 500 px Weiss danebenstehen zu lassen.
   TE, 10.09.2026.

   Hoehe und Breite haengen an einer Zahl: --h mal dem Seitenverhaeltnis des
   Bildes (3000/926). Wer die Hoehe aendert, aendert den Kasten mit. */
.card.breit{
  --h:165px;
  margin:16px auto 0;
  width:min(calc(var(--h) * 3000 / 926), 100%);
}
.card.breit .img{ width:100%; height:var(--h); object-fit:contain; display:block; }
/* Im Herkunftsblock bleibt nur noch eine Spalte im Raster */
.about-block .grid{ grid-template-columns:1fr; }
/* Engeres Raster dort, wo Text und Diagramm nebeneinander stehen */
.grid-eng{ gap:34px; align-items:start; margin-top:34px; }

/* ---------- Durchbruch-Block innerhalb von "How it works" ---------- */
.breakthrough{
  margin-top:56px; padding-top:44px;
  /* Eigenes Kapitel innerhalb von "How it works" — eine Haarlinie traegt das
     nicht. Muth, 08.09.2026. */
  border-top:3px solid rgba(255,255,255,.28);
}
/* Volle Zeilenbreite, TE 10.09.2026 — vorher auf 20ch bzw. 760px gedeckelt */
.breakthrough h3{
  font-size:clamp(26px,3vw,38px); line-height:1.05;
  letter-spacing:-.025em; margin:0 0 14px;
}
.breakthrough > .lead-muted{ max-width:none; }
.breakthrough .grid{ margin-top:34px; }
.moat-take{
  margin-top:20px; padding-left:16px; border-left:3px solid var(--red);
  font-size:17px; font-weight:600; line-height:1.45; color:#fff;
}
.prior-art{
  margin-top:38px; padding:22px 26px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  font-size:15px; line-height:1.6; color:rgba(255,255,255,.82);
}
.prior-art b{ color:#fff; }

/* ---------- Reifegrad ---------- */
/* Renobracs Partnerzeile. Eigener Name, weil .partners aus dem Soloia-Klon
   eine Flex-Leiste ist und hier ungewollt durchschlagen wuerde. */
.validated-with{
  margin-top:30px; padding-top:18px; border-top:1px solid var(--line);
  font-size:15px; color:#43464d;
}
.validated-with b{ color:var(--ink); }
.window{ margin-top:38px; }
.window h4{
  font-family:var(--serif); font-weight:900; letter-spacing:-.02em;
  font-size:20px; margin:0 0 8px; color:var(--ink);
}
.window p{ font-size:15px; line-height:1.55; color:#43464d; margin:0; }

/* ---------- Weg zur Skalierung: dunkle Fassung der Rohstoff-Tabelle ---------- */
.dark .feedstock{ border-top-color:rgba(255,255,255,.16); }
.dark .grades th, .dark .grades td{ border-top-color:rgba(255,255,255,.14); }
.dark .grades th{ color:#fff; }
.dark .grades td{ color:rgba(255,255,255,.78); }
.dark .feed-take{ background:var(--red-dark); color:#fff; }
@media (max-width:760px){
  .dark .grades tr{ border-top-color:rgba(255,255,255,.14); }
}

/* ---------- Was Skalierung braucht ---------- */
.requires{
  margin-top:44px; padding-top:34px;
  border-top:1px solid rgba(255,255,255,.16);
}
.requires h3{ font-size:26px; margin-bottom:6px; }
.requires-note{
  margin-top:26px; padding-left:16px; border-left:3px solid var(--red);
  font-size:15px; line-height:1.6; color:rgba(255,255,255,.72);
}

/* ---------- Investorenprofile ---------- */
.profiles{ margin-top:34px; gap:26px; }
.profile{
  background:#fff; border:1px solid var(--line); border-top:3px solid var(--ink);
  padding:28px 28px 30px;
}
.profile h3{ font-size:22px; margin:0 0 10px; }
.profile-lead{
  font-size:15px; line-height:1.55; color:#43464d;
  margin:0 0 4px; padding-bottom:16px; border-bottom:1px solid var(--line);
}
.profile .bullets li{ font-size:15px; }

/* ---------- Herkunftsblock im Briefing-Abschnitt ---------- */
.about-block{
  margin:8px 0 46px; padding:34px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.about-block h3{
  font-size:clamp(24px,2.6vw,32px); line-height:1.06;
  letter-spacing:-.025em; margin:0 0 14px;
}
.about-block p{ color:#43464d; font-size:15px; line-height:1.6; }

/* ---------- Lesbarkeit ueber Hintergrundbildern ---------- */
/* Im These-Abschnitt liegt das Rotorblatt-Bild darunter — 5 % Weiss traegt dort nicht. */
.bleed .seg-card{
  background:rgba(17,17,17,.82);
  border-color:rgba(255,255,255,.20);
  backdrop-filter:blur(2px);
}

/* Herkunftsblock liegt auf der Gewebe-Textur des Briefing-Abschnitts */
.about-block{
  background:#fff;
  border:1px solid var(--line);
  padding:34px 36px;
}

/* ---------- Produktkacheln auf gleiche Grundlinie ---------- */
.product{ display:flex; flex-direction:column; }
.product p{ flex:1 1 auto; }

/* ================================================================
   FEEDBACK-RUNDE 2
   ================================================================ */

/* ---------- Zwischenueberschriften innerhalb eines Abschnitts ---------- */
.sub-head{
  font-size:clamp(20px,2.1vw,26px);
  line-height:1.12;
  letter-spacing:-.025em;
  margin:44px 0 4px;
}
.dark .sub-head{ color:#fff; }

/* ---------- Bild als Hintergrund heller Abschnitte ----------
   Quellbilder sind dunkel. Deshalb liegt Weiss darueber statt Schwarz:
   das Segment bleibt hell, das Motiv bleibt als Struktur erkennbar. */
.shot-bg{ position:relative; overflow:hidden; }
.shot-bg::before{
  content:"";
  position:absolute; inset:0;
  background-size:cover;
  background-repeat:no-repeat;
  pointer-events:none;
}
.shot-bg::after{
  content:"";
  position:absolute; inset:0;
  background:rgba(255,255,255,.60);   /* Zielwert: ~40 % Motiv bleibt sichtbar */
  pointer-events:none;
}
.shot-bg > .wrap{ position:relative; z-index:1; }

.shot-yarn::before{
  background-image:url(../images/hybrid-yarn-spinning-process_v5_frogview.webp);
  background-position:center 22%;
  filter:grayscale(100%) contrast(.95);
}
.shot-thermo::before{
  background-image:url(../images/thermoforming-ir-heating.webp);
  background-position:center 40%;
  filter:grayscale(100%) contrast(.9);
}

/* Karten auf solchem Grund brauchen Deckung — 15 % Transparenz laut Vorgabe */
.shot-bg .product,
.shot-bg .demo,
.shot-bg .why-fast,
.shot-bg .chain{ background:rgba(255,255,255,.85); }
.shot-bg .chain.is-link{ background:var(--ink); }
.shot-bg .chains-take{ background:rgba(242,242,242,.9); }

/* ---------- Demonstrierte Produkte ---------- */
.demo-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:34px;
}
.demo{
  background:#fff; border:1px solid var(--line); border-top:3px solid var(--red);
  padding:20px 22px 22px;
}
.demo-tag{
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--red-dark); margin-bottom:10px;
}
.demo h3{ font-size:19px; margin:0 0 8px; }
.demo p{ font-size:14px; line-height:1.5; color:#43464d; margin:0; }
@media (max-width:900px){ .demo-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .demo-grid{ grid-template-columns:1fr; } }

/* ---------- Produktideen ---------- */
.ideas{ margin-top:52px; padding-top:38px; border-top:1px solid var(--line); }
.ideas .sub-head{ margin-top:0; }
.ideas-lead{
  font-size:16px; line-height:1.55; color:#43464d; max-width:64ch; margin:10px 0 0;
}

/* ---------- Ueberschrift ueber dem Kennzahlen-Block ---------- */
.stat-block-head{
  /* Stand auf 11px in Rot — und zwar ueber der Rotorblatt-Fotografie, wo die
     Abdunklung rechts nur noch 30-38 % betraegt. Rot auf Foto war die Ursache;
     Weiss bringt den Kontrast auch an der hellsten Stelle ueber 10:1.
     Der rote Akzent bleibt der Seite an .stat-effect und .moat-take erhalten.
     Muth, 08.09.2026. */
  display:block; font-size:14px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:#fff; margin-bottom:14px;
  text-shadow:0 2px 10px rgba(0,0,0,.85);
}

/* Prozessketten: die alte .routes-Umrandung entfaellt, der Block ist jetzt ein eigener Abschnitt */
#chains .flow{ margin-top:26px; }

/* ---------- Kontrast auf den Bildhintergruenden nachziehen ---------- */
/* Weiss-Auflage oben staerker, damit Ueberschrift und Lead sicher lesen;
   nach unten duenner, damit das Motiv bei den Karten durchkommt. */
.shot-bg::after{
  background:linear-gradient(180deg,
    rgba(255,255,255,.86) 0%,
    rgba(255,255,255,.70) 22%,
    rgba(255,255,255,.58) 45%,
    rgba(255,255,255,.62) 100%);
}
/* .shot-bg .eyebrow entfaellt — #5c5f66 ist seit 08.09.2026 die Vorgabe */
.shot-bg h2 .g, .shot-bg h3 .g{ color:#6e7278; }

/* Zwei helle Bildabschnitte stossen aneinander — sichtbare Kante und eigener Grundton */
#chains{ background:#efefef; border-top:1px solid var(--line); }

/* ---------- Trennlinien ueber den Bildhintergruenden ----------
   1 px in 12 % Grau ist auf Weiss richtig dosiert, ueber dem hellgrauen Foto
   flimmert es und liest sich wie ein Pixelfehler. Dort deutlich kraeftiger. */
.shot-bg .ideas,
.shot-bg .also,
.shot-bg .fast-note{ border-top:2px solid rgba(0,0,0,.30); }
.shot-bg .flow-steps{
  border-top:2px solid rgba(0,0,0,.30);
  border-bottom:2px solid rgba(0,0,0,.30);
}

/* ---------- Logo neben dem Briefing-Formular ---------- */
.form-row-logo{
  display:flex;
  align-items:flex-start;
  gap:56px;
}
.form-row-logo .briefing-form{ flex:0 1 680px; }
.form-logo{
  flex:0 1 300px;
  align-self:center;
  width:100%;
  max-width:300px;
  height:auto;
  opacity:.9;
}
/* Darunter bleibt keine Flaeche uebrig — gestapelt waere das Logo nur ein Klotz. */
@media (max-width:900px){
  .form-row-logo{ display:block; }
  .form-logo{ display:none; }
}

/* ---------- Bildunterschrift in einer Karte ----------
   Gefunden am 02.09.2026: `.dark .caption` faerbte den Text weiss, weil die
   Sektion dunkel ist — die Karte darunter ist aber weiss. Gemessen 1,0:1,
   also unsichtbar; betroffen waren beide Infografik-Unterschriften. Die
   dritte lag mit 3,23:1 ebenfalls unter den noetigen 4,5:1.
   Die Karte bestimmt die Farbe, nicht die Sektion. */
.card .caption,
.dark .card .caption{ color:#5a5d64; padding:12px 16px 14px; }

/* ---------- Infografiken vergroessern ---------- */
@media (min-width: 761px){
  img.zoomable{ cursor:zoom-in; }
  img.zoomable:focus-visible{ outline:2px solid var(--red); outline-offset:-2px; }
  .is-zoom .caption::after{ content:" · Click to enlarge"; color:#8a8d93; }
}
/* Der Dialog fuellt das Fenster und zentriert per Flex. Ein enger Dialog
   waere kein Klickziel fuer "daneben klicken" — so ist die ganze Flaeche
   ausserhalb des Bildes der Schliesser. */
dialog.lightbox{
  border:0; padding:0; margin:0; background:transparent;
  inset:0; width:100%; height:100%; max-width:100%; max-height:100%;
  overflow:hidden;
}
dialog.lightbox[open]{ display:flex; align-items:center; justify-content:center; }
dialog.lightbox::backdrop{ background:rgba(12,13,15,.9); }
.lightbox-inner{ position:relative; max-width:94vw; max-height:94vh; }
dialog.lightbox img{
  display:block; max-width:94vw; max-height:94vh;
  width:auto; height:auto;
  background:#fff; border-radius:var(--radius);
  box-shadow:0 30px 90px rgba(0,0,0,.55);
}
.lightbox-close{
  position:absolute; top:-15px; right:-15px;
  width:38px; height:38px; border-radius:50%;
  border:0; cursor:pointer;
  background:var(--red-dark); color:#fff;
  font-size:22px; line-height:1;
}
.lightbox-close:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* ---------- Hero-Bild, nur mobil ----------
   Der Hero traegt unter 760 px sonst nur Text auf Textur. Motiv ist der
   Hintergrund aus dem Produkte-Abschnitt, hier als gerahmtes Bild. */
.hero-shot{ display:none; }