/* ============================================================
   RNDM studio · case.css
   Layout nach Figma "CASE OVERLAY ISCON I" (1728 px breit), fliessend skaliert
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink:   #202020;
  --paper: #EFEFE8;
  --serif: 'the-seasons', Georgia, serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --grad-title: linear-gradient(231.45deg, #FF9900 9.37%, #F62FFA 131.67%);
  --grad-rule:  linear-gradient(184.68deg, #FF9900 9.37%, #F62FFA 131.67%);
  --col: 64.24vw;                        /* Inhaltsspalte: 1110 px bei 1728 px */
  --gap: clamp(24px, 2.31vw, 48px);      /* 40 px */
  --gap-row: clamp(12px, 1.56vw, 32px);  /* 27 px zwischen Bildern einer Zeile */
  --grad-ui: linear-gradient(216.8deg, #FF9900 9.37%, #F62FFA 131.67%);   /* wie Label und Kreis der Startseite */
  --edge: 28px;                               /* Abstand der Fusszeile zum Seitenende, ebenso zur Linie darueber */
  --line: rgba(20, 20, 20, .25);              /* gestrichelte Rasterlinien */
  --plus: rgba(20, 20, 20, .6);               /* Kreuze an den Kreuzungspunkten */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);  /* wie auf der Startseite */
  --ease-io:  cubic-bezier(0.65, 0, 0.15, 1); /* kraeftiger Verlauf: Bewegung auch in der Mitte */

  /* Staerke der Scroll-Animation (hier einstellen) */
  --rv-rise: clamp(70px, 6.4vw, 140px);       /* Weg der Bilder von unten, 110 px bei 1728 px */
  --rv-text: clamp(36px, 3.2vw, 64px);        /* Weg der Texte von unten */
  --rv-dur:  1.5s;                            /* Dauer der Bild-Enthuellung */
}

html { scroll-behavior: auto; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* Raster wie auf der Startseite */
.grid-lines { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.grid-lines i { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--line); }
.grid-lines i:nth-child(1) { left: 25%; }
.grid-lines i:nth-child(2) { left: 50%; }
.grid-lines i:nth-child(3) { left: 75%; }

.page { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--gap); }

/* ---------- Kopf ---------- */
.head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 32px 24px 0; }
.title-block { display: flex; flex-direction: column; gap: 1px; max-width: 854px; }
.rule { width: 117px; height: 4px; border-radius: 2px; background: var(--grad-rule); }
.title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(56px, 5.32vw, 104px);
  line-height: normal;
  width: fit-content;
  white-space: nowrap;
  background: var(--grad-title);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.lead { display: flex; flex-direction: column; gap: 16px; }
.headline { font-weight: 500; font-size: clamp(18px, 1.39vw, 28px); line-height: normal; }
.body { font-weight: 300; font-size: clamp(14px, .93vw, 18px); line-height: 1.55; }
.close { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; opacity: .7; transition: opacity .2s; }
.close:hover { opacity: 1; }

/* ---------- Module ---------- */
.modules { display: flex; flex-direction: column; gap: var(--gap); }
.modules > .m:first-child { padding-top: 0; }
.m { width: calc(var(--col) * var(--w, 1)); margin-inline: auto; padding-block: var(--gap); }

.row { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); align-items: center; gap: var(--gap-row); }
.cell { min-width: 0; container-type: inline-size; }
.cell:not(.has-sh) { overflow: hidden; }                  /* Zoom und Ausschnitt ueberstehen nie, auch nicht im scrollbaren Bereich */      /* Container: der Eckenradius richtet sich nach der Fensterbreite */
.cell > img { width: 100%; height: auto; }
/* Abstand zum Modul davor aus Figma (px bei 1728 px Breite, auch negativ): ersetzt die Standardabstaende */
.m.has-sp { padding-block: 0; margin-top: calc(var(--sp) - var(--gap)); }
.m.tb { padding-bottom: 0; }

/* Fenster: Ausschnitt, Cover oder Hover-Scroll */
.win { position: relative; overflow: hidden; width: 100%; border-radius: calc(var(--r, 0) * 100cqw); }
.sh { box-shadow: 0 0 10px rgba(0, 0, 0, .25); }                   /* weicher Schatten unter flachen Screenshots */
.win .overlay { z-index: 2; pointer-events: none; }                /* Geraeterahmen ueber dem Bild */
/* Datei fehlt: Platzhalter mit dem erwarteten Namen, nur auf dem Staging */
.miss { display: grid; place-items: center; background: repeating-linear-gradient(135deg, rgba(20,20,20,.05) 0 10px, rgba(20,20,20,.09) 10px 20px); outline: 1px dashed rgba(20,20,20,.3); outline-offset: -1px; }
.miss span { padding: 6px 10px; font: 11px/1.3 var(--sans); letter-spacing: .02em; color: rgba(20,20,20,.6); text-align: center; overflow-wrap: anywhere; }
.miss-tag { position: absolute; left: 6px; bottom: 6px; z-index: 3; padding: 2px 6px; background: rgba(32,32,32,.85); color: var(--paper); font: 10px/1.3 var(--sans); }
.win .crop  { position: absolute; max-width: none; height: auto; }
.win .cover { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.win.scroll { overflow-y: auto; }                         /* ohne JS: normal scrollbar */
html.js .win.scroll:not(.native) { overflow: hidden; }
.win.scroll img { width: 100%; height: auto; will-change: transform; }

/* Zitat */
.quote { width: 100%; padding: 0 clamp(20px, 9.72vw, 400px); text-align: center; }
.quote p {
  font-family: var(--serif);
  font-weight: 300;               /* Light ist im Typekit-Kit noch nicht enthalten, bis dahin Regular */
  font-size: clamp(22px, 2.08vw, 44px);
  line-height: 1.4;
}

/* Text */
.textblock h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.5vw, 48px); line-height: 1.15; margin-bottom: 16px; }
.textblock p  { font-weight: 300; font-size: clamp(14px, .93vw, 18px); line-height: 1.55; }

/* Infoleiste: immer vier Spalten, jede beginnt an einer Rasterlinie (Rand, 25 %, 50 %, 75 %) plus 24 px Abstand.
   Oben und unten eine gestrichelte Linie ueber die ganze Breite, an den Kreuzungen mit dem Raster ein Kreuz von 7 x 7 px. */
.infobar { position: relative; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
.infos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; padding: 28px 0; }
.infos > div { display: flex; flex-direction: column; gap: 8px; padding: 0 24px; }
.infos dt { font-weight: 700; line-height: normal; }
.infos dd { font-weight: 400; line-height: 1.5; }

.plus {
  position: absolute; width: 7px; height: 7px; transform: translate(-50%, -50%); pointer-events: none;
  background:
    linear-gradient(var(--plus), var(--plus)) center / 7px 1px no-repeat,
    linear-gradient(var(--plus), var(--plus)) center / 1px 7px no-repeat;
}
.plus.top { top: -0.5px; }                 /* Mitte der oberen Linie */
.plus.bot { top: calc(100% + 0.5px); }     /* Mitte der unteren Linie */
.plus.x1 { left: calc(25% + 0.5px); }      /* Mitte der senkrechten Rasterlinien */
.plus.x2 { left: calc(50% + 0.5px); }
.plus.x3 { left: calc(75% + 0.5px); }

/* Scroll-Animation. Nur mit JS aktiv (Klasse js), bei reduzierter Bewegung und im Notfall (rv-off) aus.
   Texte steigen auf und blenden ein, gestaffelt ueber --rv-d. */
html.js:not(.rv-off) .rv {
  opacity: 0;
  transform: translate3d(0, var(--rv-y, var(--rv-text)), 0);
  transition: opacity 1s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) var(--rv-d, 0s),
              transform 1.4s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) var(--rv-d, 0s);
}
html.js:not(.rv-off) .rv.in { opacity: 1; transform: none; }
.title.rv { --rv-y: calc(var(--rv-text) * 1.1); }
.quote p.rv { --rv-y: calc(var(--rv-text) * 1.4); }

/* Linie unter dem Titel zieht sich auf */
html.js:not(.rv-off) .rule.rv { transform: scaleX(0); transform-origin: left center; transition-duration: .9s, 1.2s; }
html.js:not(.rv-off) .rule.rv.in { transform: none; }

/* Bilder: Vorhang von unten nach oben, dazu Aufstieg und ein Zoom, der sich beruhigt */
html.js:not(.rv-off) .cell.rv {
  opacity: 0;
  transform: translate3d(0, var(--rv-rise), 0);
  clip-path: inset(100% 0 0 0);
  transition: opacity .6s ease var(--rv-d, 0s),
              transform var(--rv-dur) var(--ease-io, cubic-bezier(0.65, 0, 0.15, 1)) var(--rv-d, 0s),
              clip-path var(--rv-dur) var(--ease-io, cubic-bezier(0.65, 0, 0.15, 1)) var(--rv-d, 0s);
}
html.js:not(.rv-off) .cell.rv.in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
/* Bilder mit Schatten: grosszuegigerer Ausschnitt, damit der Schatten nicht abgeschnitten wird, dafuer ohne Zoom */
html.js:not(.rv-off) .cell.rv.has-sh { clip-path: inset(100% -40px -40px -40px); }
html.js:not(.rv-off) .cell.rv.has-sh.in { clip-path: inset(-40px); }
html.js:not(.rv-off) .cell.rv.has-sh > img { transform: none; transition: none; }
html.js:not(.rv-off) .cell.rv > img { transform: scale(1.14); transition: transform calc(var(--rv-dur) * 1.4) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) var(--rv-d, 0s); }
html.js:not(.rv-off) .cell.rv.in > img { transform: none; }

/* Navigation von Case zu Case.
   Desktop: Beim Mausen in den Raendern neben den Bildern erscheint ein grosser Pfeil am Cursor (case.js).
   Die Links selbst bleiben als echte Links im Dokument (Tastatur, Screenreader, Suchmaschinen), sind aber unsichtbar. */
.casenav { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.casenav:focus-within { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: flex; justify-content: space-between; padding: 0 24px; }

.casearrow { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; will-change: transform; }
.casearrow__disc {
  position: absolute; left: 0; top: 0; translate: -50% -50%;
  display: grid; place-items: center; width: clamp(76px, 5.4vw, 108px); aspect-ratio: 1; border-radius: 50%;
  background: var(--grad-ui); color: var(--paper);
  opacity: 0; transform: scale(.25);
  transition: opacity .3s ease, transform .6s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.casearrow.on .casearrow__disc { opacity: 1; transform: none; }
.casearrow__flip { display: grid; place-items: center; width: 100%; }
.casearrow.dir-prev .casearrow__flip { transform: scaleX(-1); }
.casearrow__flip svg { width: 42%; height: auto; display: block; transform: translateX(-70%); transition: transform .6s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) .05s; }
.casearrow.on .casearrow__flip svg { transform: none; }
.casearrow__meta {
  position: absolute; left: 0; top: calc(clamp(76px, 5.4vw, 108px) / 2 + 14px); translate: calc(-50% + var(--mx, 0px)) 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px; white-space: nowrap; text-align: center;
  opacity: 0; transform: translateY(8px); transition: opacity .35s ease .12s, transform .5s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) .12s;
}
.casearrow.on .casearrow__meta { opacity: 1; transform: none; }
.casearrow__name { font: 400 clamp(20px, 1.5vw, 28px)/1.1 var(--serif); }
.is-casenav, .is-casenav * { cursor: none !important; }

/* Fusszeile (Impressumspflicht: auf jeder Seite erreichbar) */
.legal { display: flex; justify-content: space-between; align-items: center; margin-top: calc(var(--edge) - var(--gap)); padding: 0 24px var(--edge); font-size: 12px; font-weight: 700; }
.legal a { opacity: .7; transition: opacity .2s; }
.legal a:hover { opacity: 1; }

.preview { position: fixed; left: 50%; top: 10px; transform: translateX(-50%); z-index: 20; padding: 5px 12px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- Mobil ---------- */
@media (max-width: 768px) {
  :root { --col: calc(100vw - 40px); --gap: 24px; --gap-row: 12px; --edge: 24px; }
  .grid-lines i:nth-child(1), .grid-lines i:nth-child(3) { display: none; }
  .head { padding: 24px 20px 0; }
  .m { width: min(calc(var(--col) * max(var(--w, 1), .72)), var(--col)); }   /* mobil mindestens 72 %, hoechstens die Spaltenbreite (auch bei Bloecken ueber 100 %) */
  .quote { padding: 0 20px; }
  .infos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; padding: 20px 0; }
  .infos > div { padding: 0 20px; }
  .plus.x1, .plus.x3 { display: none; }
  .legal { padding: 0 20px var(--edge); }
  /* Mobil: keine feste Leiste (sie wuerde Bilder verdecken), sondern am Ende der Seite, mit grossen Tippflaechen */
  /* Navigation: keine Maus, also sichtbare Links am Seitenende, links zurueck und rechts weiter, mit grossen Tippflaechen */
  .casenav { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; display: flex; justify-content: space-between; gap: 16px; padding: 0 20px; }
  .casenav__a { display: flex; align-items: center; gap: 10px; min-height: 48px; font: 600 15px/1.2 var(--sans); }
  .casenav__a--next { margin-left: auto; text-align: right; }
  .casenav__arrow { font-size: 22px; font-weight: 700; }
  .casenav__label { font-family: var(--serif); font-weight: 400; font-size: 20px; }
  .casearrow { display: none; }
  /* Titel darf mobil umbrechen, Abstaende aus Figma haben mobil eine Untergrenze, Handy-Raster hat weniger Spalten */
  .title { white-space: normal; }
  .m.phones { width: var(--col); }                                      /* Raster aus kleinen Screens nutzt mobil die ganze Spaltenbreite */
  .brk { display: none; }                                               /* harter Zeilenumbruch im Zitat nur auf breiten Bildschirmen */
  .m.has-sp { margin-top: calc(max(var(--sp), 16px) - var(--gap)); }
  .row { grid-template-columns: repeat(var(--colsm, var(--cols, 1)), minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .close, .legal a { transition: none; }
  /* Bewegung reduziert: kein Weg, kein Vorhang, kein Zoom. Das weiche Einblenden bleibt. */
  html.js:not(.rv-off) .rv,
  html.js:not(.rv-off) .cell.rv { --rv-y: 0px; transform: none; clip-path: none; transition: opacity 1s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) var(--rv-d, 0s); }
  html.js:not(.rv-off) .cell.rv > img { transform: none; transition: none; }
}