/* Filmkorn – Website
   Die Seite ist eine Dunkelkammer wie die App: Braunschwarz, Licht nur in
   Bernstein, Schrift wie auf einer Filmschachtel. Farben und Schriften sind
   dieselben wie in filmkorn.html, damit Seite und App wie aus einem Guss wirken. */

@font-face{font-family:'Bebas Neue'; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/BebasNeue-400.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/IBMPlexMono-400.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url(fonts/IBMPlexMono-500.woff2) format('woff2');}
@font-face{font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap; src:url(fonts/IBMPlexMono-600.woff2) format('woff2');}

/* Aufbau: eine lange Rolle — Abschnitte wechseln zwischen Grund und tieferem
   Grund wie belichtete und unbelichtete Felder, dazwischen ein Filmstreifen. */
:root{
  --bg:#14100c; --tief:#0e0b08; --panel:#1d1712; --panel-2:#241c15; --line:#382c20;
  --cream:#eee3ce; --muted:#9a8d7b; --amber:#c9863f; --amber-bright:#e2a35c;
  --safelight:#5c6f5e; --red:#a4432f; --ink:#1a1208; --papier:#f2ece0;
  --display:'Bebas Neue', 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --r:14px; --r-sm:8px;
  --rastet:cubic-bezier(0.22,1,0.36,1);
  --rand:max(16px, env(safe-area-inset-left, 0px));
  --rand-r:max(16px, env(safe-area-inset-right, 0px));
  color-scheme:dark;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:76px; -webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--cream);
  font-family:var(--mono); font-size:15px; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit;}
h1,h2,h3{font-family:var(--display); font-weight:400; margin:0; text-wrap:balance; letter-spacing:1.5px; line-height:.92;}
p{margin:0;}
::selection{background:var(--amber); color:var(--ink);}
:focus-visible{outline:2px solid var(--amber-bright); outline-offset:3px; border-radius:4px;}

.huelle{width:100%; max-width:1240px; margin:0 auto; padding-left:var(--rand); padding-right:var(--rand-r);}
@media (min-width:700px){ .huelle{padding-left:max(32px, env(safe-area-inset-left, 0px)); padding-right:max(32px, env(safe-area-inset-right, 0px));} }

.zeile{font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--amber);}
.einleitung{color:color-mix(in srgb, var(--cream) 82%, var(--muted)); max-width:58ch; font-size:15.5px;}
.bernstein{color:var(--amber-bright);}

/* Rauschschleier wie in der App — aber hinter den Inhalten: Über den Fotos
   läge sonst zusätzliches Korn auf dem, was Filmkorn wirklich ausgibt. */
.korn{
  position:fixed; inset:-50%; z-index:-1; pointer-events:none; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:flimmern .9s steps(6) infinite;
}
@keyframes flimmern{
  0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-4%)}
  60%{transform:translate(-4%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)}
}

/* ---------- Knöpfe ---------- */
.knopf{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  font-family:var(--display); font-size:21px; letter-spacing:2px; line-height:1;
  padding:15px 28px 13px; border-radius:999px; text-decoration:none;
  background:linear-gradient(180deg, var(--amber-bright), var(--amber)); color:var(--ink);
  box-shadow:0 10px 30px rgba(201,134,63,.28), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .25s var(--rastet), box-shadow .25s var(--rastet);
}
.knopf:hover{transform:translateY(-2px); box-shadow:0 16px 40px rgba(201,134,63,.38), inset 0 1px 0 rgba(255,255,255,.25);}
.knopf:active{transform:translateY(0) scale(.98);}
.knopf-leer{background:transparent; color:var(--cream); box-shadow:inset 0 0 0 1px var(--line);}
.knopf-leer:hover{box-shadow:inset 0 0 0 1px var(--amber); color:var(--amber-bright);}
.knopf-klein{font-size:16px; padding:10px 18px 8px;}

/* ---------- Kopfleiste ---------- */
.kopf{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:40;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s;
}
.kopf.gerollt{border-bottom-color:var(--line); background:color-mix(in srgb, var(--bg) 90%, transparent);}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); z-index:41; background:var(--bg);}
.kopf-innen{display:flex; align-items:center; gap:24px; height:64px; max-width:1240px; margin:0 auto; padding-left:var(--rand); padding-right:var(--rand-r);}
@media (min-width:700px){ .kopf-innen{padding-left:max(32px, env(safe-area-inset-left, 0px)); padding-right:max(32px, env(safe-area-inset-right, 0px));} }
.marke{font-family:var(--display); font-size:28px; letter-spacing:3px; text-decoration:none; line-height:1;}
.navi{display:flex; gap:26px; margin-left:auto;}
.navi a{font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color .2s;}
.navi a:hover{color:var(--amber-bright);}
@media (max-width:820px){ .navi{display:none;} .kopf .knopf{margin-left:auto;} }

/* ---------- 1 · Held mit Entwicklerschale ---------- */
/* Der Einstieg füllt die erste Bildschirmhöhe (Ole: nicht mit Text erschlagen,
   lieber Raum und ein Satz, der sitzt) */
.held{position:relative; overflow:hidden; min-height:calc(100svh - 64px); display:flex; align-items:center; padding-block:48px 96px;}
.held > .huelle{flex:1;}
.held-satz{font-size:clamp(17px, 1.6vw, 21px); color:color-mix(in srgb, var(--cream) 86%, var(--muted)); letter-spacing:.01em;}
.weiter-pfeil{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%); width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; text-decoration:none; color:var(--amber-bright); border:1px solid var(--line);
  animation:pfeil 2.2s ease-in-out infinite;
}
.weiter-pfeil:hover{border-color:var(--amber);}
@keyframes pfeil{ 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,7px)} }
.held-licht{
  position:absolute; inset:-20% -10% auto auto; width:80vw; height:80vw; max-width:1100px; max-height:1100px; pointer-events:none;
  background:radial-gradient(circle at 60% 40%, rgba(201,134,63,.20), rgba(164,67,47,.08) 38%, transparent 66%);
  animation:lichtWandert 14s ease-in-out infinite alternate;
}
@keyframes lichtWandert{ from{transform:translate(0,0) scale(1)} to{transform:translate(-6%,8%) scale(1.08)} }
.held-raster{position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center;}
.held-text{display:flex; flex-direction:column; gap:30px; min-width:0;}
.held h1{font-size:clamp(60px, 7.2vw, 118px); line-height:.86; letter-spacing:2px;}
@media (max-width:900px){ .held h1{font-size:clamp(60px, 15vw, 120px);} }
.held h1 .bernstein{
  background:linear-gradient(100deg, var(--amber) 10%, var(--amber-bright) 45%, #f3c98f 55%, var(--amber) 90%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:schimmer 6s ease-in-out infinite;
}
@keyframes schimmer{ 0%,100%{background-position:100% 0} 50%{background-position:0 0} }
.held-knoepfe{display:flex; flex-wrap:wrap; gap:12px;}
.held-fuss{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);}

/* Der fertige Abzug liegt in der Schale. (Er entwickelte sich vorher aus
   weißem Papier — Piet: das sah ungerendert aus. Jetzt nur ein kurzes Einblenden.) */
.schale{
  position:relative; margin:0; padding:clamp(22px, 4vw, 44px);
  border-radius:22px; background:linear-gradient(180deg, #221a13, #120e0a);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.04), inset 0 -30px 60px rgba(0,0,0,.5), 0 40px 80px rgba(0,0,0,.55);
  border:1px solid var(--line);
}
.schale-fluessig{
  position:absolute; inset:12px; border-radius:14px; pointer-events:none; opacity:.55;
  background:
    radial-gradient(ellipse 60% 30% at 30% 20%, rgba(226,163,92,.12), transparent 70%),
    radial-gradient(ellipse 50% 25% at 70% 80%, rgba(164,67,47,.10), transparent 70%);
  animation:wellen 7s ease-in-out infinite alternate;
}
@keyframes wellen{ from{transform:translateY(-2%) scale(1)} to{transform:translateY(2%) scale(1.04)} }
.abzug{
  position:relative; background:var(--papier); padding:3.2% 3.2% 3.2%;
  transform:rotate(-2.2deg); box-shadow:0 18px 40px rgba(0,0,0,.45);
  max-width:400px; margin:0 auto;
}
.abzug img{width:100%; height:auto; aspect-ratio:1067/1600; object-fit:cover; animation:einblenden 1.1s .2s var(--rastet) both;}
@keyframes einblenden{ from{opacity:0; transform:scale(1.02)} to{opacity:1; transform:none} }
.fettstift{
  position:absolute; left:50%; bottom:-14px; transform:translateX(-50%) rotate(-1deg);
  background:var(--amber); color:var(--ink); white-space:nowrap;
  font-family:var(--display); font-size:17px; letter-spacing:2px; line-height:1; padding:8px 14px 6px; border-radius:4px;
  box-shadow:0 8px 20px rgba(0,0,0,.4);
}

@media (max-width:900px){
  .held{padding-block:32px 64px;}
  .held-raster{grid-template-columns:1fr; gap:48px;}
  .schale{max-width:440px; width:100%; margin:0 auto;}
  .held{min-height:0;}
  .weiter-pfeil{display:none;}
}

/* ---------- 2 · Filmstreifen ---------- */
.streifen{
  position:relative; background:#0a0806; border-block:1px solid #000; overflow:hidden;
  padding-block:30px;
  --loch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='18'%3E%3Crect x='7' y='3' width='14' height='12' rx='2.5' fill='%23e8dcc6'/%3E%3C/svg%3E");
}
.streifen::before,.streifen::after{
  content:""; position:absolute; left:0; right:0; height:18px; background:var(--loch) repeat-x; opacity:.85; z-index:1;
  animation:loecher 40s linear infinite;
}
.streifen::before{top:6px;} .streifen::after{bottom:6px;}
@keyframes loecher{ from{background-position:0 0} to{background-position:-1120px 0} }
.streifen-band{display:flex; width:max-content; animation:band 60s linear infinite;}
.streifen:hover .streifen-band, .streifen:hover::before, .streifen:hover::after{animation-play-state:paused;}
@keyframes band{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.streifen-satz{display:flex; gap:14px; padding-right:14px;}
.feld{margin:0; position:relative; height:clamp(150px, 20vw, 240px); aspect-ratio:3/2; overflow:hidden; border-radius:3px; background:#000;}
.feld img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--rastet), filter .5s;}
.feld:hover img{transform:scale(1.05);}
.feld figcaption{
  position:absolute; left:8px; bottom:6px; font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:#f0b46a; text-shadow:0 1px 2px rgba(0,0,0,.8);
}

/* ---------- Abschnitte ---------- */
.abschnitt{padding-block:clamp(72px, 11vw, 140px); position:relative;}
.abschnitt-dunkel{background:linear-gradient(180deg, var(--tief), var(--bg));}
.abschnitt-kopf{display:flex; flex-direction:column; gap:18px; margin-bottom:clamp(36px, 5vw, 60px);}
.abschnitt-kopf-breit .einleitung{max-width:64ch;}
.abschnitt h2{font-size:clamp(52px, 7.4vw, 104px);}

/* (Das Hereingleiten beim Scrollen ist entfernt — Piet: nichts mehr am Scrollen, überall.
   Die Keyframes bleiben für die Anmeldekarte.) */
@keyframes auftauchen{ from{opacity:0; transform:translateY(34px)} to{opacity:1; transform:none} }

/* ---------- 3 · Vorher / nachher ---------- */
.vergleich-raster{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:28px; align-items:start;}
.vergleich{
  position:relative; aspect-ratio:var(--verh); margin:0 auto; width:min(100%, calc(78vh * var(--vz, 1.5)));
  border-radius:var(--r); overflow:hidden; background:#000; touch-action:pan-y; cursor:ew-resize; user-select:none;
  box-shadow:0 30px 70px rgba(0,0,0,.55); border:1px solid var(--line);
  transition:width .5s var(--rastet);
}
.vergleich img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; transition:opacity .35s;}
.vergleich.wechselt img{opacity:0;}
.v-vorher{clip-path:inset(0 calc(100% - var(--pos)) 0 0);}
.v-griff{position:absolute; top:0; bottom:0; left:var(--pos); width:2px; margin-left:-1px; background:var(--amber-bright); box-shadow:0 0 18px rgba(226,163,92,.6); pointer-events:none;}
.v-griff span{
  position:absolute; top:50%; left:50%; transform:translateX(var(--knopf, 0px)); width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%;
  background:var(--amber-bright); box-shadow:0 6px 20px rgba(0,0,0,.5);
  display:grid; place-items:center;
}
.v-griff span::before{content:"‹ ›"; font-family:var(--mono); font-weight:600; font-size:18px; line-height:1; color:var(--ink); letter-spacing:2px; margin-top:-2px;}
.v-schild{
  position:absolute; top:14px; font-size:10px; letter-spacing:.28em; text-transform:uppercase; padding:6px 10px; border-radius:999px;
  background:rgba(14,11,8,.7); color:var(--cream); pointer-events:none; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.v-schild-l{left:14px; opacity:0; transition:opacity .3s;}
.vergleich.zeigt-vorher .v-schild-l{opacity:1;} .v-schild-r{right:14px; color:var(--amber-bright);}
.v-regler{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;}
.vergleich:has(.v-regler:focus-visible){outline:2px solid var(--amber-bright); outline-offset:3px;}

.vergleich-wahl{display:flex; flex-direction:column; gap:10px;}
.v-wahl{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer;
  padding:10px; border-radius:var(--r-sm); border:1px solid var(--line); background:linear-gradient(180deg, var(--panel), var(--bg));
  color:var(--cream); font:inherit; transition:border-color .2s, background .2s, transform .25s var(--rastet);
}
.v-wahl:hover{border-color:color-mix(in srgb, var(--amber) 60%, var(--line)); transform:translateX(3px);}
.v-wahl img{width:64px; height:46px; object-fit:cover; border-radius:4px; flex:none;}
.v-wahl span{display:flex; flex-direction:column; min-width:0;}
.v-wahl b{font-family:var(--display); font-weight:400; font-size:20px; letter-spacing:1.5px; line-height:1.1;}
.v-wahl small{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);}
.v-wahl.aktiv{border-color:var(--amber-bright); background:rgba(201,134,63,.13);}
.v-wahl.aktiv b{color:var(--amber-bright);}

@media (max-width:900px){
  .vergleich-raster{grid-template-columns:1fr;}
  .vergleich-wahl{flex-direction:row; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory;}
  .v-wahl{flex:0 0 auto; width:auto; scroll-snap-align:start;}
  .v-wahl:hover{transform:none;}
}

/* ---------- 4 · Elf Filme ---------- */
.looks-raster{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:36px; align-items:start;}
.looks-buehne{margin:0; display:flex; flex-direction:column; gap:20px; position:sticky; top:90px;}
.looks-bild{position:relative; aspect-ratio:1400/933; border-radius:var(--r); overflow:hidden; background:#000; border:1px solid var(--line); box-shadow:0 30px 70px rgba(0,0,0,.55);}
.looks-bild img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.03); transition:opacity .7s ease, transform 1.4s var(--rastet);}
.looks-bild img.sichtbar{opacity:1; transform:none; z-index:2;}
/* Das alte Bild bleibt stehen, bis das neue darüber eingeblendet ist — sonst
   wird es beim schnellen Wechsel jedes Mal kurz dunkel */
.looks-bild img.vorige{opacity:1; transform:none; z-index:1; transition:none;}
.looks-text{display:grid; grid-template-columns:auto 1fr; gap:4px 16px; align-items:baseline;}
.looks-name{font-family:var(--display); font-size:clamp(30px, 3.4vw, 44px); letter-spacing:1.5px; line-height:1;}
.looks-iso{font-size:11px; letter-spacing:.28em; color:var(--amber); text-transform:uppercase;}
.looks-beschreibung{grid-column:1 / -1; color:color-mix(in srgb, var(--cream) 80%, var(--muted)); max-width:56ch;}

.schachteln{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px;}
/* „und viele mehr" — keine Schachtel zum Wählen, sondern der Hinweis auf den Rest */
.schachtel-mehr{
  display:flex; flex-direction:column; justify-content:center; gap:4px; padding:14px 14px 12px;
  border-radius:6px; border:1px dashed var(--line); color:var(--muted); text-decoration:none; transition:border-color .2s, color .2s;
}
.schachtel-mehr b{font-family:var(--display); font-weight:400; font-size:30px; letter-spacing:1px; line-height:1; color:var(--cream);}
.schachtel-mehr span{font-size:11.5px; line-height:1.35;}
.schachtel-mehr:hover{border-color:var(--amber); color:var(--amber-bright);}
.schachtel{
  position:relative; display:flex; flex-direction:column; gap:2px; text-align:left; cursor:pointer;
  padding:0 0 12px; border-radius:6px; overflow:hidden; border:1px solid var(--line);
  background:linear-gradient(180deg, var(--panel-2), var(--panel)); color:var(--cream); font:inherit;
  transition:transform .3s var(--rastet), border-color .2s, box-shadow .3s;
}
.schachtel::before{content:""; height:8px; background:var(--farbe); margin-bottom:10px;}
.schachtel:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.45);}
.schachtel .iso{font-family:var(--display); font-size:30px; letter-spacing:1px; line-height:1; padding:0 12px; color:var(--farbe-text, var(--cream));}
.schachtel .name{font-size:11.5px; line-height:1.35; padding:0 12px; color:var(--muted);}
.schachtel[aria-checked="true"]{border-color:var(--amber-bright); background:rgba(201,134,63,.13);}
.schachtel[aria-checked="true"] .name{color:var(--amber-bright);}
.schachtel .lauf{position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--amber-bright);}
.schachtel[aria-checked="true"] .lauf.an{animation:lauf var(--dauer, 4.5s) linear forwards;}
@keyframes lauf{ to{width:100%} }

@media (max-width:900px){
  .looks-raster{grid-template-columns:1fr;}
  .looks-buehne{position:static;}
  .schachteln{grid-template-columns:repeat(2, minmax(0, 1fr));}
}

/* ---------- 5 · Kamera ---------- */
.zwei-spalten{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px, 6vw, 90px); align-items:center;}
.zwei-spalten-dreh .spalte-text{order:2;}
.spalte-text{display:flex; flex-direction:column; gap:22px; min-width:0;}
.merkmale{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; border-top:1px solid var(--line);}
.merkmale li{display:grid; grid-template-columns:minmax(0, 11rem) minmax(0,1fr); gap:6px 22px; padding:14px 0; border-bottom:1px solid var(--line); color:color-mix(in srgb, var(--cream) 78%, var(--muted)); font-size:14px;}
.merkmale b{font-family:var(--display); font-weight:400; font-size:20px; letter-spacing:1.5px; color:var(--cream); line-height:1.2;}

.handys{position:relative; display:grid; grid-template-columns:repeat(12, 1fr); align-items:start; padding-bottom:40px;}
.handy{
  border-radius:34px; padding:9px; background:linear-gradient(160deg, #2c241c, #0c0907);
  box-shadow:0 40px 80px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.06); overflow:hidden;
}
.handy img{border-radius:26px; width:100%; height:auto;}
.handy-hinten{grid-column:1 / span 7; grid-row:1; transform:rotate(-4deg); opacity:.92;}
.handy-vorn{
  grid-column:6 / span 7; grid-row:1; margin-top:70px; z-index:1; transform:rotate(3deg);
  display:flex; flex-direction:column; background:linear-gradient(160deg, #2c241c, #0c0907); aspect-ratio:490/974;
}
.sucher{position:relative; flex:1; border-radius:26px 26px 6px 6px; overflow:hidden; background:#000;}
.sucher img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:0; animation:schwenk 18s ease-in-out infinite alternate;}
@keyframes schwenk{ from{transform:scale(1.25) translateX(6%)} to{transform:scale(1.25) translateX(-6%)} }
.sucher-rahmen{position:absolute; inset:14%; border:1px solid rgba(255,255,255,.35); border-radius:4px;}
.sucher-rahmen::before,.sucher-rahmen::after{content:""; position:absolute; left:50%; top:50%; background:rgba(255,255,255,.5);}
.sucher-rahmen::before{width:22px; height:1px; margin-left:-11px;} .sucher-rahmen::after{width:1px; height:22px; margin-top:-11px;}
.blitz{position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none;}
.blitz.an{animation:blitz .45s ease-out;}
@keyframes blitz{ 0%{opacity:.95} 100%{opacity:0} }
.kamera-leiste{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; padding:16px 12px 18px;}
.zaehler{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);}
.zaehler b{font-family:var(--display); font-weight:400; font-size:24px; color:var(--amber-bright); letter-spacing:1px; margin-right:4px; display:inline-block;}
.zaehler.tickt b{animation:tick .35s var(--rastet);}
@keyframes tick{ from{transform:translateY(-8px); opacity:0} to{transform:none; opacity:1} }
.film-etikett{justify-self:end; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); text-align:right;}
.ausloeser{
  width:58px; height:58px; border-radius:50%; cursor:pointer; border:3px solid var(--cream);
  background:radial-gradient(circle, var(--cream) 0 56%, transparent 58%); padding:0;
  transition:transform .15s; box-shadow:0 0 0 4px rgba(0,0,0,.4);
}
.ausloeser:hover{transform:scale(1.05);}
.ausloeser:active{transform:scale(.9);}
.ausloeser[disabled]{opacity:.4; cursor:default;}
.handys-tipp{
  position:absolute; left:0; bottom:0; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--amber);
}
.handys-tipp::after{content:" ›"; display:inline-block; animation:schubs 1.4s ease-in-out infinite;}
@keyframes schubs{ 50%{transform:translateX(5px)} }

/* ---------- 6 · Editor: Abzüge auf dem Tisch ---------- */
.abzuege{position:relative; display:grid; grid-template-columns:repeat(12, 1fr); align-items:start; padding-block:20px 40px;}
.abzug-tisch{margin:0; display:flex; flex-direction:column; gap:12px; transition:transform .5s var(--rastet);}
.abzug-tisch img{box-shadow:0 30px 60px rgba(0,0,0,.55); width:100%; height:auto;}
.abzug-tisch figcaption{font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted);}
.abzug-kleinbild{grid-column:1 / span 10; grid-row:1; transform:rotate(-2.5deg);}
/* Die Beschriftung über dem Streifen, sonst liegt das Sofortbild darauf */
.abzug-kleinbild figcaption{order:-1;}
.abzug-sofort{grid-column:7 / span 6; grid-row:1; margin-top:42%; transform:rotate(4deg); z-index:1;}
.abzug-tisch:hover{transform:rotate(0deg) translateY(-6px); z-index:2;}

@media (max-width:900px){
  .zwei-spalten{grid-template-columns:1fr;}
  .zwei-spalten-dreh .spalte-text{order:0;}
  .merkmale li{grid-template-columns:1fr; gap:2px;}
  .handys{max-width:460px; width:100%; margin:0 auto;}
  .abzuege{max-width:520px; width:100%; margin:0 auto;}
}

/* ---------- 7 · Rechner ---------- */
.fenster{margin:0; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--tief); box-shadow:0 50px 100px rgba(0,0,0,.6);}
.fenster-leiste{display:flex; align-items:center; gap:8px; height:36px; padding:0 14px; background:var(--panel); border-bottom:1px solid var(--line);}
.fenster-leiste span{width:10px; height:10px; border-radius:50%; background:var(--line);}
.fenster-leiste em{font-style:normal; margin-left:10px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);}
.fenster img{width:100%; height:auto;}

/* ---------- 8 · Für wen ---------- */
.fuer-liste{display:flex; flex-direction:column; border-top:1px solid var(--line);}
.fuer{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:12px 48px; padding:30px 0; border-bottom:1px solid var(--line); align-items:baseline;}
.fuer h3{font-size:clamp(28px, 3.2vw, 42px); transition:color .3s;}
.fuer p{color:color-mix(in srgb, var(--cream) 78%, var(--muted)); max-width:56ch;}
.fuer:hover h3{color:var(--amber-bright);}
.fuer-nicht h3{color:var(--muted);}
.fuer-nicht:hover h3{color:var(--muted);}
@media (max-width:800px){ .fuer{grid-template-columns:1fr;} }

/* ---------- 9 · Privat ---------- */
.privat{background:var(--amber); color:var(--ink); padding-block:44px;}
.privat-raster{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:28px;}
.privat-raster div{display:flex; flex-direction:column; gap:6px;}
.privat-raster b{font-family:var(--display); font-weight:400; font-size:28px; letter-spacing:1.5px; line-height:1;}
.privat-raster span{font-size:13.5px; line-height:1.55;}
@media (max-width:900px){ .privat-raster{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width:480px){ .privat-raster{grid-template-columns:1fr;} }

/* ---------- 10 · Herunterladen ---------- */
.tickets{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; align-items:stretch;}
.ticket{
  position:relative; display:flex; flex-direction:column; gap:14px; padding:30px 26px 26px;
  border-radius:var(--r); border:1px solid var(--line); background:linear-gradient(180deg, var(--panel-2), var(--panel));
  transition:transform .35s var(--rastet), border-color .3s;
}
/* Ausgestanzte Halbkreise wie an einer Eintrittskarte */
.ticket::before,.ticket::after{content:""; position:absolute; top:96px; width:18px; height:18px; border-radius:50%; background:var(--bg); border:1px solid var(--line);}
.ticket::before{left:-10px;} .ticket::after{right:-10px;}
.ticket:hover{transform:translateY(-4px); border-color:color-mix(in srgb, var(--amber) 55%, var(--line));}
.ticket-hervor{border-color:color-mix(in srgb, var(--amber) 45%, var(--line)); box-shadow:0 30px 60px rgba(0,0,0,.35);}
.ticket-ort{font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--amber);}
.ticket h3{font-size:54px; letter-spacing:2px;}
.ticket-daten{font-size:11.5px; letter-spacing:.12em; color:var(--muted); text-transform:uppercase; padding-bottom:14px; border-bottom:1px dashed var(--line);}
.ticket > p:not([class]){color:color-mix(in srgb, var(--cream) 80%, var(--muted)); font-size:14px; flex:1;}
.ticket .knopf{align-self:flex-start;}
.hinweis{font-size:13px; color:var(--muted);}
.hinweis summary{cursor:pointer; letter-spacing:.06em; color:var(--cream); list-style:none; display:flex; align-items:center; gap:8px;}
.hinweis summary::-webkit-details-marker{display:none;}
.hinweis summary::before{content:"+"; display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; border:1px solid var(--line); color:var(--amber); font-size:12px; transition:transform .25s;}
.hinweis[open] summary::before{transform:rotate(45deg);}
.hinweis p{margin-top:10px; line-height:1.6;}
@media (max-width:980px){ .tickets{grid-template-columns:1fr; max-width:560px;} }

/* W2: der Hinweis auf die Warnung steht sichtbar am Knopf, nicht erst im Aufklapper */
.warnung{font-size:12.5px; line-height:1.5; color:color-mix(in srgb, var(--cream) 72%, var(--muted)); padding-left:10px; border-left:2px solid var(--amber);}
.warnung-gut{border-left-color:var(--safelight);}
/* W4: die Karte fürs eigene Gerät steht vorn und ist hervorgehoben */
.ticket.fuer-dich{order:-1; border-color:color-mix(in srgb, var(--amber) 60%, var(--line)); box-shadow:0 30px 60px rgba(0,0,0,.35);}
.ticket.fuer-dich .ticket-ort::after{content:" · passt zu deinem Gerät"; color:var(--amber-bright);}
.qr-karte{
  display:flex; align-items:center; gap:20px; margin-top:22px; padding:16px 20px; max-width:560px;
  border:1px dashed var(--line); border-radius:var(--r);
}
.qr-karte img{width:96px; height:96px; border-radius:6px; flex:none;}
.qr-karte div{display:flex; flex-direction:column; gap:4px;}
.qr-karte b{font-family:var(--display); font-weight:400; font-size:24px; letter-spacing:1.5px; line-height:1;}
.qr-karte span{font-size:13px; color:color-mix(in srgb, var(--cream) 75%, var(--muted));}
.qr-karte[hidden]{display:none;}
.tickets .qr-karte{grid-column:1 / -1;}
@media (max-width:900px), (pointer: coarse){ .qr-karte{display:none;} }

/* W6: Editor und „Am Rechner" in einer Etappe — das Sofortbild liegt auf dem Fenster */
.editor-buehne{position:relative; padding-bottom:40px;}
.editor-buehne .fenster{transform:rotate(-1deg);}
.editor-buehne .abzug-sofort{position:absolute; right:-14px; bottom:0; width:34%; margin:0; transform:rotate(5deg); z-index:1;}
.editor-buehne .abzug-sofort figcaption{display:none;}
@media (max-width:900px){ .editor-buehne .abzug-sofort{width:40%; right:-6px;} }

/* ---------- Fuß ---------- */
.fuss{border-top:1px solid var(--line); padding-block:44px 54px; background:var(--tief);}
.fuss-raster{display:grid; grid-template-columns:1fr auto; gap:22px 40px; align-items:start;}
.marke-fuss{font-size:34px;}
.fuss-klein{font-size:11.5px; color:var(--muted); line-height:1.7;}
.fuss-klein a{color:var(--muted); text-decoration-color:var(--line); text-underline-offset:3px;}
.fuss-klein a:hover{color:var(--amber-bright);}
.fuss-links{display:flex; gap:22px;}
.fuss-links a{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--cream); text-decoration:none;}
.fuss-links a:hover{color:var(--amber-bright);}
.fuss-breit{grid-column:1 / -1; max-width:110ch;}
@media (max-width:600px){ .fuss-raster{grid-template-columns:1fr;} }

/* ---------- Rechtstexte ---------- */
.recht{padding-block:60px 100px;}
.recht .zeile{margin-bottom:14px;}
.recht h1{font-size:clamp(52px, 8vw, 96px); line-height:.95; margin-bottom:30px;}
.recht h2{font-size:30px; margin:34px 0 10px;}
.recht p, .recht li{color:color-mix(in srgb, var(--cream) 82%, var(--muted)); max-width:68ch;}
.recht .luecke{background:rgba(201,134,63,.18); color:var(--amber-bright); padding:0 4px; border-radius:3px;}

/* Bewegung reduzieren: alles steht still und ist sofort fertig */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
  .streifen-band{overflow-x:auto; width:auto;}
}

/* W10: Sprunglink für die Tastatur — unsichtbar, bis er den Fokus bekommt */
.sprung{
  position:fixed; left:max(16px, env(safe-area-inset-left, 0px)); top:calc(env(safe-area-inset-top, 0px) + 10px); z-index:60;
  padding:10px 16px; border-radius:999px; background:var(--amber-bright); color:var(--ink);
  font-family:var(--display); font-size:18px; letter-spacing:1.5px; text-decoration:none;
  transform:translateY(-160%); transition:transform .2s var(--rastet);
}
.sprung:focus{transform:none;}