/* ==========================================================================
   branche.css — Branchenseiten /restaurant und /fahrschule (C2)
   Wird NACH css/start.css geladen und ergänzt nur (Bausteine, Farben, Kopf und
   Kapitel-Leiste kommen aus start.css). Übersetzt aus dem finalen C0-Entwurf
   (design-b0/website-redesign/c0-final/branchenseite.dc.html), Glas-Chatfenster
   nach dem Bau-Prompt C2. Grund Beige, Akzent Schwarz, nur hell.
   Regeln, die start.css überschreiben, stehen unter .branchenseite.
   ========================================================================== */

/* ---------- Kopfleiste: aktive Seite ---------- */
.navlink[aria-current="page"]{color:var(--text);background:var(--glass)}

/* ---------- Hero (Vorlage: design-b0/website-redesign/c2-demo/variante1-glasfenster.dc.html) ---------- */
/* Inhalt mittig, 64 px unter der Kopfleiste. Nebeneinander ab 1232 px Fensterbreite
   (Text 413 + Abstand 40 + Bühne 731 = 1184 px Inhalt), darunter steht die Bühne zentriert unter dem Text. */
.branchenseite .hero{padding-top:64px;align-items:center}
.branchenseite .hero-text{flex:1 1 413px;max-width:none;gap:24px}
/* h1: gestapelt bis 72 px; nebeneinander der größte Wert, bei dem beide Zeilen einzeilig bleiben */
.branchenseite .hero-titel{font-size:clamp(38px,11vw,72px)}
@media (min-width:1232px){.branchenseite .hero-titel{font-size:56px}}

.hero-medien{flex:0 1 731px;min-width:0;margin-inline:auto}
/* Bühne wie Vorlage: Foto rechts 470×560, Fenster links 56 px unter der Foto-Oberkante,
   ragt unten über das Foto hinaus. Einzige Abweichung: Das Fenster überlappt das Foto
   höchstens 30 % der Fotobreite (Gesichter im Fahrschul-Foto) – bei schmaler Bühne
   schrumpft das Foto, die Überlappung wächst nicht. */
.hero-buehne{position:relative;padding-top:56px}
/* Teiler .705 statt .7: Überlappung bleibt mit kleinem Puffer unter 30 % (≈ 29,5 %) */
.hero-bild{position:absolute;top:0;right:0;width:min(470px,calc((100% - 400px) / .705));aspect-ratio:470/560;border-radius:24px;overflow:hidden;background:#e7dccb}
.hero-bild img{display:block;width:100%;height:100%;object-fit:cover}
.chat-hinweis{margin:14px 0 0;max-width:400px;font-size:13px;line-height:1.5;color:var(--text3)}

/* ---------- Glas-Chatfenster (Beispielgespräch) ---------- */
/* Glas aus start.css (.glass: .66 weiß, blur 26, saturate 160 %) – das Foto scheint durch */
.hero-chat{z-index:2;box-sizing:border-box;width:min(400px,100%);display:flex;flex-direction:column;border-radius:20px;box-shadow:inset 0 1px 0 #fff,0 14px 40px rgba(30,35,45,.09);transform-origin:50% 50%}
/* Hülle des Fensterinhalts: bei der Verwandlung zur Glasperle blendet js/branche.js sie aus (Deckkraft + Unschärfe) */
.chat-inhalt{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.chat-kopf{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--edge)}
.chat-avatar{width:32px;height:32px;border-radius:50%;background:#111113;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex:none}
.chat-namen{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.chat-betrieb{font-size:14px;font-weight:600;line-height:1.3}
/* Kontrast über dem Glas (Nachzug 1, Stufe 1): Demo-Zeile und Trennzeile dunkler (#45454c) */
.chat-art{font-size:12px;color:var(--text2)}
.chat-chip{flex:none}
.chat-verlauf{list-style:none;margin:0;padding:16px;display:flex;flex-direction:column;gap:10px}
.msg{position:relative;display:flex;flex-direction:column}
/* Blasen wie Vorlage – sie tragen ihren eigenen Grund (schwarz bzw. .9 weiß) */
.hero-chat .blase-gast{max-width:78%;padding:10px 14px;border-radius:16px 16px 4px 16px;background:#111113;color:#fff;font-size:14px;line-height:1.45}
.hero-chat .blase-bot,.hero-chat .blase-tippt{max-width:86%;box-sizing:border-box;padding:10px 14px;border-radius:16px 16px 16px 4px;background:rgba(255,255,255,.9);border:1px solid var(--edge);font-size:14px;line-height:1.5;color:var(--text)}
.hero-chat .punkte{height:18px}
/* Tipp-Punkte sitzen am Platz der folgenden Antwort; sichtbar nur im Ablauf */
.tipp{position:absolute;left:0;top:0;opacity:0;pointer-events:none}
.chat-formzeile{display:flex;justify-content:space-between;gap:8px;margin-top:8px;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.04);font-size:13px;color:var(--text);white-space:nowrap}
.chat-absenden{font-weight:600;white-space:nowrap}
.live-trenner{display:flex;align-items:center;gap:10px;margin:2px 16px 0;font-size:12px;font-weight:500;color:var(--text2);text-align:center}
.live-trenner::before,.live-trenner::after{content:"";flex:1 1 16px;height:1px;background:rgba(0,0,0,.12)}
.live-trenner span{flex:0 1 auto}
.chat-live{padding:10px 16px 16px}
.live-zeile{padding:0;border-top:0}
/* bis zum VOLL-Schritt gesperrt — nur am Mauszeiger erkennbar, Schrift bleibt voll lesbar */
.live-zeile .chatfeld:disabled{cursor:not-allowed;opacity:1;color:var(--text);-webkit-text-fill-color:var(--text);background:var(--glass2)}
.live-zeile .chatfeld:disabled::placeholder{color:var(--text3);-webkit-text-fill-color:var(--text3);opacity:1}
.live-zeile .senden:disabled{cursor:not-allowed;opacity:1}

/* ---------- Live-Chat im Hero (C2 Teil 2) ---------- */
/* widget.js setzt data-fixiert mit der ersten eigenen Frage. Beispiel, Trenner und Chip
   werden unsichtbar, behalten aber ihren Platz – das Fenster bleibt so hoch wie vorher.
   Der echte Verlauf (von widget.js) liegt genau über Beispiel + Trenner und scrollt innen;
   contain:size, damit er die Zeilenhöhen nicht mitbestimmt. */
#demo-chat[data-fixiert] .chat-inhalt{display:grid;grid-template-columns:minmax(0,1fr)}
/* alle in Spalte 1: sonst schiebt die automatische Platzierung Beispiel und Trenner in eine zweite Spalte */
#demo-chat[data-fixiert] .chat-kopf{grid-row:1;grid-column:1}
#demo-chat[data-fixiert] .chat-verlauf{grid-row:2;grid-column:1}
#demo-chat[data-fixiert] .live-trenner{grid-row:3;grid-column:1}
#demo-chat[data-fixiert] .chat-live{grid-row:4;grid-column:1}
#demo-chat[data-fixiert] .chat-verlauf,#demo-chat[data-fixiert] .live-trenner,#demo-chat[data-fixiert] .chat-chip{visibility:hidden}
/* nur mit data-fixiert: vorher hat der Bereich keine eigene display-Regel, hidden greift ohne start.css */
#demo-chat[data-fixiert] .reti-widget-hero-verlauf{grid-row:2/4;grid-column:1;contain:size;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px;padding:16px;box-sizing:border-box}
#demo-chat[data-fixiert] .reti-widget-hero-verlauf .blase-bot,#demo-chat[data-fixiert] .reti-widget-hero-verlauf .blase-gast{overflow-wrap:anywhere}
/* iPhones zoomen in Felder unter 16 px hinein (Emil 18.10.) */
@media (max-width:480px){.live-zeile .chatfeld{font-size:16px}}

/* ---------- Was gefragt wird ---------- */
.alltag{display:flex;flex-wrap:wrap;gap:36px;padding-top:104px}
.alltag-text{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:12px}
.alltag-liste{flex:2 1 520px;min-width:0;padding:6px 24px}
.alltag-liste dl{margin:0}
.alltag-zeile{display:flex;flex-wrap:wrap;gap:6px 24px;padding:18px 0;border-bottom:1px solid var(--edge)}
.alltag-zeile:last-child{border-bottom:0}
.alltag-zeile dt{flex:1 1 200px;font-size:16px;font-weight:600}
.alltag-zeile dd{flex:2 1 280px;margin:0;font-size:15px;line-height:1.55;color:var(--text2)}

/* ---------- Kacheln: Wieso wir? (Restaurant) bzw. Klassen (Fahrschule) ---------- */
.zeichen-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:0;padding:0;list-style:none}
.zeichen{padding:18px;display:flex;flex-direction:column;gap:6px}
.zeichen-k{font-size:30px;font-weight:600;letter-spacing:-.03em}
.zeichen-v{font-size:14px;line-height:1.4;color:var(--text2)}
/* Restaurant „Wieso wir?“: 4 Text-Kacheln statt Buchstaben */
.zeichen-raster.sicher{grid-template-columns:repeat(4,1fr)}
.zeichen-raster.sicher .zeichen-k{font-size:22px;letter-spacing:-.02em}
@media (max-width:900px){.zeichen-raster.sicher{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.zeichen-raster.sicher{grid-template-columns:1fr}}

/* ---------- Anfragen + Mail-Ausschnitt ---------- */
.anfragen{display:flex;flex-wrap:wrap;gap:40px;align-items:center;padding-top:120px}
.anfragen-text{flex:1 1 360px;min-width:0;display:flex;flex-direction:column;gap:12px}
.mail-karte{flex:1 1 420px;min-width:0;display:flex;flex-direction:column}
.mail-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:16px 20px;border-bottom:1px solid var(--edge)}
.mail-betreff{font-size:15px;font-weight:600}
.mail-felder{margin:0;padding:6px 20px 10px}
.mail-felder .zeile{justify-content:space-between;gap:16px}
.mail-felder dt{margin:0;flex:none}
.mail-felder dd{margin:0;min-width:0;color:var(--text);text-align:right;overflow-wrap:anywhere}

/* ---------- Bildband ---------- */
.bildband{padding-top:120px}
.bildband-figur{position:relative;margin:0}
.bildband-bild{border-radius:24px;overflow:hidden;background:#e7dccb}
.bildband-bild img{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover}
/* Glas wie das Chatfenster (.glass aus start.css) – das Foto scheint durch */
.bildband-zitat{position:absolute;left:28px;bottom:28px;max-width:min(520px,calc(100% - 56px));box-sizing:border-box;margin:0;padding:20px 24px;font-size:clamp(20px,2.2vw,26px);line-height:1.3;font-weight:600;letter-spacing:-.02em;color:var(--text)}
/* Benannte Ausnahme Restaurant-Band (C2 Nachzug 3, Hochformat-Foto): Gesicht, Handy und
   Tasse brauchen ≈ 2:1. Frei fürs Zitat ist die weiße Wand rechts oben neben dem Kopf
   (Haar endet bei ≈ 72 % der Breite) – ab 1180 px steht es dort, darunter unter dem Foto. */
.bildband-bild img[src*="restaurant-band"]{aspect-ratio:2/1}
@media (min-width:1180px){
  .bildband-bild:has(img[src*="restaurant-band"])+.bildband-zitat{left:auto;right:28px;top:28px;bottom:auto;max-width:calc(27% - 28px)}
}
@media (max-width:1179px){
  .bildband-bild:has(img[src*="restaurant-band"])+.bildband-zitat{position:relative;left:auto;bottom:auto;max-width:none;margin:12px 0 0}
}

/* ---------- Unser Ansatz (Karte vor dem Kontakt) ---------- */
.ansatz{padding-top:120px}
.ansatz-karte{align-items:flex-start}
.ansatz-liste{flex:1 1 380px;min-width:0}
.ansatz-liste strong{color:var(--text);font-weight:600}

/* ---------- Kontakt (schwarz, kurz) ---------- */
.kontakt-kurz{align-items:flex-end;gap:32px}
.kontakt-knoepfe{flex:0 1 340px;min-width:0;display:flex;flex-direction:column;gap:10px}
.kontakt-weg{background:transparent}

/* ---------- Fußzeile ---------- */
.bildnachweis{flex:1 1 100%;font-size:12px}

/* ---------- Kapitel-Leiste: entsteht aus dem Chatfenster (Vorlage design-b0/branchen-leiste) ---------- */
/* Glas, Knöpfe und Markierung aus start.css (.kapitel, .kap-glas, .kap-innen, .kap-marke); Lage, Größe,
   Deckkraft und --glow setzt js/branche.js. Leuchten außen blendet mit dem Aufgehen zur Leiste aus. */
.branchenseite .kapitel{--glow:1;box-shadow:0 0 0 5px rgba(255,255,255,calc(.45*var(--glow))),0 0 24px rgba(255,255,255,var(--glow)),0 8px 18px rgba(60,50,30,calc(.26*var(--glow)))}
/* Glasperle 22 px: Milchglas mit weißem Licht – das Chatfenster schrumpft zu ihr, sie geht zur Leiste auf */
.kap-perle{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 34% 28%,#fff 0%,rgba(255,255,255,.92) 30%,rgba(255,255,255,.55) 62%,rgba(226,218,204,.85) 100%);border:1px solid rgba(0,0,0,.13);box-shadow:inset 0 -3px 6px rgba(120,105,80,.18),inset 0 2px 3px #fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* ---------- Handy ---------- */
@media (max-width:640px){
  .hero-buehne{padding-top:0}
  .hero-bild{position:relative;width:100%;aspect-ratio:4/3}
  .hero-bild img[src*="fahrschule-hero"]{object-position:50% 15%}
  .hero-chat{width:auto;margin:-56px 10px 0}
  /* Formularzeile bleibt einzeilig: ihre Blase darf die volle Breite nutzen */
  .hero-chat .blase-bot:has(.chat-formzeile){max-width:100%}
  .chat-hinweis{margin-inline:10px}
  .alltag-liste{padding:2px 18px}
  .bildband-bild img,.bildband-bild img[src*="restaurant-band"]{aspect-ratio:4/3}
  .bildband-zitat{position:relative;left:auto;bottom:auto;max-width:none;margin:-48px 10px 0;padding:16px 18px}
}

/* ==========================================================================
   Bewegung — nur ohne „weniger Bewegung“. Ohne diese Regeln ist alles fertig:
   ganzes Gespräch sichtbar, keine Tipp-Punkte (die Verwandlung lässt js/branche.js dann aus).
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  /* Beispielgespräch: einmal ab dem Laden, gesamt ≈ 3,5 s (js/branche.js pausiert,
     solange das Fenster nicht im Bild ist; „Selbst fragen“ und Scrollen setzen .fertig) */
  .hero-chat{animation:chatEin .3s cubic-bezier(.2,.7,.2,1) .1s both}
  .hero-chat .m1{animation:chatBlase .3s cubic-bezier(.2,.8,.2,1) .6s both}
  .hero-chat .t1{animation:chatTippen .5s linear .8s both}
  .hero-chat .m2 .blase-bot{animation:chatBlase .3s cubic-bezier(.2,.8,.2,1) 1.3s both}
  .hero-chat .m3{animation:chatBlase .3s cubic-bezier(.2,.8,.2,1) 1.9s both}
  .hero-chat .t2{animation:chatTippen .5s linear 2.1s both}
  .hero-chat .m4 .blase-bot{animation:chatBlase .3s cubic-bezier(.2,.8,.2,1) 2.6s both}
  .hero-chat .chat-formzeile{animation:chatBlase .3s cubic-bezier(.2,.8,.2,1) 2.9s both}
  .hero-chat .m2 .chat-formzeile{animation-delay:1.6s}
  .hero-chat .live-trenner,.hero-chat .chat-live{animation:chatLeise .2s ease 3.3s both}
  .hero-chat.pausiert,.hero-chat.pausiert *{animation-play-state:paused!important}
  .hero-chat.fertig,.hero-chat.fertig *{animation:none!important}
  @keyframes chatEin{from{opacity:0;transform:translateY(16px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
  @keyframes chatEinFlach{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes chatBlase{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
  @keyframes chatTippen{0%{opacity:0}6%{opacity:1}94%{opacity:1}100%{opacity:0}}
  @keyframes chatLeise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  /* Handy/Touch: ohne Unschärfe (wie start.css) */
  @media (hover:none),(pointer:coarse){.hero-chat{animation-name:chatEinFlach}}
}