/* ====================  css/fallstudie.css  ====================
   Fallstudien zu Kundenprojekten (11.10.2026, René: „für jedes Kundenprojekt eine eigene Unterseite …
   moderne Mockups (iPhone, iPad und MacBook) … knallharter Vorher-nachher-Vergleich“). Erste Seite:
   /referenzen/figuren-antike/ (seiten/referenz-figuren-antike.html).

   Die Geraete sind reines CSS, die Bildschirme zeigen echte Aufnahmen (bau/bilder/fa-*.jpg) oder kurze
   Filme (assets/video/fallstudie/). Lange Aufnahmen laufen im Bildschirm von selbst durch (object-position
   wird animiert, das Bild bleibt ein einziges <img>). Vorher-nachher-Regler kommen aus css/vergleich.css und
   js/vergleich.js, hier nur an die Bildschirme angepasst. Zaehler, Ringe, Balken und Filme steuert
   js/fallstudie.js; ohne Skript stehen alle Endwerte da. */

/* ---------- Geraete ---------- */
.fs-mac{ position: relative; width: 100%; margin-inline: auto }
.fs-mac-deckel{
  position: relative;
  padding: 2.1% 2.1% 2.5%;
  border-radius: clamp(10px, 1.8vw, 22px) clamp(10px, 1.8vw, 22px) 6px 6px;
  background: linear-gradient(180deg, #17181d, #0c0d11);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 0 0 1.5px #2b2e36,
    0 60px 120px -50px rgba(0,0,0,.95);
}
.fs-mac-deckel::before{            /* Kameraaussparung */
  content: ""; position: absolute; z-index: 3; top: 0; left: 50%; transform: translateX(-50%);
  width: 12%; height: 2.6%; min-height: 9px;
  border-radius: 0 0 9px 9px; background: #0c0d11;
}
.fs-mac-fuss{
  position: relative; height: clamp(9px, 1.5vw, 18px); margin: 0 -5.5%;
  border-radius: 2px 2px 40% 40% / 2px 2px 100% 100%;
  background: linear-gradient(180deg, #e3e5ea 0%, #b9bcc3 38%, #82868f 100%);
  box-shadow: 0 30px 50px -18px rgba(0,0,0,.9);
}
.fs-mac-fuss::before{              /* Griffmulde vorne */
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 15%; height: 48%; border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #a6a9b0, #c9ccd2);
}
.fs-schirm{
  position: relative; overflow: hidden; background: #000;
  container-type: inline-size;
}
.fs-mac .fs-schirm{ aspect-ratio: 16 / 10; border-radius: 3px }

.fs-ipad{
  position: relative; width: 100%;
  padding: 3.6%;
  border-radius: 7% / 5%;
  background: linear-gradient(160deg, #1b1c21, #0b0c10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 0 1.5px #2b2e36, 0 50px 100px -45px rgba(0,0,0,.95);
}
.fs-ipad .fs-schirm{ aspect-ratio: 820 / 1180; border-radius: 3.2% / 2.2% }
.fs-ipad--quer{ border-radius: 5% / 7% }
.fs-ipad--quer .fs-schirm{ aspect-ratio: 4 / 3; border-radius: 2.2% / 3.2% }

.fs-phone{
  position: relative; width: 100%;
  padding: 3.2%;
  border-radius: 15% / 7%;
  background: linear-gradient(160deg, #24252b, #0b0c10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 0 0 1.5px #33363f, 0 50px 90px -40px rgba(0,0,0,.95);
}
.fs-phone .fs-schirm{ aspect-ratio: 402 / 874; border-radius: 12.5% / 5.8% }
.fs-phone::before{                 /* Dynamic Island */
  content: ""; position: absolute; z-index: 4; top: 4.6%; left: 50%; transform: translateX(-50%);
  width: 30%; height: 3.3%; border-radius: 99px; background: #050507;
}

/* Bildschirminhalt: Bild oder Film fuellt die Flaeche */
.fs-schirm > img, .fs-schirm > video{
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0;
}

/* Bildschirme sind scrollbar wie im Shop-Architekt von Section Monsters (René 11.10.2026: „mach das so, dass die
   seiten scrollbar sind in den mockups“): .fs-rolle ist ein eigener Scrollbereich, darin die ganze Seitenaufnahme
   in voller Laenge. Mit data-auto laeuft er von selbst auf und ab (js/fallstudie.js), bis man selbst scrollt. */
.fs-rolle{
  position: absolute; inset: 0;
  overflow: hidden auto; overscroll-behavior: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.38) transparent;
  -webkit-overflow-scrolling: touch;
}
.fs-rolle::-webkit-scrollbar{ width: 6px }
.fs-rolle::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.38); border-radius: 3px }
.fs-rolle:focus-visible{ outline: 2px solid var(--blau); outline-offset: -2px }
.fs-schirm .fs-rolle img{
  position: static; display: block; width: 100%; height: auto; object-fit: initial;
  pointer-events: none; -webkit-user-drag: none;
}
.fs-rolle-inhalt{ position: relative; display: grid; background: #0d0e12 }
/* Regler: alte und neue Fassung liegen im selben Rasterfeld uebereinander. Die laengere bestimmt die Hoehe;
   wo die alte Seite zu Ende ist, steht der Vermerk „Hier endet die alte Startseite.“ */
.fs-rolle-inhalt > *{ grid-area: 1 / 1; min-width: 0 }
.fs-schirm .fs-rolle .bv-nachher{ position: relative; inset: auto; align-self: start }
.fs-seite{ align-self: start }
.fs-ende{
  margin: 0; max-width: none; padding: 9% 6% 12%;
  text-align: left; font-size: clamp(.62rem, 2.2cqi, .95rem); letter-spacing: .14em; text-transform: uppercase;
  color: var(--rot); background: repeating-linear-gradient(135deg, rgba(224,72,58,.09) 0 10px, transparent 10px 20px);
  border-top: 1px dashed rgba(224,72,58,.5);
}

.fs-scrollhinweis{
  position: absolute; z-index: 6; left: 50%; bottom: 7%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 99px; pointer-events: none; white-space: nowrap;
  font-size: clamp(.58rem, 1.7cqi, .72rem); letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: rgba(5,6,12,.78);
  box-shadow: 0 0 0 1px rgba(140,170,240,.28), 0 10px 30px -10px rgba(0,0,0,.8);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: opacity .4s;
}
.fs-scrollhinweis::before{          /* kleine Maus mit Rad */
  content: ""; width: 9px; height: 14px; border: 1.5px solid currentColor; border-radius: 6px;
  background: linear-gradient(currentColor, currentColor) 50% 3px / 1.5px 3px no-repeat;
}
@media (prefers-reduced-motion: no-preference){
  .fs-scrollhinweis::before{ animation: fs-rad 1.6s ease-in-out infinite }
}
@keyframes fs-rad{ 0%, 100%{ background-position: 50% 3px } 50%{ background-position: 50% 7px } }
.fs-schirm.gescrollt .fs-scrollhinweis{ opacity: 0 }
/* Touchscreen: Ein Bildschirm faengt das Wischen erst nach einmal Antippen ab - sonst kommt man an grossen
   Geraeten kaum an der Seite vorbei. Bis dahin scrollt die Seite, und das Geraet laeuft von selbst. */
@media (pointer: coarse){
  .fs-rolle{ overflow: hidden }
  .fs-schirm.aktiv .fs-rolle{ overflow: hidden auto }
  .fs-scrollhinweis{ font-size: .6rem }
}

/* Vorher-nachher-Regler im Bildschirm (Grundlage: css/vergleich.css): Regler, Griff und Schilder stehen fest,
   darunter scrollen beide Aufnahmen gemeinsam - sie sind gleich hoch zugeschnitten. */
.fs-schirm .bv{ position: absolute; inset: 0 }
.fs-schirm .bv-buehne{
  aspect-ratio: auto; height: 100%; border-radius: 0; background: #000; box-shadow: none;
}
.fs-schirm .bv-nachher{ z-index: 1 }
.fs-schirm .bv-linie, .fs-schirm .bv-marke{ z-index: 5 }
.fs-schirm .bv-marke{ font-size: clamp(.55rem, 1.6cqi, .7rem) }
.bv-marke--vorher{ background: rgba(224,72,58,.92) }
.bv-marke--nachher{ background: linear-gradient(96deg, var(--blau), var(--violett)) }

.fs-unterschrift{
  margin-top: 16px; font-size: .86rem; line-height: 1.5; color: var(--text-leise); max-width: none; text-align: center;
}
.fs-unterschrift .b{ color: var(--text); font-weight: 500 }

/* ---------- Einstieg ---------- */
.fs-kopf{
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 72px); align-items: center;
}
.fs-kopf .satz{ max-width: none }
.fs-kopf h1{ font-size: clamp(2.6rem, 5.4vw, 5.6rem) }
.fs-buehne{ position: relative; perspective: 1800px; padding-bottom: 6%; }
.fs-buehne-innen{
  position: relative; transform-style: preserve-3d;
  transform: rotateX(var(--rx, 5deg)) rotateY(var(--ry, -9deg));
  transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}
.fs-buehne .fs-phone{
  position: absolute; width: 23%; right: -3%; bottom: -8%;
  transform: translateZ(70px) rotate(2deg);
}
.fs-abzeichen{
  position: absolute; left: -5%; bottom: 4%; z-index: 5;
  display: grid; place-items: center;
  width: clamp(96px, 11vw, 138px); aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(5,6,12,.86);
  box-shadow: 0 0 0 1px rgba(140,170,240,.25), 0 20px 50px -20px rgba(0,0,0,.9);
  transform: translateZ(110px);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.fs-abzeichen svg{ position: absolute; inset: 7%; width: 86%; height: 86%; transform: rotate(-90deg) }
.fs-abzeichen-wert{ font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 600; letter-spacing: -.02em; color: #fff; line-height: 1 }
.fs-abzeichen-text{ position: absolute; bottom: 22%; font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-leise) }

/* ---------- Ringe (Seobility) ---------- */
.fs-ring-grund{ fill: none; stroke: rgba(140,170,240,.14); stroke-width: 8 }
.fs-ring-wert{
  fill: none; stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 326.73; stroke-dashoffset: calc(326.73 * (1 - var(--ziel, 0)));
  transition: stroke-dashoffset 2.2s cubic-bezier(.2, .8, .2, 1);
}
.fs-bereit .fs-ring-wert{ stroke-dashoffset: 326.73 }
.fs-bereit.sichtbar .fs-ring-wert{ stroke-dashoffset: calc(326.73 * (1 - var(--ziel, 0))) }

/* ---------- Zahlenband ---------- */
.fs-zahlen{
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--linie); border: 1px solid var(--linie);
}
.fs-zahl{
  display: grid; align-content: start; gap: 10px;
  padding: clamp(20px, 2.4vw, 34px);
  background: rgba(5,6,12,.88);
}
.fs-zahl-was{ min-height: 2.9em; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-fern); max-width: none }
.fs-zahl-alt{
  font-size: clamp(1rem, 1.5vw, 1.3rem); color: var(--rot); max-width: none;
  text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(224,72,58,.7);
  font-variant-numeric: tabular-nums;
}
.fs-zahl-neu{
  font-size: clamp(2.4rem, 4.6vw, 4.2rem); font-weight: 600; line-height: 1; letter-spacing: -.03em; max-width: none;
  background: linear-gradient(96deg, var(--blau), var(--blau-tief) 42%, var(--violett));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.fs-zahl-text{ font-size: .86rem; line-height: 1.45; color: var(--text-leise) }

/* ---------- Was Google sah ---------- */
.fs-roentgen{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px) }
.fs-code{
  margin: 0; overflow: hidden; border-radius: 6px;
  background: #0a0c14; border: 1px solid var(--linie);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.9);
}
.fs-code--alt{ border-color: rgba(224,72,58,.45) }
.fs-code--neu{ border-color: rgba(48,96,240,.55) }
.fs-code-kopf{
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px;
  padding: 12px 16px; border-bottom: 1px solid var(--linie);
  font-size: .74rem; letter-spacing: .06em; color: var(--text-leise);
}
.fs-code-kopf .b{ color: var(--text); font-weight: 500 }
.fs-code--alt .fs-code-groesse{ color: var(--rot) }
.fs-code--neu .fs-code-groesse{ color: #6fb3ff }
.fs-code pre{
  margin: 0; padding: 18px 16px 22px; overflow-x: auto;
  font: 12.5px/1.75 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #c9d3ea;
}
.fs-code code > span{ display: block; white-space: pre }
.fs-code .t{ color: #7aa7ff } .fs-code .a{ color: #c792ea } .fs-code .s{ color: #9fd38a } .fs-code .k{ color: #6a7390 }
.fs-code .leer{ color: var(--rot); font-weight: 600 }
.fs-code-fuss{ padding: 0 16px 16px; font-size: .84rem; line-height: 1.5; color: var(--text-leise); max-width: none }
.fs-code-fuss .b{ color: var(--text); font-weight: 500 }
@media (prefers-reduced-motion: no-preference){
  .fs-bereit .fs-code code > span{ opacity: 0; transform: translateX(-8px); transition: opacity .4s, transform .4s }
  .fs-bereit.sichtbar .fs-code code > span, .fs-bereit .fs-code.sichtbar code > span{ opacity: 1; transform: none; transition-delay: calc(var(--z, 0) * 70ms) }
}

/* ---------- Vorher, nachher ---------- */
.fs-vergleich{ display: grid; gap: clamp(48px, 7vw, 96px) }
.fs-vergleich-gross{ width: min(100%, 1040px); margin-inline: auto }
.fs-vergleich-reihe{
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(28px, 5vw, 80px); align-items: end;
  width: min(100%, 980px); margin-inline: auto;
}
.fs-paar{
  display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center;
  gap: clamp(20px, 5vw, 72px);
}
.fs-paar-marke{
  display: block; margin-bottom: 14px; text-align: center;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-fern);
}
.fs-paar-marke--alt{ color: var(--rot) }
.fs-paar-marke--neu{ color: #6fb3ff }

/* ---------- Seobility ---------- */
.fs-seo{
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.fs-ringe{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px) }
.fs-ring{ margin: 0; display: grid; justify-items: center; gap: 12px; text-align: center }
.fs-ring-bild{ position: relative; width: min(100%, 230px); aspect-ratio: 1; display: grid; place-items: center }
.fs-ring-bild svg{ position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg) }
.fs-ring-zahl{ font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-weight: 600; letter-spacing: -.03em; line-height: 1; color: #fff }
.fs-ring--alt .fs-ring-zahl{ color: var(--rot) }
.fs-ring figcaption{ font-size: .78rem; line-height: 1.45; color: var(--text-leise); max-width: 26ch }
.fs-ring figcaption .b{ display: block; color: var(--text); font-weight: 500 }

.fs-bereiche{ display: grid; gap: 22px }
.fs-bereich-kopf{ display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; color: var(--text) }
.fs-bereich-kopf span:last-child{ color: var(--text-leise); font-variant-numeric: tabular-nums }
.fs-balken{ position: relative; height: 10px; margin-top: 8px; border-radius: 99px; background: rgba(140,170,240,.1); overflow: hidden }
.fs-balken i{
  position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 99px;
  transition: width 1.8s cubic-bezier(.2, .8, .2, 1);
}
.fs-balken i.alt{ height: 4px; top: 3px; background: var(--rot); z-index: 2; opacity: .9 }
.fs-balken i.neu{ background: linear-gradient(96deg, var(--blau), var(--violett)) }
.fs-bereit .fs-balken i{ width: 0 }
.fs-bereit.sichtbar .fs-balken i{ width: var(--w) }
.fs-legende{ display: flex; gap: 22px; font-size: .74rem; color: var(--text-fern); max-width: none }
.fs-legende span::before{ content: ""; display: inline-block; width: 18px; height: 4px; margin-right: 8px; vertical-align: middle; border-radius: 2px }
.fs-legende .alt::before{ background: var(--rot) }
.fs-legende .neu::before{ background: linear-gradient(96deg, var(--blau), var(--violett)) }

.fs-befunde{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--linie); border: 1px solid var(--linie); margin: 0; padding: 0; list-style: none }
.fs-befunde li{ display: grid; gap: 8px; padding: 20px 22px; background: rgba(5,6,12,.88) }
.fs-befund-was{ font-size: .84rem; line-height: 1.4; color: var(--text-leise) }
.fs-befund-werte{ display: flex; align-items: baseline; gap: 12px; font-variant-numeric: tabular-nums }
.fs-befund-werte .alt{ color: var(--rot); text-decoration: line-through; text-decoration-color: rgba(224,72,58,.6); font-size: 1.05rem }
.fs-befund-werte .pfeil{ color: var(--text-fern) }
.fs-befund-werte .neu{ font-size: 1.9rem; font-weight: 600; color: #fff; letter-spacing: -.02em }
.fs-quelle{ font-size: .78rem; line-height: 1.5; color: var(--text-fern); max-width: 80ch }

/* ---------- Funktionen ---------- */
.fs-funktion{
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(28px, 5vw, 80px); align-items: center;
}
.fs-funktion--links{ grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr) }
.fs-funktion--links .fs-funktion-text{ order: -1 }
.fs-funktion-text{ position: relative }
.fs-funktion-text::before{          /* weicher Abdunkler wie bei .satz, damit die Punktwolke nicht durch den Text laeuft */
  content: ""; position: absolute; inset: -6vh -4vw; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 40% 50%, rgba(5,6,12,.92) 0%, rgba(5,6,12,.7) 50%, transparent 80%);
}
.fs-funktion-text > * + *{ margin-top: 1em }
.fs-funktion-text h3{
  font-size: clamp(1.3rem, 2.2vw, 1.9rem); font-weight: 600; line-height: 1.15; letter-spacing: -.015em;
  text-transform: uppercase; color: #fff;
}
.fs-funktion-nr{ font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-fern) }
.fs-merkmale{ display: grid; gap: 8px; margin: 0; padding: 0; list-style: none }
.fs-merkmale li{ position: relative; padding-left: 22px; font-size: .92rem; line-height: 1.5; color: var(--text-leise) }
.fs-merkmale li::before{
  content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 2px;
  background: linear-gradient(96deg, var(--blau), var(--violett));
}
.fs-geraete-paar{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .3fr); gap: clamp(14px, 2.4vw, 32px); align-items: end }

.fs-kacheln{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--linie); border: 1px solid var(--linie) }
.fs-kachel{ display: grid; align-content: start; gap: 10px; padding: clamp(20px, 2.4vw, 30px); background: rgba(5,6,12,.88) }
.fs-kachel h3{ font-size: 1rem; font-weight: 600; letter-spacing: .01em; color: #fff; text-transform: none }
.fs-kachel p{ font-size: .88rem; line-height: 1.55 }

/* ---------- Umfang ---------- */
.fs-umfang{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--linie); border: 1px solid var(--linie) }
.fs-umfang-spalte{ padding: clamp(22px, 2.6vw, 34px); background: rgba(5,6,12,.9) }
.fs-umfang-spalte h3{
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--linie);
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text);
}

/* ---------- Einblenden beim Erscheinen ---------- */
@media (prefers-reduced-motion: no-preference){
  .fs-bereit [data-fs-auf]{ opacity: 0; transform: translateY(40px) scale(.98); transition: opacity .9s, transform 1.1s cubic-bezier(.2, .8, .2, 1) }
  .fs-bereit.sichtbar [data-fs-auf], .fs-bereit [data-fs-auf].sichtbar{ opacity: 1; transform: none }
}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 1000px){
  .fs-zahlen{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .fs-befunde, .fs-kacheln{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 900px){
  .fs-kopf, .fs-seo, .fs-funktion, .fs-funktion--links, .fs-umfang, .fs-roentgen{ grid-template-columns: minmax(0, 1fr) }
  .fs-funktion--links .fs-funktion-text{ order: 0 }
  .fs-buehne{ margin-top: 12px }
  .fs-vergleich-reihe{ grid-template-columns: minmax(0, 1fr) minmax(0, .62fr); gap: 18px }
}
@media (max-width: 560px){
  .fs-zahlen, .fs-befunde, .fs-kacheln{ grid-template-columns: minmax(0, 1fr) }
  .fs-paar{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px }
  .fs-vergleich-reihe{ grid-template-columns: minmax(0, 1fr) }
  .fs-vergleich-reihe .fs-phone-rahmen{ width: 62%; margin-inline: auto }
  .fs-abzeichen{ left: 0 }
  .fs-code pre{ font-size: 11px }
}