/* planmycamper.de Notbetrieb -- Stylesheet fuer die statische Ratgeber-Seite.

   Farbsystem und Typografie sind aus dem Nachfolgeprojekt uebernommen,
   damit sich der Notbetrieb erkennbar aus derselben Handschrift speist.
   Beide Faerbungen (hell/dunkel) sind uebernommen, gesteuert ueber
   prefers-color-scheme.

   Keine externen Schriften, keine CDN-Verweise, kein Zaehlpixel: nur
   Systemschriften, alles in dieser einen Datei. Ein einziges kleines,
   eingebettetes Skript (siehe _skript.html) stellt den aktiven Abschnitt im
   Inhaltsverzeichnis und den Nach-oben-Knopf -- ohne Netzzugriff, ohne
   Speicher, ohne Cookie; ohne dieses Skript bleibt die Seite vollstaendig
   lesbar und bedienbar (siehe .nach-oben unten). */

:root {
  /* Moos: die Grünskala der Seite. Ersetzt die frühere Pine-Skala
     (blaustichiges Tannengrün) durch das olivere Grün der Entwürfe --
     wärmer, näher an Zeltplane und Kiefernnadel als an Petrol. */
  --moos-900: #212a1c;
  --moos-800: #2f3a27;
  --moos-700: #445235;
  --moos-600: #586a46;
  --moos-500: #74875f;
  --moos-300: #a8b894;
  --moos-200: #c9d5b6;
  --moos-100: #e5ecd9;
  --moos-50:  #f2f6ea;

  --lehm-600: #b4531f;
  --lehm-100: #fbe8dc;

  --ink: #1d2418;
  --ink-soft: #55604c;
  /* #838d79 kam auf dem cremefarbenen Grund nur auf 3,3:1 und lag damit
     unter den 4,5:1, die WCAG AA fuer Fliesstext verlangt -- betraf u. a.
     die Lesezeit auf jeder Karte. #636c5b bringt 5,2:1 auf dem Grund,
     5,5:1 auf Weiss und 4,7:1 auf der abgesenkten Flaeche. */
  --ink-faint: #636c5b;
  --line: #e4e2d6;

  /* paper = Karten und Kopfleiste (weiß), grund = Seitenhintergrund
     (cremefarben). Vorher war beides weiß; die Trennung ist es, die
     Karten überhaupt erst als Karten lesbar macht. */
  --paper: #ffffff;
  --grund: #faf8f2;
  --paper-warm: #f6f4ec;
  --paper-sunk: #f0eee3;

  --brand: var(--moos-700);
  --brand-strong: var(--moos-800);
  --accent: var(--lehm-600);
  --clay-600: var(--lehm-600);
  --clay-100: var(--lehm-100);
  --pine-100: var(--moos-100);
  --pine-600: var(--moos-600);
  --pine-800: var(--moos-800);
  --pine-900: var(--moos-900);

  --radius: 14px;
  --radius-lg: 20px;
  --shadow: 0 1px 2px rgb(33 42 28 / 5%), 0 8px 24px rgb(33 42 28 / 6%);
  --shadow-lift: 0 2px 4px rgb(33 42 28 / 8%), 0 18px 44px rgb(33 42 28 / 13%);

  --wrap: 1180px;
  --measure: 42rem;

  /* Keine externe Schrift (siehe Kopfkommentar): Anzeigeschrift und
     Fließtext teilen sich denselben Systemstapel. Der Unterschied
     entsteht über Schnitt und Laufweite, nicht über eine zweite Datei --
     die Entwürfe setzen ebenfalls durchgehend eine Grotesk. */
  --font-text: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-text);
  /* Handschrift fuer die Randnotizen der Startseite: Caveat aus eigener
     Datei (siehe @font-face unten). Bis sie geladen ist, stehen Bradley
     Hand (macOS, iOS) bzw. Segoe Script/Print (Windows), zuletzt die
     generische Handschrift. Nur Akzent, nie Fliesstext. */
  --font-hand: "Caveat", "Bradley Hand", "Segoe Script", "Segoe Print",
    "Chalkboard SE", cursive;
}

/* Caveat, SIL Open Font License 1.1 (OFL.txt liegt daneben), selbst
   ausgeliefert -- kein Fremdabruf. Auf genau die Zeichen der Randnotizen
   gekuerzt (47 Zeichen, 8,8 KB), ohne Kontextvarianten (calt, +14 KB).
   Kommt eine Notiz mit neuen Zeichen dazu, braucht es einen neuen Schnitt
   aus fonts/ttf/Caveat-Regular.ttf (github.com/googlefonts/caveat):
     pyftsubset Caveat-Regular.ttf --text="<alle Zeichen>" --flavor=woff2
       --no-hinting --layout-features-=calt --output-file=caveat.woff2 */
@font-face {
  font-family: "Caveat";
  src: url(/assets/fonts/caveat.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eef1e9;
    --ink-soft: #bcc4b2;
    --ink-faint: #929c88;
    --line: #333d2b;
    --paper: #191f16;
    --grund: #12170f;
    --paper-warm: #1c2318;
    --paper-sunk: #222a1d;
    --brand: #9fbc80;
    --brand-strong: #b9d09e;
    --accent: #f0894a;
    --lehm-100: #33200f;
    --moos-100: #26301d;
    --moos-200: #3a4a2c;
    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 30%);
    --shadow-lift: 0 2px 4px rgb(0 0 0 / 50%), 0 16px 40px rgb(0 0 0 / 45%);
  }
}

*, *::before, *::after { box-sizing: border-box; }

/* Zweite Sicherung gegen waagerechtes Scrollen zusaetzlich zu den engeren
   Regeln unten (Tabellen-Huelle, Rubriken-Nav) -- ein einzelnes zu breites
   Element darf die ganze Seite nie seitlich verschieben. */
html { -webkit-text-size-adjust: 100%; max-width: 100%; overflow-x: hidden; }

body {
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-strong); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.18;
  margin: 0 0 .5em;
  font-weight: 750;
  letter-spacing: -.022em;
}
h1 { font-size: clamp(2rem, 1.45rem + 2.1vw, 3.1rem); }
h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem); }
h3 { font-size: clamp(1.12rem, 1rem + .45vw, 1.3rem); }

p { overflow-wrap: break-word; word-break: break-word; }

.huelle { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

/* ---------- Kopfbereich ---------- */
.sprung-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 var(--radius) 0; font-weight: 650; text-decoration: none;
}
.sprung-link:focus { left: 0; color: #fff; }

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.kopf-zeile { display: flex; align-items: center; gap: 1rem; flex-wrap: nowrap; min-height: 68px; padding-block: .6rem; }
.marke {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 750; font-size: 1.2rem;
  letter-spacing: -.025em;
  color: var(--ink); text-decoration: none; flex: none;
}
.marke:hover { color: var(--brand); }
.marke-symbol { color: var(--brand); flex: none; }
/* Zweite Worthaelfte in Markengruen, wie im Logo-Entwurf. Die Marke
   heisst PlanMyCamper, nicht planmycamper.de: Google gleicht die
   WebSite-Auszeichnung der Startseite mit dem ab, was sichtbar auf der
   Seite steht, und schrieb bis dahin den Domainnamen ueber das
   Suchergebnis. Gemessen 8.39:1 hell und 7.99:1 dunkel. */
.marke-zweitwort { color: var(--brand); font-weight: 700; }

/* min-width: 0 ist der Punkt, an dem es haengt: ohne das kann ein
   Flex-Kind nicht unter seine Inhaltsbreite schrumpfen, die Navigation
   erzwingt ihre volle Breite und schiebt Lupe und Knopf in eine dritte
   Zeile. */
.rubriken-nav { margin-left: auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.rubriken-nav::-webkit-scrollbar { display: none; }
.rubriken-nav ul { display: flex; gap: .1rem; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; justify-content: flex-end; }
.rubriken-nav a {
  display: block; padding: .45rem .55rem; border-radius: 9px;
  color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: .845rem;
  white-space: nowrap;
}
.rubriken-nav a:hover { background: var(--moos-50); color: var(--brand-strong); }

.kopf-aktionen { display: flex; align-items: center; gap: .5rem; flex: none; }
.kopf-suche {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  color: var(--ink-soft); text-decoration: none;
}
.kopf-suche:hover { background: var(--paper-sunk); color: var(--ink); }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .7rem 1.4rem; border-radius: 999px;
  font-weight: 650; font-size: .93rem; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.knopf--voll { background: var(--moos-600); color: #fff; }
.knopf--voll:hover { background: var(--moos-700); color: #fff; }
.knopf--rand { border-color: var(--line); background: var(--paper); color: var(--ink); }
.knopf--rand:hover { border-color: var(--moos-300); background: var(--moos-50); color: var(--brand-strong); }
.knopf--hell { background: var(--paper); color: var(--moos-800); }
.knopf--hell:hover { background: var(--moos-50); color: var(--moos-900); }
.knopf--klein { padding: .55rem 1.05rem; font-size: .87rem; }

@media (max-width: 900px) {
  .kopf-knopf { display: none; }
}
@media (max-width: 760px) {
  .kopf-zeile { flex-wrap: wrap; }
  .rubriken-nav { margin-left: 0; width: 100%; order: 3; overflow-x: auto; }
  .rubriken-nav ul { flex-wrap: nowrap; justify-content: flex-start; }
  .kopf-aktionen { margin-left: auto; }
}

/* nur für Screenreader */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Brotkrume ---------- */
.brotkrume { font-size: .87rem; color: var(--ink-faint); margin: 1.6rem 0 1rem; }
.brotkrume ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.brotkrume li::after { content: "›"; margin-left: .4rem; color: var(--line); }
.brotkrume li:last-child::after { content: ""; }
.brotkrume a { color: var(--ink-faint); text-decoration: none; }
.brotkrume a:hover { color: var(--brand); }

/* ---------- Artikel ---------- */
main.artikel { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; padding-bottom: 4rem; }
main.artikel h1 { margin-top: 0; }
/* Auf Artikelseiten schafft die Brotkrume den Abstand zur Kopfleiste. Auf
   404, 410, Impressum und Datenschutz gibt es keine -- dort klebte die
   Ueberschrift sonst direkt unter der Leiste. */
main.artikel > h1:first-child { margin-top: 2.75rem; }
.rechtstext { max-width: 52rem; }
.rechtstext .artikel-rumpf { font-size: 1.02rem; }

/* ---------- Artikelkopf ---------- */
/* Der Aufmacher lag früher zweispaltig neben der Überschrift und war
   dadurch klein und beliebig. Jetzt steht er in voller Spaltenbreite
   unter Kennzeichen, Titel und Metazeile -- dieselbe Ordnung wie in den
   Entwürfen und die, in der man einen Artikel auch liest. */
.artikel-huelle { position: relative; }
.artikel-hauptspalte { position: relative; }
.artikel-kopf { margin-bottom: 1.6rem; }
.artikel-kopf h1 {
  margin: 0 0 .9rem; font-size: clamp(1.9rem, 1.3rem + 2vw, 2.7rem);
  line-height: 1.08; letter-spacing: -.03em;
}
/* Handschriftliche Randnotiz am Kopf (Baustein :::notiz im Rumpf, per
   position: absolute an den Kopf der Hauptspalte geholt); die H1 laesst
   ihr rechts Platz. Auf schmalen Breiten weg. */
.kopfnotiz {
  position: absolute; right: 0; top: -.4rem; max-width: 13rem; text-align: center;
  transform: rotate(-6deg); font-size: 1.45rem; z-index: 1;
}
.kopfnotiz .kritzel { display: block; width: 44px; height: auto; margin: .3rem auto 0; color: var(--ink-soft); }
.artikel-hauptspalte--mit-notiz .artikel-kopf h1 { padding-right: 12rem; }
/* Aquarell-Tannen am rechten Seitenrand, hinter allem. */
.wald--artikel { right: -3rem; top: 4.5rem; width: clamp(8rem, 12vw, 13rem); opacity: .45; z-index: 0; }
.artikel { position: relative; z-index: 1; }
@media (max-width: 1100px) {
  .kopfnotiz, .wald--artikel { display: none; }
  .artikel-hauptspalte--mit-notiz .artikel-kopf h1 { padding-right: 0; }
}

.kennzeichen {
  display: inline-block; margin: 0 0 1rem;
  padding: .35rem .85rem; border-radius: 999px;
  background: var(--moos-100); color: var(--moos-800);
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  text-decoration: none;
}
.kennzeichen:hover { background: var(--moos-200); color: var(--moos-900); }

.artikel-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem;
  margin: 0; color: var(--ink-faint); font-size: .89rem;
}
.meta-teil { display: inline-flex; align-items: center; gap: .45rem; }
.meta-teil svg { flex: none; }

.aufmacher-bild-huelle { margin: 0 0 1.9rem; }

/* Herkunftshinweis unter den grossen Abbildungen. Alle Bilder dieser Seite
   sind KI-generiert; Art. 50 Abs. 4 KI-VO verlangt die Offenlegung bei
   Inhalten, die authentisch wirken koennen, und das Impressum sagt sie zu.
   Bewusst sichtbar und nicht nur im alt-Text: alt ist fuer Screenreader da,
   nicht fuer die Offenlegung. */
.bild-herkunft {
  margin: .5rem 0 0;
  font-size: .8rem;
  color: var(--ink-soft);
  letter-spacing: .01em;
}
img.aufmacher {
  width: 100%; height: auto; margin: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* ---------- Zweispaltiger Rumpf: Seitenspalte + Artikeltext ---------- */
.artikel-grid {
  display: grid; grid-template-columns: 230px minmax(0, 46rem);
  align-items: start; gap: clamp(1.75rem, 3vw, 3rem);
  margin-top: 2rem;
}

.artikel-hauptspalte { min-width: 0; }

/* Karte: gemeinsamer Rahmen für Inhaltsverzeichnis, "Auf einen Blick"
   und den Rubrikkasten in der Seitenspalte. Vorher schwebten die drei
   ohne Begrenzung im Weißraum und wirkten wie Reste. */
.karte {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.15rem 1.2rem;
}
.seitenkasten-titel {
  margin: 0 0 .4rem; font-weight: 700; font-size: .95rem; color: var(--ink);
}
.seitenkasten-text { margin: 0 0 .9rem; font-size: .87rem; color: var(--ink-soft); }

.seitenspalte {
  position: sticky; top: 92px;
  display: flex; flex-direction: column; gap: 1.5rem;
  max-height: calc(100vh - 104px); overflow-y: auto; overflow-x: hidden;
  padding-bottom: .5rem;
}

.toc-seitlich { font-size: .87rem; }
/* <summary> statt <p>: ein natives, skriptloses Auf-/Zuklappen fuer sehr
   lange Inhaltsverzeichnisse (35-Minuten-Artikel mit weit ueber 20
   Ueberschriften wuerden auf schmalen Breiten sonst 2000px reine Linkliste
   vor den eigentlichen Text schieben). Standardmaessig offen (<details
   open> im Template), Pfeil dreht sich rein per CSS. */
.toc-titel {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-weight: 700; font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--brand-strong); margin: 0 0 .7rem; cursor: pointer;
  list-style: none;
}
.toc-titel::-webkit-details-marker { display: none; }
.toc-titel::after {
  content: ""; flex: none; width: .5rem; height: .5rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s ease; margin-top: -.15em;
}
details[open] > .toc-titel::after { transform: rotate(-135deg); margin-top: .15em; }
.toc-seitlich ul { list-style: none; margin: 0; padding: 0; }
.toc-seitlich li { margin: .3rem 0; }
.toc-seitlich li > ul { margin: .3rem 0 .3rem 0; padding-left: .9rem; border-left: 2px solid var(--line); }
.toc-link {
  display: block; padding: .15rem 0 .15rem .6rem; margin-left: -.6rem;
  border-left: 2px solid transparent; line-height: 1.4;
  color: var(--ink-soft); text-decoration: none;
  overflow-wrap: break-word; word-break: break-word;
}
.toc-link:hover { color: var(--ink); }
.toc-link.aktiv {
  color: var(--brand-strong); font-weight: 700; border-left-color: var(--brand);
  background: var(--pine-100); border-radius: 0 6px 6px 0;
}

.blick-kasten {
  /* Rahmen und Grund kommen aus .karte */
  padding: 1.1rem 1.2rem 1.2rem;
  background: var(--pine-100); border: 1px solid var(--line); border-radius: var(--radius);
}
.blick-titel {
  font-weight: 700; font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--brand-strong); margin: 0 0 .75rem;
}
.blick-liste { list-style: none; margin: 0 0 .9rem; padding: 0; }
.blick-liste li {
  display: flex; align-items: flex-start; gap: .55rem; padding: .55rem 0;
  border-top: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
}
.blick-liste li:first-child { border-top: none; padding-top: 0; }
.blick-symbol { flex: none; margin-top: .25em; color: var(--brand-strong); }
/* min-width: 0 ist hier kein Kosmetik-Detail: Flex-Kinder duerfen ohne das
   nie unter ihre Inhaltsbreite schrumpfen (CSS-Default min-width: auto),
   ein einzelnes langes Wort im Wert (z. B. "Kompressor") haette sonst die
   230px schmale Seitenspalte gesprengt und dort einen eigenen, zweiten
   waagerechten Scrollbalken erzeugt -- genau das, was fuer die ganze Seite
   ausdruecklich ausgeschlossen ist. */
.blick-inhalt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1 1 auto; }
.blick-name { font-size: .78rem; color: var(--ink-faint); }
.blick-wert {
  font-size: .88rem; font-weight: 700; color: var(--ink);
  overflow-wrap: break-word; word-break: break-word;
}
/* Kernaussagen aus :::auf-einen-blick: ein Satz je Zeile, kein Name/Wert. */
.blick-liste--punkte li { align-items: flex-start; }
.blick-punkt { font-size: .88rem; font-weight: 600; color: var(--ink); line-height: 1.4; }
.blick-link {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .82rem; font-weight: 650; color: var(--brand-strong); text-decoration: none;
}
.blick-link::after { content: "→"; }
.blick-link:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .artikel-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .seitenspalte { position: static; max-height: none; overflow: visible; }
  /* Auf schmalen Breiten loesen sich Seitenspalte und Hauptspalte auf
     (display: contents), ihre Kinder werden Rasterzellen und lassen sich
     ordnen: Titel, Aufmacher, "Auf einen Blick", Inhaltsverzeichnis, Text,
     Rubrikkasten zuletzt. Vorher stand der Titel erst unter drei Kaesten,
     rund 860 px tief. */
  .seitenspalte, .artikel-hauptspalte { display: contents; }
  .artikel-kopf { order: 1; margin-bottom: 0; }
  .aufmacher-bild-huelle { order: 2; margin-bottom: 0; }
  .blick-kasten { order: 3; }
  .toc-seitlich { order: 4; }
  .einleitung { order: 5; margin: 0; }
  .artikel-hauptspalte > .hinweis { order: 6; margin: 0; }
  .artikel-rumpf { order: 7; }
  .newsletter--artikel { order: 8; }
  .seitenkasten { order: 9; }
  /* Etwas groessere Fingerziele fuer Brotkrume und Inhaltsverzeichnis. */
  .brotkrume a { display: inline-block; padding: .35rem 0; }
  .toc-titel { padding: .3rem 0; }
}

.artikel-rumpf { font-size: 1.06rem; min-width: 0; }
.artikel-rumpf > * + * { margin-top: 1.15em; }
.artikel-rumpf h2 { margin-top: 2.1em; scroll-margin-top: 88px; position: relative; }
.artikel-rumpf h3 { margin-top: 1.7em; scroll-margin-top: 88px; }
/* Kein Akzentstrich mehr unter den Zwischentiteln (Entwurf 07.09.2026):
   die Rangfolge traegt die Groesse allein. */
.artikel-rumpf h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); letter-spacing: -.02em; line-height: 1.15; }
.artikel-rumpf h3 { font-size: 1.22rem; letter-spacing: -.01em; }
.artikel-rumpf ul, .artikel-rumpf ol { padding-left: 1.35em; }
.artikel-rumpf li + li { margin-top: .4em; }
.artikel-rumpf img { border-radius: var(--radius); margin-block: 1.5em; }
.artikel-rumpf code { background: var(--paper-sunk); padding: .15em .4em; border-radius: 5px; font-size: .9em; }
/* Ein <pre>-Block (z. B. ASCII-Schaltplan) ist von Natur aus unwillig, seine
   Zeilen umzubrechen -- ohne eigene Scroll-Huelle waere er wie eine Tabelle
   ohne .tabellen-huelle: von body { overflow-x: hidden } unsichtbar
   abgeschnitten statt lesbar. Eigene Huelle nach demselben Muster wie
   .tabellen-huelle, damit der Block scrollt, nicht die Seite. */
.artikel-rumpf pre {
  overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
  background: var(--paper-sunk); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.15rem;
  font-size: .85rem; line-height: 1.55;
}
.artikel-rumpf pre code { background: none; padding: 0; border-radius: 0; font-size: inherit; white-space: pre; }

/* ---------- Tabellen ---------- */
.tabellen-huelle {
  overflow-x: auto; margin: 1.75rem 0; max-width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.tabellen-huelle table { margin: 0; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th, td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
thead th {
  background: var(--paper-sunk); font-weight: 700; color: var(--ink);
  font-size: .82rem; letter-spacing: .03em; text-transform: uppercase;
  border-bottom: 2px solid var(--line);
}
tbody tr:nth-child(even) { background: var(--paper-warm); }
tbody tr:last-child td { border-bottom: none; }
table#auf-einen-blick-tabelle { scroll-margin-top: 96px; }

/* ---------- Hinweiskaesten (Blockzitate mit fetter Titelzeile) ---------- */
blockquote, .hinweiskasten {
  margin: 1.75rem 0; padding: 1.15rem 1.35rem 1.2rem;
  background: var(--paper-warm); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
blockquote p:first-child { margin-top: 0; }
blockquote p:last-child { margin-bottom: 0; }
blockquote p:first-child strong {
  display: block; font-size: .74rem; font-weight: 750; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: .35rem;
}

/* Symbol je Kastenart wie im Entwurf: farbiger Kreis (::before) und ein
   weisses Zeichen als Maske (::after). Die Zeichen stehen als data:-SVG
   im CSS -- kein Netzzugriff -- und die Kastenart setzt nur --symbol. */
.hinweiskasten {
  position: relative; padding-left: 4.2rem;
  --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E");
}
.hinweiskasten::before, .hinweiskasten::after {
  content: ""; position: absolute; left: 1.2rem; top: 1.1rem; width: 2.1rem; height: 2.1rem;
}
.hinweiskasten::before { border-radius: 50%; background: var(--ink-faint); }
.hinweiskasten::after {
  background: #fff;
  -webkit-mask: var(--symbol) center / 1.2rem 1.2rem no-repeat;
  mask: var(--symbol) center / 1.2rem 1.2rem no-repeat;
}
.hinweiskasten--kurz-gesagt {
  background: var(--pine-100); border-color: color-mix(in srgb, var(--brand) 25%, transparent);
  --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6'/%3E%3C/svg%3E");
}
.hinweiskasten--kurz-gesagt p:first-child strong { color: var(--brand-strong); }
.hinweiskasten--kurz-gesagt::before { background: var(--brand); }
.hinweiskasten--tipp {
  background: var(--pine-100); border-color: color-mix(in srgb, var(--brand) 25%, transparent);
  --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-4 10.5c.6.6 1 1.3 1 2.1V16h6v-.4c0-.8.4-1.5 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
}
.hinweiskasten--tipp p:first-child strong { color: var(--brand-strong); }
.hinweiskasten--tipp::before { background: var(--brand); }
.hinweiskasten--hinweis {
  --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 11v6M12 7h.01'/%3E%3C/svg%3E");
}
.hinweiskasten--hinweis p:first-child strong { color: #33729a; }
.hinweiskasten--hinweis::before { background: #3b7ea1; }
.hinweiskasten--achtung, .hinweiskasten--wichtig {
  background: var(--clay-100); border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.hinweiskasten--achtung p:first-child strong, .hinweiskasten--wichtig p:first-child strong { color: #a84b1a; }
.hinweiskasten--achtung::before, .hinweiskasten--wichtig::before { background: var(--accent); }
.hinweiskasten--gefahr {
  background: color-mix(in srgb, #c0392b 8%, var(--paper)); border-color: color-mix(in srgb, #c0392b 30%, transparent);
}
.hinweiskasten--gefahr p:first-child strong { color: #c0392b; }
.hinweiskasten--gefahr::before { background: #c0392b; }

@media (prefers-color-scheme: dark) {
  .hinweiskasten--achtung p:first-child strong, .hinweiskasten--wichtig p:first-child strong { color: var(--accent); }
  .hinweiskasten--gefahr p:first-child strong { color: #e0837a; }
  .hinweiskasten--hinweis p:first-child strong { color: #7fb3d0; }
}

@media (max-width: 480px) {
  .hinweiskasten { padding-left: 1.3rem; padding-top: 3.5rem; }
}

/* ---------- Artikel: Bausteine (src/bausteine.py) ----------
   Kurzfassung, Pro/Contra, Checkliste, Vergleich, Schritte, Fazit-Band --
   Entwurf der Artikelseite vom 07.09.2026. Farben nur aus einer Sorte je
   Regel; die Aquarelle liegen als Hintergrund von Pseudo-Elementen, damit
   kein <img> im Rumpf steht. */
.baustein { margin: 2.4rem 0; overflow-wrap: break-word; }
.baustein .vorzeile { margin-bottom: .5rem; }
.baustein-titel {
  margin: 0 0 .6rem; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  letter-spacing: -.025em; line-height: 1.1;
}
.baustein-anriss { color: var(--ink-soft); max-width: 40rem; }
.baustein-anriss > :first-child { margin-top: 0; }
.baustein-anriss > :last-child { margin-bottom: 0; }
.baustein-verweise { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 0; }
.baustein-notiz { font-size: 1.35rem; }

/* Kurzfassung: blassgruene Karte mit Tannen in der Ecke */
.kurzfassung {
  position: relative; overflow: hidden; padding: clamp(1.5rem, 3vw, 2.4rem);
  border-radius: var(--radius-lg); background: var(--moos-100); color: var(--ink);
}
.kurzfassung::before {
  content: ""; position: absolute; right: -3rem; bottom: -3.5rem; width: clamp(7rem, 24%, 10rem);
  aspect-ratio: 900 / 846; opacity: .35; pointer-events: none;
  background: url(/assets/bilder/tannen.webp) center / contain no-repeat;
}
.kurzfassung > * { position: relative; }
.kurzfassung .vorzeile {
  display: inline-flex; padding: .35rem .8rem; border-radius: 999px;
  background: var(--brand); color: #fff;
}
.kurzfassung .vorzeile::before { display: none; }
.kurzfassung-fakten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.6rem), 1fr));
  gap: 1.2rem 1rem; list-style: none; margin: 1.5rem 0 0; padding: 0;
}
.kurzfassung-fakten li { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; color: var(--ink-soft); }
.kurzfassung-fakten li + li { margin: 0; }
.kurzfassung-fakten strong { color: var(--ink); font-size: .95rem; }
.kurzfassung-symbol {
  width: 2.6rem; height: 2.6rem; padding: .6rem; border-radius: 50%;
  background: var(--paper); color: var(--brand-strong); margin-bottom: .35rem;
}
/* Aquarell-Illustration (transparent) rechts in der Karte; der KI-Hinweis
   steht klein darunter. Auf schmalen Breiten ueber den Fakten. */
.kurzfassung-bild { float: right; width: min(42%, 17rem); margin: -.5rem 0 .75rem 1.5rem; }
.kurzfassung-bild img { width: 100%; height: auto; display: block; }
.kurzfassung-bild .bild-herkunft { margin: .25rem 0 0; font-size: .7rem; text-align: right; color: var(--ink-faint); }
.vergleich-bild { margin: 0 0 1rem; }
.vergleich-bild img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.vergleich-bild .bild-herkunft { margin: .25rem 0 0; font-size: .7rem; color: var(--ink-faint); }
@media (max-width: 640px) {
  .kurzfassung-bild { float: none; width: min(100%, 16rem); margin: 0 auto .5rem; }
}
.kurzfassung-notiz { position: absolute; right: 1.5rem; bottom: 1rem; transform: rotate(-5deg); }

/* Pro/Contra: zwei Spalten, gruen und ton */
.pro-contra-spalten {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-top: 1.4rem;
}
.pro-contra-spalte { padding: 1.3rem 1.4rem 1.4rem; border-radius: var(--radius-lg); border: 1px solid var(--line); }
.pro-contra-spalte--pro { background: var(--pine-100); color: var(--ink); }
.pro-contra-spalte--contra { background: var(--clay-100); color: var(--ink); }
.pro-contra-titel { display: flex; align-items: center; gap: .7rem; margin: 0 0 .9rem; font-size: 1.15rem; }
.pro-contra-symbol { flex: none; width: 2.1rem; height: 2.1rem; padding: .45rem; border-radius: 50%; color: #fff; }
.pro-contra-spalte--pro .pro-contra-symbol { background: var(--brand); }
.pro-contra-spalte--contra .pro-contra-symbol { background: var(--accent); }
.pro-contra-spalte ul { list-style: none; margin: 0; padding: 0; }
.pro-contra-spalte li { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem 0; font-size: .95rem; }
.pro-contra-spalte li + li { margin: 0; }
.pro-contra-punkt-symbol { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .15rem; }
.pro-contra-spalte--pro .pro-contra-punkt-symbol { color: var(--brand-strong); }
.pro-contra-spalte--contra .pro-contra-punkt-symbol { color: var(--accent); }

/* Checkliste: gerissener Zettel, jede Zeile eine Karte mit Kaestchen */
.checkliste {
  position: relative;
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.2rem, 3vw, 2rem) clamp(1.6rem, 3vw, 2.4rem);
  background: var(--paper-sunk); color: var(--ink);
  clip-path: polygon(0 1.5%, 6% 0, 13% 1%, 22% 0, 31% 1.2%, 40% 0, 50% 1%, 60% 0, 70% 1.2%, 80% 0, 90% 1%,
    100% .5%, 100% 98.5%, 93% 100%, 84% 99%, 74% 100%, 64% 98.8%, 54% 100%, 44% 99%, 34% 100%, 24% 98.8%,
    14% 100%, 5% 99%, 0 100%);
}
.checkliste-liste { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.checkliste-liste li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  padding: .9rem 1.1rem; border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow);
}
.checkliste-liste li + li { margin: 0; }
.checkliste-symbol { width: 2.6rem; height: 2.6rem; padding: .65rem; border-radius: 50%; background: var(--brand); color: #fff; }
.checkliste-text { font-size: .93rem; color: var(--ink-soft); line-height: 1.45; }
.checkliste-text strong { display: block; color: var(--ink); font-size: 1rem; margin-bottom: .1rem; }
.checkliste-kasten { width: 1.35rem; height: 1.35rem; border: 2px solid var(--ink-faint); border-radius: 5px; }
.checkliste-notiz { position: absolute; right: 2rem; top: 1.2rem; transform: rotate(-6deg); text-align: right; }

/* Vergleich: Karten nebeneinander, eine davon mit Empfehlung */
.vergleich-gitter {
  display: grid; gap: 1.1rem; margin-top: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
/* Zwei oder vier Karten: zwei Spalten, sonst bleibt eine Karte allein in
   der zweiten Reihe. */
.vergleich-gitter--2, .vergleich-gitter--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Fuenf Karten: drei oben, zwei mittig darunter statt einer Luecke rechts.
   Sechs Spalten, jede Karte zwei breit, die vierte rueckt eine Spalte ein. */
@media (min-width: 761px) {
  .vergleich-gitter--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .vergleich-gitter--5 > * { grid-column: span 2; }
  .vergleich-gitter--5 > :nth-child(4) { grid-column: 2 / span 2; }
}
@media (min-width: 601px) and (max-width: 760px) {
  .vergleich-gitter--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vergleich-gitter--5 > :nth-child(5) { grid-column: span 2; }
}
@media (max-width: 600px) {
  .vergleich-gitter--2, .vergleich-gitter--4, .vergleich-gitter--5 { grid-template-columns: minmax(0, 1fr); }
}
.vergleich-karte {
  position: relative; display: flex; flex-direction: column; padding: 1.4rem 1.3rem 1.3rem;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow);
}
.vergleich-karte--empfehlung { border-color: var(--brand); box-shadow: 0 0 0 3px var(--moos-100), var(--shadow-lift); }
.vergleich-abzeichen {
  position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: .3rem .85rem; border-radius: 999px; background: var(--brand); color: #fff;
  font-size: .74rem; font-weight: 700; letter-spacing: .04em;
}
.vergleich-name { margin: 0; font-size: 1.35rem; letter-spacing: -.02em; text-align: center; }
.vergleich-unter { margin: .2rem 0 1rem; text-align: center; color: var(--ink-soft); font-size: .9rem; }
.vergleich-bild { width: 100%; border-radius: var(--radius); margin: 0 0 1rem; }
.vergleich-zeilen { margin: 0; display: flex; flex-direction: column; }
.vergleich-zeile {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .8rem;
  padding: .85rem 0; border-top: 1px solid var(--line);
}
.vergleich-zeile:first-child { border-top: none; padding-top: 0; }
.vergleich-symbol {
  grid-row: span 2; width: 2.2rem; height: 2.2rem; padding: .45rem; border-radius: 8px;
  background: var(--moos-100); color: var(--brand-strong);
}
.vergleich-zeile dt { font-weight: 700; font-size: .92rem; }
.vergleich-zeile dd { margin: 0; font-size: .88rem; color: var(--ink-soft); line-height: 1.45; }

/* Schritte: nummerierte Karten an einer gestrichelten Route */
.schritte-liste {
  position: relative; list-style: none; margin: 1.4rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 1.6rem;
}
.schritte-liste::before {
  content: ""; position: absolute; left: 1.3rem; top: 1rem; bottom: 1rem;
  border-left: 2px dashed var(--moos-300);
}
.schritt { position: relative; display: grid; grid-template-columns: 2.7rem minmax(0, 1fr) auto; gap: 1rem; align-items: start; }
.schritt + .schritt { margin: 0; }
.schritt-nummer {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 2.7rem; height: 2.7rem; border-radius: 50%;
  background: var(--brand); color: #fff; font-weight: 750; font-size: 1.05rem;
}
.schritt-karte {
  padding: 1.2rem 1.4rem 1.3rem; border-radius: var(--radius-lg);
  background: var(--paper); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.schritt-titel { margin: 0; font-size: 1.3rem; letter-spacing: -.02em; }
.schritt-unter {
  margin: .2rem 0 .7rem; font-size: .74rem; font-weight: 750; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand-strong);
}
.schritt-karte p { margin: .5rem 0 0; font-size: .95rem; color: var(--ink-soft); }
.schritt-karte .baustein-verweise { margin-top: .9rem; }
.schritt-symbol { width: 3.2rem; height: 3.2rem; color: var(--brand); align-self: center; }
.schritt-notiz { grid-column: 3; transform: rotate(-6deg); }

/* Fazit-Band: Bergzug hinter dem Text, Tannen links unten */
.fazit-band {
  position: relative; overflow: hidden;
  padding: clamp(1.8rem, 4vw, 2.8rem) clamp(1.4rem, 3vw, 2.4rem);
  border-radius: var(--radius-lg); background: var(--moos-100); color: var(--ink);
}
.fazit-band::before {
  content: ""; position: absolute; inset: 0; opacity: .32; pointer-events: none;
  background: url(/assets/bilder/berge.webp) center bottom / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 10%, #000 65%);
  mask-image: linear-gradient(to bottom, transparent 10%, #000 65%);
}
.fazit-band::after {
  content: ""; position: absolute; left: -1.5rem; bottom: -1.5rem; width: clamp(7rem, 22%, 11rem);
  aspect-ratio: 900 / 846; opacity: .45; pointer-events: none;
  background: url(/assets/bilder/tannen.webp) center / contain no-repeat;
}
.fazit-inhalt { position: relative; z-index: 1; max-width: 36rem; margin-left: auto; }
.fazit-text > :last-child { margin-bottom: 0; }
.fazit-notiz { position: absolute; left: 1.5rem; top: 1.2rem; z-index: 1; transform: rotate(-6deg); }
/* Lange Verweistexte ("Zur Kauf-Checkliste fuer den gebrauchten Ducato") duerfen
   umbrechen, sonst laeuft der Knopf auf 375 px aus dem Band. */
.fazit-band .knopf { white-space: normal; text-align: center; }

@media (prefers-color-scheme: dark) {
  .fazit-band::before { opacity: .2; }
  .fazit-band::after, .kurzfassung::before { opacity: .25; }
}
@media (max-width: 640px) {
  .pro-contra-spalten { grid-template-columns: minmax(0, 1fr); }
  /* Schmale Spalte: weniger Rand, kleineres Symbol, Silbentrennung fuer lange Komposita. */
  .baustein { hyphens: auto; }
  .checkliste { padding: 1.3rem .9rem 1.5rem; }
  .checkliste-liste li { grid-template-columns: auto minmax(0, 1fr); gap: .7rem; padding: .8rem .85rem; }
  .checkliste-symbol { width: 2.2rem; height: 2.2rem; padding: .55rem; }
  .checkliste-kasten, .checkliste-notiz { display: none; }
  .schritt { grid-template-columns: 2.2rem minmax(0, 1fr); gap: .7rem; }
  .schritt-nummer { width: 2.2rem; height: 2.2rem; font-size: .95rem; }
  .schritte-liste::before { left: 1.05rem; }
  .schritt-karte { padding: 1rem 1.1rem 1.1rem; }
  /* Gesperrte Versalien brechen sonst mitten im Wort (SPITZENLEISTUN-G). */
  .schritt-unter { font-size: .7rem; letter-spacing: .06em; hyphens: auto; }
  .schritt-symbol, .schritt-notiz { display: none; }
  .fazit-inhalt { max-width: none; }
}

/* ---------- Produktkarten (bewusst ohne Bild) ---------- */
.produktkarte {
  margin: 1.75em 0; border: 1px solid var(--line); border-left: 6px solid var(--accent);
  border-radius: var(--radius); background: var(--paper-warm);
  box-shadow: var(--shadow); overflow: hidden;
}
.produktkarte-inhalt { padding: 1.25rem 1.4rem; }
.produktkarte-name { margin: 0 0 .5rem; font-weight: 700; font-size: 1.1rem; }
.produktkarte-name a { color: var(--ink); text-decoration: none; }
.produktkarte-name a:hover { color: var(--brand); }
.produktkarte-text {
  position: relative; margin: 0 0 1.15rem; padding-left: 1.5rem;
  color: var(--ink-soft); font-size: .93rem;
}
.produktkarte-text::before {
  content: "✓"; position: absolute; left: 0; top: .05em;
  color: var(--brand-strong); font-weight: 700;
}
/* Preis und Stand. Bewusst zurueckhaltend: der Preis ist eine Angabe, kein
   Werbeelement -- Groesse und Gewicht des Knopfs waeren hier fehl am Platz.
   Das Stand-Datum steht im selben Absatz und nicht kleiner: es ist Teil der
   Aussage, nicht ihr Kleingedrucktes. tabular-nums, damit gestapelte Karten
   nicht springen. */
.produktkarte-preis {
  margin: 0 0 .9rem; font-size: .95rem; font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.produktkarte-fuss { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; margin: 0; }
.produktkarte-knopf {
  display: inline-flex; align-items: center; padding: .65rem 1.35rem;
  border-radius: 999px; background: var(--brand); color: #fff;
  text-decoration: none; font-weight: 650; font-size: .92rem;
  box-shadow: 0 1px 2px rgb(16 36 28 / 15%);
}
.produktkarte-knopf:hover { background: var(--brand-strong); color: #fff; }
@media (prefers-color-scheme: dark) {
  .produktkarte-knopf, .produktkarte-knopf:hover { color: var(--pine-900); }
}
.produktkarte-anzeige {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-faint);
}

/* ---------- Werbe-/Archivhinweis ---------- */
/* Der Werbehinweis ist eine Kennzeichnungspflicht (§ 5a UWG). Er darf
   ruhig sein, aber nicht blass: --ink-soft statt --ink-faint bringt ihn
   von 3,0:1 auf 5,7:1 gegen die Flaeche, auf der er steht. */
.hinweis {
  margin: 2rem 0; padding: 1rem 1.3rem; background: var(--paper-sunk);
  border-radius: var(--radius); font-size: .89rem; color: var(--ink-soft);
}

/* ---------- Startseite: Gestaltungsmittel ----------

   Der Entwurf vom 05.09.2026: Foto-Held mit Randnotizen in Handschrift,
   Wellenkanten zwischen den Abschnitten, blassgruene Baender, Tannen- und
   Bergsilhouetten hinter dem Inhalt. Alles ohne Bilddateien ausser den
   beiden Fotos: SVG im Markup, Farben aus den Token, damit hell und dunkel
   dieselbe Regel teilen. */
main.start { padding-bottom: 0; }

/* Vorzeile ueber Abschnittstiteln: Versalien, gesperrt, kleiner Stern davor. */
.vorzeile {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .7rem;
  font-size: .74rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase;
  color: var(--brand-strong);
}
.vorzeile::before {
  content: ""; flex: none; width: .6em; height: .6em; background: currentColor;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

/* Handschrift: Randnotizen wie im Entwurf. Der Lichthof in Grundfarbe haelt
   sie auch dort lesbar, wo sie ueber dem Foto stehen. */
.handschrift {
  margin: 0; font-family: var(--font-hand); font-size: 1.6rem; line-height: 1.15;
  color: var(--ink); text-shadow: 0 0 8px var(--grund), 0 0 2px var(--grund);
}
.handschrift--gross { font-size: 2rem; }
.handpfeil { display: block; width: 56px; height: auto; color: var(--ink-soft); }
.handpfeil--links { transform: scaleX(-1) rotate(-20deg); }
.handpfeil--rechts { transform: rotate(-30deg); }

/* Wellenkante zwischen zwei Abschnitten: die Farbe des NACHBARN frisst sich
   in den Abschnitt. Oben traegt sie die Farbe des vorigen Abschnitts, unten
   (gespiegelt) die des naechsten. */
.welle {
  position: absolute; left: 0; right: 0; width: 100%; height: clamp(22px, 3.5vw, 48px);
  display: block; pointer-events: none;
}
.welle--oben { top: -1px; }
.welle--unten { bottom: -1px; transform: scaleY(-1); }

/* Aquarell-Tannen und -Berge (freigestellte WebP mit Alpha aus
   src/vorlagen/bilder) als Hintergrund leerer <span>: rein dekorativ, kein
   <img> im Markup. Hinter dem Inhalt, im Dunkelmodus gedaempfter, damit das
   Gruen auf dunklem Grund nicht leuchtet. */
.wald {
  position: absolute; aspect-ratio: 900 / 846; opacity: .62; pointer-events: none;
  background: url(/assets/bilder/tannen.webp) center / contain no-repeat;
}
/* Der Bergzug fuellt das ganze Band; die Maske blendet ihn nach oben aus,
   damit auf sehr breiten Fenstern (cover schneidet dann oben) keine harte
   Kante entsteht. */
.berge {
  position: absolute; inset: 0; opacity: .42; pointer-events: none;
  background: url(/assets/bilder/berge.webp) center bottom / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 8%, #000 60%);
  mask-image: linear-gradient(to bottom, transparent 8%, #000 60%);
}
@media (prefers-color-scheme: dark) {
  .wald { opacity: .3; }
  .berge { opacity: .22; }
}

/* Knopf mit Pfeil; "bald verfuegbar" sieht aus wie ein Knopf, fuehrt aber
   noch nirgends hin -- deshalb ein <span> ohne Verweis und ohne Zeiger. */
.knopf--pfeil::after { content: "→"; }
.knopf--bald { cursor: default; }

/* Blassgruene Baender (Themen, Werkzeuge): --moos-100 schaltet mit um, der
   Text darauf ist --ink -- beide aus derselben Sorte. */
.band {
  position: relative; overflow: hidden; background: var(--moos-100); color: var(--ink);
  padding: clamp(3.5rem, 6vw, 5.5rem) 0;
}
.band .welle { color: var(--grund); }
.band-innen { position: relative; z-index: 1; }

/* ---------- Startseite: Held ---------- */
.held {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(2rem, 4vw, 4rem) 0 clamp(4rem, 7vw, 6.5rem);
}
.held .welle { color: var(--paper); }
.held-zeile {
  display: grid; grid-template-columns: minmax(0, 31rem) minmax(0, 1fr);
  gap: 1.5rem clamp(1.5rem, 4vw, 4rem); align-items: start; min-height: 29rem;
}
.held-text { min-width: 0; padding-top: 1rem; }
.held-text h1 {
  margin: 0 0 1.1rem; font-size: clamp(2.4rem, 1.5rem + 3.2vw, 4rem);
  line-height: 1.04; letter-spacing: -.032em;
}
.held-text h1 .betont { font-style: normal; }
.betont { color: var(--moos-600); }
@media (prefers-color-scheme: dark) { .betont { color: var(--brand); } }
.held-anriss {
  margin: 0 0 1.6rem; max-width: 29rem;
  font-size: clamp(1.02rem, .97rem + .25vw, 1.15rem); color: var(--ink-soft);
}
.held-knoepfe { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0 0 1.5rem; }
.held-beleg {
  display: flex; align-items: center; gap: .65rem; margin: 0; max-width: 29rem;
  font-size: .86rem; color: var(--ink-soft);
}
.held-beleg svg { flex: none; width: 30px; height: 30px; color: var(--brand); }

/* Das Foto liegt hinter dem ganzen Held; ein Verlauf in Grundfarbe haelt
   das linke Drittel frei fuer den Text. */
.held-foto { position: absolute; inset: 0; z-index: -2; margin: 0; }
.held-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 60%; }
.held-foto::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--grund) 0%, var(--grund) 36%,
      color-mix(in srgb, var(--grund) 80%, transparent) 50%,
      color-mix(in srgb, var(--grund) 15%, transparent) 70%, transparent 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--grund) 45%, transparent), transparent 30%,
      transparent 75%, color-mix(in srgb, var(--grund) 35%, transparent));
}
.held-foto .bild-herkunft {
  position: absolute; right: 1rem; bottom: clamp(2rem, 4.5vw, 3.6rem); margin: 0;
  padding: .2rem .65rem; border-radius: 999px;
  background: color-mix(in srgb, var(--grund) 80%, transparent); color: var(--ink-soft);
  font-size: .72rem;
}
/* Ganz in die linke untere Ecke und hinter den Text (z-index -1 liegt
   ueber dem Foto auf -2, aber unter dem Fliesstext). */
.wald--held {
  left: -2rem; bottom: clamp(22px, 3.5vw, 48px); width: clamp(9rem, 13vw, 18rem);
  z-index: -1; opacity: .5;
}

.held-buehne { position: relative; min-height: 26rem; }
.held-route { position: absolute; left: 6%; top: 4%; width: 46%; height: auto; color: var(--brand); }
.held-route .nadel { fill: currentColor; stroke: none; }
.held-route .loch { fill: var(--grund); stroke: none; }
.held-notiz { position: absolute; }
.held-notiz--oben { right: 4%; top: 2%; text-align: center; transform: rotate(-7deg); }
.held-notiz--oben .kritzel { display: block; width: 44px; height: auto; margin: .3rem auto 0; color: var(--ink-soft); }
.held-notiz--mitte { left: 22%; top: 47%; transform: rotate(-5deg); }

/* Der Zettel: gerissene Kante per clip-path, Schatten deshalb als
   drop-shadow (box-shadow wuerde mit abgeschnitten). */
.zettel {
  position: absolute; right: 3%; bottom: 0; width: 15.5rem; padding: 1.15rem 1.4rem 1.3rem;
  background: var(--paper); color: var(--ink); transform: rotate(4deg);
  clip-path: polygon(0 4%, 7% 0, 15% 3%, 27% 0, 38% 3%, 49% 0, 61% 3%, 73% 0, 86% 3%, 95% 0,
    100% 5%, 99% 22%, 100% 42%, 98% 62%, 100% 84%, 98% 100%, 87% 97%, 75% 100%, 61% 97%,
    49% 100%, 37% 97%, 23% 100%, 11% 97%, 0 100%, 1% 78%, 0 58%, 2% 38%, 0 18%);
  filter: drop-shadow(0 10px 16px rgb(33 42 28 / 22%));
}
.zettel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.zettel li {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-hand); font-size: 1.5rem; line-height: 1.1;
}
.zettel svg { flex: none; width: 20px; height: 20px; color: var(--brand); }

@media (max-width: 1100px) {
  .held-notiz--mitte { left: 12%; top: 52%; }
}
@media (max-width: 860px) {
  .held { padding: 1.5rem 0 3.5rem; }
  .held-zeile { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 1.25rem; }
  .held-text { padding-top: 0; }
  /* Auf schmalen Breiten wird das Foto ein normaler Block unter dem Text;
     der Zettel ragt von unten in seine Kante. */
  .held-foto {
    position: relative; inset: auto; z-index: auto; order: 2;
    border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 10;
    box-shadow: var(--shadow-lift);
  }
  .held-foto::after { display: none; }
  /* Oben rechts statt unten: unten ragt der Zettel ins Bild. */
  .held-foto .bild-herkunft { top: .7rem; bottom: auto; right: .7rem; }
  .held-buehne {
    order: 3; min-height: 0; display: flex; justify-content: flex-end;
    padding: 0 .5rem; margin-top: -2.75rem;
  }
  .held-route, .held-notiz, .wald--held { display: none; }
  .zettel { position: relative; right: auto; bottom: auto; width: 14rem; transform: rotate(-3deg); }
}

/* ---------- Startseite: Merkmalsleiste ---------- */
.merkmale { border-bottom: 1px solid var(--line); background: var(--paper); }
.merkmale-gitter {
  /* 200px statt 230px: bei 1024px Breite blieben sonst drei Merkmale in
     der ersten Reihe und das vierte allein darunter. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 1.4rem clamp(1.25rem, 3vw, 2.75rem); padding-block: 1.85rem;
}
.merkmal { display: flex; align-items: flex-start; gap: .8rem; }
.merkmal svg { width: 26px; height: 26px; flex: none; color: var(--moos-600); margin-top: .1rem; }
.merkmal-titel { margin: 0 0 .2rem; font-weight: 700; font-size: .95rem; }
.merkmal-text { margin: 0; font-size: .87rem; color: var(--ink-soft); line-height: 1.5; }
@media (prefers-color-scheme: dark) { .merkmal svg { color: var(--brand); } }

/* ---------- Startseite: Suche und Rubrikchips ---------- */
.filterleiste { margin: 0 0 1rem; scroll-margin-top: 90px; }
.suchfeld {
  display: flex; align-items: center; gap: .6rem;
  max-width: 30rem; padding: .1rem .3rem .1rem 1rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-faint);
}
.suchfeld:focus-within { border-color: var(--moos-300); box-shadow: 0 0 0 3px var(--moos-100); }
.suchfeld svg { flex: none; }
.suchfeld input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  padding: .75rem .5rem .75rem 0;
  font: inherit; font-size: .95rem; color: var(--ink);
}
.suchfeld input::-webkit-search-cancel-button { cursor: pointer; }
.treffer-meldung { margin: .9rem 0 0; font-size: .9rem; color: var(--ink-soft); }

#alle-rubriken { scroll-margin-top: 90px; }
.chips { display: flex; flex-wrap: wrap; gap: .55rem; list-style: none; margin: 0; padding: 0; }
.chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-size: .88rem; font-weight: 600;
}
.chip:hover { border-color: var(--moos-300); background: var(--moos-50); color: var(--brand-strong); }
.chip-zahl { color: var(--ink-faint); font-weight: 600; font-size: .82rem; }

/* ---------- Abschnitte und Artikelkarten ---------- */
.abschnitt { padding: 2.75rem 0 .5rem; scroll-margin-top: 84px; }
.rubrik-abschnitt { border-top: 1px solid var(--line); margin-top: 2.25rem; }
/* Titel und Unterzeile stehen untereinander (linke Saeule), ein
   optionaler "Alle ansehen"-Link rechts daneben -- wie in den Entwuerfen.
   Vorher trieb space-between die Unterzeile an den rechten Rand, wo sie
   wie eine zweite, unverbundene Aussage wirkte. */
.abschnitt-kopf {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: .4rem 1rem; margin-bottom: 1.4rem;
}
.abschnitt-kopf h2 { margin: 0 0 .3rem; }
.abschnitt-kopf > :first-child { min-width: 0; }
.abschnitt-anriss { margin: 0; color: var(--ink-faint); font-size: .92rem; }
.abschnitt-link { font-weight: 650; font-size: .9rem; text-decoration: none; }
.abschnitt-link::after { content: " →"; }
.abschnitt-link:hover { text-decoration: underline; }

.artikelkarten-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 262px), 1fr)); }
.artikelkarten-grid--drei { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
/* Schmale Spur für die bis zu fünf Geschwisterkarten am Artikelfuß:
   205px lässt bei 1180px Hüllenbreite genau fünf Spalten zu, sonst fiele
   die fünfte Karte allein in eine zweite Reihe. */
.artikelkarten-grid--schmal { grid-template-columns: repeat(auto-fill, minmax(min(100%, 205px), 1fr)); }

.artikelkarte {
  position: relative; display: flex; flex-direction: column; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.artikelkarte:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: transparent; }
.artikelkarte:focus-within { border-color: var(--moos-300); }

.artikelkarte-bildbereich { position: relative; }
.artikelkarte-bild { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--paper-sunk); }
.artikelkarte-bild--leer { display: block; background: linear-gradient(140deg, var(--moos-600), var(--moos-800)); }
.artikelkarte-chip {
  position: absolute; left: .7rem; top: .7rem;
  padding: .28rem .7rem; border-radius: 999px;
  background: color-mix(in srgb, var(--moos-900) 82%, transparent);
  color: #fff; font-size: .72rem; font-weight: 650; letter-spacing: .01em;
  backdrop-filter: blur(4px);
}

.artikelkarte-inhalt { padding: 1.1rem 1.15rem 1.15rem; display: flex; flex-direction: column; flex: 1; }
.artikelkarte-inhalt h3 { font-size: 1.04rem; font-weight: 700; margin: 0 0 .5rem; line-height: 1.32; letter-spacing: -.012em; }
.artikelkarte-inhalt h3 a { color: var(--ink); text-decoration: none; }
.artikelkarte-inhalt h3 a:hover { color: var(--brand-strong); }
/* Die ganze Karte klickbar machen, ohne den Text in den Link zu ziehen:
   der Titel-Link legt eine unsichtbare Fläche über die Karte. Text bleibt
   markierbar, Screenreader lesen weiterhin genau einen Link je Karte. */
.artikelkarte-inhalt h3 a::after { content: ""; position: absolute; inset: 0; }
.artikelkarte-anriss {
  margin: 0 0 1rem; color: var(--ink-soft); font-size: .91rem; line-height: 1.55;
}
.artikelkarte-fuss {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin: auto 0 0; padding-top: .35rem;
  font-size: .85rem;
}
.weiterlesen { color: var(--brand); font-weight: 650; }
.weiterlesen::after { content: " →"; }
.artikelkarte:hover .weiterlesen { color: var(--brand-strong); }
.artikelkarte-lesezeit { color: var(--ink-faint); }

/* ---------- Startseite: Themen ---------- */
.themen .welle--oben { color: var(--paper); }
.themen-kopf {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem;
  align-items: end; margin-bottom: 1.7rem;
}
.themen-kopf h2, .werkzeuge h2, .gemeinschaft h2, .beliebt h2, .katalog-kopf h2 {
  margin: 0 0 .45rem; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); letter-spacing: -.028em;
}
.abschnitt-anriss--gross { font-size: 1rem; color: var(--ink-soft); max-width: 46rem; }
.themen-hinweis { justify-self: end; text-align: center; transform: rotate(-6deg); padding-right: 1rem; }
.themen-hinweis .handpfeil { margin: .2rem 0 0 auto; transform: rotate(15deg); }
/* Die Staemme enden auf der Wellenkante (deren Hoehe = bottom), nicht darunter. */
.wald--themen { right: -1rem; bottom: clamp(22px, 3.5vw, 48px); width: clamp(9rem, 13vw, 16rem); }

.kacheln { display: flex; flex-wrap: wrap; gap: .85rem; list-style: none; margin: 0; padding: 0; }
.kachel {
  display: inline-flex; align-items: center; gap: .75rem;
  min-height: 3.6rem; padding: .55rem 1.25rem .55rem .6rem; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow);
  color: var(--ink); text-decoration: none; font-weight: 650; font-size: .92rem; line-height: 1.25;
  transition: transform .15s ease, border-color .15s ease, color .15s ease;
}
.kachel span { max-width: 9.5rem; }
.kachel:hover { transform: translateY(-2px); border-color: var(--moos-300); color: var(--brand-strong); }
.kachel svg {
  flex: none; width: 2.4rem; height: 2.4rem; padding: .55rem; border-radius: 50%;
  background: var(--moos-100); color: var(--brand-strong);
}
.kachel--alle { padding-left: 1.25rem; gap: .4rem; }

/* ---------- Startseite: Beliebte Ratgeber (Karussell) ---------- */
/* Die Spur scrollt waagerecht und rastet je Karte ein; die Pfeile schaltet
   erst das Skript frei (Klasse karussell--bereit), ohne Skript bleibt das
   Wischen. */
.beliebt { position: relative; padding: clamp(3rem, 5vw, 4.5rem) 0 1rem; scroll-margin-top: 84px; }
.beliebt-kopf {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem 2.5rem;
  align-items: end; margin-bottom: 1.6rem;
}
.beliebt-hinweis { transform: rotate(-6deg); padding-bottom: .5rem; }
.beliebt-hinweis .handpfeil { margin: .2rem 0 0 auto; }
.beliebt-aktionen { display: flex; align-items: center; gap: .6rem; padding-bottom: .3rem; }
.karussell-spur {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2.8rem) / 3); gap: 1.4rem;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: .25rem .25rem .75rem;
  scrollbar-width: none;
}
.karussell-spur::-webkit-scrollbar { display: none; }
.karussell-spur > * { scroll-snap-align: start; }
.karussell-pfeil {
  display: none; align-items: center; justify-content: center; width: 2.7rem; height: 2.7rem;
  padding: 0; border-radius: 50%; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); cursor: pointer;
}
.karussell-pfeil svg { width: 20px; height: 20px; }
.karussell-pfeil:hover { border-color: var(--moos-300); color: var(--brand-strong); }
.karussell--bereit .karussell-pfeil { display: inline-flex; }

/* ---------- Startseite: Werkzeuge (Von der Idee zur Realitaet) ---------- */
.werkzeuge-zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 2rem clamp(2rem, 4vw, 4rem); align-items: center;
}
.werkzeuge-text p { color: var(--ink-soft); max-width: 34rem; }
.werkzeuge-text p:last-child { margin-bottom: 0; }
.werkzeuge-bild { position: relative; }
.werkzeuge-zitat { text-align: right; transform: rotate(-4deg); margin: 0 1rem .5rem 0; }
.reise { display: block; width: 100%; height: auto; color: var(--ink); }
.reise .strich { color: var(--brand); }
/* 27px im 690er-Koordinatenraum: auf 335px Breite bleiben rund 13px, die
   Beschriftung ist auch auf dem Telefon noch lesbar. */
.reise text { font-family: var(--font-hand); font-size: 32px; fill: var(--ink); stroke: none; }

/* ---------- Startseite: Gemeinschaft ---------- */
.gemeinschaft {
  position: relative; overflow: hidden;
  padding: clamp(3.5rem, 6vw, 5.5rem) 0 clamp(2.5rem, 4vw, 3.5rem);
}
.gemeinschaft-zeile {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 2rem clamp(2rem, 4vw, 4rem); align-items: center;
}
.gemeinschaft-bild { display: flex; align-items: flex-start; gap: 1.25rem; }
.polaroid {
  position: relative; margin: 0; flex: 0 1 22rem; padding: .8rem .8rem 2.7rem;
  background: var(--paper); box-shadow: var(--shadow-lift); transform: rotate(-4deg);
}
.polaroid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.polaroid .bild-herkunft {
  position: absolute; left: 1rem; bottom: .65rem; margin: 0;
  font-family: var(--font-hand); font-size: 1.35rem; color: var(--ink-soft);
}
.gemeinschaft-hinweis { padding-top: 2.5rem; transform: rotate(-5deg); }
.gemeinschaft-hinweis .handpfeil { margin: .3rem 0 0 .5rem; }
.gemeinschaft-text p { color: var(--ink-soft); max-width: 30rem; }
.gemeinschaft-text p:last-child { margin-bottom: 0; }
/* Tief in die rechte untere Ecke, damit die Wipfel unter dem Absatz bleiben. */
.wald--gemeinschaft { right: -1.5rem; bottom: 0; width: clamp(8rem, 12vw, 13rem); opacity: .5; }

/* ---------- Startseite: Katalog (alle Ratgeber) ---------- */
.katalog { padding: clamp(3rem, 5vw, 4.5rem) 0 3rem; scroll-margin-top: 84px; }
.katalog-kopf { margin-bottom: 1.4rem; }
.katalog .chips { margin-top: 1rem; }

@media (max-width: 900px) {
  .karussell-spur { grid-auto-columns: calc((100% - 1.4rem) / 2); }
  .themen-hinweis, .beliebt-hinweis { display: none; }
  .themen-kopf, .beliebt-kopf { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 860px) {
  .werkzeuge-zeile, .gemeinschaft-zeile { grid-template-columns: minmax(0, 1fr); }
  .werkzeuge-zitat { text-align: left; margin: 0 0 .5rem; }
  .gemeinschaft-bild { order: 2; justify-content: center; }
  .gemeinschaft-hinweis, .wald--themen, .wald--gemeinschaft { display: none; }
}
@media (max-width: 600px) {
  .karussell-spur { grid-auto-columns: 86%; }
  .kachel { font-size: .88rem; }
}

/* ---------- Geschwisterartikel ---------- */
.geschwister { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }

/* ---------- Newsletter-Band ----------

   Steht auf jeder Seite vor dem Fuss und ist in beiden Modi dunkel. Feste
   Farben sind hier richtig (wie frueher im Fuss): umschaltende Token
   wuerden im Dunkelmodus ins Falsche kippen. Die Wellenkante oben traegt
   die Grundfarbe des Abschnitts davor und schaltet deshalb mit -- sie
   haengt bewusst nicht unter .band-newsletter, sondern an eigener Klasse. */
.band-newsletter {
  position: relative; overflow: hidden; margin-top: 0;
  padding: clamp(3.5rem, 6vw, 5.5rem) 0 clamp(3rem, 5vw, 4.5rem);
  background: var(--moos-800); color: #fff;
}
.band-newsletter::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 120% at 90% 100%, rgb(255 255 255 / 7%), transparent 60%);
}
.welle--band { color: var(--grund); }
.band-newsletter-zeile {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 2rem clamp(2rem, 4vw, 4rem); align-items: center;
}
.wald--band { right: -1rem; bottom: 0; width: clamp(10rem, 16vw, 16rem); opacity: .2; }
.wegweiser-buehne { position: relative; justify-self: end; width: min(100%, 20rem); }
.wegweiser { display: block; width: 100%; height: auto; }
.wegweiser text { font-family: var(--font-text); }
.wegweiser-gruss {
  position: absolute; right: -.5rem; bottom: 1.5rem; transform: rotate(-8deg);
  color: #c9d5b6; text-shadow: none;
}

.newsletter--band { margin: 0; }
.newsletter--band .vorzeile { color: #c9d5b6; }
.newsletter--band .newsletter-titel {
  margin: 0 0 .5rem; font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.2rem);
  line-height: 1.12; letter-spacing: -.025em; color: #fff;
}
.newsletter--band .newsletter-vorspann { color: rgb(255 255 255 / 80%); max-width: 32rem; }
.newsletter--band .newsletter-form { margin-top: 1.3rem; max-width: 36rem; }
.newsletter--band .newsletter-feld { flex: 1 1 12rem; background: #ffffff; color: #1d2418; border-color: transparent; }
.newsletter--band .newsletter-feld::placeholder { color: #636c5b; }
.newsletter--band .newsletter-feld:focus-visible { outline-color: #c9d5b6; border-color: #c9d5b6; }
.newsletter--band .knopf--voll { background: #586a46; color: #fff; }
.newsletter--band .knopf--voll:hover { background: #445235; color: #fff; }
.newsletter--band .newsletter-einwilligung { color: rgb(255 255 255 / 80%); }
.newsletter--band .newsletter-einwilligung input { accent-color: #a8b894; }
.newsletter--band .newsletter-klein { color: rgb(255 255 255 / 66%); }
.newsletter--band .newsletter-klein a { color: rgb(255 255 255 / 88%); }
.newsletter--band .newsletter-klein a:hover { color: #fff; }

@media (max-width: 860px) {
  .band-newsletter-zeile { grid-template-columns: minmax(0, 1fr); }
  .wegweiser-buehne { justify-self: start; width: min(100%, 15rem); }
}

/* ---------- Fussbereich (hell, schaltet mit) ---------- */
.fuss {
  padding: clamp(2.5rem, 4vw, 3.5rem) 0 1.75rem;
  background: var(--paper); color: var(--ink-soft); font-size: .9rem;
  border-top: 1px solid var(--line);
}
.fuss-spalten {
  display: grid; gap: 2rem clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
}
.fuss .marke--fuss { color: var(--ink); font-size: 1.12rem; margin-bottom: .8rem; }
.fuss .marke--fuss .marke-symbol { color: var(--brand); }
.fuss .marke--fuss .marke-zweitwort { color: var(--brand); }
.fuss .marke--fuss:hover { color: var(--brand); }
.fuss-text { margin: 0; max-width: 26rem; line-height: 1.6; }
.fuss-titel {
  margin: 0 0 .8rem; color: var(--ink); font-weight: 700; font-size: .78rem;
  letter-spacing: .09em; text-transform: uppercase;
}
.fuss-spalte ul { list-style: none; margin: 0; padding: 0; }
.fuss-spalte li + li { margin-top: .5rem; }
.fuss a { color: var(--ink-soft); text-decoration: none; }
.fuss a:hover { color: var(--brand); text-decoration: underline; }
.fuss-bald { color: var(--ink-faint); }
.fuss-leiste {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem;
  margin-top: clamp(2rem, 3vw, 2.75rem); padding-top: 1.25rem; border-top: 1px solid var(--line);
  font-size: .84rem; color: var(--ink-faint);
}
.fuss-leiste p { margin: 0; }
.fuss-slogan strong { color: var(--ink); font-weight: 700; }
.fuss-schluss { margin: 1rem 0 0; font-size: .8rem; color: var(--ink-faint); max-width: 60rem; }
@media (max-width: 900px) {
  .fuss-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss-marke { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .fuss-spalten { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Nach-oben-Knopf ---------- */
html { scroll-behavior: smooth; }
.nach-oben {
  position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--brand); color: #fff; box-shadow: var(--shadow-lift);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.nach-oben.sichtbar { opacity: 1; transform: translateY(0); pointer-events: auto; }
.nach-oben:hover { background: var(--brand-strong); }
@media (prefers-color-scheme: dark) {
  .nach-oben, .nach-oben:hover { color: var(--pine-900); }
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .artikelkarte:hover { transform: none; }
}

/* ---------- Suche erst mit Skript zeigen ---------- */
/* Ohne Skript filtert nichts, also darf auch kein Eingabefeld und keine
   Lupe zu sehen sein (siehe _skript.html). Die Startseite zeigt dann
   einfach alle Karten. */
.filterleiste, .kopf-suche { display: none; }
.suche-bereit .filterleiste { display: block; }
.suche-bereit .kopf-suche { display: flex; }

/* Innerhalb eines Rubrikabschnitts steht die Rubrik schon als Überschrift
   darüber -- der Chip auf jedem Bild wiederholte sie zwölfmal. In den
   gemischten Reihen (Meistgelesen, weitere Ratgeber am Artikelfuß) trägt
   er dagegen Information und bleibt sichtbar. */
.rubrik-abschnitt .artikelkarte-chip { display: none; }

/* Während der Suche zeigt die Rubrik nicht mehr ihre Gesamtzahl an --
   die stimmt dann nicht (siehe _skript.html). */
.suche-aktiv .rubrik-abschnitt .abschnitt-anriss { display: none; }

/* Affiliate-Weiche: erscheint erst beim Klick auf einen AWIN-Verweis.
   Farben kommen aus den vorhandenen Variablen, damit hell und dunkel ohne
   eigene Sonderregel funktionieren. */
.gate {
  border: 0;
  padding: 0;
  max-width: 30rem;
  width: calc(100% - 2rem);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}
.gate::backdrop { background: rgba(0, 0, 0, .5); }
.gate-inhalt { padding: 1.5rem 1.5rem 1.25rem; }
.gate-titel { margin: 0 0 .75rem; font-size: 1.15rem; line-height: 1.3; }
.gate-text { margin: 0 0 .75rem; font-size: .93rem; line-height: 1.55; }
.gate-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1.1rem 0 .5rem;
}
.gate-knoepfe .knopf { flex: 1 1 auto; justify-content: center; cursor: pointer; }
.gate-fuss { margin: 0; font-size: .85rem; }
.gate-liste {
  margin: 0 0 .75rem;
  padding-left: 1.2rem;
  font-size: .93rem;
  line-height: 1.5;
}
.gate-liste li { margin-bottom: .2rem; }

/* ---------- Newsletter ----------

   Zwei Auspraegungen desselben Bauteils: der Kasten am Artikelende auf
   cremefarbenem Grund, die schmale Zeile im dunklen Fussbereich. Beide
   ohne Skript -- ohne CSS bleibt ein gewoehnliches Formular uebrig, das
   genauso funktioniert. */
.newsletter { margin: 3rem 0 0; }
.newsletter-titel {
  margin: 0 0 .35rem; font-weight: 700; letter-spacing: -.01em;
}
.newsletter-vorspann { margin: 0; line-height: 1.6; }
.newsletter-form { margin: 1.1rem 0 0; }
/* Sichtbar fuer Screenreader, unsichtbar im Layout: das Feld traegt einen
   Platzhalter, aber ein Platzhalter ist kein Label. */
.newsletter-label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.newsletter-zeile { display: flex; flex-wrap: wrap; gap: .6rem; }
.newsletter-feld {
  flex: 1 1 14rem; min-width: 0;
  padding: .7rem 1rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font: inherit; font-size: .93rem;
}
.newsletter-feld::placeholder { color: var(--ink-faint); }
.newsletter-feld:focus-visible {
  outline: 2px solid var(--moos-600); outline-offset: 2px; border-color: var(--moos-600);
}
.newsletter-form .knopf { flex: 0 0 auto; cursor: pointer; }
.newsletter-klein {
  margin: .9rem 0 0; font-size: .82rem; line-height: 1.55; color: var(--ink-faint);
  max-width: 42rem;
}
.newsletter-klein a { color: inherit; text-decoration: underline; }
.newsletter-klein a:hover { color: var(--brand-strong); }

/* Artikelende.

   --paper-warm statt --moos-50: die Moos-Skala bleibt im Dunkelmodus wie
   sie ist, die --ink-Farben schlagen um. Beides zusammen ergab hellen Text
   auf hellgruenem Grund -- Vorspann und Einwilligung kamen auf 1,04:1 und
   waren schlicht nicht lesbar. --paper-warm schaltet mit um, damit passen
   Grund und Text wieder zueinander. */
.newsletter--artikel {
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--paper-warm);
}
.newsletter--artikel .newsletter-titel { font-size: 1.22rem; color: var(--brand-strong); }

/* Die dunkle Auspraegung steht jetzt im Newsletter-Band vor dem Fuss
   (siehe .newsletter--band weiter oben); der Fuss selbst ist hell. */

/* Auf schmalen Geraeten passen Feld und Knopf nicht mehr nebeneinander.
   Statt sie umbrechen zu lassen -- der Knopf stand dann halbbreit und
   linksbuendig unter dem Feld -- stapelt das Raster beide auf volle
   Breite. Das gibt nebenbei die groessere Trefferflaeche. */
@media (max-width: 480px) {
  .newsletter-zeile { display: grid; grid-template-columns: 1fr; }
}

/* Honigtopf. Nicht display:none -- manche Bots ueberspringen genau das.
   Aus dem Bild geschoben, aus der Tabreihenfolge genommen (tabindex=-1 im
   Markup) und fuer Screenreader ausgeblendet (aria-hidden am Wrapper). */
.newsletter-honig {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.newsletter-einwilligung {
  display: flex; gap: .6rem; align-items: flex-start;
  margin: .9rem 0 0; font-size: .86rem; line-height: 1.5;
}
.newsletter-einwilligung input {
  flex: 0 0 auto; margin: .2rem 0 0; width: 1.05rem; height: 1.05rem;
  accent-color: var(--moos-600);
}

/* ---------- Dunkelmodus: Regeln, die sonst halb umschlagen ----------

   Sechs Regeln mischten feste und umschaltende Farbtoken und funktionierten
   dadurch nur im hellen Modus. Gefunden hat sie der Waechter aus
   tests/test_dunkelmodus.py, nachdem derselbe Fehler im Newsletterkasten
   aufgefallen war. Die Werte im Dunkelmodus vorher:

     .rubriken-nav a:hover   1,52:1     .kennzeichen         1,15:1
     .knopf--rand:hover      1,52:1     .kennzeichen:hover   1,55:1
     .knopf--hell            1,41:1     .chip:hover          1,52:1

   .knopf--hell war schon einmal aufgefallen und wurde in start.html mit
   einem eigenen <style>-Block geflickt -- nur dort, nicht auf Artikel- und
   Rechtsseiten. Der Flicken ist raus, die Regel steht jetzt hier. */
@media (prefers-color-scheme: dark) {
  /* Grund bleibt --moos-50 (hell), also braucht der Text eine dunkle Farbe. */
  .rubriken-nav a:hover,
  .knopf--rand:hover,
  .chip:hover { color: var(--moos-800); }

  /* Grund schaltet mit um und wird dunkel, also Text hell. */
  .knopf--hell { color: var(--brand-strong); }
  .kennzeichen { color: var(--brand-strong); }
  .kennzeichen:hover { color: var(--ink); }
}

/* ---------- Messen: gemeinsame Zeichenmittel ----------

   Entwurf vom 10.09.2026 fuer /messen/ und die Messeseiten: Held mit Foto
   bzw. Lagekarte, Randnotiz und Zettel wie auf der Startseite, Pillen als
   Filter, Karte und Liste nebeneinander, Kacheln fuer die Fakten. Farben
   nur aus einer Sorte je Regel (tests/test_dunkelmodus.py); Aquarelle
   liegen als Hintergrund, die Symbole sind inline SVG (_symbole.html). */
.symbol { display: inline-block; flex: none; width: 1.1em; height: 1.1em; vertical-align: -.2em; }
main.messen button.chip, .messen-monate button.chip {
  font-family: inherit; line-height: 1.25; cursor: pointer;
}
.chip--symbol .symbol { width: 1.05rem; height: 1.05rem; color: var(--brand); }
/* Gedrueckte Filterpille (aria-pressed, _skript.html): Kategorien und
   Monate. Ohne diese Regel toggelt der Knopf zwar, sieht aber gleich aus;
   so war es vom Entwurf vom 10.09.2026 (55fb129) bis zum 11.09. Feste
   Farben mit weissem Text wie .knopf--voll, in beiden Modi lesbar. */
.chip[aria-pressed="true"] { background: var(--moos-600); border-color: var(--moos-600); color: #fff; }
.chip[aria-pressed="true"]:hover { background: var(--moos-700); border-color: var(--moos-700); color: #fff; }
.chip[aria-pressed="true"] .symbol { color: inherit; }

/* Auftritte: Bloecke mit .auftritt erscheinen beim ersten Sichtbarwerden
   weich von unten, .auftritt--gestaffelt laesst seine Kinder nacheinander
   kommen. Versteckt wird erst, wenn das Skript die Klasse auftritt-bereit
   an <html> gesetzt hat -- ohne Skript oder mit prefers-reduced-motion
   steht alles sofort da (_skript.html, letzter Block). */
.auftritt-bereit .auftritt { opacity: 0; translate: 0 18px; }
.auftritt-bereit .auftritt.auftritt--da {
  opacity: 1; translate: none;
  transition: opacity .4s ease-out, translate .4s cubic-bezier(.2, .7, .2, 1);
}
.auftritt-bereit .auftritt--gestaffelt > * { opacity: 0; translate: 0 12px; }
.auftritt-bereit .auftritt--gestaffelt.auftritt--da > * {
  opacity: 1; translate: none; transition: opacity .35s ease-out, translate .35s ease-out;
}
.auftritt--gestaffelt > :nth-child(2) { transition-delay: 60ms; }
.auftritt--gestaffelt > :nth-child(3) { transition-delay: 120ms; }
.auftritt--gestaffelt > :nth-child(4) { transition-delay: 180ms; }
.auftritt--gestaffelt > :nth-child(5) { transition-delay: 240ms; }
.auftritt--gestaffelt > :nth-child(n + 6) { transition-delay: 300ms; }

/* Eingangssequenz der Koepfe: Bild, Handschrift, Zettel nacheinander --
   reine CSS-Animation, deren Endzustand der normale Zustand ist. Ohne
   Bewegung (prefers-reduced-motion) ist einfach alles da. translate und
   rotate als eigene Eigenschaften, damit die Drehung der Elemente
   (transform) unberuehrt bleibt. */
@media (prefers-reduced-motion: no-preference) {
  .messen-held-foto, .messe-kopfbild, .messe-lage { animation: held-auf .45s cubic-bezier(.2, .7, .2, 1) both; }
  .messen-held-notiz, .messe-held-notiz { animation: held-auf .35s ease-out .2s both; }
  .messen-zettel, .messe-zettel { animation: zettel-auf .4s cubic-bezier(.2, .7, .2, 1) .38s both; }
}
@keyframes held-auf { from { opacity: 0; translate: 0 16px; } }
@keyframes zettel-auf { from { opacity: 0; translate: 0 22px; rotate: 6deg; } }

/* ---------- Messehub: Uebersicht /messen/ (src/vorlagen/messen.html) ---------- */
main.messen { position: relative; padding-bottom: 0; }

/* Held: Text links, Foto als schraeg liegende Karte rechts. Weisser Grund,
   die Welle unten traegt die Grundfarbe des Inhalts darunter. */
.messen-held {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(2rem, 4vw, 4rem) 0 clamp(4.5rem, 8vw, 7rem);
  background: var(--paper);
}
.messen-held .welle { color: var(--grund); }
.messen-held-zeile {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 2rem clamp(2rem, 5vw, 5rem); align-items: center;
}
.messen-held-text { min-width: 0; }
.messen-held-text h1 {
  margin: 0 0 1.1rem; font-size: clamp(2.4rem, 1.4rem + 3.1vw, 3.9rem);
  line-height: 1.02; letter-spacing: -.035em;
}
.messen-held-text h1 .betont { font-style: normal; }
.messen-held-text .held-anriss { max-width: 33rem; font-size: 1.08rem; }
.messen-merkmale { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .9rem 1.5rem; }
.messen-merkmale li {
  display: flex; align-items: center; gap: .6rem;
  font-size: .84rem; line-height: 1.3; font-weight: 600; color: var(--ink-soft);
}
.messen-merkmale .symbol {
  width: 2.5rem; height: 2.5rem; padding: .6rem; border-radius: 50%;
  background: var(--moos-100); color: var(--brand-strong);
}

.messen-held-buehne { position: relative; padding: 1.5rem 2.5rem 3.5rem 1.25rem; }
.messen-held-foto {
  position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lift); transform: rotate(1.5deg);
}
.messen-held-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 62% 55%; }
.messen-held-foto .bild-herkunft {
  position: absolute; left: .8rem; bottom: .8rem; margin: 0;
  padding: .2rem .65rem; border-radius: 999px;
  background: color-mix(in srgb, var(--grund) 82%, transparent); color: var(--ink-soft);
  font-size: .72rem;
}
.messen-held-notiz { position: absolute; left: -1.25rem; top: -.4rem; z-index: 2; text-align: center; transform: rotate(-7deg); }
.messen-zettel { right: -.25rem; bottom: .5rem; z-index: 2; width: 14rem; }

/* Filterzeile: Pillen fuer die Kategorien, zwei Auswahlpillen (Land,
   Monat), Suchfeld. Die Legenden bleiben fuer Screenreader und den Test
   (tests/test_messeseiten.py), sichtbar sind Symbol und Etikett. */
.messen-inhalt { padding: 2.2rem 0 3.5rem; }
.messen-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1.6rem; }
.messen-facette { display: contents; margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.messen-facette legend {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.messen-facette--auswahl {
  position: relative; display: inline-flex; align-items: center; gap: .65rem;
  padding: .3rem 2.1rem .3rem .85rem; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line); color: var(--ink);
}
.messen-facette--auswahl:focus-within { border-color: var(--moos-300); box-shadow: 0 0 0 3px var(--moos-100); }
.messen-facette-symbol { width: 1.15rem; height: 1.15rem; color: var(--brand); }
.messen-auswahl { display: flex; flex-direction: column; min-width: 0; }
.messen-auswahl label {
  font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  line-height: 1.1; color: var(--ink-faint);
}
.messen-auswahl select {
  appearance: none; -webkit-appearance: none; border: 0; padding: 0; margin: 0;
  background: transparent; color: var(--ink); font: inherit; font-size: .9rem; font-weight: 650;
  line-height: 1.3; cursor: pointer; max-width: 12rem;
}
.messen-auswahl select:focus-visible { outline: none; }
/* Pfeil der Auswahl in Textfarbe, ohne Bilddatei. */
.messen-facette--auswahl::after {
  content: ""; position: absolute; right: .95rem; top: 50%; width: .5rem; height: .5rem;
  margin-top: -.4rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); pointer-events: none; color: var(--ink-soft);
}
.messen-suche { flex: 1 1 15rem; max-width: 24rem; margin-left: auto; }
.messen-suche .symbol { width: 18px; height: 18px; }

/* Karte und Liste ab 900px nebeneinander, darunter untereinander. */
@media (min-width: 900px) {
  .messen-haupt {
    display: grid;
    grid-template-columns: minmax(0, min(46%, 560px)) minmax(0, 1fr);
    align-items: start;
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }
}

/* Die Karte: gezeichnete Reisekarte. Wasser als zurueckhaltende Aquarell-
   flaeche mit Papierkorn (SVG-Rauschen als data-URI, keine Datei und kein
   Fremdabruf), darauf die Laender mit weichem Aquarellrand (.karte-schein:
   verzerrte, verwaschene Kopie des Umrisses) und leichtem Schatten. Die
   Laendernamen in Handschrift mit Lichthof in Papierfarbe, damit sie ueber
   dem Rand lesbar bleiben. Die Filter (#karte-aquarell, #karte-tiefe)
   stehen in _messekarte.html; nur dort greifen sie -- die Lagekarte der
   Messeseite hat keine, deshalb der Vorsatz .messen-karte. */
.messen-kartenspalte { position: relative; min-width: 0; }
.messen-karte {
  position: relative; margin: 0 0 1.5rem;
  background-color: color-mix(in srgb, var(--paper-warm) 72%, #9fc0d8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .27 0 0 0 0 .16 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow);
}
/* Vignette: leichte Tiefe zum Rand hin, nur ueber der Kartenflaeche; die
   Infoleiste darunter bleibt klar. */
.karte-buehne { position: relative; display: block; }
.karte-buehne::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 70px rgb(31 46 26 / 14%);
}
@media (min-width: 900px) { .messen-haupt .messen-karte { margin-bottom: 0; } }
.karte-flaeche { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
.karte--gezoomt .karte-flaeche { cursor: grab; touch-action: none; }
.karte--gezoomt .karte-flaeche:active { cursor: grabbing; }
.karte-schein path { fill: none; stroke: var(--moos-200); stroke-width: 16; stroke-linejoin: round; opacity: .75; }
.messen-karte .karte-schein { filter: url(#karte-aquarell); }
.messen-karte .karte-laender { filter: url(#karte-tiefe); }
.karte-laender path { fill: var(--moos-100); stroke: var(--paper); stroke-width: 1.6; stroke-linejoin: round; }
.karte-laender #land-de { fill: var(--moos-200); }
/* Schmuck, sparsam: vier Wellen im Meer, ein Kompass. Beim Zoomen weg, er
   wuechse sonst mit. */
.karte-welle { fill: none; stroke: color-mix(in srgb, var(--ink-faint) 55%, transparent); stroke-width: 2.2; stroke-linecap: round; }
.karte-kompass-stern { fill: var(--paper); stroke: var(--ink-faint); stroke-width: 1.5; stroke-linejoin: round; }
.karte-kompass-mitte { fill: var(--ink-faint); }
.karte-kompass-n { font-family: var(--font-hand); font-size: 30px; fill: var(--ink-soft); }
.karte-deko { transition: opacity .25s ease; }
.karte--gezoomt .karte-deko { opacity: 0; }
.karte-name {
  font-family: var(--font-hand); font-size: 34px; letter-spacing: .01em;
  fill: var(--ink-soft); text-anchor: middle; pointer-events: none;
  paint-order: stroke; stroke: var(--paper); stroke-width: 6px; stroke-linejoin: round;
}
.karte-name--gross { font-size: 58px; fill: var(--brand-strong); }
.karte-nadel { cursor: pointer; outline: none; transition: opacity .25s ease; }
.karte-nadel--aus { opacity: .22; }
/* Die Animationsgruppe skaliert um die Nadelspitze (fill-box: 50 % / 90 %
   der eigenen Ausdehnung ist genau die Spitze). */
.karte-nadel-anim { transform-box: fill-box; transform-origin: 50% 90%; transition: translate .18s ease, scale .2s ease; }
.karte-nadel--aus .karte-nadel-anim { scale: .82; }
.karte-nadel:hover .karte-nadel-anim, .karte-nadel:focus-visible .karte-nadel-anim,
.karte-nadel--aktiv .karte-nadel-anim { translate: 0 -3px; scale: 1.08; }
.karte-nadel-schatten { fill: rgb(33 42 28 / 22%); }
.karte-nadel-koerper { fill: var(--brand-strong); stroke: var(--paper); stroke-width: 2.5; }
.karte-nadel-loch { fill: var(--paper); }
.karte-nadel:hover .karte-nadel-koerper, .karte-nadel:focus-visible .karte-nadel-koerper,
.karte-nadel--aktiv .karte-nadel-koerper { fill: var(--accent); }
/* Tastatur: der Fokusring des Browsers zeichnet bei SVG-Verweisen nur das
   Rechteck; ein kraeftiger Rand um den Kopf ist deutlicher. */
.karte-nadel:focus-visible .karte-nadel-koerper { stroke: var(--ink); stroke-width: 4; }
/* Tannen in der Ecke, hinter den Werkzeugen. */
.wald--karte { right: -1.5rem; bottom: -.75rem; width: clamp(6rem, 9vw, 8.5rem); opacity: .32; z-index: 1; }

/* Nadeln fallen beim ersten Sichtbarwerden ein: das Skript setzt --i je
   Welle (West nach Ost, hoechstens acht Wellen) und dann karte--nadeln-da.
   Vorher unsichtbar -- aber nur mit Skript (.messen--bereit), sonst
   staende die Karte ohne Nadeln da. */
.messen--bereit .karte-nadel-anim { opacity: 0; }
.messen--bereit .karte--nadeln-da .karte-nadel-anim {
  opacity: 1; animation: nadel-fall .4s cubic-bezier(.2, .8, .3, 1.15) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes nadel-fall {
  from { opacity: 0; transform: translateY(-46px) scale(.6); }
  70% { opacity: 1; transform: translateY(3px) scale(1.03); }
  to { opacity: 1; transform: none; }
}
/* Treffer nach einer Filteraenderung: ein einzelner Hopser (das Skript
   setzt die Klasse und nimmt sie nach animationend wieder weg). Vier
   Klassen, damit die Regel ueber dem Einfallen liegt. */
.messen--bereit .karte--nadeln-da .karte-nadel--treffer .karte-nadel-anim { animation: nadel-treffer .45s ease-out; }
@keyframes nadel-treffer {
  0% { transform: none; } 40% { transform: translateY(-7px) scale(1.18); } 100% { transform: none; }
}

/* Randnotiz mit gezeichnetem Handpfeil: steht als Nachbar hinter dem
   <figure> in der Kartenspalte (ein SVG je Kartenblock) und wird einmal
   gezeichnet, sobald die Nadeln gefallen sind. Ohne Skript steht der Pfeil
   fertig da -- der Strichanfang haengt an .messen--bereit. */
.karte-notiz {
  position: absolute; left: 1.1rem; top: .7rem; z-index: 2; margin: 0; font-size: 1.45rem; text-align: left;
  transform: rotate(-6deg); pointer-events: none;
}
.karte-pfeil { display: block; width: 46px; margin: .15rem 0 0 2.6rem; color: var(--ink-soft); transform: rotate(25deg); }
.messen--bereit .karte-pfeil path { stroke-dasharray: 110; stroke-dashoffset: 110; }
.messen--bereit .karte--nadeln-da + .karte-notiz .karte-pfeil path { animation: pfeil-zeichnen .5s ease-out .45s forwards; }
.messen--bereit .karte--nadeln-da + .karte-notiz .karte-pfeil path + path { animation-duration: .25s; animation-delay: .9s; }
@keyframes pfeil-zeichnen { to { stroke-dashoffset: 0; } }

/* Werkzeuge oben rechts ueber der Ostsee, wo keine Messe liegt: finger-
   grosse Knoepfe (44 px) fuer Zoom und Vollbild, der Heimknopf nur im
   gezoomten Zustand. Als Reihe, nicht als Spalte: eine Spalte reichte bei
   mittlerer Breite bis Warschau. Unten links deckten sie Paris ab,
   Vollbild unten rechts die ergaenzenden Messen in Oesterreich. */
.karte-zoom { position: absolute; right: .9rem; top: .9rem; z-index: 2; margin: 0; display: flex; flex-direction: row; gap: .35rem; }
.karte-zoomknopf {
  width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 12px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font: inherit; font-size: 1.35rem; font-weight: 600; line-height: 1; cursor: pointer;
  box-shadow: var(--shadow); transition: scale .15s ease, color .15s ease, border-color .15s ease;
}
.karte-zoomknopf:hover { border-color: var(--moos-300); color: var(--brand-strong); }
.karte-zoomknopf:active { scale: .94; }
.karte-zoomknopf--ganz { display: none; font-size: 1.2rem; }
.karte--gezoomt .karte-zoomknopf--ganz { display: block; }
.karte-vollbild { display: grid; place-items: center; }
.karte-vollbild[hidden] { display: none; }
.karte-vollbild::before {
  content: ""; width: 1rem; height: 1rem; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Vollbild: der Block fuellt den Schirm, die Buehne alles ausser der
   Infoleiste; die Karte passt sich ein (preserveAspectRatio meet). Mit
   height: 100% in einem Grid ohne feste Hoehe blieb sie 595 px klein. */
.messen-karte:fullscreen {
  display: flex; flex-direction: column; border: 0; border-radius: 0;
}
.messen-karte:fullscreen .karte-buehne { flex: 1 1 auto; min-height: 0; }
.messen-karte:fullscreen .karte-flaeche { width: 100%; height: 100%; }

/* Infoleiste unter der Karte: fester Platz statt schwebender Karte an der
   Nadel, damit nie ein Teil der Karte verdeckt ist. Hover, Fokus und Tipp
   fuellen sie (_skript.html, infoZeigen); auf Touch ist sie die zweite
   Stufe -- erst "Zur Messe" oeffnet die Seite. Ohne Skript verborgen. */
.karte-info[hidden], .karte-zoom[hidden] { display: none; }
.karte-info {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .25rem .85rem;
  min-height: 4.4rem; padding: .7rem .9rem;
  background: var(--paper); color: var(--ink); border-top: 1px dashed var(--line);
  font-size: .86rem; line-height: 1.35;
}
.karte-info-leer { grid-column: 1 / -1; margin: 0; font-family: var(--font-hand); font-size: 1.25rem; line-height: 1.2; color: var(--ink-soft); }
.karte-info-kachel { position: relative; width: 3.6rem; }
.karte-info-kachel img { display: block; width: 100%; height: 2.9rem; object-fit: cover; border-radius: 8px; }
.karte-info-kachel .messen-kalender { width: 3.6rem; height: 2.9rem; border-radius: 8px; }
.karte-info-kachel .messen-kalender-monat, .karte-info-kachel .messen-kalender-jahr { font-size: .5rem; }
.karte-info-kachel .messen-kalender-tage { margin: .1rem 0; font-size: .95rem; }
.karte-info-kachel .messen-bild-marke {
  position: static; display: block; margin-top: .15rem; padding: .05rem .2rem; font-size: .45rem; text-align: center;
}
.karte-info-text { display: grid; gap: .1rem; min-width: 0; }
.karte-info-name { font-size: .95rem; line-height: 1.25; }
.karte-info-meta { color: var(--ink-soft); }
.karte-info-status { color: var(--ink-soft); font-size: .8rem; font-style: italic; }
.karte-info-los { white-space: nowrap; cursor: pointer; font-family: inherit; }
.karte-info-liste { grid-column: 1 / -1; list-style: none; margin: .15rem 0 0; padding: 0; }
.karte-info-liste li + li { border-top: 1px dashed var(--line); }
.karte-info-liste a {
  display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .7rem; min-height: 2.75rem; padding: .3rem .1rem;
  color: var(--ink); text-decoration: none;
}
.karte-info-liste a:hover .karte-info-eintrag, .karte-info-liste a:focus-visible .karte-info-eintrag { text-decoration: underline; }
.karte-info-eintrag { flex: 1 1 10rem; min-width: 0; font-weight: 650; }
.karte-info-termin { color: var(--ink-soft); white-space: nowrap; }
.karte-info-pfeil { color: var(--brand-strong); font-weight: 650; white-space: nowrap; }
@media (pointer: coarse) {
  .karte-info-los { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; }
}

/* Die Liste: Kopf mit Zaehler, dann eine Karte je Messe. */
.messen-liste-kopf { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 0 0 1rem; }
.messen-liste-kopf h2 {
  display: flex; align-items: center; gap: .55rem; margin: 0;
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem); letter-spacing: -.02em;
}
.messen-liste-symbol { width: 1.5rem; height: 1.5rem; color: var(--brand); }
.messen-zahl {
  display: inline-block; padding: .3rem .8rem; border-radius: 999px; white-space: nowrap;
  background: var(--moos-100); color: var(--brand-strong); font-size: .8rem; font-weight: 700;
}
.messen-zahl--still { background: var(--paper-sunk); color: var(--ink-soft); }
.messen-liste ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.messen-liste li {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: .9rem; padding: .8rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.messen-liste li:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.messen-liste li:focus-within { border-color: var(--moos-300); }
/* Der Filter blendet Zeilen ueber das hidden-Attribut aus; die Klassenregel
   darueber setzt display und schluege die Browservorgabe sonst. */
.messen-liste li[hidden] { display: none; }
/* Gekuerzte Liste: "Kommende Messen" zeigt mit Skript zuerst nur die drei
   naechsten passenden Messen. Eigene Klasse statt hidden, weil die Karte
   hidden als Filterergebnis liest (_skript.html, kuerzen()). */
.messen-liste li.messen-zeile--gekuerzt { display: none; }
.messen-liste li.messen-zeile--aktiv { border-color: var(--brand); box-shadow: 0 0 0 3px var(--moos-100), var(--shadow-lift); }
/* Rueckmeldung auf eine Filteraenderung (Skript): neu sichtbare Zeilen
   kommen weich, der Zaehler tickt einmal. */
@keyframes zeile-neu { from { opacity: 0; translate: 0 10px; } }
.messen-zeile--neu { animation: zeile-neu .3s ease-out both; }
@keyframes zahl-tick { 0% { scale: 1; } 35% { scale: 1.18; } 100% { scale: 1; } }
.messen-zahl--tick { animation: zahl-tick .3s ease-out; }
.messen-zeile-text { min-width: 0; }
.messen-zeile-titel { margin: 0 0 .3rem; font-size: 1.05rem; font-weight: 700; line-height: 1.3; letter-spacing: -.012em; overflow-wrap: anywhere; }
.messen-zeile-titel a { color: var(--ink); text-decoration: none; }
/* Die ganze Karte klickbar, ohne den Text in den Verweis zu ziehen (wie bei
   .artikelkarte): der Titel-Verweis legt eine unsichtbare Flaeche darueber. */
.messen-zeile-titel a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.messen-liste li:hover .messen-zeile-titel a { color: var(--brand-strong); }
.messen-zeile-kurz {
  margin: 0 0 .45rem; font-size: .88rem; line-height: 1.45; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.messen-zeile-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0 0 .5rem; font-size: .86rem; color: var(--ink-soft); }
.messen-zeile-meta .meta-teil { gap: .35rem; }
.messen-zeile-meta .symbol { width: 1rem; height: 1rem; color: var(--brand); }
.messen-ort, .messen-termin { font-variant-numeric: tabular-nums; }
.messen-zeile-marken { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; }
.messen-marke {
  padding: .18rem .6rem; border-radius: 999px;
  background: var(--paper-sunk); color: var(--ink-soft); font-size: .74rem; font-weight: 650;
}
.messen-marke--besucht { background: var(--moos-100); color: var(--brand-strong); }
.messen-zeile-pfeil {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 1px solid var(--line); color: var(--ink-soft);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.messen-zeile-pfeil .symbol { width: 1rem; height: 1rem; }
.messen-liste li:hover .messen-zeile-pfeil { background: var(--brand); border-color: var(--brand); color: var(--paper); }

/* Datumsblatt an der Bildstelle, wenn kein Messebild gesetzt ist. Feste
   Farben mit weissem Text, wie .knopf--voll -- in beiden Modi lesbar. */
.messen-kalender {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 156px; height: 112px; border-radius: var(--radius);
  background: linear-gradient(140deg, var(--moos-600), var(--moos-800)); color: #fff;
  text-align: center; line-height: 1;
}
.messen-kalender-monat { font-size: .66rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / 78%); }
.messen-kalender-tage { margin: .3rem 0 .2rem; font-size: 1.75rem; font-weight: 750; letter-spacing: -.02em; }
.messen-kalender-jahr { font-size: .68rem; color: rgb(255 255 255 / 70%); }

/* Kachelbild in der Liste: nur wenn messe.bild gesetzt ist. Eine
   Illustration traegt eine sichtbare Marke, sonst wirkt sie wie ein Foto. */
.messen-bildbereich { position: relative; flex: 0 0 auto; }
.messen-bild { display: block; width: 156px; height: 112px; object-fit: cover; border-radius: var(--radius); background: var(--paper-sunk); }
.messen-bild-marke {
  position: absolute; left: .4rem; bottom: .4rem;
  padding: .18rem .55rem; border-radius: 999px;
  background: color-mix(in srgb, var(--moos-900) 82%, transparent);
  color: #fff; font-size: .68rem; font-weight: 650; letter-spacing: .01em;
}

.messen-leer {
  margin: .5rem 0 0; padding: 1rem 1.1rem; border-radius: var(--radius);
  background: var(--paper-sunk); color: var(--ink-soft); font-size: .92rem;
}
.messen-zuruecksetzen {
  margin-left: .4rem; padding: .3rem .85rem; border: 0; border-radius: 999px;
  background: var(--moos-600); color: #fff; font: inherit; font-size: .84rem; font-weight: 650; cursor: pointer;
}
.messen-zuruecksetzen:hover { background: var(--moos-700); }
/* "Weitere Messen anzeigen" / "Weniger anzeigen" unter der Liste: .knopf--rand
   ueber die volle Listenbreite, der Winkel dreht beim Aufklappen. .knopf
   setzt display: inline-flex und schluege damit hidden -- ohne die eigene
   Regel stuende der Knopf auch ohne Skript da, wirkungslos. */
.messen-mehr {
  display: flex; width: 100%; min-height: 2.75rem; margin-top: .8rem;
  font: inherit; font-size: .93rem; font-weight: 650; cursor: pointer;
}
.messen-mehr[hidden] { display: none; }
.messen-mehr::after {
  content: ""; width: .45em; height: .45em;
  border: solid currentColor; border-width: 0 2px 2px 0;
  rotate: 45deg; translate: 0 -.12em;
}
.messen-mehr[aria-expanded="true"]::after { rotate: -135deg; translate: 0 .12em; }
@media (prefers-reduced-motion: no-preference) {
  .messen-mehr::after { transition: rotate .2s ease, translate .2s ease; }
}
.messen-fehlt {
  display: flex; gap: .7rem; align-items: flex-start; margin: 1rem 0 0;
  padding: .9rem 1rem; border: 1px dashed var(--moos-300); border-radius: var(--radius);
  font-size: .86rem; line-height: 1.5; color: var(--ink-soft);
}
.messen-fehlt p { margin: 0; }
.messen-fehlt strong { color: var(--ink); }
.messen-fehlt-symbol { flex: none; width: 1.3rem; height: 1.3rem; margin-top: .15rem; color: var(--brand); }
.messen-liste--vergangen { margin-top: 2.75rem; opacity: .82; }
.messen-liste--vergangen ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
ul.messen-liste--gitter {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .9rem;
}

/* Monatsleiste: blassgruenes Band, die Welle darunter uebernimmt das
   Newsletter-Band selbst (siehe main.messen + .band-newsletter). */
.messen-monate { padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(3.5rem, 6vw, 5rem); }
main.messen + .band-newsletter .welle--band { color: var(--moos-100); }
.messen-monate-kopf {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2.5rem;
  align-items: end; margin-bottom: .5rem;
}
.messen-monate-kopf h2 {
  display: flex; align-items: center; gap: .6rem; margin: 0 0 .45rem;
  font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.3rem); letter-spacing: -.028em;
}
.messen-monate-symbol {
  width: 2.3rem; height: 2.3rem; padding: .5rem; border-radius: 50%;
  background: var(--paper); color: var(--brand-strong);
}
.messen-monate-hinweis { text-align: right; transform: rotate(-5deg); padding: 0 1rem .4rem 0; }
.messen-monate-hinweis .handpfeil { margin: .2rem auto 0 0; }
.wald--monate { right: -1rem; bottom: -1rem; width: clamp(9rem, 13vw, 15rem); opacity: .5; }
.monate { display: flex; flex-wrap: wrap; gap: .55rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
.chip--monat { min-width: 4.4rem; justify-content: center; }
.chip--monat:disabled { opacity: .6; cursor: not-allowed; }
.chip--monat:disabled:hover { background: var(--paper); border-color: var(--line); color: var(--ink); }

@media (max-width: 900px) {
  .messen-held-zeile { grid-template-columns: minmax(0, 1fr); }
  .messen-held-buehne { max-width: 36rem; padding: 1rem 1.25rem 3.25rem 0; }
  .messen-monate-kopf { grid-template-columns: minmax(0, 1fr); }
  .messen-monate-hinweis, .wald--monate { display: none; }
}
@media (max-width: 860px) {
  /* .zettel ist unterhalb von 860px ein normaler Block (siehe Startseite);
     hier rueckt er von unten rechts in die Bildkante. */
  .messen-held-buehne, .messe-held-buehne { display: flex; flex-direction: column; }
  .messen-zettel, .messe-zettel { align-self: flex-end; margin: -2.75rem .75rem 0 0; }
}
@media (max-width: 640px) {
  .messen-held { padding-bottom: 3.25rem; }
  .messen-held-notiz { display: none; }
  .messen-held-buehne { padding: .25rem 0 .5rem; }
  .messen-held-foto { transform: none; }
  .messen-zettel { width: 12rem; margin: .75rem .25rem 0 0; }
  .messen-merkmale { gap: .6rem 1rem; }
  .messen-merkmale li { font-size: .8rem; }
  .messen-merkmale .symbol { width: 2.1rem; height: 2.1rem; padding: .5rem; }
  .messen-suche { flex-basis: 100%; max-width: none; margin-left: 0; }
  .messen-liste li { grid-template-columns: auto minmax(0, 1fr); gap: .75rem; padding: .7rem; }
  .messen-zeile-pfeil { display: none; }
  .messen-kalender, .messen-bild { width: 104px; height: 84px; }
  .messen-kalender-tage { font-size: 1.3rem; }
  .messen-zeile-titel { font-size: .98rem; }
  /* Unter 640 px deckte die Randnotiz Nadeln im Norden ab: Notiz weg,
     Kompass weg (dort stehen die Knoepfe), kein Vollbild. Die Infoleiste
     stellt "Zur Messe" unter den Text. */
  .karte-notiz, .karte-kompass { display: none; }
  .karte-zoom { top: .6rem; right: .6rem; gap: .3rem; }
  .karte-zoomknopf { width: 2.5rem; height: 2.5rem; font-size: 1.2rem; }
  .karte-vollbild { display: none; }
  .karte-info { grid-template-columns: auto minmax(0, 1fr); padding: .6rem .7rem; }
  .karte-info-los { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
}

/* ---------- Messe: Detailseite (src/vorlagen/messe.html) ----------

   Fakten als Kacheln, Meinung als eigener Kasten mit Akzentstreifen -- der
   optische Ausdruck der Trennung, die das Datenmodell schon erzwingt
   (src/messen.py). Rechts eine Seitenspalte wie auf den Artikelseiten. */
main.messe { position: relative; padding-bottom: 4rem; }
.messe-huelle { position: relative; z-index: 1; }
.wald--messe { right: -3rem; top: 5rem; width: clamp(8rem, 12vw, 14rem); opacity: .4; z-index: 0; }

.messe-held {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 2rem clamp(2rem, 4vw, 4rem); align-items: center; margin: .5rem 0 2.75rem;
}
.messe-held-text { min-width: 0; }
.messe-held-text h1 {
  margin: 0 0 .9rem; font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.3rem);
  line-height: 1.05; letter-spacing: -.03em;
  /* "Camping.Freizeit.Automobil" hat keine Umbruchstelle (tests/test_messen_umbruch.py). */
  overflow-wrap: anywhere;
}
.messe-kurz { margin: 0 0 1rem; max-width: 34rem; font-size: 1.05rem; line-height: 1.55; color: var(--ink-soft); }
.messe-status { display: inline-block; margin: 0 0 1rem; padding: .35rem .85rem; border-radius: 999px; font-size: .82rem; font-weight: 700; }
.messe-status--vergangen { background: var(--paper-sunk); color: var(--ink-soft); }
.messe-status--laeuft { background: var(--moos-100); color: var(--brand-strong); }
.messe-daten { display: flex; flex-direction: column; gap: .45rem; margin: 0 0 1rem; font-size: 1rem; color: var(--ink); }
.messe-daten .meta-teil { align-items: flex-start; gap: .6rem; }
.messe-daten .symbol { width: 1.35rem; height: 1.35rem; margin-top: .1rem; color: var(--brand); }
.messe-marken { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0 0 1.3rem; padding: 0; }
.messe-marken li {
  padding: .3rem .8rem; border-radius: 999px;
  background: var(--moos-100); color: var(--brand-strong); font-size: .78rem; font-weight: 700; letter-spacing: .02em;
}
.messe-knoepfe { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0 0 1.4rem; }
.messe-knoepfe .symbol { width: 1.05rem; height: 1.05rem; }
.messe-einordnung {
  display: flex; gap: .7rem; align-items: flex-start; margin: 0; max-width: 32rem;
  padding: .85rem 1rem; border-radius: var(--radius);
  background: var(--paper-warm); border: 1px solid var(--line);
  color: var(--ink-soft); font-size: .88rem; line-height: 1.5;
}
.messe-einordnung strong { color: var(--ink); }
.messe-einordnung--besucht { background: var(--moos-100); border-color: transparent; }
.messe-einordnung-symbol { flex: none; width: 1.5rem; height: 1.5rem; margin-top: .05rem; color: var(--brand); }

.messe-held-buehne { position: relative; padding: 1.5rem 2rem 3.25rem .5rem; }
.messe-kopfbild { position: relative; margin: 0; }
/* Rahmen ohne Beschnitt: das Aquarell steht vollstaendig in 16:9, samt
   seinem Papierrand (Raender sind je Bild verschieden breit). */
.messe-kopfbild-rahmen { display: block; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); background: var(--paper-sunk); }
.messe-kopfbild img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
/* Die Kennzeichnung bleibt links vom Zettel und wird nie verdeckt: sie ist
   die Offenlegung, kein Schmuck. */
.messe-bild-herkunft { margin: .5rem 13.5rem 0 0; font-size: .8rem; color: var(--ink-soft); letter-spacing: .01em; }
/* Lagekarte im Polaroid-Rahmen: ein Ausschnitt des eigenen Umrisses um den
   Messeort, kein Foto. Zeigt genau das, was belegt ist. */
.messe-lage {
  position: relative; margin: 0 auto; max-width: 26rem; padding: .8rem .8rem 3rem;
  background: var(--paper); box-shadow: var(--shadow-lift); transform: rotate(-2.5deg);
}
.messe-lage-karte { display: block; width: 100%; aspect-ratio: 1; background: var(--paper-sunk); }
.messe-lage .karte-laender path { fill: var(--moos-200); stroke: var(--paper); stroke-width: 1.5; }
.messe-lage-name {
  font-family: var(--font-text); font-size: 15px; font-weight: 700; fill: var(--ink);
  paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round;
}
.messe-lage-schrift {
  position: absolute; left: 1.2rem; right: 45%; bottom: .5rem;
  text-align: left; font-size: 1.55rem; color: var(--ink-soft); text-shadow: none;
}
.messe-held-notiz { position: absolute; left: -.75rem; top: -.75rem; z-index: 2; transform: rotate(-8deg); }
.messe-zettel { right: -.75rem; bottom: -.5rem; z-index: 2; width: 13rem; }

/* Rumpf: Hauptspalte und klebende Seitenspalte */
.messe-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(1.75rem, 3vw, 3rem); align-items: start; }
.messe-haupt { min-width: 0; }
.messe-abschnitt { margin-top: 2.6rem; scroll-margin-top: 88px; }
.messe-abschnitt:first-child { margin-top: 0; }
.messe-abschnitt h2 {
  display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem;
  font-size: clamp(1.35rem, 1.15rem + .8vw, 1.7rem); letter-spacing: -.02em;
}
.messe-abschnitt-symbol {
  width: 2rem; height: 2rem; padding: .4rem; border-radius: 50%;
  background: var(--moos-100); color: var(--brand-strong);
}
.messe-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: .9rem; margin: 0; }
.messe-kachel {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: .75rem; row-gap: .1rem; padding: .95rem 1rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.messe-kachel-symbol {
  grid-row: span 2; width: 2.1rem; height: 2.1rem; padding: .42rem; border-radius: 9px;
  background: var(--moos-100); color: var(--brand-strong);
}
.messe-kachel dt { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); }
.messe-kachel dd { margin: 0; font-size: .95rem; font-weight: 600; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.messe-kachel-klein { display: block; margin-top: .15rem; font-size: .8rem; font-weight: 500; color: var(--ink-soft); }
/* Rueckblick-Kacheln haben kein Symbol: einspaltig, sonst bleibt dem Wert nur die Restbreite neben dem Etikett. */
.messe-kachel--zahl { grid-template-columns: minmax(0, 1fr); }
.messe-veraltet {
  margin: 0 0 1rem; padding: .85rem 1.1rem;
  background: var(--paper-warm); border: 1px solid var(--line);
  border-left: 4px solid var(--accent); border-radius: var(--radius);
  color: var(--ink); font-size: .92rem;
}
.messe-beleg { margin: 1rem 0 0; font-size: .82rem; color: var(--ink-faint); overflow-wrap: anywhere; }
.messe-tickets .tabellen-huelle { margin: 0 0 1rem; }
.messe-tickets td:nth-child(n+2) { white-space: nowrap; }
@media (max-width: 640px) {
  .messe-tickets th, .messe-tickets td { padding: .8rem .5rem; }
}
.messe-tickets-hinweis { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.messe-anfahrt-karte {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem;
  padding: 1.1rem 1.2rem; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.messe-anfahrt-adresse { display: flex; gap: .8rem; align-items: flex-start; flex: 1 1 18rem; min-width: 0; }
.messe-anfahrt-adresse p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--ink-soft); }
.messe-anfahrt-adresse strong { color: var(--ink); }
.messe-anfahrt-symbol {
  flex: none; width: 2.4rem; height: 2.4rem; padding: .55rem; border-radius: 50%;
  background: var(--moos-100); color: var(--brand-strong);
}
.messe-anfahrt-link { margin: 0; }
.messe-anfahrt-link .symbol { width: 1rem; height: 1rem; }

/* .messe-meinung ist bewusst der einzige Kasten mit Akzentstreifen. */
.messe-meinung {
  padding: 1.6rem 1.8rem 1.8rem;
  background: var(--paper); border: 1px solid var(--line);
  border-left: 4px solid var(--brand); border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.messe-meinung-datum { margin: 0; font-size: .85rem; color: var(--ink-faint); }
.messe-offenlegung {
  margin: .9rem 0 0; padding: .7rem 1rem; font-size: .85rem;
  background: var(--paper-sunk); border-radius: var(--radius); color: var(--ink-soft);
}
.messe-meinung-text { margin-top: 0; }
.messe-besuch { margin-top: 1.6rem; }
.messe-besuch + .messe-besuch { margin-top: 2rem; padding-top: 1.8rem; border-top: 1px solid var(--line); }
.messe-impressionen {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.4rem 1.1rem; margin-top: 1.9rem;
}
.messe-impressionen h3 { grid-column: 1 / -1; margin: 0; }
.messe-impressionen figure { margin: 0; }
.messe-impressionen img { border-radius: var(--radius); width: 100%; height: auto; }
.messe-impressionen figcaption { margin-top: .5rem; font-size: .85rem; color: var(--ink-soft); }
.messe-bildnachweis { display: block; margin-top: .15rem; font-size: .78rem; color: var(--ink-faint); }
.messe-weitere .abschnitt-kopf { margin-bottom: 1rem; }
.messe-weitere .abschnitt-kopf h2 { margin-bottom: .2rem; }

/* Seitenspalte */
.messe-seite { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 1.25rem; }
.messe-nav ul { list-style: none; margin: 0; padding: 0; }
.messe-nav li + li { border-top: 1px solid var(--line); }
.messe-nav a {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding: .55rem 0; color: var(--ink-soft); text-decoration: none; font-size: .9rem; font-weight: 600;
}
.messe-nav a::after { content: "→"; color: var(--brand); }
.messe-nav a:hover { color: var(--brand-strong); }
.messe-seite .newsletter--artikel { margin: 0; padding: 1.2rem 1.25rem 1.3rem; }
.messe-seite .newsletter--artikel .newsletter-titel { font-size: 1.1rem; }
.messe-seite .newsletter-vorspann, .messe-seite .newsletter-klein, .messe-seite .newsletter-einwilligung { font-size: .8rem; }
/* Postkarte: Bergzug und Tannen als Hintergrund, Handschrift darueber. */
.postkarte {
  position: relative; overflow: hidden; min-height: 12.5rem; padding: 1.2rem 1.25rem;
  border-radius: var(--radius-lg); background: var(--moos-100);
}
.postkarte::before {
  content: ""; position: absolute; inset: 0; opacity: .55; pointer-events: none;
  background: url(/assets/bilder/berge.webp) center bottom / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 12%, #000 70%);
  mask-image: linear-gradient(to bottom, transparent 12%, #000 70%);
}
.postkarte::after {
  content: ""; position: absolute; left: -1.25rem; bottom: -1.25rem; width: 7.5rem;
  aspect-ratio: 900 / 846; opacity: .5; pointer-events: none;
  background: url(/assets/bilder/tannen.webp) center / contain no-repeat;
}
.postkarte .handschrift { position: relative; z-index: 1; transform: rotate(-4deg); font-size: 1.7rem; }
@media (prefers-color-scheme: dark) {
  .postkarte::before { opacity: .25; }
  .postkarte::after { opacity: .3; }
}

@media (max-width: 1000px) {
  .messe-grid { grid-template-columns: minmax(0, 1fr); }
  .messe-seite { position: static; }
  .messe-nav, .wald--messe { display: none; }
}
@media (max-width: 860px) {
  .messe-held { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .messe-held-buehne { max-width: 30rem; padding: 1rem .75rem 3.25rem 0; }
}
@media (max-width: 640px) {
  .messe-held-notiz { display: none; }
  .messe-held-buehne { padding: .5rem 0 .5rem; }
  /* Der Zettel steht hier unter der Kennzeichnung, nicht daneben: die
     Bildunterschrift braeuchte sonst vier Zeilen. */
  .messe-zettel { width: 12rem; margin: .5rem .25rem 0 0; }
  .messe-bild-herkunft { margin-right: 0; }
  .messe-lage { max-width: none; transform: rotate(-1.5deg); }
  .messe-daten { font-size: .95rem; }
  .messe-meinung { padding: 1.2rem 1.1rem 1.3rem; }
  .messe-anfahrt-karte { padding: 1rem; }
}

/* Bewegung aus, wenn das System es will. Der allgemeine Block weiter oben
   kuerzt nur Uebergaenge; Animationen und die versteckten Anfangs-
   zustaende der Messeseiten stehen hier. Das Skript fragt dieselbe
   Abfrage ab (Zoom springt, Nadeln stehen sofort). */
@media (prefers-reduced-motion: reduce) {
  .karte-nadel, .karte-nadel-anim, .karte-sammel-anim, .karte-deko, .messen-liste li, .messen-zeile-pfeil, .karte-zoomknopf { transition: none; }
  .messen-liste li:hover { transform: none; }
  .karte-nadel:hover .karte-nadel-anim, .karte-nadel:focus-visible .karte-nadel-anim, .karte-nadel--aktiv .karte-nadel-anim { translate: none; scale: 1; }
  .messen--bereit .karte-nadel-anim, .messen--bereit .karte--nadeln-da .karte-nadel-anim,
  .messen--bereit .karte--nadeln-da .karte-nadel--treffer .karte-nadel-anim,
  .messen--bereit .karte--nadeln-da + .karte-notiz .karte-pfeil path,
  .messen--bereit .karte-sammel-anim, .messen--bereit .karte--nadeln-da .karte-sammel-anim,
  .karte-sammelmarker:hover .karte-sammel-anim, .karte-sammelmarker--aktiv .karte-sammel-anim,
  .messen-zeile--neu, .messen-zahl--tick { animation: none; opacity: 1; translate: none; scale: 1; }
  .messen--bereit .karte-pfeil path { stroke-dashoffset: 0; }
  .auftritt-bereit .auftritt, .auftritt-bereit .auftritt--gestaffelt > * { opacity: 1; translate: none; transition: none; }
}

/* Erweiterter Messebestand: Auswahl bleibt auch bei langen Listen nutzbar. */
.messen-ergaenzung { flex-basis: 100%; display: flex; align-items: center; gap: .5rem; font-size: .9rem; cursor: pointer; }
.messen-ergaenzung input { width: 1.1rem; height: 1.1rem; accent-color: var(--brand); }
.karte-quellen { font-size: .72rem; line-height: 1.5; color: var(--ink-faint); margin-top: 1rem; }
@media (min-width: 900px) {
  .messen-kartenspalte { position: sticky; top: 5.5rem; align-self: start; }
}

/* ---------- Karte: echte Orte und Sammelmarker (11.09.2026) ----------
   Jede Nadel steht an ihrem Ort. Kaemen sich Marker zu nahe, fasst das
   Skript sie zu einem Sammelmarker mit Zahl zusammen (_skript.html,
   buendeln()); Messen am selben Gelaende sind eine Nadel mit Zahlmarke.
   Sammelmarker und Zahlmarken sind in Bildschirmpixeln gezeichnet (das
   Skript skaliert sie gegen Zoom und Kartengroesse), damit die Zahl auch
   bei 375 px lesbar bleibt. Die Trefferflaeche ist unsichtbar. */
.karte-nadel--weg { display: none; }
.karte-treffer { fill: transparent; stroke: none; }
.karte-sammelmarker { cursor: pointer; outline: none; }
.karte-sammel-anim { transform-box: fill-box; transform-origin: 50% 100%; }
.karte-sammel-schatten { fill: rgb(33 42 28 / 22%); }
.karte-sammel-stapel { fill: var(--brand); stroke: var(--paper); stroke-width: 2; opacity: .55; }
.karte-sammel-kreis, .karte-sammel-stiel { fill: var(--brand-strong); }
.karte-sammel-kreis { stroke: var(--paper); stroke-width: 2.5; }
.karte-zahl {
  font-family: var(--font-text); font-size: 13px; font-weight: 750; text-anchor: middle;
  fill: var(--paper); pointer-events: none;
}
.karte-zahlmarke { fill: var(--paper); stroke: var(--brand-strong); stroke-width: 2; }
.karte-zahl--marke { font-size: 11px; fill: var(--brand-strong); }
.karte-sammelmarker:hover .karte-sammel-kreis, .karte-sammelmarker:hover .karte-sammel-stiel,
.karte-sammelmarker:focus-visible .karte-sammel-kreis, .karte-sammelmarker:focus-visible .karte-sammel-stiel,
.karte-sammelmarker--aktiv .karte-sammel-kreis, .karte-sammelmarker--aktiv .karte-sammel-stiel,
.karte-sammelmarker--gelaende:hover .karte-nadel-koerper, .karte-sammelmarker--gelaende:focus-visible .karte-nadel-koerper,
.karte-sammelmarker--aktiv .karte-nadel-koerper { fill: var(--accent); }
.karte-sammelmarker:focus-visible .karte-sammel-kreis,
.karte-sammelmarker--gelaende:focus-visible .karte-nadel-koerper { stroke: var(--ink); stroke-width: 3.5; }
/* Bewegung nur, wenn das System sie nicht abbestellt hat (dieser Block
   steht hinter "Bewegung aus" und gewaenne sonst): Einfallen wie die Nadeln
   (Welle aus dem Skript, spaeter entstehende Marker ohne Verzoegerung),
   Hopser nach einer Filteraenderung, leichtes Anheben beim Zeigen. */
@media (prefers-reduced-motion: no-preference) {
  .karte-sammel-anim { transition: translate .18s ease, scale .2s ease; }
  .karte-sammelmarker:hover .karte-sammel-anim, .karte-sammelmarker:focus-visible .karte-sammel-anim,
  .karte-sammelmarker--aktiv .karte-sammel-anim { translate: 0 -2px; scale: 1.06; }
  .messen--bereit .karte-sammel-anim { opacity: 0; }
  .messen--bereit .karte--nadeln-da .karte-sammel-anim {
    opacity: 1; animation: nadel-fall .4s cubic-bezier(.2, .8, .3, 1.15) both;
    animation-delay: calc(var(--i, 0) * 55ms);
  }
  .messen--bereit .karte--nadeln-da .karte-nadel--treffer .karte-sammel-anim { animation: nadel-treffer .45s ease-out; }
}
.karte-notiz--weg { display: none; }