/* case.css — Case-Detail. Nutzt hero-v8.css, s2-v8.css (.ill), s8-v8.css, ft-v8.css, ref.css. Praefix cd-. */
.cd [hidden]{display:none!important}
.cd-hero{background:var(--v6-hero);padding:clamp(36px,4.4vw,56px) 0 clamp(64px,6.4vw,88px)}
.cd-hero .v6-in{display:grid;grid-template-columns:45% minmax(0,1fr);gap:clamp(32px,4.4vw,64px);align-items:center}
.cd-back{display:inline-flex;align-items:center;gap:6px;min-height:36px;font-size:13px;font-weight:600;color:var(--v6-ink-2)}
.cd-back:hover{color:var(--v6-blue-h)}
.cd-back svg{width:12px;height:12px;transform:rotate(180deg)}
.cd-meta-l{margin-top:18px;font-size:14.5px;font-weight:600;line-height:20px;color:var(--v6-blue-h)}
.cd-hero h1{margin-top:10px;font-size:clamp(40px,3.6vw,52px);font-weight:700;line-height:1.07;letter-spacing:-.02em;color:var(--v6-ink);text-wrap:balance}
.cd-intro{max-width:520px;margin-top:18px;font-size:18px;line-height:29px;color:var(--v6-ink)}
.cd-facts{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:24px}
.cd-facts dt{font-size:12.5px;font-weight:600;color:var(--v6-ink-2)}
.cd-facts dd{margin-top:2px;font-size:15px;font-weight:600;color:var(--v6-ink)}

/* Visual: editorialer Rahmen; Browserleiste nur, wenn das Bild sie braucht */
.cd-vis{position:relative;margin:0;aspect-ratio:16/11;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 1px 0 rgba(20,40,80,.06),0 24px 52px -38px rgba(20,40,80,.55)}
.cd-vis.has-chrome{padding-top:28px;border:1px solid #CFDAEE}
.cd-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cd-vis.has-chrome img{top:28px;height:calc(100% - 28px)}
.cd-chrome{position:absolute;left:0;right:0;top:0;height:28px;display:flex;align-items:center;gap:5px;padding:0 12px;background:#F7F9FD;border-bottom:1px solid #E6ECF6}
.cd-chrome i{width:7px;height:7px;border-radius:50%;background:#D5DDEA}
.cd-vph{background:linear-gradient(#EEF3FC,#EEF3FC);border:1px solid #D4E0F4;box-shadow:none}
.cd-vph span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#9AAED0}
.cd-vph svg{width:34px;height:34px}
.cd-vph b{font-size:14px;font-weight:600;color:var(--v6-ink-2)}
.cd-vph em{font-style:normal;font-size:11px;font-weight:600;letter-spacing:.08em;color:#8A93A5}
.cd-vis.sm{aspect-ratio:4/3}

.cd-sec{padding:clamp(88px,8.4vw,112px) 0}
.cd-sec.lb{background:var(--v6-hero)}
.cd-h2{font-size:40px;font-weight:700;line-height:48px;color:var(--v6-ink);text-wrap:balance}
.cd-txt{max-width:720px;margin-top:16px;font-size:18px;line-height:30px;color:var(--v6-ink);text-wrap:pretty}
.cd-k{font-size:13px;font-weight:600;line-height:18px;color:var(--v6-ink-2)}

/* Das Problem: ein Satz, duenne blaue Linie */
.cd-core{max-width:860px;margin-top:44px;padding-left:24px;border-left:3px solid var(--v6-blue)}
.cd-core p:not(.cd-k){margin-top:8px;font-size:28px;font-weight:600;line-height:38px;letter-spacing:-.01em;color:var(--v6-ink);text-wrap:pretty}

/* Ablauf-Komponente (Vorher/Heute identisch aufgebaut) */
.cd-flow{margin-top:44px}
.cd-flow-k{display:inline-block;padding:4px 10px;border-radius:5px;background:#E6ECF6;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--v6-ink-2)}
.cd-flow.now .cd-flow-k{background:var(--v6-blue);color:#fff}
.cd-flow ol{list-style:none;display:flex;flex-wrap:wrap;align-items:stretch;gap:12px 0;margin-top:16px}
.cd-flow li{position:relative;display:flex;align-items:center;gap:12px;min-width:0;padding:14px 16px;background:#fff;border:1px solid #DCE3EF;border-radius:12px}
.cd-flow li+li{margin-left:40px}
.cd-flow li+li::before{content:"";position:absolute;left:-34px;top:50%;width:28px;height:1.5px;background:#AFBCD2}
.cd-flow li+li::after{content:"";position:absolute;left:-10px;top:calc(50% - 3.5px);border:4px solid transparent;border-left:5px solid #AFBCD2;border-right:0}
.cd-flow.now li{border-color:#BFD2F8}
.cd-flow.now li+li::before{background:var(--v6-blue)}
.cd-flow.now li+li::after{border-left-color:var(--v6-blue)}
.cd-si{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px 12px 9px 13px;background:#EEF2F8;flex:0 0 auto}
.cd-flow.now .cd-si{background:#DCE8FB}
.cd-si svg{width:20px;height:20px;fill:none;stroke:#5A6272;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cd-flow.now .cd-si svg{stroke:var(--v6-ink)}
.cd-si svg .b{stroke:var(--v6-blue);fill:var(--v6-blue)}
/* modvio-Signet: vier volle Quadrate wie im Logo, ohne Kontur */
.cd-si svg .sg rect{fill:#0B0E14;stroke:none}
.cd-si svg .sg rect.hl{fill:var(--v6-blue)}
.cd-sl b{display:block;font-size:15px;font-weight:600;line-height:20px;color:var(--v6-ink)}
.cd-sl em{display:block;margin-top:2px;font-style:normal;font-size:13px;line-height:18px;color:#6B7280}
.cd-pains{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:32px}
.cd-pains li{display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:24px;color:var(--v6-ink)}

/* Loesung: Layout je nach Bildanzahl */
.cd-mods{display:grid;gap:24px;margin-top:clamp(40px,4.6vw,56px)}
.cd-mods.m-a{grid-template-columns:minmax(0,1fr)}
.cd-mods.m-a .cd-vis{aspect-ratio:16/8}
.cd-mods.m-c{grid-template-columns:repeat(2,minmax(0,1fr))}
.cd-mods.m-b{grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-rows:auto auto}
.cd-mods.m-b .cd-mod:first-child{grid-row:1/span 2}
.cd-mods.m-b .cd-mod:first-child .cd-vis{aspect-ratio:auto;height:100%;min-height:360px}
.cd-mods.m-d{grid-template-columns:repeat(3,minmax(0,1fr))}
.cd-mod{display:flex;flex-direction:column;min-width:0}
/* Bausteine ohne Bild: ruhige Textspalten mit blauer Oberlinie */
.cd-mods.m-t{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,44px)}
.cd-mod.txt{padding-top:18px;border-top:2px solid var(--v6-blue)}
.cd-mod.txt figcaption{margin-top:0}
.cd-mod figcaption{margin-top:14px}
.cd-mod figcaption span{font-size:12.5px;font-weight:600;color:var(--v6-ink-2)}
.cd-mod figcaption b{display:block;margin-top:2px;font-size:20px;font-weight:700;line-height:28px;color:var(--v6-ink)}
.cd-mod figcaption p{margin-top:4px;font-size:16px;line-height:25px;color:var(--v6-ink-2)}
.cd-impl{margin-top:36px}
.cd-impl ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:10px}
.cd-impl li{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:var(--v6-ink)}
.cd-impl svg{width:14px;height:14px;color:var(--v6-blue)}
.cd-tech{margin-top:24px;font-size:14px;line-height:22px;color:var(--v6-ink-2)}

/* Uebergang Vorher -> modvio -> Heute (nur mit Daten) */
.cd-tr{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 18px;margin-bottom:40px;font-size:14px;line-height:20px;color:var(--v6-ink-2)}
.cd-tr b{font-weight:600;color:var(--v6-ink)}
.cd-tr .mk{display:inline-grid;grid-template-columns:1fr 1fr;gap:2px;width:14px;height:14px;vertical-align:-2px}
.cd-tr .mk i{background:#0B0E14;border-radius:30%}
.cd-tr .mk i:last-child{background:var(--v6-blue)}
.cd-tr .ln{width:36px;height:1.5px;background:var(--v6-blue)}

/* Ergebnisse */
.cd-met{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:44px}
.cd-met b{display:block;font-size:52px;font-weight:700;line-height:1.05;letter-spacing:-.025em;color:var(--v6-blue)}
.cd-met span{display:block;margin-top:10px;font-size:16px;line-height:24px;color:var(--v6-ink-2)}
.cd-out{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:44px}
.cd-out .ill{width:76px;height:76px;margin:0}
.cd-out .ill svg{width:76px;height:76px}
.cd-out h3{margin-top:16px;font-size:20px;font-weight:700;line-height:28px;color:var(--v6-ink)}
.cd-out p{margin-top:6px;font-size:16px;line-height:25px;color:var(--v6-ink-2)}
/* Zitat */
.cd-q{max-width:860px;margin:0 auto;text-align:center}
.cd-q .m{display:block;height:36px;font-size:64px;font-weight:700;line-height:1;color:var(--v6-blue);opacity:.35}
.cd-q blockquote{margin-top:10px;font-size:26px;line-height:38px;color:var(--v6-ink);text-wrap:pretty}
.cd-q p{margin-top:22px;font-size:15px;line-height:22px;color:var(--v6-ink-2)}
.cd-q p b{display:block;color:var(--v6-ink)}
/* Galerie */
.cd-gal{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:20px;margin-top:40px}
.cd-gal .cd-vis:first-child{grid-row:1/span 2;aspect-ratio:auto;min-height:100%}
/* Naechste Referenz */
.cd-next{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:32px;align-items:center}
.cd-next>a{display:block}
.cd-next .k{font-size:13px;font-weight:600;color:#6B7280}
.cd-next h3{margin-top:6px;font-size:24px;font-weight:700;line-height:32px;color:var(--v6-ink)}

@media(max-width:1000px){
  .cd-hero .v6-in,.cd-next{grid-template-columns:minmax(0,1fr);row-gap:32px}
  .cd-hero .v6-in>*{min-width:0}
  .cd-mods.m-b,.cd-mods.m-c,.cd-mods.m-d,.cd-mods.m-t{grid-template-columns:minmax(0,1fr)}
  .cd-mods.m-b .cd-mod:first-child{grid-row:auto}
  .cd-mods.m-b .cd-mod:first-child .cd-vis{min-height:0;aspect-ratio:16/11}
  .cd-met,.cd-out,.cd-pains{grid-template-columns:minmax(0,1fr)}
  .cd-gal{grid-template-columns:minmax(0,1fr)}
  .cd-gal .cd-vis:first-child{grid-row:auto;aspect-ratio:16/11}
}
@media(max-width:760px){
  .cd-flow ol{flex-direction:column;align-items:stretch}
  .cd-flow li+li{margin-left:0;margin-top:28px}
  .cd-flow li+li::before{left:34px;top:-22px;width:1.5px;height:16px}
  .cd-flow li+li::after{left:30.5px;top:-8px;border:4px solid transparent;border-top:5px solid #AFBCD2;border-bottom:0}
  .cd-flow.now li+li::after{border-top-color:var(--v6-blue);border-left-color:transparent}
}
@media(max-width:600px){
  .cd-h2{font-size:30px;line-height:38px}
  .cd-hero h1{font-size:clamp(30px,8.4vw,38px);overflow-wrap:anywhere;hyphens:auto}
  .cd-core p{font-size:22px;line-height:31px}
  .cd-q blockquote{font-size:21px;line-height:31px}
  .cd-mods.m-a .cd-vis{aspect-ratio:16/11}
}
/* Naechste Referenz mit Aufnahme und Browserleiste: Format wie im Case-Hero statt 4:3, sonst fehlen die Seiten. */
.cd-vis.sm.has-chrome{aspect-ratio:16/11}
/* Fingerbedienung: Rueckweg „Alle Referenzen" mit voller Tippflaeche. */
@media(pointer:coarse){.cd-back{min-height:44px}}