/* Fallstudie v6.6 — alle acht Fallstudien und die Vorlage (data-v66).
   Zurück-Link · Firmen-Intro-Band · Sidebar ohne Firmentext · Hero-Variante ohneVideo. */
.fs66-kopf{padding-top:96px}
.fs66-zurueck{display:block;width:max-content;font-size:14px;line-height:20px;color:var(--text-3);text-decoration:none;transition:color .15s ease}
.fs66-zurueck:hover,.fs66-zurueck:focus-visible{color:var(--text-1)}
.fs66-zurueck:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
/* Band v6.6b, geteilt: links Textfläche 7/12 in --bg-1 (folgt dem Theme), rechts Foto 5/12, kein Text auf dem Foto.
   Rahmen 1px --line-soft als Überlagerung (::after), damit Band und Foto exakt 420px hoch sind. */
.fs66-band{position:relative;display:grid;grid-template-columns:minmax(0,1fr);margin-top:24px;border-radius:20px;overflow:hidden;background:var(--bg-1)}
.fs66-band::after{content:"";position:absolute;inset:0;border:1px solid var(--line-soft);border-radius:inherit;pointer-events:none;z-index:2}
.fs66-band-text{display:flex;align-items:center;box-sizing:border-box;padding:48px;min-width:0}
.fs66-band-inhalt{min-width:0}
.fs66-band-bild{position:relative;order:-1;aspect-ratio:16/9;min-width:0}
.fs66-band-bild img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.fs66-band-kante{display:none}
@media (min-width:1024px){
  .fs66-band{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:0;height:420px}
  .fs66-band-bild{order:0;aspect-ratio:auto;height:420px}
  .fs66-band-kante{display:block;position:absolute;left:0;top:0;bottom:0;width:96px;background:linear-gradient(90deg,var(--bg-1),rgba(0,0,0,0));pointer-events:none}
  .fs66-band--ohne-foto{grid-template-columns:minmax(0,1fr)}
}
.fs66-platte{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:200px;height:72px;padding:12px;border-radius:10px;background:#FFFFFF}
[data-theme="light"] .fs66-platte{border:1px solid var(--line-soft)}
.fs66-platte img{display:block;width:100%;height:100%;object-fit:contain}
.fs66-wort{font-size:18px;line-height:1;font-weight:600;letter-spacing:.14em;margin-right:-.14em;color:#1C1A17}
.fs66-mono{display:block;height:48px;width:auto}
.fs66-name{margin:20px 0 0;font-size:40px;line-height:1.15;font-weight:600;letter-spacing:-.02em;color:var(--text-1);text-wrap:balance}
.fs66-meta{margin:10px 0 0;font-size:16px;line-height:1.45;color:var(--text-3)}
.fs66-satz{margin:16px 0 0;max-width:58ch;font-size:18px;line-height:1.55;color:var(--text-2);text-wrap:pretty}
.fs66-web{display:inline-block;margin-top:20px;white-space:nowrap;font-size:16px;line-height:1.45;color:var(--text-2);text-decoration:underline;text-decoration-color:var(--line-strong);text-decoration-thickness:1px;text-underline-offset:3px}
.fs66-web:hover{color:var(--text-1);text-decoration-color:currentColor}
.fs66-web:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
.fs66-band--ohne-foto .fs66-band-inhalt{max-width:58ch}
@media (max-width:767.98px){
  .fs66-band-text{padding:24px}
  .fs66-platte{width:160px;height:56px}
  .fs66-wort{font-size:16px}
  .fs66-name{font-size:30px}
}
/* Firmen-Intro Variante B: Foto oben 16/6 (unter 1024: 16/9), Logo-Platte mittig; Panel --bg-1 mit Text + Faktenliste. */
.fs66-b{position:relative;margin-top:24px;border-radius:20px;overflow:hidden;background:var(--bg-1)}
.fs66-b::after{content:"";position:absolute;inset:0;border:1px solid var(--line-soft);border-radius:inherit;pointer-events:none;z-index:2}
.fs66-b-foto{position:relative;aspect-ratio:16/9}
/* theme.css gibt jeder section ab 769px den Kantenrand als padding; das Foto reicht trotzdem bis an die Box-Kanten */
@media (min-width:769px){.fs66-b-foto{margin-left:calc(-1 * var(--kante-rand));margin-right:calc(-1 * var(--kante-rand))}}
.fs66-b-foto>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.fs66-b-platte{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:200px;height:88px;padding:14px;border-radius:12px;background:#FFFFFF}
.fs66-b-platte img{display:block;width:100%;height:100%;object-fit:contain}
.fs66-b-platte img[data-dunkel]{filter:brightness(0)}
.fs66-b-panel{display:grid;grid-template-columns:minmax(0,1fr);row-gap:24px;align-items:start;padding:40px 48px}
.fs66-b-text{min-width:0}
.fs66-b-kicker{margin:0 0 8px;font-size:13px;line-height:1.4;color:var(--text-3)}
.fs66-b-name{margin:0;font-size:36px;line-height:1.15;font-weight:600;letter-spacing:-.02em;color:var(--text-1);text-wrap:balance}
.fs66-b-satz{margin:12px 0 0;max-width:48ch;font-size:18px;line-height:1.55;color:var(--text-2);text-wrap:pretty}
.fs66-b .fs66-web{margin-top:20px}
/* Faktentabelle: Zeilen ≥48px (12 + 24 + 12), Hairline unten außer der letzten. Icon + Label --text-3, Wert --text-1.
   align-items:start: einzeilig steht alles mittig (Zeilenhöhe 24 = Icon-Zelle), bei Umbruch bleiben Icon/Label oben. */
.fs66-b-fakten{display:block;margin:0;padding:0;border-top:1px solid var(--line-soft);min-width:0}
.fs66-b-zeile{display:grid;grid-template-columns:18px 148px minmax(0,1fr);column-gap:12px;align-items:start;box-sizing:border-box;min-height:48px;padding:12px 0;border-bottom:1px solid var(--line-soft);font-size:16px;line-height:24px}
.fs66-b-zeile:last-child{border-bottom:0}
.fs66-b-ico{display:block;width:18px;height:18px;margin-top:3px;color:var(--text-3)}
.fs66-b-zeile dt{color:var(--text-3)}
.fs66-b-zeile dd{margin:0;min-width:0;font-weight:600;color:var(--text-1);overflow-wrap:anywhere}
.fs66-b-nw{white-space:nowrap}
.fs66-b-zeile dd a{color:var(--text-1);text-decoration:underline;text-decoration-color:var(--line-strong);text-decoration-thickness:1px;text-underline-offset:3px}
.fs66-b-zeile dd a:hover{text-decoration-color:currentColor}
.fs66-b-zeile dd a:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
@media (min-width:1024px){
  .fs66-b-foto{aspect-ratio:16/5}
  .fs66-b-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:0}
  .fs66-b-text{padding-right:48px}
  .fs66-b-fakten{border-top:0;border-left:1px solid var(--line-soft);padding-left:48px}
}
@media (max-width:767.98px){
  .fs66-b-panel{padding:24px}
  .fs66-b-name{font-size:30px}
  .fs66-b-platte{width:160px;height:70px;padding:12px}
  /* Schmal: Wert unter dem Label (eigene Flucht ab Label-Kante), damit lange nowrap-Einträge nicht überlaufen. */
  .fs66-b-zeile{grid-template-columns:18px minmax(0,1fr);row-gap:2px}
  .fs66-b-zeile dd{grid-column:2}
}
/* Sidebar: Mono-Logo in einem Feld 220×56, object-fit contain — breite Wortmarken füllen die Breite, kompakte Logos die Höhe. */
[data-v66] .fs6-logo{display:block;width:auto;height:auto;max-width:220px;max-height:56px;object-fit:contain;object-position:left center}
[data-v66] .fs6-logo[data-breit]{width:220px}
[data-v66] .fs6-logo[data-hoch]{height:56px}
/* Hero ohneVideo: H1 und Lead über die volle 8/12-Spalte */
.fs66-hero--breit .fs6-lead{max-width:62ch}

/* Story-Hero v6.6d: volle Containerbreite, 64px unter dem Band, 80px bis zum Zweispalten-Layout (beginnt mit 01).
   ≥1024: 12er-Raster, Text 7/12, Video 5/12. figure = display:contents → Fassade (Zeile 1) und Bildunterschrift (Zeile 2)
   sind eigene Rasterzellen; der Textblock zentriert sich nur am Videorahmen, die Bildunterschrift zählt nicht mit.
   H1: jede Zeile ein eigener Span, nowrap — bricht nie innerhalb der Zeile; die Größe skaliert mit clamp. */
.fs66-hero{display:grid;grid-template-columns:minmax(0,1fr);row-gap:40px;padding-top:64px}
.fs66-hero+.fs6{padding-top:80px}
.fs66-hero-text{min-width:0}
.fs66-hero .fs6-h1{font-size:36px;line-height:1.05}
.fs66-hero .fs6-h1{display:flex;flex-direction:column;align-items:flex-start}
.fs66-zeile{display:inline-block;width:fit-content;max-width:100%}
/* Größe setzt fs66-h1.js (passt jede Zeile in die Spalte, min. 30px); die H1 schneidet nie ab. */
.fs66-hero .fs6-h1,.fs66-hero-text{overflow:visible}
.fs66-hero .fs6-lead{max-width:54ch;font-size:18px;line-height:1.55}
.fs66-hero .fs66-hero-video{margin:0;min-width:0}
@media (min-width:1024px){
  /* v6.6f: 6/12 + 6/12, Abstand 48px; Textblock mittig zum Videorahmen (Bildunterschrift eigene Zeile). */
  .fs66-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px;row-gap:0}
  .fs66-hero-text{grid-column:1;grid-row:1;align-self:center}
  .fs66-hero .fs66-hero-video{display:contents}
  .fs66-hero .fs66-hero-video>[data-fassade]{grid-column:2;grid-row:1}
  .fs66-hero .fs66-hero-video>figcaption{grid-column:2;grid-row:2;margin-top:12px}
  .fs66-hero .fs6-h1{font-size:clamp(32px,2.9vw,40px);line-height:1.08}
  .fs66-zeile{white-space:nowrap;width:max-content;max-width:none}
  .fs66-hero .fs6-lead{font-size:17px;line-height:1.55;max-width:48ch}
  .fs66-hero--ohne-video{grid-template-columns:minmax(0,1fr)}
  .fs66-hero--ohne-video .fs66-hero-text{max-width:calc((100% - 11 * 24px) / 12 * 8 + 7 * 24px)}
  .fs66-hero--ohne-video .fs6-lead{max-width:none}
}
/* Fassade wie im Inhaltsraster (dort .fs6-gebunden), hier Radius 18 + 1px --line-soft */
.fs66-hero [data-fassade]{border-radius:18px;background:var(--bg-1)}
.fs66-hero [data-fassade]::after{content:"";position:absolute;inset:0;border:1px solid var(--line-soft);border-radius:inherit;pointer-events:none;z-index:2}
.fs66-hero [data-fassade]>img{opacity:1!important}
.fs66-hero [data-fs6-verlauf]{display:none}
.fs66-hero [data-fassade] [data-play]{z-index:1}
.fs66-hero [data-fassade] [data-play] span{width:56px!important;height:56px!important;border:0!important;background:rgba(0,0,0,.55)!important;box-shadow:none!important}
.fs66-hero [data-fassade] [data-play]:hover span{background:rgba(0,0,0,.7)!important;box-shadow:none!important}
.fs66-hero [data-fassade] [data-play] span i{margin-left:4px!important;border-left:16px solid var(--text-1)!important;border-top:10px solid transparent!important;border-bottom:10px solid transparent!important}

/* ══ Abstandssystem v6.6e (nur data-v66): zwei Tokens statt Einzelwerten.
   --space-section 128: zwischen großen Blöcken · --space-block 80: zwischen Leistungsblöcken in 02. */
[data-v66]{--space-section:128px;--space-block:80px}
[data-v66] .fs66-kopf{padding-top:calc(72px + 32px)}
[data-v66] .fs66-hero{padding-top:var(--space-section)}
[data-v66] .fs66-hero+.fs6{padding-top:var(--space-section)}
[data-v66] .fs66-hero .fs6-lead{margin-top:24px}
[data-v66] .fs6-main>*+*{margin-top:var(--space-section)}
[data-v66] .fs6-nr{margin-bottom:12px}
[data-v66] .fs6-h2+.fs6-text,[data-v66] .fs6-h2+.fs6-block{margin-top:28px!important}
[data-v66] .fs6-block+.fs6-block{margin-top:var(--space-block)}
[data-v66] .fs6-block>p{margin-top:16px}
[data-v66] .fs6-block>.fs6-fenster--beleg,[data-v66] .fs6-block>.fs6-karte,[data-v66] .fs6-block>.graph-card,[data-v66] .fs6-block>.fs6-video--beleg,[data-v66] .fs6-block>[data-is-balken],[data-v66] .fs6-block>.fs6-ki-reihe,[data-v66] .fs6-block>.fs6-links{margin-top:32px!important}
[data-v66] .fs6-block>.fs6-quelle{margin-top:12px!important}
/* 03 → 04 und 04 → Erstgespräch: Erstgespräch hat eigenes Innenpolster clamp(56px,7vw,96px) — hier abgezogen. */
[data-v66] .fs6-ue{padding-top:var(--space-section);padding-bottom:calc(var(--space-section) - clamp(56px,7vw,96px))}

/* v6.6f Typografie: Titel 36/600, Untertitel 28/600; Untertitel 40px nach dem vorigen Beleg, --space-block nach dem Abschnittstitel, 16px zum Absatz. */
[data-v66] .fs6-h2{font-size:36px;font-weight:600}
[data-v66] .fs6-h3{font-size:28px;font-weight:600;letter-spacing:-.01em}
[data-v66] .fs6-h2+.fs6-block{margin-top:var(--space-block)!important}
[data-v66] .fs6-block+.fs6-block{margin-top:40px}
[data-v66] .fs6-block>.fs66-ki-voll{margin-top:32px!important}
@media (max-width:767.98px){[data-v66] .fs6-h2{font-size:30px}[data-v66] .fs6-h3{font-size:24px}}
/* KI-Beleg voll: Fenster in Spaltenbreite, Bild natuerliche Hoehe bis 460px, unten weich nach --bg-0. */
.fs66-ki-voll{position:relative;display:block;width:100%}
.fs66-ki-bild{position:relative;display:block;max-height:460px;overflow:hidden;margin:0 6px;border-radius:6px 6px 0 0;background:#FFFFFF}
.fs66-ki-bild img{display:block;width:100%;height:auto}
.fs66-ki-aus{position:absolute;left:0;right:0;bottom:0;height:140px;background:linear-gradient(180deg,rgba(var(--bg-0-rgb),0),rgb(var(--bg-0-rgb)));pointer-events:none}
/* Band-Foto füllt den Rahmen immer (kein Letterbox). */
.fs66-b-foto>img{object-fit:cover!important;object-position:50% 50%}
/* Hochformat-Clip: Fläche über die Spaltenbreite, Fassade 9:16 mittig, 460px hoch. Klick → Lightbox. */
.fs66-clip{display:flex;justify-content:center;margin:0;padding:32px;border-radius:16px;background:var(--bg-1);border:1px solid var(--line-soft)}
.fs66-clip [data-fassade]{position:relative;width:auto!important;height:460px!important;aspect-ratio:9/16!important;flex:none;overflow:hidden;border-radius:14px;background:#0E0E0C}
.fs66-clip [data-fassade]>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
[data-v66] .fs6-block>.fs66-clip{margin-top:32px}
@media (max-width:767.98px){.fs66-clip{padding:20px}.fs66-clip [data-fassade]{height:380px!important}}
[data-ol][data-hoch] [data-ol-box]{width:auto;height:min(86vh,860px);max-height:none;aspect-ratio:9/16}

/* ohneFoto: Logo-Platte im Panel über dem Kicker (nicht auf einem Foto) */
.fs66-b-platte--panel{position:static;transform:none;margin:0 0 24px}
/* Komplementär-Beleg: Katalog-Cover (Hochformat), Klick öffnet das PDF */
.fs66-katalog{display:block;width:min(100%,320px);margin-top:24px;border-radius:12px;overflow:hidden;border:1px solid var(--line-soft);background:var(--bg-1)}
.fs66-katalog img{display:block;width:100%;height:auto;transition:transform .3s ease-out}
.fs66-katalog:hover img{transform:scale(1.02)}
.fs66-katalog:focus-visible{outline:2px solid var(--focus);outline-offset:3px}