/* Brieftaube - Gestaltung.
 *
 * Die Metapher ist alte Korrespondenz: warmes Papier, braune Tinte statt
 * Schwarz, Siegellack als einziger Akzent. Serife nur dort, wo jemand
 * wirklich einen Text liest - im Brief. Alles Bedienbare bleibt in der
 * System-Grotesk, damit es sich als Bedienelement zu erkennen gibt.
 *
 * Unterhalb dieses Blocks steht kein einziger Farbwert mehr. Wer eine
 * Farbe braucht, nimmt ein Token; wer eine neue braucht, legt sie hier an
 * und traegt sie in beiden Modi nach.
 */

:root {
  /* --- Farben, Tag ------------------------------------------------- */
  --papier: #faf6ee; /* Seitengrund */
  --papier-tief: #f1e9d9; /* Kopfzeile, abgesetzte Flaechen */
  --flaeche: #fffdf8; /* Karten, Eingabefelder */
  --flaeche-leise: #f6f0e4; /* Hover, Skelette */

  --tinte: #2a251f; /* Fliesstext */
  --tinte-blass: #6d6357; /* Sekundaertext */
  --tinte-leise: #948976; /* Zeitstempel, Randnotizen */

  --rand: #ddd2bd;
  --rand-leise: #ece3d3;

  --siegel: #9b2f22; /* Akzent */
  --siegel-hell: #b8483a; /* Hover */
  --siegel-grund: #f7e7e2; /* Akzentflaeche */
  --siegel-schrift: #fffdf8; /* Text auf Siegelgrund */

  --moos: #4d6b2c; /* angekommen, Erfolg */
  --moos-grund: #eef3e4;
  --ocker: #8a6318; /* unterwegs, Warnung */
  --ocker-grund: #f8f0dd;
  --asche: #8b8275; /* verloren */
  --asche-grund: #f0ece4;

  /* --- Abstaende ---------------------------------------------------- */
  --raum-1: 0.25rem;
  --raum-2: 0.5rem;
  --raum-3: 0.75rem;
  --raum-4: 1rem;
  --raum-5: 1.5rem;
  --raum-6: 2rem;
  --raum-7: 3rem;

  /* --- Radien ------------------------------------------------------- */
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;
  --radius-rund: 999px;

  /* --- Schrift ------------------------------------------------------ */
  --schrift-ui:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;
  --schrift-brief: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman",
    serif;
  --schrift-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-s: 0.84rem;
  --text-m: 0.95rem;
  --text-l: 1.1rem;
  --text-xl: 1.45rem;
  --text-xxl: 1.9rem;

  --zeilen-eng: 1.35;
  --zeilen-weit: 1.6;

  /* --- Schatten ----------------------------------------------------- */
  --schatten-1: 0 1px 2px rgba(42, 37, 31, 0.06), 0 1px 3px rgba(42, 37, 31, 0.08);
  --schatten-2: 0 2px 8px rgba(42, 37, 31, 0.1);

  /* --- Sonstiges ---------------------------------------------------- */
  --tippziel: 44px; /* Mindestgroesse fuer alles Antippbare */
  --sicher-oben: env(safe-area-inset-top, 0px);
  --sicher-unten: env(safe-area-inset-bottom, 0px);
  --sicher-links: env(safe-area-inset-left, 0px);
  --sicher-rechts: env(safe-area-inset-right, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #16130f;
    --papier-tief: #100e0b;
    --flaeche: #1e1a15;
    --flaeche-leise: #262119;

    --tinte: #ece3d3;
    --tinte-blass: #a89c88;
    --tinte-leise: #7d7263;

    --rand: #332d24;
    --rand-leise: #262119;

    --siegel: #d9695a;
    --siegel-hell: #e8887a;
    --siegel-grund: #2c1a16;
    --siegel-schrift: #16130f;

    --moos: #93b96b;
    --moos-grund: #1c2416;
    --ocker: #cfa04a;
    --ocker-grund: #262013;
    --asche: #8b8275;
    --asche-grund: #201d18;

    --schatten-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --schatten-2: 0 2px 10px rgba(0, 0, 0, 0.5);
  }
}

* {
  box-sizing: border-box;
}

html {
  background: var(--papier);
}

body {
  margin: 0;
  font-family: var(--schrift-ui);
  font-size: var(--text-m);
  background: var(--papier);
  color: var(--tinte);
  line-height: var(--zeilen-weit);
  -webkit-text-size-adjust: 100%;
  /* Im Standalone-Modus soll das Ueberziehen nicht wie ein Ladefehler
     aussehen; der Seitengrund traegt bis in die Notch-Zone. */
  overscroll-behavior-y: none;
}

a {
  color: var(--siegel);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--siegel-hell);
}

::selection {
  background: var(--siegel-grund);
  color: var(--tinte);
}

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

.kopf {
  display: flex;
  align-items: center;
  gap: var(--raum-4);
  padding: var(--raum-2) calc(var(--raum-5) + var(--sicher-rechts)) var(--raum-2)
    calc(var(--raum-5) + var(--sicher-links));
  padding-top: calc(var(--raum-2) + var(--sicher-oben));
  background: var(--papier-tief);
  border-bottom: 1px solid var(--rand);
  position: sticky;
  top: 0;
  z-index: 500;
}

.kopf .marke {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  font-weight: 600;
  font-size: var(--text-l);
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--tinte);
  white-space: nowrap;
  min-height: var(--tippziel);
}

.kopf .marke svg {
  width: 1.35em;
  height: 1.35em;
  color: var(--siegel);
  flex: none;
}

.kopf nav {
  display: flex;
  gap: var(--raum-1);
  flex-wrap: wrap;
}

.kopf nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  min-height: var(--tippziel);
  padding: 0 var(--raum-3);
  border-radius: var(--radius-s);
  text-decoration: none;
  color: var(--tinte-blass);
  border-bottom: 2px solid transparent;
}

.kopf nav a:hover {
  color: var(--tinte);
  background: var(--flaeche-leise);
}

.kopf nav a.aktiv {
  color: var(--tinte);
  border-bottom-color: var(--siegel);
}

.kopf .rechts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  font-size: var(--text-s);
  color: var(--tinte-blass);
}

/* Zaehler in der Navigation. Verschwindet bei 0 ueber das hidden-Attribut. */
.zaehler {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  height: 1.4em;
  padding: 0 0.4em;
  border-radius: var(--radius-rund);
  background: var(--siegel);
  color: var(--siegel-schrift);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.zaehler[hidden] {
  display: none;
}

/* --- Grundgeruest ------------------------------------------------------- */

main {
  max-width: 62rem;
  margin: 0 auto;
  padding: var(--raum-5) calc(var(--raum-5) + var(--sicher-rechts))
    calc(var(--raum-7) + var(--sicher-unten)) calc(var(--raum-5) + var(--sicher-links));
}

main.schmal {
  max-width: 30rem;
}

h1 {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--zeilen-eng);
  margin: 0 0 var(--raum-1);
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--text-l);
  font-weight: 600;
  margin: var(--raum-6) 0 var(--raum-3);
}

.hinweis {
  color: var(--tinte-blass);
  font-size: var(--text-s);
  margin: 0 0 var(--raum-5);
  max-width: 46rem;
}

.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-m);
  padding: var(--raum-4);
  box-shadow: var(--schatten-1);
  margin-bottom: var(--raum-4);
}

/* --- Formulare ---------------------------------------------------------- */

label {
  display: block;
  font-size: var(--text-s);
  font-weight: 500;
  color: var(--tinte-blass);
  margin-bottom: var(--raum-1);
}

input[type="text"],
input[type="password"],
input[type="number"],
textarea,
select {
  width: 100%;
  min-height: var(--tippziel);
  padding: var(--raum-2) var(--raum-3);
  font: inherit;
  /* 16px verhindert, dass iOS beim Fokus in das Feld hineinzoomt. */
  font-size: 16px;
  color: var(--tinte);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-s);
}

textarea {
  font-family: var(--schrift-brief);
  line-height: var(--zeilen-weit);
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--tinte-leise);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--siegel);
  outline-offset: 2px;
}

input:disabled,
textarea:disabled {
  background: var(--flaeche-leise);
  color: var(--tinte-blass);
}

.feld {
  margin-bottom: var(--raum-4);
}

button {
  font-family: var(--schrift-ui);
  font-size: var(--text-m);
  font-weight: 500;
  min-height: var(--tippziel);
  padding: var(--raum-2) var(--raum-5);
  border-radius: var(--radius-s);
  border: 1px solid var(--siegel);
  background: var(--siegel);
  color: var(--siegel-schrift);
  cursor: pointer;
  /* Kein Aufblitzen beim Antippen auf iOS. */
  -webkit-tap-highlight-color: transparent;
}

button:hover:not(:disabled) {
  background: var(--siegel-hell);
  border-color: var(--siegel-hell);
}

button:active:not(:disabled) {
  transform: translateY(1px);
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}

button.leise {
  background: transparent;
  color: var(--siegel);
  border-color: var(--rand);
}

button.leise:hover:not(:disabled) {
  background: var(--siegel-grund);
  border-color: var(--siegel);
  color: var(--siegel);
}

button.klein {
  /* Optisch kleiner, aber die Trefferflaeche bleibt antippbar. */
  padding: var(--raum-1) var(--raum-3);
  font-size: var(--text-s);
  min-height: var(--tippziel);
}

.knopfreihe {
  display: flex;
  gap: var(--raum-2);
  flex-wrap: wrap;
  align-items: center;
}

/* --- Hilfsklassen ------------------------------------------------------- */
/* Ersatz fuer die frueheren style="..."-Attribute in den Templates. Die
   CSP erlaubt kein Inline-CSS mehr (style-src 'self' ohne unsafe-inline),
   und Gestaltung gehoert ohnehin hierher, wo die Tokens liegen. */

/* Feld, das die Restbreite einer knopfreihe fuellt. */
.dehnt {
  flex: 1;
  min-width: 0;
}

/* Knopf neben einem Eingabefeld: auf dessen Grundlinie statt mittig. */
.unten-buendig {
  align-self: flex-end;
}

.ohne-abstand-oben {
  margin-top: 0;
}

.abstand-oben {
  margin-top: var(--raum-4);
}

/* --- Meldungen ---------------------------------------------------------- */

.meldung {
  padding: var(--raum-3);
  border-radius: var(--radius-s);
  border: 1px solid transparent;
  font-size: var(--text-s);
  margin-bottom: var(--raum-4);
}

.meldung:empty {
  display: none;
}

.meldung.fehler {
  background: var(--siegel-grund);
  border-color: var(--siegel);
  color: var(--siegel);
}

.meldung.erfolg {
  background: var(--moos-grund);
  border-color: var(--moos);
  color: var(--moos);
}

.meldung.warnung {
  background: var(--ocker-grund);
  border-color: var(--ocker);
  color: var(--ocker);
}

/* --- Listen ------------------------------------------------------------- */

.liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.liste li {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  min-height: var(--tippziel);
  padding: var(--raum-3) 0;
  border-bottom: 1px solid var(--rand-leise);
}

.liste li:last-child {
  border-bottom: none;
}

.liste .haupt {
  flex: 1;
  min-width: 0;
}

.liste .name {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  font-weight: 600;
  color: var(--tinte);
}

a.name {
  text-decoration: none;
}

a.name:hover {
  color: var(--siegel);
}

.liste .neben {
  font-size: var(--text-s);
  color: var(--tinte-blass);
}

/* --- Leere und ladende Zustaende ---------------------------------------- */

.leer {
  color: var(--tinte-blass);
  padding: var(--raum-6) var(--raum-4);
  text-align: center;
  font-size: var(--text-s);
}

.leer .leer-titel {
  display: block;
  font-family: var(--schrift-brief);
  font-size: var(--text-l);
  color: var(--tinte);
  margin-bottom: var(--raum-1);
}

.leer[hidden],
.laden[hidden] {
  display: none;
}

.laden {
  padding: var(--raum-2) 0;
}

/* Platzhalterbalken statt Spinner: die Liste springt beim Eintreffen der
   Daten nicht, weil die Hoehe schon stimmt. */
.skelett {
  height: 1em;
  margin: var(--raum-3) 0;
  border-radius: var(--radius-s);
  background: linear-gradient(
    90deg,
    var(--flaeche-leise) 25%,
    var(--rand-leise) 37%,
    var(--flaeche-leise) 63%
  );
  background-size: 400% 100%;
  animation: schimmern 1.4s ease infinite;
}

.skelett.kurz {
  width: 40%;
}

.skelett.mittel {
  width: 65%;
}

@keyframes schimmern {
  from {
    background-position: 100% 50%;
  }
  to {
    background-position: 0 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skelett {
    animation: none;
  }
  button:active:not(:disabled) {
    transform: none;
  }
}

/* --- Abzeichen ---------------------------------------------------------- */

.abzeichen {
  display: inline-block;
  font-size: var(--text-xs);
  padding: 0.1rem var(--raum-2);
  border-radius: var(--radius-rund);
  border: 1px solid var(--rand);
  color: var(--tinte-blass);
  white-space: nowrap;
}

.abzeichen.unterwegs {
  background: var(--ocker-grund);
  border-color: var(--ocker);
  color: var(--ocker);
}

.abzeichen.angekommen {
  background: var(--moos-grund);
  border-color: var(--moos);
  color: var(--moos);
}

.abzeichen.verloren {
  background: var(--asche-grund);
  border-color: var(--asche);
  color: var(--asche);
}

/* --- Konversation ------------------------------------------------------- */

.verlauf {
  display: flex;
  flex-direction: column;
  gap: var(--raum-3);
  margin-bottom: var(--raum-5);
}

.brief {
  max-width: 82%;
  padding: var(--raum-3) var(--raum-4);
  border-radius: var(--radius-m);
  border: 1px solid var(--rand);
  background: var(--flaeche);
  box-shadow: var(--schatten-1);
}

.brief.eigen {
  align-self: flex-end;
  background: var(--papier-tief);
}

.brief.fremd {
  align-self: flex-start;
}

/* Der einzige Ort, an dem wirklich gelesen wird - hier die Serife. */
.brief .text {
  font-family: var(--schrift-brief);
  font-size: var(--text-l);
  line-height: var(--zeilen-weit);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.brief .fuss {
  margin-top: var(--raum-2);
  font-size: var(--text-xs);
  color: var(--tinte-leise);
  display: flex;
  gap: var(--raum-2);
  align-items: center;
  flex-wrap: wrap;
}

.brief.wartend .text,
.brief.verloren .text {
  font-style: italic;
  font-size: var(--text-m);
  color: var(--tinte-blass);
}

/* --- Karte -------------------------------------------------------------- */

/* Die Restzeit ist die eigentliche Information der Seite - sie steht
   ueber der Karte, nicht darunter als Beiwerk. */
.restzeit {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--raum-2) var(--raum-4);
  padding: var(--raum-4);
  margin-bottom: var(--raum-3);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-left: 3px solid var(--siegel);
  border-radius: var(--radius-l);
  box-shadow: var(--schatten-2);
}

.restzeit .wert {
  font-family: var(--schrift-brief);
  font-size: var(--text-xxl);
  font-weight: 600;
  line-height: 1.1;
  color: var(--tinte);
  font-variant-numeric: tabular-nums;
}

.restzeit .marke {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tinte-leise);
  width: 100%;
}

.restzeit .dazu {
  font-size: var(--text-s);
  color: var(--tinte-blass);
}

#karte,
.kartenflaeche {
  height: 26rem;
  border-radius: var(--radius-m);
  border: 1px solid var(--rand);
  background: var(--flaeche-leise);
  z-index: 1;
}

.pigeon-marker {
  color: var(--siegel);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

.pigeon-marker svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* Leaflet bringt eigene Farben mit - die wenigen sichtbaren Flaechen an
   die Palette angleichen. */
.leaflet-container {
  font-family: var(--schrift-ui);
  background: var(--flaeche-leise);
}

.leaflet-tooltip {
  background: var(--flaeche);
  color: var(--tinte);
  border: 1px solid var(--rand);
  border-radius: var(--radius-s);
  box-shadow: var(--schatten-1);
  font-size: var(--text-xs);
}

.leaflet-tooltip-left::before {
  border-left-color: var(--rand);
}

.leaflet-tooltip-right::before {
  border-right-color: var(--rand);
}

.leaflet-bar a,
.leaflet-control-attribution {
  background: var(--flaeche);
  color: var(--tinte);
}

.leaflet-bar a {
  border-bottom-color: var(--rand);
}

.leaflet-control-attribution a {
  color: var(--siegel);
}

/* --- Recovery-Code ------------------------------------------------------ */

.code-anzeige {
  font-family: var(--schrift-mono);
  font-size: var(--text-l);
  letter-spacing: 0.06em;
  word-spacing: 0.2em;
  background: var(--flaeche);
  border: 1px dashed var(--siegel);
  border-radius: var(--radius-s);
  padding: var(--raum-3);
  overflow-wrap: anywhere;
  margin: var(--raum-3) 0;
}

.fortschritt {
  height: 4px;
  background: var(--rand-leise);
  border-radius: var(--radius-rund);
  overflow: hidden;
  margin-top: var(--raum-2);
}

.fortschritt > div {
  height: 100%;
  background: var(--siegel);
  transition: width 0.6s linear;
}

@media (prefers-reduced-motion: reduce) {
  .fortschritt > div {
    transition: none;
  }
}

/* --- Schmale Geraete ---------------------------------------------------- */

@media (max-width: 640px) {
  .kopf {
    flex-wrap: wrap;
    gap: var(--raum-1) var(--raum-3);
    padding-left: calc(var(--raum-4) + var(--sicher-links));
    padding-right: calc(var(--raum-4) + var(--sicher-rechts));
  }

  .kopf nav {
    order: 3;
    width: 100%;
    /* Vier Punkte muessen nebeneinander passen, ohne dass die
       Trefferflaeche unter 44px faellt. */
    justify-content: space-between;
    gap: 0;
  }

  .kopf nav a {
    padding: 0 var(--raum-2);
    font-size: var(--text-s);
  }

  .kopf .rechts {
    margin-left: auto;
  }

  main {
    padding-left: calc(var(--raum-4) + var(--sicher-links));
    padding-right: calc(var(--raum-4) + var(--sicher-rechts));
  }

  .brief {
    max-width: 92%;
  }

  #karte,
  .kartenflaeche {
    height: 20rem;
  }

  .restzeit .wert {
    font-size: var(--text-xl);
  }
}