/* ==========================================================
   Seed Work — seed-work.de
   Ein Stylesheet für alle Seiten.

   TYPOGRAFIE
   Überschriften (h1–h4, auch Workshop-/Themen-/Terminblöcke)
   durchgängig IBM Plex Serif Semibold. Fließtext, Navigation,
   Metadaten und Buttons bleiben IBM Plex Sans.

   WORTMARKE
   Als Grafik nur noch im Startseiten-Opener. Dort ist sie über
   die Breite gesetzt (nicht über die Höhe), damit sie optisch
   etwa so breit steht wie der Button darunter. „Wo Seed Work
   ansetzt" (Teams) ist jetzt normale Serif-Schrift; in den
   grünen Boxen auf „Im Prozess" und „Über" steht „SEED WORK"
   weiterhin als Text (.marke-text), im Fließtext ohnehin.

   FARBE / CTA
   Alle Call-to-Action-Buttons: schwarzer Grund, grüne Schrift.
   Grüne Flächen markieren Struktur (Opener, Workshop-/Themen-/
   Terminboxen), nie Fließtext direkt auf Weiß.

   SYSTEMRAUSCHEN
   Liegt hinter allem, läuft endlos, ist links und rechts um
   denselben Rand eingerückt wie der Inhalt. Jeder Satz bleibt
   einzeilig; zu lange Sätze werden einzeln kleiner gesetzt,
   nicht umgebrochen. Auf Mobile dieselbe Logik, nur kleinere
   Grundgrößen.

   FOOTER
   Die Bodenmarke läuft im normalen Textfluss über die volle
   Breite, nichts wird beschnitten — die Fußzeile wächst um sie
   herum statt sie zu überlagern.
   ========================================================== */

@font-face{
  font-family:"IBM Plex Sans"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/IBMPlexSans-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Sans"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Serif"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/IBMPlexSerif-SemiBold.woff2") format("woff2");
}

:root{
  --gruen:#75FACF;
  --gruen-tief:#0A5B45;
  --tinte:#101413;
  --tinte-weich:#3D4442;
  --grau:#5A625F;
  --linie-kopf:#DCEEE6;
  --papier:#FAF9F6;
  --rauschen-farbe:rgba(16,20,19,.11);       /* Startseite: deutlich wahrnehmbar */
  --rauschen-farbe-textseite:rgba(16,20,19,.065); /* Unterseiten: zurückgenommen, aber lesbar */

  --sans:"IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --serif:"IBM Plex Serif", ui-serif, Georgia, serif;

  --fs-klein: 0.86rem;
  --fs-text:  1.05rem;
  --fs-kopf:  clamp(1.55rem, 1.15rem + 1.7vw, 2.25rem);

  --rand:clamp(1.25rem, 5vw, 5.5rem);
  --luft:clamp(3.5rem, 7vw, 7rem);
  --content-max:1180px;
}

*{ box-sizing:border-box; }

body{
  margin:0; background:var(--papier); color:var(--tinte);
  font-family:var(--sans); font-weight:400;
  font-size:var(--fs-text); line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  position:relative;
}
::selection{ background:var(--gruen); color:var(--tinte); }

a{ color:var(--gruen-tief); text-decoration:none; box-shadow:inset 0 -4px 0 var(--gruen); }
a:hover{ background:var(--gruen); color:var(--tinte); }
a:focus-visible, button:focus-visible{ outline:2px solid var(--gruen-tief); outline-offset:3px; }

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

p{ margin:0 0 1.2rem; max-width:66ch; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }

h1,h2,h3,h4{ margin:0; font-family:var(--serif); font-weight:600; text-wrap:balance; }
h1{
  font-size:clamp(2.4rem, 1.3rem + 4.2vw, 3.9rem);
  line-height:1.06; letter-spacing:-0.014em; max-width:none;
}
h2{ font-size:var(--fs-kopf); line-height:1.2; letter-spacing:-0.008em; max-width:none; }
h3{ font-size:var(--fs-kopf); line-height:1.24; letter-spacing:-0.006em; }
h4{ font-size:var(--fs-kopf); line-height:1.28; }

/* Desktop: die ausdrücklich genannten Seitentitel sollen einzeilig bleiben */
@media (min-width:700px){
  .einzeilig{ white-space:nowrap; }
}

/* ==========================================================
   Grundraster
   ========================================================== */
.seite{
  max-width:var(--content-max); margin:0 auto; padding:0 var(--rand);
  position:relative; z-index:1;
}
main{ min-width:0; scroll-margin-top:5rem; }
.text{ max-width:66ch; }

.auftakt{ padding-top:clamp(3.2rem,9vh,6.5rem); }
.auftakt::before{
  content:""; display:block; width:clamp(4.5rem,7vw,6.5rem); height:10px;
  background:var(--gruen); margin-bottom:clamp(1.5rem,3vw,2.2rem);
}
.kicker{ font-family:var(--sans); font-size:var(--fs-klein); color:var(--grau); letter-spacing:0.02em; margin:0 0 1.1rem; }

.abschnitt{ padding-top:var(--luft); }
.abschnitt-eng{ padding-top:clamp(2.2rem,4vw,3.4rem); }

.lead{ font-size:clamp(1.14rem,1.02rem + 0.6vw,1.4rem); line-height:1.42; max-width:42ch; }
.anspruch{ font-size:clamp(1.2rem,1.05rem + 0.85vw,1.55rem); line-height:1.34; max-width:32ch; margin:0 0 1.5rem; }
.neben{ font-family:var(--sans); font-size:var(--fs-klein); line-height:1.6; color:var(--tinte-weich); max-width:62ch; }

/* Dünne vertikale Linie — für Eckdaten/Rahmendaten, die bewusst
   KEINE grüne Fläche sind (nur Workshops/Themen/Termine werden
   als grüne Box gesetzt) */
.spur{
  border-left:6px solid var(--gruen);
  padding-left:clamp(1rem,2vw,1.6rem);
  max-width:calc(66ch + 6px + 1.6rem);
}
.spur + .spur{ margin-top:clamp(1.6rem,3vw,2.4rem); }
.spur > h3, .spur > h4{ margin-bottom:0.5rem; }
.spur > p:last-child{ margin-bottom:0; }

/* ==========================================================
   Kopf
   ========================================================== */
.kopf{
  position:sticky; top:0; z-index:40;
  background:var(--papier); border-bottom:1px solid var(--linie-kopf);
}
.kopf-innen{
  max-width:var(--content-max); margin:0 auto; padding:0.8rem var(--rand);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.wortmarke{ display:inline-block; box-shadow:none; line-height:0; }
.wortmarke:hover{ background:none; }
.wortmarke img{ display:block; height:26px; width:auto; }

.haupt{ display:flex; flex-wrap:wrap; gap:0.4rem clamp(0.9rem,2vw,1.8rem); }
.haupt a{ font-family:var(--sans); font-size:var(--fs-klein); color:var(--grau); box-shadow:none; padding-bottom:4px; }
.haupt a:hover{ background:none; color:var(--tinte); box-shadow:inset 0 -4px 0 var(--gruen); }
.haupt a[aria-current="page"]{ color:var(--tinte); box-shadow:inset 0 -4px 0 var(--gruen); }
.haupt[hidden]{ display:none; }
/* Kontakt steht im Fuß und hinter allen Anfrage-Buttons; im
   Desktop-Menü würde er die acht Inhaltsseiten nur verdichten.
   Auf Tablet/Mobile ist er im Klappmenü mit dabei. */
.haupt .nur-mobil{ display:none; }

.menue-knopf{
  display:none; align-items:center; justify-content:center;
  width:2.4rem; height:2.4rem; padding:0; margin:0;
  background:none; border:0; cursor:pointer; flex:none;
}
.menue-knopf .balken{ position:relative; width:1.5rem; height:2px; background:var(--gruen-tief); }
.menue-knopf .balken::before, .menue-knopf .balken::after{
  content:""; position:absolute; left:0; width:100%; height:2px; background:var(--gruen-tief);
}
.menue-knopf .balken::before{ top:-7px; }
.menue-knopf .balken::after{ top:7px; }

.spring{ position:absolute; left:-9999px; top:0; background:var(--gruen); color:var(--tinte); padding:0.6rem 1rem; z-index:99; }
.spring:focus{ left:1rem; top:1rem; }

/* ==========================================================
   Systemrauschen — fixierte Hintergrundebene, endlose Bewegung
   ========================================================== */
.rauschen-hg{ position:fixed; inset:0; overflow:hidden; z-index:0; pointer-events:none; }

/* Die Spur ist links und rechts um denselben Rand eingerückt wie
   der Inhalt und damit die Bezugsbreite, gegen die js/rauschen.js
   jeden Satz einpasst. Höhe, Position und Bewegung setzt das
   Skript — ein Durchlauf ist der komplette Satzpool. */
.rauschen-spur{
  position:absolute; top:0; left:var(--rand); right:var(--rand);
  will-change:transform;
}

/* Jeder Satz bleibt einzeilig. Passt er nicht in die Breite der
   Spur, verkleinert das Skript SEINE Schriftgröße (inline), statt
   ihn umzubrechen oder abzuschneiden. left setzt das Skript
   ebenfalls — immer innerhalb des frei gebliebenen Platzes. */
.rz{
  position:absolute; margin:0; padding:0; left:0; white-space:nowrap;
  font-family:var(--sans); font-weight:600; color:var(--rauschen-farbe); line-height:1;
}
body.textseite .rz{ color:var(--rauschen-farbe-textseite); }
/* Nur auf Im Prozess und Über: minimal zurückgenommen, weil der
   Fließtext dort besonders lang ist. Weiterhin klar lesbar als
   Gestaltungselement — keine starke Reduktion. */
body.rauschen-reduziert .rz{ color:rgba(16,20,19,.055); }
.rz.gross{ font-size:clamp(1.9rem,1.4rem + 2.2vw,3.1rem); }
.rz.mittel{ font-size:clamp(1.4rem,1.1rem + 1.4vw,2.2rem); }
.rz.klein{ font-size:clamp(1.05rem,0.9rem + 0.8vw,1.5rem); }
@media (prefers-reduced-motion:reduce){ .rauschen-spur{ animation:none !important; } }

/* Mobile: kleinere Grundgrößen. Zu lange Sätze werden davon
   ausgehend zusätzlich einzeln verkleinert — nie umgebrochen. */
@media (max-width:640px){
  .rz.gross{ font-size:1.5rem; }
  .rz.mittel{ font-size:1.2rem; }
  .rz.klein{ font-size:1rem; }
}

/* ==========================================================
   Startseite — grüner Opener
   ========================================================== */
.opener{
  background:var(--gruen); color:var(--tinte);
  margin-top:clamp(1.6rem,3vw,2.4rem);
  padding:clamp(3.6rem,8vw,6.5rem) clamp(1.8rem,5vw,4rem);
  text-align:center;
}
.opener h1{ margin:0 auto clamp(1.6rem,3.4vw,2.3rem); max-width:none; }
/* Jede Zeile bleibt immer einzeilig (kein Balance-Umbruch, kein
   automatischer Zeilenumbruch) — js/opener.js verkleinert bei
   Bedarf nur die Schriftgröße dieser einen Zeile, siehe dort. */
.opener h1 .claim-zeile{ display:block; white-space:nowrap; text-wrap:nowrap; }
.opener h1 .claim-zeile + .claim-zeile{ margin-top:clamp(0.5rem,1.6vw,1rem); }
/* Die Wortmarke wird über die BREITE gesetzt, nicht über die Höhe:
   die SVG hat oben und unten Leerraum, eine Höhenangabe fällt
   optisch deutlich kleiner aus als sie misst. Der Wert hier ist
   der Rückfall ohne JavaScript; die genaue Breite misst
   js/opener.js am Button „Aktuelle Termine“ ab und setzt sie
   darauf, deutlich größer als der Button selbst. max-width hält
   sie auf schmalen Fenstern im Block. */
.opener .marke-opener{
  display:block; width:clamp(300px,36vw,380px); max-width:100%; height:auto;
  margin:clamp(2.2rem,4.4vw,3.4rem) auto clamp(2rem,3.6vw,2.6rem);
}
.opener .anspruch{ margin:0 auto; max-width:38ch; font-family:var(--sans); font-weight:400; font-size:clamp(1.25rem,1.05rem + 1vw,1.7rem); }

.aktuelle-termine-link{ text-align:center; padding:clamp(2.2rem,4.5vw,3.2rem) 0; max-width:none; }

/* ==========================================================
   2×2-Angebotsfeld
   ========================================================== */
.zugaenge{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px;
  background:var(--linie-kopf);
}
.zugaenge li{ display:flex; }
.zugaenge a{
  display:flex; flex-direction:column; gap:0.7rem;
  background:var(--gruen); color:var(--tinte); box-shadow:none;
  padding:clamp(1.5rem,3vw,2.3rem); width:100%;
}
.zugaenge a:hover{ background:var(--tinte); color:var(--papier); }
.zugaenge h3{ max-width:none; font-size:var(--fs-kopf); }
.zugaenge p{ margin:0; font-family:var(--sans); font-size:var(--fs-text); line-height:1.5; max-width:34ch; }
@media (max-width:560px){ .zugaenge{ grid-template-columns:minmax(0,1fr); } }

/* ==========================================================
   Grüne Boxen — das durchgängige Muster für Workshops, Themen,
   Termine und Gespräche
   ========================================================== */
.gruen-box{
  background:var(--gruen); color:var(--tinte); text-align:left;
  padding:clamp(1.6rem,3.2vw,2.4rem);
}
.gruen-box + .gruen-box{ margin-top:clamp(1.2rem,2.5vw,1.8rem); }
.gruen-box h3, .gruen-box h4{ max-width:none; margin:0 0 0.6rem; }
.gruen-box p{ max-width:60ch; font-family:var(--sans); }
.gruen-box .spur-frage{ font-family:var(--sans); color:var(--tinte-weich); margin:0 0 0.5rem; max-width:56ch; }
.gruen-box a{ color:var(--tinte); box-shadow:inset 0 -2px 0 rgba(16,20,19,.4); }
.gruen-box a:hover{ background:rgba(16,20,19,.08); }
.kasten-gruppe{ margin-top:clamp(1.6rem,3vw,2.2rem); }

/* Größere, eigenständige grüne Flächen (Kontakt, Im-Prozess-Schluss) */
.gruen-block{
  background:var(--gruen); color:var(--tinte);
  padding:clamp(2.2rem,5.5vw,4rem);
  margin:clamp(3rem,6vw,5rem) 0;
  clear:both;
}
.gruen-block .innen{ max-width:720px; margin-left:clamp(0px,4vw,3rem); }
/* Modifier "gross": für Über und Im Prozess — mehr Breite nutzen,
   Text nicht in eine schmale Spalte zwingen, Schriftgröße wie im
   Startseiten-Opener */
.gruen-block.gross .innen{ max-width:900px; margin-left:0; }
.gruen-block.gross .innen p{ font-size:clamp(1.25rem,1.05rem + 1vw,1.7rem); }
.gruen-block h2{ margin:0 0 1.1rem; max-width:none; display:flex; align-items:baseline; gap:0.5rem; }
.gruen-block h2 .marke-inline-gross{ height:0.82em; width:auto; transform:translateY(0.3em); }
.gruen-block p{ max-width:60ch; font-family:var(--sans); }
.gruen-block .adresse-gross{ box-shadow:inset 0 -6px 0 var(--tinte); }
.gruen-block .adresse-gross:hover{ background:var(--tinte); color:var(--gruen); }
/* Referenzgröße der Wortmarke, wo sie als vollständiges Element
   innerhalb eines Satzes auftaucht (z. B. auf Über) */
.marke-referenz{
  height:clamp(1.6rem,2.1vw,2.3rem); width:auto; display:inline-block;
  vertical-align:0; transform:translateY(0.65rem);
}

/* Schluss der grünen Box auf „Im Prozess“ — eine ruhige Zeile mit
   Abstand darüber, bewusst kleiner und leichter als der Text der
   Box, damit sie als Schluss gelesen wird und nicht als Claim. */
.gruen-block .schluss-zeile,
.gruen-block.gross .innen p.schluss-zeile{
  font-family:var(--sans); font-weight:400; font-size:var(--fs-text);
  line-height:1.5; margin:clamp(2rem,4.5vw,3rem) 0 0; max-width:none;
}

/* ==========================================================
   Termine — jetzt ebenfalls grüne Boxen
   ========================================================== */
.termingruppe{ padding-top:clamp(3rem,6vw,4.4rem); }
.termingruppe:first-of-type{ padding-top:clamp(2rem,4vw,2.8rem); }
.termingruppe > h2{ margin-bottom:1.4rem; font-size:var(--fs-kopf); max-width:none; }
.termingruppe > h2 a{ color:inherit; box-shadow:inset 0 -4px 0 var(--gruen); }
.termingruppe > h2 a:hover{ background:var(--gruen); }

.termin{ background:var(--gruen); color:var(--tinte); padding:clamp(1.5rem,3vw,2.2rem); }
.termin + .termin{ margin-top:clamp(1rem,2vw,1.4rem); }
.termin-datum{ font-family:var(--sans); font-size:var(--fs-klein); letter-spacing:0.01em; color:var(--tinte-weich); margin:0 0 0.4rem; }
.termin h3, .termin h4{ margin:0 0 0.4rem; max-width:none; font-size:var(--fs-kopf); }
.termin-unter, .termin-gast{
  font-family:var(--sans); font-weight:400; font-size:var(--fs-text); line-height:1.45;
  color:var(--tinte-weich); margin:0 0 0.5rem; max-width:56ch;
}
.termin-text{ font-family:var(--sans); margin:0.4rem 0 0.9rem; color:var(--tinte); }
.termin a{ color:var(--tinte); box-shadow:inset 0 -2px 0 rgba(16,20,19,.4); }
.termin a.knopf{ color:var(--gruen); box-shadow:none; }
.termin a.knopf:hover{ background:var(--gruen); color:var(--tinte); }
.termin a:hover{ background:rgba(16,20,19,.08); }
/* Status „Ausgebucht" / „Abgesagt" — steht oben in der Box, gut
   sichtbar; ein Handlungslink entfällt in diesem Fall */
.termin-status{
  font-family:var(--sans); font-size:var(--fs-text); font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase;
  color:var(--gruen); background:var(--tinte); display:inline-block;
  padding:0.3rem 0.75rem; margin:0.2rem 0 0.8rem;
}
/* Kurzvorstellung einer Gesprächspartnerin im Talk-Termin */
.termin-gast-info{
  font-family:var(--sans); font-size:var(--fs-text); line-height:1.55;
  color:var(--tinte-weich); margin:0 0 0.8rem; max-width:60ch;
}
.termin-leer{ font-family:var(--sans); margin:0; }
.termin-link{ margin:0.9rem 0 0; }

/* Hinweis über dem Anmeldelink — gut sichtbar, aber ohne zweite
   Überschriftenebene: Sans, halbfett, voller Kontrast. */
.termin-hinweis{
  font-family:var(--sans); font-weight:600; color:var(--tinte);
  margin:0.9rem 0 0.5rem; max-width:52ch;
}
/* Direkter Anmeldelink in der grünen Box — weiß auf Grün */
.termin-anmeldung{ margin:0.5rem 0 0; }
.termin .termin-anmeldung a{
  font-family:var(--sans); font-weight:600;
  color:#fff; box-shadow:inset 0 -3px 0 rgba(255,255,255,.75);
}
.termin .termin-anmeldung a:hover{ background:#fff; color:var(--tinte); box-shadow:none; }
/* Preis und eigener Handlungslink stehen im selben Block untereinander */
.termin .preis + .termin-link{ margin-top:1rem; }
.termin .preis{ margin-top:0.9rem; }
.mehr{ margin:clamp(1.4rem,3vw,2rem) 0 0; }

/* Auf der Seite "Aktuelle Termine": Boxen bleiben grün, nur Links
   dürfen dort weiß und weiß unterstrichen sein (Seite selbst mittig
   gesetzt, der Inhalt jeder Box bleibt linksbündig) */
.zentriert{ text-align:center; }
.zentriert .termin{ text-align:left; }
.zentriert h1, .zentriert > p{ text-align:center; }
.zentriert .termingruppe{ padding-top:clamp(3.6rem,7vw,5.2rem); }
.zentriert .termingruppe:first-of-type{ padding-top:clamp(2.2rem,4.5vw,3rem); }
.zentriert .termin a{ color:#fff; box-shadow:inset 0 -2px 0 rgba(255,255,255,.6); }
.zentriert .termin a:hover{ background:rgba(255,255,255,.2); color:var(--tinte); }
/* Buttons bleiben auch hier schwarz mit grüner Schrift — die weiße
   Linkfarbe dieser Seite darf sie nicht mitnehmen */
.zentriert .termin a.knopf{ color:var(--gruen); box-shadow:none; }
.zentriert .termin a.knopf:hover{ background:var(--gruen); color:var(--tinte); }

/* ==========================================================
   Handlungslinks / CTA — schwarz mit grüner Schrift
   ========================================================== */
.knopf{
  display:inline-block; background:var(--tinte); color:var(--gruen); box-shadow:none;
  font-family:var(--sans); font-size:var(--fs-text); font-weight:600; letter-spacing:-0.005em;
  padding:0.9rem 1.5rem; border-radius:2px;
}
.knopf:hover{ background:var(--gruen); color:var(--tinte); }
.knopf-kompakt{ font-size:var(--fs-klein); padding:0.5rem 0.9rem; }
.knopf-gross{ font-size:clamp(1rem,0.95rem + 0.3vw,1.15rem); padding:1.05rem 1.9rem; }
.anfrage{ padding-top:clamp(2rem,4vw,3rem); }
.anfrage p{ margin:0; }

.preis{
  display:inline-block; background:var(--tinte); color:var(--gruen);
  font-family:var(--sans); font-size:var(--fs-text); font-weight:600;
  padding:0.55rem 1rem; margin:0;
}

.adresse-gross{
  display:inline-block; margin:0.4rem 0 1.4rem; font-family:var(--sans);
  font-size:clamp(1.5rem,1.1rem + 2vw,2.6rem); font-weight:600; letter-spacing:-0.022em;
  box-shadow:inset 0 -6px 0 var(--gruen);
}

/* Bilder */
.bild{ margin:clamp(2.2rem,4vw,3rem) 0 0; max-width:66ch; }
.bild img{ display:block; width:100%; height:auto; }
.bild figcaption{ font-family:var(--sans); font-size:var(--fs-klein); color:var(--grau); margin-top:0.6rem; }

/* Porträt — läuft rechts neben dem Fließtext mit, endet spätestens
   vor der grünen Box (die per clear:both immer sauber darunter
   beginnt, nie überlappt) */
.portraet{
  float:right; width:clamp(220px,30vw,340px);
  margin:0.3rem 0 1.6rem 2rem; max-width:66ch;
}
.portraet img{ display:block; width:100%; height:auto; }
@media (max-width:700px){
  .portraet{ float:none; width:min(340px,70vw); margin:0 0 1.8rem; }
}

/* Rechtsseiten */
.rechtstext h1{ max-width:none; }
.rechtstext h2{ font-size:1.2rem; margin:2.6rem 0 0.7rem; max-width:none; }

/* Wortmarke inline — nur an den ausdrücklich benannten Stellen.
   Die SVG selbst hat unterhalb der Buchstaben Leerraum (kein
   Unterlängen-Zeichen im Wort), deshalb reicht vertical-align
   allein nicht — der zusätzliche Versatz gleicht das aus, damit
   die Wortmarke exakt auf der Textgrundlinie sitzt. */
.marke-inline{
  height:0.76em; width:auto; vertical-align:0; display:inline-block;
  transform:translateY(0.28em);
}

/* Reine Text-Variante statt der Wortmarken-Grafik — für Stellen, an
   denen die Grafik inline nicht zuverlässig auf der Grundlinie sitzt
   (browserabhängige Schriftmetrik). Gleicher Auftritt über Serif
   Semibold, ohne Ausrichtungsrisiko. */
.marke-text{ font-family:var(--serif); font-weight:600; }

/* ==========================================================
   Fuß — die Bodenmarke läuft im Textfluss über die volle Breite,
   nichts wird beschnitten
   ========================================================== */
.fuss{ margin-top:clamp(2.2rem,4vw,3.2rem); }
.zeichen-fuss{ display:block; width:100%; height:auto; }
.fuss-innen{
  max-width:var(--content-max); margin:0 auto;
  padding:clamp(1.5rem,3vw,2.1rem) var(--rand) clamp(2.4rem,5vw,3.4rem);
  display:flex; flex-wrap:wrap; gap:0.4rem 2.5rem; align-items:baseline;
  font-family:var(--sans); font-size:var(--fs-klein); color:var(--tinte);
}
.fuss-innen p{ margin:0; max-width:none; }
.fuss-innen nav{ display:flex; flex-wrap:wrap; gap:0.4rem 1.5rem; }
.fuss-innen a{ color:var(--tinte); box-shadow:inset 0 -4px 0 var(--gruen); }
.fuss-innen a:hover{ background:var(--tinte); color:var(--papier); box-shadow:none; }

/* ==========================================================
   Schmale Fenster
   ========================================================== */
@media (max-width:860px){
  html.js .menue-knopf{ display:inline-flex; }
  .kopf-innen{ flex-wrap:wrap; }
  .haupt{ flex-direction:column; gap:0; width:100%; border-top:1px solid var(--linie-kopf); padding-top:0.4rem; }
  .haupt a{ padding:0.6rem 0; font-size:var(--fs-text); }
  .haupt a[aria-current="page"], .haupt a:hover{ box-shadow:inset 4px 0 0 var(--gruen); padding-left:0.7rem; }
  .haupt .nur-mobil{ display:block; }
}
@media (max-width:640px){
  .gruen-block .innen{ margin-left:0; max-width:none; }
  .punchline-zeile{ flex-direction:column; gap:0.6rem; }
}

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

@media print{
  .kopf, .rauschen-hg, .spring{ display:none; }
  a{ box-shadow:none; color:var(--tinte); }
}