/* =====================================================================
   Aufbruch Media – Stylesheet
   ---------------------------------------------------------------------
   Gestaltungsidee „Horizont“: Die Seite beginnt in der Nacht, eine Linie
   zieht sich durch alle Abschnitte, und die Sonne steht am Ende oben.
   Dunkle Abschnitte sind die Etappen, helle Abschnitte das Arbeitslicht.

   Aufbau
     1  Grundlagen und Marken
     2  Typografie
     3  Hilfsklassen und Raster
     4  Kopfzeile und Navigation
     5  Knöpfe und Verweise
     6  Held (Startseite)
     7  Abfahrtstafel
     8  Abschnitte und Überschriften
     9  Karten: Leistung, Projekt, Stimme, Etappe
    10  Seiteninhalte (Text, Listen, FAQ, Tabellen)
    11  Formular
    12  Fußzeile
    13  Bewegung, Osterei, reduzierte Bewegung
   ===================================================================== */

/* Selbst gehostete Schriften – keine externen Aufrufe (DSGVO).
   Quelle: Google Fonts, SIL Open Font License 1.1
   Fraunces (Undercase), Inter (rsms), Space Mono (Colophon Foundry) */

/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/fraunces-300-900-italic-latin-ext.woff2') format('woff2');
  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;
}

/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/fraunces-300-900-italic-latin.woff2') format('woff2');
  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;
}

/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/fraunces-300-900-normal-latin-ext.woff2') format('woff2');
  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;
}

/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/fraunces-300-900-normal-latin.woff2') format('woff2');
  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;
}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/inter-300-800-normal-latin-ext.woff2') format('woff2');
  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;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/inter-300-800-normal-latin.woff2') format('woff2');
  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;
}

/* latin-ext */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/spacemono-400-normal-latin-ext.woff2') format('woff2');
  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;
}

/* latin */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/spacemono-400-normal-latin.woff2') format('woff2');
  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;
}

/* latin-ext */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/spacemono-700-normal-latin-ext.woff2') format('woff2');
  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;
}

/* latin */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/spacemono-700-normal-latin.woff2') format('woff2');
  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;
}

/* ---------------------------------------------------------------------
   1  Grundlagen und Marken
   --------------------------------------------------------------------- */

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

* { margin: 0; }

:root {
  /* Nacht */
  --nacht:        #0A0E15;
  --nacht-2:      #111823;
  --nacht-3:      #1B2433;
  --nacht-linie:  #27313F;
  --nacht-text:   #FBF7F1;
  --nacht-leise:  #A9B4C4;

  /* Tag */
  --papier:       #FBF7F1;
  --papier-2:     #F3ECE1;
  --sand:         #E6DACA;
  --sand-linie:   #DFD2BF;
  --tinte:        #15181E;
  --tinte-2:      #474D58;
  --tinte-3:      #6B7280;

  /* Akzente */
  --signal:       #FF6A2B;   /* nur auf dunklem Grund als Text */
  --signal-hell:  #FF8A4C;
  --signal-tief:  #A83A08;   /* Text und Verweise auf hellem Grund */
  --glut:         #FFC46B;
  --morgen:       #FF3F6C;
  --see:          #0E4F5C;
  --see-hell:     #6FD3DA;

  /* Schrift */
  --schrift-text:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --schrift-titel: 'Fraunces', Georgia, 'Times New Roman', serif;
  --schrift-mono:  'Space Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* Abstände */
  --s-1:  .25rem;  --s-2:  .5rem;   --s-3:  .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6:  2rem;    --s-7:  3rem;    --s-8: 4rem;
  --s-9:  6rem;    --s-10: 8rem;

  --luft-abschnitt: clamp(3.5rem, 8vw, 7rem);
  --breite:  76rem;
  --breite-schmal: 48rem;
  --mass: 66ch;

  --rund:     14px;
  --rund-gr:  22px;
  --rund-kl:   8px;

  --tempo:  .32s;
  --kurve:  cubic-bezier(.2, .7, .3, 1);

  --schatten:    0 1px 2px rgba(21, 24, 30, .05), 0 8px 24px -12px rgba(21, 24, 30, .16);
  --schatten-gr: 0 2px 4px rgba(21, 24, 30, .06), 0 24px 48px -20px rgba(21, 24, 30, .28);

  /* Kontextfarben: Jeder Abschnitt sagt, ob er Tag oder Nacht ist.
     Bausteine greifen nur auf diese fünf Marken zu und funktionieren
     dadurch auf beiden Gründen, ohne eigene Sonderregel. */
  --kontext-flaeche: var(--papier);
  --kontext-text:    var(--tinte);
  --kontext-leise:   var(--tinte-2);
  --kontext-akzent:  var(--signal-tief);
  --kontext-linie:   var(--sand-linie);
}

.auf-nacht,
.held,
.seitenkopf,
.aufruf,
.fuss,
.stimme--gross {
  --kontext-flaeche: var(--nacht);
  --kontext-text:    var(--nacht-text);
  --kontext-leise:   var(--nacht-leise);
  --kontext-akzent:  var(--glut);
  --kontext-linie:   var(--nacht-linie);
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Kopfzeile ist fixiert – Sprungziele nicht darunter schieben */
  scroll-padding-top: 6.5rem;
}

body {
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
address { font-style: normal; }
img { height: auto; }

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

/* Der Fokusring nimmt die Akzentfarbe des Abschnitts – auf Papier das
   dunkle Orange, auf dunklem Grund die helle Glut. */
:focus-visible {
  outline: 3px solid var(--kontext-akzent);
  outline-offset: 3px;
  border-radius: 3px;
}
.kopf :focus-visible { outline-color: var(--glut); }

/* ---------------------------------------------------------------------
   2  Typografie
   --------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: 620;
  line-height: 1.08;
  letter-spacing: -.022em;
  font-variation-settings: 'opsz' 96, 'SOFT' 20;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 1.35rem + 4.1vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 1.25rem + 2.5vw, 3rem); }
h3 { font-size: clamp(1.22rem, 1.05rem + .8vw, 1.6rem); line-height: 1.2; letter-spacing: -.012em; }
h4 { font-size: 1.0625rem; font-family: var(--schrift-text); font-weight: 650; letter-spacing: 0; line-height: 1.35; }

p, li { text-wrap: pretty; }

.vorzeile {
  font-family: var(--schrift-mono);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--kontext-akzent);
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.vorzeile::before {
  content: '';
  width: 2.25rem;
  height: 2px;
  background: currentColor;
  flex: none;
  border-radius: 2px;
}

/* „wonky“ Betonung im Fließtitel */
em.schwung,
.schwung {
  font-style: italic;
  font-variation-settings: 'opsz' 14, 'SOFT' 60, 'WONK' 1;
  color: var(--kontext-akzent);
}

.lead {
  font-size: clamp(1.125rem, 1.02rem + .5vw, 1.375rem);
  line-height: 1.55;
  color: var(--kontext-leise);
  max-width: 34em;
}

/* ---------------------------------------------------------------------
   3  Hilfsklassen und Raster
   --------------------------------------------------------------------- */

.behaelter {
  width: min(100% - 2.5rem, var(--breite));
  margin-inline: auto;
}
.behaelter--schmal { width: min(100% - 2.5rem, var(--breite-schmal)); }

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

.sprungmarke {
  position: fixed;
  top: var(--s-3); left: var(--s-3);
  z-index: 1000;
  transform: translateY(-160%);
  background: var(--signal);
  color: var(--nacht);
  font-weight: 650;
  padding: .7rem 1.1rem;
  border-radius: var(--rund-kl);
  text-decoration: none;
  transition: transform var(--tempo) var(--kurve);
}
.sprungmarke:focus { transform: translateY(0); }

.auf-nacht {
  background: var(--nacht);
  color: var(--nacht-text);
}
.auf-nacht h1, .auf-nacht h2, .auf-nacht h3 { color: var(--nacht-text); }

.auf-sand { background: var(--papier-2); }

/* Fortschritt am oberen Rand */
.fortschritt {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 90;
  pointer-events: none;
}
.fortschritt__balken {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(var(--fortschritt, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--morgen), var(--signal) 45%, var(--glut));
}

/* Horizontlinie als Abschnittstrenner */
.horizont {
  display: block;
  width: 100%;
  height: clamp(40px, 6vw, 84px);
  color: var(--kontext-linie);
}
.horizont svg { width: 100%; height: 100%; }

/* Kleine Hilfsklassen statt style-Attributen */
.abstand-oben       { margin-top: var(--s-5); }
.abstand-oben-gross { margin-top: var(--s-6); }
.abstand-unten      { margin-bottom: var(--s-5); }
.text-leise         { color: var(--kontext-leise); margin-top: var(--s-4); }
.adresse            { font-style: normal; }

/* ---------------------------------------------------------------------
   4  Kopfzeile und Navigation
   --------------------------------------------------------------------- */

.kopf {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  padding-block: var(--s-3);
  transition: background var(--tempo) var(--kurve),
              box-shadow var(--tempo) var(--kurve),
              padding var(--tempo) var(--kurve);
}
.kopf::before {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--nacht) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--nacht-linie);
  opacity: 0;
  transition: opacity var(--tempo) var(--kurve);
}
.kopf.ist-gescrollt::before { opacity: 1; }
.kopf.ist-gescrollt { padding-block: var(--s-2); }

.kopf__innen {
  position: relative;
  width: min(100% - 2.5rem, var(--breite));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

/* Marke */
.marke {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: .7rem;
  text-decoration: none;
  color: var(--nacht-text);
  flex: none;
}
.marke__zeichen {
  width: clamp(2.9rem, 2.3rem + 1.6vw, 3.9rem);
  color: var(--glut);
  flex: none;
  display: block;
}
.marke__zeichen svg { width: 100%; height: auto; overflow: visible; }
.marke__zeichen circle { transition: transform .9s var(--kurve); transform-origin: 22px 25px; }
.marke__wort {
  font-family: var(--schrift-titel);
  font-size: clamp(1.3rem, 1.05rem + .7vw, 1.72rem);
  line-height: 1;
  letter-spacing: -.02em;
  display: flex;
  flex-direction: column;
}
.marke__wort strong { font-weight: 700; }
.marke__wort span {
  font-family: var(--schrift-mono);
  font-size: clamp(.66rem, .58rem + .2vw, .76rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--nacht-leise);
  margin-top: .22rem;
}

/* Navigation – ab 62rem waagerecht */
.nav__liste {
  list-style: none;
  padding: 0;
  display: flex;
  gap: var(--s-5);
}
.nav__liste a {
  color: var(--nacht-text);
  text-decoration: none;
  font-size: .975rem;
  font-weight: 480;
  padding: .45rem 0;
  position: relative;
  display: inline-block;
}
.nav__liste a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: .1rem;
  height: 2px;
  background: var(--signal);
  border-radius: 2px;
  transition: right var(--tempo) var(--kurve);
}
.nav__liste a:hover::after,
.nav__liste a:focus-visible::after { right: 0; }
.nav__liste a[aria-current="page"] { font-weight: 650; }
.nav__liste a[aria-current="page"]::after { right: 0; background: var(--glut); }

.nav__fuss { display: none; }

.kopf__aktionen {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: none;
}
.kopf__tel {
  display: none;
  align-items: center;
  gap: .45rem;
  color: var(--nacht-text);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 550;
  padding: .55rem .8rem;
  border: 1px solid var(--nacht-linie);
  border-radius: 999px;
  min-height: 44px;
}
.kopf__tel svg { width: 1.05rem; height: 1.05rem; }

.burger {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  padding: .5rem .85rem;
  border: 1px solid var(--nacht-linie);
  border-radius: 999px;
  background: transparent;
  color: var(--nacht-text);
  font: inherit;
  font-size: .9rem;
  font-weight: 550;
  cursor: pointer;
}
.burger__striche {
  width: 1.05rem;
  display: grid;
  gap: 4px;
}
.burger__striche i {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--tempo) var(--kurve);
}
.burger[aria-expanded="true"] .burger__striche i:first-child { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__striche i:last-child  { transform: translateY(-3px) rotate(-45deg); }

@media (max-width: 61.999em) {
  /* Das geöffnete Menü legt sich über die Seite, aber nicht über die
     Kopfzeile: Logo und Anrufknopf bleiben erreichbar. */
  .marke, .kopf__aktionen { position: relative; z-index: 2; }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: var(--nacht);
    padding: 7rem var(--s-5) var(--s-6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--s-6);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-1.5rem);
    transition: opacity var(--tempo) var(--kurve),
                transform var(--tempo) var(--kurve),
                visibility var(--tempo);
    overflow-y: auto;
  }
  .nav.ist-offen { opacity: 1; visibility: visible; transform: none; }
  .nav__liste {
    flex-direction: column;
    gap: var(--s-2);
  }
  .nav__liste a {
    font-family: var(--schrift-titel);
    font-size: clamp(1.9rem, 9vw, 2.6rem);
    font-weight: 620;
    letter-spacing: -.02em;
    padding: .35rem 0;
  }
  .nav__liste a::after { bottom: .35rem; height: 3px; }
  .nav__fuss {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    border-top: 1px solid var(--nacht-linie);
    padding-top: var(--s-5);
    font-family: var(--schrift-mono);
    font-size: .85rem;
  }
  .nav__fuss a { color: var(--glut); text-decoration: none; min-height: 44px; display: flex; align-items: center; }
  .nav__fuss .nav__cta { color: #0A0E15; justify-content: center; margin-bottom: var(--s-2); }
  .nav__fuss .nav__cta:hover { color: #0A0E15; }
  .kopf__aktionen .kopf__cta { display: none; }
  .kopf__tel { display: inline-flex; }
  .kopf__tel span { display: none; }
  body.menue-offen { overflow: hidden; }
}

@media (min-width: 62em) {
  .burger { display: none; }
  .nav { margin-left: var(--s-6); }
}

/* ---------------------------------------------------------------------
   5  Knöpfe und Verweise
   --------------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 48px;
  padding: .85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--schrift-text);
  font-size: 1rem;
  font-weight: 620;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--tempo) var(--kurve),
              background var(--tempo) var(--kurve),
              border-color var(--tempo) var(--kurve),
              box-shadow var(--tempo) var(--kurve);
}
.knopf svg { width: 1.1em; height: 1.1em; flex: none; transition: transform var(--tempo) var(--kurve); }
.knopf:hover svg { transform: translateX(.22em); }

/* Dunkle Schrift auf Orange: 6,8:1. Weiß auf Orange wäre 2,9:1. */
.knopf--haupt {
  background: var(--signal);
  color: #0A0E15;
  box-shadow: 0 10px 28px -14px rgba(255, 106, 43, .9);
}
.knopf--haupt:hover { background: var(--signal-hell); transform: translateY(-2px); }

.knopf--rand {
  background: transparent;
  color: var(--kontext-text);
  border-color: var(--kontext-linie);
}
.knopf--rand:hover {
  border-color: var(--kontext-text);
  background: color-mix(in srgb, var(--kontext-text) 6%, transparent);
  transform: translateY(-2px);
}

.knopf--klein { min-height: 42px; padding: .6rem 1.1rem; font-size: .925rem; }
.kopf__cta { background: var(--signal); color: #0A0E15; }
.kopf__cta:hover { background: var(--signal-hell); }

.knopf-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

/* Textverweise
   Grundregel: Kein Verweis bleibt je im Browser-Blau stehen. Alles, was
   navigiert oder als Knopf auftritt, setzt seine Farbe danach selbst. */
a { color: var(--kontext-akzent); }

.inhalt a:not(.knopf):not(.pfeil-verweis),
.lead a,
.stimme__quelle a,
.stimmen-hinweis a,
.fuss__kontakt a,
.faq__text a,
.merkkasten a,
.fakten dd a,
.meldung a,
.einwilligung a,
.abschnitt__kopf p a,
.aufruf p a,
.feld__hinweis a {
  color: var(--kontext-akzent);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .18em;
  transition: color var(--tempo) var(--kurve);
}
.inhalt a:not(.knopf):hover,
.lead a:hover,
.stimmen-hinweis a:hover,
.faq__text a:hover,
.merkkasten a:hover,
.fakten dd a:hover,
.abschnitt__kopf p a:hover,
.aufruf p a:hover { color: var(--kontext-text); }

.pfeil-verweis {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 620;
  text-decoration: none;
  color: var(--kontext-akzent);
  min-height: 44px;
}
.pfeil-verweis svg { width: 1.05em; height: 1.05em; transition: transform var(--tempo) var(--kurve); }
.pfeil-verweis:hover svg { transform: translateX(.25em); }

/* ---------------------------------------------------------------------
   6  Held (Startseite und Seitenkopf)
   --------------------------------------------------------------------- */

.held {
  position: relative;
  background: var(--nacht);
  color: var(--nacht-text);
  /* Unten bleibt ein Streifen Boden stehen, damit die Horizontlinie
     sichtbar ist und die Sonne darauf steht statt abgeschnitten zu werden. */
  padding-block: clamp(5.75rem, 9vw, 7.75rem) clamp(2.75rem, 5vw, 4.25rem);
  overflow: hidden;
  isolation: isolate;
}
/* Sternenstaub */
.held::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 27% 9%,  rgba(255,255,255,.4),  transparent 60%),
    radial-gradient(1.6px 1.6px at 41% 26%, rgba(255,255,255,.5),  transparent 60%),
    radial-gradient(1.1px 1.1px at 58% 12%, rgba(255,255,255,.38), transparent 60%),
    radial-gradient(1.5px 1.5px at 72% 22%, rgba(255,255,255,.5),  transparent 60%),
    radial-gradient(1.2px 1.2px at 86% 8%,  rgba(255,255,255,.42), transparent 60%),
    radial-gradient(1.3px 1.3px at 93% 31%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1.1px 1.1px at 6% 38%,  rgba(255,255,255,.3),  transparent 60%),
    radial-gradient(1.4px 1.4px at 34% 44%, rgba(255,255,255,.28), transparent 60%),
    radial-gradient(1.2px 1.2px at 64% 41%, rgba(255,255,255,.26), transparent 60%);
}
/* Feines Korn statt Flaechenverlauf: nimmt dem Dunkel das Glatte,
   steckt als data-URI im Stylesheet und kostet keine Anfrage. */
.held::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)' opacity='.06'/%3E%3C/svg%3E");
}

.held h1 {
  font-size: clamp(2.5rem, .9rem + 6vw, 5.3rem);
  font-weight: 640;
  letter-spacing: -.03em;
  line-height: 1.01;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

/* Lead links, Handlung rechts. Haelt den Held flach genug, dass der
   Horizont mit der Sonne auch auf dem Telefon noch im Blick liegt. */
.held__unten {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 56em) {
  .held__unten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.held .lead { max-width: 40ch; margin: 0; }
.held__handeln .knopf-reihe { margin-top: 0; }

.held__handeln {
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 3vw, 2rem);
  align-items: flex-start;
}
@media (min-width: 56em) {
  .held__handeln { align-items: flex-end; text-align: right; }
}

.held__vertrauen {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: .88rem;
  line-height: 1.45;
  color: var(--nacht-leise);
  margin: 0;
}
.held__vertrauen span { display: flex; align-items: flex-start; gap: .5rem; max-width: 34ch; }
.held__vertrauen span::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--signal);
  flex: none;
  margin-top: .5em;
}
@media (min-width: 56em) {
  .held__vertrauen { align-items: flex-end; }
  .held__vertrauen span { text-align: left; }
}

/* ---- Der Horizont: eine Linie ueber die ganze Breite -------------- */
.held__horizont {
  position: relative;
  margin-top: clamp(2rem, 4.5vw, 3.4rem);
  height: clamp(2.6rem, 5vw, 4.4rem);
  /* unten beschnitten, oben offen: die Sonne kann aufgehen */
  clip-path: inset(-140vh 0 0 0);
}
/* Daemmerungslicht, an der Sonne verankert statt als Flaechenverlauf */
.held__horizont::before {
  content: '';
  position: absolute;
  inset: -24rem 0 0 0;
  z-index: -1;
  opacity: .85;
  background: radial-gradient(46% 100% at 68% 100%,
    rgba(255, 106, 43, .30) 0%,
    rgba(255, 63, 108, .12) 42%,
    transparent 74%);
}
/* die Linie selbst */
.held__horizont::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(255, 196, 107, .16) 7%,
    rgba(255, 196, 107, .5) 44%, rgba(255, 196, 107, .5) 74%,
    rgba(255, 196, 107, .16) 93%, transparent);
}
.held__sonne {
  position: absolute;
  left: 68%;
  bottom: 0;
  width: clamp(4.2rem, 7vw, 6.6rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--signal);
  transform: translate(-50%, var(--sonne-hoch, 46%));
  cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
  .held__sonne { animation: sonne-auf 1.9s var(--kurve) both; }
}
@keyframes sonne-auf {
  from { transform: translate(-50%, 94%); }
  to   { transform: translate(-50%, var(--sonne-hoch, 46%)); }
}

/* Seitenkopf der Unterseiten */
.seitenkopf {
  position: relative;
  background: var(--nacht);
  color: var(--nacht-text);
  padding-block: clamp(7rem, 12vw, 9.5rem) clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  isolation: isolate;
}
.seitenkopf::after {
  content: '';
  position: absolute;
  inset: auto 0 -40% 0;
  height: 90%;
  z-index: -1;
  background: radial-gradient(90% 100% at 22% 100%,
      rgba(255, 106, 43, .22) 0%, rgba(255, 63, 108, .1) 40%, transparent 72%);
}
.seitenkopf h1 { margin-bottom: var(--s-4); max-width: 18ch; }
.seitenkopf .lead { max-width: 44ch; }

.brotkrumen {
  font-family: var(--schrift-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nacht-leise);
  margin-bottom: var(--s-5);
}
.brotkrumen ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.brotkrumen li:not(:last-child)::after { content: '→'; margin-left: .4rem; opacity: .6; }
.brotkrumen a { color: var(--nacht-leise); text-decoration: none; }
.brotkrumen a:hover { color: var(--glut); }
.brotkrumen [aria-current] { color: var(--nacht-text); }

/* ---------------------------------------------------------------------
   7  Abfahrtstafel
   --------------------------------------------------------------------- */

.tafel {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: var(--s-5);
  border-top: 1px solid var(--nacht-linie);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
}
.tafel__wort {
  font-family: var(--schrift-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nacht-leise);
  flex: none;
}
.tafel__brett {
  display: flex;
  gap: 3px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.tafel__feld {
  display: grid;
  place-items: center;
  min-width: clamp(1.05rem, 3.4vw, 1.55rem);
  padding: .34rem .1rem;
  border-radius: 3px;
  background: var(--nacht-2);
  border: 1px solid var(--nacht-linie);
  border-top-color: #323E50;
  font-family: var(--schrift-mono);
  font-weight: 700;
  font-size: clamp(.72rem, 2.1vw, .92rem);
  line-height: 1;
  color: var(--glut);
  position: relative;
}
.tafel__feld::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: rgba(0, 0, 0, .55);
}
.tafel__feld--leer { background: transparent; border-color: rgba(255,255,255,.07); }
.tafel__feld--leer::after { opacity: .3; }
.tafel__feld.blaettert { animation: blattfall .16s var(--kurve); }
@keyframes blattfall {
  0%   { transform: rotateX(0deg);  filter: brightness(1); }
  49%  { transform: rotateX(-88deg); filter: brightness(.35); }
  50%  { transform: rotateX(88deg);  filter: brightness(.35); }
  100% { transform: rotateX(0deg);  filter: brightness(1); }
}

/* ---------------------------------------------------------------------
   8  Abschnitte und Überschriften
   --------------------------------------------------------------------- */

.abschnitt { padding-block: var(--luft-abschnitt); }
.abschnitt--eng { padding-block: clamp(2.5rem, 5vw, 4rem); }

.abschnitt__kopf {
  max-width: 44ch;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
/* Steht der Kopf allein im Abschnitt, braucht er keinen Abstand nach unten. */
.behaelter > .abschnitt__kopf:only-child { margin-bottom: 0; }
.abschnitt__kopf p { color: var(--kontext-leise); margin-top: var(--s-4); }

.abschnitt__kopf--breit {
  max-width: none;
  display: grid;
  gap: var(--s-5);
}
@media (min-width: 52em) {
  .abschnitt__kopf--breit {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: end;
  }
  .abschnitt__kopf--breit > div:last-child { padding-bottom: .4rem; }
}

/* ---------------------------------------------------------------------
   9  Karten
   --------------------------------------------------------------------- */

.raster {
  display: grid;
  gap: var(--s-5);
}
@media (min-width: 46em) { .raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 58em) { .raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 46em) and (max-width: 57.999em) { .raster--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Leistungskarte */
.leistung {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  background: var(--papier);
  border: 1px solid var(--sand-linie);
  border-radius: var(--rund-gr);
  overflow: hidden;
  transition: transform var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve);
}
.auf-sand .leistung { background: var(--papier); }
.leistung:hover { transform: translateY(-4px); box-shadow: var(--schatten-gr); }
.leistung .leistung__nr {
  font-family: var(--schrift-titel);
  font-size: 3.4rem;
  font-weight: 300;
  line-height: .8;
  color: var(--sand);
  margin-bottom: var(--s-4);
  transition: color var(--tempo) var(--kurve);
}
.leistung:hover .leistung__nr { color: var(--signal); }
.leistung h3 { margin-bottom: var(--s-3); }
.leistung p { color: var(--tinte-2); font-size: 1rem; }
.leistung__liste {
  list-style: none;
  padding: 0;
  margin: var(--s-4) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.leistung__liste li {
  font-family: var(--schrift-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3rem .6rem;
  border-radius: 999px;
  background: var(--papier-2);
  color: var(--tinte-2);
}
.leistung .pfeil-verweis { margin-top: auto; padding-top: var(--s-5); }
/* Der Horizont in der Karte steigt beim Überfahren */
.leistung::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--morgen), var(--signal), var(--glut));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .45s var(--kurve);
}
.leistung:hover::after, .leistung:focus-within::after { transform: scaleX(1); }

/* Projektkarte */
.projekt {
  display: flex;
  flex-direction: column;
  background: var(--papier);
  border: 1px solid var(--sand-linie);
  border-radius: var(--rund-gr);
  overflow: hidden;
  transition: transform var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve);
}
.projekt:hover { transform: translateY(-4px); box-shadow: var(--schatten-gr); }
.projekt__route {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--sand-linie);
  background: var(--papier-2);
  font-family: var(--schrift-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte-2);
}
.projekt__route b { font-weight: 700; color: var(--tinte); }
.projekt__bild {
  position: relative;
  overflow: hidden;
  background: var(--nacht-2);
  border-bottom: 1px solid var(--sand-linie);
}
.projekt__bild img { width: 100%; transition: transform .6s var(--kurve); }
.projekt:hover .projekt__bild img { transform: scale(1.03); }
/* Leistungsmarken in der Projektkarte */
.projekt .leistung__liste { margin-top: var(--s-4); }
.projekt__text { padding: clamp(1.3rem, 3vw, 1.9rem); display: flex; flex-direction: column; flex: 1; }
.projekt__text h2,
.projekt__text h3 {
  /* In der Karte zaehlt der Rhythmus der Reihe, nicht die Ebene */
  font-size: clamp(1.22rem, 1.05rem + .7vw, 1.72rem);
  line-height: 1.16;
  letter-spacing: -.014em;
  margin-bottom: .55rem;
}
.projekt__branche {
  font-family: var(--schrift-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinte-3);
  margin-bottom: var(--s-4);
}
.projekt__text p { color: var(--tinte-2); font-size: 1rem; }
.projekt .pfeil-verweis { margin-top: auto; padding-top: var(--s-5); }

/* Kundenstimmen */
.stimme {
  position: relative;
  background: var(--papier);
  border: 1px solid var(--sand-linie);
  border-radius: var(--rund-gr);
  padding: clamp(1.5rem, 3.4vw, 2.4rem);
  transition: transform var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve);
}
.stimme:nth-child(odd)  { transform: rotate(-.5deg); }
.stimme:nth-child(even) { transform: rotate(.45deg); }
.stimme:hover { transform: rotate(0deg) translateY(-3px); box-shadow: var(--schatten); }
.stimme p { font-size: 1rem; color: var(--tinte-2); }
.stimme p + p { margin-top: var(--s-4); }
.stimme__quelle {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--sand-linie);
  font-size: .9rem;
}
.stimme__quelle b { display: block; font-weight: 650; color: var(--tinte); font-size: .975rem; }
.stimme__quelle span { color: var(--tinte-3); }

.stimme--gross {
  background: var(--nacht);
  border-color: var(--nacht-linie);
  color: var(--nacht-text);
  transform: none;
  padding: clamp(1.8rem, 4vw, 3.2rem);
  overflow: hidden;
  isolation: isolate;
}
.stimme--gross:hover { transform: translateY(-3px); }
.stimme--gross::before {
  content: '”';
  position: absolute;
  right: .04em;
  bottom: -.34em;
  z-index: 0;
  pointer-events: none;
  font-family: var(--schrift-titel);
  font-size: clamp(8rem, 16vw, 13rem);
  line-height: 1;
  color: var(--signal);
  opacity: .17;
}
.stimme--gross > * { position: relative; z-index: 1; }
.stimme--gross p {
  font-family: var(--schrift-titel);
  font-size: clamp(1.2rem, .98rem + 1.05vw, 1.95rem);
  line-height: 1.38;
  font-weight: 420;
  letter-spacing: -.012em;
  color: var(--nacht-text);
  max-width: 40ch;
}
.stimme--gross .stimme__quelle { border-top-color: var(--nacht-linie); }

/* Das Portraet der Person, die das Zitat gegeben hat. */
.stimme__portraet { margin: 0; }
.stimme__portraet picture { display: block; }
.stimme__portraet img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rund);
  border: 1px solid var(--nacht-linie);
  /* Etwas zurueckgenommen, damit das Zitat die Hauptsache bleibt */
  filter: saturate(.9) brightness(.94);
}

/* Bis zum Zweispalter: kleines Bild links neben dem Namen. */
@media (max-width: 61.999em) {
  .stimme--mit-bild .stimme__quelle {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    column-gap: 1.1rem;
    align-items: start;
  }
  .stimme--mit-bild .stimme__wer { grid-column: 2; }
  .stimme--mit-bild .stimme__portraet { grid-column: 1; grid-row: 1; }
}

/* Ab hier steht die Zuschreibung als Randnotiz neben dem Zitat, das
   Portraet darunter – sonst bliebe die rechte Hälfte des Kastens leer. */
@media (min-width: 62em) {
  .stimme--gross {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 3.5rem);
    align-items: start;
  }
  .stimme--gross p { max-width: none; }
  .stimme--gross .stimme__quelle {
    grid-column: 2;
    grid-row: 1 / span 9;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3vw, 2.2rem);
    margin-top: .35rem;
    padding: 0;
    border-top: 0;
  }
  .stimme--gross .stimme__wer {
    padding: .1rem 0 .1rem 1.3rem;
    border-left: 2px solid var(--glut);
  }
  .stimme--gross .stimme__portraet { max-width: 17rem; }
  /* Wo ein Bild steht, tritt das Anführungszeichen zurück. */
  .stimme--mit-bild::before { opacity: .07; }
}
.stimme--gross .stimme__quelle b { color: var(--glut); }
.stimme--gross .stimme__quelle span { color: var(--nacht-leise); }
.stimme--gross .stimme__quelle a { color: var(--glut); }

/* Randspalte des grossen Zitats: haelt fest, zu welcher Arbeit es gehoert */
.stimme--gross .stimme__route {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--nacht-linie);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .25rem .9rem;
  font-family: var(--schrift-mono);
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--nacht-leise);
  max-width: none;
}
.stimme--gross .stimme__route b {
  display: inline;
  font-size: inherit;
  font-weight: 700;
  color: var(--nacht-text);
}
.stimme--gross .stimme__was {
  margin-top: .4rem;
  font-family: var(--schrift-mono);
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--glut);
  max-width: none;
}
.stimme--gross .pfeil-verweis { margin-top: var(--s-4); font-size: .95rem; }

/* Steht der Verweis allein darin, soll er nicht als Fußnote wirken */
.stimmen-hinweis .pfeil-verweis { font-size: 1rem; }
.stimmen-hinweis {
  margin-top: var(--s-5);
  font-size: .875rem;
  color: var(--kontext-leise);
  max-width: var(--mass);
}

/* Etappen (Ablauf) */
.etappen {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--s-5);
  counter-reset: etappe;
  position: relative;
}
@media (min-width: 52em) {
  .etappen { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
  .etappen::before {
    content: '';
    position: absolute;
    top: 1.35rem; left: 6%; right: 6%;
    height: 2px;
    background-image: linear-gradient(90deg, var(--sand-linie) 60%, transparent 0);
    background-size: 10px 2px;
    background-repeat: repeat-x;
  }
  .auf-nacht .etappen::before { background-image: linear-gradient(90deg, var(--nacht-linie) 60%, transparent 0); }
}
.etappe { position: relative; padding-top: 3.6rem; }
.etappe::before {
  counter-increment: etappe;
  content: counter(etappe);
  position: absolute;
  top: 0; left: 0;
  width: 2.7rem; height: 2.7rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--kontext-flaeche);
  border: 2px solid var(--signal);
  color: var(--kontext-akzent);
  font-family: var(--schrift-mono);
  font-weight: 700;
  font-size: .9rem;
}
.etappe h3 { font-size: 1.34rem; margin-bottom: var(--s-3); }
.etappe p { font-size: .975rem; color: var(--kontext-leise); }

/* Aufruf-Abschnitt */
.aufruf {
  position: relative;
  background: var(--nacht);
  color: var(--nacht-text);
  overflow: hidden;
  isolation: isolate;
}
.aufruf::after {
  content: '';
  position: absolute;
  inset: auto 0 -50% 0;
  height: 100%;
  z-index: -1;
  background: radial-gradient(70% 100% at 50% 100%,
    rgba(255, 106, 43, .3) 0%, rgba(255, 63, 108, .14) 38%, transparent 70%);
}
.aufruf__innen {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}
@media (min-width: 56em) {
  .aufruf__innen { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
}
.aufruf h2 { max-width: 16ch; }
.aufruf p { color: var(--nacht-leise); margin-top: var(--s-4); max-width: 44ch; }
.aufruf__daten {
  display: grid;
  gap: var(--s-4);
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--nacht-linie);
  border-radius: var(--rund-gr);
  background: rgba(255, 255, 255, .025);
}
.aufruf__daten a {
  color: var(--nacht-text);
  /* Leise, aber erkennbar: heller Text, Unterstrich in der Akzentfarbe */
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--glut) 50%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  display: block;
  /* Tippfläche auf 44 px bringen, ohne den Rhythmus zu ändern */
  padding-block: .45rem;
  margin-block: -.45rem;
}
.aufruf__daten a:hover { color: var(--glut); text-decoration-color: currentColor; }
.aufruf__daten dt {
  font-family: var(--schrift-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nacht-leise);
  margin-bottom: .2rem;
}
.aufruf__daten dd { margin: 0; font-size: 1.05rem; font-weight: 550; }

/* ---------------------------------------------------------------------
   10  Seiteninhalte
   --------------------------------------------------------------------- */

/* Mitlaufendes Verzeichnis auf Impressum und Datenschutz */
.seiten-index ol {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  counter-reset: index;
  display: grid;
  gap: .1rem;
}
.seiten-index li { counter-increment: index; }
.seiten-index a {
  display: block;
  padding: .42rem 0 .42rem 2.1rem;
  position: relative;
  font-size: .925rem;
  line-height: 1.35;
  color: var(--kontext-leise);
  text-decoration: none;
  border-radius: var(--rund-kl, 6px);
}
.seiten-index a::before {
  content: counter(index, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .42rem;
  font-family: var(--schrift-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--kontext-linie);
  transition: color var(--tempo) var(--kurve);
}
.seiten-index a:hover,
.seiten-index a:focus-visible { color: var(--kontext-text); }
.seiten-index a:hover::before { color: var(--kontext-akzent); }
@media (max-width: 57.999em) {
  /* Auf dem Telefon kompakt, damit der Text nicht zu weit nach unten rutscht */
  .seiten-index ol { gap: 0; }
  .seiten-index a { padding-block: .3rem; font-size: .875rem; }
}

.inhalt { max-width: var(--mass); }
.inhalt > * + * { margin-top: var(--s-5); }
.inhalt h2 { margin-top: var(--s-8); }
.inhalt h3 { margin-top: var(--s-7); }
.inhalt h2 + p, .inhalt h3 + p, .inhalt h2 + ul, .inhalt h3 + ul { margin-top: var(--s-4); }
.inhalt ul, .inhalt ol { padding-left: 1.2rem; }
/* Hakenlisten bringen ihren eigenen Einzug mit */
.inhalt .haken { padding-left: 0; }
/* Erste Überschrift einer Spalte startet buendig mit der Nachbarspalte */
.inhalt > :first-child { margin-top: 0; }
.inhalt li + li { margin-top: var(--s-2); }
.inhalt strong { font-weight: 650; }

.haken {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--s-3);
}
.haken li {
  position: relative;
  padding-left: 2rem;
}
.haken li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: 1.1rem; height: 2px;
  border-radius: 2px;
  background: var(--kontext-akzent);
}
/* Was NICHT gemacht wird: derselbe Strich, gekreuzt und zurückgenommen. */
.haken--minus li::before,
.haken--minus li::after {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: 1.05rem; height: 2px;
  border-radius: 2px;
  background: var(--kontext-leise);
  opacity: .75;
}
.haken--minus li::before { transform: rotate(45deg); }
.haken--minus li::after  { transform: rotate(-45deg); }

/* Zwei Spalten für längere Texte */
.text-raster {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 58em) {
  .text-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; }
  /* Zwei gleichwertige Spalten, etwa fuer ein Gegenueber */
  .text-raster--gleich { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* Bewusst nicht klebend: Bei langen Textspalten stünde sonst eine
     Überschrift neben Inhalten, zu denen sie nicht gehört. */
  .text-raster__seite { align-self: start; }
  /* Ausnahme: Wo der Block genau ein Thema hat und die Gegenspalte lang
     ist – etwa die Telefonnummer neben dem Formular – darf er mitlaufen. */
  .text-raster__seite--haftet { position: sticky; top: 7rem; }
}

.merkkasten {
  padding: clamp(1.3rem, 3vw, 1.9rem);
  border-radius: var(--rund);
  background: var(--papier-2);
  border-left: 3px solid var(--signal);
}
.merkkasten p { font-size: 1rem; color: var(--tinte-2); }
.merkkasten p + p { margin-top: var(--s-3); }
.merkkasten strong { color: var(--tinte); }

/* FAQ */
.faq { display: grid; gap: var(--s-3); }
.faq details {
  border: 1px solid var(--sand-linie);
  border-radius: var(--rund);
  background: var(--papier);
  overflow: hidden;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.05rem 3rem 1.05rem 1.25rem;
  font-weight: 620;
  font-size: 1.0625rem;
  position: relative;
  min-height: 48px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  position: absolute;
  right: 1.25rem; top: 50%;
  width: .7rem; height: .7rem;
  border-right: 2px solid var(--signal-tief);
  border-bottom: 2px solid var(--signal-tief);
  transform: translateY(-65%) rotate(45deg);
  transition: transform var(--tempo) var(--kurve);
}
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq summary:hover { background: var(--papier-2); }
.faq__text { padding: 0 1.25rem 1.25rem; color: var(--tinte-2); font-size: 1rem; }
.faq__text > * + * { margin-top: var(--s-3); }

/* Projektseiten: Bildblöcke */
.schau {
  display: grid;
  gap: var(--s-5);
  align-items: start;
}
@media (min-width: 56em) {
  .schau { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); align-items: end; }
}
.schau__gross, .schau__klein {
  border-radius: var(--rund);
  overflow: hidden;
  border: 1px solid var(--sand-linie);
  background: var(--nacht-2);
  box-shadow: var(--schatten);
}
.schau__klein { max-width: 15rem; margin-inline: auto; }
.bildunterschrift {
  margin-top: var(--s-3);
  font-family: var(--schrift-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kontext-leise);
}

.fakten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s-4) var(--s-5);
  padding: clamp(1.3rem, 3vw, 1.8rem);
  border: 1px solid var(--sand-linie);
  border-radius: var(--rund);
  background: var(--papier);
}
.fakten dt {
  font-family: var(--schrift-mono);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tinte-3);
  margin-bottom: .15rem;
}
.fakten dd { margin: 0; font-weight: 550; }
.fakten dd a {
  color: var(--kontext-akzent);
  /* Tippflaeche vergroessern, ohne den Zeilenfall zu aendern */
  display: inline-block;
  padding-block: .55rem;
  margin-block: -.55rem;
}

/* ---------------------------------------------------------------------
   11  Formular
   --------------------------------------------------------------------- */

.formular { display: grid; gap: var(--s-5); max-width: 34rem; }
.feld { display: grid; gap: .45rem; }
.feld label { font-weight: 600; font-size: .95rem; }
.feld__hinweis { font-size: .85rem; color: var(--tinte-3); }

.feld input,
.feld textarea,
.feld select {
  font: inherit;
  font-size: 1rem;
  color: var(--tinte);
  background: var(--papier);
  border: 1px solid var(--sand-linie);
  border-radius: var(--rund-kl);
  padding: .85rem 1rem;
  min-height: 48px;
  width: 100%;
  transition: border-color var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve);
}
.feld textarea { min-height: 9.5rem; resize: vertical; line-height: 1.6; }
.feld input:hover, .feld textarea:hover { border-color: var(--tinte-3); }
.feld input:focus, .feld textarea:focus {
  outline: none;
  border-color: var(--signal-tief);
  box-shadow: 0 0 0 3px rgba(168, 58, 8, .16);
}
.feld--fehler input, .feld--fehler textarea { border-color: #B3261E; }
.feld__fehler {
  font-size: .875rem;
  color: #B3261E;
  font-weight: 550;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.feld__fehler::before { content: '!'; display: grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: #B3261E; color: #fff; font-size: .78rem; font-weight: 700; flex: none; }

.honigtopf {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.einwilligung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
  align-items: start;
  font-size: .95rem;
  color: var(--tinte-2);
}
.einwilligung input {
  width: 1.3rem; height: 1.3rem;
  min-height: 0;
  margin-top: .18rem;
  accent-color: var(--signal-tief);
  padding: 0;
}

.meldung {
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  border-radius: var(--rund);
  border: 1px solid;
  display: grid;
  gap: var(--s-3);
}
.meldung h2 { font-size: 1.35rem; }
.meldung--gut  { background: #EDF7EF; border-color: #A8D5B2; color: #14351E; }
.meldung--gut h2 { color: #14351E; }
.meldung--schlecht { background: #FDF0EF; border-color: #E5B4B0; color: #4A1512; }
.meldung--schlecht h2 { color: #4A1512; }
.meldung a { color: inherit; font-weight: 650; }

/* ---------------------------------------------------------------------
   12  Fußzeile
   --------------------------------------------------------------------- */

.fuss {
  position: relative;
  background: var(--nacht);
  color: var(--nacht-text);
  padding-block: 0 var(--s-6);
  overflow: hidden;
  isolation: isolate;
}
.fuss__horizont {
  position: relative;
  height: clamp(90px, 12vw, 150px);
  color: var(--nacht-linie);
  isolation: isolate;
}
.fuss__horizont svg { width: 100%; height: 100%; }
/* Das Licht liegt hinter der Sonne, nicht in ihr – wie oben im Held. */
.fuss__horizont::before {
  content: '';
  position: absolute;
  inset: -7rem 0 55% 0;
  z-index: -2;
  background: radial-gradient(36% 130% at 50% 100%,
    rgba(255, 106, 43, .24) 0%,
    rgba(255, 63, 108, .09) 44%,
    transparent 74%);
}
/* Die Sonne steht als flache Scheibe auf dem Scheitel der Kurve (y = 54
   von 120, also 55 % von unten). Die Linie zieht vor ihr durch. */
.fuss__sonne {
  position: absolute;
  left: 50%;
  bottom: 55%;
  width: clamp(74px, 11vw, 128px);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  border-radius: 100vmax 100vmax 0 0;
  background: var(--signal);
  z-index: -1;
}

.fuss__raster {
  display: grid;
  gap: var(--s-6);
  padding-block: var(--s-7) var(--s-6);
}
@media (min-width: 46em) { .fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .fuss__raster { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--s-7); } }

.fuss__wort {
  font-family: var(--schrift-titel);
  font-size: clamp(2rem, 5vw, 2.7rem);
  font-weight: 640;
  line-height: .96;
  letter-spacing: -.028em;
  margin-bottom: var(--s-4);
}
.fuss__wort em {
  font-style: italic;
  font-variation-settings: 'opsz' 14, 'SOFT' 60, 'WONK' 1;
  color: var(--glut);
}
.fuss__satz { color: var(--nacht-leise); font-size: .975rem; max-width: 34ch; }
.fuss__kontakt { list-style: none; padding: 0; margin-top: var(--s-5); display: grid; gap: var(--s-3); font-size: .975rem; }
.fuss__kontakt a {
  color: var(--nacht-text);
  /* Leise, aber erkennbar: heller Text, Unterstrich in der Akzentfarbe */
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--glut) 50%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
.fuss__kontakt a:hover { color: var(--glut); text-decoration-color: currentColor; }
.fuss__kontakt address { font-style: normal; color: var(--nacht-leise); line-height: 1.5; }

.fuss__titel {
  font-family: var(--schrift-mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nacht-leise);
  margin-bottom: var(--s-4);
}
.fuss__spalte ul { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.fuss__spalte a {
  color: var(--nacht-text);
  text-decoration: none;
  font-size: .975rem;
  display: inline-block;
  padding-block: .15rem;
}
.fuss__spalte a:hover { color: var(--glut); }

.fuss__leiste {
  border-top: 1px solid var(--nacht-linie);
  padding-top: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  justify-content: space-between;
  font-size: .85rem;
  color: var(--nacht-leise);
}

/* ---------------------------------------------------------------------
   13  Bewegung, Osterei, reduzierte Bewegung
   --------------------------------------------------------------------- */

/* Einblenden beim Scrollen – ohne JS bleibt alles sichtbar */
.js .auf-blende {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .45s var(--kurve), transform .45s var(--kurve);
}
.js .auf-blende.ist-da { opacity: 1; transform: none; }
.js .auf-blende:nth-child(2) { transition-delay: .07s; }
.js .auf-blende:nth-child(3) { transition-delay: .14s; }
.js .auf-blende:nth-child(4) { transition-delay: .21s; }

/* Osterei „Morgenrot“: Das Wort aufbruch tippen */
html.morgenrot {
  --nacht:       #2B1330;
  --nacht-2:     #3A1A39;
  --nacht-3:     #4B2340;
  --nacht-linie: #5C2E47;
  --nacht-leise: #E2BCB8;
}
html.morgenrot .aufruf::after { opacity: 1.4; }
/* Das Morgenlicht am Horizont wird kraeftiger, die Sonne heller. */
html.morgenrot .held__horizont::before { opacity: 1; }
html.morgenrot .held__sonne { background: var(--glut); }
html.morgenrot .fuss__sonne { background: var(--glut); bottom: 62%; }
html.morgenrot .kopf::before { background: color-mix(in srgb, #2B1330 86%, transparent); }

.ruf {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%) translateY(140%);
  z-index: 200;
  background: var(--nacht);
  color: var(--nacht-text);
  border: 1px solid var(--nacht-linie);
  border-radius: 999px;
  padding: .7rem 1.3rem;
  font-size: .925rem;
  box-shadow: var(--schatten-gr);
  transition: transform .45s var(--kurve);
  max-width: calc(100% - 2rem);
  text-align: center;
}
.ruf.ist-da { transform: translateX(-50%) translateY(0); }
.ruf b { color: var(--glut); font-weight: 650; }

/* Papierflieger */
.flieger {
  position: fixed;
  z-index: 70;
  width: 26px;
  color: var(--glut);
  pointer-events: none;
  will-change: transform;
}

/* 404 */
.fehlerseite { text-align: center; }
.fehlerseite .ziffern {
  font-family: var(--schrift-titel);
  font-size: clamp(5rem, 22vw, 12rem);
  font-weight: 640;
  line-height: .9;
  letter-spacing: -.04em;
  background: linear-gradient(120deg, var(--morgen), var(--signal) 50%, var(--glut));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--s-4);
}
.fehlerseite .knopf-reihe { justify-content: center; }
.fehlerseite .lead { margin-inline: auto; }

/* ---------------------------------------------------------------------
   14  Feinheiten

   Kleinkram, den man einzeln nicht sieht und zusammen schon:
   Silbentrennung fuer lange deutsche Woerter, gedrueckte Knoepfe,
   Ziffern in gleicher Breite, eine brauchbare Druckfassung.
   --------------------------------------------------------------------- */

/* Deutsche Komposita brechen auf schmalen Bildschirmen sonst haesslich.
   Nur im Fliesstext – Ueberschriften trennen wir von Hand. */
@media (max-width: 52em) {
  .inhalt p, .inhalt li,
  .lead, .leistung p, .projekt__text p, .stimme p,
  .etappe p, .faq__text p, .merkkasten p, .fakten dd {
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
  }
}

/* Letzte Zeilen mit einem einzelnen Wort vermeiden, wo der Browser es kann */
p, li, figcaption, dd { text-wrap: pretty; }
h1, h2, h3, .abschnitt__kopf h2 { text-wrap: balance; }

/* Sehr lange Adressen und Dateinamen duerfen brechen statt auszubrechen */
a[href^="mailto:"], a[href^="http"], code { overflow-wrap: anywhere; }

/* Ziffern in Tabellen, Fahrplanzeilen und Kontaktdaten laufen gleich breit */
.projekt__route, .stimme__route, .fakten dd, .tafel,
.aufruf__daten dd, .fuss__kontakt {
  font-variant-numeric: tabular-nums;
}

/* Gedrueckt: alles gibt kurz nach. Ohne Uebergang, damit es sofort wirkt. */
.knopf:active { transform: translateY(1px) scale(.985); transition-duration: 0s; }
.leistung:active, .projekt:active, .stimme:active,
.tafel__brett:active { transform: scale(.98); }

/* Der Sprunglink soll auch gut aussehen, wenn ihn mal jemand sieht */
.sprunglink:focus-visible { outline-offset: 4px; }

/* ---------------------------------------------------------------------
   15  Druck

   Wer die Kontaktseite oder das Impressum ausdruckt, soll ein sauberes
   Blatt bekommen: keine Navigation, keine Farbflaechen, Verweise
   ausgeschrieben.
   --------------------------------------------------------------------- */
@media print {
  :root {
    --kontext-flaeche: #fff;
    --kontext-text: #111;
    --kontext-leise: #444;
    --kontext-akzent: #111;
    --kontext-linie: #bbb;
  }
  .auf-nacht, .held, .seitenkopf, .aufruf, .fuss, .stimme--gross {
    --kontext-flaeche: #fff;
    --kontext-text: #111;
    --kontext-leise: #444;
    --kontext-akzent: #111;
    --kontext-linie: #bbb;
  }
  html, body { background: #fff !important; color: #111 !important; }
  body { font-size: 11pt; }

  .kopf, .fortschritt, .nav, .held__horizont, .tafel,
  .fuss__horizont, .aufruf .knopf-reihe, .sprunglink, .ruf, .flieger,
  .projekt .pfeil-verweis, .faq summary::after { display: none !important; }

  .held, .seitenkopf, .abschnitt, .aufruf, .fuss {
    background: #fff !important;
    color: #111 !important;
    padding-block: .6cm !important;
  }
  .held::before, .held::after, .seitenkopf::after,
  .stimme--gross::before { display: none !important; }

  .stimme, .leistung, .projekt, .merkkasten, .fakten, .formular {
    border: 1px solid #ccc !important;
    background: #fff !important;
    box-shadow: none !important;
    transform: none !important;
  }

  a { color: #111 !important; text-decoration: underline; }
  /* Ziel eines Verweises mitdrucken – auf Papier hilft die Adresse */
  .inhalt a[href^="http"]::after,
  .fuss a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }

  h1, h2, h3 { break-after: avoid; }
  p, li, blockquote, .leistung, .projekt { break-inside: avoid; }
  img { max-width: 100% !important; }

  /* Aufklapper auf Papier immer offen – sonst fehlen die Antworten */
  .faq details > *:not(summary) {
    display: block !important;
    content-visibility: visible !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .auf-blende { opacity: 1; transform: none; }
  .stimme:nth-child(odd), .stimme:nth-child(even) { transform: none; }
  .flieger { display: none; }
}