/* ============================================================
   Ugandahilfe Verl – Redaktionelles Dossier
   CI: Uganda-Gelb #FCDD00 (nur Handlungen), Tintenblau #1E3A5F
   Sektionen werden über eine Hintergrund-Leiter getrennt:
   weiss → hell → tief → gruen → blau
   ============================================================ */

@font-face {
  font-family: "Clash Grotesk";
  src: url("../fonts/ClashGrotesk-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Clash Grotesk";
  src: url("../fonts/ClashGrotesk-Medium.woff") format("woff");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Clash Grotesk";
  src: url("../fonts/ClashGrotesk-Semibold.woff") format("woff");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Clash Grotesk";
  src: url("../fonts/ClashGrotesk-Bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Hintergrund-Leiter */
  --weiss: #FFFFFF;
  --stufe-1: #F4F7FA;
  --stufe-2: #E5ECF3;
  --gruen: #E4F0E8;
  --blau: #1E3A5F;
  --blau-tief: #15293F;
  --flaeche: #FFFFFF;

  /* Schrift */
  --ink: #1E3A5F;
  --text: #253039;
  --muted: #576673;
  --auf-blau: #CFDDEC;

  /* Akzente */
  --gelb: #FCDD00;
  --rot: #C8102E;

  --linie: rgba(30, 58, 95, 0.16);
  --linie-stark: rgba(30, 58, 95, 0.85);
  --schatten: 0 20px 44px -26px rgba(18, 32, 48, 0.55);
  --schatten-klein: 0 10px 24px -16px rgba(18, 32, 48, 0.5);

  --mass: 66ch;
  --rand: clamp(1.25rem, 4vw, 3.25rem);
  --font: "Clash Grotesk", "Segoe UI", system-ui, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  scrollbar-color: rgba(30, 58, 95, 0.35) var(--stufe-1);
}
html::-webkit-scrollbar { width: 12px; }
html::-webkit-scrollbar-track { background: var(--stufe-1); }
html::-webkit-scrollbar-thumb { background: rgba(30, 58, 95, 0.35); border-radius: 6px; border: 3px solid var(--stufe-1); }
html::-webkit-scrollbar-thumb:hover { background: rgba(30, 58, 95, 0.55); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  overflow-x: clip;
  font-family: var(--font);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--weiss);
  caret-color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--gelb); color: #151412; }

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

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease-out;
}
/* Navigation und leiser Knopf haben senkrechten Innenabstand – dort hängt der
   Strich am Textkasten statt am Polsterkasten, sonst schwebt er über der Schrift.
   Beide sind block- bzw. flexartig, dort rechnet die Prozentbreite korrekt. */
.nav a, .btn-leise { background-origin: content-box; }

/* Beim Überfahren wird ein gelber Strich von links nach rechts gezogen –
   wie mit einem Textmarker. Ersetzt den früheren roten Hover.
   Knöpfe und Bildmarken bleiben ausgenommen, sie tragen eigene Flächen. */
a:not(.btn):not(.wortmarke):not(.skiplink):not(.avison):not(.karte):not(.weg):not(.sponsoren a),
.btn-leise,
.weg h3,
details.bericht summary .titel {
  background-image: linear-gradient(var(--gelb), var(--gelb));
  background-repeat: no-repeat;
  background-size: 0% 0.75em;
  background-position: 0 0.2em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.28s ease-out, color 0.15s ease-out;
}
a:not(.btn):not(.wortmarke):not(.skiplink):not(.avison):not(.karte):not(.weg):not(.sponsoren a):hover,
.weg:hover h3,
details.bericht summary:hover .titel {
  background-size: 100% 0.75em;
}
/* Das HTML-Attribut `hidden` muss gegen jede Anzeige-Regel gewinnen – sonst
   blendet z. B. `.nav .btn { display: … }` einen ausgeblendeten Knopf wieder ein. */
[hidden] { display: none !important; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Auf den dunkelblauen Flächen trägt Blau auf Blau nicht */
.flaeche-blau :focus-visible, .fuss :focus-visible { outline-color: var(--gelb); }

h1, h2, h3 {
  font-weight: 600;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.75rem, 7vw, 5.25rem); }
/* Jede Sektionsüberschrift ist gelb hinterlegt – wie mit dem Marker gezogen.
   Als dicke Unterstreichung mit negativem Abstand, damit der Strich jeder
   Zeile einzeln folgt (statt als Block über den ganzen Absatz zu laufen).
   Die Schrift wird darüber gezeichnet und bleibt lesbar. */
h2 {
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  margin-bottom: 0.55em;
  text-decoration-line: underline;
  text-decoration-color: var(--gelb);
  text-decoration-thickness: 0.72em;
  text-underline-offset: -0.5em;
  text-decoration-skip-ink: none;
}
/* Auf den blauen Bändern bleibt die Überschrift weiß und ohne Marker –
   dort trägt schon die Fläche selbst die Betonung. */
.flaeche-blau h2 { text-decoration-line: none; }
h3 { font-size: clamp(1.3rem, 2.1vw, 1.6rem); line-height: 1.22; letter-spacing: -0.02em; margin-bottom: 0.4em; }

p { max-width: var(--mass); }
p + p { margin-top: 0.9em; }
strong { font-weight: 600; }

.lead {
  font-size: clamp(1.15rem, 1.75vw, 1.375rem);
  line-height: 1.5;
  color: #3A4653;
  max-width: 54ch;
}

/* Versal-Kleinschrift für Datenfelder und Bildquellen */
.klein {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* ============================================================
   Flaggenkante & Kopf
   ============================================================ */
/* Durchlaufendes Streifenband in den Farben der ugandischen Flagge –
   schwarz, gelb, rot, eng getaktet und schräg gestellt. */
.flaggenkante {
  height: 7px;
  background: repeating-linear-gradient(
    -58deg,
    #151412 0 7px,
    var(--gelb) 7px 14px,
    var(--rot) 14px 21px
  );
}

.kopf {
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
  position: sticky;
  top: 0;
  z-index: 20;
}
.kopf-innen {
  max-width: 1240px;
  margin-inline: auto;
  padding: 0.95rem var(--rand);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.wortmarke {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}
.wortmarke:hover { color: var(--ink); }
.wortmarke img { width: 46px; height: 41px; object-fit: contain; }
.wortmarke b { display: block; font-size: 1.18rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.wortmarke span { display: block; font-size: 0.76rem; font-weight: 500; color: var(--muted); }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.75rem);
  flex-wrap: wrap;
}
.nav a {
  text-decoration: none;
  font-weight: 500;
  color: var(--ink);
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
}
.nav a[aria-current="page"] { font-weight: 600; border-bottom-color: var(--ink); }
/* Ein Knopf in der Navigation behält seine Knopf-Geometrie: `.nav a` ist
   spezifischer als `.btn` und würde sonst Polsterung, Kante und Hover kippen. */
.nav a.btn {
  padding: 0.6rem 1.15rem;
  border-bottom: none;
  font-size: 0.98rem;
}
.nav a.btn-gelb, .nav a.btn-gelb:hover { color: #151412; }

/* Menüknopf – nur auf schmalen Geräten sichtbar */
.menueknopf {
  display: none;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  background: none;
  border: 1px solid var(--linie);
  border-radius: 4px;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
}
.menueknopf:hover { border-color: var(--ink); }
.menueknopf .balken { display: grid; gap: 4px; width: 17px; }
.menueknopf .balken span {
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s ease-out, opacity 0.15s ease-out;
}
.menueknopf[aria-expanded="true"] .balken span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menueknopf[aria-expanded="true"] .balken span:nth-child(2) { opacity: 0; }
.menueknopf[aria-expanded="true"] .balken span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  /* Der Kopf klebt auch auf dem Handy – durch das eingeklappte Menü ist er
     dort nur eine Zeile hoch und nimmt kaum Platz weg. */
  .kopf-innen { flex-wrap: wrap; gap: 1rem; }
  .menueknopf { display: inline-flex; }
  .nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: 0.5rem 1rem;
  }
  .nav[data-offen="ja"] { display: flex; }
  .nav { max-height: calc(100vh - 5.5rem); overflow-y: auto; }
  .nav a {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--linie);
  }
  .nav a[aria-current="page"] { border-bottom-color: var(--linie); background-size: 100% 0.75em; }
  .nav a.btn { margin-top: 1rem; text-align: center; padding: 0.9rem 1.2rem; }
  .wortmarke span span { display: none; }
}

/* ============================================================
   Buttons – Gelb ausschließlich für Spendenwege
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--font);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  padding: 0.9rem 1.6rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease-out, transform 0.15s ease-out, box-shadow 0.15s ease-out;
}
.btn-gelb {
  background: var(--gelb);
  color: #151412;
  box-shadow: var(--schatten-klein);
}
.btn-gelb:hover {
  background: var(--gelb);
  color: #151412;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -14px rgba(18, 32, 48, 0.6);
}
.btn-gelb:active { transform: translateY(0); }
.btn-blau { background: var(--ink); color: #F2F7FC; }
.btn-blau:hover { background: #16304F; color: #FFFFFF; transform: translateY(-2px); }
.btn-weiss { background: var(--weiss); color: var(--ink); }
.btn-weiss:hover { background: #EDF3F9; color: var(--ink); transform: translateY(-2px); }
.btn-leise {
  background: transparent;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 5px;
  padding-inline: 0.3rem;
}
.btn-leise:hover { background-size: 100% 0.75em; }

/* ============================================================
   Flächen (Hintergrund-Leiter) & Raster
   ============================================================ */
.flaeche-weiss { --flaeche: var(--weiss); background: var(--weiss); }
.flaeche-hell  { --flaeche: var(--stufe-1); background: var(--stufe-1); }
.flaeche-tief  { --flaeche: var(--stufe-2); background: var(--stufe-2); }
.flaeche-gruen { --flaeche: var(--gruen); background: var(--gruen); }
.flaeche-blau  { --flaeche: var(--blau); background: var(--blau); color: var(--auf-blau); }

.flaeche-blau h1, .flaeche-blau h2, .flaeche-blau h3 { color: #FFFFFF; }
.flaeche-blau .lead { color: #C2D3E6; }
.flaeche-blau .klein { color: #9FB6CF; }
.flaeche-blau a:not(.btn) { color: #FFFFFF; }
.flaeche-blau a:not(.btn):hover { color: var(--gelb); }

.bahn { max-width: 1240px; margin-inline: auto; padding-inline: var(--rand); }
.sektion { padding-block: clamp(3.5rem, 8vw, 7rem); }
.sektion-schmal { padding-block: clamp(2.5rem, 5vw, 4rem); }

.spalten {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  /* Ohne min-width:0 macht ein langer Wert wie die IBAN die Spalte breiter
     als den Bildschirm – Rasterkinder haben sonst min-width:auto. */
  gap: clamp(1.75rem, 3.5vw, 3.5rem);
  align-items: start;
}
.spalten > * { min-width: 0; }
.spalten-gleich { align-items: stretch; }
.s-4 { grid-column: span 4; }
.s-5 { grid-column: span 5; }
.s-6 { grid-column: span 6; }
.s-7 { grid-column: span 7; }
.s-8 { grid-column: span 8; }
.s-12 { grid-column: span 12; }
@media (max-width: 860px) {
  /* Eine einzige Spalte statt zwölf: bei zwölf Spuren würden allein die elf
     Abstände breiter als der Bildschirm und das Raster liefe über. */
  .spalten { grid-template-columns: 1fr; }
  .s-4, .s-5, .s-6, .s-7, .s-8, .s-12 { grid-column: auto; }
  /* Auf dem Handy stehen die Blöcke untereinander – sie brauchen mehr Luft
     zwischen sich als nebeneinander. */
  .spalten { gap: 2.75rem; }
  .sektion { padding-block: 3.5rem; }
  .sektion-schmal { padding-block: 2.5rem; }
  .bahn { padding-inline: 1.5rem; }
  h2 { margin-bottom: 0.7em; }
  .vorspann { margin-bottom: 2.25rem; }
}

/* ============================================================
   Held
   ============================================================ */
/* ============================================================
   Großer Kopfbereich – auf jeder Seite gleich aufgebaut:
   Foto oder Film über die volle Breite, Text unten links darüber.
   Der Abdunkler von unten sichert den Kontrast unabhängig davon,
   wie hell das Motiv an der jeweiligen Stelle gerade ist.
   ============================================================ */
.held {
  position: relative;
  isolation: isolate;
  min-height: clamp(24rem, 58vh, 34rem);
  display: grid;
  align-items: end;
  background: var(--blau);
  overflow: hidden;
}
.held-gross { min-height: clamp(28rem, 76vh, 44rem); }
.held-schlicht { min-height: clamp(14rem, 30vh, 20rem); }

.held-medium {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.held::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(9, 18, 30, 0.92) 0%,
    rgba(9, 18, 30, 0.82) 28%,
    rgba(9, 18, 30, 0.5) 60%,
    rgba(9, 18, 30, 0.24) 100%
  );
}
.held-schlicht::after { background: none; }

/* Als Rasterkind würde die Bahn durch ihre Auto-Ränder auf Inhaltsbreite
   schrumpfen – erst width:100% gibt ihr wieder die volle Bahnbreite. */
.held > .bahn { width: 100%; }
.held-inhalt {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  animation: aufblenden 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
/* Der Hinweiszettel sitzt oben rechts, der Text unten links. */
.held-zettel { grid-row: 1; justify-self: end; align-self: start; width: min(23rem, 100%); }
.held-zettel:empty { display: none; }
/* Zeile 2 ist die dehnbare – so steht der Text immer am unteren Rand,
   ob darüber ein Zettel hängt oder nicht. */
.held-text { grid-row: 2; align-self: end; }
@media (max-width: 860px) {
  .held-zettel { justify-self: stretch; }
}
.held h1 { color: #FFFFFF; max-width: 17ch; margin-bottom: 0.4em; }
.held .lead { color: #DDE7F1; max-width: 52ch; margin-bottom: 0; }
.held .held-aktionen { margin-top: 2rem; }
.held .btn-leise { color: #FFFFFF; }
.held .btn-leise:hover { color: var(--gelb); }
.held h1 { max-width: 14ch; margin-bottom: 0.4em; }
.held .lead { margin-bottom: 2rem; }
.held-aktionen { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.held-inhalt { animation: aufblenden 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards; }

@keyframes aufblenden {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes bildauf {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* ============================================================
   Bilder – dokumentarisch, ohne Deko-Rahmen
   ============================================================ */
/* Bilder sitzen auf einem weissen Passepartout mit gelber Fusskante –
   das ist der Ort, an dem das CI-Gelb als Flaeche wiederkehrt. */
.bild {
  background: var(--weiss);
  padding: 10px 10px 0;
  border: 1px solid var(--linie);
  border-bottom: 5px solid var(--gelb);
  border-radius: 3px;
}
.bild img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  margin-bottom: 10px;
}
/* Hochformat-Porträts behalten ihre Proportion */
.bild-hoch img { aspect-ratio: 4 / 5; }

/* Vollbreites Bildband */
.bildband img, .bildband video {
  display: block;
  width: 100%;
  height: clamp(300px, 40vw, 520px);
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  background: var(--blau);
}

/* ============================================================
   Hinweiszettel – der gelbe Aushang im Kopf der Startseite.
   Wird von assets/js/main.js aus inhalte/hinweis.json erzeugt und
   ist nur da, wenn der Verein ihn in der Bearbeiten-Seite anschaltet.
   ============================================================ */
.hinweiszettel {
  background: var(--gelb);
  color: #151412;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: 3px;
  transform: rotate(-1.4deg);
  box-shadow: 0 16px 34px -20px rgba(18, 30, 46, 0.6);
  animation: zettel-an 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards;
}
.hinweiszettel h2 {
  color: #151412;
  font-size: clamp(1.3rem, 2.1vw, 1.6rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin-bottom: 0.4em;
}
.hinweiszettel p { color: #2A2620; font-size: 1rem; line-height: 1.5; max-width: none; }
.hinweiszettel .zettel-datum {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #4A4133;
  margin-top: 0.9rem;
}
.hinweiszettel a {
  display: inline-block;
  margin-top: 1rem;
  color: #151412;
  font-weight: 600;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.hinweiszettel a:hover { color: #151412; text-decoration-thickness: 3px; }
.hinweiszettel a:focus-visible { outline: 2px solid #151412; outline-offset: 3px; }
@keyframes zettel-an {
  from { opacity: 0; transform: rotate(-1.4deg) translateY(-10px); }
  to { opacity: 1; transform: rotate(-1.4deg) translateY(0); }
}
@media (max-width: 860px) {
  .hinweiszettel { transform: rotate(-0.8deg); margin-top: 0.5rem; }
}

/* Pausetaste des Kopf-Videos */
.filmtaste {
  position: absolute;
  right: clamp(1rem, 3vw, 2.25rem);
  bottom: clamp(1rem, 3vw, 2.25rem);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  background: rgba(18, 30, 46, 0.7);
  color: #FFFFFF;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s ease-out, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.filmtaste:hover { background: rgba(18, 30, 46, 0.9); transform: scale(1.06); }
.filmtaste svg { width: 15px; height: 15px; }
.filmtaste:focus-visible { outline: 2px solid var(--gelb); outline-offset: 3px; }
.bildband-tief img { object-position: 50% 72%; }

/* ============================================================
   Aufruf-Band (aktueller Spendenaufruf)
   ============================================================ */
.aufruf {
  display: flex;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  flex-wrap: wrap;
}
.aufruf-text { flex: 1 1 34ch; }
.aufruf h2 { margin-bottom: 0.35em; }
.aufruf p { margin: 0; color: inherit; }
.aufruf .btn { flex-shrink: 0; }

/* ============================================================
   Route (Der Weg Ihrer Spende)
   ============================================================ */
.route {
  list-style: none;
  counter-reset: station;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
}
.route li {
  counter-increment: station;
  position: relative;
  padding-top: 3.5rem;
}
.route li::before {
  content: counter(station);
  position: absolute;
  top: 0;
  left: 0;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--flaeche);
  color: var(--ink);
  font-weight: 600;
  font-size: 1.1rem;
  display: grid;
  place-items: center;
  z-index: 1;
}
.route li::after {
  content: "";
  position: absolute;
  top: 1.3rem;
  left: 3.1rem;
  right: -1.5rem;
  border-top: 1px solid var(--linie-stark);
  opacity: 0.35;
}
.route li:last-child::after { display: none; }
.route h3 { font-size: 1.2rem; margin-bottom: 0.3em; }
.route p { font-size: 0.98rem; line-height: 1.55; }
@media (max-width: 860px) {
  .route { grid-template-columns: 1fr; gap: 1.9rem; }
  .route li { padding-top: 0; padding-left: 4rem; min-height: 2.6rem; }
  .route li::after {
    top: 2.9rem;
    left: 1.3rem;
    right: auto;
    bottom: -1.9rem;
    border-top: none;
    border-left: 1px solid var(--linie-stark);
  }
}

/* ============================================================
   Wege (weiterführende Bereiche als linierte Zeilen)
   ============================================================ */
.wege { border-top: 2px solid var(--linie-stark); }
.weg {
  display: grid;
  grid-template-columns: minmax(170px, 250px) 1fr auto;
  gap: clamp(0.75rem, 2.5vw, 2rem);
  align-items: center;
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--linie);
  text-decoration: none;
  color: var(--text);
}
.weg h3 { font-size: 1.2rem; margin: 0; }
.weg p { margin: 0; max-width: 62ch; }
.weg .pfeil {
  width: 1.75rem;
  height: 1.75rem;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: background-color 0.2s ease-out, color 0.2s ease-out, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.weg .pfeil svg { width: 12px; height: 12px; }
.weg:hover { color: var(--text); }

.weg:hover .pfeil { background: var(--ink); color: var(--weiss); transform: translateX(3px); }
@media (max-width: 660px) {
  .weg { grid-template-columns: 1fr auto; row-gap: 0.35rem; }
  .weg h3 { grid-column: 1 / -1; }
}

/* ============================================================
   Register (Zahlen) & Fahrplan (Termine)
   ============================================================ */
.register-zeile {
  display: grid;
  grid-template-columns: minmax(110px, 170px) 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--linie);
  /* Die Zahl sitzt mittig zum gesamten Text rechts daneben – nicht auf der
     ersten Zeile, sonst hängt sie bei mehrzeiligen Einträgen oben. */
  align-items: center;
}
.register-zeile dt {
  font-weight: 600;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  letter-spacing: -0.035em;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.register-zeile dt small {
  display: block;
  line-height: 1.4;
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.register-zeile dd { margin: 0; max-width: var(--mass); }

.fahrplan { border-top: 2px solid var(--linie-stark); }
.fahrplan-zeile {
  display: grid;
  grid-template-columns: minmax(120px, 170px) 1fr auto;
  gap: clamp(0.75rem, 2.5vw, 2rem);
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--linie);
  align-items: baseline;
}
.fahrplan-zeile .datum { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fahrplan-zeile .ort { color: var(--muted); font-size: 0.92rem; text-align: right; white-space: nowrap; }
.fahrplan-liste .fahrplan-zeile { grid-template-columns: 1fr; }
@media (max-width: 660px) {
  .fahrplan-zeile { grid-template-columns: 1fr; gap: 0.15rem; }
  .fahrplan-zeile .ort { text-align: left; }
  .register-zeile { grid-template-columns: minmax(84px, 108px) 1fr; }
}

/* Aufklappbare Berichte */
details.bericht { border-bottom: 1px solid var(--linie); }
details.bericht summary {
  display: grid;
  grid-template-columns: minmax(120px, 170px) 1fr auto;
  gap: clamp(0.75rem, 2.5vw, 2rem);
  padding-block: 1.1rem;
  align-items: center;
  cursor: pointer;
  list-style: none;
}
details.bericht summary::-webkit-details-marker { display: none; }
details.bericht summary .datum { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
details.bericht summary .titel { font-weight: 500; justify-self: start; }
details.bericht summary .zeichen {
  width: 1.75rem;
  height: 1.75rem;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease-out, color 0.2s ease-out;
}
details.bericht summary .zeichen svg { width: 12px; height: 12px; }
details.bericht[open] summary .zeichen { transform: rotate(45deg); background: var(--ink); color: var(--weiss); }

details.bericht .bericht-inhalt { padding: 0 0 1.75rem; display: grid; gap: 0.55rem; }
details.bericht .bericht-meta { color: var(--muted); font-size: 0.95rem; }
@media (max-width: 660px) {
  details.bericht summary { grid-template-columns: 1fr auto; }
  details.bericht summary .datum { grid-column: 1 / -1; margin-bottom: -0.4rem; }
}

/* ============================================================
   Panels
   ============================================================ */
.panel {
  background: var(--weiss);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  border-radius: 6px;
  box-shadow: var(--schatten);
}
.panel-rand {
  background: var(--weiss);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  border-radius: 6px;
  border: 1px solid var(--linie);
}
/* Ein Panel-Kopf steht in der Gliederung mitunter als h2 (wenn kein
   Sektionskopf davor liegt), trägt aber immer die Title-Stufe. */
.panel h2, .panel-rand h2 {
  font-size: clamp(1.3rem, 2.1vw, 1.6rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin-bottom: 0.4em;
}
.flaeche-blau .panel, .flaeche-blau .panel-rand { color: var(--text); }
.flaeche-blau .panel h3, .flaeche-blau .panel-rand h3 { color: var(--ink); }
.flaeche-blau .panel a, .flaeche-blau .panel-rand a { color: var(--ink); }

/* Datenfelder (Bankverbindung, Kontakt) */
/* Schlichte Linkliste mit Haarlinien – z. B. auf der Fehlerseite */
.liste-schlicht { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.liste-schlicht li { padding-block: 0.6rem; border-bottom: 1px solid var(--linie); }
.liste-schlicht li:last-child { border-bottom: none; }
.liste-schlicht a { font-weight: 600; color: var(--ink); text-decoration: none; }

.datenliste .feld {
  display: grid;
  gap: 0.2rem;
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--linie);
}
.datenliste .feld:first-child { padding-top: 0; }
.datenliste .feld:last-child { border-bottom: none; padding-bottom: 0; }
.datenliste .wert {
  font-weight: 600;
  color: var(--ink);
  font-size: 1.08rem;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.kopier-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.kopierknopf {
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink);
  background: none;
  border: 1px solid var(--linie);
  border-radius: 4px;
  padding: 0.25rem 0.7rem;
  cursor: pointer;
  transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
}
.kopierknopf:hover { background: rgba(30, 58, 95, 0.07); border-color: var(--ink); }
.kopierknopf[data-kopiert="ja"] { background: var(--gruen); border-color: #2E7D4F; color: #1E5537; }

.hinweis {
  margin-top: 1.4rem;
  padding: 1rem 1.2rem;
  background: var(--gruen);
  border-radius: 4px;
  font-size: 0.95rem;
  max-width: none;
}

/* ============================================================
   Sponsoren
   ============================================================ */
.sponsoren {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}
.sponsoren figure a {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.sponsoren figure { transition: box-shadow 0.2s ease-out, transform 0.2s ease-out; }
.sponsoren figure:has(a:hover), .sponsoren figure:has(a:focus-visible) {
  box-shadow: 0 0 0 2px var(--gelb), var(--schatten-klein);
}
.sponsoren figure {
  background: var(--weiss);
  border-radius: 4px;
  padding: 1.1rem 1.3rem;
  display: grid;
  place-items: center;
  min-height: 104px;
  box-shadow: var(--schatten-klein);
}
.sponsoren img {
  filter: grayscale(1);
  opacity: 0.68;
  transition: filter 0.2s ease-out, opacity 0.2s ease-out;
  max-height: 66px;
  object-fit: contain;
}
.sponsoren figure:hover img { filter: grayscale(0); opacity: 1; }

/* ============================================================
   Projekt-Einträge
   ============================================================ */
.projekt {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3.5rem);
  align-items: start;
}
.projekt + .projekt {
  margin-top: clamp(2.75rem, 5vw, 4.5rem);
  padding-top: clamp(2.75rem, 5vw, 4.5rem);
  border-top: 1px solid var(--linie);
}
.projekt .projekt-text { grid-column: span 7; }
.projekt .projekt-bild { grid-column: span 5; }
.projekt.gespiegelt .projekt-text { order: 2; }
.projekt.gespiegelt .projekt-bild { order: 1; }
.projekt.breit .projekt-text { grid-column: span 12; }
.projekt.breit .projekt-text p { max-width: 78ch; }
.projekt h2 { font-size: clamp(1.55rem, 2.8vw, 2.1rem); margin-bottom: 0.4em; }
@media (max-width: 860px) {
  .projekt .projekt-text, .projekt .projekt-bild { grid-column: span 12; order: initial !important; }
}

/* Herausgestellte Zahl im Fließtext */
.kennzahl {
  display: block;
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.25em;
}

/* ============================================================
   Formular
   ============================================================ */
.formular { display: grid; gap: 1.15rem; }
.formular .reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 660px) { .formular .reihe { grid-template-columns: 1fr; } }
.formular label { display: grid; gap: 0.35rem; font-weight: 500; font-size: 0.95rem; color: var(--ink); }
.formular input, .formular textarea {
  font-family: var(--font);
  font-size: 1rem;
  color: var(--text);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 4px;
  padding: 0.8rem 0.95rem;
  transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.formular input::placeholder, .formular textarea::placeholder { color: var(--muted); }
.formular input:focus, .formular textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.15);
  outline: none;
}
.formular textarea { min-height: 9.5rem; resize: vertical; }

/* ============================================================
   Fuß
   ============================================================ */
.fuss { background: var(--blau-tief); color: var(--auf-blau); }
.fuss-innen {
  max-width: 1240px;
  margin-inline: auto;
  padding: clamp(2.75rem, 5vw, 4.5rem) var(--rand) clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.75rem, 3vw, 3rem);
}
.fuss h3 { color: #FFFFFF; font-size: 1.05rem; margin-bottom: 0.8rem; }
.fuss a { color: #E4EDF6; }
/* Auf dem gelben Markerstrich muss die Schrift dunkel werden – gelb auf gelb
   war beim Überfahren nicht mehr zu lesen. */
.fuss a:hover { color: #151412; }
/* Wie in der Navigation: `.fuss a` ist spezifischer als `.btn` und wuerde
   sonst dem gelben Knopf helle Schrift auf gelbem Grund verpassen. */
.fuss a.btn-gelb, .fuss a.btn-gelb:hover { color: #151412; }
.fuss a.btn-weiss, .fuss a.btn-weiss:hover { color: var(--ink); }
.fuss .fuss-marke { grid-column: span 4; }
.fuss .fuss-marke img { width: 54px; margin-bottom: 1rem; }
.fuss .fuss-marke p { font-size: 0.95rem; line-height: 1.65; }
.fuss nav { grid-column: span 3; }
.fuss .fuss-kontakt { grid-column: span 5; }
.fuss ul { list-style: none; display: grid; gap: 0.5rem; font-size: 0.98rem; }
.fuss address { font-style: normal; font-size: 0.98rem; line-height: 1.75; }
.fuss-schluss {
  border-top: 1px solid rgba(228, 237, 246, 0.2);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: 1.3rem;
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.88rem;
  color: #A6BCD4;
}
@media (max-width: 860px) {
  .fuss .fuss-marke, .fuss nav, .fuss .fuss-kontakt { grid-column: span 12; }
}

/* ============================================================
   Kleinigkeiten
   ============================================================ */
.fussnote { font-size: 0.95rem; color: var(--muted); }
.breit-voll { max-width: none; }
.ohne-linie-oben { border-top: none; }
.ohne-linie-unten { border-bottom: none; }
.formular-fehler { display: none; color: var(--rot); font-weight: 500; max-width: none; }
.formular-fehler[data-sichtbar="ja"] { display: block; }
.abstand-oben { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.vorspann { max-width: 58ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.leer-hinweis {
  padding: 1.6rem 1.75rem;
  background: var(--weiss);
  border-radius: 4px;
  border: 1px solid var(--linie);
  color: var(--muted);
  max-width: none;
}
.recht { max-width: 74ch; }
.recht h2 { font-size: clamp(1.3rem, 2.1vw, 1.6rem); margin-top: 2.25rem; }
.recht ul { padding-left: 1.3rem; margin-block: 0.6rem; }
.recht li { margin-bottom: 0.3rem; }

.skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gelb);
  color: #151412;
  padding: 0.6rem 1rem;
  font-weight: 600;
  z-index: 50;
}
.skiplink:focus { left: 0.5rem; top: 0.5rem; }

/* ============================================================
   Projekt-Kärtchen – die Übersicht auf /projekte
   ============================================================ */
.karten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.karte {
  display: flex;
  flex-direction: column;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--schatten-klein);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s ease-out, border-color 0.2s ease-out;
}
/* Beim Überfahren tritt die Karte hervor: die Haarlinie weicht dem Schatten. */
.karte:hover, .karte:focus-visible {
  transform: translateY(-3px);
  color: var(--text);
  border-color: transparent;
  box-shadow: 0 26px 52px -22px rgba(18, 32, 48, 0.7);
}
.karte img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.karte-text { padding: clamp(1.1rem, 2.5vw, 1.6rem); display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
/* Beim Überfahren einer Karte wird der Markerstrich hinter dem Titel gezogen.
   Die Überschrift läuft dafür `inline` in einem eigenen Block: nur so bekommt
   jede Zeile ihren eigenen Strich in genau ihrer Breite – ein Block bekäme
   einen durchgehenden Kasten über beide Zeilen. */
.karte h3 {
  display: inline;
  background-image: linear-gradient(var(--gelb), var(--gelb));
  background-repeat: no-repeat;
  background-size: 0% 0.75em;
  background-position: 0 0.2em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.3s ease-out;
}
.karte:hover h3, .karte:focus-visible h3 { background-size: 100% 0.75em; }
.karte-titel { margin: 0; }
.karte p { font-size: 0.98rem; line-height: 1.55; margin: 0; max-width: none; }
/* Zwei Karten nebeneinander – auto-fit lässt leere Spuren zusammenfallen,
   sodass sich zwei Karten die Breite teilen statt ein Viertel zu belegen. */
/* „So arbeiten wir“ – über die volle Breite statt in einer schmalen Spalte,
   damit die vier Grundsätze nebeneinander stehen und links kein Loch bleibt. */
/* Fotonachweis unter einer Bildstrecke */
.bildnachweis {
  margin-top: 0.9rem;
  font-size: 0.88rem;
  color: var(--muted);
  max-width: none;
}

.grundsaetze-titel {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: 0;
}
.grundsaetze {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}
.grundsatz {
  margin: 0;
  max-width: none;
  padding-top: 0.9rem;
  border-top: 4px solid var(--gelb);
  font-size: 0.98rem;
}
.grundsatz strong { display: block; margin-bottom: 0.25rem; color: var(--ink); }

.karten-zwei { grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); }

.karte-mehr {
  margin-top: auto;
  padding-top: 1rem;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--ink);
  background-image: linear-gradient(var(--gelb), var(--gelb));
  background-repeat: no-repeat;
  background-origin: content-box;
  background-size: 0% 0.75em;
  background-position: 0 0.2em;
  transition: background-size 0.3s ease-out;
}
/* Der zweite Strich setzt erst an, wenn der am Titel durchgezogen ist. */
.karte:hover .karte-mehr, .karte:focus-visible .karte-mehr {
  background-size: 100% 0.75em;
  transition-delay: 0.34s;
}
.karte-mehr svg { width: 12px; height: 12px; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }

.karte:hover .karte-mehr svg { transform: translateX(3px); }



/* Kärtchen ohne Foto: statt einer Lücke ein Zahlenfeld in CI-Gelb */
.karte-zahlfeld {
  aspect-ratio: 3 / 2;
  background: var(--gelb);
  color: #151412;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 1rem;
}
.karte-zahlfeld b {
  display: block;
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.karte-zahlfeld span {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ============================================================
   Bilderlauf – mehrere Ansichten desselben Themas.
   Ohne JavaScript bleibt es eine wischbare Reihe; mit JavaScript
   kommen Pfeiltasten und Punkte dazu.
   ============================================================ */
.lauf { position: relative; }
.lauf-spur {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  border: 1px solid var(--linie);
  border-bottom: 5px solid var(--gelb);
  border-radius: 3px;
  background: var(--weiss);
}
.lauf-spur::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .lauf-spur { scroll-behavior: auto; } }

.lauf-bild { scroll-snap-align: start; padding: 10px 10px 0; }
.lauf-bild img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.lauf-bild p {
  margin: 0;
  padding: 0.75rem 0 0.9rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 62ch;
}

/* Steuerung */
.lauf-leiste {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.lauf-taste {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: var(--weiss);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
}
.lauf-taste:hover:not(:disabled) { background: var(--ink); color: var(--weiss); }
.lauf-taste:disabled { opacity: 0.3; cursor: default; }
.lauf-taste svg { width: 13px; height: 13px; }
.lauf-punkte { display: flex; gap: 0.5rem; margin-right: auto; }
.lauf-punkt {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--linie);
  cursor: pointer;
  transition: background-color 0.15s ease-out, transform 0.15s ease-out;
}
.lauf-punkt[aria-current="true"] { background: var(--gelb); transform: scale(1.35); }
.lauf-punkt:hover { background: var(--ink); }
.lauf-stand { font-size: 0.88rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ============================================================
   Nachweis im Seitenfuß – Avison Studios
   Die beiden Augen der Marke liegen als eigene Ebene über dem Logo,
   damit sie sich beim Überfahren und beim Klick bewegen können.
   ============================================================ */
.fuss-avison {
  grid-column: 1 / -1;
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  padding-top: clamp(1.1rem, 2.2vw, 1.5rem);
  border-top: 1px solid rgba(228, 237, 246, 0.12);
  display: flex;
  justify-content: center;
}
.fuss a.avison, .fuss a.avison:hover {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.85rem;
  color: #A6BCD4;
  text-decoration: none;
}
.avison b { font-weight: 600; letter-spacing: 0.09em; color: #E4EDF6; }
.fuss a.avison:hover b { color: #FFFFFF; }
.avison-marke { position: relative; display: block; width: 2.15rem; flex: none; }
.avison-marke img { display: block; width: 100%; height: auto; }
.avison-augen { position: absolute; inset: 0; width: 100%; height: 100%; }
.avison .augen { transition: transform 0.12s ease-out; }

/* Der Nachweis bekommt beim Überfahren denselben Markerstrich wie jeder Link. */
.avison-text {
  background-image: linear-gradient(var(--gelb), var(--gelb));
  background-repeat: no-repeat;
  background-size: 0% 0.75em;
  background-position: 0 0.2em;
  transition: background-size 0.28s ease-out, color 0.15s ease-out;
}
.fuss a.avison:hover .avison-text,
.fuss a.avison:hover .avison-text b { color: #151412; }
.avison:hover .avison-text { background-size: 100% 0.75em; }

/* Beim Klick schaut die Marke einmal nach links und rechts, dann folgt der Sprung. */
@keyframes avison-blick {
  0%   { transform: translateX(0); }
  22%  { transform: translateX(-4.6px); }
  58%  { transform: translateX(4.6px); }
  100% { transform: translateX(0); }
}
.avison.schaut .augen { animation: avison-blick 0.85s ease-in-out; }
@media (prefers-reduced-motion: reduce) {
  .avison .augen, .avison.schaut .augen { transition: none; animation: none; transform: none; }
}