/* BARZIK STUDIO v4 — Falldetail-Seiten (v4-fall-*.html), gemeinsam damit beide Cases identisch aufgebaut bleiben */
.fkopf{position:relative;overflow:hidden;isolation:isolate;padding:calc(var(--nav-h) + clamp(32px,5vh,64px)) var(--pad) clamp(28px,3.6vw,44px)}
.fkopf__in{max-width:var(--w);margin:0 auto;position:relative;z-index:1}
.fback{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fback:hover{color:var(--accent-cta)}
.fback svg{width:13px;height:13px}
.fbrow{margin-top:clamp(20px,2.6vw,30px);display:flex;flex-wrap:wrap;gap:10px}
.fbrow span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--muted);border:1px solid var(--rule-strong);padding:6px 11px}
.fkopf h1{margin-top:clamp(16px,2vw,24px);font-size:clamp(2.1rem,5vw,4.4rem);line-height:1.0;font-weight:700;letter-spacing:-.045em;max-width:22ch}
.fkopf h1 em{font-style:normal;color:var(--accent-cta)}
.fkopf__lead{margin-top:clamp(16px,2.2vw,26px);font-size:clamp(16px,1.6vw,21px);line-height:1.55;color:var(--body);max-width:52ch}
.fwrap{padding:0 var(--pad) clamp(28px,3.6vw,56px)}
.fpanel{max-width:var(--w);margin:0 auto;background:#fff;box-shadow:0 30px 80px -40px rgba(22,23,26,.35);padding:clamp(22px,2.8vw,48px)}
img.fhero{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--rule);background:var(--paper2);display:block}
.fhero{aspect-ratio:16/7;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(-45deg,#F4F1EA 0 10px,#ECE8DE 10px 20px);border:1px solid var(--rule)}
.fhero span{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--muted);background:rgba(255,255,255,.85);padding:8px 13px;text-align:center;line-height:1.5}
.fhero+figcaption{margin-top:10px;font-size:13px;color:var(--muted)}
/* Kennzahlen */
.fkpi{margin-top:clamp(22px,2.8vw,40px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule-strong)}
.fkpi>div{padding:clamp(18px,2.2vw,28px) clamp(20px,2.4vw,32px);border-left:1px solid var(--rule)}
.fkpi>div:first-child{border-left:0;padding-left:0}
.fkpi b{display:block;font-size:clamp(1.5rem,2.8vw,2.4rem);font-weight:700;letter-spacing:-.035em;line-height:1.05}
.fkpi span{display:block;margin-top:9px;font-size:14px;line-height:1.55;color:var(--body);max-width:26ch}
/* Zitat als dunkler Akt */
.fquote{background:var(--ink);color:#fff;padding:clamp(56px,8vh,110px) var(--pad)}
.fquote__in{max-width:var(--w);margin:0 auto;display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:clamp(20px,3vw,48px)}
.fquote__aside{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);padding-top:12px}
.fquote blockquote{margin:0;font-size:clamp(1.4rem,3.2vw,2.7rem);font-weight:700;line-height:1.28;letter-spacing:-.03em;max-width:26em}
.fquote blockquote em{font-style:normal;color:var(--accent)}
.fquote figcaption{margin-top:clamp(22px,3vw,36px)}
.fquote figcaption b{display:block;font-size:16px;font-weight:700}
.fquote figcaption p{font-size:13.5px;color:rgba(255,255,255,.5);margin-top:3px}
/* Akte: Nummer + Label links, Text rechts */
.fakte{display:grid}
.fakt{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(20px,3vw,56px);padding:clamp(24px,3vw,40px) 0;border-top:1px solid var(--rule)}
.fakt:first-child{border-top:0;padding-top:0}
.fakt__l{display:flex;flex-direction:column;gap:8px}
.fakt__l h2{font-size:clamp(1.25rem,2vw,1.7rem);font-weight:700;letter-spacing:-.03em}
.fakt p{font-size:clamp(15px,1.5vw,17.5px);line-height:1.6;color:var(--body);max-width:62ch}
.fakt p+p{margin-top:14px}
.fakt ul{margin-top:16px;display:grid;gap:8px}
.fakt li{position:relative;padding-left:18px;font-size:14.5px;line-height:1.55;color:var(--body)}
.fakt li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--accent-cta)}
/* Screenshots */
.fshots{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.2vw,32px)}
.fshot{margin:0}
.fshot__ph{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(-45deg,#F4F1EA 0 10px,#ECE8DE 10px 20px);border:1px solid var(--rule)}
.fshot__ph span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--muted);background:rgba(255,255,255,.85);padding:7px 12px;text-align:center;line-height:1.5}
.fshot figcaption{margin-top:12px;font-size:14px;line-height:1.6;color:var(--body)}
/* Gebaut-Liste */
.fbuilt__h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--rule-strong)}
.fbuilt__h h2{font-size:clamp(1.3rem,2.2vw,1.9rem);font-weight:700;letter-spacing:-.03em}
.fbuilt__h span{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--accent-cta)}
/* ⚠️ Vorher zeichnete die Liste ihre Linien als 1-px-Luecken ueber grauem Grund. Bei 14
   Eintraegen in 4 Spalten bleiben in der letzten Reihe zwei Zellen leer, und genau dort schien
   der graue Grund als Block durch. Jetzt echte Raender je Zelle: leere Stellen gibt es nicht
   mehr, die Reihe hoert einfach auf. */
.fbuilt ul{margin-top:clamp(18px,2.2vw,26px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.fbuilt li{background:#fff;padding:14px 16px;font-size:14px;color:var(--body);border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
/* Fuß: nächster Fall + Plattformzeile */
.fnext{max-width:var(--w);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,2.2vw,28px)}
.fnext a{background:#fff;padding:clamp(22px,2.6vw,36px);display:flex;flex-direction:column;gap:10px;box-shadow:0 24px 60px -40px rgba(22,23,26,.32);transition:background .25s,color .25s}
.fnext i{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fnext b{font-size:clamp(1.2rem,2vw,1.6rem);font-weight:700;letter-spacing:-.03em}
.fnext p{font-size:14px;line-height:1.55;color:var(--body)}
.fnext a:hover{background:var(--ink);color:#fff}
.fnext a:hover i,.fnext a:hover p{color:rgba(255,255,255,.6)}
.fplat{max-width:var(--w);margin:clamp(20px,2.6vw,32px) auto 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid var(--rule-strong);padding-top:18px}
.fplat p{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--muted)}
.fplat a{font-size:14px;font-weight:600}
@media (max-width:960px){
.fkpi{grid-template-columns:1fr}
.fkpi>div{border-left:0;border-bottom:1px solid var(--rule);padding-left:0;padding-right:0}
.fkpi>div:last-child{border-bottom:0}
.fquote__in{grid-template-columns:1fr}
.fquote__aside{padding-top:0}
.fakt{grid-template-columns:1fr;gap:14px}
.fshots{grid-template-columns:1fr}
.fbuilt ul{grid-template-columns:1fr 1fr}
.fnext{grid-template-columns:1fr}
.fhero{aspect-ratio:16/10}
}