/* ============================================================
   Mission Taubergießen — Design System
   Farben: Off-White #F5F0E8 / Dunkelbraun #2C1810 / Waldgrün #3D5A40
   ============================================================ */

:root {
  --bg:             #F5F0E8;
  --bg-karte:       #EDE8DE;
  --text:           #2C1810;
  --text-sekundaer: #7A6355;
  --akzent:         #3D5A40;
  --border:         #D4C9B8;
  --fehler:         #8B2020;
  --weiss:          #FDFAF5;

  --font-story:   Georgia, 'Palatino Linotype', 'Book Antiqua', serif;
  --font-ui:      -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: Georgia, 'Palatino Linotype', 'Book Antiqua', serif; /* Alias für Fehler-Screen */

  --radius:  8px;
  --abstand: 1.5rem;
}

/* --- Reset -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; }

body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* --- Screen-Container --------------------------------------- */
.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: var(--abstand);
  padding-bottom: 2.5rem;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}

/* --- Header ------------------------------------------------- */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.25rem;
  min-height: 2rem;
}

.app-logo {
  font-family: var(--font-story);
  font-size: 0.8rem;
  color: var(--text-sekundaer);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.zurueck-btn {
  background: none;
  border: none;
  color: var(--text-sekundaer);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem 0.25rem 0;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.zurueck-btn:active { opacity: 0.5; }

/* --- Typografie --------------------------------------------- */
h1 {
  font-family: var(--font-story);
  font-size: 1.7rem;
  line-height: 1.25;
  font-weight: normal;
}

h2 {
  font-family: var(--font-story);
  font-size: 1.1rem;
  font-weight: normal;
  color: var(--text-sekundaer);
}

p { line-height: 1.75; }

.app-text p + p { margin-top: 0.75rem; }

/* --- Buch-Öffnen-Animation ---------------------------------- */
.buch-wrapper {
  position: relative;
  perspective: 1100px;
  transform: scale(0.35);
  opacity: 0;
  transform-origin: center center;
  transition: transform 0.7s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.4s ease;
}

.buch-wrapper.buch-aufgehend {
  transform: scale(1);
  opacity: 1;
}

.buch-deckel {
  position: absolute;
  inset: 0;
  z-index: 5;
  transform-origin: left center;
  transform: rotateY(0deg);
  transition: transform 2.2s cubic-bezier(0.38, 0, 0.16, 1);
  border-radius: var(--radius);
  overflow: hidden;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.buch-deckel.geoeffnet {
  transform: rotateY(-172deg);
  pointer-events: none;
}

.deckel-leder {
  width: 100%;
  height: 100%;
  min-height: 260px;
  background-color: #1E0D04;
  background-image:
    /* Ecken stark abgegriffen */
    radial-gradient(ellipse at 4% 4%,   rgba(5,1,0,0.80) 0%, transparent 28%),
    radial-gradient(ellipse at 96% 4%,  rgba(5,1,0,0.72) 0%, transparent 28%),
    radial-gradient(ellipse at 4% 96%,  rgba(5,1,0,0.72) 0%, transparent 28%),
    radial-gradient(ellipse at 96% 96%, rgba(5,1,0,0.68) 0%, transparent 28%),
    /* Randvignette */
    radial-gradient(ellipse at 50% 50%, rgba(60,22,5,0.22) 0%, transparent 72%),
    /* Griffzone aufgehellt */
    radial-gradient(ellipse at 58% 44%, rgba(85,35,8,0.30) 0%, transparent 50%),
    /* Fleckige Patina */
    radial-gradient(ellipse at 30% 65%, rgba(65,25,6,0.22) 0%, transparent 36%),
    radial-gradient(ellipse at 75% 30%, rgba(50,18,4,0.18) 0%, transparent 30%),
    /* Diagonale Lederkörnung */
    repeating-linear-gradient(
      22deg,
      transparent 0px, transparent 2px,
      rgba(255,255,255,0.016) 2px, rgba(255,255,255,0.016) 3px
    ),
    /* Feine Horizontalkörnung */
    repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 3px,
      rgba(0,0,0,0.05) 3px, rgba(0,0,0,0.05) 4px
    );
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 6px 24px rgba(0,0,0,0.60),
    inset 0 0 70px rgba(0,0,0,0.50),
    inset 0 2px 8px rgba(0,0,0,0.35);
  position: relative;
}

/* Buchrücken links — Lederfalz, keine Spirale */
.deckel-leder::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 20px;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.55) 0px,
    rgba(0,0,0,0.30) 10px,
    rgba(0,0,0,0.10) 16px,
    transparent 20px
  );
  /* Feine Nahtlinie am rechten Rand des Rückens */
  box-shadow: inset -1px 0 0 rgba(180,120,40,0.18);
}

.deckel-rahmen {
  text-align: center;
  padding: 1.5rem 2rem;
  border: 1px solid rgba(185,135,55,0.26);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.50),
    inset 0 1px 0 rgba(255,210,90,0.10),
    inset 0 0 12px rgba(0,0,0,0.22);
  border-radius: 3px;
  min-width: 150px;
}

.deckel-initialen {
  font-family: var(--font-story);
  font-size: 2.2rem;
  letter-spacing: 0.3em;
  font-style: italic;
  background: linear-gradient(
    175deg,
    #f2dc88 0%,
    #c9952e 30%,
    #7a5012 52%,
    #c9952e 70%,
    #edd878 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.75));
}

.deckel-linie {
  width: 55%;
  height: 1px;
  background: rgba(196,144,64,0.30);
  margin: 0.75rem auto 0.6rem;
}

.deckel-jahr {
  font-family: var(--font-story);
  font-size: 0.75rem;
  color: rgba(196,144,64,0.50);
  letter-spacing: 0.22em;
  font-style: italic;
}

.deckel-untertitel {
  font-family: var(--font-story);
  font-size: 0.6rem;
  color: rgba(196,144,64,0.33);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 0.4rem;
}

/* Echte Ledertextur-PNG + Kratzer-Overlays */
.deckel-leder::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url('../fotos/leder-textur.png'),
    linear-gradient(133deg, transparent 28%, rgba(200,140,60,0.05) 28%, rgba(200,140,60,0.05) 28.6%, transparent 28.6%),
    linear-gradient(151deg, transparent 67%, rgba(200,140,60,0.05) 67%, rgba(200,140,60,0.05) 67.7%, transparent 67.7%),
    radial-gradient(ellipse at 62% 35%, rgba(255,200,100,0.04) 0%, transparent 40%);
  background-size: 200px 200px, 100% 100%, 100% 100%, 100% 100%;
  opacity: 0.55;
  mix-blend-mode: screen;
  pointer-events: none;
  border-radius: var(--radius);
}

/* Wrapper für Seiteninhalt (hinter dem Buchdeckel) ----------- */
.buch-seite-inhalt {
  position: relative;
  z-index: 1;
}

/* Seite-Referenz beim Aufgeklappten */
.seite-ref-einband {
  font-family: var(--font-story);
  font-size: 0.7rem;
  color: rgba(196,144,64,0.48);
  text-align: right;
  margin-bottom: 3px;
  padding-right: 2px;
  font-style: italic;
}

/* --- Mini-Buch (Tap-Target auf Inhalt-Screen) --------------- */
.buch-mini-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  padding: 0.25rem;
  transition: transform 0.15s;
  margin: 0 auto;
}

.buch-mini-wrapper:active {
  transform: scale(0.94);
}

.buch-mini {
  width: 130px;
  height: 178px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 10px 32px rgba(0,0,0,0.62),
    0 3px 8px rgba(0,0,0,0.30),
    inset 0 0 40px rgba(0,0,0,0.45);
  background-color: #1E0D04;
  background-image:
    /* Ecken: abgegriffen und dunkler */
    radial-gradient(ellipse at 4% 4%,   rgba(5,1,0,0.75) 0%, transparent 30%),
    radial-gradient(ellipse at 96% 4%,  rgba(5,1,0,0.65) 0%, transparent 30%),
    radial-gradient(ellipse at 4% 96%,  rgba(5,1,0,0.65) 0%, transparent 30%),
    radial-gradient(ellipse at 96% 96%, rgba(5,1,0,0.60) 0%, transparent 30%),
    /* Randvignette */
    radial-gradient(ellipse at 50% 50%, rgba(55,20,5,0.20) 0%, transparent 75%),
    /* Mittelhelle Zone: oft berührt */
    radial-gradient(ellipse at 58% 44%, rgba(80,32,8,0.28) 0%, transparent 48%),
    /* Diagonale Lederkörnung */
    repeating-linear-gradient(
      22deg,
      transparent 0px, transparent 2px,
      rgba(255,255,255,0.018) 2px, rgba(255,255,255,0.018) 3px
    ),
    /* Feine Horizontalkörnung */
    repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 3px,
      rgba(0,0,0,0.05) 3px, rgba(0,0,0,0.05) 4px
    );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Echte Ledertextur-PNG */
.buch-mini::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../fotos/leder-textur.png');
  background-size: 200px 200px;
  opacity: 0.55;
  mix-blend-mode: screen;
  pointer-events: none;
  border-radius: 6px;
}

/* Buchrücken — Lederfalz, keine Spirale */
.buch-mini::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 16px;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.58) 0px,
    rgba(0,0,0,0.32) 8px,
    rgba(0,0,0,0.10) 13px,
    transparent 16px
  );
  box-shadow: inset -1px 0 0 rgba(180,120,40,0.15);
  border-radius: 6px 0 0 6px;
}

.buch-mini-rahmen {
  text-align: center;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(185,135,55,0.28);
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.50),
    inset 0 1px 0 rgba(255,210,90,0.10),
    inset 0 0 8px rgba(0,0,0,0.20);
}

.buch-mini-initialen {
  font-family: var(--font-story);
  font-size: 1.25rem;
  letter-spacing: 0.28em;
  font-style: italic;
  /* Metallischer Goldverlauf: Licht → Kern → Schatten → Licht */
  background: linear-gradient(
    175deg,
    #f2dc88 0%,
    #c9952e 30%,
    #7a5012 52%,
    #c9952e 70%,
    #edd878 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.70));
}

.buch-mini-linie {
  width: 55%;
  height: 1px;
  background: rgba(175,125,50,0.22);
  margin: 0.35rem auto 0.3rem;
}

.buch-mini-jahr {
  font-family: var(--font-story);
  font-size: 0.58rem;
  color: rgba(175,125,50,0.42);
  letter-spacing: 0.22em;
  font-style: italic;
}

.buch-mini-untertitel {
  font-family: var(--font-story);
  font-size: 0.48rem;
  color: rgba(175,125,50,0.28);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 0.3rem;
}

.buch-mini-label {
  font-family: var(--font-story);
  font-style: italic;
  font-size: 0.875rem;
  color: var(--akzent);
  text-align: center;
  letter-spacing: 0.01em;
}

/* --- Tagebuch-Karte ----------------------------------------- */
.tagebuch {
  position: relative;
  background-color: #D9C98A;
  background-image:
    linear-gradient(#9B3030 0, #9B3030 100%),
    /* Vignette: verschlissene Ränder */
    radial-gradient(ellipse at center, transparent 45%, rgba(80,45,8,0.18) 100%),
    /* Alters-Musterung: ungleichmäßige Verfärbung */
    radial-gradient(ellipse at 80% 15%, rgba(100,65,15,0.14) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 85%, rgba(90,55,10,0.12) 0%, transparent 45%),
    repeating-linear-gradient(
      transparent,
      transparent 28px,
      rgba(90, 60, 20, 0.22) 28px,
      rgba(90, 60, 20, 0.22) 29px
    );
  background-size: 2px 100%, 100% 100%, 100% 100%, 100% 100%, 100% 29px;
  background-position: 36px 0, 0 0, 0 0, 0 0, 0 36px;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  border-radius: var(--radius);
  padding: 1rem 1.25rem 1.25rem 3rem;
  min-height: 520px;
  box-shadow:
    2px 3px 10px rgba(44,24,8,0.22),
    inset 0 0 0 1px rgba(80,50,10,0.14),
    inset 3px 0 10px rgba(0,0,0,0.07);
  overflow: hidden;
}

/* Kaffeefleck */
.tagebuch::before {
  content: '';
  position: absolute;
  top: 12px;
  right: 18px;
  width: 52px;
  height: 44px;
  background: radial-gradient(ellipse,
    rgba(110,70,25,0.22) 0%,
    rgba(110,70,25,0.10) 45%,
    transparent 68%
  );
  border-radius: 50%;
  pointer-events: none;
  transform: rotate(-12deg);
}

/* Altersflecken (Foxing) */
.tagebuch::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 28%, rgba(100,60,18,0.14) 0%, transparent 10px),
    radial-gradient(circle at 78% 72%, rgba(100,60,18,0.12) 0%, transparent  8px),
    radial-gradient(circle at 55% 45%, rgba(100,60,18,0.08) 0%, transparent  5px),
    radial-gradient(circle at 90% 18%, rgba(100,60,18,0.13) 0%, transparent  7px),
    radial-gradient(circle at 30% 88%, rgba(100,60,18,0.10) 0%, transparent  6px);
  pointer-events: none;
  border-radius: var(--radius);
}

.tagebuch-datum {
  font-family: var(--font-story);
  font-size: 0.78rem;
  color: #7A5A3A;
  font-style: italic;
  margin-bottom: 0.4rem;
  letter-spacing: 0.01em;
  opacity: 0.85;
  position: relative;
  z-index: 1;
}

.tagebuch p {
  font-family: var(--font-story);
  font-size: 0.975rem;
  line-height: 29px; /* exakt Linienraster — verhindert Drift über mehrere Zeilen */
  font-style: italic;
  color: #2E1A0E;
  opacity: 0.88;
  /* Tinte zieht leicht ins Papier */
  text-shadow: 0.3px 0.3px 0.6px rgba(80,40,10,0.25);
  position: relative;
  z-index: 1;
}

.tagebuch p + p { margin-top: 0; }

.tagebuch-signatur {
  font-family: var(--font-story);
  font-size: 0.9rem;
  color: #5E3A20;
  text-align: right;
  margin-top: 0.625rem;
  font-style: italic;
  padding-right: 0.5rem;
  opacity: 0.8;
  position: relative;
  z-index: 1;
  text-shadow: 0.3px 0.3px 0.6px rgba(80,40,10,0.2);
}

/* Seiten-Referenz */
.seite-ref {
  font-family: var(--font-story);
  font-size: 0.8rem;
  color: var(--text-sekundaer);
  font-style: italic;
  text-align: right;
}

/* --- Aufgaben-Box ------------------------------------------- */
.aufgabe {
  border: 1.5px solid var(--akzent);
  border-radius: var(--radius);
  padding: 1.125rem 1.25rem;
}

.aufgabe-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--akzent);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* --- Buttons ------------------------------------------------ */
.btn {
  display: block;
  width: 100%;
  padding: 0.9rem 1.5rem;
  background: var(--akzent);
  color: var(--bg);
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  letter-spacing: 0.01em;
  transition: opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.btn:not(:disabled):active { opacity: 0.8; }

.btn-sekundaer {
  background: transparent;
  color: var(--text-sekundaer);
  border: 1.5px solid var(--border);
  font-weight: 400;
}

.btn-klein { font-size: 0.875rem; padding: 0.7rem 1rem; }

/* --- Eingabefelder ------------------------------------------ */
.eingabe-gruppe {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.eingabe-label {
  font-size: 0.8rem;
  color: var(--text-sekundaer);
  letter-spacing: 0.02em;
}

input[type="text"],
input[type="number"] {
  width: 100%;
  padding: 0.875rem 1rem;
  background: var(--weiss);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: 1.1rem;
  color: var(--text);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

input:focus { border-color: var(--akzent); }

/* Zahl-Eingabe: Pfeil ausblenden */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; }
input[type=number] { -moz-appearance: textfield; }

/* --- GPS-Radar ---------------------------------------------- */
.gps-radar {
  position: relative;
  width: 148px;
  height: 148px;
  margin: 0.5rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gps-rings {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gps-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid var(--akzent);
  opacity: 0;
  animation: gps-puls 2.4s ease-out infinite;
}

.gps-ring.r1 { width:  56px; height:  56px; animation-delay: 0s;    }
.gps-ring.r2 { width:  90px; height:  90px; animation-delay: 0.6s;  }
.gps-ring.r3 { width: 124px; height: 124px; animation-delay: 1.2s;  }

@keyframes gps-puls {
  0%   { opacity: 0.55; transform: scale(0.85); }
  100% { opacity: 0;    transform: scale(1.05); }
}

.gps-inner {
  position: relative;
  z-index: 1;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid var(--akzent);
  background: var(--bg-karte);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: background 0.3s, border-color 0.3s;
}

.gps-zahl {
  font-family: var(--font-story);
  font-size: 1.6rem;
  font-weight: normal;
  color: var(--akzent);
  line-height: 1;
}

.gps-einheit {
  font-size: 0.7rem;
  color: var(--text-sekundaer);
  margin-top: 0.2rem;
  letter-spacing: 0.02em;
}

/* Zustand: lädt (Startzustand) */
.gps-radar[data-state="loading"] .gps-ring  { border-color: var(--border); animation-duration: 3s; }
.gps-radar[data-state="loading"] .gps-inner { border-color: var(--border); }
.gps-radar[data-state="loading"] .gps-zahl  { color: var(--text-sekundaer); }

.gps-pin-icon {
  width: 26px;
  height: 26px;
  color: currentColor;
  display: block;
}

.gps-hinweis {
  font-size: 0.875rem;
  color: var(--text-sekundaer);
  font-style: italic;
  text-align: center;
  line-height: 1.6;
  min-height: 1.4em; /* verhindert Layout-Sprung wenn Text wechselt */
}

/* Zustand: angekommen */
.gps-radar[data-state="arrived"] .gps-ring  { animation: none; opacity: 0.2; }
.gps-radar[data-state="arrived"] .gps-inner { background: var(--akzent); border-color: var(--akzent); }
.gps-radar[data-state="arrived"] .gps-zahl  { color: var(--bg); font-size: 1.8rem; }
.gps-radar[data-state="arrived"] .gps-einheit { color: rgba(245,240,232,0.8); }

/* Zustand: Fehler / imprecise */
.gps-radar[data-state="error"] .gps-ring    { animation: none; opacity: 0.12; }
.gps-radar[data-state="error"] .gps-inner   { border-color: var(--fehler); }
.gps-radar[data-state="error"] .gps-zahl    { color: var(--fehler); font-size: 1.4rem; }

/* Zustand: nah (near) */
.gps-radar[data-state="near"] .gps-ring     { border-color: #7A9B3A; }
.gps-radar[data-state="near"] .gps-inner    { border-color: #7A9B3A; }

/* --- Info-Text (klein, kursiv) ------------------------------ */
.hinweis-text {
  font-size: 0.875rem;
  color: var(--text-sekundaer);
  font-style: italic;
  text-align: center;
  line-height: 1.6;
}

/* --- Navigations-Header (enthält h2 mit Zielname) ----------- */
.nav-header { margin-bottom: -0.25rem; }

/* --- Navigations-Box ---------------------------------------- */
.nav-box {
  background: var(--bg-karte);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.nav-box p + p { margin-top: 0.625rem; }

/* --- Fortschritts-Punkte ------------------------------------ */
.fortschritt {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 0.25rem 0;
}

.fortschritt-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
  transition: background 0.2s;
}

.fortschritt-dot.aktiv     { background: var(--akzent); }
.fortschritt-dot.gewesen   { background: var(--text-sekundaer); }

/* --- Routenwahl-Optionen ------------------------------------ */
.routenwahl-optionen {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* --- Bestätigung -------------------------------------------- */
.bestaetigung-box {
  text-align: center;
  padding: 0.5rem 0;
}

.bestaetigung-haken {
  font-size: 2.5rem;
  color: var(--akzent);
  display: block;
  margin-bottom: 0.75rem;
}

.bestaetigung-text {
  font-family: var(--font-story);
  font-size: 0.975rem;
  font-style: italic;
  color: var(--text-sekundaer);
}

/* --- Fehler ------------------------------------------------- */
.fehler-text {
  color: var(--fehler);
  font-size: 0.875rem;
  text-align: center;
}

/* --- Élise-Nachricht (finale Enthüllung) -------------------- */
.elise-nachricht {
  background: var(--bg-karte);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
}

.elise-nachricht p {
  font-family: var(--font-story);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 2;
  color: var(--text);
}

/* --- Outro (cinematic) -------------------------------------- */
.screen--outro {
  padding: 0;
  position: relative;
  overflow: hidden;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.outro-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.outro-bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  animation: kenBurns 35s ease-in-out infinite alternate;
  transform-origin: center center;
}

@keyframes kenBurns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.09) translate(-2%, 2%); }
}

.outro-vignette-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 160px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45), transparent);
  z-index: 1;
  pointer-events: none;
}

.outro-stempel {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 116px;
  height: 116px;
  z-index: 2;
  opacity: 0;
  transform: rotate(12deg) scale(0.4);
  animation: stempelRein 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.2s forwards;
}

@keyframes stempelRein {
  to { opacity: 1; transform: rotate(12deg) scale(1); }
}

.outro-content {
  position: relative;
  z-index: 2;
  padding: 3rem 1.5rem 2rem;
  background: linear-gradient(
    to top,
    rgba(10,8,5,0.92) 0%,
    rgba(10,8,5,0.80) 50%,
    rgba(10,8,5,0.40) 75%,
    transparent 100%
  );
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
}

.outro-caption {
  font-family: var(--font-story);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: rgba(220,200,160,0.55);
  margin-bottom: 1rem;
  font-style: italic;
  text-align: center;
}

.screen--outro .outro-text {
  text-align: center;
  padding: 0;
  margin-bottom: 0.5rem;
}

.screen--outro .outro-text p {
  font-family: var(--font-story);
  font-size: 1.1rem;
  line-height: 1.9;
  color: rgba(240,228,200,0.95);
  margin: 0 0 0.1rem;
}

.outro-nachtext {
  text-align: center;
  border-top: 1px solid rgba(200,180,130,0.2);
  padding-top: 1rem;
  margin: 0.5rem 0 1.5rem;
}

.outro-nachtext p {
  font-size: 0.85rem;
  line-height: 1.7;
  color: rgba(210,195,165,0.7);
  margin: 0 0 0.5rem;
}

.outro-aktionen {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* --- Dev-Banner -------------------------------------------- */
.dev-banner {
  background: #FFF3CD;
  border: 1px solid #FFC107;
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: 0.8rem;
  color: #533F03;
}

.dev-banner strong { color: #3D2800; }

/* --- Trennlinie -------------------------------------------- */
hr {
  border: none;
  border-top: 1px solid var(--border);
}

/* --- Lade-Screen ------------------------------------------- */
.lade-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  color: var(--text-sekundaer);
  font-family: var(--font-story);
  font-style: italic;
}

/* --- Ladecheck (Bevor ihr loslauft) ------------------------ */
.lade-status {
  background: var(--bg-karte);
  border-radius: var(--radius);
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  color: var(--text-sekundaer);
  text-align: center;
  font-style: italic;
}

.lade-status.lade-bereit {
  background: #EAF2EA;
  color: #2D5A2D;
  font-style: normal;
  font-weight: 500;
}

/* --- Prüfbild ---------------------------------------------- */
.pruefbild-box {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}

.pruefbild-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: cover;
}

.pruefbild-blur {
  filter: blur(14px);
  transition: filter 0.5s ease;
}

.pruefbild-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(245, 240, 232, 0.2);
}

.pruefbild-caption {
  padding: 0.625rem 0.875rem;
  font-size: 0.8rem;
  color: var(--text-
/* ── Pegelstand-Ampel ─────────────────────────────────────── */

.pegelstand-box {
  margin: 1rem 0;
}

.pegelstand-loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-sekundaer);
  font-size: 0.875rem;
}

@keyframes drehen {
  to { transform: rotate(360deg); }
}

.pegelstand-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--text-sekundaer);
  border-radius: 50%;
  flex-shrink: 0;
  animation: drehen 0.8s linear infinite;
}

.pegelstand-ampel {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  border: 1px solid;
}

.pegelstand-ampel--gruen  { background: #dcfce7; border-color: #22c55e; }
.pegelstand-ampel--orange { background: #fef9c3; border-color: #eab308; }
.pegelstand-ampel--rot    { background: #fee2e2; border-color: #ef4444; }
.pegelstand-ampel--grau   { background: #f3f4f6; border-color: #9ca3af; }

.pegelstand-ampel-licht {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}

.pegelstand-ampel--gruen  .pegelstand-ampel-licht { background: #22c55e; color: #22c55e; }
.pegelstand-ampel--orange .pegelstand-ampel-licht { background: #eab308; color: #eab308; }
.pegelstand-ampel--rot    .pegelstand-ampel-licht { background: #ef4444; color: #ef4444; }
.pegelstand-ampel--grau   .pegelstand-ampel-licht { background: #888;    color: #888;    box-shadow: none; }
.pegelstand-ampel--grau   .pegelstand-status      { color: #888; }

.pegelstand-ampel-info { flex: 1; min-width: 0; }

.pegelstand-wert {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}

.pegelstand-status {
  font-size: 0.875rem;
  margin-top: 0.125rem;
  font-weight: 500;
}

.pegelstand-ampel--gruen  .pegelstand-status { color: #15803d; }
.pegelstand-ampel--orange .pegelstand-status { color: #b45309; }
.pegelstand-ampel--rot    .pegelstand-status { color: #dc2626; }

.pegelstand-zeit {
  font-size: 0.72rem;
  color: var(--text-sekundaer);
  m
/* ── App-Update-Banner ─────────────────────────────────────── */
#update-banner {
  position: fixed;
  bottom: env(safe-area-inset-bottom, 0);
  left: 0; right: 0;
  background: var(--akzent);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-family: var(--font-ui);
  z-index: 9999;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.2);
}

#update-banner button {
  background: var(--bg);
  color: var(--akzent);
  border: none;
  border-radius: 6px;
  padding: 0.4rem 0.875rem;
  font-size: 0.8rem;
  font-family: var(--font-ui);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
eight: 700;
  color: var(--text-primaer, inherit);
}

.pegel-karte-zeit {
  font-size: 0.65rem;
  color: var(--text-sekundaer);
  margin-top: 0.15rem;
}

/* ── Pegel-Disclaimer ─────────────────────────────────────── */
.pegel-disclaimer {
  font-size: 0.7rem;
  color: var(--text-sekundaer);
  text-align: center;
  margin: 0.5rem 0 0.75rem;
  line-height: 1.4;
}

.pegel-disclaimer a {
  color: var(--text-sekundaer);
}

/* ── Beobachtungslog-Formular ─────────────────────────────── */
.obs-form {
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: rgba(0,0,0,0.05);
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255,255,255,0.1));
}

.obs-form-titel {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.obs-form-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.obs-abbrechen {
  opacity: 0.5;
}

.pegel-obs-btn {
  display: block;
  margin: 0.25rem auto 0;
}

/* ── DEV Feedback-Button ────────────────────────────────────── */
#fb-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  border: 1px solid rgba(196,144,64,0.4);
  background: linear-gradient(145deg, #2a1c0a, #1a1008);
  font-size: 1.35rem;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 0 0 3px rgba(196,144,64,0.08);
  transition: transform 0.15s, box-shadow 0.15s;
}
#fb-btn:active { transform: scale(0.93); }

#fb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.6);
  align-items: flex-end;
  justify-content: center;
  padding: 0 1rem 1.5rem;
}
#fb-overlay.open { display: flex; }

#fb-box {
  background: linear-gradient(160deg, #261808, #1a1008);
  border: 1px solid rgba(196,144,64,0.25);
  border-radius: 16px;
  padding: 1.25rem;
  width: min(92vw, 380px);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 -4px 32px rgba(0,0,0,0.5);
}

#fb-meta {
  font-size: 0.72rem;
  color: rgba(196,144,64,0.5);
  margin: 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#fb-title {
  font-family: 'Palatino Linotype', Georgia, serif;
  font-size: 1rem;
  color: #f0e4c8;
  margin: 0;
  font-style: italic;
}

#fb-text {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(196,144,64,0.2);
  border-radius: 8px;
  color: #f0e4c8;
  font-size: 0.95rem;
  line-height: 1.6;
  padding: 0.75rem;
  resize: none;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}
#fb-text:focus { border-color: rgba(196,144,64,0.5); }

#fb-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.1rem;
}

#fb-actions button {
  flex: 1;
  padding: 0.65rem 0.5rem;
  border-radius: 8px;
  border: none;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
}
#fb-actions button:active { opacity: 0.75; }

#fb-save {
  background: linear-gradient(135deg, #c49040, #a87830);
  color: #1a1008;
  font-weight: 700;
  letter-spacing: 0.02em;
}
#fb-show {
  background: rgba(196,144,64,0.12);
  color: rgba(196,144,64,0.8);
  border: 1px solid rgba(196,144,64,0.2);
}
#fb-close {
  background: rgba(255,255,255,0.06);
  color: rgba(240,228,200,0.4);
  flex: 0 0 3rem;
  font-size: 1rem;
}