/* calmobility – Startseite
   Welt: Wegzeichen und Wanderkarte. Kartenpapier, Waldflächen, Höhenlinien,
   eine rote Route und grüne Wegzeichen. Siehe .impeccable/surfaces/index-html.md */

/* Schriften: siehe schriften.css (eingebettet) */

/* Kartenlegende als Tokens */
:root {
  --papier: #F3F5EE;
  --wald: #D4E3C3;
  --tinte: #15201A;
  --tinte-leise: #33433A;
  --wasser: #174E74;
  --route: #A3122B;
  --hoehe: #9A6A3A;
  --zeichen: #78BD77;
  --tafel: #FFFFFF;

  --rasterlinie: rgb(21 32 26 / 0.085);

  --schrift-karte: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --schrift-text: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;

  --rahmen: clamp(6px, 1.1vw, 16px);
  --kopf-h: 8.5rem;
  --gasse: clamp(1rem, 1.6vw, 1.5rem);
  --abstand: clamp(4.5rem, 9vw, 8.5rem);
  --zeichen-gr: 2.5rem;

  color-scheme: light;
  scrollbar-color: var(--tinte-leise) var(--papier);
}

@media (prefers-reduced-motion: no-preference) {
  :root { scroll-behavior: smooth; }
}

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

html { scroll-padding-top: 1.5rem; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: 1.1875rem;
  line-height: 1.55;
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { margin: 0; font-family: var(--schrift-karte); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-thickness: 3px; }

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

::selection { background: var(--wasser); color: var(--papier); }

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

/* Sprunglinks */
.sprung {
  position: absolute;
  left: 1rem; top: 1rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--tafel);
  border: 2px solid var(--tinte);
  font-weight: 700;
  transform: translateY(-200%);
}
.sprung:focus { transform: none; }

/* Kartenschrift: gesperrte Versalien wie Gebietsnamen auf der Karte */
.kartenschrift {
  font-family: var(--schrift-karte);
  font-stretch: 118%;
  font-weight: 650;
  font-size: 0.875rem;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}

/* ------------------------------------------------------------------
   Kartenblatt, Rahmen und Planquadrate
   ------------------------------------------------------------------ */

.karte {
  position: relative;
  margin: var(--rahmen) max(var(--rahmen), calc((100% - 1680px) / 2));
  border: 2px solid var(--tinte);
  container-type: inline-size;
  overflow-x: clip;
}

.raster {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--rasterlinie) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rasterlinie) 1px, transparent 1px);
  background-size: calc(100cqw / 6) calc(100cqw / 6);
}

/* Inhalte liegen über Raster (1) und Route (2) */
.kopf, .start > :not(.start-karte), .abschnitt > *, .fuss > * {
  position: relative;
  z-index: 3;
}

/* ------------------------------------------------------------------
   Kopf und Navigation
   ------------------------------------------------------------------ */

.kopf {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  height: var(--kopf-h);
  padding-top: 1.75rem;
}

.kopf-logo {
  grid-column: 1;
  justify-self: start;
  margin-left: var(--gasse);
  border-radius: 4px;
}
.kopf-logo img { height: clamp(3.25rem, 1.6rem + 3vw, 4.75rem); width: auto; }

.menue-knopf { display: none; }

.hauptnavigation {
  grid-column: 2 / 7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-inline: var(--gasse);
}
.hauptnavigation > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem clamp(0.75rem, 2vw, 2.25rem);
}
.hauptnavigation a,
.untermenue summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration-color: transparent;
}
.hauptnavigation a:hover,
.untermenue summary:hover { text-decoration-color: currentColor; text-decoration-line: underline; }

.untermenue { position: relative; }
.untermenue summary {
  cursor: pointer;
  list-style: none;
  gap: 0.5rem;
}
.untermenue summary::-webkit-details-marker { display: none; }
.untermenue summary::after {
  content: "";
  width: 0.5em; height: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform 0.2s ease-out;
}
.untermenue[open] summary::after { transform: translateY(0.1em) rotate(-135deg); }
.untermenue ul {
  position: absolute;
  top: 100%; left: -1rem;
  z-index: 20;
  min-width: 19rem;
  padding: 0.5rem 1rem;
  background: var(--papier);
  border: 2px solid var(--tinte);
}
.untermenue ul a { width: 100%; text-decoration-color: currentColor; }

/* Tafel: kleines Schild im Kopf */
.tafel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.5rem 1.25rem;
  background: var(--tafel);
  border: 2px solid var(--tinte);
  border-radius: 3px;
  font-family: var(--schrift-karte);
  font-stretch: 90%;
  font-weight: 750;
  font-size: 1.125rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.hauptnavigation .tafel { text-decoration: none; }
.tafel:hover { background: var(--wald); }

/* ------------------------------------------------------------------
   Wegzeichen, Start und Ziel
   ------------------------------------------------------------------ */

.wegzeichen {
  display: block;
  width: var(--zeichen-gr);
  aspect-ratio: 1;
  background: var(--tafel);
  border: 1.5px solid rgb(21 32 26 / 0.4);
  border-radius: 4px;
  position: relative;
  flex: none;
}
.wegzeichen::after {
  content: "";
  position: absolute;
  inset: 17%;
  border-radius: 50%;
  border: calc(var(--zeichen-gr) * 0.135) solid var(--zeichen);
}

/* Station: Wegzeichen mit Nummer, wie an einem Themenweg.
   Dieselbe Nummer steht in der Legende. */
.wegzeichen--station {
  aspect-ratio: auto;
  height: calc(var(--zeichen-gr) * 1.55);
}
.wegzeichen--station::after {
  inset: auto 17%;
  top: calc(var(--zeichen-gr) * 0.13);
  aspect-ratio: 1;
}
.station-zahl {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--zeichen-gr) * 0.05);
  text-align: center;
  font-family: var(--schrift-karte);
  font-stretch: 80%;
  font-weight: 850;
  font-size: calc(var(--zeichen-gr) * 0.5);
  line-height: 1;
  color: var(--tinte);
}

.ziel {
  display: grid;
  place-items: center;
  width: calc(var(--zeichen-gr) + 0.25rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--papier);
  border: 5px solid var(--route);
  position: relative;
  font-family: var(--schrift-karte);
  font-stretch: 80%;
  font-weight: 850;
  font-size: calc(var(--zeichen-gr) * 0.5);
  line-height: 1;
  color: var(--route);
}

/* ------------------------------------------------------------------
   Wegweiser: Pfosten mit Armen, die einzige Plattenform
   ------------------------------------------------------------------ */

.wegweiser {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 0.6rem;
  padding-left: 10px;
  margin-top: clamp(1.5rem, 2.4vw, 2rem);
}
.wegweiser::before {
  content: "";
  position: absolute;
  left: 0; top: -1.1rem; bottom: -1.25rem;
  width: 10px;
  border-radius: 5px 5px 1px 1px;
  background: var(--tinte);
}

.arm {
  --spitze: 1.5rem;
  position: relative;
  display: inline-grid;
  max-width: calc(100% - var(--spitze));
  min-height: 44px;
  margin-right: var(--spitze);
  padding: 0.5rem 1rem 0.55rem 1.25rem;
  background: var(--route);
  color: var(--tafel);
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.arm::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: calc(100% - 1px);
  width: calc(var(--spitze) + 1px);
  background: var(--route);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.arm--weiss {
  background: var(--tafel);
  color: var(--tinte);
  border: 2px solid var(--tinte);
  border-right: 0;
}
.arm--weiss::before {
  content: "";
  position: absolute;
  top: -2px; bottom: -2px; left: calc(100% - 1px);
  width: calc(var(--spitze) + 1px);
  background: var(--tinte);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.arm--weiss::after {
  width: calc(var(--spitze) - 1.8px);
  background: var(--tafel);
}
.arm:hover { transform: translateX(0.4rem); }
.arm:active { transform: translateX(0.2rem); }
.arm:focus-visible { outline-offset: 4px; }

.arm-ziel {
  font-family: var(--schrift-karte);
  font-stretch: 115%;
  font-weight: 650;
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.arm-wert {
  font-family: var(--schrift-karte);
  font-stretch: 78%;
  font-weight: 800;
  font-size: clamp(1.375rem, 0.9rem + 1.1vw, 1.875rem);
  line-height: 1.1;
  font-variant-numeric: tabular-nums lining-nums;
  overflow-wrap: anywhere;
}

/* Pfad-Link: Weiterlesen */
.pfad-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  font-weight: 700;
}

/* ------------------------------------------------------------------
   Abschnitte
   ------------------------------------------------------------------ */

.abschnitt {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding-block: var(--abstand);
}

.abschnitt-kopf {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.abschnitt-kopf > .wegzeichen,
.abschnitt-kopf > .ziel {
  grid-column: 1;
  justify-self: end;
  margin-right: calc(var(--gasse) - 0.25rem);
}
.abschnitt-kopf--mitte > .wegzeichen,
.abschnitt-kopf--mitte > .ziel { justify-self: center; margin-right: 0; }

.abschnitt-kopf h2 {
  grid-column: 2 / 7;
  padding-inline: var(--gasse);
  font-stretch: 72%;
  font-weight: 820;
  font-size: clamp(2.25rem, 1rem + 3.4vw, 4.25rem);
  line-height: 0.95;
  letter-spacing: -0.012em;
  word-spacing: 0.06em;
}
.titel-zusatz {
  display: block;
  margin-top: 0.3em;
  font-style: italic;
  font-stretch: 106%;
  font-weight: 400;
  font-size: max(0.5em, 1.5rem);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--wasser);
}

/* ------------------------------------------------------------------
   Startbereich
   ------------------------------------------------------------------ */

.start {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: 1fr auto;
  min-height: calc(100svh - var(--kopf-h) - 2 * var(--rahmen) - 4px);
  padding-block: clamp(0.5rem, 1.5vw, 1.5rem) clamp(1.25rem, 2vw, 1.75rem);
}

.start-karte {
  position: absolute;
  z-index: 0;
  left: 0;
  top: calc(-1 * var(--kopf-h));
  width: 100%;
  height: calc(100% + var(--kopf-h));
  max-width: none;
  object-fit: cover;
  object-position: 70% 30%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
  mask-image: linear-gradient(to bottom, #000 72%, transparent);
}

.legende {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  padding: clamp(1.5rem, 4vw, 3.5rem) 0 0 var(--gasse);
  max-width: calc(100% - 3.75rem);
}
.legende h2 { margin-bottom: 0.5rem; }
.legende a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding-block: 0.25rem;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 600;
  text-decoration-color: transparent;
}
.legende a:hover { text-decoration-color: currentColor; }
.legende-signaturen {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgb(21 32 26 / 0.3);
}
.legende-signaturen li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--tinte-leise);
}
html:not(.js) .nur-mit-skript { display: none; }
.legende-zeichen { flex: none; display: inline-block; width: 1.25rem; height: 1.25rem; position: relative; }
.legende-zeichen--ring { border-radius: 50%; border: 4px solid var(--zeichen); background: var(--tafel); }
.legende-zeichen--route { height: 4px; background: linear-gradient(to right, var(--route) 0 45%, transparent 45% 62%, var(--route) 62%); }
.station-nr {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  background: var(--tafel);
  border: 2px solid var(--tinte);
  border-radius: 3px;
  font-family: var(--schrift-karte);
  font-stretch: 80%;
  font-weight: 850;
  font-size: 0.9375rem;
  line-height: 1;
}
.station-nr--start { background: var(--route); border-color: var(--route); color: var(--tafel); }
.station-nr--ziel { border-radius: 50%; border: 3px solid var(--route); color: var(--route); }
.legende-zeichen--standort { width: 1.1rem; height: 1.1rem; margin-inline: 0.075rem; border-radius: 50%; background: var(--route); border: 3px solid var(--papier); outline: 1px solid rgb(21 32 26 / 0.3); }

.start-text {
  grid-column: 2 / 5;
  grid-row: 1;
  align-self: center;
  padding-inline: var(--gasse);
}

h1 { position: relative; }
.start-punkt {
  position: absolute;
  left: calc(-1 * var(--gasse) - 0.7rem);
  bottom: 0.15rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 3px;
  background: var(--route);
  border: 3px solid var(--papier);
  transform: translateX(-50%);
}
.start-punkt::after {
  content: "1";
  font-family: var(--schrift-karte);
  font-style: normal;
  font-stretch: 80%;
  font-weight: 850;
  font-size: 0.9375rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--tafel);
}
.titel-weg {
  display: block;
  font-stretch: 68%;
  font-weight: 860;
  font-size: clamp(2.625rem, 1rem + 4.1vw, 5.5rem);
  line-height: 0.92;
  letter-spacing: -0.015em;
  word-spacing: 0.08em;
}
.titel-wir {
  display: block;
  margin-top: 0.3em;
  font-style: italic;
  font-stretch: 106%;
  font-weight: 400;
  font-size: clamp(1.75rem, 0.9rem + 2vw, 3rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--wasser);
}

.start-lede {
  margin-top: clamp(1rem, 1.8vw, 1.5rem);
  max-width: 46ch;
  font-size: clamp(1.1875rem, 1rem + 0.5vw, 1.4375rem);
  line-height: 1.5;
}

.start-hinweis {
  margin-top: 1.4rem;
  padding-left: 1.375rem;
  font-size: 1rem;
  color: var(--tinte-leise);
}

.standort {
  grid-column: 5 / 7;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  width: min(calc(100% - 2 * var(--gasse)), 20rem);
  margin: 0;
}
.standort img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 2px solid var(--tinte);
}
.standort figcaption {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.75rem;
}
.standort figcaption::before {
  content: "";
  width: 2rem; height: 2px;
  background: var(--tinte-leise);
  flex: none;
}

.foerderer {
  grid-column: 2 / 7;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding-inline: var(--gasse);
}
.foerderer ul {
  display: flex;
  gap: 1px;
  background: rgb(21 32 26 / 0.25);
  border: 2px solid var(--tinte);
  border-radius: 3px;
}
.foerderer li { background: var(--tafel); }
.foerderer li a, .foerderer li > img { display: block; }
.foerderer img {
  height: 3rem;
  width: auto;
  padding: 0.35rem 0.75rem;
  box-sizing: content-box;
}
.foerderer-verein {
  margin-left: auto;
  max-width: 30ch;
  font-size: 1rem;
  color: var(--tinte-leise);
}

/* ------------------------------------------------------------------
   Was uns antreibt
   ------------------------------------------------------------------ */

.werte {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: clamp(3rem, 9vw, 9rem);
}
.wert {
  position: relative;
  padding-left: calc(var(--zeichen-gr) + 1.25rem);
  padding-right: var(--gasse);
}
.wert > .wegzeichen { position: absolute; left: 0; top: 0.15rem; }
.wert--1 { grid-column: 2 / 4; grid-row: 1; margin-left: var(--gasse); }
.wert--2 { grid-column: 4 / 6; grid-row: 2; margin-left: var(--gasse); }
.wert--3 { grid-column: 5 / 7; grid-row: 3; margin-left: var(--gasse); }

.wert h3 {
  font-stretch: 74%;
  font-weight: 800;
  font-size: clamp(1.875rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1;
}
.wert p {
  margin-top: 0.75rem;
  max-width: 30ch;
  font-size: 1.25rem;
}

/* ------------------------------------------------------------------
   Flächen: Wald und Wasser mit natürlichen Rändern
   ------------------------------------------------------------------ */

.flaeche-wald { background: var(--wald); }
.flaeche-wasser {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23F3F5EE' stroke-opacity='.22' stroke-width='1.2' vector-effect='non-scaling-stroke'%3E%3Cpath d='M0 14C160 20 300 0 460 6S760 26 900 18 1180 -2 1440 8'/%3E%3Cpath d='M0 34C170 40 310 22 470 28S770 46 910 38 1190 20 1440 30'/%3E%3Cpath d='M0 58C180 62 330 46 480 52S780 68 920 60 1200 44 1440 54'/%3E%3C/g%3E%3C/svg%3E") top / 100% 7.5rem no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23F3F5EE' stroke-opacity='.22' stroke-width='1.2' vector-effect='non-scaling-stroke'%3E%3Cpath d='M0 106C160 100 300 120 460 114S760 94 900 102 1180 122 1440 112'/%3E%3Cpath d='M0 86C170 80 310 98 470 92S770 74 910 82 1190 100 1440 90'/%3E%3Cpath d='M0 62C180 58 330 74 480 68S780 52 920 60 1200 76 1440 66'/%3E%3C/g%3E%3C/svg%3E") bottom / 100% 7.5rem no-repeat,
    var(--wasser);
  color: var(--papier);
}

.flaeche-wald::before, .flaeche-wald::after,
.flaeche-wasser::before, .flaeche-wasser::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 48px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
.flaeche-wald::before, .flaeche-wasser::before { top: -47px; }
.flaeche-wald::after, .flaeche-wasser::after { bottom: -47px; transform: scaleY(-1); }

.flaeche-wald::before, .flaeche-wald::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V30C90 12 170 34 260 22S420 4 520 18 700 40 820 26 1000 2 1120 14 1330 36 1440 20V48Z' fill='%23D4E3C3'/%3E%3C/svg%3E");
}
.flaeche-wasser::before, .flaeche-wasser::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V24C160 30 300 10 460 16S760 36 900 28 1180 8 1440 18V48Z' fill='%23174E74'/%3E%3C/svg%3E");
}
.flaeche-wald::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V22C120 34 240 8 380 16S600 38 760 24 980 6 1110 20 1320 38 1440 26V48Z' fill='%23D4E3C3'/%3E%3C/svg%3E"); }

.flaeche-wasser :focus-visible { outline-color: var(--papier); }
.flaeche-wasser .titel-zusatz { color: var(--papier); }

/* ------------------------------------------------------------------
   Beratung
   ------------------------------------------------------------------ */

.beratung-raster {
  grid-column: 2 / 7;
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
}
.beratung-haltung {
  grid-column: 1 / 3;
  padding-inline: var(--gasse);
}
.beratung-un {
  font-size: 1.125rem;
  color: var(--tinte-leise);
  max-width: 34ch;
}
.haltung {
  margin-top: 2rem;
  font-family: var(--schrift-karte);
  font-stretch: 70%;
  font-weight: 800;
  font-size: clamp(2rem, 1rem + 2.3vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.01em;
  word-spacing: 0.06em;
  text-wrap: balance;
}
.haltung-wir {
  display: block;
  margin-top: 0.2em;
  font-weight: 900;
  font-size: 1.35em;
  white-space: nowrap;
}

.beratung-text {
  grid-column: 3 / 6;
  padding-inline: var(--gasse);
  max-width: 62ch;
}
.beratung-text p + p { margin-top: 0.85em; }
.beratung-betont { font-weight: 700; }
.beratung-wege {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  margin-top: 2.25rem;
}

/* ------------------------------------------------------------------
   Aufräum-Service
   ------------------------------------------------------------------ */

.aufraeumen-raster {
  grid-column: 2 / 7;
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
}
/* Die Fügung füllt B–C; ihre Größe folgt der Kartenbreite, damit
   „Wir räumen auf“ immer in zwei Planquadrate passt. */
.raeumen {
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  column-gap: 0.28em;
  padding-inline: var(--gasse);
  font-family: var(--schrift-karte);
  font-stretch: 62%;
  font-weight: 900;
  font-size: clamp(3rem, 5.2cqi, 5.5rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  word-spacing: 0.1em;
}
.raeumen-wir { grid-column: 1; grid-row: 1; }
.raeumen-wort { grid-column: 2; }
.raeumen-wort + .raeumen-wort { color: var(--tinte-leise); }

.aufraeumen-text {
  grid-column: 3 / 6;
  align-self: start;
  max-width: 52ch;
  padding-top: 0.35rem;
  padding-inline: var(--gasse);
}
.aufraeumen-lede { font-size: clamp(1.1875rem, 1rem + 0.4vw, 1.375rem); }
.aufraeumen-verein { margin-top: 1rem; font-weight: 700; }
.merkmale { margin-block: 1.5rem 1.25rem; display: grid; gap: 0.4rem; }
.merkmale li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--schrift-karte);
  font-stretch: 85%;
  font-weight: 650;
  font-size: 1.375rem;
}
.merkmale li::before {
  content: "";
  flex: none;
  width: 0.9rem; height: 3px;
  background: var(--tinte);
}

/* ------------------------------------------------------------------
   Sponsoren
   ------------------------------------------------------------------ */

.sponsoren-liste {
  grid-column: 2 / 7;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-inline: var(--gasse);
  background: rgb(21 32 26 / 0.25);
  border: 2px solid var(--tinte);
  border-radius: 3px;
}
.sponsoren-liste li {
  aspect-ratio: 3 / 2;
  background: var(--tafel);
}
.sponsoren-liste li > a, .sponsoren-liste li > img {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
}
.sponsoren-liste img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: clamp(0.5rem, 1.2vw, 1rem);
}
.sponsoren-liste a:focus-visible { outline-offset: 4px; }

/* ------------------------------------------------------------------
   Unterstützen
   ------------------------------------------------------------------ */

.unterstuetzen-raster {
  grid-column: 2 / 7;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem 3rem;
  padding-inline: var(--gasse);
}
.unterstuetzen .abschnitt-kopf { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.unterstuetzen-lede {
  max-width: 28ch;
  font-size: clamp(1.375rem, 1rem + 1.1vw, 2rem);
  line-height: 1.35;
}
.wegweiser--wasser { margin-top: 0; }
.wegweiser--wasser::before { background: var(--papier); }

/* ------------------------------------------------------------------
   Fuß: Ziel der Route
   ------------------------------------------------------------------ */

.fuss {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding-block: var(--abstand) 1.5rem;
}
.fuss .abschnitt-kopf { margin-bottom: 2.5rem; }

.fuss-raster {
  grid-column: 2 / 7;
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
  row-gap: 2rem;
}
.fuss-raster > * { padding-inline: var(--gasse); }
.fuss-logo { grid-column: 1; width: min(100%, 11rem); height: auto; box-sizing: content-box; }
.fuss-adresse { grid-column: 2; font-style: normal; line-height: 1.6; }
.fuss-kontakt { grid-column: 3 / 5; display: grid; gap: 0.25rem; }
.fuss-kontakt a, .fuss-recht a { display: inline-flex; align-items: center; min-height: 44px; }
.fuss-kontakt a { font-weight: 700; font-size: 1.25rem; }
.fuss-recht { grid-column: 5; display: grid; gap: 0.25rem; }

.kartenrand {
  grid-column: 2 / 7;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: 1.25rem var(--gasse) 0;
  border-top: 1px solid rgb(21 32 26 / 0.3);
}
.massstab-balken {
  display: flex;
  width: 10rem;
  height: 0.6rem;
  border: 1.5px solid var(--tinte);
}
.massstab-balken span { flex: 1; }
.massstab-balken span:nth-child(odd) { background: var(--tinte); }
.copyright { margin-left: auto; font-size: 1rem; color: var(--tinte-leise); }

/* ------------------------------------------------------------------
   Route: die Signatur. Wird per Skript gezeichnet.
   ------------------------------------------------------------------ */

.route {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  display: none;
}
.js .route { display: block; }
.route-geplant {
  fill: none;
  stroke: var(--route);
  stroke-width: 2.5;
  stroke-dasharray: 1 9;
  stroke-linecap: round;
  opacity: 0.7;
}
.route-gegangen {
  fill: none;
  stroke: var(--route);
  stroke-width: 5;
  stroke-dasharray: 16 9;
}
.route-enthuellung { fill: none; stroke: #fff; stroke-width: 16; }
.route-standort { fill: var(--route); stroke: var(--papier); stroke-width: 4; }

@media (prefers-reduced-motion: reduce) {
  .route-standort { display: none; }
  .arm, .untermenue summary::after { transition: none; }
  .arm:hover, .arm:active { transform: none; }
}

/* ------------------------------------------------------------------
   Schmaler: Kartenraster bleibt, Inhalte laufen in einer Spalte
   neben der Routenspur
   ------------------------------------------------------------------ */

@media (max-width: 1099px) {
  :root {
    --spur: clamp(2.75rem, 7vw, 4.5rem);
    --kopf-h: 6.25rem;
    --zeichen-gr: 2rem;
  }


  .kopf {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-top: 1.5rem;
    padding-right: var(--gasse);
  }
  .kopf-logo { margin-left: calc(var(--spur) - 0.25rem); }

  .js .menue-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 48px;
    padding: 0.5rem 1rem;
    background: var(--tafel);
    border: 2px solid var(--tinte);
    border-radius: 3px;
    color: var(--tinte);
    font: 700 1.0625rem/1 var(--schrift-text);
    cursor: pointer;
  }
  .menue-symbol, .menue-symbol::before, .menue-symbol::after {
    display: block;
    width: 1.25rem; height: 2px;
    background: currentColor;
    position: relative;
  }
  .menue-symbol::before, .menue-symbol::after { content: ""; position: absolute; left: 0; }
  .menue-symbol::before { top: -6px; }
  .menue-symbol::after { top: 6px; }
  .menue-knopf[aria-expanded="true"] .menue-symbol { background: transparent; }
  .menue-knopf[aria-expanded="true"] .menue-symbol::before { top: 0; transform: rotate(45deg); }
  .menue-knopf[aria-expanded="true"] .menue-symbol::after { top: 0; transform: rotate(-45deg); }

  .hauptnavigation {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0.5rem var(--gasse) 1rem var(--spur);
  }
  .js .hauptnavigation {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    z-index: 30;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem var(--gasse) 1.5rem var(--spur);
    background: var(--papier);
    border-block: 2px solid var(--tinte);
  }
  .js .hauptnavigation[data-offen] { display: flex; }
  .js .hauptnavigation > ul { flex-direction: column; align-items: flex-start; }
  .js .untermenue ul { position: static; min-width: 0; border: 0; border-left: 2px solid var(--tinte); padding: 0 0 0 1rem; margin-left: 0.25rem; }

  .start, .abschnitt, .fuss {
    grid-template-columns: var(--spur) minmax(0, 1fr);
  }
  .start { grid-template-rows: auto; min-height: 0; padding-top: 1.5rem; row-gap: 2.5rem; }

  .start-text { grid-column: 2; grid-row: auto; padding-left: 0; }
  .start-karte { height: calc(var(--kopf-h) + 30rem); -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent); mask-image: linear-gradient(to bottom, #000 45%, transparent); }
  .foerderer-verein { margin-left: 0; flex-basis: 100%; max-width: none; }
  .start-punkt { left: calc(var(--spur) / -2); transform: translateX(-50%); }
  .standort { grid-column: 2; grid-row: auto; justify-self: start; width: min(100% - var(--gasse), 15rem); }
  .standort figcaption { width: max-content; max-width: calc(100vw - var(--spur) - 3rem); }
  .legende { grid-column: 2; grid-row: auto; max-width: none; padding: 0 var(--gasse) 0 0; }
  .legende-stationen { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
  .foerderer { grid-column: 2; grid-row: auto; margin-top: 0; padding-left: 0; }

  .abschnitt-kopf, .werte, .beratung-raster, .aufraeumen-raster, .fuss-raster { grid-template-columns: var(--spur) minmax(0, 1fr); }
  .abschnitt-kopf > .wegzeichen, .abschnitt-kopf > .ziel { justify-self: center; margin-right: 0; }
  .abschnitt-kopf h2 { grid-column: 2; padding-left: 0; }

  .werte { row-gap: 3rem; }
  .wert, .wert--1, .wert--2, .wert--3 { grid-column: 2; margin-left: 0; padding-left: 0; }
  .wert > .wegzeichen { left: calc(var(--spur) / -2); transform: translateX(-50%); }

  .beratung-raster, .aufraeumen-raster { grid-column: 1 / -1; row-gap: 2.5rem; }
  .beratung-haltung, .beratung-text, .raeumen, .aufraeumen-text { grid-column: 2; padding-left: 0; }

  .sponsoren-liste, .unterstuetzen-raster, .kartenrand { grid-column: 2; padding-left: 0; }
  .sponsoren-liste { margin-inline: 0 var(--gasse); }
  .fuss-raster { grid-column: 1 / -1; }
  .fuss-logo, .fuss-adresse, .fuss-kontakt, .fuss-recht { grid-column: 2; padding-left: 0; }
}

@media (min-width: 760px) and (max-width: 1099px) {
  .start { grid-template-columns: var(--spur) minmax(0, 1fr) auto; }
  .start-text { grid-column: 2; grid-row: 1; }
  .standort { grid-column: 3; grid-row: 1; align-self: center; width: 15rem; margin-right: var(--gasse); }
  .legende, .foerderer { grid-column: 2 / 4; }
}

@media (max-width: 759px) {
  .sponsoren-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .unterstuetzen-raster { flex-direction: column; align-items: flex-start; }
  .copyright { margin-left: 0; }
  .arm { --spitze: 1.15rem; padding-right: 0.75rem; }
}