/* ============================================================
   HIKE & PICK — Design-Prototyp
   Gestaltungsidee: Schweizer Wanderwegweiser trifft Feldlogbuch.
   Farben aus dem Logo, Gelb aus der offiziellen Wanderweg-Signalisation.
   ============================================================ */

:root{
  --nacht:      #0A1A11;   /* Tannengrün-Schwarz, aus dem Logo */
  --wald:       #12291B;
  --moos:       #1D3D26;
  --limette:    #94C11F;   /* Signalgrün, aus dem Logo */
  --limette-hell:#B8E24A;
  --signal:     #FFC800;   /* Wanderweg-Gelb */
  --papier:     #F2EFE4;
  --papier-tief:#E4DFCE;
  --tinte:      #14190F;
  --grau:       #6D7364;

  --rand: clamp(1.25rem, 5vw, 4.5rem);
  --bahn: 78rem;

  --schrift-anzeige: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --schrift-text: "Newsreader", Georgia, "Times New Roman", serif;
}

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

/* Ankersprünge: Die Kopfleiste ist fest und deckte das Sprungziel zu —
   «01 DIE IDEE» klebte an ihrer Unterkante (Meldung Richard, 03.09.2026).
   Der Wert ist bewusst KLEINER als die Leiste (74,6 px bis 540 px Fenster-
   breite, 82,6 px darüber): Die Abschnitte bringen selbst rund 72 px
   Innenabstand mit, und der zählt voll mit. 2rem = 32 px ergeben zusammen
   rund 30 px Luft unter der Leiste — frei, aber ohne Lücke.
   NICHT auf Leistenhöhe setzen: Mit 5rem waren es 77 px, mit 7rem 109 px,
   und auf einem Telefon ist das bis zu einem Achtel der Bildschirmhöhe
   leeres Papier (beides von Richard am 03.09.2026 als zu viel verworfen).
   Global auf html, damit es für jeden Anker gilt: Navigation, Menüfeld,
   Hero-Knöpfe, Fusszeile, Sprungmarke. Ein scroll-margin am Ziel ADDIERT sich
   dazu — deshalb keines setzen, ausser das Ziel braucht wirklich mehr. Genau
   Genau ein Ziel braucht das, weil es wenig eigenen Innenabstand mitbringt:
   der Kasten .aktion, siehe dort. Die Sprungmarke auf den Rechtsseiten
   (#inhalt) kommt ohne aus — nachgemessen 29 bis 74 px. */
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:2rem; }

body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:var(--schrift-text);
  font-size:clamp(1.02rem, .55vw + .9rem, 1.18rem);
  line-height:1.72;
  overflow-x:hidden;
}

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

a{ color:inherit; }

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

.bahn{
  width:100%;
  max-width:var(--bahn);
  margin-inline:auto;
  padding-inline:var(--rand);
}

.sprungmarke{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--signal); color:var(--tinte);
  padding:.75rem 1.25rem; font-family:var(--schrift-anzeige);
  font-weight:700; text-decoration:none;
}
.sprungmarke:focus{ left:1rem; top:1rem; }

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

/* ---------- wiederkehrende Bausteine ---------- */

/* Gelbe Wanderweg-Raute */
.raute{
  display:inline-block;
  width:.72em; height:.72em;
  background:var(--signal);
  transform:rotate(45deg);
  flex:none;
}
.raute.klein{ width:.5em; height:.5em; }
/* Wegmarke an den Abschnittsnummern und im Kopf der Rechtsseiten.
   Festes Mass, nicht in em: Die Abschnittsnummer ist nur .8rem gross, eine
   geerbte Grösse ergäbe eine 9-px-Raute, die als Wegmarke nicht mehr lesbar
   ist. 10 px Kante heisst 14 px Diagonale — etwas höher als die Zeile, damit
   sie als Marke auffällt und nicht als Aufzählungspunkt gelesen wird. */
.raute.wegmarke{ width:.62rem; height:.62rem; }

/* Wegweiser-Tafel mit Spitze rechts */
.wegweiser{
  display:inline-flex; align-items:center; gap:.55em;
  background:var(--signal); color:var(--tinte);
  font-family:var(--schrift-anzeige);
  font-weight:700; font-stretch:82%;
  text-transform:uppercase; letter-spacing:.055em;
  font-size:clamp(.86rem, .3vw + .8rem, 1rem);
  line-height:1;
  padding:1.05em 3.2em 1.05em 1.15em;
  clip-path:polygon(0 0, calc(100% - 1.9em) 0, 100% 50%, calc(100% - 1.9em) 100%, 0 100%);
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.wegweiser b{
  font-weight:700; font-stretch:70%; opacity:.62;
  /* Wanderzeit klein wie auf den echten Wegweisern: «2 h 30 min», nicht «2 H 30 MIN»
     (Wunsch Daniel, 28.09.2026) */
  text-transform:none;
  /* «2 h 30 min» nie auseinanderreissen — umbrechen darf nur die Strecke */
  white-space:nowrap;
}
.wegweiser__nr{
  display:inline-grid; place-items:center;
  width:1.7em; height:1.7em; border-radius:50%;
  background:var(--tinte); color:var(--signal);
  font-size:.78em; font-stretch:100%;
  letter-spacing:0;
}

/* Abschnittsnummer */
.abschnitt-nummer{
  display:flex; align-items:center; gap:.9rem;
  font-family:var(--schrift-anzeige);
  font-size:.8rem; font-weight:700; font-stretch:78%;
  text-transform:uppercase; letter-spacing:.24em;
  color:var(--grau);
  margin:0 0 clamp(1.5rem,3vw,2.5rem);
}
.abschnitt-nummer .strich{ width:clamp(2rem,6vw,4.5rem); height:1px; background:currentColor; opacity:.5; }
.abschnitt-nummer.hell{ color:var(--limette); }

h1, h2{
  font-family:var(--schrift-anzeige);
  font-weight:800; font-stretch:112%;
  text-transform:uppercase;
  line-height:.93;
  letter-spacing:-.018em;
  margin:0;
  text-wrap:balance;
  /* Lange zusammengesetzte Wörter («ZUSAMMENKAM») sprengen auf 320-px-Geräten
     sonst die Spalte und schieben die ganze Seite in die Breite. */
  overflow-wrap:break-word;
  hyphens:auto; -webkit-hyphens:auto;
}
h2{ font-size:clamp(2.1rem, 5.4vw, 3.9rem); }
h2.hell{ color:var(--papier); }

.kicker{
  display:flex; align-items:center; flex-wrap:wrap; gap:.4rem .85rem;
  font-family:var(--schrift-anzeige);
  font-size:.78rem; font-weight:600; font-stretch:78%;
  text-transform:uppercase; letter-spacing:.26em;
  color:var(--limette-hell);
  margin:0 0 1.4rem;
}
.kicker .punkt{ width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.6; }

/* Körnung und Höhenlinien */
.koernung{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hoehenlinien{
  position:absolute; pointer-events:none; z-index:1;
  background-color:var(--limette);
  -webkit-mask-image:url("../img/hoehenlinien.svg");
  mask-image:url("../img/hoehenlinien.svg");
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
  opacity:.13;
}
.hoehenlinien--hero{ inset:auto -18% -10% 30%; height:120%; }
.hoehenlinien--mitmachen{ inset:-25% 40% auto -20%; height:150%; transform:scaleX(-1); opacity:.09; }
.hoehenlinien--fuss{ inset:-40% -10% auto 45%; height:230%; opacity:.1; }

/* ============================================================
   KOPF
   ============================================================ */
.kopf{
  position:fixed; inset:0 0 auto; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.1rem var(--rand);
  color:var(--papier);
  transition:background-color .35s, backdrop-filter .35s, border-color .35s;
  border-bottom:1px solid transparent;
}
/* Beim Scrollen ändert sich NUR der Hintergrund — keine Höhe, kein Logomass.
   Sonst ruckt die Kopfleiste bei jedem Sprung auf einen Anker. */
.kopf--fest{
  background:rgba(10,26,17,.93);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom-color:rgba(148,193,31,.22);
}

.marke{
  display:flex; align-items:center; gap:.7rem;
  text-decoration:none;
  font-family:var(--schrift-anzeige);
  font-weight:800; font-stretch:108%;
  text-transform:uppercase; letter-spacing:.02em;
  font-size:1.05rem;
}
.marke__amp{ color:var(--limette); margin-inline:.08em; }
.marke__zeichen{
  width:2.9rem; height:2.9rem; object-fit:contain; flex:none;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));
}

.navi{ display:flex; gap:clamp(1rem,2.4vw,2.4rem); }
.navi a{
  position:relative;
  text-decoration:none;
  font-family:var(--schrift-anzeige);
  font-size:.82rem; font-weight:600; font-stretch:82%;
  text-transform:uppercase; letter-spacing:.16em;
  padding-block:.35rem;
}
.navi a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:2px; background:var(--signal);
  transition:right .35s cubic-bezier(.2,.7,.2,1);
}
.navi a:hover::after{ right:0; }

/* Sprachschalter — DE · FR · IT · EN */
.sprachen{
  display:flex; align-items:stretch; flex:none;
  border:1px solid rgba(242,239,228,.3);
}
.sprachen__taste{
  appearance:none; -webkit-appearance:none;
  background:none; border:0; cursor:pointer;
  padding:.45rem .62rem;
  font-family:var(--schrift-anzeige);
  font-size:.71rem; font-weight:700; font-stretch:78%;
  text-transform:uppercase; letter-spacing:.13em;
  color:rgba(242,239,228,.65);
  transition:background-color .25s, color .25s;
}
.sprachen__taste + .sprachen__taste{ border-left:1px solid rgba(242,239,228,.24); }
.sprachen__taste:hover{ color:var(--papier); background:rgba(242,239,228,.1); }
.sprachen__taste.ist-aktiv{ background:var(--signal); color:var(--tinte); }

/* ---------- Menütaste und Menüfeld für kleine Bildschirme ---------- */
.menue-taste{
  display:none;
  appearance:none; -webkit-appearance:none;
  background:none; border:1px solid rgba(242,239,228,.3);
  padding:.62rem .68rem; cursor:pointer;
  flex:none;
}
.menue-taste__striche{ display:block; width:1.3rem; }
.menue-taste__striche i{
  display:block; height:2px; background:var(--papier);
  transition:transform .32s cubic-bezier(.2,.7,.2,1), opacity .2s;
}
.menue-taste__striche i + i{ margin-top:.32rem; }
body.menue-offen .menue-taste{ border-color:var(--signal); }
body.menue-offen .menue-taste__striche i{ background:var(--signal); }
body.menue-offen .menue-taste__striche i:nth-child(1){ transform:translateY(.52rem) rotate(45deg); }
body.menue-offen .menue-taste__striche i:nth-child(2){ opacity:0; }
body.menue-offen .menue-taste__striche i:nth-child(3){ transform:translateY(-.52rem) rotate(-45deg); }

.menue[hidden]{ display:none; }
.menue{
  position:fixed; inset:0; z-index:45;
  display:flex; flex-direction:column; justify-content:center; gap:3rem;
  padding:7rem var(--rand) 3rem;
  background:rgba(10,26,17,.97);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .35s cubic-bezier(.2,.7,.2,1), transform .35s cubic-bezier(.2,.7,.2,1), visibility .35s;
}
body.menue-offen .menue{ opacity:1; visibility:visible; transform:none; }
body.menue-offen{ overflow:hidden; }

.menue__navi{ display:flex; flex-direction:column; }
.menue__navi a{
  display:flex; align-items:center; gap:1rem;
  padding:1rem 0;
  text-decoration:none; color:var(--papier);
  font-family:var(--schrift-anzeige);
  font-weight:800; font-stretch:104%;
  text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(1.6rem,7vw,2.4rem);
  line-height:1;
  border-bottom:1px dashed rgba(242,239,228,.17);
}
.menue__navi a .raute{ width:.55em; height:.55em; opacity:.8; transition:opacity .3s, transform .3s; }
.menue__navi a:hover .raute, .menue__navi a:focus-visible .raute{ opacity:1; transform:rotate(45deg) scale(1.25); }

.menue__sprachen{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.menue__sprachen p{
  margin:0;
  font-family:var(--schrift-anzeige);
  font-size:.72rem; font-weight:700; font-stretch:78%;
  text-transform:uppercase; letter-spacing:.2em;
  color:var(--limette);
}
.menue__sprachen .sprachen__taste{ padding:.6rem .85rem; font-size:.78rem; }

@media (max-width:820px){
  .navi{ display:none; }
  .menue-taste{ display:inline-flex; }
  /* Die Sprachwahl bleibt sichtbar und rückt neben den Menüknopf. */
  .kopf > .sprachen{ margin-left:auto; }
}
@media (min-width:821px){
  .menue{ display:none; }
}
@media (max-width:540px){
  .kopf{ gap:.5rem; padding-inline:1rem; }
  .marke{ font-size:.9rem; gap:.55rem; }
  .marke__zeichen{ width:2.4rem; height:2.4rem; }
  .sprachen__taste{ padding:.42rem .4rem; font-size:.63rem; letter-spacing:.04em; }
  .menue-taste{ padding:.55rem .58rem; }
  .menue-taste__striche{ width:1.15rem; }
}
/* Unter 400 px reicht der Platz für Bildmarke, Schriftzug, vier Sprachen und
   Menüknopf nicht mehr. Der Schriftzug entfällt zuerst — er steht im Logo ohnehin. */
@media (max-width:340px){
  .marke__wort{ display:none; }
}
@media (max-width:400px){
  .taste{ padding-inline:1em; font-size:.73rem; letter-spacing:.07em; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  padding-block:clamp(8rem,18vh,12rem) clamp(4rem,9vh,7rem);
  background:var(--nacht);
  color:var(--papier);
  overflow:hidden;
  isolation:isolate;
}
.hero__bild{ position:absolute; inset:0; z-index:0; }
.hero__bild img{ width:100%; height:100%; object-fit:cover; object-position:62% 48%; }
.hero__bild::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--nacht) 3%, rgba(10,26,17,.8) 34%, rgba(10,26,17,.3) 70%, rgba(10,26,17,.55) 100%),
    linear-gradient(to right, rgba(10,26,17,.82) 8%, rgba(10,26,17,.15) 68%, rgba(10,26,17,.35) 100%);
}
.hero__inhalt{ position:relative; z-index:3; width:100%; }
/* Der Hero sitzt am selben linken Satzspiegel wie alle übrigen Abschnitte;
   die Breite begrenzen die einzelnen Zeilen, nicht der Block — sonst
   zentriert margin-inline:auto den Block im Flex-Container. */
.hero__inhalt > *{ max-width:46rem; }

h1{
  font-size:clamp(2.6rem, 8.2vw, 6.1rem);
  font-stretch:116%;
  margin:0 0 clamp(1.4rem,3vw,2rem);
}
.hero__akzent{
  color:var(--limette-hell);
  display:inline-block;
}
.hero__lead{
  /* Ohne eigene Begrenzung — er nimmt die 46rem von .hero__inhalt > * und steht
     damit auf derselben Breite wie der Titel.
     text-wrap:balance verteilt die Zeilen gleichmässig; sonst bleibt in der
     deutschen Fassung «wurde.» als Einzeiler stehen (Schusterjunge). */
  text-wrap:balance;
  font-size:clamp(1.08rem,.6vw + .95rem,1.32rem);
  /* Breiter als der Titel (46rem) — aber nur, wo der Platz bis zum Logo reicht.
     Der deutsche Text misst zusammenhängend 1467 px und braucht für zwei Zeilen
     rund 792 px; ab 1250 px Fenster sind 807 px frei, darunter nicht. */
  color:rgba(242,239,228,.9);
  margin:0 0 clamp(1.8rem,4vw,2.6rem);
}

@media (min-width:1250px){
  .hero__lead{ max-width:50rem; }
}

.hero__tasten{ display:flex; flex-wrap:wrap; gap:.9rem; }
.taste{
  display:inline-flex; align-items:center; gap:.6rem;
  text-decoration:none;
  font-family:var(--schrift-anzeige);
  font-weight:700; font-stretch:84%;
  text-transform:uppercase; letter-spacing:.13em;
  font-size:.86rem;
  padding:1.05em 1.9em;
  border:2px solid transparent;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), background-color .3s, color .3s, border-color .3s;
}
.taste--voll{ background:var(--signal); color:var(--tinte); }
.taste--voll:hover{ transform:translateY(-3px); background:var(--limette-hell); }
.taste--leer{ border-color:rgba(242,239,228,.4); color:var(--papier); }
.taste--leer:hover{ border-color:var(--signal); color:var(--signal); transform:translateY(-3px); }
.taste--gruen{ background:var(--limette); color:var(--nacht); }
.taste--gruen:hover{ transform:translateY(-3px); background:var(--limette-hell); }

.hero__hinweis{
  margin:clamp(2rem,5vw,3.2rem) 0 0;
  font-family:var(--schrift-anzeige);
  font-size:.72rem; font-weight:600; font-stretch:78%;
  text-transform:uppercase; letter-spacing:.24em;
  color:rgba(242,239,228,.55);
}
.hero__hinweis span{ display:inline-block; margin-right:.5rem; animation:tupfen 2.6s ease-in-out infinite; }
@keyframes tupfen{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }

/* Lage und Grösse des Aufklebers stehen in Variablen, weil die
   Clean-Up-Day-Plakette darunter daran ausgerichtet wird. */
.hero{
  --kleber-breite:clamp(10rem, 23vw, 19.5rem);
  --kleber-oben:clamp(5.2rem, 11vh, 8rem);
  --kleber-rechts:clamp(1rem, 4vw, 4.5rem);
  --kleber-hoehe:calc(var(--kleber-breite) * 1.031);   /* 678 : 699 */
  --cud-breite:calc(var(--kleber-breite) * .62);
  --cud-hoehe:calc(var(--cud-breite) * 1.2615);        /* 520 : 656 */
}
.hero__kleber{
  position:absolute; z-index:4;
  right:var(--kleber-rechts);
  top:var(--kleber-oben);
  width:var(--kleber-breite);
  height:auto;
  transform:rotate(-7deg);
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.45));
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.hero__kleber:hover{ transform:rotate(-2deg) scale(1.03); }


/* ---------- Clean-Up-Day-Plakette (Originalgrafik der IGSU) ---------- */
/* Standardmässig aus — sichtbar erst, wenn das Kopfskript «mit-plakette»
   setzt. Siehe Kommentar dort. */
.cud{ display:none; }
.mit-plakette .hero{ --cud-platz:calc(var(--cud-hoehe) + 1rem); }
.mit-plakette .cud{
  position:absolute; z-index:5;
  display:block;
  /* Waagrecht auf den Aufkleber ausgemittet: gleiche Mitte, nicht gleicher Rand. */
  right:calc(var(--kleber-rechts) + (var(--kleber-breite) - var(--cud-breite)) / 2);
  top:calc(var(--kleber-oben) + var(--kleber-hoehe) + 1.4rem);
  width:var(--cud-breite);
  transform:rotate(-4deg);
  transform-origin:50% 0;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.4));
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.mit-plakette .cud img{ width:100%; height:auto; display:block; }
.mit-plakette .cud:hover, .cud:focus-visible{ transform:rotate(-1deg) scale(1.04); }
.mit-plakette .cud.anim{ animation-name:cudAuf; }
@keyframes cudAuf{
  from{ opacity:0; transform:rotate(-14deg) translateY(-14px) scale(.9); }
  to{ opacity:1; transform:rotate(-4deg); }
}

@media (max-width:820px){
  .hero{ align-items:flex-end; }
  .hero__bild img{ object-position:44% 14%; }
  .kicker{ font-size:.7rem; letter-spacing:.2em; }
}

/* Auf Telefonen überdeckt der Aufkleber oben rechts den Titel. Er rückt deshalb
   nach unten neben die Tasten — und die Tasten geben ihm eine feste Spalte frei.
   Ohne diese Reservation hängt die Breite am längsten Tastentext (französisch
   «Comment participer»), und der Aufkleber läge je nach Sprache anders. */
@media (max-width:700px){
  .taste{ font-size:.8rem; letter-spacing:.1em; }
  .hero__tasten{
    flex-direction:column;
    align-items:stretch;
    max-width:calc(100% - var(--kleber-breite) - 1.5rem);
  }
  .taste{ justify-content:center; text-align:center; min-width:0; }
  /* Aufkleber und Plakette stehen als Paar übereinander in der rechten Spalte.
     Der Aufkleber ist dafür etwas kleiner als allein — beide zusammen müssen
     zwischen Lauftext und Hinweis passen, und dieses Band ist knapp. */
  .hero{
    --kleber-breite:clamp(6.5rem, min(36vw, 13vh), 12.5rem);
    /* Auf Telefonen hat die Plakette ihr eigenes Mass, nicht einen Bruchteil des
       Aufklebers — sonst schrumpft sie jedes Mal mit, wenn der Platz enger wird. */
    --cud-breite:clamp(5.5rem, min(28vw, 10vh), 8.5rem);
    /* Die Gruppe sitzt tief — bis knapp über die Unterkante des Hero. Der
       Hinweis «Gelbe Raute folgen» steht links, die Gruppe rechts, sie kommen
       sich nicht in die Quere. Nur so bleibt beiden genug Grösse. */
    --gruppe-unten:clamp(1.25rem, 3vh, 2.5rem);
    --cud-platz:0px;
  }
  .hero__kleber{
    width:var(--kleber-breite);
    top:auto;
    bottom:calc(var(--gruppe-unten) + var(--cud-platz));
    right:.9rem;
  }
  .mit-plakette .cud{
    top:auto;
    bottom:var(--gruppe-unten);
    right:calc(.9rem + (var(--kleber-breite) - var(--cud-breite)) / 2);
    width:var(--cud-breite);
  }
}

/* Der englische Hinweis «Follow the yellow diamond» ist der längste und liefe auf
   sehr schmalen Geräten unter die Plakette. Enger gesetzt, Gruppe etwas schmaler.
   Muss NACH der Grundregel für .hero__hinweis stehen, sonst greift er nicht. */
@media (max-width:480px){
  .hero__hinweis{ font-size:.64rem; letter-spacing:.13em; }
}
@media (max-width:360px){
  .hero__hinweis{ font-size:.6rem; letter-spacing:.1em; }
  .hero{ --kleber-breite:clamp(6.5rem, min(32vw, 13vh), 12.5rem); }
}

/* ============================================================
   ZÄHLER
   ============================================================ */
.zaehler{
  position:relative; z-index:1;
  background:var(--wald);
  color:var(--papier);
  padding-block:clamp(3rem,7vw,5rem) clamp(2rem,4vw,3rem);
  border-block:1px solid rgba(148,193,31,.2);
}
/* Waagrecht gesetzt: Seit Gewicht und Fundstücke entfallen sind, stünde eine
   einzelne Zahl in einer breiten Zeile sonst verloren da. Weitere Kennzahlen
   reihen sich einfach an und brechen bei Bedarf um. */
.zaehler__reihe{
  display:flex; flex-wrap:wrap;
  gap:clamp(1.4rem,4vw,3rem);
}
.zahl{
  display:flex; align-items:baseline; gap:clamp(.9rem,2vw,1.4rem);
  border-left:2px solid var(--limette); padding-left:clamp(1rem,2vw,1.6rem);
}
.zahl__wert{
  display:block;
  font-family:var(--schrift-anzeige);
  font-weight:800; font-stretch:118%;
  font-size:clamp(2.7rem,7vw,4.8rem);
  line-height:.9; letter-spacing:-.03em;
}
.zahl__wert small{
  font-size:.3em; font-stretch:82%; letter-spacing:.06em;
  color:var(--limette); margin-left:.28em; vertical-align:.9em;
  text-transform:uppercase;
}
.zahl__text{
  display:block;
  font-family:var(--schrift-anzeige);
  font-size:.76rem; font-weight:600; font-stretch:80%;
  text-transform:uppercase; letter-spacing:.2em;
  color:rgba(242,239,228,.62);
}

/* ============================================================
   IDEE
   ============================================================ */
.idee{
  background:var(--papier);
  padding-block:clamp(4.5rem,11vw,9rem);
}
.idee__raster{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5rem);
  align-items:start;
}
@media (min-width:900px){
  .idee__raster{ grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr); }
  .idee__seite{ margin-top:4.5rem; }
}

.feldnotiz{
  margin:clamp(2.5rem,5vw,3.5rem) .4rem 0 2.5rem;
  padding:1.6rem 1.8rem;
  border:2px dashed rgba(109,115,100,.45);
  transform:rotate(.8deg);
  background:rgba(255,200,0,.07);
}
/* Seit die Angabe ein Satzstück statt einer Zahl ist, kleiner gesetzt —
   «+ ein paar Minuten» in Zahlengrösse würde umbrechen und den Kasten sprengen. */
.feldnotiz__wert{
  margin:0 0 .55rem;
  font-family:var(--schrift-anzeige);
  font-weight:800; font-stretch:104%;
  font-size:clamp(1.25rem,2.4vw,1.7rem); line-height:1.12; letter-spacing:-.015em;
  text-wrap:balance;
}
.feldnotiz__text{ margin:0; font-size:.95rem; line-height:1.6; color:#3A4034; }
.feldnotiz.anschleichen{ transform:translateY(26px) rotate(.8deg); }
.feldnotiz.anschleichen.sichtbar{ transform:rotate(.8deg); }
/* Keine eigene Begrenzung — die Spalte des Rasters gibt die Breite vor.
   34rem ergaben nur rund 46 Zeichen pro Zeile, das wirkte zerhackt. */
.idee__text p{ max-width:none; }
.idee__text h2{ margin-bottom:clamp(1.6rem,3vw,2.4rem); }

.lead{
  font-size:clamp(1.2rem,.8vw + 1rem,1.5rem);
  line-height:1.55;
  text-wrap:balance;
}

.zitat{
  margin:clamp(2.2rem,5vw,3.2rem) 0;
  padding:0;
}
.zitat p{
  margin:0;
  font-family:var(--schrift-anzeige);
  font-weight:700; font-stretch:96%;
  font-size:clamp(1.35rem,2.6vw,2.05rem);
  line-height:1.22;
  text-transform:none;
  max-width:22ch;
}
.zitat p::before{ content:""; display:block; width:3.5rem; height:3px; background:var(--signal); margin-bottom:1.1rem; }

/* Namenszug rechts unter dem Text */
.idee__signatur{
  margin-top:.4rem !important;
  text-align:right;
  font-style:italic;
  color:var(--grau);
}

.idee__bild{
  margin:0;
  transform:rotate(-1.4deg);
}
.idee__bild img{
  width:100%;
  border:.7rem solid #fff;
  box-shadow:0 18px 40px rgba(20,25,15,.16);
}
.idee__bild figcaption{
  display:flex; align-items:flex-start; gap:.7rem;
  margin-top:1.2rem; padding-inline:.4rem;
  transform:rotate(1.4deg);
  font-size:.92rem; line-height:1.5; font-style:italic;
  color:var(--grau);
}
.idee__bild figcaption .raute{ margin-top:.45em; }

/* ============================================================
   MITMACHEN
   ============================================================ */
.mitmachen{
  position:relative;
  background:var(--nacht);
  color:var(--papier);
  padding-block:clamp(4.5rem,11vw,9rem);
  overflow:hidden;
  isolation:isolate;
}
.mitmachen .bahn{ position:relative; z-index:3; }
.mitmachen h2{ margin-bottom:clamp(2.5rem,6vw,4rem); }

.schritte{
  list-style:none; margin:0; padding:0;
  display:grid;
  /* Vier Schritte: am Rechner vier Spalten, auf mittleren Breiten zwei, auf
     Telefonen eine. */
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));
  gap:clamp(2rem,3.5vw,2.6rem);
  align-items:start;
}
.schritte li{ display:flex; flex-direction:column; align-items:flex-start; gap:1.1rem; }
.schritte li:hover .wegweiser{ transform:translateX(8px); }
.schritte p{
  margin:0;
  color:rgba(242,239,228,.74);
  font-size:1rem;
  max-width:26rem;
}
/* Bei mittleren Breiten sonst 3 Spalten und ein einsamer vierter Schritt darunter */
@media (min-width:700px) and (max-width:1150px){
  .schritte{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.schritte p a{
  color:var(--signal);
  text-decoration:underline; text-underline-offset:.18em;
  text-decoration-thickness:1px; text-decoration-color:rgba(255,200,0,.45);
}
.schritte p a:hover{ text-decoration-color:var(--signal); }
.schritte p sup{ color:var(--signal); font-size:.7em; }
/* Adressen und Domains nie mitten im Wort umbrechen */
.nichtumbrechen{ white-space:nowrap; }
/* Aktionskasten unter den Schritten — gebaut wie die Feldnotiz im Abschnitt
   «Die Idee», aber für den dunklen Grund. Grün, weil der Knopf im Hero dorthin führt. */
.aktion{
  margin-top:clamp(2.2rem,4.5vw,3.2rem);
  /* Der grüne Knopf im Hero springt hierher. Anders als ein Abschnittsanfang
     bringt dieser Kasten nur 24 px eigenen Innenabstand mit, nicht 72 px —
     mit dem globalen Polster von 2rem allein käme er der Kopfleiste auf
     5 px nahe. Die 4rem hier bringen ihn auf dieselben rund 37 px Luft,
     die auch die Abschnitte haben. */
  scroll-margin-top:4rem;
  max-width:44rem;
  padding:1.5rem 1.8rem;
  border:2px dashed rgba(148,193,31,.5);
  background:rgba(148,193,31,.07);
}
.aktion__titel{
  margin:0 0 .6rem;
  font-family:var(--schrift-anzeige);
  font-weight:800; font-stretch:104%;
  font-size:clamp(1.15rem,2.2vw,1.5rem); line-height:1.12;
  letter-spacing:-.01em;
  color:var(--limette-hell);
}
.aktion__text{
  margin:0;
  font-size:1rem; line-height:1.6;
  color:rgba(242,239,228,.82);
}

/* Einverständnis zum Veröffentlichen — kleiner als der Fliesstext, aber lesbar */
.schritte__stern{
  margin:clamp(2.2rem,4.5vw,3.2rem) 0 0;
  /* Keine Begrenzung: Der deutsche Satz braucht 898 px für eine Zeile, die
     Spalte bietet ab rund 1000 px Fensterbreite genug. Darunter bricht er um. */
  font-size:.86rem; line-height:1.55;
  color:rgba(242,239,228,.45);
}

/* ---------- Kasten mit weiterführenden Verweisen ----------
   Steht in der Zählerzeile rechts neben der Zahl: Dort ist Platz, seit Gewicht
   und Fundstücke entfallen sind, und der Hero bleibt unangetastet. */
/* Ohne senkrechten Strich und ohne Einzug — so bleibt für die Verweise mehr
   Breite, und sie passen auf dem Handy je auf eine Zeile. */
.partner{
  margin-left:auto;
  align-self:center;
  padding:0;
}
.partner h3{
  margin:0 0 .55rem;
  font-family:var(--schrift-anzeige);
  font-size:.66rem; font-weight:700; font-stretch:78%;
  text-transform:uppercase; letter-spacing:.2em;
  color:var(--limette);
  flex:none;
}
.partner ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:.4rem;
}
.partner a{
  display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:.15rem .5rem;
  text-decoration:none; color:var(--papier);
  transition:color .3s, transform .3s cubic-bezier(.2,.7,.2,1);
}
.partner a:hover, .partner a:focus-visible{ color:var(--signal); transform:translateX(3px); }
.partner__name{
  font-family:var(--schrift-anzeige);
  font-weight:800; font-stretch:92%;
  text-transform:uppercase; letter-spacing:.03em;
  font-size:.88rem;
}
.partner__text{ font-size:.9rem; color:rgba(242,239,228,.7); }
@media (max-width:820px){
  .partner{ margin-left:0; }
  .partner__name{ font-size:.82rem; }
  .partner__text{ font-size:.82rem; }
  .partner a{ flex-wrap:nowrap; }
}
/* Enger gesetzt, damit «Lara Green — Die Umwelt ist kein Aschenbecher …» auf
   eine Zeile passt. Unter 340 px geht das nicht mehr, dort darf sie umbrechen. */
@media (max-width:400px){
  .partner__name{ font-size:.78rem; }
  .partner__text{ font-size:.78rem; }
}
@media (max-width:340px){
  .partner a{ flex-wrap:wrap; }
}
.partner a:hover .partner__text{ color:rgba(242,239,228,.92); }

/* ============================================================
   PANORAMA
   ============================================================ */
.panorama{
  position:relative;
  background:var(--nacht);
  display:grid;
}
.panorama img{
  grid-area:1/1;
  width:100%; height:clamp(18rem,48vh,30rem);
  object-fit:cover; object-position:50% 52%;
  opacity:.62;
}
.panorama::after{
  content:""; grid-area:1/1; z-index:1;
  background:
    radial-gradient(120% 78% at 50% 50%, rgba(10,26,17,.82) 0%, rgba(10,26,17,.5) 45%, rgba(10,26,17,.25) 75%),
    linear-gradient(to bottom, var(--nacht), rgba(10,26,17,0) 22%, rgba(10,26,17,0) 78%, var(--nacht));
}
.panorama__text{
  grid-area:1/1; z-index:2;
  display:grid; place-items:center;
  padding:var(--rand);
  text-align:center;
}
.panorama__text p{
  margin:0;
  font-family:var(--schrift-anzeige);
  font-weight:800; font-stretch:118%;
  text-transform:uppercase;
  font-size:clamp(1.7rem,5.5vw,4rem);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--papier);
  text-shadow:0 6px 30px rgba(10,26,17,.6);
}

/* ============================================================
   LOGBUCH
   ============================================================ */
.logbuch{
  background:var(--papier);
  padding-block:clamp(4.5rem,11vw,9rem);
}
.logbuch__kopf{
  display:grid; gap:clamp(1.5rem,4vw,3.5rem);
  align-items:end;
}
.logbuch__kopf h2{ font-size:clamp(2rem,4.4vw,3.3rem); }
@media (min-width:900px){
  .logbuch__kopf{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
}

/* Die Spur: gestrichelte Weglinie am linken Rand */
.spur{
  position:relative;
  margin-top:clamp(3rem,7vw,5rem);
  /* Lage der Weglinie, gemessen ab dem linken Rand der Bahn */
  --linie:calc(var(--rand) + .35rem);
  /* Grösse der Wegmarke; die Mitte darunter rechnet damit. */
  --marke:1.6rem;
  /* Versatz der Raute: Linienmitte minus halbe Rautenbreite.
     Bezugspunkt ist der Eintrag, der beim Innenrand der Bahn beginnt. */
  --linie-versatz:calc(var(--linie) - var(--rand) + 1px - var(--marke) / 2);
}
.spur::before{
  content:"";
  position:absolute;
  left:var(--linie);
  top:0; bottom:1.5rem;
  width:2px;
  background-image:linear-gradient(to bottom, var(--grau) 55%, transparent 55%);
  background-size:2px 14px;
  opacity:.42;
}
@media (min-width:900px){
  .spur{ --linie:calc(var(--rand) + 1rem); }
}

.eintrag{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3rem);
  align-items:center;
  padding:clamp(2.2rem,5vw,3.6rem) 0 clamp(2.2rem,5vw,3.6rem) clamp(2.2rem,5vw,4rem);
  border-bottom:1px dashed rgba(109,115,100,.35);
}
.eintrag:first-child{ padding-top:0; }
@media (min-width:820px){
  .eintrag{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); }
  .eintrag--gespiegelt .eintrag__bild{ order:2; }
}

.spur__marke{
  position:absolute;
  left:var(--linie-versatz); top:clamp(2.2rem,5vw,3.6rem);
  width:var(--marke); height:var(--marke);
  outline:6px solid var(--papier);
}
.eintrag:first-child .spur__marke{ top:0; }

.eintrag__bild{ margin:0; overflow:hidden; }
.eintrag__bild img{
  width:100%; aspect-ratio:4/3; object-fit:cover; object-position:50% 42%;
  transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .6s;
  filter:saturate(.94);
}

/* ---------- Bildergalerie eines Logbuch-Eintrags ----------
   Gebaut als waagrechter Scroll-Streifen mit scroll-snap, nicht als
   Überblendung. Drei Gründe:
   · Auf dem Telefon wischt man von selbst — ohne eine Zeile JavaScript.
   · OHNE JavaScript bleibt der Streifen scrollbar, statt leer zu sein
     oder nur das erste Bild zu zeigen.
   · Der Browser behält die Bildposition beim Drehen des Geräts.
   Rauten und Klickfläche ergänzt app.js. Ein Eintrag mit nur einem Foto
   sieht deshalb aus wie vorher.

   ⚠️ Ob gescrollt wird, entscheidet `:has(img + img)` — also das zweite
   Bild selbst, nicht eine Klasse von app.js. Sonst wäre die Galerie ohne
   JavaScript starr und zeigte nur das erste Foto. */
.galerie__spur{ display:flex; }
.galerie__spur:has(img + img){
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  /* Das Wischen darf nicht auf die Seite darunter durchschlagen */
  overscroll-behavior-x:contain;
  /* Balken ausblenden — die Rauten zeigen die Position an */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.galerie__spur::-webkit-scrollbar{ display:none; }
.galerie__spur img{ flex:0 0 100%; scroll-snap-align:center; }

/* Die Vergrösserung beim Überfahren gilt nur für Einzelbilder. Im
   Scroll-Streifen erzeugte die Transformation scrollbaren Überstand und
   schöbe den Schnappunkt daneben — und bei mehreren Bildern ist das
   Weiterblättern die Geste, nicht das Zoomen. */
.eintrag:hover .eintrag__bild:not(:has(img + img)) img{
  transform:scale(1.045); filter:saturate(1.06);
}
.galerie--mehrere .galerie__spur{ cursor:pointer; }
.galerie--mehrere:hover .galerie__spur img{ filter:saturate(1.06); }

/* Pfeile links und rechts auf dem Bild. Sie sind DAUERHAFT sichtbar, nicht
   erst beim Überfahren: Auf dem Telefon gibt es kein Überfahren, und genau
   dort soll auf den ersten Blick klar sein, dass mehr als ein Foto da ist
   (Wunsch Richard, 06.09.2026).
   Sie sitzen in .galerie__fenster, einem Rahmen, den app.js um den Streifen
   legt. Nötig, weil der Streifen selbst scrollt — darin läge ein absolut
   gesetzter Knopf und würde mitwandern. Ohne JavaScript gibt es weder Rahmen
   noch Pfeile; der Streifen bleibt trotzdem scrollbar. */
.galerie__fenster{ position:relative; }
.galerie__taste{
  position:absolute; top:50%; transform:translateY(-50%);
  /* 2.6rem = 41,6 px — sicher mit dem Daumen zu treffen */
  width:2.6rem; height:2.6rem;
  display:grid; place-items:center;
  appearance:none; -webkit-appearance:none;
  border:0; padding:0; cursor:pointer;
  /* Dunkler Grund, damit der Pfeil auch auf einem hellen, unruhigen Foto
     steht. Kein Rundungsradius — die ganze Seite ist rechteckig. */
  background:rgba(20,25,15,.5);
  color:var(--signal);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  transition:background-color .25s, color .25s;
}
.galerie__taste:hover{ background:var(--signal); color:var(--tinte); }
.galerie__taste--zurueck{ left:0; }
.galerie__taste--vor{ right:0; }
.galerie__taste svg{ width:1.05rem; height:1.05rem; display:block; }

/* Wegmarken als Bildanzeiger — dieselbe Raute wie am Weg, nur kleiner.
   Jede ist ein Knopf: Damit ist die Galerie auch mit der Tastatur und
   mit einer Vorlesehilfe vollständig bedienbar. */
.galerie__steuerung{
  display:flex; align-items:center; gap:.2rem;
  margin-top:.55rem;
}
.galerie__marke{
  appearance:none; -webkit-appearance:none;
  background:none; border:0; cursor:pointer;
  /* Fläche zum Treffen: .55rem Polster um eine 8-px-Raute ergibt rund
     26 px — genug, um sie mit dem Daumen sicher zu treffen. */
  padding:.55rem; line-height:0;
}
.galerie__marke .raute{
  width:.5rem; height:.5rem;
  opacity:.28;
  transition:opacity .25s, transform .25s;
}
.galerie__marke:hover .raute{ opacity:.6; }
.galerie__marke[aria-current="true"] .raute{ opacity:1; transform:rotate(45deg) scale(1.2); }

.eintrag__datum{
  display:block;
  font-family:var(--schrift-anzeige);
  font-weight:800; font-stretch:86%;
  text-transform:uppercase;
  font-size:clamp(1.5rem,3.4vw,2.2rem);
  line-height:1;
  letter-spacing:-.01em;
  margin-bottom:1rem;
}
.eintrag .wegweiser--strecke{ margin-bottom:1.6rem; }
.eintrag:hover .wegweiser--strecke{ transform:translateX(6px); }


/* Wer gesammelt hat — kleine Beschriftung wie bei den Wertlabels, dann der Name */
.eintrag__wer{
  margin:0 0 1.1rem;
  font-size:1rem;
}
.eintrag__marke-text{
  display:inline-block;
  margin-right:.6rem;
  font-family:var(--schrift-anzeige);
  font-size:.7rem; font-weight:700; font-stretch:78%;
  text-transform:uppercase; letter-spacing:.2em;
  color:var(--grau);
}

.bemerkung{
  margin:0;
  font-style:italic;
  font-size:1.02rem;
  color:#2C3327;
  max-width:34rem;
}
.etikett{
  display:inline-block;
  margin-right:.7rem;
  padding:.34em .7em;
  background:var(--tinte); color:var(--signal);
  font-family:var(--schrift-anzeige);
  font-style:normal;
  font-size:.62rem; font-weight:700; font-stretch:78%;
  text-transform:uppercase; letter-spacing:.16em;
  vertical-align:.12em;
}


/* ============================================================
   FUSS
   ============================================================ */
.fuss{
  position:relative;
  background:var(--nacht);
  color:var(--papier);
  padding-block:clamp(3.5rem,8vw,6rem) 2rem;
  overflow:hidden;
  isolation:isolate;
}
.fuss .bahn{ position:relative; z-index:3; }
.fuss__raster{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
  gap:clamp(2rem,4vw,3rem);
}
.fuss__marke img{ width:6.5rem; margin-bottom:1.2rem; }
.fuss__claim{
  margin:0;
  font-family:var(--schrift-anzeige);
  font-weight:800; font-stretch:104%;
  text-transform:uppercase;
  font-size:1.25rem; line-height:1;
}
.fuss__claim span{ color:var(--limette); }

.fuss h3{
  margin:0 0 1rem;
  font-family:var(--schrift-anzeige);
  font-size:.72rem; font-weight:700; font-stretch:78%;
  text-transform:uppercase; letter-spacing:.22em;
  color:var(--limette);
}
.fuss p{ margin:0 0 .6rem; font-size:.98rem; color:rgba(242,239,228,.78); }
.fuss a{ text-decoration:none; border-bottom:1px solid rgba(148,193,31,.45); padding-bottom:.1em; }
.fuss a:hover{ color:var(--signal); border-bottom-color:var(--signal); }
.fuss__klein{ font-size:.88rem !important; color:rgba(242,239,228,.5) !important; margin-top:.9rem !important; }
.fuss__sprachen{ display:flex; flex-direction:column; align-items:flex-start; gap:.55rem; }
.fuss__sprachen button{
  appearance:none; -webkit-appearance:none;
  background:none; border:0; padding:0 0 .1em; cursor:pointer;
  font:inherit; color:inherit;
  border-bottom:1px solid rgba(148,193,31,.45);
}
.fuss__sprachen button:hover{ color:var(--signal); border-bottom-color:var(--signal); }
.fuss__sprachen button.ist-aktiv{ color:var(--signal); border-bottom-color:var(--signal); }

.fuss__zeile{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  margin-top:clamp(3rem,6vw,4.5rem);
  padding-top:1.6rem;
  border-top:1px solid rgba(242,239,228,.13);
}
.fuss__zeile p{
  margin:0;
  font-family:var(--schrift-anzeige);
  font-size:.7rem; font-weight:600; font-stretch:80%;
  text-transform:uppercase; letter-spacing:.16em;
  color:rgba(242,239,228,.42);
}

/* ============================================================
   BEWEGUNG
   ============================================================ */
.anim{
  opacity:0;
  animation:auf .95s cubic-bezier(.2,.75,.2,1) forwards;
  animation-delay:var(--verzug,0s);
}
@keyframes auf{
  from{ opacity:0; transform:translateY(22px); }
  to{ opacity:1; transform:none; }
}
.hero__kleber.anim{ animation-name:kleberAuf; }
@keyframes kleberAuf{
  from{ opacity:0; transform:rotate(-16deg) scale(.86); }
  to{ opacity:1; transform:rotate(-7deg) scale(1); }
}

.anschleichen{
  opacity:0; transform:translateY(26px);
  transition:opacity .85s cubic-bezier(.2,.75,.2,1), transform .85s cubic-bezier(.2,.75,.2,1);
}
.anschleichen.sichtbar{ opacity:1; transform:none; }
.idee__bild.anschleichen{ transform:translateY(26px) rotate(-1.4deg); }
.idee__bild.anschleichen.sichtbar{ transform:rotate(-1.4deg); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  /* Mit demselben :has()-Wähler wie oben, nicht bloss `.galerie__spur`:
     `:has(img + img)` erbt die Spezifität seines Arguments und macht die
     Regel zu 0,1,1. Eine Klassenregel mit 0,1,0 verliert dagegen — auch
     innerhalb einer Media Query, denn die zählt für die Spezifität nicht
     mit. Gemessen: Der Streifen rollte trotz «reduzierter Bewegung»
     weiterhin sanft. */
  .galerie__spur:has(img + img){ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .anim, .anschleichen{ opacity:1 !important; transform:none !important; }
  .mit-plakette .cud{ transform:rotate(-4deg) !important; }
  .menue{ transition:none !important; }
  .idee__bild.anschleichen{ transform:rotate(-1.4deg) !important; }
  .feldnotiz.anschleichen{ transform:rotate(.8deg) !important; }
}

/* ============================================================
   DOKUMENTSEITEN (Impressum, Datenschutz)
   Ruhiger Lesesatz im selben System: dunkler Kopf, Papier darunter.
   ============================================================ */
.dok-kopfband{
  position:relative;
  background:var(--nacht);
  color:var(--papier);
  padding:clamp(7rem,16vh,10rem) 0 clamp(2.5rem,6vw,4rem);
  overflow:hidden;
  isolation:isolate;
}
.dok-kopfband .bahn{ position:relative; z-index:3; }
.dok-kopfband h1{
  font-size:clamp(2.2rem,6vw,4.4rem);
  font-stretch:112%;
  margin:0;
  /* Nur an der gesetzten Trennstelle brechen (­ nach «Datenschutz»).
     Mit hyphens:auto sucht der Browser selbst und trennt «ERKLÄ-RUNG». */
  hyphens:manual; -webkit-hyphens:manual;
}
.dok-kopfband .kicker{ margin-bottom:1.1rem; }
/* Die Wegmarke steht in der Kickerzeile, direkt vor «hike-and-pick.org».
   Sie kostet dort 9,9 px plus eine Lücke von 13,6 px. Gemessen: Nur bei
   320 px reicht der Platz dann nicht — es fehlen 11,41 px (nötig 276,41,
   frei 265), und «Rechtliches» rutscht auf eine zweite Zeile. Ab 340 px
   passt es. Den Platz holt die engere Spaltenlücke: .5rem statt .85rem
   spart über drei Lücken 16,8 px — 5,4 px Reserve. Bei einer Sperrung von
   .26em fällt das nicht auf. Nicht die Schrift verkleinern und keinen
   harten Umbruch setzen; beides hält nur bei einer Breite. */
@media (max-width:360px){
  .dok-kopfband .kicker{ column-gap:.5rem; }
}
.dok-stand{
  margin:1.4rem 0 0;
  font-family:var(--schrift-anzeige);
  font-size:.74rem; font-weight:600; font-stretch:80%;
  text-transform:uppercase; letter-spacing:.2em;
  color:rgba(242,239,228,.55);
}

.dok{
  background:var(--papier);
  padding-block:clamp(3rem,8vw,5.5rem) clamp(4rem,10vw,7rem);
}
/* Abstände über Flex statt über Rand-Regeln: So kann keine spezifischere
   Element-Regel (etwa .dok__satz p) sie später wieder aushebeln. */
.dok__satz{
  max-width:52rem;
  display:flex; flex-direction:column;
  gap:1.15rem;
}

.dok__satz h2{
  font-size:clamp(1.15rem,2.2vw,1.5rem);
  font-stretch:88%;
  letter-spacing:0;
  margin-top:clamp(1.5rem,3vw,2.3rem);
}
/* Die Nummer inline halten — ein Flex-Kopf würde jedes ausgezeichnete Wort
   im Titel zu einem eigenen Element machen und Lücken hineinreissen. */
.dok__satz h2 .nr{ color:var(--grau); font-size:.8em; margin-right:.7rem; }
.dok__satz h3{
  margin-top:.9rem;
  font-family:var(--schrift-anzeige);
  font-size:.78rem; font-weight:700; font-stretch:78%;
  text-transform:uppercase; letter-spacing:.18em;
  color:var(--grau);
}
.dok__satz p{ margin:0; }
.dok__satz ul{ margin:0; padding-left:1.3rem; }
.dok__satz li + li{ margin-top:.5rem; }
.dok__satz li::marker{ color:var(--signal); }
.dok__satz a{ color:var(--tinte); text-decoration:underline; text-underline-offset:.18em; text-decoration-color:var(--signal); text-decoration-thickness:2px; }
.dok__satz a:hover{ background:var(--signal); text-decoration-color:transparent; }
.dok__satz dl{ margin:0; }
.dok__satz dt{
  font-family:var(--schrift-anzeige);
  font-size:.72rem; font-weight:700; font-stretch:78%;
  text-transform:uppercase; letter-spacing:.18em;
  color:var(--grau);
  margin-top:1.1rem;
}
.dok__satz dd{ margin:.25rem 0 0; }

/* Hinweis auf die massgebende Sprachfassung — leiser Nachsatz am Dokumentende.
   Der Abstand läuft über padding, NICHT über margin: `.dok__satz p{ margin:0 }`
   ist mit 0,1,1 spezifischer als eine Klassenregel mit 0,1,0 und setzte ein
   margin-top hier wieder auf null. Dieselbe Falle wie oben beim Fliesstext. */
.dok-massgebend{
  padding-top:clamp(1.4rem,3vw,2.1rem);
  border-top:1px dashed rgba(109,115,100,.4);
  font-size:.86rem; line-height:1.55;
  color:var(--grau);
}

/* Platzhalter- und Warnhinweis */
.kasten{
  border-left:4px solid var(--signal);
  margin-bottom:.4rem;
  background:rgba(255,200,0,.11);
  padding:1.3rem 1.5rem;
  margin-top:clamp(1rem,2.5vw,1.8rem);
}
.kasten p{ margin:0; }
.kasten p + p{ margin-top:.7rem; }
.kasten__titel{
  display:block; margin-bottom:.5rem;
  font-family:var(--schrift-anzeige);
  font-size:.72rem; font-weight:700; font-stretch:78%;
  text-transform:uppercase; letter-spacing:.18em;
}

/* Fusszeile der Dokumentseiten */
.dok-fuss{
  background:var(--nacht);
  color:var(--papier);
  padding-block:clamp(2.5rem,5vw,3.5rem);
}
.dok-fuss .bahn{
  display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center;
}
.dok-fuss a{
  color:var(--papier); text-decoration:none;
  font-family:var(--schrift-anzeige);
  font-size:.78rem; font-weight:600; font-stretch:80%;
  text-transform:uppercase; letter-spacing:.16em;
  border-bottom:1px solid rgba(148,193,31,.5); padding-bottom:.15em;
}
.dok-fuss a:hover{ color:var(--signal); border-bottom-color:var(--signal); }
.dok-fuss p{
  margin:0;
  font-family:var(--schrift-anzeige);
  font-size:.7rem; font-weight:600; font-stretch:80%;
  text-transform:uppercase; letter-spacing:.16em;
  color:rgba(242,239,228,.42);
}