@import url("/fonts/fonts.css");

/* ============================================================
   IL PASSAPORTO — Designsystem der Seminarfahrt Gardasee 2026

   Die eine Idee, aus der alles folgt:

     Jeder Ort am Gardasee ist eine Briefmarke, die man sammelt.
     Ein Besuch ist der Stempel, der draufkommt.
     XP sind der Frankaturwert der Marke: Pflicht 10, Neben 25.

   Deshalb gibt es genau eine Kernkomponente - .marke - und fast
   alles andere ist eine Anordnung davon: der Bogen, der
   Streifen, die Fotos in der Galerie, die Nadeln auf der Karte,
   die beiden Sondermarken der Rangliste.

   Die zweite Idee ist die Farbe. Die Seite laeuft nicht auf
   einem Grund durch, sondern wandert durch Farbraeume: Papier,
   Seetiefe, Zitrone, Tinte, Korall. Jeder Abschnitt hat seinen
   eigenen Grund, und der Wechsel ist der Rhythmus der Seite.
   ============================================================ */

:root {
  /* ---------------------------------------------- Grundfarben */
  --papier:      #FBF7ED;
  --papier-tief: #F3ECDA;
  --tinte:       #14140F;
  --tinte-weich: #5C5A4E;
  --stein:       #E2DAC6;

  /* ---------------------------------------------- Die Farben des Sees
     Jede hat eine Aufgabe, keine ist Dekoration:

     zitrone   ERSPIELTES. Wertaufdruck, XP, Fortschritt, Siegel.
               Nie eine Flaeche, auf die man drueckt.
               Auf Papier 1,4:1 - reine Flaeche, nie Schrift.
               Auf Tinte 15:1, auf Lago 6,4:1 - dort Schrift.
     korall    Der Poststempel und der eine laute Moment.
               3,6:1 auf Papier - erst ab 24px, nie Fliesstext.
     lago      Tiefes Seewasser. Vollflaechiger Grund ganzer
               Abschnitte, und Schriftfarbe auf Papier (8,6:1).
     lagune    Helles Wasser. Nur Flaeche und Grafik (2,3:1).
     blatt     Zitronenblatt. Erledigt, bestaetigt (5,1:1).
     flieder   Der Ausreisser. Nur Flaeche, sehr sparsam. */
  --zitrone:      #FFD23F;
  --zitrone-tief: #E8A800;
  --korall:       #EF4A26;
  /* Dieselbe Farbe, dunkel genug fuer kleine Schrift: Korall
     schafft auf Papier nur 3,5:1 und darf deshalb erst ab 24px
     stehen. Wo ein Kleinbuchstabe korall sein soll, steht dieser
     Ton - 5,2:1. */
  --korall-tief:  #C6300F;
  --lago:         #0C4F5C;
  --lagune:       #17B8CE;
  --blatt:        #147A3C;
  --blatt-hell:   #3FBF63;
  /* Oleander. Die eine Farbe, die auf der Seite sonst nirgends
     vorkommt - sie gehoert dem Tagesplan und sonst niemandem. */
  --oleander:      #F2799F;
  --oleander-blass: #B4708A;
  --flieder:      #B9A0FF;

  /* Rollen. Ein Abschnitt setzt sie um, alles darin folgt.
     Deshalb muss keine Komponente wissen, auf welchem Grund sie
     gerade liegt. */
  --grund:   var(--papier);
  --schrift: var(--tinte);
  --leise:   var(--tinte-weich);
  --linie:   var(--tinte);
  --akzent:  var(--korall);

  /* ---------------------------------------------- Schrift

     Genau zwei Familien auf der ganzen Seite. Alle vier Rollen
     kommen daraus - die Grotesk stellt drei davon ueber ihre
     Achsen, die Antiqua die vierte.

     Was frueher eine eigene Monospace war, ist jetzt dieselbe
     Grotesk in halbfett, weit, versal, mit Tabellenziffern. Sie
     liest sich technisch, ohne eine dritte Schrift zu sein. */
  --titel:   "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --leise-f: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --laut:    "Familjen Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ui:      "Familjen Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:    "Familjen Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Die Laufweite ist bewusst offener als im ersten Wurf: eng
     gesetzte Grotesk in Riesengraden liest sich am Handy
     schlecht, und genau das war die Ruege. */
  /* Der Riese ist gedeckelt, damit Titel, Lauftext und Knoepfe am
     Schreibtisch zusammen ins erste Bild passen. Groesser war
     eindrucksvoll und hat die Handlung unter die Kante geschoben. */
  /* Der Riese ist gedeckelt. Seit der Held zwei Spalten hat, steht
     die Zeile nicht mehr ueber die ganze Breite, sondern in einer
     Spalte von rund 550 Pixeln - 136px waren dort drei Zeilen, von
     denen jede an den Rand stiess. */
  --f-riese:  clamp(2.5rem, 11.5vw, 5rem);
  --f-gross:  clamp(2.1rem, 6.4vw, 4.4rem);
  --f-mittel: clamp(1.45rem, 3.4vw, 2.3rem);
  --f-lead:   clamp(1.06rem, 1.8vw, 1.32rem);
  --f-text:   1.0625rem;
  --f-klein:  .8125rem;
  --f-winzig: .6875rem;

  /* ---------------------------------------------- Raum */
  --s1: .5rem;  --s2: .75rem; --s3: 1rem;    --s4: 1.5rem;
  --s5: 2.5rem; --s6: 4rem;   --s7: 6.5rem;  --s8: 10rem;

  --rand: 1.25rem;
  --bahn-breit: 1320px;
  --bahn-eng: 720px;
  --kopf-hoehe: 62px;
  --leiste-hoehe: 62px;

  /* ---------------------------------------------- Bewegung */
  --e-haupt:   cubic-bezier(.22, 1, .36, 1);
  --e-stempel: cubic-bezier(.34, 1.56, .64, 1);
  --e-weich:   cubic-bezier(.65, 0, .35, 1);
  --t-mikro:  .15s;
  --t-normal: .42s;
  --t-lang:   .9s;

  /* ---------------------------------------------- Kante und Wurf

     Die Staerke der Konturen und die Tiefe der versetzten Schatten
     stehen an einer Stelle. Sie waren zu kraeftig: drei Pixel Kontur
     und zwoelf Pixel Schatten sind auf einem Plakat richtig, auf
     einem 375er Schirm sieht dasselbe nach Spielzeug aus.

     Am Handy gehen beide noch eine Stufe herunter - dort ist jede
     Kontur im Verhaeltnis zur Flaeche ohnehin schon breiter. */
  --kante-stark: 1.5px;
  --kante: 1.25px;
  --kante-fein: 1px;

  /* Der versetzte Vollton-Schatten ist weg. Er war das zweite
     Kennzeichen des Plakat-Entwurfs und hat jeden Kasten wie einen
     Aufkleber wirken lassen. An seiner Stelle stehen drei weiche
     Stufen - eine Karte liegt auf dem Papier, sie klebt nicht
     darauf. */
  --schatten-1: 0 1px 2px rgb(20 20 15 / .05), 0 8px 16px -12px rgb(20 20 15 / .3);
  --schatten-2: 0 1px 3px rgb(20 20 15 / .06), 0 18px 34px -24px rgb(20 20 15 / .42);
  --schatten-3: 0 2px 6px rgb(20 20 15 / .07), 0 34px 62px -36px rgb(20 20 15 / .5);
  --wurf: 6px;
  --wurf-klein: 4px;

  /* ---------------------------------------------- Marke
     Weiche Ecken statt Zaehnung. Die gestanzte Kante war das
     Kennzeichen des Briefmarken-Entwurfs und zugleich der Grund,
     warum jede Kachel wie ein Aufkleber aussah. */
  --marke-radius: 14px;

  color-scheme: light;
}

/* Am Handy eine Stufe leiser. Eine Zweipixelkontur um eine Karte von
   335 Pixeln ist verhaeltnismaessig doppelt so praesent wie dieselbe
   Kontur um eine Karte von 700 - deshalb wirkt am Schreibtisch
   bestimmt, was am Handy nach Spielzeug aussieht. */
@media (max-width: 640px) {
  :root {
    --kante-stark: 1.25px;
    --kante: 1px;
    --kante-fein: 1px;
    --wurf: 4px;
    --wurf-klein: 3px;
  }
}

/* ============================================================
   Grundlage
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* Kein Schieben nach links und rechts. "clip" statt "hidden": clip
     schneidet wirklich ab, hidden haette nur die Bildlaufleiste
     versteckt und laesst die Seite trotzdem schiebbar - genau das war
     die Meldung aus der Gruppe. clip erzeugt auch keinen Scroll-
     behaelter, die gepinnte Kopfzeile bleibt also gepinnt. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--ui);
  font-size: var(--f-text);
  font-weight: 400;

  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  /* Dasselbe wie oben, eine Ebene tiefer: sonst laesst ein aelteres
     Safari, das "clip" nicht kennt, die Seite doch noch wandern. */
  overflow-x: clip;
  /* Ziffern gleicher Breite auf der ganzen Seite. Ohne eine eigene
     Monospace ist das der Grund, warum Zaehler und Werte beim
     Hochzaehlen nicht mehr springen. */
  font-variant-numeric: tabular-nums;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--lago); text-underline-offset: .18em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--korall); }

:focus-visible { outline: 3px solid var(--korall); outline-offset: 3px; border-radius: 2px; }

/* ---------------------------------------------- Schriftbild
   Die laute und die leise Stimme. Der Bruch zwischen einer sehr
   fetten Grotesk und einer kursiven Antiqua ist der Ton dieser
   Seite: eine Ansage, und daneben etwas Handgeschriebenes. */

h1, h2, h3, h4 {
  font-family: var(--titel);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.012em;
  margin: 0;
  text-wrap: balance;
  color: var(--schrift);
}
h1 { font-size: var(--f-gross); }
h2 { font-size: var(--f-mittel); }
h3 { font-size: 1.25rem; line-height: 1.08; }

/* Die leise Stimme steht in einer Ueberschrift fuer genau ein
   Wort - nie fuer zwei, sonst ist es kein Bruch mehr, sondern
   eine zweite Ueberschrift. */
.leise {
  font-family: var(--leise-f);
  font-style: italic;
  font-weight: 400;

  letter-spacing: 0;
  text-transform: none;
  color: var(--akzent);
  /* Seit die Ueberschrift selbst eine Antiqua ist, ist der Bruch
     die KURSIVE und nicht mehr der Schriftwechsel. Ein Hauch
     groesser laesst sie trotzdem heraustreten. */
  font-size: 1.04em;
  padding-right: .06em;
}

p  { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

.lead { font-size: var(--f-lead); line-height: 1.52; max-width: 46ch; }

/* Alles Gemessene. Dieselbe Grotesk, aber weit gestellt, versal und
   halbfett - dadurch liest es sich als Aufdruck und nicht als Text,
   ohne dass es eine eigene Schrift braucht. */
.daten {
  font-family: var(--mono);
  font-size: var(--f-winzig);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;

  font-variant-numeric: tabular-nums;
}

/* Ein Schild ist ein Datum mit Rahmen - Kategorie, Art, Zustand.
   Es traegt Information, sonst stuende es nicht da. */
.schild {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-family: var(--mono);
  font-size: var(--f-winzig);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .38em .68em .34em;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
}
.schild-voll { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.schild-zitrone { background: var(--zitrone); color: var(--tinte); border-color: var(--tinte); }
.schild-korall { background: var(--korall); color: var(--papier); border-color: var(--tinte); }

.nur-vorleser {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.springen {
  position: absolute; left: var(--s3); top: -100px; z-index: 400;
  background: var(--tinte); color: var(--papier);
  padding: .7rem 1rem; border-radius: 8px; font-weight: 700; text-decoration: none;
}
.springen:focus { top: var(--s3); }

/* ============================================================
   Bahn, Abschnitt und die Farbbaender

   Ein Band setzt die Rollenfarben um. Alles darin - Schrift,
   Linien, Verweise - folgt automatisch, weil nichts eine feste
   Farbe nennt, sondern nur ihre Rolle.
   ============================================================ */

.bahn { width: min(var(--bahn-breit), 100% - 2 * var(--rand)); margin-inline: auto; }
.eng  { width: min(var(--bahn-eng), 100% - 2 * var(--rand)); margin-inline: auto; }
.abschnitt     { padding-block: var(--s7); }
.abschnitt-eng { padding-block: var(--s6); }
.mitte { text-align: center; padding-block: var(--s7); display: grid; justify-items: center; gap: var(--s3); }

.band { background: var(--grund); color: var(--schrift); position: relative; }
.band-lago {
  --grund: var(--lago); --schrift: var(--papier);
  --leise: rgb(251 247 237 / .74); --linie: rgb(251 247 237 / .3);
  --akzent: var(--zitrone);
}
.band-zitrone {
  --grund: var(--zitrone); --schrift: var(--tinte);
  --leise: rgb(20 20 15 / .7); --linie: var(--tinte);
  --akzent: var(--korall);
}
/* Auf Korall steht die Schrift in Tinte, nicht in Papier: dunkel auf
   Korall sind 4,9:1, hell nur 3,6:1 - und Fliesstext braucht 4,5. */
.band-korall {
  --grund: var(--korall); --schrift: var(--tinte);
  --leise: rgb(20 20 15 / .74); --linie: rgb(20 20 15 / .32);
  --akzent: var(--tinte);
}
.band-papier { --grund: var(--papier-tief); }
/* Beige. Das Album stand auf Zitrone und damit auf der grellsten
   Flaeche der Seite - ein ganzes Kapitel Gelb, das nur als Hintergrund
   diente. Beige ist derselbe warme Ton eine Stufe zurueck: der
   Abschnitt traegt sich noch, ohne die Aufmerksamkeit zu binden. */
.band-beige {
  --grund: var(--papier-tief); --schrift: var(--tinte);
  --leise: rgb(20 20 15 / .7); --linie: var(--tinte);
  --akzent: var(--korall);
}

.band a:not(.knopf):not(.chip):not(.marke) { color: var(--akzent); }
.band .daten { color: var(--leise); }

.falz { border: 0; height: 0; border-top: var(--kante-fein) dashed var(--stein); margin-block: var(--s5); }

/* ============================================================
   DIE MARKE — die Kernkomponente

   Der Zackenrand darf NICHT als Maske auf dem ganzen Blatt
   liegen: eine mask ueber einem <img> wird nicht in jeder
   Rendering-Kette gezeichnet, und dann fehlt genau das Motiv.
   Das ist im ersten Wurf passiert - alle gestempelten Marken
   standen leer da.

   Deshalb liegt die Maske jetzt nur auf dem Papier selbst, das
   als eigene Ebene hinter dem Inhalt sitzt und keine Kinder
   hat. Das Motiv liegt darauf, mit Rand - wie auf einer echten
   Marke, wo das Bild die Zaehnung ohnehin nie beruehrt.
   ============================================================ */

.marke {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--tinte);
  --marke-ton: var(--lago);
  --marke-papier: var(--papier);
  transition: transform var(--t-normal) var(--e-haupt), box-shadow var(--t-normal) var(--e-haupt);
  border-radius: var(--marke-radius);
}

a.marke:hover, button.marke:hover { transform: translateY(-4px); }
a.marke:active, button.marke:active { transform: none; transition-duration: var(--t-mikro); }

/* Das Blatt. Frueher lag hier eine Zaehnung als Maske und ein
   weisser Rand um das Motiv - zusammen sah jede Kachel aus wie ein
   Aufkleber. Jetzt ist es das, was es inhaltlich ist: ein Foto vom
   Ort, weich gerundet, mit der Beschriftung darauf. */
.marke-blatt {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  aspect-ratio: 3 / 4;
  border-radius: var(--marke-radius);
  overflow: hidden;
  background: var(--papier-tief);
  box-shadow: 0 1px 2px rgb(20 20 15 / .08), 0 14px 28px -18px rgb(20 20 15 / .45);
}

.marke-motiv {
  grid-row: 1 / -1;
  grid-column: 1;
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: var(--papier-tief);
}
.marke-motiv > img,
.marke-motiv > svg { width: 100%; height: 100%; object-fit: cover; }

/* Der Verlauf, auf dem die Fussschrift steht. Ohne ihn braeuchte
   der Name wieder einen Kasten - und genau der sollte weg. */
.marke-blatt::after {
  content: "";
  grid-row: 1 / -1;
  grid-column: 1;
  z-index: 1;
  background:
    linear-gradient(to top, rgb(14 20 22 / .74) 0%, rgb(14 20 22 / .34) 20%, rgb(14 20 22 / 0) 46%),
    linear-gradient(to bottom, rgb(14 20 22 / .3) 0%, rgb(14 20 22 / 0) 22%);
  pointer-events: none;
}

.marke-kopf,
.marke-fuss {
  grid-column: 1;
  position: relative;
  z-index: 2;
  padding: 10px 11px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s2);
  pointer-events: none;
}
.marke-kopf { grid-row: 1; align-items: center; }
.marke-fuss { grid-row: 3; align-items: flex-end; }

/* Oben stehen die beiden Angaben, die eine Entscheidung tragen:
   was fuer ein Ziel das ist, und was es bringt. Beide in derselben
   Zeile, beide klein - vorher war der Wert ein eigener Kasten in
   der Ecke und hat mit der Beschriftung um Aufmerksamkeit
   gestritten. */
.marke-wert {
  order: 2;
  font-family: var(--mono);
  font-weight: 700;
  font-size: var(--f-winzig);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--tinte);
  background: var(--zitrone);
  border-radius: 999px;
  padding: .42em .62em .38em;
  white-space: nowrap;
}
.marke-wert::after { content: " P"; letter-spacing: .06em; }

.marke-land {
  order: 1;
  font-family: var(--mono);
  font-size: var(--f-winzig);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--papier);
  background: rgb(14 20 22 / .55);
  backdrop-filter: blur(6px);
  padding: .42em .62em .38em;
  border-radius: 999px;
  text-align: left;
}

.marke-schrift {
  max-width: 100%;
  text-shadow: 0 1px 2px rgb(14 20 22 / .6), 0 6px 20px rgb(14 20 22 / .5);
}
.marke-name {
  display: block;
  font-family: var(--laut);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.08;
  letter-spacing: -.008em;
  color: var(--papier);
  overflow-wrap: anywhere;
}
.marke-ort {
  display: block;
  font-family: var(--mono);
  font-size: var(--f-winzig);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgb(251 247 237 / .78);
  margin-top: .3em;
}

/* Noch nicht gestempelt: das Motiv liegt flach, der Wert ist
   blass. Sie sieht aus wie ein leeres Feld im Album, weil sie
   genau das ist - und faerbt sich beim Zeigen. */
/* Grauwert statt Aufhellen: aufgehellt verschwand ein Himmelfoto
   fast vollstaendig im Papier, und dann sah ein offenes Fach nicht
   nach "noch nicht gesammelt" aus, sondern nach kaputtem Bild. */
.marke-leer .marke-motiv { filter: grayscale(.8) brightness(1.06) contrast(.98); transition: filter var(--t-normal) var(--e-haupt); }
.marke-leer .marke-wert { background: rgb(251 247 237 / .82); color: var(--tinte); }
a.marke-leer:hover .marke-motiv { filter: none; }

/* Verschlossen (LVL-Modus "Der Reihe nach"). */
.marke-zu .marke-motiv {
  background: repeating-linear-gradient(-45deg, var(--stein) 0 8px, var(--papier-tief) 8px 16px);
  display: grid;
  place-items: center;
}
.marke-zu .marke-stufe {
  font-family: var(--titel);
  font-weight: 400;
  font-size: clamp(1.6rem, 8vw, 3rem);
  color: var(--tinte-weich);
  background: var(--papier);
  border-radius: 4px;
  padding: 0 .2em;
  line-height: 1.15;
}

/* Gestempelt. Der Winkel steht als --dreh auf dem SVG selbst,
   weil ihn das Partial aus der Orts-ID wuerfelt. */
.marke-stempel {
  position: absolute;
  z-index: 4;
  right: 5%;
  top: 16%;
  width: 52%;
  max-width: 132px;
  color: var(--korall);
  opacity: .92;
  pointer-events: none;
}
.marke-stempel svg { width: 100%; height: auto; transform: rotate(var(--dreh, -12deg)); }

.marke-gross .marke-name { font-size: clamp(1.05rem, 3.2vw, 1.5rem); }
.marke-gross .marke-blatt { aspect-ratio: 4 / 5; }
.marke-gross .marke-kopf, .marke-gross .marke-fuss { padding: 13px 14px; }

/* ============================================================
   DER BOGEN
   ============================================================ */

/* ---------------------------------------------- Das Album

   Kein Raster auf einem Blatt, sondern ein gebundenes
   Briefmarkenalbum: links der Ruecken mit den gestanzten Ringen,
   rechts die Seiten. Jede Seite ist eine Kategorie, hat ihre
   eigene Ueberschrift und ihren eigenen Stand. Jede Marke steckt
   in einem Fach mit vier Ecken - so, wie man sie einklebt, ohne
   sie zu beschaedigen.

   Ein leeres Fach bleibt sichtbar. Das ist der Punkt eines
   Albums: die Luecke sagt genauso viel wie das Stueck. */

/* Kein schwarzer Balken mehr als Ruecken - der lag wie ein Riegel
   neben der Seite und hat das ganze Buch schwer gemacht. Jetzt ist
   es eine geloechterte Albumseite im Ringbuch: die Loecher sitzen
   im Papier selbst, daneben die Bindungslinie. Hell, leicht, und
   naeher an dem, was ein Album wirklich ist. */

/* Weder schwarzer Rahmen noch harter Schlagschatten. Beides
   zusammen hat aus einer Albumseite ein Plakat gemacht - und das
   war der Grund, warum das Buch "zu bold" gewirkt hat. Jetzt ist
   es Papier: helle Kante, weicher Schatten. */
.album {
  position: relative;
  border: var(--kante-fein) solid var(--stein);
  border-radius: 16px;
  background: var(--papier);
  box-shadow: 0 1px 2px rgb(20 20 15 / .05), 0 20px 44px -30px rgb(20 20 15 / .4);
  overflow: hidden;
}

.album-ruecken {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 34px;
  z-index: 2;
  background: var(--papier-tief);
  border-right: var(--kante-fein) dashed var(--stein);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 22px;
  pointer-events: none;
}
.album-ruecken span {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--papier);
  box-shadow: inset 0 0 0 1.5px var(--stein), inset 0 2px 0 rgb(20 20 15 / .1);
}
@media (min-width: 700px) {
  .album-ruecken { width: 46px; gap: 30px; }
  .album-ruecken span { width: 16px; height: 16px; }
}

.album-seiten { min-width: 0; padding-left: 34px; }
@media (min-width: 700px) { .album-seiten { padding-left: 46px; } }

/* Die Doppelseite auf der Startseite: zwei Kapitel nebeneinander mit
   Falz in der Mitte. Eine einzelne Kategorie war dort am Schreibtisch
   ein flacher Streifen - breit und zwei Zentimeter hoch.

   Am Handy dagegen genau eine Kategorie. Zwei untereinander sind
   keine Doppelseite, sondern doppelt so viel Scrollen fuer eine
   Vorschau - und eine Vorschau soll neugierig machen, nicht
   erschoepfen. */
.album-doppel > .album-seite:nth-of-type(2) { display: none; }
@media (min-width: 900px) {
  .album-doppel { display: grid; grid-template-columns: 1fr 1fr; }
  .album-doppel > .album-seite { border-top: 0; }
  .album-doppel > .album-seite:nth-of-type(2) { display: block; border-left: var(--kante-fein) dashed var(--stein); }
  .album-doppel > .album-fuss { grid-column: 1 / -1; }
}

.album-seite { padding: var(--s4) var(--s3); border-top: var(--kante-fein) dashed var(--stein); }
.album-seite:first-child { border-top: 0; }
@media (min-width: 700px) { .album-seite { padding: var(--s5) var(--s4); } }

.album-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); margin-bottom: var(--s3);
  border-bottom: var(--kante-fein) solid var(--stein); padding-bottom: var(--s2);
}
/* Die Kapitelueberschrift steht in der leisen Stimme - im Album
   ist sie handschriftlich, hier kursiv gesetzt. */
.album-kapitel {
  font-family: var(--leise-f); font-style: italic; font-size: clamp(1.3rem, 4vw, 1.9rem);
  line-height: 1; color: var(--tinte);
}
.album-stand {
  font-family: var(--mono); font-size: var(--f-winzig); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-weich);
  white-space: nowrap;
}
.album-stand b { color: var(--tinte); }

/* Zwei Spalten am Handy, nicht drei. Seit jede Kategorie ihre eigene
   Seite hat, muessen nicht mehr 23 Marken auf einen Schirm - also
   duerfen sie groesser sein, und der Ortsname ist lesbar statt
   abgeschnitten. */
.album-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
@media (min-width: 560px) { .album-raster { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s3); } }

/* Das Steckfach. Die vier Ecken liegen als eigene Ebene ueber der
   Marke - vier Dreiecke aus Verlaeufen, kein Bild. */
.album-fach { position: relative; padding: 5px; border-radius: 4px; }
/* Das leere Fach traegt die Klasse "leer" - und die gibt es auf der
   Seite ein zweites Mal, als Kasten fuer "hier ist noch nichts" mit
   40 px Innenabstand, gestrichelter Kante und Rasterlayout. Beides
   griff gleichzeitig: jede Marke in einem leeren Fach wurde auf 95
   statt 119 px zusammengedrueckt und bekam eine Strichelkante. Hier
   wird alles zurueckgesetzt, was der allgemeine Kasten mitbringt. */
.album-fach.leer {
  display: block;
  padding: 5px;
  gap: 0;
  border: 0;
  border-radius: 4px;
  color: inherit;
  background: repeating-linear-gradient(45deg, transparent 0 6px, rgb(20 20 15 / .04) 6px 12px);
  box-shadow: inset 0 0 0 1.5px var(--stein);
}
.album-fach::after {
  content: "";
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  --ecke: 12px;
  --eckton: rgb(92 90 78 / .55);
  background:
    linear-gradient(to bottom right, var(--eckton) 48%, transparent 49%) top left / var(--ecke) var(--ecke) no-repeat,
    linear-gradient(to bottom left,  var(--eckton) 48%, transparent 49%) top right / var(--ecke) var(--ecke) no-repeat,
    linear-gradient(to top right,    var(--eckton) 48%, transparent 49%) bottom left / var(--ecke) var(--ecke) no-repeat,
    linear-gradient(to top left,     var(--eckton) 48%, transparent 49%) bottom right / var(--ecke) var(--ecke) no-repeat;
}
@media (min-width: 560px) { .album-fach::after { --ecke: 16px; } }

/* ---------------------------------------------- Blaettern

   Ohne JavaScript stehen alle Seiten untereinander. Sobald das
   Skript laeuft, setzt es .blaettern und es ist ein Buch: eine
   Seite zur Zeit. Am Handy ist das der eigentliche Gewinn - sechs
   Kategorien untereinander sind ein Scrollband, sechs Seiten sind
   ein Album. */

.album.blaettern .album-seite { display: none; border-top: 0; }
.album.blaettern .album-seite.dran { display: block; }
.album.blaettern .album-seiten { min-height: 26rem; }
@media (min-width: 700px) { .album.blaettern .album-seiten { min-height: 30rem; } }

.album-seitenzahl {
  display: flex; justify-content: space-between; gap: var(--s3);
  margin: var(--s4) 0 0; padding-top: var(--s2);
  border-top: 1.5px dotted var(--stein);
  font-family: var(--mono); font-size: var(--f-winzig);
  letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-weich);
}

/* Die Reiter am oberen Buchschnitt. Sie tragen den Stand ihrer
   Seite, damit man vor dem Blaettern weiss, was dort fehlt. */
/* Die Reiter des Hefts.

   Vorher waren es Aktenreiter: Kaesten mit abgeschnittener
   Unterkante, einem farbigen Streifen obendrauf und einem Pixel
   Versatz, damit der aktive "vorne" steht. Auf einem Handy wird
   daraus eine Reihe kleiner bunter Kaertchen, die sich gegenseitig
   im Weg stehen.

   Jetzt: Pillen. Die Kategoriefarbe ist ein Punkt, nicht eine
   Flaeche - so bleibt die Farbe da, ohne dass sechs Farben
   gleichzeitig um Aufmerksamkeit rufen. Der aktive Reiter ist
   gefuellt, mehr Unterschied braucht es nicht.
   ============================================================ */

.album-reiter {
  display: flex; gap: .4rem; margin-bottom: var(--s4);
  overflow-x: auto; scrollbar-width: none;
  padding: 2px 2px 4px;
  scroll-padding-inline: 2px;
}
.album-reiter::-webkit-scrollbar { display: none; }

.album-reiter-knopf {
  flex: none;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .9rem .46rem;
  border: var(--kante-fein) solid var(--stein);
  border-radius: 999px;
  background: var(--papier);
  color: var(--tinte);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--t-mikro) linear,
    border-color var(--t-mikro) linear,
    color var(--t-mikro) linear;
}
.reiter-punkt {
  width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--f, var(--lago));
  flex: none;
}
.reiter-name { font-size: .85rem; font-weight: 600; line-height: 1; }
.reiter-zahl {
  font-family: var(--mono); font-size: var(--f-winzig); font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
  color: var(--tinte-weich);
}

.album-reiter-knopf:hover { border-color: var(--tinte-weich); background: var(--papier-tief); }
.album-reiter-knopf[aria-current="true"] {
  background: var(--tinte); border-color: var(--tinte); color: var(--papier);
}
.album-reiter-knopf[aria-current="true"] .reiter-zahl { color: rgb(251 247 237 / .72); }
.album-reiter-knopf[aria-current="true"] .reiter-punkt { box-shadow: 0 0 0 2px rgb(251 247 237 / .3); }

.album-steuer {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); margin-top: var(--s3);
}
.album-steuer[hidden] { display: none; }
.album-steuer-stand {
  margin: 0; font-family: var(--mono); font-size: var(--f-winzig);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  text-align: center;
}
.album-steuer .knopf[disabled] { opacity: .35; cursor: default; }

.album-fuss {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s2) var(--s3);
  padding: var(--s3); border-top: var(--kante-fein) solid var(--stein); background: var(--papier-tief);
  font-family: var(--mono); font-size: var(--f-winzig); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-weich);
}
.album-fuss strong { color: var(--tinte); }
.album-fuss-einzeln { margin-top: var(--s4); border: var(--kante-fein) solid var(--stein); border-radius: 14px; box-shadow: var(--schatten-1); }

.bogen {
  position: relative;
  background: var(--papier);
  border: var(--kante) solid var(--stein);
  border-radius: 8px;
  padding: var(--s4) var(--s3) var(--s3);
  box-shadow: var(--schatten-2);
}

.bogen-rand {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s2) var(--s3);
  font-family: var(--mono); font-size: var(--f-winzig); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinte-weich); padding: 0 var(--s1) var(--s3); margin: 0;
}
.bogen-rand strong { color: var(--tinte); font-weight: 700; }
.bogen-rand-unten { padding: var(--s3) var(--s1) 0; border-top: var(--kante-fein) dashed var(--stein); margin-top: var(--s3); }

.bogen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 7px; }
@media (min-width: 560px) { .bogen-raster { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--s2); } }

/* Die Marke im Album. Klein, also faellt alles weg, was auf 130
   Pixeln nur noch Krimskrams waere - Kaestchen um den Wert,
   Kaestchen um den Namen, die Art. Uebrig bleibt, was eine echte
   Marke auch hat: Zahl oben, Name unten, Bild dazwischen. */
.bogen-marke .marke-kopf { padding: 0 1px 7px; }
.bogen-marke .marke-fuss { padding: 8px 1px 0; }
.bogen-marke .marke-wert { font-size: .66rem; }
.bogen-marke .marke-land { display: none; }
.bogen-marke .marke-schrift { width: 100%; }
/* Auf 84 Pixeln zerlegt overflow-wrap: anywhere jeden Ortsnamen in
   Silbensalat ("Limon / aia del / Castel"). Hier wird nur an Leer-
   zeichen umgebrochen und nach drei Zeilen abgeschnitten. */
.bogen-marke .marke-name {
  font-size: .72rem;
  line-height: 1.14;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: auto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bogen-marke .marke-ort { display: none; }
.bogen-marke .marke-stempel { width: 62%; right: 6%; top: 20%; }
.bogen-marke:hover { z-index: 2; }
@media (min-width: 560px) {
  .bogen-marke .marke-name { font-size: .76rem; }
  .bogen-marke .marke-wert { font-size: .7rem; }
}

/* ============================================================
   DER STREIFEN
   ============================================================ */

.streifen { overflow: hidden; padding-block: var(--s6); }
.streifen-fenster { overflow: visible; }
.streifen-bahn { display: flex; gap: var(--s4); padding-inline: var(--rand); width: max-content; }
.streifen-karte { flex: 0 0 clamp(210px, 46vw, 310px); scroll-snap-align: center; }
.streifen-karte:nth-child(4n+2) { margin-top: var(--s5); }
.streifen-karte:nth-child(4n+3) { margin-top: var(--s2); }
.streifen-karte:nth-child(4n)   { margin-top: var(--s6); }

@media (max-width: 899px) {
  .streifen-fenster {
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .streifen-fenster::-webkit-scrollbar { display: none; }
  .streifen-karte:nth-child(n) { margin-top: 0; }
  .streifen-karte:nth-child(even) { margin-top: var(--s4); }
}

/* ============================================================
   DIE ZITRONE — das Zeichen der Fahrt

   Limone sul Garda ist die noerdlichste Zone Europas, in der
   Zitronen wachsen; die Limonaia del Castel steht als
   Pflichtmarke auf dieser Fahrt. Die Frucht ist deshalb kein
   Aufkleber, sondern ein Zeichen mit einer Stelle im Ort - und
   der Schnitt durch sie ist dieselbe Figur wie ein Poststempel:
   ein Kreis mit Kammern.
   ============================================================ */

.limonaia { position: relative; overflow: clip; }
.limonaia-raster { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 900px) { .limonaia-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); } }

.zitrone-buehne { position: relative; display: grid; place-items: center; }
.zitrone-gross { width: min(100%, 440px); display: block; overflow: visible; }
.zitrone-schale { fill: var(--zitrone); }
.zitrone-weiss  { fill: #FFF6D8; }
.zitrone-kammer { fill: #FFE9A8; }
.zitrone-kammer.voll { fill: var(--zitrone-tief); }
.zitrone-linie  { stroke: var(--tinte); fill: none; stroke-width: 3.2; stroke-linecap: round; }
.zitrone-blatt  { fill: var(--blatt-hell); stroke: var(--tinte); stroke-width: 3.2; }

/* Die Zitronen der Sonderränge. Dieselbe Schnittfrucht wie die grosse
   - gleiche Kammern, gleiche Haut, gleicher Blattstrich - damit auf
   der ganzen Seite eine einzige Zitronenfigur gilt.

   Der Unterschied zwischen den beiden Sonderrängen ist nur die
   Schale: bei der einen gelb, bei der anderen facettiert und kühl.
   Zwei Zitronen, zwei Bedeutungen, eine Zeichnung. */
.sonderzitrone { display: block; width: 100%; height: auto; }
.sonder-schale { fill: var(--zitrone); }
.sonder-weiss  { fill: #FFF6D8; }
.sonder-kammern { fill: #FFE9A8; }
.sonder-linie  { stroke: var(--tinte); fill: none; stroke-linecap: round; }
.sonder-blatt  { fill: var(--blatt-hell); stroke: var(--tinte); stroke-width: 2; }

/* Die Diamantzitrone. Kein Silber und kein Diamant-Weiss - beides
   waere auf diesem Papier nur ein helles Grau. Der Stein ist blau,
   weil blau auf der Seite das Wasser ist, und hell ist nur die
   Kante, die das Licht zurueckgibt.

   Der Klassennamen gehoeren zu partials/sonderzitrone.ejs: dort steht
   "sonderzitrone-gold" bzw. "sonderzitrone-diamant". Stimmt einer der
   beiden Namen nicht, faellt die ganze Figur lautlos auf Gelb zurueck. */
.sonderzitrone-diamant .sonder-schale   { fill: #BFE4EE; }
.sonderzitrone-diamant .sonder-weiss    { fill: #EAF7FB; }
.sonderzitrone-diamant .sonder-kammern  { fill: #9FD6E8; }
.sonderzitrone-diamant .sonder-facette  { fill: none; stroke: var(--lago); stroke-width: 1.8; stroke-linejoin: round; }
.sonderzitrone-diamant .sonder-linie    { stroke: var(--lago); }
.sonderzitrone-diamant .sonder-blatt    { fill: #7FB9CC; stroke: var(--lago); }

/* ============================================================
   Der Oleander und der Tagesplan

   Ein Blatt je Reisetag. Die Bluete ist deshalb kein Ornament,
   sondern die Anzeige selbst - genau das war der Grund, die
   Zitrone hier abzuloesen: sie hat dieselbe Zahl gezeigt wie der
   Balken im Held, nur schoener.
   ============================================================ */

.oleander-raster { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 900px) {
  .oleander-raster { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: var(--s6); }
}

.blume-buehne { position: relative; display: grid; place-items: center; }
.blume { width: min(100%, 400px); display: block; overflow: visible; }

/* Die Bluete wird beim Scrollen Blatt fuer Blatt aufgeklappt, und
   jedes Blatt steht dabei schief. Ein schiefes Blatt ist breiter als
   sein Kasten - die Bluete ragte dadurch auf dem Handy bis zu gut
   dreissig Pixel aus der Seite heraus, und die liess sich dann
   waagerecht schieben.

   Das Band schneidet sie ab. Es ist randbreit, also heisst das:
   die Bluete darf in den Band hineinragen, aber nicht aus der Seite
   heraus - und weil hier "clip" steht und nicht "hidden", entsteht
   kein Scrollbehaelter, an dem das Hoch- und Herunterlaufen klebt. */
.oleander { overflow-x: clip; }

.blume-laub path { fill: var(--blatt); }
.blume-laub .blume-strich { fill: none; stroke: rgb(251 247 237 / .35); stroke-width: 3; stroke-linecap: round; }

.blume-blatt { transform: rotate(var(--dreh)); transform-origin: 0 0; transform-box: view-box; }
.blume-flaeche { fill: var(--oleander); }
.blume-blatt:not(.auf) .blume-flaeche { fill: var(--oleander-blass); }
.blume-ader { fill: none; stroke: rgb(255 255 255 / .5); stroke-width: 3; stroke-linecap: round; }

.blume-krone circle { fill: var(--zitrone); }
.blume-krone .blume-mitte { fill: var(--zitrone-tief); }
.blume-franse {
  fill: none; stroke: var(--zitrone); stroke-width: 5; stroke-linecap: round;
  transform: rotate(var(--dreh)); transform-origin: 0 0; transform-box: view-box;
}

/* Der Plan. Eine Liste, keine Kacheln - ein Tagesplan ist eine
   Reihenfolge, und eine Reihenfolge liest man untereinander. */
.tagesplan { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: 0; }
.tagesplan-zeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s2) var(--s3);
  align-items: baseline;
  padding: var(--s3) 0;
  border-top: var(--kante-fein) dashed rgb(251 247 237 / .3);
}
.tagesplan-zeile:last-child { border-bottom: var(--kante-fein) dashed rgb(251 247 237 / .3); }
.tagesplan-nr {
  font-family: var(--mono); font-size: var(--f-winzig); font-weight: 700;
  letter-spacing: .06em; color: var(--oleander); font-variant-numeric: tabular-nums;
}
.tagesplan-titel { display: block; font-family: var(--titel); font-size: 1.3rem; line-height: 1.1; }
.tagesplan-was { display: block; margin-top: .2rem; color: var(--leise); font-size: .95rem; line-height: 1.5; }
.tagesplan-datum {
  font-family: var(--mono); font-size: var(--f-winzig); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--leise); white-space: nowrap;
}
.tagesplan-zeile.vorbei { opacity: .5; }
.tagesplan-zeile.vorbei .tagesplan-titel { text-decoration: line-through; text-decoration-thickness: 1px; }
.tagesplan-zeile.jetzt .tagesplan-nr { color: var(--zitrone); }
.tagesplan-zeile.jetzt .tagesplan-datum { color: var(--zitrone); }

.leer-hell { border-color: rgb(251 247 237 / .35); color: var(--leise); }

.limonaia-zahl {
  font-family: var(--titel); font-weight: 400;
  font-size: clamp(3rem, 9vw, 5.4rem); line-height: .9; letter-spacing: -.028em; margin: 0;
}
.limonaia-liste { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: 0; }
.limonaia-liste li {
  display: grid; grid-template-columns: 4.2rem 1fr; gap: var(--s3);
  align-items: baseline; padding-block: var(--s3); border-top: 1.5px solid var(--linie);
}
.limonaia-liste b { font-family: var(--mono); font-size: var(--f-winzig); letter-spacing: .06em; color: var(--akzent); }

/* ============================================================
   Knoepfe — die Haptik der Seite

   Eine Taste hat eine Unterkante und federt beim Druecken ein.
   Das ist der Grund, warum sich die Seite spielerisch anfuehlt,
   ohne dass irgendwo Spielgrafik vorkommt: kostet nichts,
   funktioniert mit der Tastatur, auf jedem Geraet gleich.
   ============================================================ */

/* Der Knopf. Vorher: Zweipixelkontur in Tinte plus ein vier Pixel
   versetzter Vollton-Schatten - die Sprache eines Comic-Buttons.
   Jetzt eine gefuellte Pille mit weichem Schatten. Beim Druecken
   sinkt sie ein, statt umzukippen. */
.knopf {
  --knopf-grund: var(--tinte);
  --knopf-schrift: var(--papier);
  --knopf-kante: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: .75rem 1.35rem;
  background: var(--knopf-grund); color: var(--knopf-schrift);
  border: var(--kante-fein) solid var(--knopf-kante); border-radius: 999px;
  font-family: var(--ui); font-size: .95rem; font-weight: 600; letter-spacing: -.005em;
  text-decoration: none; cursor: pointer;
  box-shadow: var(--schatten-1);
  transform: translateY(0);
  transition:
    transform var(--t-mikro) var(--e-haupt),
    box-shadow var(--t-mikro) var(--e-haupt),
    background var(--t-mikro) linear;
}
.knopf:hover { color: var(--knopf-schrift); transform: translateY(-1px); box-shadow: var(--schatten-2); }
.knopf:active { transform: translateY(1px); box-shadow: 0 1px 2px rgb(20 20 15 / .12); }
.knopf[disabled] { opacity: .5; cursor: progress; }

.knopf-hell    { --knopf-grund: var(--papier); --knopf-schrift: var(--tinte); --knopf-kante: var(--stein); }
.knopf-zitrone { --knopf-grund: var(--zitrone); --knopf-schrift: var(--tinte); --knopf-kante: var(--zitrone-tief); }
.knopf-korall  { --knopf-grund: var(--korall); --knopf-schrift: var(--papier); --knopf-kante: var(--korall-tief); }
/* Der Knopf, mit dem man abhakt. Er ist bewusst NICHT gelb: Gelb ist
   auf dieser Seite der Wert, den man bekommt. Der Knopf, der den Wert
   ausloest, muss eine eigene Farbe haben, sonst sieht die Handlung aus
   wie ihr eigenes Ergebnis. */
.knopf-see { --knopf-grund: var(--lago); --knopf-schrift: var(--papier); --knopf-kante: var(--lago); }
/* Rueckgaengig und Loeschen. Bewusst nicht rot: Rot ist auf
   dieser Seite die Stempelfarbe und sonst nichts. */
.knopf-warn {
  --knopf-grund: transparent; --knopf-schrift: var(--tinte-weich);
  border-color: var(--stein); border-style: dashed; border-width: var(--kante);
  box-shadow: none;
}
.knopf-warn:hover { border-color: var(--tinte-weich); box-shadow: none; }
.knopf-klein { min-height: 40px; padding: .45rem 1rem; font-size: .85rem; }
.knopf-gross { min-height: 56px; padding: .95rem 1.8rem; font-size: 1.06rem; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

.adresszeile {
  display: flex; align-items: center; gap: var(--s2);
  font-family: var(--mono); font-size: var(--f-klein); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--schrift); text-decoration: none; padding-block: .5rem;
}
.adresszeile .strich { flex: 1; height: 0; border-top: 2px dotted var(--linie); transition: border-color var(--t-normal) var(--e-haupt); }
.adresszeile:hover { color: var(--akzent); }
.adresszeile:hover .strich { border-color: var(--akzent); }

/* ============================================================
   Kopfzeile und Navigation
   ============================================================ */

.kopf {
  position: sticky; top: 0; z-index: 60;
  background: rgb(251 247 237 / .92);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: var(--kante-fein) dashed var(--stein);
}
.kopf-innen { display: flex; align-items: center; gap: var(--s3); min-height: var(--kopf-hoehe); padding-block: .5rem; }

.wortmarke { display: block; text-decoration: none; color: var(--tinte); margin-right: auto; }
.wortmarke-text { display: block; font-family: var(--titel); font-style: italic; font-weight: 400; font-size: 1.5rem; letter-spacing: 0; line-height: 1.05; }
.wortmarke-unter { display: block; font-family: var(--mono); font-size: var(--f-winzig); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--tinte-weich); margin-top: .2em; }

.hauptnav { display: none; gap: .15rem; }
.hauptnav a {
  display: inline-flex; align-items: center; padding: .5rem .85rem;
  border-radius: 999px; font-weight: 600; font-size: .94rem;
  color: var(--tinte); text-decoration: none;
  transition: background var(--t-mikro) linear, color var(--t-mikro) linear;
}
.hauptnav a:hover { background: var(--stein); color: var(--tinte); }
.hauptnav a[aria-current="page"] { background: var(--tinte); color: var(--papier); }

/* Die Zitrone in der Kopfzeile. Kein Kasten drumherum, keine
   Kontur, kein Schlagschatten - die Frucht selbst ist schon Form
   genug, und der Kopf soll ruhig sein. */
.kopf-punkte {
  display: inline-flex; align-items: center; gap: .5rem;
  text-decoration: none; color: var(--tinte);
  padding: .2rem .4rem .2rem .2rem;
  border-radius: 999px;
  transition: background var(--t-mikro) var(--e-haupt);
}
.kopf-punkte:hover { background: var(--papier-tief); }
.kopf-punkte:active { transform: translateY(1px); }
.kopf-punkte-text { display: grid; line-height: 1.06; }
.kopf-punkte-text b {
  font-family: var(--mono); font-size: .85rem; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.kopf-punkte-text small {
  font-family: var(--mono); font-size: var(--f-winzig); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--tinte-weich);
  white-space: nowrap;
}
/* Am Handy nur die Frucht und die Zahl - der Rangname passt neben
   Wortmarke und Konto nicht mehr auf 375 Pixel. */
@media (max-width: 560px) { .kopf-punkte-text small { display: none; } }

.kopf-konto { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; color: var(--tinte); font-weight: 600; font-size: .9rem; }
.kopf-konto-kreis {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--korall); color: var(--papier);
  font-family: var(--mono); font-weight: 700; font-size: .82rem; flex: none;
}
.kopf-konto-name { display: none; }

.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; background: rgb(251 247 237 / .96);
  backdrop-filter: blur(14px) saturate(1.3);
  border-top: var(--kante-fein) dashed var(--tinte-weich);
  padding-bottom: env(safe-area-inset-bottom);
}
/* Sechs Punkte muessen auf einen 360er Schirm passen, also 60px je
   Punkt. Symbol und Schrift sind entsprechend knapp bemessen - die
   Tippflaeche bleibt trotzdem 60x62 und damit ueber dem Minimum. */
.leiste a {
  flex: 1; min-width: 0;
  display: grid; justify-items: center; align-content: center; gap: .16rem;
  min-height: var(--leiste-hoehe); text-decoration: none; color: var(--tinte-weich);
  font-family: var(--mono); font-size: .53rem; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; position: relative;
}
.leiste a span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.leiste a svg { width: 20px; height: 20px; }
@media (min-width: 420px) {
  .leiste a { font-size: .58rem; letter-spacing: .05em; }
  .leiste a svg { width: 21px; height: 21px; }
}
.leiste a[aria-current="page"] { color: var(--tinte); }
.leiste a[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%); width: 28px; height: 4px; background: var(--korall);
}

body { padding-bottom: calc(var(--leiste-hoehe) + env(safe-area-inset-bottom)); }

@media (min-width: 880px) {
  .hauptnav { display: flex; }
  .leiste { display: none; }
  body { padding-bottom: 0; }
  .kopf-konto-name { display: inline; }
}

/* ============================================================
   Der Held

   Links das Bild vom Ort, rechts die Ansage. Am Handy
   untereinander, das Bild zuerst - es sagt in einer halben
   Sekunde, worum es geht, und der Titel braucht dafuer zwei
   Zeilen Text.
   ============================================================ */

.held { position: relative; padding-block: var(--s5) var(--s6); overflow: clip; }

.held-raster {
  position: relative;
  display: grid;
  gap: var(--s5);
  align-items: center;
}

/* Das Bild. Weisser Rand und eine Bildunterschrift darunter -
   ein Abzug, das im Album liegt, nicht ein Vollbild. */
.held-bild { position: relative; margin: 0; }
/* Ein Abzug: weisses Papier, das Bild darin, die Zeile darunter -
   dieselbe Bauweise wie die Postkarten weiter unten, damit die
   Seite EINE Sprache spricht statt zwei. */
.held-bild-feld {
  display: block;
  padding: 12px;
  border-radius: 14px;
  background: var(--papier);
  border: var(--kante-fein) solid var(--stein);
  box-shadow: var(--schatten-3);
  overflow: hidden;
}
.held-bild-feld img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 4px;
}
.held-bildunter {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem var(--s2);
  margin-top: var(--s3); padding-inline: .15rem;
}
.held-bildname { font-family: var(--titel); font-style: italic; font-size: 1.24rem; line-height: 1.1; }

/* EINE Frucht, auf der oberen rechten Ecke des Abzugs. Sie liegt
   zur Haelfte auf dem Papier und zur Haelfte daneben - wie etwas,
   das jemand daraufgelegt hat. */
.held-frucht {
  position: absolute; pointer-events: none; z-index: 2;
  width: clamp(72px, 16vw, 132px);
  right: -3%; top: -6%;
  transform: rotate(8deg);
  filter: drop-shadow(0 6px 14px rgb(20 20 15 / .24));
}
.held-frucht svg { width: 100%; height: auto; overflow: visible; }

/* Die Ueberschrift. Antiqua, ein Schnitt, kein Gewicht - sie
   wirkt ueber die Groesse. Genau das war vorher der Fehler:
   eine 800er Grotesk in Riesengrad schreit auf jedem Schirm. */
.held-titel {
  font-family: var(--titel); font-weight: 400;
  font-size: var(--f-riese); line-height: .98; letter-spacing: -.014em;
  margin: 0 0 var(--s2);
  padding: .06em .1em .06em 0;
}
.held-titel .jahr {
  display: inline-block;
  background: var(--zitrone); color: var(--tinte);
  padding: 0 .12em .04em;
  border-radius: 4px;
  transform: rotate(-1.4deg);
}

.held-unter {
  font-family: var(--titel); font-style: italic;
  font-size: clamp(1.25rem, 4.2vw, 1.85rem); line-height: 1.14;
  color: var(--lago);
  margin: 0 0 var(--s3);
  /* Weit genug fuer den ganzen Satz. Bei 22ch brach "Zwischen Zitronen
     und Wasser" nach "und" um - der Zeilenumbruch stand da, wo keiner
     hingehoert. */
  max-width: 34ch;
}
.held-text .lead { margin-bottom: 0; }

.held-knoepfe { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-top: var(--s5); }

.held-stand { margin-top: var(--s4); max-width: 26rem; }

/* Die Marke in der Ecke. Am Handy waere sie nur ein Fleck neben
   dem Titel - dort faellt sie weg. */
.held-marke { display: none; }
.reisemarke { width: 100%; height: auto; }
.reisemarke-grund { fill: var(--papier); stroke: var(--tinte); stroke-width: 2; }
.reisemarke-see { fill: var(--lagune); stroke: var(--lago); stroke-width: 14; stroke-linejoin: round; }
.reisemarke-wort { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .06em; fill: var(--tinte); }
.reisemarke-jahr { font-family: var(--titel); font-size: 17px; fill: var(--tinte); }

@media (min-width: 900px) {
  .held { padding-block: var(--s6) var(--s7); }
  .held-raster { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: var(--s6); }
  /* Platz fuer die Marke in der Ecke. Ohne ihn laeuft die erste
     Zeile der Ueberschrift genau unter sie. */
  .held-text { padding-right: 6.5rem; }
  .held-marke {
    display: block;
    position: absolute; right: -.5rem; top: -2.5rem;
    width: 84px; z-index: 3;
    transform: rotate(4deg);
    filter: drop-shadow(0 6px 14px rgb(20 20 15 / .22));
  }
}
@media (min-width: 1200px) {
  .held-raster { gap: var(--s7); }
  .held-marke { width: 100px; top: -3.5rem; right: -1rem; }
}

/* ============================================================
   Der Fortschrittsbalken
   ============================================================ */

.fortschritt { display: grid; gap: .5rem; }
.fortschritt-kopf {
  margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
}
.fortschritt-zahl {
  font-family: var(--mono); font-size: var(--f-klein); font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--tinte-weich);
}
.fortschritt-zahl b { color: var(--tinte); font-weight: 700; }
/* Steht die Zahl allein in der Zeile - ohne Temperatur daneben -, soll sie
   trotzdem rechts stehen, sonst haengt sie links unter einem Wort, das
   es gar nicht gibt. */
.fortschritt-zahl-vorn { margin-left: auto; }
.fortschritt-gleis {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: var(--stein);
  overflow: hidden;
}
.fortschritt-fuellung {
  display: block; height: 100%;
  width: var(--pro, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--zitrone-tief), var(--zitrone));
  transition: width 1.1s var(--e-haupt);
}
.fortschritt-gross .fortschritt-gleis { height: 14px; }
.band .fortschritt-gleis { background: rgb(251 247 237 / .24); }

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

/* Die Wetterangabe. Eine Zeile, kein Kasten mit Symbol - das
   Symbol hat nie mehr gesagt als die Zahl. */
.wetterchip {
  margin: 0;
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: var(--f-klein); font-weight: 500;
  letter-spacing: .02em; color: var(--tinte-weich);
}
.wetterchip-punkt {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--blatt-hell);
  box-shadow: 0 0 0 3px rgb(63 191 99 / .22);
}
.band .wetterchip { color: var(--leise); }

/* Die Standzeile: drei Zahlen nebeneinander, gross gesetzt. Sie
   ersetzt die Seekarte, die vorher im Held stand - eine Karte
   im ersten Bild sagt nichts ueber den Stand aus. */
.stand-reihe {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3); margin-top: var(--s5);
  border-top: var(--kante-fein) solid var(--stein); padding-top: var(--s3);
  max-width: 40rem;
}
.stand-feld { display: grid; gap: .1rem; }
.stand-zahl {
  font-family: var(--titel); font-weight: 400;
  font-size: clamp(2rem, 7vw, 3.4rem); line-height: .9; letter-spacing: -.028em; margin: 0;
}
.stand-zahl small { font-size: .4em; color: var(--tinte-weich); letter-spacing: -.01em; }
.stand-feld .daten { color: var(--tinte-weich); }

.naechste {
  display: flex; align-items: center; gap: var(--s3);
  margin-top: var(--s4); padding: var(--s2);
  background: var(--papier); border: var(--kante) solid var(--stein); border-radius: 10px;
  text-decoration: none; color: var(--tinte); box-shadow: var(--schatten-1);
  transition: transform var(--t-mikro) var(--e-haupt), box-shadow var(--t-mikro) var(--e-haupt);
  max-width: 30rem;
}
.naechste:active { transform: translateY(5px); box-shadow: 0 0 0 var(--korall); }
.naechste-marke { flex: none; width: 66px; }
.naechste-text { min-width: 0; }
.naechste-name { display: block; font-family: var(--laut); font-weight: 700; font-size: 1.18rem; line-height: 1.02; letter-spacing: -.014em; }

/* ============================================================
   Die Doppelseite
   ============================================================ */

.doppelseite { display: grid; gap: var(--s5); }
@media (min-width: 900px) {
  .doppelseite { grid-template-columns: 1fr 2px 1fr; gap: var(--s6); align-items: start; }
  .doppelseite-falz { align-self: stretch; border-left: 2px dashed var(--linie); }
}

/* ============================================================
   Stempel, Zugewinn, Siegel
   ============================================================ */

.stempel-bild { color: var(--korall); }

.xp-zugewinn {
  position: fixed; z-index: 320; pointer-events: none;
  font-family: var(--mono); font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em;
  color: var(--tinte); background: var(--zitrone);
  border: var(--kante) solid var(--stein); border-radius: 999px;
  padding: .4rem .85rem .36rem; box-shadow: var(--schatten-2); white-space: nowrap;
}
.xp-zugewinn.aufstieg { background: var(--korall); color: var(--papier); }

.freischalt-schein {
  position: absolute; inset: 0; z-index: 30;
  display: grid; place-items: center;
  background: rgb(255 210 63 / .93); border-radius: 8px; pointer-events: none;
}
.freischalt-schein span { font-family: var(--mono); font-weight: 700; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinte); }

/* Der Ring des Siegels lief in voller Tinte - bei 116 Pixeln ein
   schwarzer Reifen um die Frucht, also genau die harte Kontur, die
   ueberall sonst weg ist. currentColor traegt jetzt den weichen
   Ton; die Zahl in der Mitte bleibt dunkel. */
.siegel { position: relative; width: 66px; height: 66px; flex: none; color: var(--tinte-weich); display: grid; place-items: center; }
.siegel-gross { width: 116px; height: 116px; }
.siegel-bild { position: absolute; inset: 0; width: 100%; height: 100%; }
.siegel-klein { width: 38px; height: 38px; }
.siegel-schale { fill: var(--zitrone-tief); }
.siegel-fleisch { fill: #FFF6D8; }
/* Gefuellte Kammer heisst erreichter Rang. Der Unterschied muss
   auch bei 38 Pixeln in der Kopfzeile zu sehen sein - deshalb
   blass gegen kraeftig, nicht hell gegen etwas heller. */
.siegel-kammer { fill: #FBF1CE; }
.siegel-kammer.voll { fill: var(--zitrone); }
.siegel-ring { stroke: var(--korall); }
.siegel-xp {
  position: relative; margin: 0;
  font-family: var(--mono); font-weight: 700; font-size: 0; line-height: 1;
  text-align: center; color: var(--tinte);
}
.siegel-xp span {
  display: block; font-size: .82rem;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 3px rgb(255 246 216 / .95), 0 0 7px rgb(255 246 216 / .9), 0 0 12px rgb(255 246 216 / .8);
}
.siegel-gross .siegel-xp { font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; }
.siegel-gross .siegel-xp span { font-size: 1.6rem; }
.siegel-klein .siegel-xp span { font-size: .66rem; }
.siegel-gross .siegel-xp { font-size: 1.05rem; }
.siegel-xp span { display: block; font-size: 1.5em; }

.rang-mein {
  display: flex; align-items: center; gap: var(--s3);
  background: var(--papier); color: var(--tinte);
  border: var(--kante) solid var(--stein); border-radius: 10px; padding: var(--s3);
  box-shadow: var(--schatten-2);
}
.rang-mein-name { font-family: var(--titel); font-weight: 400; font-size: 1.6rem; line-height: 1; letter-spacing: -.02em; margin: 0 0 .3rem; color: var(--tinte); }
.rang-mein-zeile { font-family: var(--mono); font-size: var(--f-winzig); text-transform: uppercase; letter-spacing: .04em; color: var(--tinte-weich); margin: 0; }

/* ============================================================
   Rangliste
   ============================================================ */

.rang-kopf { display: grid; gap: var(--s5); }
@media (min-width: 880px) { .rang-kopf { grid-template-columns: 1fr auto; align-items: center; } }

.rang-tafel { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
/* Die Plaetze stehen ausdruecklich da, weil die Zahl der Spalten und
   die Zahl der Kinder nicht zusammenpasst.

   Schmal hat die Zeile drei Spalten: Platz, Name, Punkte. Balken und
   Bogen bekommen darunter je eine eigene Zeile. Ohne diese Angaben
   rutschte die Punktezahl in die naechste Zeile, in die 2,4-rem-
   Spalte ganz links - und lief, sobald sie dreistellig wurde, mit
   "justify-self: end" nach links aus dem Rahmen heraus. */
.rang-zeile {
  display: grid; gap: var(--s2) var(--s3);
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  grid-template-areas:
    "platz wer  xp"
    "balken balken balken"
    "bogen bogen  bogen";
  align-items: center;
  padding: var(--s2) var(--s3); background: var(--papier); color: var(--tinte);
  border: var(--kante-fein) solid var(--stein); border-radius: 10px;
}
.rang-platz { grid-area: platz; }
.rang-wer { grid-area: wer; }
.rang-xp { grid-area: xp; }
.rang-balken { grid-area: balken; }
.rang-zeile.ich { border-color: var(--tinte); border-width: var(--kante); box-shadow: 0 var(--wurf-klein) 0 var(--zitrone); }
.rang-platz { font-family: var(--mono); font-weight: 700; font-size: 1.05rem; letter-spacing: -.04em; color: var(--tinte-weich); }
.rang-zeile.ich .rang-platz { color: var(--tinte); }
.rang-wer { min-width: 0; }
.rang-siegel { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.rang-name { font-family: var(--laut); font-weight: 700; font-size: 1.14rem; letter-spacing: -.014em; line-height: 1.06; display: block; }
.rang-titel { font-family: var(--mono); font-size: var(--f-winzig); text-transform: uppercase; letter-spacing: .05em; color: var(--tinte-weich); }
.rang-rolle { font-family: var(--mono); font-size: var(--f-winzig); background: var(--lago); color: var(--papier); border-radius: 3px; padding: .1em .35em; margin-left: .4em; vertical-align: .14em; }

.rang-xp { display: flex; align-items: center; gap: .45rem; font-family: var(--mono); font-size: .95rem; font-weight: 700; letter-spacing: -.03em; white-space: nowrap; justify-self: end; }
.rang-xp small { font-size: .62em; font-weight: 600; color: var(--tinte-weich); }

/* Der Bogen im Kleinen. Form sagt die Art, Fuellung den Zustand. */
.minibogen { grid-area: bogen; display: flex; flex-wrap: wrap; gap: 3px; }
.minibogen span { width: 12px; height: 15px; border: 1.5px solid var(--stein); border-radius: 2px; background: var(--papier); flex: none; }
.minibogen .frei { border-radius: 999px; width: 13px; height: 13px; align-self: center; }
.minibogen .voll { background: var(--zitrone); border-color: var(--tinte); }
.minibogen .voll-frei { background: var(--korall); border-color: var(--tinte); }
@media (min-width: 760px) {
  /* Ab hier passt alles in eine Zeile: Platz, Name, Balken, Punkte -
     und der Bogen wandert darunter in die rechte Spalte, wie vorher. */
  .rang-zeile {
    grid-template-columns: 2.4rem minmax(0, 13rem) minmax(0, 1fr) auto;
    grid-template-areas: "platz wer balken xp" "bogen bogen bogen xp";
  }
}

.siegelchen {
  display: inline-flex; align-items: center; gap: .35em;
  font-family: var(--mono); font-size: var(--f-winzig); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  background: var(--zitrone); color: var(--tinte);
  border: var(--kante) solid var(--stein); border-radius: 999px;
  padding: .18em .55em .14em; white-space: nowrap;
}
/* Die kleine Zitrone im Etikett. Sie ist das Erkennungszeichen des
   Sonderrangs - ohne sie waere "Gardasee Local" nur ein Wort, das auch
   ein Nebenziel tragen koennte. Der Einzug links gleicht das
   quadratische Etikett wieder aus. */
.siegelchen-zitrone { display: block; width: 1.15em; height: 1.15em; flex: none; margin-left: -.14em; }

.rang-leiter { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.rang-leiter li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); padding: .68rem var(--s3);
  border: var(--kante-fein) solid var(--stein); border-radius: 8px; color: var(--tinte-weich);
}
.rang-leiter li.erreicht { border-color: var(--tinte); color: var(--tinte); background: var(--papier); }
.rang-leiter li.hier { background: var(--zitrone); border-color: var(--tinte); color: var(--tinte); box-shadow: 0 var(--wurf-klein) 0 var(--tinte); }
.leiter-name { font-family: var(--laut); font-weight: 700; font-size: 1.1rem; letter-spacing: -.014em; }
.leiter-ab { font-family: var(--mono); font-size: var(--f-winzig); text-transform: uppercase; letter-spacing: .04em; }

/* Die zwei Punktesaetze. Sie stehen als Liste, nicht als Fliesstext:
   eine Zahl, die man sich merken soll, braucht ihre eigene Zeile. */
.punkte-regeln {
  list-style: none; margin: 0 0 var(--s3); padding: 0;
  display: grid; gap: .3rem;
  font-family: var(--laut); font-weight: 700; font-size: 1.05rem;
}
.punkte-regeln li { display: flex; align-items: baseline; gap: .5rem; }
.punkte-regeln li::before {
  content: ""; width: .5rem; height: .5rem; flex: none;
  border-radius: 50%; background: var(--zitrone); border: var(--kante-fein) solid var(--tinte);
  transform: translateY(-.1em);
}

.siegel-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.siegel-liste li { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3); border: var(--kante-fein) dashed var(--stein); border-radius: 10px; }
/* Erreicht heisst hier: fester Rand, eigener Grund, Schatten. Das ist
   das ganze Signal - die Zitrone selbst bleibt in ihren Farben, eine
   rote Schale waere eine dritte Bedeutung fuer eine Farbe, die schon
   zwei hat. */
.siegel-liste li.erreicht { border-style: solid; border-color: var(--tinte); background: var(--papier); box-shadow: var(--schatten-1); }
.sondermarke { width: 48px; height: 48px; flex: none; }
.siegel-liste strong { display: block; font-family: var(--laut); font-weight: 700; font-size: 1.1rem; letter-spacing: -.014em; }
.siegel-liste li span span { font-size: .92rem; color: var(--tinte-weich); }

.rang-unten { display: grid; gap: var(--s6); }
@media (min-width: 880px) { .rang-unten { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   Die Kartenseite

   Am Schreibtisch war die alte Aufteilung eine Zumutung: eine
   starre Spalte neben der Karte, beide mit eigenem Scrollen,
   und das Detail irgendwo darin. Jetzt liegt die Karte
   vollflaechig, und die Liste schwebt als eigenes Blatt
   darueber - so, wie es jede Karten-App macht, weil es
   funktioniert.
   ============================================================ */

.karten-layout { position: relative; }
/* Der Kartenbehaelter muss die Hoehe des Layouts erben, sonst
   steht Leaflet in einem Kasten von null Pixeln und laedt keine
   einzige Kachel. */
.karten-karte { position: relative; }

#lkarte {
  width: 100%;
  height: clamp(320px, 52dvh, 560px);
  background: var(--papier-tief);
  border-bottom: var(--kante-fein) solid var(--stein);
}

.karten-seite { position: relative; background: var(--papier); display: flex; flex-direction: column; min-height: 0; }

@media (min-width: 1000px) {
  .karten-layout { height: calc(100dvh - var(--kopf-hoehe)); overflow: hidden; }
  .karten-karte { height: 100%; }
  #lkarte { height: 100%; border-bottom: 0; }
  .karten-seite {
    position: absolute;
    top: var(--s3); left: var(--s3); bottom: var(--s3);
    width: min(420px, 38vw); z-index: 500;
    border: var(--kante) solid var(--stein); border-radius: 14px;
    box-shadow: var(--schatten-3);
    overflow: hidden;
    transition: transform var(--t-normal) var(--e-haupt), opacity var(--t-normal) var(--e-haupt);
  }
  .karten-layout.vollbild .karten-seite {
    transform: translateX(calc(-100% - var(--s4)));
    opacity: 0; pointer-events: none;
  }
}

/* Auf dem Handy ist Vollbild derselbe Ruhezustand wie am Schreibtisch,
   nur ohne die schwebende Spalte: die Karte fuellt den Schirm, die
   Liste verschwindet. Ohne diesen Teil waere der Knopf auf dem Handy
   ein Schalter ohne Wirkung - das war der gemeldete Fehler.

   Der Knopf bleibt sichtbar, er liegt ueber der Karte und nicht in der
   weggeblendeten Spalte. Wer eine Nadel antippt, holt karte.js die
   Spalte fuer die Dauer der Ansicht zurueck. */
@media (max-width: 999.98px) {
  .karten-layout.vollbild #lkarte {
    height: calc(100dvh - var(--kopf-hoehe));
    border-bottom: 0;
  }
  .karten-layout.vollbild .karten-seite { display: none; }
  .karten-layout.vollbild .vollbild-knopf { top: var(--s3); right: var(--s3); }
}

.karten-kopf { padding: var(--s3); display: grid; gap: var(--s2); border-bottom: var(--kante-fein) solid var(--stein); }
.karten-kopf h1 { font-size: 1.8rem; }

.karten-rang {
  display: flex; align-items: center; gap: var(--s2);
  text-decoration: none; color: var(--tinte);
  background: var(--papier); border: var(--kante) solid var(--stein);
  border-radius: 10px; padding: var(--s2); box-shadow: 0 4px 0 var(--zitrone);
}
.karten-rang strong { display: block; font-family: var(--laut); font-weight: 700; font-size: 1.05rem; line-height: 1.05; }
.karten-rang span span { font-family: var(--mono); font-size: var(--f-winzig); text-transform: uppercase; letter-spacing: .04em; color: var(--tinte-weich); }

input[type="text"], input[type="password"], input[type="search"], textarea, select {
  width: 100%; font-family: var(--ui); font-size: 1rem;
  padding: .7rem .85rem; background: var(--papier); color: var(--tinte);
  border: var(--kante) solid var(--stein); border-radius: 8px; min-height: 48px;
}
textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--tinte-weich); opacity: .8; }

.filter-block { border: var(--kante-fein) solid var(--stein); border-radius: 8px; }
.filter-block > summary,
.ortgruppe > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: .6rem var(--s3); cursor: pointer;
  font-family: var(--mono); font-size: var(--f-winzig); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; list-style: none; min-height: 46px;
}
summary::-webkit-details-marker { display: none; }
.klapp-pfeil { width: 12px; flex: none; transition: transform var(--t-normal) var(--e-haupt); }
details[open] > summary .klapp-pfeil { transform: rotate(180deg); }
.filter-block .chips { padding: 0 var(--s3) var(--s3); }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4em;
  min-height: 38px; padding: .3rem .75rem;
  border: 2px solid var(--f, var(--tinte)); border-radius: 999px;
  background: var(--papier); color: var(--tinte);
  font-family: var(--mono); font-size: var(--f-winzig); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer; text-decoration: none;
  transition: background var(--t-mikro) linear, color var(--t-mikro) linear;
}
.chip::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--f, var(--tinte)); }
.chip[aria-pressed="false"] { opacity: .4; }
.chip[aria-current="true"] { background: var(--f, var(--tinte)); color: var(--papier); }
.chip[aria-current="true"]::before { background: var(--papier); }

.zaehler-zeile { font-family: var(--mono); font-size: var(--f-winzig); text-transform: uppercase; letter-spacing: .05em; color: var(--tinte-weich); margin: 0; }

.lvl-leiste { display: grid; gap: .35rem; }
.lvl-balken { height: 14px; border: var(--kante) solid var(--stein); border-radius: 999px; overflow: hidden; background: var(--papier); }
.lvl-balken span { display: block; height: 100%; width: var(--anteil, 0%); background: var(--zitrone); }
.lvl-stand { font-family: var(--mono); font-size: var(--f-winzig); text-transform: uppercase; letter-spacing: .04em; margin: 0; color: var(--tinte-weich); }
.lvl-stand strong { color: var(--tinte); }

.orte-gruppen { overflow-y: auto; flex: 1; padding: var(--s2) var(--s3) var(--s5); min-height: 0; -webkit-overflow-scrolling: touch; }
.ortgruppe { border-top: var(--kante-fein) solid var(--stein); }
.ortgruppe:first-child { border-top: 0; }
.ortgruppe-kopf { display: flex; align-items: center; gap: var(--s2); }
.ortgruppe-name { display: inline-flex; align-items: center; gap: .5em; }
.ortgruppe-zahl { font-weight: 700; color: var(--tinte-weich); }
.ortgruppe-text { font-size: .88rem; color: var(--tinte-weich); margin: 0 0 var(--s2); padding: 0 var(--s1); }

.art-punkt { width: 11px; height: 11px; flex: none; background: var(--tinte); }
.art-punkt.art-pflicht { border-radius: 1px; }
.art-punkt.art-seiten { border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 2.5px var(--tinte); }

.orte-liste { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; gap: 5px; }
.orte-zeile {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center; gap: var(--s2);
  width: 100%; text-align: left; background: var(--papier);
  border: var(--kante-fein) solid var(--stein); border-radius: 10px;
  padding: .4rem; cursor: pointer; font: inherit; color: inherit; min-height: 58px;
  transition: border-color var(--t-mikro) linear, transform var(--t-mikro) var(--e-haupt), background var(--t-mikro) linear;
}
.orte-zeile:hover { border-color: var(--tinte); transform: translateX(3px); }
.orte-zeile[aria-current="true"] { border-color: var(--tinte); background: var(--zitrone); }
.orte-zeile.dran { border-color: var(--korall); border-style: dashed; }
.orte-zeile.zu { opacity: .58; }

.orte-vorschau { position: relative; width: 48px; height: 48px; border-radius: 6px; overflow: hidden; background: var(--papier-tief); display: grid; place-items: center; flex: none; }
.orte-vorschau img { width: 100%; height: 100%; object-fit: cover; }
/* Der Kategoriepunkt. In der Vorschau sitzt er in der Ecke des
   Bildes, sonst steht er einfach in der Zeile - im Backend
   taucht er in einer Tabelle auf. */
.orte-punkt { width: 10px; height: 10px; border-radius: 2px; background: var(--f, var(--tinte)); flex: none; }
.orte-vorschau .orte-punkt { position: absolute; right: 3px; bottom: 3px; box-shadow: 0 0 0 1.5px var(--papier); }

/* Der Haken auf der Vorschau: dasselbe Zeichen wie auf der Nadel,
   damit Liste und Karte dieselbe Sprache sprechen. */
.orte-check {
  position: absolute; right: 2px; top: 2px; z-index: 2;
  width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blatt);
  color: var(--papier);
  box-shadow: 0 0 0 1.6px var(--papier);
}
.orte-check[hidden] { display: none; }
.orte-check svg { width: 12px; height: 12px; }
.orte-stufe { font-family: var(--mono); font-weight: 700; font-size: .85rem; color: var(--tinte-weich); }

.orte-name { font-weight: 700; font-size: .96rem; line-height: 1.16; min-width: 0; }
.orte-name span { display: block; font-family: var(--mono); font-size: var(--f-winzig); font-weight: 500; text-transform: uppercase; letter-spacing: .03em; color: var(--tinte-weich); margin-top: .14em; }
.orte-zustand { display: grid; justify-items: end; gap: .2rem; text-align: right; }
.orte-marke-wert {
  font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: -.02em;
  background: var(--zitrone); border-radius: 999px;
  padding: .16em .5em .12em; line-height: 1.2;
}
.orte-zeile.zu .orte-marke-wert { background: var(--papier); color: var(--tinte-weich); }
.orte-angenommen { font-family: var(--mono); font-size: var(--f-winzig); font-weight: 700; text-transform: uppercase; background: var(--lago); color: var(--papier); border-radius: 3px; padding: .12em .35em; }
.orte-haken { font-family: var(--mono); font-size: var(--f-winzig); color: var(--tinte-weich); white-space: nowrap; }

.vollbild-knopf {
  position: absolute; top: var(--s2); right: var(--s2); z-index: 600;
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 42px; padding: .4rem .8rem;
  background: var(--papier); color: var(--tinte);
  border: var(--kante) solid var(--stein); border-radius: 999px;
  font-family: var(--mono); font-size: var(--f-winzig); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; cursor: pointer;
  box-shadow: var(--schatten-1);
  transition: transform var(--t-mikro) var(--e-haupt);
}
.vollbild-knopf:active { transform: translateY(1px); }
.vollbild-symbol { width: 15px; flex: none; }
.kein-js [data-nur-js] { display: none; }

.detail {
  position: absolute; inset: 0; z-index: 20;
  background: var(--papier); overflow-y: auto;
  padding: var(--s3) var(--s3) var(--s6);
  display: grid; gap: var(--s3); align-content: start;
}
.detail[hidden] { display: none; }
.detail-zurueck { justify-self: start; }
.detail-karte { display: none; }
.detail-karte.zeigen { display: grid; gap: var(--s3); }

.art-fahne {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--mono); font-size: var(--f-winzig); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  border: var(--kante) solid var(--stein); border-radius: 999px;
  padding: .34em .7em .3em; margin: 0; justify-self: start;
}
.art-xp { background: var(--zitrone); border-radius: 3px; padding: .12em .38em; }
.dran-fahne { font-family: var(--mono); font-size: var(--f-winzig); text-transform: uppercase; letter-spacing: .05em; color: var(--korall-tief); margin: 0; font-weight: 700; }
.art-auftrag { background: var(--zitrone); border: var(--kante) solid var(--stein); border-radius: 10px; padding: var(--s2) var(--s3); margin: 0; font-weight: 600; }

.detail-meta { display: grid; gap: 2px; margin-top: var(--s3); }
.detail-meta > div {
  display: flex; justify-content: space-between; gap: var(--s3);
  padding: .48rem var(--s2); border-bottom: 1.5px dotted var(--stein);
  font-family: var(--mono); font-size: var(--f-winzig); text-transform: uppercase; letter-spacing: .04em;
}
.detail-meta > div > span:first-child { color: var(--tinte-weich); }
.detail-meta > div > span:last-child { font-weight: 700; text-align: right; }
.detail-wer { font-family: var(--mono); font-size: var(--f-winzig); color: var(--tinte-weich); text-transform: uppercase; letter-spacing: .04em; }
.neben-steuerung { display: grid; gap: var(--s2); justify-items: start; }

/* ---------------------------------------------- Stempeln mit Beleg

   Foto und Standort gehoeren zum Stempel. Das Schild dafuer ist
   gross und traegt das Kamerasymbol - es ist die Handlung, um die
   es auf dieser Seite geht, und darf nicht wie ein Nebenfeld
   aussehen. */

.stempelform { display: grid; gap: var(--s2); justify-items: stretch; width: 100%; }

.stempel-foto {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3);
  border: var(--kante) dashed var(--stein);
  border-radius: 12px;
  background: var(--papier);
  cursor: pointer;
  transition: background var(--t-mikro) linear, border-color var(--t-mikro) linear;
}
.stempel-foto:hover { background: var(--papier-tief); }
.stempel-foto:focus-within { outline: 3px solid var(--korall); outline-offset: 3px; }
.stempel-foto.hat-foto { border-style: solid; background: var(--zitrone); }
.stempel-foto input[type="file"] {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); border: 0;
}
.stempel-foto-symbol { width: 30px; flex: none; color: var(--tinte); }
.stempel-foto-text { display: grid; gap: .1rem; min-width: 0; }
.stempel-foto-text strong { font-size: 1rem; }
.stempel-foto-text small { font-size: .82rem; color: var(--tinte-weich); }
.stempel-foto.hat-foto .stempel-foto-text small { color: rgb(20 20 15 / .7); }

.stempel-hinweis {
  margin: 0; font-size: .85rem; line-height: 1.45; color: var(--tinte-weich);
  border-left: var(--kante-stark) solid var(--stein); padding-left: var(--s2);
}
.stempel-hinweis.schlecht { color: var(--tinte); border-left-color: var(--korall); font-weight: 600; }
.stempel-hinweis.gut { color: var(--tinte); border-left-color: var(--blatt); font-weight: 600; }
.feld-hilfe { font-size: .85rem; color: var(--tinte-weich); }

.zu-karte { border: var(--kante-fein) dashed var(--stein); border-radius: 10px; padding: var(--s5) var(--s3); text-align: center; display: grid; gap: var(--s2); justify-items: center; }
.zu-stufe { font-family: var(--titel); font-weight: 400; font-size: 2.2rem; margin: 0; line-height: 1; }
.zu-hand { color: var(--tinte-weich); margin: 0; max-width: 30ch; }
.zu-siegel { width: 34px; color: var(--tinte-weich); }

.karte { perspective: 1400px; }
/* minmax(0, 1fr) ist hier kein Feinschliff, sondern die Reparatur:

   Ohne Spaltenangabe ist die Spalte "auto", also so breit wie ihr
   Inhalt sie haben will. Die Vorderseite hat ein Seitenverhaeltnis,
   die Rueckseite bestimmt ueber ihren langen Text die Hoehe - und
   aus dieser Hoehe hat sich die Vorderseite dann ihre Breite
   gerechnet. Auf einem 375er Handy kam eine Postkarte von zweitausend
   Pixeln heraus, und die Seite liess sich waagerecht schieben.

   Mit einer festen Spalte ist die Breite zuerst da und die Hoehe
   folgt - die einzige Richtung, in der das aufgeht. */
.karte-innen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  transform-style: preserve-3d;
  transition: transform .55s var(--e-weich);
}
.karte[data-seite="hinten"] .karte-innen { transform: rotateY(180deg); }
.karte-seite { grid-area: 1 / 1; min-width: 0; backface-visibility: hidden; }
.karte-hinten { transform: rotateY(180deg); }
.karte[data-seite="hinten"] .karte-vorn { visibility: hidden; }
.karte[data-seite="vorn"] .karte-hinten { visibility: hidden; }

/* ============================================================
   DIE POSTKARTE

   Vorne das Bild mit dem Gruss darauf, hinten die Nachricht,
   die Marke mit dem Stempel und die Adresszeilen. Der Aufbau
   der Rueckseite ist der einer wirklichen Karte und nicht dessen
   Nachbau - genau deshalb funktioniert er, ohne dass ihn jemand
   erklaeren muss.
   ============================================================ */

.fotokarte { --f: var(--lago); }

/* min-height statt height, und die Breite ausdruecklich.

   Mit height: 100% wurde die Hoehe der Vorderseite definit - sie kam
   ja von der laengeren Rueckseite - und aus dieser Hoehe hat
   aspect-ratio dann eine BREITE gerechnet. Auf einem 375er Handy
   ergab das eine Postkarte von 1971 Pixeln Breite und damit eine
   Seite, die sich waagerecht schieben liess. Genau der Fehler, den
   der Kunde gemeldet hat.

   So herum bleibt die Breite bei 100 % der Zelle, die Hoehe kommt
   aus dem Seitenverhaeltnis und wird nur angehoben, wenn die
   Rueckseite laenger ist. */
.fotokarte-vorn {
  position: relative;
  width: 100%;
  min-height: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--papier-tief);
  border-radius: 10px;
  box-shadow: var(--schatten-2);
}
.fotokarte-vorn > img,
.fotokarte-vorn > svg { width: 100%; height: 100%; object-fit: cover; }

/* Der Gruss auf dem Bild. Hier ist die Kursive nicht Akzent,
   sondern der ganze Ton - so steht es auf jeder Karte, die je
   verschickt wurde. Der Schatten haelt sie auf jedem Foto lesbar,
   hell wie dunkel. */
.fotokarte-vorn::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 62%;
  background: linear-gradient(to top, rgb(12 40 48 / .88), rgb(12 40 48 / .42) 44%, rgb(12 40 48 / 0));
  pointer-events: none;
}
/* Der Gruss auf dem Bild - auf einer Blogkarte ist das der Ort des
   Eintrags, also die Ueberschrift des Beitrags.

   Sie stand hier lange in der Kursive, weil die Kursive auf einer
   echten Karte der Ton ist. Auf der Blogseite war sie aber die
   EINZIGE Ueberschrift, die nicht wie die Seitenueberschrift aussah:
   die Posttitel sind aufrecht, der Gruss war geneigt. Genau das war
   der Punkt "Schriftart wie die Seitenueberschrift".

   Also aufrecht und --titel. Die Kursive bleibt der Akzent fuer ein
   Wort in einer Ueberschrift (.leise) - dort ist sie ein Hervorheben,
   hier waere sie eine zweite Stimme. Der Schatten haelt den Text auf
   jedem Foto lesbar, hell wie dunkel. */
.fotokarte-gruss {
  position: absolute;
  z-index: 1;
  left: 5%; right: 13%; bottom: 5%;
  margin: 0;
  font-family: var(--titel);
  font-style: normal;
  font-size: clamp(1.6rem, 6.5vw, 3rem);
  line-height: .98;
  color: var(--papier);
  text-shadow: 0 2px 14px rgb(12 79 92 / .85), 0 1px 3px rgb(20 20 15 / .7);
  pointer-events: none;
}

.fotokarte-lupe {
  position: absolute; right: 10px; top: 10px; z-index: 4;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgb(251 247 237 / .92); color: var(--tinte);
  backdrop-filter: blur(6px);
  cursor: zoom-in; padding: 0;
  box-shadow: var(--schatten-1);
  transition: transform var(--t-mikro) var(--e-haupt);
}
.fotokarte-lupe svg { width: 19px; height: 19px; }
.fotokarte-lupe:hover { transform: scale(1.06); }
.fotokarte-lupe:active { transform: scale(.94); }

.fotokarte-hinten {
  position: relative;
  display: grid;
  gap: var(--s3);
  height: 100%;
  background: var(--papier);
  border-radius: 10px;
  box-shadow: var(--schatten-2);
  padding: var(--s4);
}
@media (min-width: 560px) {
  .fotokarte-hinten { grid-template-columns: minmax(0, 1.25fr) minmax(140px, .75fr); gap: var(--s4); }
  /* Der senkrechte Strich in der Mitte - die Trennung zwischen
     Mitteilung und Adresse, die jede Karte hat. */
  .fotokarte-rand { border-left: var(--kante-fein) solid var(--stein); padding-left: var(--s3); }
}

.fotokarte-nachricht { display: grid; gap: var(--s2); align-content: start; min-width: 0; }
/* Die Posttitel auf der Rueckseite. Steht als h3 schon auf --titel,
   wird hier aber ausdruecklich festgeschrieben: das ist die
   Seitenueberschriftenschrift, dieselbe wie bei BLOG und GALERIE,
   und das soll auch so bleiben, wenn sich die h3-Regel einmal
   aendert. */
.fotokarte-titel {
  font-family: var(--titel); font-style: normal; font-weight: 400;
  font-size: clamp(1.1rem, 3.4vw, 1.5rem);
}
/* Linierte Zeilen wie auf einer echten Karte. Die Zeilenhoehe des
   Textes und der Abstand der Linien sind derselbe Wert - sonst
   laeuft die Schrift nach ein paar Zeilen aus den Linien heraus. */
.fotokarte-text {
  --zeile: 1.55rem;
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: .96rem;
  line-height: var(--zeile);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--zeile) - 1.5px),
    var(--stein) calc(var(--zeile) - 1.5px),
    var(--stein) var(--zeile)
  );
  background-position: 0 .12em;
}
.fotokarte-signatur {
  margin: 0; font-family: var(--mono); font-size: var(--f-winzig);
  text-transform: uppercase; letter-spacing: .04em; color: var(--tinte-weich); line-height: 1.7;
}

.fotokarte-rand { display: grid; gap: var(--s3); align-content: start; }
.fotokarte-marke { position: relative; width: 88px; justify-self: end; }
.fotokarte-briefkarte { width: 100%; }
.fotokarte-stempel {
  position: absolute; z-index: 3;
  left: -34%; top: 14%; width: 108%;
  color: var(--korall); opacity: .9; pointer-events: none;
}
.fotokarte-stempel svg { width: 100%; height: auto; transform: rotate(var(--dreh, -10deg)); }

.fotokarte-adresse { display: grid; gap: .1rem; }
.fotokarte-zeile {
  margin: 0; font-family: var(--mono); font-size: var(--f-winzig);
  text-transform: uppercase; letter-spacing: .04em; color: var(--tinte-weich);
  border-bottom: 1.5px dotted var(--stein); padding-bottom: .4rem; min-height: 1.6rem;
}
.fotokarte-leer { border-bottom-color: var(--stein); }
.fotokarte-extra { justify-self: start; }

.marke-mit-quelle { display: grid; gap: .4rem; }
.bild-nachweis { margin: 0; font-family: var(--mono); font-size: .6rem; letter-spacing: .03em; color: var(--tinte-weich); }
.bild-nachweis a { color: inherit; }

.karte-rueck { background: var(--papier); border: var(--kante) solid var(--stein); border-radius: 10px; padding: var(--s3); display: grid; gap: var(--s3); height: 100%; align-content: start; }
.karte-notiz { font-size: 1rem; line-height: 1.55; margin: 0; }
.karte-tipp { background: var(--papier-tief); border-radius: 8px; padding: var(--s2) var(--s3); margin: 0; font-size: .92rem; }
/* Der Knopf, mit dem die Postkarte umgedreht wird. Bis vor kurzem war
   das nur eine Zeile Schrift mit einem Strich dahinter und sah damit
   aus wie eine Fussnote, nicht wie eine Handlung. Er ist jetzt ein
   Knopf ueber die volle Kartenbreite, damit man ihn auf dem Handy
   sofort findet - und damit er nichts mehr mit der Zeile "Kategorie"
   darunter verwechselt, die es vorher fast ueberlappte. */
.karte-drehen {
  display: flex; align-items: center; justify-content: center; gap: .5em;
  width: 100%; margin-top: var(--s3); min-height: 46px;
  padding: .55rem .9rem;
  background: var(--papier); color: var(--tinte);
  border: var(--kante) solid var(--tinte); border-radius: 10px;
  font-family: var(--mono); font-size: var(--f-winzig); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 3px 0 var(--tinte);
  transition: transform var(--t-mikro) var(--e-haupt), box-shadow var(--t-mikro) var(--e-haupt), background var(--t-mikro) var(--e-haupt), color var(--t-mikro) var(--e-haupt);
}
.karte-drehen:hover { background: var(--lago); color: var(--papier); }
.karte-drehen:active { transform: translateY(3px); box-shadow: 0 0 0 var(--tinte); }
/* Das Umdrehen-Symbol. Es stand vorher als punktierter Strich dahinter
   und ging in der Kategorie-Zeile unter - deshalb ein eigenes Zeichen. */
.karte-drehen::after { content: "↻"; font-size: 1.15em; line-height: 1; letter-spacing: 0; }

/* ============================================================
   Das Textfenster der Hauptziele

   Ein Hauptziel traegt bis zu viertausend Zeichen in Abschnitten,
   dazu die Liste der Quellen. Auf der Rueckseite einer Marke
   waere das ein Streifen Text, den niemand liest - also steht es
   hier: ein Blatt in der Mitte des Bildschirms, das man hoch- und
   herunterlaeuft und das die ganze Zeit offen bleibt, was
   darunter liegt.

   Der Grund ist Papier, nicht Glas: dasselbe Blatt wie die Marke,
   nur gross. Die Schrift bleibt die der Seite, damit der Text
   nicht wie ein Fremdkoerper wirkt.
   ============================================================ */

.notizblatt {
  /* Kein rand, kein eigener Grund am dialog-Element selbst: das
     Blatt unten traegt beides, sonst faegt der Hintergrund des
     Dialogs an den Ecken mit. */
  border: 0; padding: 0; background: none;
  max-width: min(94vw, 46rem);
  max-height: 90dvh;
  /* Ohne diese Breite weicht der Dialog auf shrink-to-fit und
     das Blatt waere auf dem Handy so breit wie der laengste
     Absatz, statt so breit wie das Fenster. */
  width: min(94vw, 46rem);
  overflow: visible;
  color: var(--tinte);
}
.notizblatt::backdrop { background: rgb(12 79 92 / .82); }

/* Solange ein Fenster offen ist, dreht sich die Seite darunter
   nicht mehr. Ohne das laesst man auf dem Handy beim Scrollen
   durch den Text das Blatt dahinter mitwandern. */
html:has(dialog[open]) { overflow: hidden; }

.notizblatt-blatt {
  display: grid;
  grid-template-rows: auto 1fr;
  max-height: 90dvh;
  background: var(--papier);
  border: var(--kante) solid var(--tinte);
  border-radius: 14px;
  box-shadow: var(--schatten-3);
  overflow: hidden;
  text-align: left;
}

/* ---- Kopf: Fahne, Name, Ort, Schliessen ---- */

.notizblatt-kopf {
  position: relative;
  padding: var(--s4) var(--s4) var(--s3);
  padding-right: calc(var(--s4) + 2.6rem);
  background: var(--papier-tief);
  border-bottom: var(--kante-fein) dashed var(--stein);
}
.notizblatt-fahne {
  display: flex; align-items: center; gap: .45em;
  margin: 0 0 var(--s2);
  font-family: var(--mono); font-size: var(--f-winzig); font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--tinte-weich);
}
.notizblatt-fahne-punkt { opacity: .5; }
.notizblatt-titel {
  margin: 0;
  font-family: var(--titel); font-style: normal; font-weight: 400;
  font-size: clamp(1.9rem, 1.2rem + 3vw, 3rem);
  line-height: 1.05; letter-spacing: 0;
}
.notizblatt-ort {
  margin: .3rem 0 0;
  font-family: var(--mono); font-size: var(--f-klein);
  color: var(--tinte-weich);
}
.notizblatt-schliessen-form { display: contents; }
.notizblatt-schliessen {
  position: absolute; top: var(--s3); right: var(--s3);
  display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  background: var(--papier); color: var(--tinte);
  border: var(--kante) solid var(--tinte); border-radius: 999px;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: background var(--t-mikro) var(--e-haupt), color var(--t-mikro) var(--e-haupt), transform var(--t-mikro) var(--e-haupt);
}
.notizblatt-schliessen:hover { background: var(--lago); color: var(--papier); }
.notizblatt-schliessen:active { transform: scale(.93); }

/* Der Spruch aus dem PDF-Titel: ein Obertitel, kein Absatz. Deshalb
   steht er zwischen Kopf und Text und nicht mitten im ersten Absatz. */
.notizblatt-spruch {
  margin: 0; padding: var(--s3) var(--s4) 0;
  font-family: var(--titel); font-style: italic; font-weight: 400;
  font-size: clamp(1.15rem, 1rem + 1vw, 1.5rem); line-height: 1.2;
  color: var(--tinte-weich);
}

/* ---- Der Text selbst. Das Blatt scrollt, der Kopf bleibt stehen. ---- */

.notizblatt-text {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s3) var(--s4) var(--s5);
}
.notiz-abschnitt { margin-bottom: var(--s4); }
.notiz-abschnitt h3 {
  margin: 0 0 var(--s2);
  font-family: var(--mono); font-size: var(--f-winzig); font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinte-weich);
  padding-bottom: .3rem;
  border-bottom: var(--kante-fein) solid var(--stein);
}
.notiz-abschnitt p { margin: 0 0 var(--s3); font-size: 1.02rem; line-height: 1.62; }
.notiz-abschnitt ul { margin: 0 0 var(--s3); padding: 0; list-style: none; display: grid; gap: var(--s2); }
.notiz-abschnitt li {
  position: relative;
  padding-left: 1.35em;
  font-size: 1rem; line-height: 1.58;
}
/* Der Punkt ist eine Zitrone in der Zeilenhoehe, kein Aufzaehlungs-
   zeichen aus der Schrift - der sieht in der Grotesk nach Rechner aus. */
.notiz-abschnitt li::before {
  content: ""; position: absolute; left: .15em; top: .52em;
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--zitrone);
  box-shadow: 0 0 0 var(--kante-fein) var(--tinte);
}

.notizblatt-weg {
  display: grid; gap: 0;
  margin: var(--s4) 0 var(--s4);
  padding-top: var(--s1);
  border-top: var(--kante-fein) dashed var(--stein);
}

/* ---- Quellen: ganz unten, klein, nummeriert ---- */

.notiz-quellen {
  margin-top: var(--s4);
  padding: var(--s3) var(--s3) var(--s3);
  background: var(--papier-tief);
  border-radius: 10px;
}
.notiz-quellen h3 {
  margin: 0 0 .1rem;
  font-family: var(--mono); font-size: var(--f-winzig); font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--tinte-weich);
}
.notiz-quellen p { margin: 0 0 var(--s2); font-size: .8rem; }
.notiz-quellen ol {
  margin: 0; padding-left: 1.4em;
  display: grid; gap: .3rem;
  font-size: .82rem; line-height: 1.45;
}
.notiz-quellen li { padding-left: .1em; }
.notiz-quellen a { color: var(--lago); text-decoration-thickness: 1px; text-underline-offset: 2px; overflow-wrap: anywhere; }
.notiz-quellen a:hover { color: var(--akzent); }

/* ---- Der Knopf auf der Marke ---- */

/* Auf der Marke heisst er nicht "Notiz" und sieht auch nicht aus wie
   der zum Umdrehen: er fuehrt woanders hin, und ein Pfeil, der von
   einem Blatt auf ein anderes weist, sagt das schneller als ein Wort. */
.karte-lesen::after { content: none; }
.karte-lesen-symbol { width: 1.1em; height: 1.1em; flex: none; }

/* Auf dem Handy ist ein Blatt mit 4rem Rand zu schmal zum Lesen - die
   Zeilen werden dann so kurz, dass man den Absatz zweimal liest. Das
   Blatt raeumt die Raender auf und nutzt die Hoehe besser. */
@media (max-width: 620px) {
  .notizblatt { width: 100vw; max-width: 100vw; max-height: 100dvh; }
  .notizblatt-blatt { max-height: 100dvh; border-radius: 0; border-left: 0; border-right: 0; border-top: 0; }
  .notizblatt-kopf { padding: var(--s3) var(--s3) var(--s3); padding-right: calc(var(--s3) + 2.8rem); }
  .notizblatt-text { padding: var(--s3) var(--s3) var(--s5); }
  .notizblatt-spruch { padding: var(--s3) var(--s3) 0; }
  .notiz-abschnitt p { font-size: 1rem; }
}


/* Leaflet */
.nadel svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 2px rgb(20 20 15 / .4)); }
.nadel.aktiv { z-index: 900 !important; }
.nadel.aktiv svg { transform: scale(1.22); transform-origin: 50% 100%; }
.leaflet-container { font-family: var(--ui); background: var(--papier-tief); }
.leaflet-container a { color: var(--lago); }
.leaflet-control-zoom a { background: var(--papier) !important; color: var(--tinte) !important; border-color: var(--tinte) !important; font-weight: 700; }
.leaflet-control-attribution { font-size: 9px !important; background: rgb(251 247 237 / .84) !important; }
@media (min-width: 1000px) { .leaflet-left { margin-left: min(432px, 39vw); } }

/* ============================================================
   Blog, Galerie, Formulare
   ============================================================ */

.seiten-kopf { display: grid; gap: var(--s4); padding-block: var(--s6) var(--s4); }
@media (min-width: 880px) { .seiten-kopf { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s6); } }
.seiten-kopf h1 { font-size: var(--f-gross); text-transform: uppercase; }

.seiten-kopf-zahlen dl { display: flex; flex-wrap: wrap; gap: var(--s4); margin: 0; }
.seiten-kopf-zahlen dt { font-family: var(--mono); font-size: var(--f-winzig); text-transform: uppercase; letter-spacing: .05em; color: var(--leise); }
.seiten-kopf-zahlen dd { margin: .2rem 0 0; font-family: var(--titel); font-weight: 400; font-size: 2.4rem; line-height: 1; letter-spacing: -.028em; }
.seiten-kopf-zahlen dd small { font-family: var(--mono); font-size: .66rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--leise); display: block; margin-top: .25rem; }

.strom { display: grid; gap: var(--s4); }
@media (min-width: 900px) { .strom { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.eintrag {
  position: relative; display: grid; gap: var(--s3);
  background: var(--papier); color: var(--tinte);
  border: var(--kante) solid var(--stein); border-radius: 12px;
  padding: var(--s4); box-shadow: var(--schatten-2);
}
.eintrag h2 { font-size: 1.5rem; margin-bottom: var(--s2); }
.eintrag-text { white-space: pre-wrap; }
.eintrag-signatur { font-family: var(--mono); font-size: var(--f-winzig); text-transform: uppercase; letter-spacing: .04em; color: var(--tinte-weich); margin: 0; }
.eintrag-stempel { position: absolute; top: var(--s2); right: var(--s2); width: 78px; color: var(--korall); opacity: .9; pointer-events: none; }
.eintrag-stempel svg { transform: rotate(var(--dreh, 9deg)); }
.eintrag-bild { border-radius: 8px; overflow: hidden; border: var(--kante) solid var(--stein); }
.eintrag-rechts { display: grid; gap: var(--s2); justify-items: start; }

.schreiben { background: var(--papier); color: var(--tinte); border: var(--kante) solid var(--stein); border-radius: 12px; padding: var(--s4); box-shadow: var(--schatten-2); }
.schreiben h2 { margin-bottom: var(--s3); }

.feld { display: grid; gap: .35rem; margin-bottom: var(--s3); }
.feld label { font-family: var(--mono); font-size: var(--f-winzig); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.feld-paar { display: grid; gap: var(--s3); }
@media (min-width: 640px) { .feld-paar { grid-template-columns: 1fr 1fr; } }

.notiz-kasten { border: var(--kante) solid var(--stein); border-radius: 12px; padding: var(--s3); background: var(--papier); color: var(--tinte); display: grid; gap: var(--s2); }
.notiz-kasten.gut { background: var(--zitrone); }
.notiz-kasten.schlecht { border-color: var(--korall); box-shadow: var(--schatten-1); }

.leer { border: var(--kante-fein) dashed var(--stein); border-radius: 12px; padding: var(--s5) var(--s3); display: grid; gap: var(--s3); justify-items: start; color: var(--leise); }

.absender-wahl { display: flex; gap: var(--s2); align-items: flex-start; border: var(--kante) solid var(--stein); border-radius: 10px; padding: var(--s2) var(--s3); margin-bottom: var(--s3); cursor: pointer; }
.absender-wahl input { width: 22px; height: 22px; margin-top: .2rem; accent-color: var(--korall); flex: none; }
.absender-wahl small { display: block; color: var(--tinte-weich); font-size: .85rem; line-height: 1.4; }

/* Die Galerie als Mauer.

   Vorher stand hier .karten-raster: ein echtes Raster, also fuer
   jede Zelle dieselbe Hoehe. Ein Hochformat darin wurde gestutzt -
   genau das, was die Seite vorher mit den Fotos machte und warum sie
   nach Postkarten aussah.

   Columns statt Grid: der Browser bricht um und balanced die
   Spalten selbst. Kein JavaScript, keine gemessene Bildhoehe, und
   die Reihenfolge bleibt von oben nach unten lesbar.

   Die Bilder bekommen kein festes Seitenverhaeltnis. Waere es so,
   waere zwar das Raster weg, aber der Aufbau waere ein Springen:
   jede Zeile wuerde ihre Hoehe aendern, sobald ein Bild da ist. */
.galerie-mauer {
  columns: 3 15rem;
  column-gap: var(--s4);
}
@media (max-width: 520px) { .galerie-mauer { columns: 2 9rem; column-gap: var(--s3); } }

/* Verhindert, dass eine Karte an der Spaltengrenze mitten durch ein
   Bild geschnitten wird. */
.galerie-bild {
  margin: 0 0 var(--s4);
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: inline-block;   /* letzter Absatzumbruch in der Spalte */
  width: 100%;
}
.galerie-mauer .galerie-bild:last-child { margin-bottom: 0; }

.galerie-knopf {
  display: block; width: 100%; padding: 0; margin: 0;
  border: var(--kante) solid var(--stein); border-radius: 10px;
  background: var(--papier); overflow: hidden; cursor: zoom-in;
  box-shadow: var(--schatten-1);
  transition: transform .18s ease, box-shadow .18s ease;
}
.galerie-knopf:hover { transform: translateY(-2px); box-shadow: var(--schatten-2); }
.galerie-knopf:focus-visible { outline: 3px solid var(--lago); outline-offset: 3px; }
.galerie-knopf img { display: block; width: 100%; height: auto; }

.galerie-bildfuss {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2); padding-top: .45rem;
}
/* Der Bildtitel in derselben Antiqua wie die Blogbeitraege. Vorher war
   er eine Bildunterschrift im Kleingedruckten und las sich wie eine
   Klemme, nicht wie ein Titel. */
.galerie-bildtitel {
  font-family: var(--titel); font-size: 1.05rem; line-height: 1.16;
  color: var(--tinte); text-wrap: balance;
}
.galerie-bildgruppe {
  font-family: var(--mono); font-size: var(--f-winzig); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--f, var(--tinte-weich));
}

.galerie-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s3); }
@media (min-width: 700px) { .galerie-raster { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s4); } }

/* Postkarten brauchen Breite - eine Karte, die schmaler ist als eine
   Handflaeche, liest sich nicht mehr als Karte. Deshalb hier
   deutlich groessere Spalten als im Album. */
.karten-raster { display: grid; gap: var(--s5); grid-template-columns: 1fr; }
@media (min-width: 720px) { .karten-raster { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--s6) var(--s5); } }
@media (min-width: 1200px) { .karten-raster { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); } }

.foto-feld { margin: 0; }
.foto-huelle { position: relative; }
.foto-lupe { position: absolute; inset: 0; z-index: 5; border: 0; background: none; padding: 0; cursor: zoom-in; border-radius: var(--marke-radius); }
.foto-lupe:focus-visible { outline-offset: 4px; }
.foto-marke .marke-blatt { aspect-ratio: 4 / 5; }
.gruppen-fahne {
  position: absolute; z-index: 6; left: 10px; top: 10px;
  font-family: var(--mono); font-size: var(--f-winzig); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  background: var(--f, var(--lago)); color: var(--papier);
  border: var(--kante) solid var(--stein); padding: .2em .48em; border-radius: 3px;
  max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  pointer-events: none;
}
.foto-bu { font-size: .88rem; margin: var(--s2) 0 0; font-weight: 600; }
.foto-bu > span { display: block; font-family: var(--mono); font-size: var(--f-winzig); text-transform: uppercase; letter-spacing: .04em; color: var(--tinte-weich); font-weight: 500; margin-top: .2em; }
.foto-bu .adresszeile { padding-block: .3rem; }

.leuchtkasten { border: 0; background: none; padding: 0; max-width: min(94vw, 1100px); max-height: 92dvh; }
.leuchtkasten::backdrop { background: rgb(12 79 92 / .93); }
.leuchtkasten img { max-height: 82dvh; width: auto; margin-inline: auto; border: 4px solid var(--papier); border-radius: 4px; }
.leuchtkasten p { color: var(--papier); text-align: center; font-family: var(--mono); font-size: var(--f-klein); margin: var(--s2) 0 0; }

.formular-karte {
  display: grid; gap: var(--s5);
  background: var(--papier); color: var(--tinte);
  border: var(--kante) solid var(--stein); border-radius: 14px;
  padding: var(--s4); box-shadow: var(--schatten-2);
}
@media (min-width: 880px) {
  .formular-karte { grid-template-columns: minmax(0, 1fr) minmax(210px, 260px); gap: var(--s6); padding: var(--s5); }
  .formular-rand { order: 1; }
}
.formular-rand { display: grid; gap: var(--s3); align-content: start; justify-items: start; }
.formular-rand > .marke { width: 100%; }
.formular-rand .detail-meta { width: 100%; }

.konto-titel { font-size: 1.35rem; margin: var(--s6) 0 var(--s3); }
.pass-stand {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  margin-top: var(--s4); padding: var(--s3);
  border: var(--kante) solid var(--stein); border-radius: 12px; box-shadow: var(--schatten-1);
}
.pass-stand > div { margin-right: auto; }

.gruppen-karte { display: grid; gap: var(--s3); border: var(--kante) solid var(--stein); border-radius: 12px; padding: var(--s3); background: var(--papier); box-shadow: var(--schatten-1); }
@media (min-width: 620px) { .gruppen-karte { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.gruppen-name { font-family: var(--titel); font-weight: 400; font-size: 1.8rem; line-height: 1; letter-spacing: -.02em; margin: 0; }
.gruppen-qr { display: grid; justify-items: center; gap: .4rem; }
.gruppen-qr svg { width: 132px; height: 132px; }
.gruppen-code { font-family: var(--mono); font-weight: 700; font-size: .95rem; letter-spacing: .08em; margin: 0; }
.gruppen-link { font-family: var(--mono); font-size: var(--f-winzig); color: var(--tinte-weich); overflow-wrap: anywhere; }
.gruppen-wand { display: grid; gap: var(--s2); text-decoration: none; color: inherit; }
.gruppen-wand-bilder { display: flex; gap: 4px; }
.gruppen-wand-bilder img { width: 58px; height: 58px; object-fit: cover; border: var(--kante) solid var(--stein); border-radius: 4px; }
.gruppen-wand-titel { font-size: 1.15rem; margin: var(--s4) 0 var(--s2); }

/* ============================================================
   Fusszeile — die Poststelle
   ============================================================ */

/* Heller Fuss statt schwarzem Block. Er schliesst die Seite mit einer
   Kante ab, nicht mit einem Loch - und auf einem Handy in der Sonne
   ist eine dunkle Flaeche ohnehin das Erste, was blendet. */
.fuss {
  background: var(--papier-tief);
  color: var(--tinte);
  border-top: var(--kante-fein) solid var(--stein);
  margin-top: var(--s6);
  padding-block: var(--s5) var(--s4);
}
.fuss a { color: var(--lago); }
.fuss a:hover { color: var(--korall); }
.fuss h2 { font-size: 1.15rem; color: var(--tinte); margin-bottom: var(--s2); }
/* Der Name schliesst die Seite ab, er soll sie nicht eroeffnen. Frueher
   stand er in 3.4rem - gross genug, um nach einer Bandwerbung zu
   riechen. */
.fuss-titel { font-family: var(--titel); font-weight: 400; font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1; letter-spacing: -.02em; color: var(--tinte); margin: 0 0 var(--s2); }
.fuss-spruch { max-width: 34ch; color: var(--tinte-weich); margin: 0; }
.fuss-raster { display: grid; gap: var(--s5); }
@media (min-width: 760px) { .fuss-raster { grid-template-columns: 1.6fr 1fr; gap: var(--s6); align-items: start; } }
.fuss-wer { margin: 0 0 var(--s2); font-size: .92rem; color: var(--tinte-weich); }
.fuss-wer strong { color: var(--tinte); }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.fuss-marke { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s4); border-top: var(--kante-fein) solid var(--stein); margin-top: var(--s5); padding-top: var(--s3); }
.fuss-marke-text, .fuss-marke-link { font-family: var(--mono); font-size: var(--f-winzig); text-transform: uppercase; letter-spacing: .05em; margin: 0; }
.fuss-marke-link { display: flex; gap: var(--s3); }
.fuss-fein { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); margin-top: var(--s3); font-size: .72rem; color: var(--tinte-weich); }
.fuss-fein a { color: var(--tinte-weich); }

/* ============================================================
   Der See als Anzeige
   ============================================================ */

.seebild { width: 100%; height: auto; max-height: 58dvh; }
.seebild-wasser { fill: rgb(23 184 206 / .22); }
.seebild-ufer { fill: none; stroke: var(--lago); stroke-width: 3.5; }
.seebild-marke { fill: var(--papier); stroke: var(--tinte); stroke-width: 3; }
.seebild-marke.voll { fill: var(--zitrone); }
.seebild-marke.zu { stroke: var(--stein); fill: var(--papier); }
.seebild-schrift text { font-family: var(--mono); font-size: 26px; font-weight: 700; fill: var(--leise); letter-spacing: 2px; }
.band-lago .seebild-wasser { fill: rgb(251 247 237 / .1); }
.band-lago .seebild-ufer { stroke: var(--zitrone); }
.band-lago .seebild-marke { fill: var(--lago); stroke: var(--papier); }
.band-lago .seebild-marke.voll { fill: var(--zitrone); stroke: var(--papier); }

/* ============================================================
   Auftritt — Startlagen stehen in JavaScript, nie hier
   ============================================================ */

.kein-js [data-auftritt],
.kein-js [data-teilen] { opacity: 1; transform: none; }

/* Abdeckung waehrend des Ladens. Sie liegt genau so lange, bis
   app.js die Startlagen gesetzt hat. Kommt das Skript nicht an,
   nimmt ein Zeitschalter im Seitenkopf sie nach 2,5 Sekunden
   von selbst weg. */
.js.laden [data-auftritt],
.js.laden [data-teilen] { opacity: 0; }

.zeile { padding-bottom: .06em; }

/* ============================================================
   DIE BLENDE — der Seitenwechsel
   ============================================================ */

.blende {
  position: fixed; inset: 0; z-index: 300;
  background: var(--lago);
  transform: translateY(100%);
  pointer-events: none; visibility: hidden;
  transition: transform .28s var(--e-haupt), visibility 0s .28s;
}
.blende::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 90px; height: 90px; margin: -45px 0 0 -45px;
  border: 3.5px solid var(--zitrone); border-radius: 50%;
  opacity: 0; transform: scale(.4);
  transition: opacity .2s linear, transform .3s var(--e-stempel);
}
.blende-zu { transform: translateY(0); visibility: visible; transition: transform .28s var(--e-haupt), visibility 0s; }
.blende-zu::after { opacity: 1; transform: scale(1); }
.blende-hoch { transform: translateY(-100%); transition: transform .42s var(--e-haupt), visibility 0s .42s; }
.blende-hoch::after { opacity: 0; transform: scale(1.6); }

/* ============================================================
   Weniger Bewegung
   ============================================================ */

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

/* ============================================================
   Das Backend

   Es traegt dieselben Tokens wie die Vorderseite, aber nichts
   von ihrer Lautstaerke: hier arbeitet die Leitung, und Arbeit
   braucht Ruhe. Keine Marken, keine Stempel, keine Farbbaender -
   nur Tabellen, Felder und dieselben Knoepfe.
   ============================================================ */

.riss { border: 0; height: 0; border-top: var(--kante-fein) dashed var(--stein); margin-block: var(--s5); }

.tafel {
  background: var(--papier);
  border: var(--kante-fein) solid var(--stein);
  border-radius: 16px;
  padding: var(--s4);
  margin-bottom: var(--s4);
  box-shadow: var(--schatten-1);
}
.tafel > h2 { margin-bottom: var(--s3); }

/* ---------------------------------------------- Backend

   Das Backend ist eine einzige lange Seite mit acht Bereichen. Wer
   die Reihenfolge nicht auswendig kann, scrollt suchend - deshalb
   eine Sprungleiste, die oben klebt. Sie sitzt unter der Kopfzeile
   der Seite, nicht darueber. */

.admin-kopf { padding-block: var(--s6) var(--s4); }
.admin-kopf h1 { font-size: var(--f-gross); }

.admin-sprung {
  position: sticky;
  top: var(--kopf-hoehe);
  z-index: 40;
  background: rgb(251 247 237 / .94);
  backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: var(--kante-fein) dashed var(--stein);
  margin-bottom: var(--s5);
}
.admin-sprung-innen {
  display: flex; gap: .4rem;
  overflow-x: auto; scrollbar-width: none;
  padding-block: .6rem;
}
.admin-sprung-innen::-webkit-scrollbar { display: none; }
.admin-sprung a {
  flex: none;
  padding: .42rem .85rem .38rem;
  border-radius: 999px;
  border: var(--kante-fein) solid var(--stein);
  background: var(--papier);
  color: var(--tinte);
  text-decoration: none;
  font-family: var(--mono); font-size: var(--f-winzig); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--t-mikro) linear, border-color var(--t-mikro) linear;
}
.admin-sprung a:hover { background: var(--tinte); border-color: var(--tinte); color: var(--papier); }

/* Damit ein Sprungziel nicht unter der klebenden Leiste landet. */
.admin-sprung ~ * [id],
[id="reise"], [id="ziel"], [id="konten"], [id="gruppen"],
[id="lvl"], [id="orte"], [id="beitraege"], [id="zugang"] {
  scroll-margin-top: calc(var(--kopf-hoehe) + 4rem);
}

.admin-zahl {
  font-family: var(--mono); font-size: var(--f-klein); font-weight: 500;
  color: var(--tinte-weich);
}

.zugangscode {
  font-family: var(--mono); font-size: 1.5rem; font-weight: 700;
  letter-spacing: .08em;
  margin: 0 0 var(--s3);
  padding: var(--s2) var(--s3);
  background: var(--papier-tief);
  border-radius: 10px;
  color: var(--tinte);
  overflow-wrap: anywhere;
}

.admin-raster { display: grid; gap: var(--s4); }
@media (min-width: 1000px) { .admin-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }

.admin-tabelle { width: 100%; border-collapse: collapse; font-size: .92rem; }
.admin-tabelle th,
.admin-tabelle td { text-align: left; padding: .55rem .5rem; border-bottom: 1.5px solid var(--stein); vertical-align: middle; }
.admin-tabelle th {
  font-family: var(--mono); font-size: var(--f-winzig); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--tinte-weich);
}
.admin-tabelle .rechts,
.admin-tabelle td.rechts { text-align: right; }
/* Neben der Teilnehmerzahl im Backend: der Anteil der Haken, die nicht
   mitzaehlen (Pruefkonten, gesperrte Konten). Klein und leise, aber
   sichtbar - sonst liest man einen Testhaken als Teilnahme. */
.admin-hinweis-zeilen {
  margin-left: .4rem; padding: .1rem .35rem; border-radius: 999px;
  background: var(--papier-tief); color: var(--tinte-weich);
  font-family: var(--mono); font-size: var(--f-winzig); white-space: nowrap;
}
.rechts { text-align: right; }

.bild-vorschau {
  width: 100%; max-width: 220px; aspect-ratio: 3 / 2;
  object-fit: cover; border: var(--kante) solid var(--stein); border-radius: 8px;
}

.gruppen-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: .5rem 0; border-bottom: 1.5px solid var(--stein); }

.lvl-wahl {
  display: grid; gap: .3rem; padding: var(--s3);
  border: var(--kante-fein) solid var(--stein); border-radius: 10px; cursor: pointer;
}
.lvl-wahl.an { border-color: var(--zitrone-tief); background: var(--zitrone); box-shadow: var(--schatten-1); }
.lvl-wahl strong { font-family: var(--laut); font-weight: 700; }
.lvl-wahl small { color: var(--tinte-weich); font-size: .84rem; line-height: 1.4; }

.reihe-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.reihe-liste li { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s2); align-items: center; padding: .4rem .5rem; border: 1.5px solid var(--stein); border-radius: 8px; }
.reihe-name { font-weight: 700; font-size: .92rem; }
.reihe-zustand { font-family: var(--mono); font-size: var(--f-winzig); color: var(--tinte-weich); text-transform: uppercase; }
.reihe-liste input[type="number"] { width: 5rem; min-height: 40px; padding: .3rem .5rem; font-family: var(--mono); border: var(--kante) solid var(--stein); border-radius: 6px; background: var(--papier); color: var(--tinte); }

/* ============================================================
   Druck
   ============================================================ */

@media print {
  .kopf, .leiste, .fuss, .knopf, .vollbild-knopf, .blende { display: none !important; }
  body { background: #fff; padding: 0; }
  .marke::after, .bogen, .eintrag, .schreiben { box-shadow: none; }
}

/* ============================================================
   Das Auftragsband

   Eine Zeile unter dem Held: was als naechstes ansteht. Sie war
   im ersten Entwurf der Seite da, ist beim Umbau verschwunden
   und beantwortet die einzige Frage, die man beim Aufmachen hat.
   ============================================================ */

.auftrag-band { margin-top: calc(var(--s5) * -1); margin-bottom: var(--s5); }
.auftrag-zeile {
  display: flex; align-items: center; gap: var(--s2) var(--s3);
  flex-wrap: wrap;
  text-decoration: none; color: inherit;
  padding: var(--s3) var(--s4);
  border-radius: 14px;
  background: var(--papier-tief);
  border: var(--kante-fein) dashed var(--stein);
  transition: background var(--t-mikro) var(--e-haupt), border-color var(--t-mikro) var(--e-haupt);
}
.auftrag-zeile:hover { background: var(--papier); border-color: var(--tinte-weich); }
.auftrag-schild { color: var(--korall-tief); }
.auftrag-name { font-family: var(--titel); font-size: 1.34rem; line-height: 1.05; }
.auftrag-ort { color: var(--tinte-weich); }
.auftrag-pfeil { margin-left: auto; width: 26px; flex: none; color: var(--tinte-weich); }
.auftrag-zeile:hover .auftrag-pfeil { color: var(--korall-tief); }

/* ============================================================
   Die drei Schritte

   Erst lagen sie als Stapel uebereinander (hat geflackert), dann
   nackt auf dem Papier mit einer gestrichelten Naht dazwischen -
   und das sah aus, als haette jemand vergessen, sie fertig zu
   machen. Jetzt sind es Karten: eigenes Papier, weicher Schatten,
   und die Nummer sitzt als Plakette auf der Oberkante.
   ============================================================ */

.schritte {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s4);
}
.schritt {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s2) var(--s4);
  align-items: start;
  align-content: start;
  padding: var(--s5) var(--s4) var(--s4);
  background: var(--papier);
  border: var(--kante-fein) solid var(--stein);
  border-radius: 18px;
  box-shadow: var(--schatten-1);
  transition: transform var(--t-normal) var(--e-haupt), box-shadow var(--t-normal) var(--e-haupt);
}
.schritt:hover { transform: translateY(-3px); box-shadow: var(--schatten-2); }

/* Die Nummer sitzt auf der Kante, halb drin und halb drauf - wie
   eine Nummer, die auf eine Karteikarte geklebt wurde. */
.schritt-nr {
  position: absolute;
  left: var(--s4); top: 0;
  transform: translateY(-50%);
  display: grid; place-items: center;
  min-width: 2.1rem; height: 1.6rem;
  padding: 0 .5rem;
  border-radius: 999px;
  background: var(--tinte); color: var(--papier);
  font-family: var(--mono); font-size: var(--f-winzig); font-weight: 700;
  letter-spacing: .1em; font-variant-numeric: tabular-nums;
}
.schritt-symbol {
  grid-row: 1 / 3; grid-column: 1;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--zitrone);
  color: var(--tinte);
}
.schritt-symbol svg { width: 24px; height: 24px; }
.schritt-titel { grid-column: 2; font-size: 1.4rem; align-self: center; }
.schritt-text { grid-column: 2; margin: 0; color: var(--tinte-weich); max-width: 46ch; }
.schritt-knopf { grid-column: 2; margin: var(--s2) 0 0; }

@media (min-width: 900px) {
  .schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
  .schritt {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--s5) var(--s4) var(--s4);
    gap: var(--s3);
  }
  .schritt-symbol { grid-row: auto; grid-column: 1; }
  .schritt-titel, .schritt-text, .schritt-knopf { grid-column: 1; }
}

/* ============================================================
   DIE BRIEFMARKE

   Rueckmeldung: "Bei den Briefmarken find ich die Border UNFASSBAR
   ugly. Es soll schon wie Briefmarken aussehen."

   Beides stimmt, und es widerspricht sich nicht. Eine echte Marke
   hat keine gezeichnete Kontur - sie hat eine GESTANZTE Kante. Der
   Rand ist kein Strich, sondern die Zaehnung selbst, und darunter
   liegt weisses Papier, auf dem das Bild einen Rand laesst.

   Deshalb liegt die Maske ausschliesslich auf .marke-blatt::before:
   eine Maske ueber einem <img> wird nicht in jeder Rendering-Kette
   gezeichnet, und dann fehlt genau das Motiv. Das ist im ersten
   Wurf schon einmal passiert. Das Papier hat keine Kinder, also
   kann nichts verschwinden.

   Der Schatten haengt als drop-shadow am Blatt, damit er der
   Zaehnung folgt statt einem Rechteck.
   ============================================================ */

.marke-briefmarke {
  --loch: 4.5px;
  --schritt: 13px;
}

.marke-briefmarke .marke-blatt {
  background: transparent;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  grid-template-rows: auto 1fr auto;
  padding: 15px 14px 14px;
  filter:
    drop-shadow(0 1px 1px rgb(20 20 15 / .16))
    drop-shadow(0 10px 16px rgb(20 20 15 / .22));
}

/* Das Papier mit der Zaehnung. Eigene Ebene, keine Kinder. */
.marke-briefmarke .marke-blatt::before {
  content: "";
  grid-row: 1 / -1;
  grid-column: 1;
  z-index: 0;
  background: var(--marke-papier);
  -webkit-mask:
    radial-gradient(circle var(--loch) at 50% 0,    #0000 97%, #000) 50% 0    / var(--schritt) 100% repeat-x,
    radial-gradient(circle var(--loch) at 50% 100%, #0000 97%, #000) 50% 100% / var(--schritt) 100% repeat-x,
    radial-gradient(circle var(--loch) at 0 50%,    #0000 97%, #000) 0 50%    / 100% var(--schritt) repeat-y,
    radial-gradient(circle var(--loch) at 100% 50%, #0000 97%, #000) 100% 50% / 100% var(--schritt) repeat-y;
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle var(--loch) at 50% 0,    #0000 97%, #000) 50% 0    / var(--schritt) 100% repeat-x,
    radial-gradient(circle var(--loch) at 50% 100%, #0000 97%, #000) 50% 100% / var(--schritt) 100% repeat-x,
    radial-gradient(circle var(--loch) at 0 50%,    #0000 97%, #000) 0 50%    / 100% var(--schritt) repeat-y,
    radial-gradient(circle var(--loch) at 100% 50%, #0000 97%, #000) 100% 50% / 100% var(--schritt) repeat-y;
  mask-composite: intersect;
}

/* Kein Verlauf: auf einer Marke steht die Schrift auf dem Papier,
   nicht auf dem Bild. */
.marke-briefmarke .marke-blatt::after { display: none; }

.marke-briefmarke .marke-motiv {
  grid-row: 2;
  border-radius: 1px;
  box-shadow: inset 0 0 0 1px rgb(20 20 15 / .12);
}

.marke-briefmarke .marke-kopf { grid-row: 1; padding: 0 1px 7px; align-items: baseline; }
.marke-briefmarke .marke-fuss { grid-row: 3; padding: 8px 1px 0; align-items: baseline; }

/* Der Wertaufdruck steht auf dem Papier - schwarz auf weiss, wie
   gedruckt. Die gelbe Pille war ein Aufkleber auf einem Aufkleber. */
.marke-briefmarke .marke-wert {
  order: 0;
  background: none;
  padding: 0;
  color: var(--tinte);
  font-size: .78rem;
  letter-spacing: -.01em;
}
.marke-briefmarke .marke-land {
  order: 1;
  background: none;
  backdrop-filter: none;
  padding: 0;
  color: var(--tinte-weich);
  font-size: var(--f-winzig);
}
.marke-briefmarke .marke-schrift { text-shadow: none; }
.marke-briefmarke .marke-name { color: var(--tinte); font-size: .82rem; }
.marke-briefmarke .marke-ort { color: var(--tinte-weich); }

/* Der Stempel liegt auf dem Motiv, nicht auf dem Papierrand. */
.marke-briefmarke .marke-stempel { top: 22%; right: 8%; width: 58%; }

/* Angetippt hebt sie sich vom Papier ab, statt zu kippen. */
a.marke-briefmarke:hover .marke-blatt {
  filter:
    drop-shadow(0 2px 2px rgb(20 20 15 / .18))
    drop-shadow(0 16px 24px rgb(20 20 15 / .26));
}

@media (max-width: 560px) {
  .marke-briefmarke { --loch: 3.6px; --schritt: 11px; }
  .marke-briefmarke .marke-blatt { padding: 12px 11px 11px; }
  .bogen-marke .marke-kopf { padding-bottom: 6px; }
  .bogen-marke .marke-fuss { padding-top: 6px; }
}

/* Die kleine Marke auf der Postkarte ist nur 88 px breit - dort
   waere ein Rand von 14 px ein Passepartout. Schmaler, aber mit
   derselben Regel: Schrift nie auf der Zaehnung. */
.fotokarte-briefmarke .marke-blatt { padding: 10px 9px 9px; }
.fotokarte-briefmarke .marke-kopf { padding: 0 1px 4px; }
.fotokarte-briefmarke .marke-fuss { padding: 4px 1px 0; }

/* ============================================================
   Der Bogenrand

   Statt einer geraden Linie zwischen den Abschnitten die
   Bogenkante einer Postkarte. Sie ist derselbe Gedanke wie die
   Zaehnung an der Marke: die Kante ist gestanzt, nicht gezogen.
   ============================================================ */

.bogenkante {
  border: 0;
  height: 10px;
  margin-block: var(--s5);
  background: var(--stein);
  -webkit-mask: radial-gradient(circle 8px at 50% 0, #0000 96%, #000) 50% 0 / 22px 100% repeat-x;
  mask: radial-gradient(circle 8px at 50% 0, #0000 96%, #000) 50% 0 / 22px 100% repeat-x;
  opacity: .8;
}

/* Der Seitenkopf mit dem Sticker. Der Sticker sitzt ganz rechts
   und ragt leicht ueber die Bahn hinaus - deshalb clip statt
   hidden, sonst entstuende eine Rollleiste.

   Und hier ist der Grund, warum der Schatten "kaputt" aussah:
   "overflow: clip" schneidet genau an der Kante des Kastens ab,
   also mitten in der weichen Zone. Der Sticker hat aber zwei
   drop-shadows, der weichere allein 14 px nach links und rechts
   und gut 20 px nach unten. Die waren jedes Mal halb abgeschnitten
   und die weiche Wolke wirkte wie ein Kantenfehler.

   overflow-clip-margin sagt dem Browser, wie weit er vor der
   Kante aufhoert zu schneiden. Damit darf der Schatten fertig
   werden, und alles, was wirklich aus der Seite hinausragt, wird
   weiterhin abgeschnitten - ohne Scrollbehaelter. */
.seiten-kopf-verziert { position: relative; overflow: clip; overflow-clip-margin: 2rem; }

.fortschritt-neben { color: var(--tinte-weich); text-transform: none; letter-spacing: .02em; }
.band .fortschritt-neben { color: var(--leise); }


/* ---------------------------------------------- Karte: Rang und Legende */

.karten-rang-schild { display: block; color: var(--tinte-weich); margin-bottom: .1rem; }

/* Die Nadeln tragen zwei Farben, und zwei Farben ohne Legende sind
   eine Behauptung. Sie steht direkt ueber dem Filter, weil dort
   sowieso gerade sortiert wird. */
.nadel-legende {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  margin: 0 0 var(--s3);
  font-family: var(--mono); font-size: var(--f-winzig); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--tinte-weich);
}
.nadel-legende span { display: inline-flex; align-items: center; gap: .45rem; }
.nadel-punkt {
  width: .75rem; height: .75rem; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: inset 0 0 0 1px rgb(20 20 15 / .25);
}
.nadel-haupt { background: #DC2F26; }
.nadel-neben { background: #1F6FEB; }

/* ---------------------------------------------- Langer Text, aufklappbar

   Im Raster zieht eine hohe Karte die ganze Reihe mit. Ein langer
   Eintrag wird deshalb gestutzt - und laesst sich aufklappen, wenn
   man ihn lesen will. */

.fotokarte-text.gekuerzt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  line-clamp: 7;
  overflow: hidden;
}
.fotokarte-text.offen { -webkit-line-clamp: none; line-clamp: none; display: block; }

.mehr-knopf {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: .2rem 0; margin-top: .35rem;
  font-family: var(--mono); font-size: var(--f-winzig); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--korall-tief);
  border-bottom: 1.5px solid currentColor;
}
.mehr-knopf:hover { color: var(--tinte); }

/* ---------------------------------------------- Eintrag bearbeiten */

.karte-aendern { width: 100%; }
.karte-aendern > summary {
  cursor: pointer; list-style: none;
  font-family: var(--mono); font-size: var(--f-winzig); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-weich);
  padding: .35rem 0;
}
.karte-aendern > summary::-webkit-details-marker { display: none; }
.karte-aendern > summary::before { content: "✎ "; }
.karte-aendern > summary:hover { color: var(--tinte); }
.karte-aendern[open] > summary { color: var(--tinte); margin-bottom: var(--s2); }
.karte-aendern label {
  display: block; margin-top: var(--s2) ;
  font-family: var(--mono); font-size: var(--f-winzig); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--tinte-weich);
}
.karte-aendern input, .karte-aendern textarea, .karte-aendern select {
  width: 100%; margin-top: .25rem;
  font: inherit; font-size: .92rem;
  padding: .45rem .6rem;
  border: var(--kante-fein) solid var(--stein); border-radius: 8px;
  background: var(--papier); color: var(--tinte);
}
.karte-aendern textarea { resize: vertical; min-height: 6rem; }
.karte-aendern-knoepfe { margin-top: var(--s3); }
.karte-aendern form + form { margin-top: var(--s3); padding-top: var(--s3); border-top: var(--kante-fein) dashed var(--stein); }

.fotokarte-geaendert { color: var(--tinte-weich); font-style: italic; }

/* ---------------------------------------------- Rangliste: Balken

   Vorher stand hier je Person eine Reihe kleiner Quadrate, eines je
   Ziel. Bei 23 Zielen und acht Leuten sind das 184 Kaestchen auf
   einem Schirm - hübsch, aber niemand zaehlt sie. Ein Balken sagt
   dasselbe auf einen Blick, und die Zahl daneben sagt es genau.
*/

.rang-balken { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.rang-balken-gleis {
  flex: 1 1 auto; min-width: 48px; height: 8px;
  border-radius: 999px; background: var(--stein); overflow: hidden;
}
.rang-balken-fuellung {
  display: block; height: 100%; width: var(--pro, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--zitrone-tief), var(--zitrone));
}
.rang-balken-zahl {
  font-family: var(--mono); font-size: var(--f-winzig); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--tinte-weich); white-space: nowrap;
}
.rang-mein-balken { margin-top: var(--s3); max-width: 22rem; }

/* ---------------------------------------------- Standort freigeben

   Sieht aus wie das Foto-Feld daneben, weil es dieselbe Sorte Sache
   ist: etwas, das man einmal beibringt, bevor man abhakt. Auf
   Android ist dieser eigene Fingertipp der Unterschied zwischen
   "Chrome fragt" und "Chrome fragt nicht" - deshalb ist es ein
   Knopf und keine Nebenwirkung des Absendens. */

.standort-knopf {
  appearance: none; width: 100%; text-align: left;
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3);
  border: var(--kante-fein) dashed var(--stein);
  border-radius: 12px;
  background: var(--papier);
  color: var(--tinte);
  font: inherit;
  cursor: pointer;
  transition: background var(--t-mikro) linear, border-color var(--t-mikro) linear;
}
.standort-knopf:hover { background: var(--papier-tief); border-color: var(--tinte-weich); }
.standort-knopf[disabled] { opacity: .6; cursor: progress; }
.standort-knopf.hat-standort { border-style: solid; border-color: var(--blatt); background: rgb(63 191 99 / .08); }
.standort-knopf.hat-standort .standort-symbol { background: var(--blatt); color: var(--papier); }
.standort-knopf.ohne-standort { border-color: var(--korall-tief); }

.standort-symbol {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--papier-tief); color: var(--tinte);
}
.standort-symbol svg { width: 22px; height: 22px; }
.standort-text { display: grid; gap: .12rem; min-width: 0; }
.standort-text strong { font-size: .98rem; font-weight: 600; }
.standort-text small {
  font-family: var(--mono); font-size: var(--f-winzig); font-weight: 500;
  letter-spacing: .03em; color: var(--tinte-weich);
}
/* Der Haken sagt "war da" und laesst die Farbe der Nadel in Ruhe -
   die sagt weiter, ob es Pflicht ist oder nicht. Deshalb steht er
   in der Legende auch als Haken da und nicht als dritte Farbe. */
.nadel-haken { background: var(--tinte-weich); color: var(--papier); display: inline-grid; place-items: center; }
.nadel-haken svg { width: 8px; height: 8px; transform: rotate(45deg); }

/* Der Entwertungsstempel im Seitenkopf. Er traegt das Datum des
   letzten Eintrags - also eine Angabe, keine Zierde, und deshalb
   darf er so gross sein. */
.seiten-kopf-zahlen { position: relative; }
.kopf-stempel {
  position: absolute; right: -.5rem; top: -3.6rem;
  width: clamp(88px, 22vw, 116px);
  color: var(--korall);
  opacity: .85;
  pointer-events: none;
}
.kopf-stempel svg { width: 100%; height: auto; transform: rotate(var(--dreh, -9deg)); }
@media (min-width: 880px) {
  .kopf-stempel { position: static; width: 112px; margin-bottom: var(--s3); }
  .seiten-kopf-zahlen { display: grid; justify-items: end; }
}

/* ============================================================
   DER STICKER

   Ein Sticker ist kein Ornament im Hintergrund - er ist ein Ding,
   das jemand aufgeklebt hat. Deshalb:

     gestanzte Form   jede Flaeche traegt ihre eigene weisse
                      Kontur (paint-order: stroke), so wie eine
                      Stickerstanze 2 mm Rand stehen laesst
     Schatten         darunter, nicht darum
     schief           ein Sticker sitzt nie gerade

   Genau EINER je Unterseite, ganz rechts im Kopf. Die verstreuten
   Zeichnungen an jedem Abschnitt sind dafuer raus.
   ============================================================ */

.sticker {
  display: block;
  pointer-events: none;
  filter:
    drop-shadow(0 1px 1px rgb(20 20 15 / .2))
    drop-shadow(0 8px 14px rgb(20 20 15 / .22));
}
.sticker svg { width: 100%; height: auto; overflow: visible; }

/* Die weisse Stanzkante. Sie liegt UNTER der Fuellung, deshalb
   paint-order - sonst frisst die Kontur die Form von innen auf.

   Nur die AEUSSEREN Formen bekommen sie: eine Stanze schneidet den
   Umriss aus, nicht das Muster darauf. Innenteile - Fruchtkammern,
   Salami, Kaffee im Becher - tragen deshalb s-innenteil und bleiben
   ohne. Ohne diese Trennung lag ein weisser Reifen mitten in der
   Zitrone. */
.sticker svg > *,
.sticker svg > g > * {
  stroke: var(--papier);
  stroke-width: 7;
  stroke-linejoin: round;
  stroke-linecap: round;
  paint-order: stroke fill;
}
.sticker .s-innenteil,
.sticker .s-innenteil * {
  stroke: none;
  stroke-width: 0;
  paint-order: normal;
}

/* Zitrone */
.s-schale  { fill: var(--zitrone); }
.s-innen   { fill: #FFF3CE; }
.sticker .s-kammer path { stroke: var(--zitrone-tief); stroke-width: 2.6; fill: none; }
.s-blatt   { fill: var(--blatt); }
.s-stiel   { stroke: var(--papier); fill: none; stroke-width: 7; }
.sticker .s-glanz { stroke: #FFF3CE; stroke-width: 5; fill: none; }

/* Pizza */
.s-teig      { fill: #E8B95F; }
.s-sauce     { fill: var(--korall); }
.s-salami    { fill: var(--korall-tief); }
.s-basilikum { fill: var(--blatt); }

/* Espresso */
.s-tasse  { fill: var(--papier-tief); }
.s-kaffee { fill: #4A2B18; }
.s-henkel { fill: none; stroke: var(--papier); stroke-width: 7; }
.s-teller { stroke: var(--papier); stroke-width: 9; }
.s-dampf  { stroke: var(--papier); stroke-width: 6; fill: none; }

/* Gelato */
.s-waffel        { fill: #E8B95F; }
.sticker .s-waffel-linie { stroke: #C08C2E; stroke-width: 2.6; fill: none; }
.s-kugel-a { fill: var(--korall); }
.s-kugel-b { fill: var(--zitrone); }
.s-kugel-c { fill: #F2A0BC; }

/* Faehre */
.s-rumpf   { fill: var(--korall); }
.s-aufbau  { fill: var(--papier-tief); }
.s-mast    { stroke: var(--papier); stroke-width: 7; }
.s-flagge  { fill: var(--blatt); }
.s-fenster circle { fill: var(--lago); }
.s-welle   { stroke: var(--lagune); stroke-width: 7; fill: none; }

/* Der Sitz im Seitenkopf: ganz rechts, leicht schief. */
.sticker-kopf {
  position: absolute;
  right: 0; top: .25rem;
  width: clamp(66px, 17vw, 104px);
  transform: rotate(var(--kipp, 8deg));
  z-index: 1;
}
@media (min-width: 880px) {
  .sticker-kopf { right: 0; top: 0; width: 116px; }
}

/* Der hintere Kranz. Etwas dunkler als der vordere, damit die
   Staffelung zu sehen ist - ein gleichfarbiges Blatt dahinter
   verschwaende mit dem davor zu einem Klecks. */
.blume-zwischen { transform: rotate(var(--dreh)); transform-origin: 0 0; transform-box: view-box; }
.blume-zwischen-flaeche { fill: #D9577F; }