/* ============================================================================
   Branchenseiten — die schmale Ergaenzung
   Alles Uebrige kommt aus `ci.css` (Tokens) und `landing-v4.css`: Leiste, Fuss,
   Knoepfe, `.wrap`, `.sec`, `.eyebrow`, `.lede`, die Gegenueberstellung `.cmp`
   und der Abschluss-Block `.close`. Dadurch erben diese Seiten jede mobile
   Verbesserung der Landing automatisch mit, statt sie zu kopieren.
   Die alten sechs Branchenseiten tragen ihr CSS inline (je rund 108 KB). Das ist
   hier bewusst anders: eine geteilte Datei, sechs schlanke Seiten.
   ========================================================================== */

/* ---- Hero mit dem Branchenfoto ---------------------------------------------
   Ein ausgesuchtes Standbild je Branche statt des Films aus der Kachel. Grund und
   Auswahlkriterium stehen in `branchen-bauen.mjs`; kurz: die Filme waren als Motiv
   austauschbar, und ein Foto laedt bei einem Fuenftel der Bytes. */
.bhero{position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(470px,72vh,660px);display:flex;align-items:flex-end;
  padding:clamp(28px,5vh,64px) 0 clamp(30px,5vh,60px);
  background:var(--ink)}
/* ⚠️ `object-position` ist hier keine Feinheit, sondern noetig. Der Hero ist auf dem
   Handy HOCHFORMATIG (390 x 620), die Fotos sind querformatig — `cover` zeigt also nur
   den mittleren vertikalen Streifen, rund 42 % der Bildbreite. Bei einer Szene, deren
   Personen links und rechts stehen, bleibt davon die Deko in der Mitte uebrig (bei
   Pflege dreimal hintereinander passiert: Vase, Vorhang, Bild an der Wand).
   `--bhero-pos` je Seite setzt den Ausschnitt dorthin, wo das Motiv wirklich ist. */
.bhero-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--bhero-pos,50% 50%);z-index:-2}
/* ⚠️ Der Verlauf haelt sich OBEN zurueck und wird erst dort dunkel, wo Text steht.
   Die erste Fassung war fuer Filme gebaut (gleichmaessig .34 → .86) und hat die
   ausgesuchten Fotos erschlagen: nebeneinander gestellt war vom Physio-Motiv fast
   nichts mehr zu erkennen. Ein Bild, das man aussucht und dann zudeckt, haette man
   sich sparen koennen. Unten ist es jetzt sogar dunkler als vorher, damit die
   Schrift trotz hellerem Oberteil sicher steht. */
.bhero-schleier{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(8,12,22,.10) 0%,
    rgba(8,12,22,.20) 26%,
    rgba(8,12,22,.58) 48%,
    rgba(8,12,22,.82) 72%,
    rgba(8,12,22,.92) 100%)}
.bhero-in{position:relative;color:#fff}
.bhero-kat{display:inline-flex;align-items:center;gap:9px;margin:0 0 14px;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#EAF0FF}
.bhero-kat i{width:7px;height:7px;border-radius:2px;background:var(--blue);flex:0 0 auto}
.bhero h1{margin:0;max-width:16ch;color:#fff;
  font-size:clamp(2.1rem,min(6.4vw,7.4vh),4.4rem);line-height:1.04;
  letter-spacing:-.038em;text-wrap:balance}
.bhero h1 em{font-style:normal;color:#9DBBFF}
.bhero-lede{max-width:46ch;margin:clamp(14px,2vh,22px) 0 0;
  font-size:clamp(1rem,1.3vw,1.16rem);line-height:1.55;color:#E7ECF6;text-wrap:pretty}
.bhero-akt{display:flex;flex-wrap:wrap;gap:11px;margin-top:clamp(20px,3vh,30px)}

/* ---- Der Tag ---------------------------------------------------------------
   Ein Absatz, kein Zeitstrahl. Wer die Branche kennt, erkennt sich in vier
   Saetzen; wer sie nicht kennt, liest keine zwoelf Stationen. */
.btag{max-width:64ch}
.btag-t{margin-top:14px;font-size:clamp(1.06rem,1.4vw,1.25rem);line-height:1.6;
  color:var(--ink-2);text-wrap:pretty}
.btag-t b{font-weight:600;color:var(--ink)}

/* Derselbe Tag noch einmal, diesmal mit modvio. Er steht direkt nach der
   Gegenueberstellung und muss sich vom ersten Tag absetzen, ohne ihm zu widersprechen:
   eigene Flaeche, neutraler Rand rundum, Augenbraue in der Markenfarbe.
   ⚠️ KEIN akzentfarbener Kantenstreifen links (CLAUDE.md §8) — das ist das
   KI-Design-Klischee schlechthin. Der Unterschied kommt aus Flaeche und Label. */
.btag-neu{max-width:none;border:1px solid var(--line);border-radius:var(--r-l);
  background:linear-gradient(180deg,#F4F7FF 0%,#FBFCFF 100%);
  padding:clamp(24px,3vw,38px) clamp(20px,3vw,40px)}
.btag-neu .eyebrow{color:var(--blue-deep)}
.btag-neu .btag-t{max-width:64ch}

/* ---- Was bleibt ------------------------------------------------------------ */
.bbleibt{max-width:60ch}
.bbleibt h2{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.1;letter-spacing:-.032em}
.bbleibt .lede{margin-top:16px}
.bref{margin-top:clamp(20px,2.4vw,28px);padding-top:18px;border-top:1px solid var(--line);
  font-size:.95rem;color:var(--soft)}
.bref a{color:var(--blue-deep);font-weight:600;text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px}
.bref a:hover{color:var(--ink)}

/* ---- Handy ----------------------------------------------------------------- */
@media(max-width:640px){
  .bhero{min-height:clamp(440px,78svh,620px)}
  .bhero h1{font-size:clamp(2rem,8.6vw,2.6rem);max-width:none}
  .bhero-lede{font-size:1rem;max-width:none}
  /* Ein Weg traegt, der zweite tritt zurueck. Gleiche Logik wie im Landing-Hero. */
  .bhero-akt{flex-direction:column;flex-wrap:nowrap;align-items:stretch;width:100%;gap:9px}
  .bhero-akt .btn,.bhero-akt .btn-2{width:100%;justify-content:center}
  .btag-t{font-size:1.04rem}
}

/* Kein Bewegungs-Sonderfall mehr noetig: der Hero ist ein Standbild. */

/* ---- Der Umstieg -----------------------------------------------------------
   Drei Punkte, die im Erstgespraech wirklich kommen: Was wird aus meinen Daten,
   wie lange dauert es, muss mein Team etwas lernen. Uebernommen aus den bisherigen
   sechs Branchenseiten — dort war das der staerkste Abschnitt. */
.bum{display:grid;gap:clamp(18px,2.2vw,26px);margin-top:clamp(24px,3vw,34px);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.bum h3{font-size:1.02rem;font-weight:700;letter-spacing:-.022em;line-height:1.25;color:var(--ink)}
.bum p{margin-top:8px;font-size:.94rem;line-height:1.6;color:var(--soft);text-wrap:pretty}
/* Der Block steht im 60ch-Kasten von `.bbleibt` — fuer drei Spalten braucht er mehr. */
.bbleibt{max-width:none}
.bbleibt h2,.bbleibt>.lede{max-width:60ch}
@media(max-width:640px){
  .bum{grid-template-columns:1fr;gap:20px}
  .bum h3{font-size:1rem}
}

/* ---- Gegenueberstellung: Behauptung plus Folge ------------------------------
   `.cmp` kommt aus der Landing und traegt dort einzeilige Punkte. Auf den
   Branchenseiten hat jeder Punkt zusaetzlich einen Satz, der sagt WARUM er weh tut
   beziehungsweise WIE er geloest wird. Ohne den lesen sich alle zwoelf Seiten gleich,
   weil jede Branche dieselben sechs Stichworte hat.
   Nur hier ergaenzt, nicht in der Landing: `branche.css` laedt ausschliesslich auf
   diesen Seiten.
   ⚠️ Beides steckt in EINEM `.cmp-p`, nicht als zwei Geschwister im `li`: das `li` ist
   ein Raster aus 17px und Rest. Ein drittes Kind faellt in die naechste Rasterzeile und
   damit in die 17-px-Spalte — die Folge stand dann mit einem Wort pro Zeile da.
   `min-width:0` gehoert dazu, sonst weigert sich das Rasterfeld zu schrumpfen. */
.cmp-p{min-width:0}
.cmp-p b{display:block;font-weight:600}
.cmp-p>span{display:block;margin-top:5px;font-size:.9rem;line-height:1.55;font-weight:400}
.cmp-col.now .cmp-p>span{color:var(--faint)}
.cmp-col.new .cmp-p>span{color:var(--soft)}