/* ==========================================================================
   Einfach mitgehen – Aquarell auf Papier
   Ein Weg, der nach unten läuft; Stationen spritzen links und rechts hinein.
   Lesbarkeit bleibt Vorrang: serifenlos, 19px, hoher Kontrast, große Ziele.
   ========================================================================== */

/* Handschrift für die Überschriften. Liegt lokal unter assets/fonts/ –
   dadurch geht beim Seitenaufruf keine Verbindung zu Google, es wird
   keine IP übertragen und es braucht keine Einwilligung.
   Caveat, SIL Open Font License 1.1. Es ist eine Variable Font, eine
   Datei deckt den ganzen Bereich 400–700 ab. */
@font-face {
  font-family: 'Caveat';
  src: url('fonts/caveat-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  src: url('fonts/caveat-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --papier:        #f7f3e8;
  --papier-tief:   #efe7d5;
  --tinte:         #292a24;
  --tinte-weich:   #5c5d4f;
  --moos:          #4a6b45;
  --moos-tief:     #2f4a30;
  --farn:          #7d9a5e;
  --wasser:        #5c7d8a;
  --ocker:         #c08a3e;
  --rost:          #a85c32;
  /* Fuer kleine Beschriftungen: Das helle Rost erreicht auf den Farbflecken
     nur 2,4-3,4:1 und ist damit zu schwach. Dieser Ton kommt ueberall auf
     mindestens 5:1. */
  --rost-tief:     #63321b;

  /* Fließtext serifenlos. Ersetzt die frühere Georgia – die Handschrift
     der Überschriften trägt den Charakter, darunter darf es nüchtern und
     gut lesbar sein. */
  --grotesk: 'Avenir Next', 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif;
  /* Systemschriften als Notnagel, falls die Datei mal nicht lädt */
  --schreib: 'Caveat', 'Bradley Hand', 'Segoe Script', 'Noteworthy', cursive;

  /* Vom Skript gesetzt: wie weit der Pfad aus der Mitte ausschlägt */
  --amp: 110px;
  --luecke: 40px;

  /* Organische Blob-Radien statt runder Ecken */
  --blob-1: 58% 42% 47% 53% / 46% 55% 45% 54%;
  --blob-2: 41% 59% 62% 38% / 57% 43% 57% 43%;
  --blob-3: 63% 37% 39% 61% / 42% 61% 39% 58%;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

img, svg { max-width: 100%; }

html {
  scroll-behavior: smooth;
  background: var(--papier);
  /* Die Farbflecken laufen absichtlich über die Kartenkante hinaus.
     Am Bildschirmrand wird das abgeschnitten statt zu scrollen. */
  overflow-x: clip;
}

/* Der Seitenhintergrund IST das Papier: leichte Runzeln (Rauschen, das über
   feDiffuseLighting zu einem Relief beleuchtet wird) und darüber feines Korn.
   Beides liegt als Hintergrundebene der Seite – die Farbkleckse darüber sind
   halbtransparent und lassen die Struktur deshalb von selbst durchscheinen.
   background-blend-mode mischt nur die Hintergrundebenen untereinander, nicht
   gegen den Seiteninhalt; das kostet im Gegensatz zu mix-blend-mode nichts
   beim Scrollen. */
body {
  font-family: var(--grotesk);
  font-size: 19px;
  line-height: 1.65;
  color: var(--tinte);
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;

  background-color: var(--papier);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620'%3E%3Cfilter id='r' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.009' numOctaves='5' seed='11' stitchTiles='stitch' result='n'/%3E%3CfeDiffuseLighting in='n' lighting-color='%23ffffff' surfaceScale='2.4' result='l'%3E%3CfeDistantLight azimuth='118' elevation='60'/%3E%3C/feDiffuseLighting%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.40' intercept='0.60'/%3E%3CfeFuncG type='linear' slope='0.40' intercept='0.60'/%3E%3CfeFuncB type='linear' slope='0.40' intercept='0.60'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='620' height='620' filter='url(%23r)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.13' intercept='0.87'/%3E%3CfeFuncG type='linear' slope='0.13' intercept='0.87'/%3E%3CfeFuncB type='linear' slope='0.13' intercept='0.87'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23k)'/%3E%3C/svg%3E");
  background-size: 620px 620px, 240px 240px;
  background-repeat: repeat, repeat;
  background-blend-mode: multiply, multiply;
}

.svg-bausteine { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--moos-tief);
  color: #fff;
  padding: 14px 22px;
  font-family: var(--grotesk);
}
.skip:focus { left: 12px; top: 12px; }

h1, h2, h3 { line-height: 1.2; font-weight: 400; }

/* Handschrift für die Überschriften – kräftig, damit sie trägt.
   Caveat hat eine kleine x-Höhe, deshalb durchweg deutlich größere
   Schriftgrade als sonst üblich. Der Fließtext darunter bleibt
   serifenlos: Eine ganze Seite Handschrift wäre für die Zielgruppe 50+
   mühsam zu lesen. */
.schreib,
.karte h2, .karte h3,
.wegmarke h2,
.ziel h2,
.hinweis h2,
.textseite h1,
.aufbruch h1 em {
  font-family: var(--schreib);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.005em;
}

h1 em { font-style: normal; color: var(--moos-tief); }

p + p { margin-top: 1rem; }

a { color: var(--moos-tief); text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Knöpfe ausdrücklich ausgenommen: Auf ihrem farbigen Grund wäre Rost als
   Schriftfarbe fast unlesbar (gemessen 1,2–1,3:1). Sie bekommen unten
   eigene Hover-Zustände, bei denen sich der Grund ändert, nicht die Schrift. */
a:not(.knopf):hover { color: var(--rost); }

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

/* Kleine Kapitälchen-Marke („Erste Station“, „Ziel“) */
.marke {
  font-family: var(--grotesk);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rost-tief);
  margin-bottom: 0.7rem;
}

/* ==========================================================================
   Aufbruch
   ========================================================================== */

.aufbruch {
  position: relative;
  min-height: 92vh;
  /* svh = kleine Ansichtshöhe: bleibt stabil, wenn auf dem Handy die
     Adressleiste ein- und ausfährt. Ältere Browser nehmen die Zeile davor. */
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 96px 24px 130px;
  overflow: hidden;
}

/* 森林浴 als Wasserzeichen im Kopfbereich. Sehr zurückhaltend – es soll
   auffallen, wenn man hinsieht, und sonst nicht. Oben links, wo das Papier
   frei ist; die Sonne sitzt rechts. */
.kanji {
  position: absolute;
  left: clamp(14px, 4.5vw, 84px);
  top: 7%;
  height: 54%;
  width: auto;
  z-index: 0;
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
}

.aufbruch-szene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* width: 100% ist hier Pflicht: als Flex-Element würde sich der Block
   sonst nach seinem Inhalt bemessen und auf dem Handy seitlich auslaufen. */
.aufbruch-inhalt { position: relative; z-index: 1; width: 100%; max-width: 760px; }

/* Weicher Papierschleier, damit der Text auch dort noch klar steht,
   wo die Baumreihe dahinter liegt. */
.aufbruch-inhalt::before {
  content: "";
  position: absolute;
  inset: -10% -14%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(58% 54% at 50% 48%,
    rgba(247,243,232,.94) 0%, rgba(247,243,232,.72) 52%, rgba(247,243,232,0) 78%);
}

.aufbruch h1 {
  font-size: clamp(2.1rem, 6vw, 3.9rem);
  color: var(--tinte);
  margin: 0 0 1.5rem;
  text-wrap: balance;
  letter-spacing: -0.01em;
}

.aufbruch-text {
  font-size: clamp(1.05rem, 2.2vw, 1.28rem);
  color: var(--tinte);
  max-width: 34em;
  margin: 0 auto 2.4rem;
}

.aufbruch-aktionen {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  /* stretch statt center: Der zweizeilige Anruf-Knopf und der einzeilige
     WhatsApp-Knopf bekommen dieselbe Höhe und stehen sauber nebeneinander. */
  align-items: stretch;
}

/* „Den Weg ansehen“ ist jetzt kein Knopf mehr, sondern ein leiser Hinweis
   darunter – sonst ständen oben drei gleich laute Angebote nebeneinander. */
.aufbruch-weiter {
  margin-top: 1.1rem;
  font-size: 0.98rem;
}
.aufbruch-weiter a {
  color: var(--moos-tief);
  text-decoration-thickness: 1px;
}
.aufbruch-weiter a::after { content: " ↓"; }

.aufbruch-notiz {
  margin-top: 1.6rem;
  font-size: 0.95rem;
  color: var(--tinte-weich);
  font-style: italic;
}

/* Knöpfe: groß, mit ausgefranstem Aquarellrand statt Pillenform */
.knopf {
  position: relative;
  display: inline-block;
  padding: 16px 34px;
  font-family: var(--grotesk);
  text-decoration: none;
  transition: transform .18s ease;
  z-index: 0;
}
.knopf::before {
  content: "";
  position: absolute;
  inset: -4px -10px;
  border-radius: var(--blob-2);
  z-index: -1;
  filter: url("#aquarell-fein");
  transition: transform .18s ease;
}
.knopf:hover { transform: translateY(-2px); }
.knopf:hover::before { transform: scale(1.04); }

/* Warm und tief statt hell-ocker: Auf dem alten hellen Verlaufsende lag der
   cremefarbene Text bei nur 2,86:1 – zu wenig selbst für große Schrift.
   Beide Enden liegen jetzt bei 4,8 bzw. 6,5:1. */
.knopf--haupt { color: #fff8ec; }
.knopf--haupt::before { background: linear-gradient(150deg, #946527, #8a4926); }
.knopf--haupt:hover { color: #fff8ec; }
.knopf--haupt:hover::before { background: linear-gradient(150deg, #855a22, #7a4021); }
.knopf--haupt .knopf-klein {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* keine Deckkraft-Absenkung: Die kleine Beschriftung ist mit 12,5px
     ohnehin am Limit, jedes Prozent Transparenz kostet hier Kontrast. */
}
.knopf--haupt .knopf-gross {
  display: block;
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Papierfarben hinterlegt, damit der zweite Knopf auch vor der
   Baumreihe als Knopf erkennbar bleibt. */
.knopf--leise { color: var(--moos-tief); font-size: 1.02rem; font-weight: 600; }
.knopf--leise::before {
  background: rgba(247, 243, 232, 0.88);
  box-shadow: inset 0 0 0 2px rgba(74, 107, 69, 0.3);
}
.knopf--leise:hover { color: var(--moos-tief); }
.knopf--leise:hover::before {
  background: rgba(247, 243, 232, 0.98);
  box-shadow: inset 0 0 0 2px rgba(74, 107, 69, 0.6);
}

/* „Der Weg beginnt hier“ mit wanderndem Strich */
.wegweiser {
  position: absolute;
  bottom: 34px;
  left: 0;
  right: 0;
  z-index: 1;
  text-align: center;
  font-family: var(--grotesk);
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--moos-tief);
  opacity: 0.72;
}
.wegweiser span { display: block; }
.wegweiser::after {
  content: "";
  display: block;
  width: 2px;
  height: 42px;
  margin: 14px auto 0;
  background: var(--moos);
  opacity: 0.5;
  animation: wandern 2.6s ease-in-out infinite;
  transform-origin: top center;
}
@keyframes wandern {
  0%, 100% { transform: scaleY(0.35); opacity: 0.25; }
  50%      { transform: scaleY(1);    opacity: 0.6; }
}

/* ==========================================================================
   Der Weg
   ========================================================================== */

.stationen {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.pfad-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.pfad-wash {
  stroke: var(--moos);
  stroke-width: 13;
  stroke-opacity: 0.13;
  stroke-linecap: round;
}
.pfad {
  stroke: var(--moos-tief);
  stroke-width: 2.6;
  stroke-opacity: 0.5;
  stroke-linecap: round;
}
.punkte circle {
  fill: var(--papier);
  stroke: var(--moos-tief);
  stroke-width: 2.4;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.2);
}
.punkte circle.sichtbar {
  animation: punkt-rein .7s cubic-bezier(.2,.85,.3,1) forwards;
}
@keyframes punkt-rein {
  0%   { opacity: 0; transform: scale(0.2); }
  60%  { opacity: 1; transform: scale(1.35); }
  100% { opacity: 1; transform: scale(1); }
}

/* Ersatzlinie, falls kein JavaScript läuft */
.stationen::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  margin-left: -1px;
  background: repeating-linear-gradient(to bottom,
    rgba(74,107,69,.4) 0 10px, transparent 10px 22px);
}
.js .stationen::before { display: none; }

/* --- Station: die Kachel links oder rechts vom Weg ---
   Abstände bewusst in rem statt vh: Auf dem Handy ändert sich vh, sobald
   die Adressleiste ein- oder ausfährt. Das verschiebt mitten im Scrollen
   alle Stationen und der Weg müsste neu gezeichnet werden. */
.station {
  position: relative;
  z-index: 1;
  display: flex;
  padding: 4.75rem 0;
}
.station--links  { justify-content: flex-end;   padding-right: calc(50% + var(--amp) + var(--luecke)); }
.station--rechts { justify-content: flex-start; padding-left:  calc(50% + var(--amp) + var(--luecke)); }
.station--mitte  { justify-content: center;     padding: 5.5rem 0; }

.karte {
  position: relative;
  width: 100%;
  max-width: 420px;
  /* Großzügig, damit der Text INNERHALB des Flecks liegt. Ein Rechteck
     passt erst dann ganz in eine Ellipse, wenn die etwa das 1,41-fache
     seiner Kantenlängen hat – dazu kommt der Rand, den der
     Verzerrungsfilter noch bewegt. Deshalb hier so viel Luft. */
  padding: 50px 50px 54px;
}
/* Fließtext bleibt in beiden Spalten linksbündig – rechtsbündige Absätze
   sehen hübsch aus, kosten bei 50+ aber messbar Lesegeschwindigkeit.
   Wer den Effekt trotzdem will: hier text-align: right für --links setzen. */

/* Kurzer Anschluss von der Karte zum Weg */
.karte::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(var(--luecke) - 8px);
  border-top: 2px dotted rgba(47, 74, 48, 0.42);
}
.station--links .karte::after  { right: calc(-1 * var(--luecke) + 2px); }
.station--rechts .karte::after { left:  calc(-1 * var(--luecke) + 2px); }

.karte-text { position: relative; z-index: 2; }

.karte h2 {
  font-size: clamp(2.05rem, 4.4vw, 2.8rem);
  color: var(--moos-tief);
  margin-bottom: 0.7rem;
}
.karte h3 {
  font-size: clamp(1.7rem, 3.4vw, 2.1rem);
  color: var(--moos-tief);
  margin-bottom: 0.55rem;
}
/* Porträt in der ersten Station. Das Gesicht bleibt bewusst UNGEFILTERT –
   der Verzerrungsfilter der Farbkleckse würde es verschmieren, und genau
   die Erkennbarkeit ist hier der Zweck. Organisch wirkt es über den
   Blob-Radius und den Papierrand ringsum. */
.portraet {
  width: 168px;
  aspect-ratio: 1 / 1;
  margin: 0 0 1.4rem;
  border-radius: var(--blob-2);
  overflow: hidden;
  box-shadow:
    0 0 0 7px rgba(247, 243, 232, 0.85),
    0 6px 20px rgba(47, 74, 48, 0.16);
}
.portraet img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.karte-nachsatz {
  margin-top: 1.1rem;
  font-style: italic;
  color: var(--tinte-weich);
}

/* --- Die Wasserfarbe hinter der Karte --- */
.wasch-huelle {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.wasch {
  position: absolute;
  /* Prozentual statt in Pixeln: Der Fleck waechst mit der Karte mit,
     bei kurzen wie bei langen Texten. Oben/unten beziehen sich auf die
     Hoehe, links/rechts auf die Breite der Karte. */
  inset: -15% -13%;
  transform-origin: 50% 50%;
}

/* Der Filter sitzt bewusst auf dem INNEREN Element, die Animation auf dem
   äußeren. Läge beides auf demselben Element, müsste der Browser das
   Rauschen von feTurbulence bei jedem einzelnen Bild über die ganze
   Fleckfläche neu berechnen – bei den großen Flecken oben rund 280.000
   Pixel mal drei Oktaven, sechzigmal pro Sekunde. Getrennt wird der Fleck
   einmal gerastert und danach nur noch verschoben und skaliert. */
.wasch .farbe {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: var(--blob-1);
  filter: url("#aquarell-fleck");

  /* Drei Ebenen, alle als HINTERGRUND – background-blend-mode mischt nur
     die Ebenen untereinander und kostet beim Scrollen nichts:
     1. Randpigmentierung: Echte Wasserfarbe läuft zum Rand hin zusammen
        und trocknet dort dunkler auf. Das ist das erkennbarste Merkmal
        von Aquarell – ohne das sieht jeder Fleck nach Farbverlauf aus.
     2. Papierkorn IM Pigment, nicht nur darunter: Die Farbe sitzt in der
        Faser, nicht auf einer glatten Fläche.
     3. Die eigentliche Farbe, aus der Modifikatorklasse. */
  background-image:
    radial-gradient(closest-side,
      rgba(58,44,26,0) 58%,
      var(--rand, rgba(58,44,26,.14)) 87%,
      rgba(58,44,26,.02) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.13' intercept='0.87'/%3E%3CfeFuncG type='linear' slope='0.13' intercept='0.87'/%3E%3CfeFuncB type='linear' slope='0.13' intercept='0.87'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E"),
    var(--farbe, none);
  background-size: 100% 100%, 200px 200px, 100% 100%;
  background-repeat: no-repeat, repeat, no-repeat;
  background-blend-mode: multiply, multiply, normal;
}
.station--rechts .wasch .farbe { border-radius: var(--blob-2); }
.station--links  .wasch .farbe { border-radius: var(--blob-3); }

.wasch--moos   { --rand: rgba(36,56,34,.15); --farbe: radial-gradient(120% 100% at 30% 20%, rgba(122,155,110,.5), rgba(74,107,69,.24) 62%, rgba(74,107,69,.05)); }
.wasch--farn   { --rand: rgba(58,74,38,.14); --farbe: radial-gradient(120% 100% at 70% 25%, rgba(157,181,120,.5), rgba(125,154,94,.22) 62%, rgba(125,154,94,.05)); }
.wasch--ocker  { --rand: rgba(104,64,24,.15); --farbe: radial-gradient(120% 100% at 35% 75%, rgba(224,180,110,.5), rgba(192,138,62,.2) 62%, rgba(192,138,62,.05)); }
.wasch--wasser { --rand: rgba(34,62,72,.15); --farbe: radial-gradient(120% 100% at 65% 30%, rgba(140,178,190,.5), rgba(92,125,138,.22) 62%, rgba(92,125,138,.05)); }
.wasch--dunkel { --rand: rgba(26,44,26,.16); --farbe: radial-gradient(120% 100% at 40% 30%, rgba(90,124,88,.5), rgba(47,74,48,.24) 62%, rgba(47,74,48,.05)); }
.wasch--papier { --rand: rgba(122,104,74,.07); --farbe: radial-gradient(120% 100% at 50% 40%, rgba(240,232,212,.95), rgba(233,222,196,.7) 66%, rgba(233,222,196,.15)); }
.wasch--ziel   { --rand: rgba(112,54,26,.15); --farbe: radial-gradient(120% 100% at 50% 35%, rgba(226,178,108,.55), rgba(168,92,50,.26) 58%, rgba(168,92,50,.06)); }

/* Der Wasserrand, der weiter läuft als das Pigment.
   Ohne Filter: Der Verlauf hat ohnehin keine harte Kante, die man
   ausfransen könnte – der Filter kostete hier nur Rechenzeit, und zwar
   während einer Animation und an jeder einzelnen Station. */
.halo {
  position: absolute;
  inset: -15% -13%;
  border-radius: var(--blob-2);
  background: radial-gradient(closest-side, rgba(74,107,69,.22), rgba(74,107,69,0) 78%);
  opacity: 0;
  transform-origin: 50% 50%;
}
.halo--gross { inset: -26% -18%; }

/* Spritzer */
.tropfen {
  position: absolute;
  left: var(--tx);
  top: var(--ty);
  width: 26px;
  height: 22px;
  margin: -11px 0 0 -13px;
  border-radius: var(--blob-3);
  background: currentColor;
  color: rgba(74,107,69,.34);
  /* kein Filter: 29 gleichzeitig animierte, gefilterte Elemente waren
     reine Rechenlast – die organische Form tragen die Blob-Radien */
  opacity: 0;
  transform: scale(0);
}
.karte--weg .tropfen,
.ziel .tropfen { color: rgba(168,92,50,.3); }

/* --- Illustration in den Weg-Karten --- */
.szene {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 1.2rem;
  border-radius: var(--blob-1);
  overflow: visible;
}

/* Weg-Daten als kleine Schildchen – bricht sauber um, statt ein
   verwaistes „·“ an den Zeilenanfang zu schieben. */
.weg-daten {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 1rem;
}
.weg-daten span {
  font-family: var(--grotesk);
  font-size: 0.79rem;
  letter-spacing: 0.02em;
  /* Heller Grund statt Rost-Tuenchung: Rost auf Rost kam nur auf 2,45:1. */
  color: var(--rost-tief);
  background: rgba(247, 243, 232, 0.78);
  border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
  padding: 4px 13px 5px;
}

/* --- Wegmarke: Beschriftung mitten auf dem Weg --- */
.wegmarke {
  position: relative;
  width: 100%;
  max-width: 560px;
  padding: 48px 66px;
  text-align: center;
}
.wegmarke h2 {
  font-size: clamp(2.4rem, 5.4vw, 3.5rem);
  color: var(--moos-tief);
  margin-bottom: 0.6rem;
}
.wegmarke p { color: var(--tinte-weich); }

/* --- Ziel --- */
.station--ziel { padding-bottom: 8rem; }
.ziel {
  position: relative;
  width: 100%;
  max-width: 620px;
  padding: 64px 72px 60px;
  text-align: center;
}
.ziel h2 {
  font-size: clamp(2.8rem, 6.5vw, 4.2rem);
  color: var(--moos-tief);
  margin-bottom: 0.8rem;
}
.ziel-telefon { margin: 1.6rem 0 1rem; }
.ziel-telefon a {
  font-family: var(--grotesk);
  font-size: clamp(1.8rem, 5.5vw, 2.7rem);
  font-weight: 700;
  color: var(--moos-tief);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.ziel-telefon a:hover { color: var(--rost); }
.ziel-mail { font-size: 1rem; }
.ziel-mail a { word-break: break-word; }

/* ==========================================================================
   WhatsApp – Knopf und Zustimmung
   ========================================================================== */

.ziel-whatsapp { margin-top: 1.6rem; }

.knopf--wa {
  color: #f4f8f2;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 1.05rem;
  font-weight: 600;
}
/* Bewusst im Moosgrün der Seite statt im WhatsApp-Grün: Das grelle
   Markengrün würde das ganze Aquarell erschlagen. Erkannt wird der
   Knopf am Wort und am Sprechblasen-Zeichen. Die Töne sind exakt die
   Variablen der Seite, damit er sich einfügt. */
.knopf--wa::before { background: linear-gradient(150deg, var(--moos), var(--moos-tief)); }
.knopf--wa:hover { color: #f4f8f2; }
.knopf--wa:hover::before { background: linear-gradient(150deg, #51744c, #3a5a3a); }
.wa-zeichen { width: 22px; height: 22px; flex: none; }

/* --- Der Hinweis: ohne JS ein Abschnitt, mit JS ein Dialog --- */
.hinweis {
  position: relative;
  padding: 3rem 24px 4rem;
  display: flex;
  justify-content: center;
}
.hinweis-tafel {
  position: relative;
  width: 100%;
  max-width: 620px;
  padding: 40px 40px 36px;
}
.hinweis-text { position: relative; z-index: 2; }
.hinweis h2 { color: var(--moos-tief); font-size: clamp(1.9rem, 4.4vw, 2.6rem); margin-bottom: 1rem; }
.hinweis p { font-size: 1rem; }
.hinweis-fuss { margin-top: 1.6rem; font-size: 0.95rem; color: var(--tinte-weich); }

.hinweis-haken {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  margin: 1.6rem 0 1.4rem;
  padding: 15px 18px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.55);
  /* Bewusst kein Blob-Radius: Auf einem breiten, flachen Kasten
     verformt der sich zu einer Linse. */
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(74, 107, 69, 0.18);
  font-size: 1rem;
}
.hinweis-haken input {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  accent-color: var(--moos-tief);
  cursor: pointer;
}

.hinweis-aktionen { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hinweis-aktionen .knopf { font-family: var(--grotesk); border: 0; cursor: pointer; }

/* Der Riegel ganz ohne JavaScript: Solange der Haken nicht sitzt, ist
   der Weiter-Knopf nicht anklickbar. Das Skript hält ihn zusätzlich auf. */
.hinweis:has(#wa-haken:not(:checked)) #wa-weiter {
  pointer-events: none;
  opacity: 0.42;
  filter: grayscale(0.7);
}
#wa-weiter[aria-disabled="true"] { pointer-events: none; opacity: 0.42; filter: grayscale(0.7); }

/* --- Als Dialog über der Seite (nur wenn das Skript läuft) --- */
.wa-dialog .hinweis[hidden] { display: none; }
.wa-dialog .hinweis {
  position: fixed;
  inset: 0;
  z-index: 90;
  padding: 24px;
  align-items: center;
  overflow-y: auto;
  background: rgba(41, 42, 36, 0.55);
  opacity: 0;
  transition: opacity .22s ease;
}
.wa-dialog .hinweis.hinweis--offen { opacity: 1; }
.wa-dialog .hinweis-tafel {
  background: var(--papier);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(41, 42, 36, .35);
  max-height: 100%;
  overflow-y: auto;
  transform: translateY(14px) scale(.97);
  transition: transform .28s cubic-bezier(.2,.8,.3,1);
}
.wa-dialog .hinweis--offen .hinweis-tafel { transform: none; }
/* Im Dialog trägt die Tafel selbst die Farbe, der Aquarellfleck stört dort. */
.wa-dialog .hinweis-tafel .wasch-huelle { display: none; }

body.dialog-offen { overflow: hidden; }

@keyframes stups {
  0%, 100% { transform: none; }
  25%      { transform: translateX(-7px); }
  75%      { transform: translateX(7px); }
}
.hinweis--stups { animation: stups .34s ease; }

/* ==========================================================================
   Fuß
   ========================================================================== */

.fuss {
  position: relative;
  /* halbtransparent statt deckend, damit die Papierstruktur des
     Seitenhintergrunds auch hier unten durchkommt */
  background: rgba(216, 203, 172, 0.5);
  padding: 190px 24px 44px;
  text-align: center;
  font-size: 0.92rem;
  color: var(--tinte-weich);
  overflow: hidden;
}
.fuss-szene {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 240px;
  pointer-events: none;
}
.fuss-inhalt { position: relative; z-index: 1; display: grid; gap: 8px; }
.fuss-notiz { opacity: 0.75; }

/* Abschied: Smiley NEBEN dem handgeschriebenen Wort, nicht darüber –
   zusammen liest es sich wie eine Unterschrift statt wie zwei gestapelte
   Elemente. */
.fuss-gruss {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.smiley {
  width: 74px;
  height: 69px;
  flex: none;
  /* leicht schief – gemalt, nicht gesetzt */
  transform: rotate(-5deg);
}
.fuss-bis {
  font-family: var(--schreib);
  font-weight: 700;
  font-size: 1.95rem;
  line-height: 1;
  color: var(--moos-tief);
}

/* Gepunkteter Trenner in derselben Sprache wie die Anschlüsse am Weg */
.fuss-trenner {
  width: 150px;
  height: 0;
  margin: 18px auto 16px;
  border-top: 2px dotted rgba(47, 74, 48, 0.26);
}

/* Impressum, Datenschutz, Cookie-Hinweis und Copyright in einer Zeile */
.fuss-zeile { line-height: 2; }
.fuss-punkt { color: rgba(47, 74, 48, 0.35); margin: 0 7px; }
.fuss-zeile a { white-space: nowrap; }
.fuss-zeile .fuss-notiz { white-space: nowrap; }

/* Sobald die Zeile umbricht, bleibt sonst ein einzelner Trennpunkt am
   Zeilenende hängen. Dann lieber ganz ohne Punkte und mit Abständen –
   das bricht sauber, egal wo. */
@media (max-width: 920px) {
  .fuss-zeile {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 18px;
  }
  .fuss-punkt { display: none; }
}

/* ==========================================================================
   Einblenden – der eigentliche Reinspritz-Effekt
   ========================================================================== */

/* Ohne JavaScript ist alles sofort sichtbar. Erst .js versteckt. */
.js .reveal,
.js .karte-text,
.js .szene { opacity: 0; }
.js .wasch { opacity: 0; transform: scale(.3) rotate(-7deg); }

.reveal.sichtbar { animation: text-rein .8s cubic-bezier(.2,.8,.3,1) both; }
.reveal[data-verzug="1"].sichtbar { animation-delay: .12s; }
.reveal[data-verzug="2"].sichtbar { animation-delay: .24s; }
.reveal[data-verzug="3"].sichtbar { animation-delay: .36s; }
.reveal[data-verzug="4"].sichtbar { animation-delay: .5s; }
.reveal[data-verzug="5"].sichtbar { animation-delay: .62s; }

/* Der Fleck wächst aus dem Punkt heraus, an dem der Weg ihn berührt –
   wie ein Tropfen, der dort aufkommt und ins Papier läuft. */
.station--links  .wasch, .station--links  .halo { transform-origin: 100% 50%; }
.station--rechts .wasch, .station--rechts .halo { transform-origin: 0% 50%; }
.station--mitte  .wasch, .station--mitte  .halo { transform-origin: 50% 0%; }

/* Nur waehrend der Animation auf eine eigene Compositor-Ebene heben,
   damit der gefilterte Inhalt einmal gerastert und danach nur noch
   skaliert wird. trail.js setzt .ruht, sobald die Animation durch ist. */
/* .warm setzt der Vorwärmer in trail.js rund 900px im Voraus: Der Browser
   legt die Ebene an und rastert den gefilterten Fleck, bevor die Animation
   losläuft. .ruht steht danach und gibt sie wieder frei. */
.station.warm .wasch,
.station.sichtbar .wasch { will-change: transform, opacity; }
.station.ruht .wasch     { will-change: auto; }

.station.sichtbar .wasch   { animation: farbe-rein 1.4s cubic-bezier(.17,.76,.24,1) both; }
.station.sichtbar .halo    { animation: halo-rein 1.9s cubic-bezier(.22,.7,.3,1) both; }
.station.sichtbar .tropfen { animation: tropfen-rein .8s cubic-bezier(.2,1.1,.4,1) both; animation-delay: var(--td, 0ms); }
.station.sichtbar .szene   { animation: bild-rein 1s cubic-bezier(.2,.8,.3,1) .22s both; }
.station.sichtbar .karte-text { animation: text-rein .85s cubic-bezier(.2,.8,.3,1) .3s both; }

/* Von einem winzigen Tropfen auf volle Größe. Die Deckkraft ist früh
   fast voll da, damit man das Wachsen wirklich sieht und der Fleck
   nicht einfach nur auftaucht. */
@keyframes farbe-rein {
  0%   { opacity: 0;   transform: scale(.05) rotate(-12deg); }
  15%  { opacity: .9; }
  75%  { transform: scale(1.06) rotate(2deg); }
  100% { opacity: 1;   transform: scale(1) rotate(0deg); }
}
@keyframes halo-rein {
  0%   { opacity: 0;   transform: scale(.05); }
  25%  { opacity: .55; }
  100% { opacity: 0;   transform: scale(1.4); }
}
@keyframes tropfen-rein {
  0%   { opacity: 0;  transform: scale(0); }
  55%  { opacity: .9; transform: scale(calc(var(--ts, 1) * 1.3)); }
  100% { opacity: .7; transform: scale(var(--ts, 1)); }
}
@keyframes bild-rein {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes text-rein {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: none; }
}

/* Stationen, die beim Nachziehen schon oben aus dem Bild sind, springen
   direkt in den Endzustand – niemand sieht die Animation, sie würde nur
   ein Dutzend Filter gleichzeitig rechnen lassen. */
.sofort, .sofort * {
  animation-duration: 1ms !important;
  animation-delay: 0s !important;
}

/* ==========================================================================
   Schmale Bildschirme: der Weg rückt an den linken Rand,
   alle Stationen stehen darunter in einer Spalte.
   ========================================================================== */

@media (max-width: 760px) {
  body { font-size: 18px; }

  .aufbruch { min-height: 88vh; min-height: 88svh; padding: 72px 20px 118px; }
  /* schmaler Schirm: kleiner und noch blasser, damit es hinter dem
     Text nicht stört */
  .kanji { height: 34%; top: 5%; left: 8px; opacity: 0.055; }

  .stationen { padding: 24px 18px 60px 46px; }
  .stationen::before { left: 26px; }

  .station,
  .station--links,
  .station--rechts,
  .station--mitte {
    justify-content: flex-start;
    padding: 2.75rem 0;
  }
  .karte, .wegmarke, .ziel { max-width: 100%; padding: 36px 30px 38px; }
  .wegmarke, .ziel { text-align: left; }
  .ziel { padding: 40px 24px; }

  .karte::after,
  .station--links .karte::after,
  .station--rechts .karte::after {
    left: -22px;
    right: auto;
    width: 16px;
  }
  .wegmarke::after, .ziel::after { display: none; }

  /* Displacement-Filter sind auf dem Handy teuer – die organischen
     Radien tragen den Look dort allein. */
  .wasch .farbe, .halo, .tropfen { filter: none; }
  .wasch, .halo { inset: -12% -22px; }
  .halo--gross { inset: -16% -18px; }

  /* Auf schmalen Bildschirmen fehlt seitlich der Platz, um eine Ellipse
     groß genug zu machen – der Text stieße an den Ecken heraus. Deshalb
     hier eine vollere, eher abgerundete Form: Sie fasst denselben Text
     bei deutlich weniger Überstand und wirkt durch den Verzerrungsfilter
     trotzdem wie ein Farbfleck. Gleiche Spezifität wie die Regeln oben,
     sonst gewinnen die. */
  .wasch .farbe,
  .station--links .wasch .farbe,
  .station--rechts .wasch .farbe,
  .station--mitte .wasch .farbe {
    border-radius: 34% 40% 30% 36% / 17% 14% 19% 16%;
    /* Der elliptische Randverlauf gehört zur Ellipsenform. Auf der
       abgerundeten Rechteckform hier zeichnet er ein sichtbares Oval
       mitten hinein. Deshalb dort ein innerer Schatten – der folgt dem
       border-radius und legt sich sauber an die echte Kante. */
    --rand: rgba(58,44,26,0);
    box-shadow: inset 0 0 30px 5px rgba(46,52,38,.12);
  }

  .aufbruch-aktionen { flex-direction: column; align-items: stretch; }
  .knopf { text-align: center; }
  .aufbruch-weiter { margin-top: 0.9rem; }
  .knopf--wa { justify-content: center; }

  .hinweis { padding: 2rem 16px 3rem; }
  .hinweis-tafel { padding: 28px 22px 26px; }
  .wa-dialog .hinweis { padding: 14px; }
  .hinweis-aktionen { flex-direction: column; align-items: stretch; }

  .fuss { padding: 146px 20px 38px; }
  .fuss-szene { height: 180px; }
  .smiley { width: 62px; height: 58px; }
  .fuss-bis { font-size: 1.7rem; }
  .fuss-zeile { line-height: 1.9; }
}

@media (max-width: 400px) {
  .stationen { padding-left: 34px; }
  .stationen::before { left: 16px; }
  .karte, .wegmarke, .ziel { padding-left: 18px; padding-right: 18px; }
}

/* ==========================================================================
   Wer weniger Bewegung möchte, bekommt die Seite ruhig und vollständig.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal,
  .js .karte-text,
  .js .szene { opacity: 1; }
  .js .wasch { opacity: 1; transform: none; }
  .halo { opacity: 0; }
  .tropfen { opacity: .65; transform: scale(var(--ts, 1)); }
  .punkte circle { opacity: 1; transform: none; }
  .wegweiser::after { animation: none; transform: scaleY(1); }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   Impressum / Datenschutz – schlichte Textseiten auf demselben Papier
   ========================================================================== */

.textseite { padding: 72px 24px 96px; }
.textseite .spalte { max-width: 720px; margin: 0 auto; }
.textseite h1 {
  font-size: clamp(2.5rem, 5.5vw, 3.4rem);
  color: var(--moos-tief);
  margin-bottom: 1.2rem;
}
.textseite h2 {
  font-size: 1.3rem;
  color: var(--moos-tief);
  margin: 2rem 0 0.6rem;
}
.textseite p + p { margin-top: 1rem; }
.textseite .zurueck { display: inline-block; margin-top: 2.4rem; font-family: var(--grotesk); }

/* Altlast-Klassen aus dem ersten Entwurf, damit nichts kaputt aussieht */
.section { padding: 72px 0; }
.container { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: 760px; }