/* TEC — Abschnitte. Eins zu eins aus den Boards in _design/. */

/* ---------- Navigation ---------- */
/* Kit setzt position:fixed — das schob den Hero unter den Header.
   sticky bleibt im Fluss, klebt aber beim Scrollen oben. */
.nav{
  position:sticky; top:0; z-index:50; height:auto;
  background:var(--ink); border-bottom:1px solid rgba(244,243,240,.10);
  backdrop-filter:none;
}
.nav-inner{ display:flex; align-items:center; height:var(--nav-h); }
.brand{ display:block; flex:none; }
.brand-logo{ width:68px; height:auto; display:block; }
.nav-links{ margin-left:auto; display:flex; align-items:center; gap:34px; }
.menu-knopf{ display:none; }
.nav-links a{ font-size:15px; color:var(--on-dark-2); text-decoration:none; }
.nav-links a:hover{ color:var(--on-dark); }
/* .nav-links a ist spezifischer als .btn — Knopffarbe zurückholen */
.nav-links a.btn{ color:var(--ink); }
.nav-links a.btn:hover{ color:var(--ink); }

/* ---------- Knopf ---------- */
.btn{
  display:inline-block; background:var(--accent); color:var(--ink);
  padding:18px 32px; font-size:16px; font-weight:800;
  text-decoration:none; white-space:nowrap; border:0; cursor:pointer;
}
.btn:hover{ background:var(--accent-dark); }
.btn.small{ padding:11px 22px; font-size:14px; font-weight:700; }
.btn-note{ font-size:14px; line-height:1.5; color:var(--on-dark-4); max-width:30ch; }

/* ---------- 1 · Hero ---------- */
.hero{ background:var(--ink); color:var(--on-dark); position:relative; isolation:isolate; }

/* Technische Zeichnung hinter dem Hero (TE, 27.09.2026). Sie kommt
   freigestellt mit Alphakanal — deshalb wird sie als MASKE benutzt, nicht als
   Bild: die Farbe bestimmt dann das Stylesheet, und die Datei traegt nur die
   Form. Signalgelb, durch Transparenz auf Anthrazit abgedunkelt.
   Sie haengt an der .wrap, nicht am Fenster: so endet sie rechtsbuendig mit
   dem Portraet statt am Bildschirmrand, und ihre Hoehe ist die Portraethoehe
   (TE, 27.09.2026). */
.hero .wrap{ position:relative; isolation:isolate; }
.hero .wrap::before{
  /* 24 px sind der Innenabstand der .wrap — abgezogen endet die Maske
     genau an der Portraetkante, nicht daneben. */
  content:""; position:absolute; top:0; right:24px; bottom:0; left:24px;
  z-index:-1; pointer-events:none;
  background:var(--zeichnung, #CDBD41);
  /* Breite statt Hoehe als Bezug: so passt die Zeichnung in die Textspalte,
     statt seitlich auszubrechen (TE, 27.09.2026). Sie steht dadurch nicht mehr
     portraethoch, sondern sitzt am unteren Rand. */
  -webkit-mask:url("../images/technische-zeichnung-hero.webp") right bottom / 100% auto no-repeat;
          mask:url("../images/technische-zeichnung-hero.webp") right bottom / 100% auto no-repeat;
  opacity:.3;
}
.hero .wrap{ display:flex; gap:48px; }
.hero-text{ flex:1.32; min-width:0; padding-top:20px; }
.hero h1{ margin-bottom:26px; }
.hero .lead{ font-size:19px; line-height:1.55; color:var(--on-dark-2); max-width:42ch; margin-bottom:34px; }
/* Der erste Satz steht allein: oben die Behauptung, darunter, woran man sie merkt.
   Der Abstand ist der Uebergang — deshalb kleiner als der zum Knopf, aber gross
   genug, dass die beiden nicht als ein Block gelesen werden. */
.hero .lead-satz{ color:var(--on-dark); margin-bottom:20px; }
.hero .lead strong{ color:var(--on-dark); font-weight:600; }
.hero-cta{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.hero-bild{ flex:1; min-width:0; position:relative; overflow:hidden; }
.hero-bild img{ width:100%; height:100%; object-fit:cover; object-position:50% 18%; display:block; }
/* Das Portraet deckt voll — die Zeichnung endet an seiner linken Kante und
   laeuft nicht ueber die Person (TE, 27.09.2026). Eine Maske auf dem <img>
   hatte sie dort durchscheinen lassen; das war ein Zwischenstand. Der harte
   Uebergang, der anfangs stoerte, lag am Bildausschnitt der Zeichnung und
   ist mit der neuen Datei erledigt. */
/* Blendet das Portraet nach links ab und trennt es damit von der Zeichnung. */
.hero-verlauf{ position:absolute; inset:0;
  background:linear-gradient(90deg, var(--ink) 0%, rgba(23,26,28,0) 26%); }
/* Bildunterschrift im Portraet, unten rechts. Der eigene Verlauf darunter ist
   noetig, weil der Hero-Verlauf nur nach links abdunkelt — unten rechts liegt
   das helle Hemd. */
.hero-bu{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:74px 26px 20px; text-align:right;
  background:linear-gradient(0deg, rgba(23,26,28,.92) 0%, rgba(23,26,28,.78) 38%, rgba(23,26,28,0) 100%);
  pointer-events:none;
}
.hero-bu-name{ display:block; font-weight:700; font-size:15px; line-height:1.35; color:var(--on-dark); }
.hero-bu-rolle{ display:block; margin:3px 0 0 auto; max-width:38ch;
  font-size:13px; line-height:1.4; color:var(--on-dark-2); }

/* ---------- 2 · Litanei und Klammer ---------- */
.litanei{ padding-top:44px; }
.litanei h2{ font-size:clamp(26px,2.7vw,36px); }
.fragen{ display:flex; flex-direction:column; gap:18px; padding-left:26px; border-left:2px solid var(--accent); }
.fragen li{ font-size:18px; line-height:1.5; color:var(--on-dark-2); list-style:none; }
.fragen{ margin:0; padding-top:0; padding-bottom:0; }

.klammer{ margin-top:52px; padding-top:40px; border-top:1px solid var(--line-dark); }

/* Frage und Ueberlegung unter der Litanei, ueber dem Querstrich der Klammer
   (TE, 26.09.2026). Volle Breite, also ausserhalb des .split-Rasters. Die
   beiden Saetze sind beide Fragen — unterschieden werden sie deshalb ueber
   Groesse, Gewicht und Farbe, nicht ueber Satzzeichen. */
.frage-block{ margin-top:46px; }
/* Alternative zur Auszeichnungszeile: dieselbe Frage in normaler
   Schreibweise. Versalien und Sperrung bremsen das Lesen — bei einem Etikett
   egal, bei einer Frage kostet es Direktheit. Deutlich leiser als die
   Ueberschriften ringsum (34-36 px), damit der Block Scharnier bleibt und
   nicht zum eigenen Abschnitt wird. */
.frage-ruhig{
  font-size:22px; font-weight:600; line-height:1.35; letter-spacing:-.01em;
  color:var(--on-dark); margin:0 0 14px; max-width:46ch;
}
.frage{
  font-size:clamp(22px,2.2vw,30px); font-weight:800; line-height:1.2;
  letter-spacing:-.02em; color:var(--on-dark); margin:0; max-width:34ch;
}
.ueberlegung{
  font-size:18px; line-height:1.55; color:var(--on-dark-3);
  margin:16px 0 0; max-width:72ch;
}
/* Hintergrundbild (technische-zeichnung-maschinenbau.webp), abgedunkelt,
   laeuft hinter dem Text aus
   (TE, 17.09.2026). Das Bild reicht bis an den linken Bildschirmrand,
   ausgeblendet wird ueber eine Maske — nach rechts zum Text hin, oben und
   unten weich. Dunkel wird es ueber die Deckkraft auf dem Anthrazit-Grund. */
.klammer{ position:relative; isolation:isolate; }
.klammer::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  top:1px; bottom:-20px; left:calc(50% - 50vw); width:min(64vw, 940px);
  background:url("../images/technische-zeichnung-maschinenbau.webp") left top / cover no-repeat;
  opacity:.42;
  -webkit-mask-image:linear-gradient(90deg, #000 30%, transparent 100%),
                     linear-gradient(180deg, transparent 0, #000 16%, #000 72%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg, #000 30%, transparent 100%),
                     linear-gradient(180deg, transparent 0, #000 16%, #000 72%, transparent 100%);
          mask-composite:intersect;
}
/* Platz fuer ein Bild neben „Sichtbar werden" — vorgesehen sind Screenshots
   von Renobrac oder Soloia. Unter 1100 px blendet responsive.css .side aus. */
.bild-platzhalter{
  aspect-ratio:4/3; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; text-align:center;
  border:1px dashed rgba(244,243,240,.28); border-radius:2px;
  background:rgba(244,243,240,.04); padding:18px;
}
.bild-platzhalter .was{ font-size:13px; line-height:1.4; color:var(--on-dark-3); max-width:22ch; }

/* Die Zielzeile laeuft ueber beide Spalten (TE, 26.09.2026). .split ist eine
   Flexbox — mit flex-wrap bricht die Ueberschrift in eine eigene erste Zeile
   um, darunter stehen Seitenspalte und Text wie gehabt. Der Zeilenabstand
   muss dabei eigens gesetzt werden, sonst gaelte der 72-px-Spaltenabstand
   auch zwischen den Zeilen. */
.klammer{ flex-wrap:wrap; row-gap:20px; }
.klammer > .ziel{ flex:0 0 100%; max-width:none; }

.klammer .ziel{ font-family:var(--sans);  font-size:clamp(25px,2.5vw,34px); font-weight:800; line-height:1.16; letter-spacing:-.03em; margin-bottom:10px; }
.klammer .ziel .accent{ color:var(--accent); }
.klammer .abgrenzung{ font-size:20px; font-weight:600; color:var(--on-dark-3); margin-bottom:22px; }
.klammer p{ font-size:18px; line-height:1.55; color:var(--on-dark-2); max-width:52ch; }
/* Bullets im Klammer-Block: gleiche Schrift wie die Absaetze daneben,
   quadratischer Punkt in Oliv (TE, 19.09.2026) */
.klammer .bullets{ margin:0 0 14px; max-width:52ch; }
.klammer .bullets li{ font-size:18px; line-height:1.55; color:var(--on-dark-2);
  margin:0 0 10px; padding-left:22px; }
/* Der Punkt gilt seitenweit. Die Vorlage in components.css faerbt ihn mit
   var(--red) — die Variable gibt es bei TEC nicht, der Punkt war unsichtbar. */
.bullets li::before{ width:7px; height:7px; border-radius:0;
  top:calc(.775em - 3.5px); background:var(--accent); }

/* ---------- 3 · Wie wir arbeiten ---------- */
.schritt{ border-top:3px solid var(--accent); padding-top:20px; }
/* Nummer traegt den Ablauf: 24 px, Linie in Oliv (TE, 20.09.2026) */
.schritt .nr{ font-size:24px; font-weight:800; line-height:1.1; color:var(--text-mid); margin-bottom:10px; }
.schritt h3{ margin-bottom:11px; }
.schritt p{ color:var(--text-mid); margin:0; }

.aussen{ background:var(--bg-2); padding:30px 34px; display:flex; gap:40px; align-items:flex-start; margin-top:46px; }
.aussen > div{ flex:1; min-width:0; }
.aussen > div p{ max-width:46ch; }
.aussen .satz{ font-size:22px; font-weight:700; line-height:1.3; margin-bottom:12px; max-width:26ch; }
.aussen .beispiel{ flex:1; min-width:0; border-left:2px solid var(--text); padding-left:26px; }
.aussen .beispiel .label{ font-size:14px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--text-mid); margin-bottom:12px; }

/* ---------- 4 · Warum es bisher nicht klappte ---------- */
.wertlos{ display:flex; flex-direction:column; align-self:flex-end; }
.wertlos li{ padding:18px 0; border-top:1px solid var(--line-dark); font-size:17px; line-height:1.5; color:var(--on-dark-2); list-style:none; }
.wertlos li:last-child{ color:var(--on-dark); font-weight:600; }
.wertlos{ margin:0; padding:0; }

.felder{ margin-top:56px; padding-top:44px; border-top:1px solid var(--line-dark); }
.felder .satz{ margin-top:0;  font-size:clamp(22px,2vw,26px); font-weight:800; letter-spacing:-.025em; line-height:1.24; max-width:40ch; margin-bottom:34px; }
.feld{ border-top:2px solid var(--accent); padding-top:16px; }
.feld .label{ font-size:14px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.feld p{ font-size:16px; line-height:1.55; color:var(--on-dark-2); margin:0; }

/* ---------- 5 · Fälle ---------- */
.fall{ background:var(--bg); padding:38px 38px 34px; display:flex; flex-direction:column; gap:24px; }
.fall-kopf{ display:flex; flex-direction:column; align-items:flex-start; border-bottom:2px solid var(--text); padding-bottom:14px; gap:10px; }
.fall-kopf .firma{ font-size:23px; font-weight:800; letter-spacing:-.02em; line-height:1.6; }
/* Kategorie steht unter dem Namen, in Eyebrow-Groesse, grau (TE, 20.09.2026) */
.fall-kopf .branche{ align-self:flex-end; font-size:14px; font-weight:700; letter-spacing:.19em;
  text-transform:uppercase; color:var(--text-mid); }
/* Kundenlogo im Kartenkopf. Hoehe begrenzt, Breite laeuft mit dem Original —
   die Dateien bleiben unveraendert (TE, 20.09.2026). */
.fall-logo{ height:38px; width:auto; max-width:100%; }
/* Kurzvorstellung der Firma, direkt unter dem Strich im Kartenkopf.
   Ohne Ueberschrift (TE, 04.09.2026). Seit 21.09.2026 in derselben Groesse wie
   die uebrigen Absaetze der Karte — kein Sonderformat mehr, nur gedaempft. */
.fall .vorstellung{
  font-size:16px; line-height:1.62;
  margin:-8px 0 0; max-width:52ch;
}
.fall .label{ font-size:14px; font-weight:700; letter-spacing:.17em; text-transform:uppercase; color:var(--text-mid); margin-bottom:9px; }
.fall p{ font-size:16px; line-height:1.62; margin:0; }
.fall .gedaempft{ color:var(--text-mid); }
.fall .zitat{ border-left:3px solid var(--accent); padding-left:18px; font-size:17px; line-height:1.6; font-weight:500; }
.fall .quelle{ margin-top:auto; padding-top:18px; border-top:1px solid var(--line); font-size:15px; font-weight:600; color:var(--text-mid); }

/* Sichtbare Lücke: hier fehlt Material, das ist kein fertiger Text. */
.fehlt{
  display:inline-block; border:1px dashed var(--accent-dark); color:var(--text);
  background:rgba(205,189,65,.30); padding:1px 7px;
  font-size:14px; font-weight:600;
}

/* ---------- 6 · FAQ ---------- */
.faq-zitat{ margin-bottom:40px; max-width:74ch; }
.faq-zitat .label{ font-size:14px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-3); margin-bottom:12px; }
.faq-zitat blockquote{ margin:0; font-size:22px; line-height:1.45; color:var(--on-dark); padding-left:22px; border-left:3px solid var(--accent); }
.faq-item{ border-top:1px solid rgba(244,243,240,.16); padding-top:18px; }
.faq-item h3{ font-size:19px; font-weight:700; margin-bottom:10px; }
.faq-item p{ color:var(--on-dark-2); margin:0; }

/* ---------- 7 · Abschluss ---------- */
.abschluss{ display:flex; gap:72px; align-items:flex-end; }
.abschluss .text{ flex:1.2; min-width:0; }
.abschluss h2{ font-size:clamp(30px,3.2vw,42px); letter-spacing:-.035em; line-height:1.04; margin-bottom:22px; }
.abschluss p{ font-size:18px; line-height:1.58; color:var(--on-dark-3); max-width:46ch; margin:0; }
.abschluss .cta{ flex:0 0 auto; display:flex; flex-direction:column; gap:14px; align-items:flex-start; }

/* ---------- FAQ zum Ausklappen ---------- */
details.faq-item{ border-top:1px solid rgba(244,243,240,.16); padding:0; }
details.faq-item summary{
  /* Einzug von einer Zeichenbreite, TE 04.09.2026 — muss in dieser
     Kurzschreibweise stehen, sonst setzt sie ein spaeteres padding-left
     wieder auf 0. Die Haarlinie darueber laeuft bewusst durch. */
  list-style:none; cursor:pointer; padding:18px 34px 18px 1ch; position:relative;
  font-size:19px; font-weight:700; color:var(--on-dark);
}
details.faq-item summary h3{
  font:inherit; letter-spacing:inherit; line-height:inherit; margin:0; display:inline;
}
details.faq-item summary::-webkit-details-marker{ display:none; }
details.faq-item summary::after{
  content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  font-size:24px; font-weight:400; color:var(--accent); line-height:1;
}
details.faq-item[open] summary::after{ content:"–"; }
details.faq-item summary:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
details.faq-item p{ color:var(--on-dark-2); margin:0 0 20px; padding-left:1ch; max-width:52ch; }

/* ---------- Kundenstimme in der Agitation ---------- */
.kundenstimme{ margin-top:34px; }
.kundenstimme blockquote{
  margin:0; padding-left:26px; border-left:2px solid var(--on-dark-3);
  font-size:19px; line-height:1.5; color:var(--on-dark);
}
.kundenstimme .quelle{ padding-left:26px; margin-top:10px; font-size:15px; color:var(--on-dark-3); }
.kundenstimme .fehlt{ margin-left:8px; }

/* ---------- Abgrenzungstabelle ---------- */
.vergleich{ width:100%; border-collapse:collapse; font-size:16px; }
.vergleich th, .vergleich td{ padding:14px 12px; text-align:left; vertical-align:top; }
.vergleich thead th{
  font-size:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--on-dark-3); border-bottom:1px solid var(--line-dark); line-height:1.35;
}
.vergleich tbody th{ font-weight:600; color:var(--on-dark-2); white-space:nowrap; }
.vergleich tbody tr{ border-bottom:1px solid var(--line-dark); }
.vergleich td{ color:var(--on-dark-3); }
.vergleich td.ja{ color:var(--accent); font-weight:700; }
.vergleich tr.wir th, .vergleich tr.wir td{ color:var(--on-dark); font-weight:700; }
.vergleich tr.wir{ border-bottom:2px solid var(--accent); }

/* ---------- CTA im Mittelteil ---------- */
.cta-mitte-inner{ display:flex; gap:40px; align-items:center; justify-content:space-between; }
.cta-mitte h3{ font-size:24px; margin-bottom:8px; }
.cta-mitte p{ margin:0; max-width:44ch; }

/* ---------- Über mich ---------- */
.ueber{ display:flex; gap:48px; align-items:flex-start; margin-top:8px; }
.ueber-bild{
  flex:0 0 280px; aspect-ratio:4/5; background:var(--bg-2);
  display:flex; align-items:center; justify-content:center;
}
.ueber-text{ flex:1; min-width:0; }
.ueber-text h2{ margin-bottom:22px; }
.ueber-text p{ font-size:17px; line-height:1.62; max-width:52ch; }
.ueber-text em{ font-style:normal; font-weight:600; }

.felder-hell{ margin-top:56px; padding-top:44px; border-top:1px solid var(--line); }
.felder-hell .satz{ font-size:clamp(22px,2vw,26px); font-weight:800; letter-spacing:-.025em; line-height:1.24; max-width:40ch; margin-bottom:34px; }
.felder-hell .feld{ border-top:2px solid var(--text); padding-top:16px; }
.felder-hell .feld .label{ color:var(--text-mid); }
.felder-hell .feld p{ color:var(--text-mid); }

/* Lücken-Marker auf dunklem Grund — die helle Fassung wäre dort unlesbar. */
.dark .fehlt{
  color:var(--on-dark); border-color:var(--accent); background:rgba(205,189,65,.16);
}

/* ---------- Rechtsseiten ---------- */
.legal{ background:var(--bg); color:var(--text); }
.legal .wrap{ max-width:560px; }
.legal h1{ margin-bottom:34px; }
.legal h2{ font-size:24px; margin:46px 0 16px; }
.legal h3{ font-size:19px; margin:30px 0 10px; }
.legal p, .legal li{ font-size:16px; line-height:1.7; color:var(--text-mid); }
.legal p strong, .legal li strong{ color:var(--text); }
.legal .anschrift{ color:var(--text); font-weight:600; line-height:1.7; }
.legal a{ color:#6E6626; }
.legal .stand{ margin-top:56px; padding-top:20px; border-top:1px solid var(--line); font-size:15px; }
.legal .hinweis{
  border-left:3px solid var(--accent-dark); background:rgba(205,189,65,.16);
  padding:20px 24px; margin:30px 0;
}
.legal .hinweis p{ color:var(--text); margin:0 0 10px; }
.legal .hinweis p:last-child{ margin:0; }
.legal .hinweis ul{ margin:10px 0 0; padding-left:20px; }
.legal .hinweis li{ color:var(--text); }

/* ---------- Gesichter an den Fallstudien ----------
   Die Quelle wird zur Zeile aus Bild und Name. `align-items:center` statt
   baseline, sonst haengt der Kreis an der Schriftlinie. */
/* ---------- Kundenstimme in einer Fallkarte ----------
   Reihenfolge nach TE, 04.09.2026: erst das Ergebnis, dann das Zitat, dann
   der Sprecher. Vorher stand das Zitat vor dem Ergebnis — der Sprecher kam
   dadurch erst nach dem Ergebnis und schob es zwischen Aussage und Person.
   Als <figure> wiederholbar: Deutsche Mechatronics traegt zwei Stimmen. */
.fall .stimme{ margin:0; display:flex; flex-direction:column; gap:13px; }
.fall .stimme + .stimme{ padding-top:22px; border-top:1px solid var(--line); }
.fall .stimme blockquote{
  margin:0; border-left:3px solid var(--accent); padding-left:18px;
  font-size:17px; line-height:1.6; font-weight:500;
}
.fall .stimme figcaption{
  display:flex; align-items:center; gap:18px;
  font-size:15px; font-weight:700; color:var(--text);
}
.fall .stimme figcaption em{
  display:block; font-style:normal; font-weight:400;
  font-size:14px; color:var(--text-mid);
}
/* Kommentare in Klammern statt gelber Kaesten — TE loescht sie selbst im
   Texteditor, dort ist nur Text loeschbar, kein Markup. */
.fall .hinweis-klammer{ margin:0; font-size:14px; color:var(--text-mid); }
.fall .vorstellung .hinweis-klammer{ display:inline; }
.fall .quelle{ display:flex; align-items:center; gap:14px; }
/* 92 px, TE am 04.09.2026. Die Dateien sind 256 x 256 — ein Retina-Schirm
   braucht davon 184, also bleibt Spielraum. Groesser waere knapp, und Muths
   Foto liegt nur als 256er vor. */
.gesicht{
  width:92px; height:92px; flex:0 0 92px;
  border-radius:50%; object-fit:cover; display:block;
  border:1px solid var(--line);
}
/* Die frueheren `.gesichter`-Regeln (zwei ueberlappende Kreise) sind mit dem
   Umbau der Fallkarten entfallen: jede Stimme traegt jetzt ihr eigenes Foto. */

/* ---------- Portraet in "Ueber mich" ---------- */
.ueber-bild img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Dieselbe Bildunterschrift wie im Hero, im schmalen Bild enger gesetzt */
.ueber-bild{ position:relative; overflow:hidden; }
.ueber-bild .hero-bu{ padding:64px 16px 14px; }
.ueber-bild .hero-bu-name{ font-size:14px; }
.ueber-bild .hero-bu-rolle{ font-size:12px; }

/* ---------- Vorher — Nachher ----------
   Zwei Spalten, paarweise Zeilen. Die rechte Spalte greift bewusst den Hero
   auf: Der Leser hat oben ein Versprechen gelesen und findet es hier als
   pruefbare Liste wieder. Kein Icon — die Position sagt genug. */
.wandel{
  display:grid; grid-template-columns:1fr 1fr; gap:0 44px; margin-top:34px;
}
.wandel-kopf{
  font-size:14px; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
  padding-bottom:12px; border-bottom:2px solid var(--text); margin-bottom:4px;
}
.wandel-kopf.v{ color:var(--text-mid); border-bottom-color:var(--line); }
.wandel-kopf.n{ color:var(--text); }
.wandel .vorher, .wandel .nachher{
  padding:18px 0; border-top:1px solid var(--line); font-size:17px; line-height:1.5;
}
.wandel .vorher{ color:var(--text-mid); }
.wandel .nachher{ color:var(--text); font-weight:600; }

/* ---------- Der binaere Satz ---------- */
.binaer{
  margin-top:22px; max-width:44ch; font-size:18px; line-height:1.5;
  font-weight:400; color:var(--on-dark); padding-left:18px;
  border-left:3px solid var(--accent);
}
/* Nur der erste Satz traegt, der Rest erklaert (TE, 20.09.2026) */
.binaer strong{ font-weight:700; }
/* Der binaere Absatz steht rechts neben der Einleitung, nicht darunter
   (TE, 20.09.2026). Unter 1100 px stapelt .split ohnehin. */
.binaer-spalte{ display:flex; align-items:flex-start; }
.binaer-spalte .binaer{ margin-top:24px; max-width:40ch; }

/* ---------- Fallkarte in voller Breite (Variante C) ----------
   AeroLas oben quer, darunter die beiden anderen nebeneinander. Ohne die
   Innenaufteilung liefen die Zeilen auf 1000 px ueber 75 Zeichen. */
.fall.quer .quer-innen{ display:grid; grid-template-columns:1fr 1fr; gap:20px 44px; }
/* AeroLas-Banner oben in der AeroLas-Karte (TE, 17.09.2026) — randlos ueber
   die Kartenbreite, nicht hinter dem Text. Die Datei liefert TE; sie wird
   nicht veraendert. */
.fall.quer{ overflow:hidden; }
.fall.quer .fall-banner{
  display:block; width:calc(100% + 76px); max-width:none; height:auto;
  margin:-38px -38px 0;
}
.fall.quer .quer-links, .fall.quer .quer-rechts{ display:flex; flex-direction:column; gap:24px; }
.faelle-reihe{ margin-top:28px; }

/* Belege im Abschnitt "Über mich", Variante vom 24.09.2026: die Zahl traegt
   die Aussage, die Zeile darunter erklaert sie. Bewusst groesser als .label,
   sonst liest sich eine Zahl wie eine Rubrik. */
.feld .beleg{
  font-size:21px; font-weight:800; letter-spacing:-.01em; line-height:1.25;
  color:var(--text); margin-bottom:6px;
}
.feld .beleg + p{ font-size:15px; line-height:1.55; color:var(--text-mid); }

/* Platzhalter, solange ein Foto fehlt — gleiche Flaeche wie .gesicht,
   damit die Zeile nicht springt, wenn das Bild nachkommt. */
.gesicht-platz{
  width:92px; height:92px; flex:0 0 92px; border-radius:50%;
  border:1px dashed var(--line); display:flex; align-items:center;
  justify-content:center; text-align:center;
  font-size:12px; color:var(--text-mid);
}

/* Maschinenbau-Halle hinter "So laeuft unsere Zusammenarbeit" (TE, 17.09.2026).
   Die Datei hat TE bereits weich und hell angelegt; sie wird unveraendert
   eingebunden. Oben und unten laeuft das Bild in die Nachbarabschnitte aus. */
#vorgehen{ position:relative; isolation:isolate; }
#vorgehen::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url("../images/maschinenbau-fertigungshalle.webp") center / cover no-repeat;
  opacity:.35;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
/* Die Traeger und Maschinen im Bild sind so grau wie der Text. Deshalb nur in
   diesem Abschnitt dunklere Schrift (TE, 17.09.2026, 35 %). Gerechnet ueber
   die Bildpunkte: alles >= 4,5:1, grauer Ueberschriftenteil >= 3:1, Desktop
   und mobil. Der Kasten .aussen hat eigenen Grund und bleibt unberuehrt. */
#vorgehen > .wrap > .eyebrow,
#vorgehen > .wrap > .lead-muted,
#vorgehen .schritt .nr,
#vorgehen .schritt p{ color:var(--text); }
#vorgehen > .wrap > h2,
#vorgehen .schritt h3{ color:var(--ink); }
#vorgehen > .wrap > h2 .g{ color:var(--text-mid); }
#vorgehen .schritt{ border-top-color:var(--accent); }
/* Kleiner Abschluss-CTA unter dem Ablauf (TE, 18.09.2026) */
.ablauf-cta{ display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:14px 24px; margin-top:44px; }
.ablauf-cta p{ margin:0; font-size:20px; font-weight:700; letter-spacing:-.01em; color:var(--ink); }