/* ============================================================
   Odenwald heute. Gestaltungsgrundlage.

   Regler: VARIANCE 4 / MOTION 3 / DENSITY 5.
   Werkzeug, kein Schaufenster. Publikum im Schnitt aelter als in
   der Stadt, also grosse Schrift, hohe Kontraste, breite Tippflaechen.
   Bewusst anders als GastGut: kein Fraunces, keine Creme-Messing-Welt.
   ============================================================ */

@font-face {
  font-family: 'Geist';
  src: url('/schrift/geist-variable.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --schrift: 'Geist', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Grundwerte hell. Kein reines Schwarz, kein reines Weiss. */
  --tinte: #151a20;
  --tinte-sanft: #4c5763;
  --tinte-leise: #6f7b87;
  --papier: #edf0ee;
  --flaeche: #fbfcfb;
  --flaeche-tief: #e3e7e4;
  --linie: #d3d9d4;
  --linie-stark: #b6bfb8;

  /* Ein einziger Akzent, quer durch die ganze App. */
  --signal: #1c46a8;
  --signal-dunkel: #142f74;
  --signal-flaeche: #e5ebf6;
  --signal-auf-dunkel: #8fb0ea;

  /* Ausschliesslich fuer echte Zustaende, nie als Zierde. */
  --achtung: #8a4b06;
  --achtung-flaeche: #fbeedd;
  --gut: #14603c;

  /* Bereichsfarben, NUR fuer Kartennadeln (funktionale Legende, kein Zierrat).
     Gedaempft und alle etwa gleich hell, damit das weisse Symbol lesbar bleibt
     und die Karte nicht bunt wirkt. Ausflug bleibt der Akzent. */
  --m-ausflug:     #1c46a8;
  --m-draussen:    #2f7d4f;
  --m-essen:       #b06a12;
  --m-einkaufen:   #6d7a1e;
  --m-uebernachten:#8a3d80;
  --m-alltag:      #5a5f8c;
  --m-dorf:        #a3453b;
  --m-unterwegs:   #0f7284;

  --radius: 14px;
  --radius-klein: 9px;
  --schatten: 0 1px 2px rgba(21, 26, 32, .06), 0 6px 20px rgba(21, 26, 32, .07);
  --schatten-blatt: 0 -2px 30px rgba(21, 26, 32, .18);

  --breite: 46rem;
  --nav-hoehe: 4.25rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tinte: #e7ebe8;
    --tinte-sanft: #a4b0b8;
    --tinte-leise: #7e8a93;
    --papier: #12161a;
    --flaeche: #1b2126;
    --flaeche-tief: #252d33;
    --linie: #2e373e;
    --linie-stark: #45505a;

    --signal: #7ea6f0;
    --signal-dunkel: #a8c4f6;
    --signal-flaeche: #1d2b45;
    --signal-auf-dunkel: #7ea6f0;

    --achtung: #e8b478;
    --achtung-flaeche: #33261a;
    --gut: #6cc094;

    /* Heller im Dunkelmodus, weil das Symbol dort dunkel ist. */
    --m-ausflug:     #7ea6f0;
    --m-draussen:    #6cc094;
    --m-essen:       #e0a75a;
    --m-einkaufen:   #b9c46a;
    --m-uebernachten:#d090c4;
    --m-alltag:      #9ea3d6;
    --m-dorf:        #e08a80;
    --m-unterwegs:   #5cb6c6;

    --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .32);
    --schatten-blatt: 0 -2px 30px rgba(0, 0, 0, .5);
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* ---------- Berührung ----------

   Drei Dinge, die nur auf einem echten Handy auffallen und am Rechner nie:

   1. Jeder Tipp legt sonst einen grauen Kasten über das ganze Element. Bei
      einer Zeile mit Bild ist das die halbe Kachel. Ersetzt wird er durch einen
      schwachen Farbton, nicht ganz abgeschaltet: ohne jede Rückmeldung wirkt
      ein Tipp wie nicht angekommen.
   2. `manipulation` nimmt dem Browser das Warten auf einen zweiten Tipp
      (Doppeltipp-Zoom). Ohne das hängt jeder Knopf gefühlt kurz.
   3. Ein Blatt, das man bis zum Ende scrollt, scrollt sonst die Seite dahinter
      weiter, und auf Android löst der Zug nach unten das Neuladen aus.       */

a, button, [role='button'], summary, label,
input, select, textarea {
  -webkit-tap-highlight-color: color-mix(in srgb, var(--signal) 14%, transparent);
  touch-action: manipulation;
}

/* Die Karte braucht alle Finger: Ziehen, Zwei-Finger-Zoom, Doppeltipp-Zoom
   und langes Tippen für "Was ist hier". */
#karte, .leaflet-container { touch-action: auto; }

/* Bisher war jedes Bild einzeln über seinen Kasten begrenzt. Das hielt, solange
   niemand ein Bild an eine neue Stelle setzt. Hier gilt es für alle. */
   Symbole bleiben bewusst außen vor: die sind fest bemessen, und Leaflet baut
   seine Ebenen ebenfalls aus SVG. */
img, video, canvas { max-width: 100%; }
img { height: auto; }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1.0625rem;      /* 17px. Bewusst ueber dem Mindestmass. */
  line-height: 1.55;
  color: var(--tinte);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--nav-hoehe) + env(safe-area-inset-bottom));
}

h1, h2, h3 {
  margin: 0;
  letter-spacing: -.02em;
  line-height: 1.15;
  font-weight: 650;
}

p { margin: 0 0 .75em; max-width: 62ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--signal); text-decoration-thickness: .07em; text-underline-offset: .16em; }

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

/* ---------- Symbole ---------- */

.sym {
  width: 1.375rem;
  height: 1.375rem;
  flex: none;
  display: block;
  color: inherit;
}
.sym-gross { width: 1.75rem; height: 1.75rem; }
.sym-klein { width: 1.125rem; height: 1.125rem; }

/* Große Schrift: alle Maße sind in rem, deshalb genügt hier eine Stufe. */
html[data-schrift='gross'] { font-size: 112.5%; }

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

.kopfzeile {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}

.kopfzeile-innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: .625rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 3.5rem;
}

.wortmarke {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.03em;
  margin-right: auto;
  display: flex;
  align-items: baseline;
  gap: .3em;
  color: var(--tinte);
  text-decoration: none;
}
.wortmarke b { font-weight: 700; }
.wortmarke span { font-weight: 400; color: var(--tinte-sanft); }

/* Runde Knöpfe rechts in der Kopfzeile: Suche und Einstellungen. */
.kopfknopf {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  padding: 0;
  color: var(--tinte-sanft);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, transform .12s ease;
}
.kopfknopf:hover { color: var(--signal); background: var(--flaeche-tief); }
.kopfknopf:active { transform: scale(.94); }

/* ---------- Ortswahl in der Kopfzeile ---------- */

.ortknopf {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-height: 2.75rem;
  padding: .375rem .75rem;
  font: inherit;
  font-size: .9375rem;
  font-weight: 550;
  color: var(--tinte);
  background: var(--flaeche);
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s ease, transform .12s ease;
}
.ortknopf:hover { border-color: var(--signal); }
.ortknopf:active { transform: scale(.97); }
.ortknopf .sym { color: var(--signal); }

/* ---------- Rumpf ---------- */

.huelle {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 1.25rem 1rem 2.5rem;
}

.abschnitt { margin-top: 2.25rem; }
.abschnitt:first-child { margin-top: .5rem; }

.abschnitt-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .875rem;
}
.abschnitt-kopf h2 { font-size: 1.1875rem; }
.abschnitt-kopf a,
.textknopf {
  font: inherit;
  font-size: .9375rem;
  font-weight: 550;
  color: var(--signal);
  text-decoration: none;
  background: none;
  border: 0;
  padding: .25rem 0;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}
.abschnitt-kopf a:hover,
.textknopf:hover { text-decoration: underline; }

/* Ein Textlink ist rund 25 px hoch, das ist als Tippfläche zu wenig. Die
   Fläche wird unsichtbar auf 44 px gezogen, ohne die Anordnung zu verschieben:
   ein absolut gesetztes Kästchen ändert nichts am Zeilenfluss, und
   .abschnitt-kopf richtet weiter an der Schriftlinie aus. */
.abschnitt-kopf a::before,
.textknopf::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  min-width: 2.75rem;
  height: 2.75rem;
}

/* ---------- Tagesbanner ---------- */

.tagesbanner { margin-bottom: 1.5rem; }

.tagesbanner .datum {
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin-bottom: .25rem;
}

.tagesbanner h1 {
  font-size: clamp(1.75rem, 7vw, 2.375rem);
  font-weight: 700;
  letter-spacing: -.035em;
}

.tagesbanner .beiwort {
  margin-top: .5rem;
  color: var(--tinte-sanft);
  font-size: 1rem;
}

/* ---------- Warnband. Nur wenn es wirklich etwas zu melden gibt. ---------- */

.warnband {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .875rem 1rem;
  margin-bottom: 1.25rem;
  background: var(--achtung-flaeche);
  border: 1px solid color-mix(in srgb, var(--achtung) 35%, transparent);
  border-radius: var(--radius-klein);
  color: var(--achtung);
  font-size: .9375rem;
}
.warnband .sym { color: var(--achtung); margin-top: .1rem; }
.warnband strong { display: block; color: var(--achtung); }
.warnband .quelle { color: var(--achtung); opacity: .85; font-size: .8125rem; }

/* ---------- Luftbild des Orts ---------- */

.luftbild {
  margin: 0 0 1.25rem;
}
.luftbild img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  background: var(--flaeche-tief);
}
.luftbild figcaption {
  margin-top: .375rem;
  font-size: .75rem;
  color: var(--tinte-leise);
}

/* ---------- Regeln im Beitragsblatt ---------- */

.regeln {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .625rem;
}
.regeln li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .9375rem;
  color: var(--tinte-sanft);
}
.regeln li::before {
  content: '';
  position: absolute;
  left: .25rem;
  top: .6em;
  width: .4375rem;
  height: .4375rem;
  border-radius: 50%;
  background: var(--signal);
}

/* ---------- Saisonband ---------- */

.saisonband {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .625rem;
  padding: .875rem 1rem;
  background: var(--signal-flaeche);
  border-radius: var(--radius-klein);
  font-size: .9375rem;
}
.saisonband .titel {
  font-weight: 600;
  color: var(--signal);
  margin-right: .125rem;
}
.saisonband .stueck {
  padding: .1875rem .5rem;
  background: var(--flaeche);
  border-radius: 999px;
  font-size: .875rem;
}

/* ---------- Lageband: Pollen und Waldbrand ----------

   Ein ruhiges Band, nicht die rote Warnfarbe: Pollen und Waldbrandhinweis sind
   Lage, keine akute Gefahr. Die Warnfarbe bleibt dem Warnband vorbehalten,
   sonst stumpft sie ab. */
.lageband {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: 1rem;
}
.lagezeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem .5rem;
  padding: .75rem 1rem;
  background: var(--flaeche-tief);
  border-radius: var(--radius-klein);
  font-size: .9375rem;
}
.lagezeile .titel {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-weight: 600;
  color: var(--tinte-sanft);
}
.lagezeile .stueck {
  padding: .1875rem .5rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 999px;
  font-size: .875rem;
}
/* Höhere Belastung dunkler, aber innerhalb der Grundtöne. Kein Ampelrot: die
   Zahl steht als Wort daneben, die Farbe ist nur ein leiser Wink. */
.lagezeile .pollen-4 { border-color: var(--linie-stark); }
.lagezeile .pollen-5,
.lagezeile .pollen-6 {
  border-color: var(--signal);
  color: var(--signal);
  font-weight: 550;
}
.lagelink {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-height: 2.75rem;
  color: var(--tinte-sanft);
  text-decoration: none;
  font-weight: 500;
}
.lagelink:hover { color: var(--signal); text-decoration: underline; }
.lagelink .sym-weiter { margin-left: -.125rem; }

/* ---------- Liste der Ziele ---------- */

.zielliste {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
}

.zielliste li + li { border-top: 1px solid var(--linie); }

.zeile {
  display: flex;
  align-items: center;
  gap: .875rem;
  width: 100%;
  min-height: 3.75rem;
  padding: .8125rem 1rem;
  font: inherit;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .12s ease;
}
.zeile:hover { background: var(--flaeche-tief); }
.zeile:active { background: var(--flaeche-tief); transform: translateY(1px); }

.zeile-marke {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 50%;
  background: var(--signal-flaeche);
  color: var(--signal);
}

/* Foto statt Symbol in der Liste. Gleiche Grundflaeche, damit die Zeilen
   nicht unterschiedlich hoch werden. */
.zeile-bild {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  overflow: hidden;
  border-radius: var(--radius-klein);
  background: var(--flaeche-tief);
}
.zeile-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.zeile-text { min-width: 0; flex: 1; }
.zeile-name {
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zeile-meta {
  font-size: .875rem;
  color: var(--tinte-sanft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zeile-weite {
  flex: none;
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
  color: var(--tinte-leise);
  text-align: right;
}

.zeile > .sym-weiter { color: var(--tinte-leise); }

/* ---------- Kategorienraster ---------- */

.katraster {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .625rem;
}
@media (min-width: 34rem) { .katraster { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 52rem) { .katraster { grid-template-columns: repeat(4, 1fr); } }

.katfeld {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-height: 5.75rem;
  padding: .875rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, transform .12s ease;
}
.katfeld:hover { border-color: var(--signal); }
.katfeld:active { transform: scale(.98); }
.katfeld .sym { color: var(--signal); }
.katfeld .name { font-weight: 550; line-height: 1.25; }
.katfeld .anzahl {
  margin-top: auto;
  font-size: .8125rem;
  color: var(--tinte-leise);
  font-variant-numeric: tabular-nums;
}

/* ---------- Knoepfe ---------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3rem;
  padding: .6875rem 1.25rem;
  font: inherit;
  font-weight: 600;
  border-radius: var(--radius-klein);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, transform .12s ease;
}
.knopf:active { transform: translateY(1px); }

.knopf-haupt {
  background: var(--signal);
  color: #fbfcfb;
  border-color: var(--signal);
}
.knopf-haupt:hover { background: var(--signal-dunkel); border-color: var(--signal-dunkel); }

@media (prefers-color-scheme: dark) {
  .knopf-haupt { color: #12161a; }
}

.knopf-rand {
  background: var(--flaeche);
  color: var(--tinte);
  border-color: var(--linie-stark);
}
.knopf-rand:hover { border-color: var(--signal); }

.knopf-reihe { display: flex; flex-wrap: wrap; gap: .625rem; }
.knopf-reihe .knopf { flex: 1 1 8rem; }

/* Zweite Reihe: seltener gebraucht, deshalb kleiner und leiser. */
.nebenreihe { margin-top: .625rem; }
.nebenreihe .knopf { flex: 1 1 6rem; }

.knopf-leise {
  min-height: 2.625rem;
  padding: .5rem .875rem;
  font-size: .875rem;
  font-weight: 550;
  color: var(--tinte-sanft);
  background: var(--papier);
  border-color: var(--linie);
}
.knopf-leise:hover { color: var(--signal); border-color: var(--signal); }
.knopf-leise[aria-pressed='true'] {
  color: var(--signal);
  background: var(--signal-flaeche);
  border-color: transparent;
}

/* ---------- Hinweis zum Installieren ---------- */

.installbalken {
  position: fixed;
  left: .75rem;
  right: .75rem;
  bottom: calc(var(--nav-hoehe) + env(safe-area-inset-bottom) + .75rem);
  z-index: 25;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  max-width: 30rem;
  margin: 0 auto;
  padding: .875rem 1rem;
  background: var(--flaeche);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  animation: hereinschieben .3s ease both;
}
.installbalken > .sym { color: var(--signal); flex: none; margin-top: .125rem; }
.installbalken div { flex: 1; min-width: 0; }
.installbalken strong { display: block; font-size: .9375rem; }
.installbalken span {
  display: block;
  font-size: .8125rem;
  color: var(--tinte-sanft);
  line-height: 1.45;
}
/* Auch hier 44 px. Ein kleinerer Knopf war die Absicht, aber ausgerechnet
   "weg damit" darf man nicht dreimal treffen müssen. */
.installbalken .blatt-zu { width: 2.75rem; height: 2.75rem; }

@keyframes hereinschieben {
  from { opacity: 0; transform: translateY(.75rem); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .installbalken { animation: none; }
}

/* ---------- Filterleiste auf der Karte ---------- */

.chipleiste {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: .625rem 1rem;
  scroll-snap-type: x proximity;
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
}
.chipleiste::-webkit-scrollbar { display: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  flex: none;
  min-height: 2.75rem;
  padding: .375rem .8125rem;
  font: inherit;
  font-size: .9375rem;
  font-weight: 550;
  white-space: nowrap;
  color: var(--tinte);
  background: var(--flaeche);
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  cursor: pointer;
  scroll-snap-align: start;
  transition: background-color .15s ease, color .15s ease, transform .12s ease;
}
.chip:active { transform: scale(.96); }
.chip[aria-pressed='true'] {
  background: var(--signal);
  border-color: var(--signal);
  color: #fbfcfb;
}
@media (prefers-color-scheme: dark) {
  .chip[aria-pressed='true'] { color: #12161a; }
}

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

/* Auf der Kartenseite soll die Seite selbst nicht scrollen, nur die Karte. */
.karte-seite {
  overflow: hidden;
  padding-bottom: 0;
}

.kartenbuehne {
  position: relative;
  height: calc(100dvh - var(--nav-hoehe) - 3.5rem - 3.75rem - env(safe-area-inset-bottom));
  min-height: 20rem;
}

#karte { position: absolute; inset: 0; background: var(--flaeche-tief); }

.kartenknopf {
  position: absolute;
  right: .75rem;
  bottom: 1.25rem;
  z-index: 500;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  background: var(--flaeche);
  color: var(--signal);
  border: 1px solid var(--linie-stark);
  border-radius: 50%;
  box-shadow: var(--schatten);
  cursor: pointer;
}
.kartenknopf:active { transform: scale(.94); }

.zaehlfahne {
  position: absolute;
  left: .75rem;
  bottom: 1.25rem;
  z-index: 500;
  padding: .3125rem .625rem;
  font-size: .8125rem;
  font-weight: 550;
  color: var(--tinte-sanft);
  background: color-mix(in srgb, var(--flaeche) 92%, transparent);
  border: 1px solid var(--linie);
  border-radius: 999px;
  pointer-events: none;
}

/* Erklärt einmal, dass langes Tippen etwas tut. Danach nie wieder. */
.kartenfahne {
  position: absolute;
  left: .75rem;
  right: 4.5rem;
  top: .75rem;
  z-index: 500;
  margin: 0;
  padding: .5rem .75rem;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--tinte-sanft);
  background: color-mix(in srgb, var(--flaeche) 94%, transparent);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  pointer-events: none;
}

/* Eigene Markierungen statt der Leaflet-Standardnadel. */
.markierung {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: #fbfcfb;
  background: var(--signal);
  border: 2px solid var(--flaeche);
  border-radius: 50% 50% 50% 8%;
  transform: rotate(45deg);
  box-shadow: 0 1px 4px rgba(21, 26, 32, .35);
}
.markierung .sym { transform: rotate(-45deg); width: 1.0625rem; height: 1.0625rem; }

/* Bereichsfarben je Nadel. Greift nur, wenn die Zutat "Farben auf der Karte"
   an ist; sonst tragen die Nadeln keine dieser Klassen und bleiben im Akzent. */
.markierung-g-ausflug      { background: var(--m-ausflug); }
.markierung-g-draussen     { background: var(--m-draussen); }
.markierung-g-essen        { background: var(--m-essen); }
.markierung-g-einkaufen    { background: var(--m-einkaufen); }
.markierung-g-uebernachten { background: var(--m-uebernachten); }
.markierung-g-alltag       { background: var(--m-alltag); }
.markierung-g-dorf         { background: var(--m-dorf); }
.markierung-g-unterwegs    { background: var(--m-unterwegs); }
@media (prefers-color-scheme: dark) {
  .markierung { color: #12161a; }
}

/* Bündel mehrerer Ziele. Bewusst eigene Gestaltung statt des grün-gelb-roten
   Standards der Erweiterung, sonst sieht die Karte aus wie jede andere. */
.buendel {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #fbfcfb;
  background: var(--signal);
  border: 2px solid var(--flaeche);
  border-radius: 50%;
  box-shadow: 0 1px 6px rgba(21, 26, 32, .3);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  transition: transform .12s ease;
}
.buendel span { line-height: 1; }
.buendel-klein { font-size: .8125rem; }
.buendel-mittel { font-size: .875rem; }
.buendel-gross { font-size: .9375rem; }

/* Beim Überfahren leicht anheben: zeigt, dass man hineinklicken kann. */
.leaflet-marker-icon:hover > .buendel { transform: scale(1.08); }

@media (prefers-color-scheme: dark) {
  .buendel { color: #12161a; }
}
@media (prefers-reduced-motion: reduce) {
  .buendel { transition: none; }
  .leaflet-marker-icon:hover > .buendel { transform: none; }
}

.markierung-ich {
  width: 1.125rem;
  height: 1.125rem;
  background: var(--signal);
  border: 3px solid var(--flaeche);
  border-radius: 50%;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 22%, transparent);
}

/* Das Ziel im Fokus-Modus: größer, im Akzent (egal welcher Bereich) und mit
   einem langsam atmenden Hof, damit sofort klar ist, worum es geht. Der Puls
   ist bewusst träge und leise; bei "Bewegung reduzieren" schaltet ihn die
   globale Regel weiter unten ab. */
.markierung-ziel {
  width: 2.6rem;
  height: 2.6rem;
  background: var(--signal);
  animation: ziel-puls 2.6s ease-in-out infinite;
}
.markierung-ziel .sym { width: 1.4rem; height: 1.4rem; }

@keyframes ziel-puls {
  0%, 100% {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 34%, transparent),
      0 2px 6px rgba(21, 26, 32, .4);
  }
  50% {
    box-shadow: 0 0 0 11px color-mix(in srgb, var(--signal) 6%, transparent),
      0 2px 6px rgba(21, 26, 32, .4);
  }
}

/* Die angetippte Stelle. Bewusst anders als der eigene Standort: ein Ring,
   keine gefüllte Scheibe, damit man beide gleichzeitig auseinanderhält. */
.markierung-hier {
  width: 1.375rem;
  height: 1.375rem;
  border: 3px solid var(--tinte);
  background: color-mix(in srgb, var(--flaeche) 70%, transparent);
  border-radius: 50%;
}

/* Leaflet einpassen */
.leaflet-container { font-family: var(--schrift); background: var(--flaeche-tief); }
.leaflet-control-attribution {
  font-size: .6875rem;
  background: color-mix(in srgb, var(--flaeche) 88%, transparent) !important;
  color: var(--tinte-sanft) !important;
}
.leaflet-control-attribution a { color: var(--signal) !important; }
.leaflet-bar a {
  color: var(--tinte) !important;
  background: var(--flaeche) !important;
  border-bottom-color: var(--linie) !important;
}
@media (prefers-color-scheme: dark) {
  .leaflet-tile { filter: brightness(.78) contrast(1.06) saturate(.85); }
}

/* ---------- Blatt: Detailansicht von unten ---------- */

.blatt {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  width: 100%;
  max-width: none;
  max-height: 82dvh;
  margin: 0;
  padding: 0;
  color: var(--tinte);
  background: var(--flaeche);
  border: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--schatten-blatt);
  overflow: hidden auto;
  /* Am Ende eines Blatts nicht die Seite dahinter weiterscrollen, und auf
     Android nicht das Neuladen auslösen. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.blatt::backdrop { background: rgba(10, 14, 18, .5); }

.blatt-innen {
  padding: 1.25rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
  max-width: var(--breite);
  margin: 0 auto;
}

.blatt-griff {
  width: 2.5rem;
  height: .25rem;
  margin: .625rem auto .25rem;
  background: var(--linie-stark);
  border-radius: 999px;
}

.blatt-kopf {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  margin-bottom: 1rem;
}
.blatt-kopf h2 { font-size: 1.375rem; flex: 1; }
.blatt-kopf .art {
  margin-top: .25rem;
  font-size: .9375rem;
  color: var(--tinte-sanft);
}

/* 2,75rem sind 44 px. Das ist der meistbenutzte Knopf der ganzen App, er
   schließt jedes Blatt. Vorher waren es 40 px, und das trifft man mit dem
   Daumen zu oft daneben. */
.blatt-zu {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  color: var(--tinte-sanft);
  background: var(--flaeche-tief);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.blatt-zu:active { transform: scale(.94); }

/* ---------- Offen oder zu ---------- */

.zeitband {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  padding: .75rem .875rem;
  margin: 0 0 1.25rem;
  border-radius: var(--radius-klein);
  border-left: 4px solid var(--linie-stark);
  background: var(--papier);
  font-size: .9375rem;
}
.zeitband strong { font-weight: 650; }
.zeitband span {
  font-size: .75rem;
  color: var(--tinte-leise);
  font-family: var(--schrift);
}

.zeitband.zeit-offen { border-left-color: var(--gut); }
.zeitband.zeit-offen strong { color: var(--gut); }
.zeitband.zeit-zu { border-left-color: var(--achtung); }
.zeitband.zeit-zu strong { color: var(--achtung); }
.zeitband.zeit-unklar strong { color: var(--tinte-sanft); font-weight: 550; }

/* In den Listen als kleiner Punkt vor der Nebenzeile. */
.zeile-meta .zeitmarke { font-weight: 600; }
.zeile-meta .zeitmarke[data-zustand='offen'] { color: var(--gut); }
.zeile-meta .zeitmarke[data-zustand='zu'] { color: var(--achtung); }

/* ---------- Fotos im Blatt ---------- */

.blattbilder {
  margin: 0 0 1.25rem;
  display: grid;
  gap: .75rem;
}

/* Mehrere Fotos liegen nebeneinander und rasten beim Wischen ein. */
.blattbilder[data-mehrere] {
  display: flex;
  gap: .625rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-inline: -1.25rem;
  padding-inline: 1.25rem;
}
.blattbilder[data-mehrere]::-webkit-scrollbar { display: none; }
.blattbilder[data-mehrere] .blattbild {
  flex: 0 0 82%;
  scroll-snap-align: center;
}

.blattbild { margin: 0; }

.blattbild img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-klein);
  background: var(--flaeche-tief);
}

.blattbild figcaption {
  margin-top: .5rem;
  font-size: .8125rem;
  line-height: 1.45;
}

.bildhinweis {
  display: block;
  color: var(--tinte-sanft);
  font-size: .875rem;
}

/* Bilderstreifen der Ziele eines Orts. Waagerecht wischbar, quadratische
   Kacheln, Name in zwei Zeilen darunter. */
.bildstreifen {
  display: flex;
  gap: .625rem;
  margin-top: .25rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: .25rem;
  scroll-snap-type: x proximity;
}
.bildstreifen::-webkit-scrollbar { display: none; }
.bildkachel {
  flex: none;
  width: 9.5rem;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform .12s ease;
}
.bildkachel:active { transform: scale(.98); }
.bildkachel img {
  width: 100%;
  height: 7rem;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-klein);
  background: var(--flaeche-tief);
}
.bildkachel-name {
  margin-top: .375rem;
  font-size: .8125rem;
  line-height: 1.3;
  color: var(--tinte-sanft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* QR-Code. Immer weiß hinterlegt, auch im Dunkelmodus, sonst kann ihn keine
   Kamera lesen. Die Module sind fest schwarz, nicht im Akzent. */
.qr-kasten {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 17rem;
  aspect-ratio: 1;
  margin: .75rem auto 1rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  color: #333;
}
.qr-kasten svg { width: 100%; height: auto; display: block; }

.bildnachweis {
  margin: .125rem 0 0;
  color: var(--tinte-leise);
  font-size: .75rem;
  max-width: none;
}
.bildnachweis a { color: var(--tinte-leise); }

/* ---------- Wanderwege am Ziel ---------- */

.wegeliste {
  display: grid;
  gap: .375rem;
  margin: 0 0 .25rem;
}

.wegmarke {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .5rem;
  padding: .5rem .75rem;
  background: var(--papier);
  border-left: 3px solid var(--linie-stark);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  font-size: .9375rem;
}

/* Weitwanderwege heben sich ab: Nibelungensteig zählt mehr als Rundweg 7. */
.wegmarke[data-wichtig] {
  border-left-color: var(--signal);
  background: var(--signal-flaeche);
}

.wegmarke b {
  flex: none;
  padding: .0625rem .375rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--tinte-sanft);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.wegmarke[data-wichtig] b { color: var(--signal); border-color: transparent; }

.wegmarke > span { flex: 1 1 12rem; min-width: 0; }

.wegmarke small {
  flex: none;
  font-size: .75rem;
  color: var(--tinte-leise);
  font-variant-numeric: tabular-nums;
}

/* ---------- Kleine Zwischentitel im Blatt ---------- */

.kleiner-titel {
  margin: 1.25rem 0 .625rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}
.kleiner-titel:first-child { margin-top: 0; }

.entfernungzeile {
  margin: .875rem 0 0;
  font-size: .9375rem;
  color: var(--tinte-sanft);
}

/* Beschreibung aus der Wikipedia. Bewusst ohne Zierrat, es ist ein Zitat. */
.beschreibung {
  margin: 1rem 0 .375rem;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--tinte-sanft);
  max-width: 64ch;
}

/* Wetter hinter dem Datum, gleiche Zeile, gleiche Zurückhaltung. */
#wetter { font-variant-numeric: tabular-nums; }

/* ---------- Schlagworte: Merkmale und Umfeld ---------- */

.schlagworte {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin: .875rem 0 0;
}

.schlagwort {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  padding: .25rem .5625rem;
  font-size: .8125rem;
  color: var(--tinte-sanft);
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 999px;
  white-space: nowrap;
}

/* Das Umfeld ist gerechnet, nicht behauptet. Deshalb ruhig hervorheben. */
.schlagworte.umfeld { margin-top: 0; }
.schlagworte.umfeld .schlagwort {
  color: var(--signal);
  background: var(--signal-flaeche);
  border-color: transparent;
  font-variant-numeric: tabular-nums;
}
.schlagworte.umfeld .sym { color: var(--signal); }

/* Anklickbare Umfeld-Chips: öffnen die Karte auf genau diesen Punkten. */
a.schlagwort { text-decoration: none; }
.schlagwort-klickbar { cursor: pointer; transition: background-color .12s ease; min-height: 2rem; }
.schlagwort-klickbar:hover { background: color-mix(in srgb, var(--signal) 18%, var(--flaeche)); }
.schlagwort-klickbar:active { transform: scale(.97); }

/* Titelzeile mit rechts einer kleinen Aktion, etwa "Auf der Karte". */
.kleiner-titel-reihe {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin: 1.25rem 0 .625rem;
}
.kleiner-titel-reihe .kleiner-titel { margin: 0; }
.kleiner-titel-reihe .textknopf { flex: none; }

/* ---------- Schalterlisten ---------- */

.schalterliste {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  overflow: hidden;
}
.schalterliste .schalter + .schalter { border-top: 1px solid var(--linie); }

.schalter {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.5rem;
  padding: .625rem .875rem;
  cursor: pointer;
}
.schalter:hover { background: var(--flaeche-tief); }

.schalter-text { flex: 1; min-width: 0; }
.schalter-name { display: block; font-weight: 550; font-size: .9375rem; }
.schalter-hinweis {
  display: block;
  font-size: .8125rem;
  color: var(--tinte-leise);
}

/* Eigener Schalter statt Kästchen: größere Trefferfläche, klarer Zustand. */
.schalter input[type='checkbox'] {
  appearance: none;
  flex: none;
  width: 3rem;
  height: 1.75rem;
  margin: 0;
  background: var(--linie-stark);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background-color .18s ease;
}
.schalter input[type='checkbox']::after {
  content: '';
  position: absolute;
  top: .1875rem;
  left: .1875rem;
  width: 1.375rem;
  height: 1.375rem;
  background: var(--flaeche);
  border-radius: 50%;
  transition: transform .18s ease;
}
.schalter input[type='checkbox']:checked { background: var(--signal); }
.schalter input[type='checkbox']:checked::after { transform: translateX(1.25rem); }

/* ---------- Filterleiste der Karte ---------- */

.filterleiste {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem 1rem;
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
  overflow-x: auto;
  scrollbar-width: none;
}
.filterleiste::-webkit-scrollbar { display: none; }

/* Fokus-Band: statt der Artenschalter der Hinweis, welches Ziel gezeigt wird,
   und ein Weg zurück zur ganzen Karte. */
.fokus-text {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  flex: 1;
  min-width: 0;
  font-size: .9rem;
  font-weight: 550;
  color: var(--tinte-sanft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fokus-text .sym { flex: none; color: var(--signal); }
.fokusleiste .chip { flex: none; }

.filterknopf {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  flex: none;
  min-height: 2.75rem;
  padding: .375rem .8125rem;
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  color: #fbfcfb;
  background: var(--signal);
  border: 1px solid var(--signal);
  border-radius: 999px;
  cursor: pointer;
}
.filterknopf:active { transform: scale(.96); }
@media (prefers-color-scheme: dark) { .filterknopf { color: #12161a; } }

/* Die aktiven Arten daneben, nur zum Ablesen. */
.aktivmarke {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  flex: none;
  padding: .3125rem .625rem;
  font-size: .8125rem;
  color: var(--tinte-sanft);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------- Gruppenblöcke auf der Startseite ---------- */

.gruppenblock + .gruppenblock { margin-top: 1.5rem; }
.gruppenblock > h3,
.gruppenblock > h4 {
  margin: 0 0 .625rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}

/* ---------- Angabenliste im Blatt ---------- */

.angaben {
  margin: 0 0 1.25rem;
  display: grid;
  gap: .5rem;
}
.angaben div {
  display: flex;
  gap: .75rem;
  align-items: baseline;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--linie);
  font-size: .9375rem;
}
.angaben div:last-child { border-bottom: 0; padding-bottom: 0; }
.angaben dt { flex: 0 0 8rem; color: var(--tinte-leise); }
.angaben dd { margin: 0; flex: 1; }

/* ---------- Ortswahl-Blatt ---------- */

.suchfeld {
  width: 100%;
  min-height: 3rem;
  padding: .6875rem .875rem;
  font: inherit;
  color: var(--tinte);
  background: var(--papier);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-klein);
  margin-bottom: .875rem;
}
.suchfeld::placeholder { color: var(--tinte-leise); }
.suchfeld:focus-visible { border-color: var(--signal); }

.ortsliste {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 45dvh;
  overflow-y: auto;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
}
.ortsliste li + li { border-top: 1px solid var(--linie); }
.ortsliste .zeile { min-height: 3.25rem; }
.ortsliste .zeile[aria-current='true'] { background: var(--signal-flaeche); }
.ortsliste .zeile[aria-current='true'] .zeile-name { color: var(--signal); font-weight: 650; }

/* ---------- Fussnavigation ---------- */

.fussnav {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 30;
  display: flex;
  background: color-mix(in srgb, var(--flaeche) 94%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom);
}

.fussnav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1875rem;
  min-height: var(--nav-hoehe);
  padding: .5rem .25rem;
  font-size: .75rem;
  font-weight: 550;
  color: var(--tinte-sanft);
  text-decoration: none;
  transition: color .15s ease;
}
.fussnav a[aria-current='page'] { color: var(--signal); }
.fussnav a:active { background: var(--flaeche-tief); }

/* ---------- Platzhalter beim Laden ---------- */

.geruest {
  background: linear-gradient(90deg, var(--flaeche-tief) 25%, var(--linie) 37%, var(--flaeche-tief) 63%);
  background-size: 400% 100%;
  animation: wandern 1.4s ease infinite;
  border-radius: var(--radius-klein);
}
.geruest-zeile { height: 3.75rem; margin-bottom: 1px; }

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

/* ---------- Pakete auf der Wirte-Seite ---------- */

.paket {
  padding: 1.125rem 1.25rem 1.25rem;
  margin-bottom: .875rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}

.paket-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1rem;
  margin-bottom: .5rem;
}
.paket-kopf h3 { font-size: 1.125rem; }

.paket-preis {
  font-size: .9375rem;
  font-weight: 650;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.paket p { font-size: .9375rem; color: var(--tinte-sanft); }
.paket .regeln { margin-top: .875rem; }
.paket .knopf-reihe { margin-top: 1rem; }

/* ---------- Nummerierte Schritte ---------- */

.schritte {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
  display: grid;
  gap: .75rem;
}
.schritte li {
  counter-increment: schritt;
  position: relative;
  padding-left: 2.25rem;
  font-size: .9375rem;
  color: var(--tinte-sanft);
}
.schritte li::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: -.0625rem;
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  font-size: .8125rem;
  font-weight: 650;
  color: var(--signal);
  background: var(--signal-flaeche);
  border-radius: 50%;
}

/* ---------- Reine Textseiten: Impressum, Datenschutz ---------- */

.textseite h2 {
  margin: 1.75rem 0 .5rem;
  font-size: 1.0625rem;
  font-weight: 650;
}
.textseite h2:first-child { margin-top: 0; }
.textseite p { color: var(--tinte-sanft); font-size: .9375rem; }
.textseite ul {
  margin: 0 0 .75em;
  padding-left: 1.25rem;
  color: var(--tinte-sanft);
  font-size: .9375rem;
}
.textseite li { margin-bottom: .375rem; }
.textseite code {
  padding: .0625rem .25rem;
  background: var(--flaeche-tief);
  border-radius: 4px;
  font-size: .875em;
}

/* ---------- Hinweise, Leerzustaende ---------- */

.hinweis {
  padding: 1.25rem;
  background: var(--flaeche);
  border: 1px dashed var(--linie-stark);
  border-radius: var(--radius);
  color: var(--tinte-sanft);
  font-size: .9375rem;
}

.quellzeile {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linie);
  font-size: .8125rem;
  color: var(--tinte-leise);
}
.quellzeile p { max-width: none; }

/* ---------- Ausflug planen ---------- */

.ausflug-summe {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
}

.ausflug-halte { counter-reset: none; margin-top: 1.25rem; }

/* Start und Rückweg sind keine Ziele, sondern Klammern um die Liste. */
.ausflug-start {
  padding: .75rem 1rem;
  background: var(--flaeche-tief);
  font-size: .875rem;
  font-weight: 500;
  color: var(--tinte-sanft);
}

/* ---------- Drucken ----------

   Gedruckt wird hier tatsächlich: ein Ausflugsplan auf Papier fürs Handschuh-
   fach, eine Ortsliste für jemanden, der kein Handy dabeihaben will. Also weg
   mit allem, was auf Papier nur Platz kostet, und Adressen ausschreiben.
   -------------------------------------------------------------- */

@media print {
  :root {
    --grund: #fff;
    --papier: #fff;
    --flaeche: #fff;
    --flaeche-tief: #fff;
    --tinte: #000;
    --tinte-sanft: #333;
    --tinte-leise: #555;
    --linie: #bbb;
    --linie-stark: #888;
    --akzent: #000;
    --signal: #000;
    --schatten: none;
    --schatten-blatt: none;
  }

  html, body { background: #fff; color: #000; }

  /* Bedienelemente haben auf Papier keine Funktion. */
  .kopfzeile,
  .kopfleiste,
  .fussnav,
  .fussleiste,
  .filterleiste,
  .knopf-reihe,
  .chip,
  .blatt-zu,
  .blatt-griff,
  .sym-weiter,
  .tagesbanner,
  .kartenbuehne,
  .kartenknopf,
  .zaehlfahne { display: none !important; }

  /* Ein offenes Blatt ist beim Drucken das, was der Nutzer sehen will.
     Es wird zum normalen Textfluss, damit es nicht auf eine Seite gequetscht
     wird und der Rest der Seite dahinter verschwindet. */
  .blatt-huelle { position: static; background: none; }
  .blatt {
    position: static;
    max-height: none;
    /* Ein Scrollkasten schneidet beim Drucken auf die erste Seite ab. */
    overflow: visible;
    box-shadow: none;
    border: none;
    border-radius: 0;
    transform: none;
    animation: none;
  }
  .blatt-innen { max-height: none; overflow: visible; padding: 0; }

  main { padding: 0; }

  .zeile { padding: .375rem 0; }
  .zeile-marke, .zeile-bild { display: none; }
  .zielliste {
    border: none;
    border-radius: 0;
    background: none;
  }
  .zielliste li + li { border-top: 1px solid #ddd; }

  /* Papier kann keinem Link folgen, also steht das Ziel dabei. */
  .blatt-innen a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: .75rem;
    color: #555;
    word-break: break-all;
  }

  /* Nichts mitten im Eintrag umbrechen. */
  li, .gruppenblock, .abschnitt { break-inside: avoid; }
  h2, h3, h4 { break-after: avoid; }

  img { max-width: 60mm; }
}

/* ---------- Bewegung zurueckfahren, wenn gewuenscht ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .geruest { animation: none; background: var(--flaeche-tief); }
}