/* app.css - Kamera-Oberflaeche. Ziel: fuehlt sich an wie eine System-Kamera.
   Der Sucher ist immer dunkel. Nur Blaetter und Flaechen folgen dem Theme.

   Drei Regeln, die hier ueberall gelten:
   1. Nichts springt. Jeder Wechsel bekommt eine kurze, gerichtete Bewegung.
   2. Kein Bildschirmwechsel blendet ueber. Volle Flaechen schieben, sie
      kreuzen nicht. Eine Deckkraft-Blende zeigt zwei Screens gleichzeitig,
      und genau das entlarvt eine Web-Seite.
   3. Bedienelemente halten Abstand zu Statusleiste und Home-Anzeige, auch
      wenn env(safe-area-inset-*) null meldet. Darum max() statt env(). */

:root {
  --ui-fg: #ffffff;
  --ui-fg-dim: rgba(255, 255, 255, 0.6);
  --ui-bg: #000000;
  --ui-sheet: rgba(24, 24, 26, 0.92);
  --ui-sheet-solid: #0d0d0f;
  --ui-chip: rgba(255, 255, 255, 0.14);
  --ui-line: rgba(255, 255, 255, 0.14);
  --ui-tile: rgba(255, 255, 255, 0.06);
  --ui-accent: #ffd44d;
  --ui-accent-fg: #101014;
  --ui-danger: #ff6b6b;
  --shutter-ring: rgba(255, 255, 255, 0.95);
  --shutter-core: #ffffff;

  /* Statusleiste rund 47 Punkt, Home-Anzeige rund 34 Punkt. Im Test meldet
     env() null. Der Mindestwert haelt die Bedienung trotzdem aus den Baendern. */
  --safe-t: max(env(safe-area-inset-top, 0px), 44px);
  --safe-b: max(env(safe-area-inset-bottom, 0px), 34px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 140ms;
  --t-med: 260ms;
  --t-push: 330ms;
}

:root[data-theme="light"] {
  --ui-fg: #101014;
  --ui-fg-dim: rgba(16, 16, 20, 0.58);
  --ui-bg: #f2f2f5;
  --ui-sheet: rgba(250, 250, 252, 0.94);
  --ui-sheet-solid: #f7f7f9;
  --ui-chip: rgba(16, 16, 20, 0.08);
  --ui-line: rgba(16, 16, 20, 0.12);
  --ui-tile: rgba(16, 16, 20, 0.06);
  --ui-accent: #b26a00;
  --ui-accent-fg: #ffffff;
  --ui-danger: #d32f2f;
}

* { box-sizing: border-box; }

/* ---------- Nachtraeglich ergaenzt ----------
   Diese Regeln gehoeren zu Bedienelementen, die im HTML schon standen, deren
   Gestaltung aber fehlte: Blitz, Schirmleuchte, Angaben im Betrachter,
   Rueckwand hinter der Galerie und die Hinweiszeile. */

/* Blitz: das durchgestrichene Symbol steht fuer "aus". */
.chip-badge { position: relative; }
.chip-badge b {
  position: absolute;
  right: 1px;
  bottom: 1px;
  font: 700 9px/1 system-ui, sans-serif;
  background: var(--ui-accent);
  color: var(--ui-accent-fg, #101014);
  border-radius: 4px;
  padding: 1px 3px;
  pointer-events: none;
}
.ic-bolt, .ic-bolt-off { width: 20px; height: 20px; fill: currentColor; }
#btnFlash .ic-bolt { display: none; }
#btnFlash .ic-bolt-off { display: block; }
#btnFlash[data-mode="auto"] .ic-bolt,
#btnFlash[data-mode="on"] .ic-bolt { display: block; }
#btnFlash[data-mode="auto"] .ic-bolt-off,
#btnFlash[data-mode="on"] .ic-bolt-off { display: none; }
#btnFlash[data-mode="on"] { color: var(--ui-accent); }

/* Schirmleuchte. Ersetzt den fehlenden Blitz, indem der Schirm hell wird. */
.lamp {
  position: fixed;
  inset: 0;
  z-index: 11;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms linear;
}
.lamp.on { opacity: 0.94; }

/* Rueckwand hinter der Galerie. Ohne sie wird beim Zuruecktreten der
   Kamerabildschirm sichtbar und drei Ebenen stehen gleichzeitig da. */
.shellback {
  position: fixed;
  inset: 0;
  z-index: 44;
  background: var(--ui-bg, #000);
}

/* Angaben zur Aufnahme im Betrachter. */
.viewer-info {
  margin: 0;
  padding: 8px 18px 2px;
  text-align: center;
  font: 500 12px/1.4 system-ui, sans-serif;
  color: var(--ui-fg-dim);
  font-variant-numeric: tabular-nums;
}

/* Kurze Rueckmeldung, etwa nach dem Sichern. */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-b, 0px) + 96px);
  transform: translateX(-50%);
  z-index: 70;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
  font: 600 13px/1 system-ui, sans-serif;
  pointer-events: none;
  animation: toastIn 2.4s var(--ease, ease) forwards;
}
@keyframes toastIn {
  0% { opacity: 0; transform: translate(-50%, 8px); }
  10% { opacity: 1; transform: translate(-50%, 0); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

.tune-body { padding-bottom: 4px; }

/* Ohne das gewinnt jede eigene display-Regel gegen das hidden-Attribut.
   Ein unsichtbares Overlay wuerde weiter alle Klicks abfangen. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #000;
  color: var(--ui-fg);
  font: 500 15px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Kein Web-Geruch: keine Textauswahl, kein Kontextmenue, kein Tap-Blitz,
   kein Doppeltipp-Zoom, kein Bild-Ziehen. */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}
body { touch-action: manipulation; }
img, canvas { -webkit-user-drag: none; user-drag: none; }

button {
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}

/* Fokusring nur bei Tastatur, nie nach einem Tipp. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Rollbalken bleiben unsichtbar, das Rollen bleibt moeglich. */
.looks,
.tune,
.gallery-grid {
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
}
.looks::-webkit-scrollbar,
.tune::-webkit-scrollbar,
.gallery-grid::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ---------- Sucher ---------- */

.stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #000;
  z-index: 0;
  touch-action: none;
}

.frame {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Ein Look mit festem Format bekommt Balken. Sie gehoeren nicht mittig auf den
   Bildschirm, sondern mittig in die freie Flaeche zwischen Kopfzeile und
   Bedienung. Sonst klebt das Bild ueber der Bedienung und laesst oben Luft. */
.frame.boxed {
  width: 100%;
  height: auto;
  aspect-ratio: var(--look-aspect, 1);
  max-height: calc(100% - 104px);
  margin-bottom: 104px;
  border-radius: 8px;
  overflow: hidden;
}

#view {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  will-change: transform;
}

#view.pixelated,
#ghost.pixelated,
#freeze.pixelated { image-rendering: pixelated; }

.frame.boxed #view { object-fit: contain; }

/* Standbild des alten Looks. Liegt genau ueber dem Sucher und blendet weg. */
.ghost {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  display: block;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
  background:
    linear-gradient(to right, transparent calc(33.333% - 0.5px), rgba(255,255,255,.32) calc(33.333% - 0.5px), rgba(255,255,255,.32) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px)),
    linear-gradient(to right, transparent calc(66.666% - 0.5px), rgba(255,255,255,.32) calc(66.666% - 0.5px), rgba(255,255,255,.32) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px)),
    linear-gradient(to bottom, transparent calc(33.333% - 0.5px), rgba(255,255,255,.32) calc(33.333% - 0.5px), rgba(255,255,255,.32) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px)),
    linear-gradient(to bottom, transparent calc(66.666% - 0.5px), rgba(255,255,255,.32) calc(66.666% - 0.5px), rgba(255,255,255,.32) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px));
}
.grid.on { opacity: 1; }

/* ---------- Fokus und Belichtung ----------
   Ein Element, eine Aussage. Der Rahmen zeigt, worauf scharf gestellt wird.
   Die Sonne an seiner rechten Kante ist der einzige Belichtungsanzeiger. */

.focus-ring {
  position: absolute;
  left: 0; top: 0;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  opacity: 0;
  pointer-events: none;
  transform: scale(1);
  transition: opacity 420ms var(--ease);
}
/* Vier Eckwinkel statt eines geschlossenen Rechtecks. */
.fc {
  position: absolute;
  width: 15px;
  height: 15px;
  border: 1.6px solid var(--ui-accent);
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
}
.fc-tl { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 3px 0 0 0; }
.fc-tr { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 3px 0 0; }
.fc-bl { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 3px; }
.fc-br { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 3px 0; }

.ev {
  position: absolute;
  left: 100%;
  top: 50%;
  width: 26px;
  height: 108px;
  margin-top: -54px;
  opacity: 0;
  transition: opacity 180ms var(--ease);
}
.ev-track {
  position: absolute;
  left: 12px;
  top: 8px;
  bottom: 8px;
  width: 1.5px;
  border-radius: 1px;
  background: linear-gradient(to bottom, rgba(255,212,77,0) 0%, rgba(255,212,77,.55) 22%, rgba(255,212,77,.55) 78%, rgba(255,212,77,0) 100%);
}
.ev-sun {
  position: absolute;
  left: 4px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  color: var(--ui-accent);
  fill: var(--ui-accent);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
  transform: translateY(calc(var(--ev, 0) * -38px));
  transition: transform 60ms linear;
}
.ev-sun svg { width: 100%; height: 100%; display: block; }
.focus-ring.ev-on .ev { opacity: 1; }

/* Einschnappen: gross herein, kurz unter Ziel, dann sitzen. Danach zwei
   Pulse, wie eine Kamera sie zur Bestaetigung zeigt. */
.focus-ring.on { animation: focusPop 2600ms var(--ease) forwards; }
.focus-ring.hold { opacity: 1; animation: focusSnap 300ms var(--ease); }
@keyframes focusSnap {
  0%   { opacity: 0; transform: scale(1.34); }
  60%  { opacity: 1; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes focusPop {
  0%   { opacity: 0; transform: scale(1.34); }
  7%   { opacity: 1; transform: scale(0.95); }
  12%  { opacity: 1; transform: scale(1); }
  26%  { opacity: 1; }
  31%  { opacity: 0.34; }
  36%  { opacity: 1; }
  41%  { opacity: 0.34; }
  46%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1); }
}

/* Verschluss. Kurz und knapp, sonst wirkt die Aufnahme traege. */
.flash {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 14;
}
/* 180 ms gesamt, davon rund 70 ms voll schwarz. Bei 30 Bildern je Sekunde
   sind das zwei volle Einzelbilder: kurz genug, um nicht zu bremsen,
   lang genug, um im Video als Verschluss lesbar zu sein. */
.flash.fire { animation: shutterFlash 180ms linear; }
@keyframes shutterFlash {
  0%   { opacity: 0; }
  16%  { opacity: 1; }
  55%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Eingefrorenes Bild. Bleibt kurz stehen und fliegt dann in das Vorschaubild. */
.freeze {
  position: fixed;
  z-index: 12;
  display: block;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.freeze.fly {
  z-index: 26;
  transition:
    transform 320ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 320ms cubic-bezier(0.7, 0, 0.9, 1),
    border-radius 320ms cubic-bezier(0.85, 0, 1, 1);
}

/* Selbstausloeser. Grosse Ziffer, jede Sekunde ein Schlag. */
.countdown {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font: 300 76px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: var(--ui-accent);
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  font-variant-numeric: tabular-nums;
  transition: opacity 160ms var(--ease);
}
:root[data-theme="light"] .countdown { color: #ffd44d; }
.countdown.on span { animation: countTick 1000ms var(--ease); display: block; }
.countdown.on { opacity: 1; }
@keyframes countTick {
  0%   { opacity: 0.25; transform: scale(1.28); }
  12%  { opacity: 1; transform: scale(1); }
  88%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0.8; transform: scale(0.97); }
}

/* ---------- Kopfzeile ---------- */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: calc(var(--safe-t) + 8px) calc(var(--safe-r) + 14px) 14px calc(var(--safe-l) + 14px);
  background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.14) 66%, transparent);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.spacer { flex: 1; }

/* Die Flaeche ist 38 Punkt gross, das Ziel 44. Das Pseudoelement traegt das Ziel. */
.chip {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--ui-chip);
  color: #fff;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform 100ms var(--ease), color var(--t-fast);
}
.chip::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}
.topbar .chip { color: #fff; }
.chip:active { transform: scale(0.9); }
.chip svg { width: 20px; height: 20px; fill: currentColor; pointer-events: none; }
.chip[aria-pressed="true"], .chip.on { background: var(--ui-accent); color: var(--ui-accent-fg); }
.chip-text {
  width: auto;
  min-width: 44px;
  height: 36px;
  padding: 0 14px;
  font: 600 13px/1 system-ui, sans-serif;
  border-radius: 999px;
  letter-spacing: 0.01em;
}
.chip-text::before { width: 100%; height: 44px; }
.chip-round { width: 46px; height: 46px; }
.chip-round svg { width: 22px; height: 22px; fill: none; }
.chip-round::before { width: 48px; height: 48px; }
#btnFlip.spin svg { animation: flipSpin 420ms var(--ease); }
@keyframes flipSpin { from { transform: rotate(0); } to { transform: rotate(180deg); } }

/* Die Zahl am Selbstausloeser sagt, wie lange er laeuft. */
.chip-badge b {
  position: absolute;
  right: -3px;
  bottom: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--ui-accent);
  color: var(--ui-accent-fg);
  font: 700 10px/16px system-ui, sans-serif;
  text-align: center;
}

/* Reiner Textknopf. Eine Pille waere hier ein Web-Knopf. */
.txtbtn {
  border: 0;
  background: none;
  padding: 0 4px;
  min-height: 44px;
  color: var(--ui-accent);
  font: 600 14px/1 system-ui, sans-serif;
  cursor: pointer;
}
.txtbtn:active { opacity: 0.55; }

/* ---------- Fusszeile ---------- */

.controls {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  padding-bottom: calc(var(--safe-b) + 8px);
  padding-left: var(--safe-l);
  padding-right: var(--safe-r);
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.66) 44%, rgba(0,0,0,0.18) 82%, transparent);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}

/* Die Kamera-UI verschwindet, solange ein Blatt offen ist. */
.chrome-off .topbar,
.chrome-off .controls { opacity: 0; pointer-events: none; }
.chrome-off .topbar { transform: translateY(-8px); }
.chrome-off .controls { transform: translateY(10px); }

/* Zoomstufen. Echter Zuschnitt, keine Attrappe. */
.zoomrow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  height: 46px;
  padding: 0 12px;
}
.zoom {
  position: relative;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgba(255, 255, 255, 0.82);
  font: 700 11px/1 system-ui, sans-serif;
  cursor: pointer;
  transition: width 200ms var(--ease), height 200ms var(--ease),
              color 160ms var(--ease), font-size 160ms var(--ease), background 160ms var(--ease);
}
.zoom::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 46px; height: 46px;
  transform: translate(-50%, -50%);
}
.zoom[aria-pressed="true"] {
  width: 42px;
  height: 42px;
  color: var(--ui-accent);
  font-size: 13px;
  background: rgba(0, 0, 0, 0.55);
}

.looks {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 6px 50vw 8px;
  touch-action: pan-x;
}

.look {
  position: relative;
  flex: 0 0 auto;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.62);
  font: 700 12px/1 system-ui, sans-serif;
  letter-spacing: 0.17em;
  padding: 15px 14px 17px;   /* ergibt 44 Punkt Hoehe, ohne dass es fetter wirkt */
  cursor: pointer;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  /* Farbe, Groesse und Deckkraft setzt das Skript pro Bild, damit die Leiste
     am Finger haengt statt zu schnappen. Hier steht nur der Ruhezustand. */
  will-change: transform, opacity;
}
.look::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--ui-accent);
  opacity: 0;
  transform: scale(0.2);
  transition: opacity 200ms var(--ease), transform 260ms var(--ease);
}
.look[aria-selected="true"]::after { opacity: 1; transform: scale(1); }
.look:active { filter: brightness(1.25); }

.row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 2px 24px 4px;
}

.shutter {
  position: relative;
  justify-self: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 3px solid var(--shutter-ring);
  background: transparent;
  padding: 4px;
  cursor: pointer;
  transition: transform 90ms var(--ease-io);
}
.shutter-inner {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--shutter-core);
  transform: scale(1);
  transition: transform 90ms var(--ease-io), background 90ms linear;
}
.shutter:active .shutter-inner,
.shutter.press .shutter-inner { transform: scale(0.84); background: #d6d6d6; }
.shutter.press { transform: scale(0.97); }
/* Waehrend der Selbstausloeser laeuft, pulst der Ring. */
.shutter.wait { animation: shutterWait 1000ms linear infinite; }
@keyframes shutterWait {
  0%, 100% { border-color: rgba(255, 255, 255, 0.95); }
  50%      { border-color: var(--ui-accent); }
}

.thumb {
  position: relative;
  justify-self: start;
  width: 46px;
  height: 46px;
  border-radius: 11px;
  border: 1px solid var(--ui-line);
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  transition: transform 120ms var(--ease), opacity 160ms var(--ease);
}
.thumb::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 48px; height: 48px;
  transform: translate(-50%, -50%);
}
.thumb:active { transform: scale(0.92); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Leer heisst leer. Ein schraffiertes Platzhalterfeld ist ein Web-Muster. */
.thumb-empty { display: block; width: 100%; height: 100%; }
.thumb.empty { opacity: 0.42; }
.thumb.pop { animation: thumbPop 420ms var(--ease); }
@keyframes thumbPop {
  0%   { transform: scale(0.72); }
  46%  { transform: scale(1.16); }
  100% { transform: scale(1); }
}
#btnFlip { justify-self: end; }

/* ---------- Blaetter ---------- */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 28;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
}
.scrim.on { opacity: 1; }

.grabber {
  width: 38px;
  height: 4px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: var(--ui-line);
}

.tune {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  max-height: 72vh;
  overflow-y: auto;
  padding: 10px calc(var(--safe-r) + 18px) calc(var(--safe-b) + 14px) calc(var(--safe-l) + 18px);
  background: var(--ui-sheet);
  backdrop-filter: blur(26px) saturate(1.6);
  -webkit-backdrop-filter: blur(26px) saturate(1.6);
  border-top: 1px solid var(--ui-line);
  border-radius: 20px 20px 0 0;
  color: var(--ui-fg);
  will-change: transform;
}
.tune.in { animation: sheetUp var(--t-med) var(--ease); }
.tune.out { animation: sheetDown 200ms var(--ease-io) forwards; }
@keyframes sheetUp { from { transform: translateY(101%); } to { transform: translateY(0); } }
@keyframes sheetDown { from { transform: translateY(0); } to { transform: translateY(101%); } }

.tune-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.tune-head strong { flex: 1; letter-spacing: 0.12em; font-size: 13px; text-transform: uppercase; }
.tune .chip { color: var(--ui-fg); }

/* Ein Kamera-Blatt zeigt wenige, verstaendliche Regler. Null ist die Mitte,
   der Wert steht als ganze Zahl daneben. Keine Ingenieurs-Groessen. */
.tune-row { margin-bottom: 12px; }
.tune-row label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font: 500 13px/1 system-ui, sans-serif;
  color: var(--ui-fg);
  margin-bottom: 2px;
}
.tune-row output {
  font-variant-numeric: tabular-nums;
  color: var(--ui-fg-dim);
  font-size: 13px;
}
/* Die Raste in der Mitte zeigt den Startwert. Ohne sie sieht ein Regler auf
   Null aus wie ein Regler ohne Wirkung. */
.slot { position: relative; }
.slot .mid {
  position: absolute;
  left: 50%; top: 50%;
  width: 2px; height: 9px;
  margin: -4.5px 0 0 -1px;
  border-radius: 1px;
  background: var(--ui-line);
  pointer-events: none;
}
.tune-empty { color: var(--ui-fg-dim); font-size: 13px; margin: 4px 0 12px; }

/* Der Expertenbereich bleibt zu. Die vollen Look-Werte tragen die Namen aus
   den Look-Dateien, das sind technische Bezeichner. Darum stehen sie klein
   und in Schreibmaschinenschrift, nicht als Kamera-Beschriftung. */
.tune-more {
  border-top: 1px solid var(--ui-line);
  padding-top: 8px;
  margin-top: 2px;
}
.tune-more summary {
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--ui-fg-dim);
  font: 500 13px/1 system-ui, sans-serif;
}
.tune-more summary::-webkit-details-marker { display: none; }
.tune-more summary::after {
  content: "";
  width: 7px; height: 7px;
  margin-left: 8px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 180ms var(--ease);
}
.tune-more[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.tune-expert { padding-bottom: 6px; }
.tune-expert .tune-row { margin-bottom: 9px; }
.tune-expert .tune-row label {
  font: 500 11px/1 ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--ui-fg-dim);
  letter-spacing: 0.02em;
}
.tune-expert .tune-row output { font-size: 11px; }

/* Eigener Regler. Der Systemregler sieht in jedem Browser anders aus.
   Die Fuellung laeuft von --a nach --b, damit die Null in der Mitte sitzt. */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 30px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(to right,
    var(--ui-line) 0 var(--a, 0%),
    var(--ui-accent) var(--a, 0%) var(--b, 50%),
    var(--ui-line) var(--b, 50%) 100%);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9.5px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  transition: transform 100ms var(--ease);
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.14); }
input[type="range"]::-moz-range-track { height: 3px; border-radius: 2px; background: var(--ui-line); }
input[type="range"]::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--ui-accent); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; }

/* ---------- Navigationsleiste in den Foto-Bildschirmen ---------- */

.navbtn {
  display: flex;
  align-items: center;
  gap: 1px;
  min-height: 44px;
  padding: 0 6px 0 0;
  border: 0;
  background: none;
  color: var(--ui-accent);
  font: 500 16px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
.navbtn svg { width: 21px; height: 21px; fill: none; }
.navbtn:active { opacity: 0.5; }
.navinfo {
  color: var(--ui-fg-dim);
  font: 500 13px/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}

.iconbtn {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  padding: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  transition: opacity 120ms var(--ease), transform 120ms var(--ease);
}
.iconbtn svg { width: 24px; height: 24px; fill: none; }
.iconbtn:active { opacity: 0.5; transform: scale(0.9); }
.iconbtn.danger { color: var(--ui-danger); }

/* ---------- Galerie ----------
   Sie schiebt von unten herein, deckend. Nichts blendet ueber, darum liegen
   nie zwei Bildschirme sichtbar uebereinander. */

.gallery {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--ui-bg);
  color: var(--ui-fg);
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.gallery.in { animation: pushUp var(--t-push) var(--ease); }
.gallery.out { animation: pushDown 250ms var(--ease-io) forwards; }
@keyframes pushUp { from { transform: translate3d(0, 100%, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes pushDown { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 100%, 0); } }
/* Die Galerie tritt zurueck, waehrend der Betrachter hereinschiebt. */
.gallery.behind { transform: translate3d(-24%, 0, 0); }
.gallery.behind-anim { transition: transform var(--t-push) var(--ease); }
.gallery.behind .gallery-grid,
.gallery.behind .gallery-head { filter: brightness(0.55); }
.gallery.behind-anim .gallery-grid,
.gallery.behind-anim .gallery-head { transition: filter var(--t-push) var(--ease); }

.gallery-head {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  height: calc(var(--safe-t) + 48px);
  padding: var(--safe-t) calc(var(--safe-r) + 16px) 0 calc(var(--safe-l) + 12px);
  background: linear-gradient(to bottom, rgba(0,0,0,0.72), rgba(0,0,0,0.5) 70%, rgba(0,0,0,0));
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
}
:root[data-theme="light"] .gallery-head {
  background: linear-gradient(to bottom, rgba(242,242,245,0.9), rgba(242,242,245,0.6) 70%, rgba(242,242,245,0));
}
.gallery-head strong {
  position: absolute;
  left: 0; right: 0;
  top: var(--safe-t);
  height: 48px;
  display: grid;
  place-items: center;
  pointer-events: none;
  font: 600 16px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  letter-spacing: 0.01em;
}
.gallery-head .navinfo { margin-left: auto; }

.gallery-grid {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: calc(var(--safe-t) + 56px) 0 calc(var(--safe-b) + 12px);
  align-content: start;
}
.gallery-grid .day {
  grid-column: 1 / -1;
  padding: 12px 16px 6px;
  font: 700 15px/1 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  letter-spacing: -0.01em;
}
.gallery-grid .day:first-child { padding-top: 2px; }
.gallery-grid button {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  display: block;
  cursor: pointer;
  background: var(--ui-tile);
  overflow: hidden;
  transition: transform 140ms var(--ease), opacity 140ms var(--ease);
  animation: tileIn 240ms var(--ease) backwards;
}
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-grid button:active { transform: scale(0.96); opacity: 0.86; }
@keyframes tileIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
.gallery-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  color: var(--ui-fg-dim);
  font-size: 15px;
}
.gallery-empty svg { width: 46px; height: 46px; fill: currentColor; opacity: 0.7; }

/* ---------- Betrachter ----------
   Er schiebt von rechts ueber die Galerie, deckend, wie ein Detailbildschirm.
   Nach unten wischen legt ihn wieder auf die Galerie zurueck. */

.viewer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: transparent;
  pointer-events: none;
}
.viewer-sheet {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr;
  background: #000;
  pointer-events: auto;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.viewer.in .viewer-sheet { animation: pushIn var(--t-push) var(--ease); }
.viewer.out .viewer-sheet { animation: pushOut 250ms var(--ease-io) forwards; }
@keyframes pushIn { from { transform: translate3d(100%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes pushOut { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(100%, 0, 0); } }

/* Der Streifen traegt alle Aufnahmen. Waagerecht wischen blaettert. */
.viewer-track {
  position: absolute;
  inset: 0;
  display: flex;
  will-change: transform;
}
.viewer-track figure {
  flex: 0 0 100%;
  margin: 0;
  display: grid;
  place-items: center;
  padding: calc(var(--safe-t) + 44px) 0 calc(var(--safe-b) + 56px);
  overflow: hidden;
}
.viewer-track img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.viewer-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(var(--safe-t) + 2px) calc(var(--safe-r) + 16px) 8px calc(var(--safe-l) + 12px);
  background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0));
  transition: opacity 180ms var(--ease);
}
.viewer-name {
  font: 600 11px/1 system-ui, sans-serif;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.72);
}
.viewer-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px calc(var(--safe-r) + 18px) calc(var(--safe-b) + 6px) calc(var(--safe-l) + 18px);
  background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
  transition: opacity 180ms var(--ease);
}
/* Waehrend des Wischens verschwindet die Bedienung, das Bild zaehlt. */
.viewer.dragging .viewer-top,
.viewer.dragging .viewer-bar { opacity: 0; }

/* ---------- Berechtigung ---------- */

.permission {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  background: var(--ui-bg);
  padding: 24px;
}
.permission-card {
  max-width: 340px;
  text-align: center;
  color: var(--ui-fg);
}
.permission-card h1 { font-size: 21px; margin: 0 0 10px; }
.permission-card p { color: var(--ui-fg-dim); font-size: 14px; margin: 0 0 22px; }
.btn {
  border: 0;
  border-radius: 999px;
  padding: 13px 24px;
  background: var(--ui-accent);
  color: var(--ui-accent-fg);
  font: 700 14px/1 system-ui, sans-serif;
  cursor: pointer;
  min-height: 44px;
}
.filepick { display: block; margin-top: 18px; color: var(--ui-fg-dim); font-size: 13px; cursor: pointer; min-height: 44px; }
.filepick input { display: none; }
.filepick span { text-decoration: underline; }

/* ---------- Start: Blende ---------- */

.boot {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}
.blade {
  position: absolute;
  left: -2%;
  right: -2%;
  height: 51%;
  background: #000;
  will-change: transform;
  /* Erst traege, dann schnell, dann ausrollen. Eine Blende springt nicht auf. */
  transition: transform 520ms cubic-bezier(0.45, 0, 0.15, 1);
}
.blade-t { top: 0; transform: translateY(0); border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.blade-b { bottom: 0; transform: translateY(0); border-top: 1px solid rgba(255, 255, 255, 0.14); }
.boot.open .blade-t { transform: translateY(-101%); }
.boot.open .blade-b { transform: translateY(101%); }

/* Drei Punkte melden: die App arbeitet, sie haengt nicht. */
.boot-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 7px;
  opacity: 0;
  /* Erst nach knapp einer halben Sekunde. Ein normaler Start ist vorher
     fertig, dann soll hier nichts aufblitzen. */
  animation: bootWait 1.1s var(--ease) 480ms forwards;
}
.boot-mark i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  animation: bootDot 1.05s ease-in-out infinite;
}
.boot-mark i:nth-child(2) { animation-delay: 0.13s; }
.boot-mark i:nth-child(3) { animation-delay: 0.26s; }
@keyframes bootWait { to { opacity: 1; } }
@keyframes bootDot {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50%      { opacity: 1; transform: scale(1); }
}
.boot.open .boot-mark { opacity: 0; transition: opacity 140ms linear; animation: none; }

/* Das erste Kamerabild kommt weich, nicht als Schlag. */
.stage.reveal .frame { animation: firstFrame 520ms var(--ease); }
@keyframes firstFrame {
  from { opacity: 0; transform: scale(1.045); }
  40%  { opacity: 1; }
  to   { opacity: 1; transform: scale(1); }
}

/* ---------- Querformat ----------
   Ein Telefon stapelt im Querformat nicht weiter nach unten. Die Bedienung
   wandert an die rechte Kante, die Modusleiste bleibt unten und macht Platz. */

@media (orientation: landscape) and (max-height: 560px) {
  :root {
    --safe-t: max(env(safe-area-inset-top, 0px), 10px);
    --safe-b: max(env(safe-area-inset-bottom, 0px), 21px);
    /* Im Querformat liegt die Aussparung an der linken oder rechten Kante.
       26 Punkt halten die Bedienung davon frei, auch ohne Geraeteangabe. */
    --safe-l: max(env(safe-area-inset-left, 0px), 26px);
    --safe-r: max(env(safe-area-inset-right, 0px), 26px);
  }

  .topbar { padding-top: calc(var(--safe-t) + 6px); padding-bottom: 10px; }

  .controls {
    top: 0; bottom: 0; left: auto; right: 0;
    width: 116px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px calc(var(--safe-r) + 6px) 8px 6px;
    background: linear-gradient(to left, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.6) 55%, transparent 100%);
  }
  .chrome-off .controls { transform: translateX(12px); }

  .row {
    grid-template-columns: none;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 20px;
    padding: 0;
  }
  .thumb, #btnFlip { justify-self: auto; }
  .shutter { width: 66px; height: 66px; }

  /* Modusleiste und Zoom bleiben unten links, ausserhalb der Saeule. */
  .zoomrow {
    position: fixed;
    left: 0;
    right: 116px;
    bottom: calc(var(--safe-b) + 46px);
    height: 40px;
  }
  .looks {
    position: fixed;
    left: 0;
    right: 116px;
    bottom: 0;
    padding: 4px calc(50vw - 58px) calc(var(--safe-b) + 10px);
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.4) 60%, transparent);
  }
  .look { padding: 12px 13px 14px; letter-spacing: 0.13em; }
  .look::after { bottom: 4px; width: 4px; height: 4px; margin-left: -2px; }

  .tune { max-height: 88vh; }
  .countdown { font-size: 64px; }
  /* Im Querformat liegt die freie Flaeche links, nicht oben. */
  .frame.boxed { max-height: 100%; margin-bottom: 0; margin-right: 116px; }
  .viewer-track figure { padding: calc(var(--safe-t) + 42px) 0 calc(var(--safe-b) + 52px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Pruefmodus ---------- */
/* Der Block steht unten im Kamera-Blatt und nur dann, wenn ein Token
   hinterlegt ist. Er ist Technik, kein Kamera-Regler: darum abgesetzt,
   kleiner und ohne Akzentfarbe. */

.lab {
  margin: 18px 0 4px;
  padding: 14px 0 2px;
  border-top: 1px solid var(--ui-line);
}
.lab-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.lab-head strong { font-size: 14px; font-weight: 700; }
.lab-hint {
  margin: 6px 0 10px;
  color: var(--ui-fg-dim);
  font-size: 12px;
  line-height: 1.45;
}
.lab-note {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--ui-line);
  border-radius: 10px;
  background: var(--ui-tile);
  color: var(--ui-fg);
  font: 400 13px/1 system-ui, sans-serif;
}
.lab-note:focus { outline: 2px solid var(--ui-accent); outline-offset: 1px; }
.lab-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  min-height: 30px;
}
.lab-stat {
  color: var(--ui-fg-dim);
  font-size: 11.5px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Schalter im Stil des Systems: die Bahn faerbt sich, der Knopf faehrt. */
.switch {
  flex: 0 0 auto;
  width: 50px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--ui-chip);
  position: relative;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-io);
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: transform var(--t-fast) var(--ease-io);
}
.switch[aria-checked="true"] { background: var(--ui-accent); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }

/* Ein Punkt in der Kopfzeile. Er sagt: Bilder verlassen dieses Geraet.
   Ohne dieses Zeichen liefe der Modus unbemerkt weiter. */
html.lab-on .topbar::after {
  content: "";
  position: absolute;
  top: calc(var(--safe-t) + 24px);
  left: 50%;
  margin-left: -3.5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ui-accent);
  box-shadow: 0 0 8px var(--ui-accent);
  pointer-events: none;
}