/* =====================================================================
   THYNK Design-System — „Deutschland bewegt sich"
   ---------------------------------------------------------------------
   Aus der Startseite (Phase 1, 2026-07-24) herausgeloest: alles hier ist
   NICHT mehr auf .thynk-lp gescopt und gilt site-weit. Die Startseite ist
   und bleibt die Quelle der Wahrheit — wer hier etwas aendert, aendert sie
   mit. Genau das ist gewollt: das System existiert einmal, nicht zweimal.

   Was hier NICHT hingehoert: alles, was nur die Startseite hat
   (Hero, Schritte, Zitate, Team, Foto-Strip, Final-CTA). Das steht in
   thynk-lp.css und bleibt dort unter .thynk-lp gescopt.

   Tokens: :root{--thynk-*} in thynk-public.css.
   Ladereihenfolge: thynk-public.css -> thynk-system.css -> thynk-lp.css.
   ===================================================================== */
/* ---------- Basis ------------------------------------------------------
   Muss VOR den Komponenten stehen: `.thynk-lp a{color:inherit}` hat dieselbe
   Spezifitaet wie `.lp-nav__links a`. Stuende die Basis spaeter (etwa in einer
   nachgeladenen Datei), gewaenne sie ueber die Reihenfolge und faerbte die
   Nav-Links voll deckend statt auf 82 % — genau so passiert beim Split. */
.thynk-lp {
  font-family: var(--thynk-font-body);
  color: var(--thynk-ink);
  background: var(--thynk-paper);
  line-height: 1.6;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}
.thynk-lp *,
.thynk-lp *::before,
.thynk-lp *::after { box-sizing: border-box; }

.thynk-lp img { max-width: 100%; display: block; }

/* Sticky-Nav berücksichtigen, wenn Anker angesprungen werden. */
.thynk-lp [id] { scroll-margin-top: 84px; }

/* Links erben die Textfarbe ihrer Umgebung — Schaltflaechen aber nicht. Ohne
   den Ausschluss gewinnt diese Regel (0,1,1) gegen .lp-btn--primary (0,1,0),
   und jeder Knopf, der ein <a> in einer hellen Karte ist, bekam die dunkle
   Kartenfarbe: Schwarz auf Lila, gemessen 2.3:1. WCAG verlangt 4.5:1 (grosse
   Schrift 3:1). Betraf die Termine-Karten der Startseite sichtbar, galt aber
   fuer jede solche Schaltflaeche. */
.thynk-lp a:not(.lp-btn):not(.thynk-btn) { color: inherit; }

/* ---------- Basis der Funktionsseiten ---------------------------------
   Die Startseite bringt ihren Grund über .thynk-lp mit; die Shortcode-Seiten
   hatten bisher gar keinen und liefen auf Browser-Weiss. Beides zieht jetzt
   dieselben Tokens. Spezifitaet bewusst niedrig (Element-Selektoren), damit
   jede Komponentenregel darueber gewinnt. */
body {
  background: var(--thynk-paper);
  color: var(--thynk-ink);
  font-family: var(--thynk-font-body);
  line-height: 1.6;
}

/* Sticky-Footer: body ist eine Flex-Spalte (Regel in thynk-public.css),
   der Footer wird an den unteren Rand gedrueckt, wenn der Inhalt kurz ist. */
.lp-footer { margin-top: auto; }

/* Ueberschriften site-weit auf die Head-Schrift. Groessen bleiben beim
   bestehenden --fs-*-Massstab: der traegt die Verwaltungs-Tabellen, und ein
   Wechsel auf die clamp()-Skala der Startseite wuerde deren Verhaeltnisse
   aufreissen. Uebernommen wird die Schrift, nicht die Skala. */
h1, h2, h3,
.thynk-page-header__title {
  font-family: var(--thynk-font-head);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1;
}
/* Karten-/Unterueberschriften laufen ohne Versalien (wie .lp-card h3). */
h3 {
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.15;
}

/* ---------- Layout: Container & Sektionen ---------------------------- */
.lp-container {
  max-width: var(--thynk-maxw);
  margin: 0 auto;
  padding: 0 28px;
}

.lp-section { padding: 88px 0; }

.lp-section--dark {
  /* Gehobenes Charcoal statt Fast-Schwarz (var(--thynk-ink) #14130f wirkte zu hart). */
  background: #211f1a;
  color: var(--thynk-warmwhite);
}

/* Auf dunklem Grund schaltet der Akzent auf den helleren Ton um — als Text ist
   #651acf dort nur 2.0:1 und damit unlesbar. Gefuellte Flaechen (Buttons) sind
   davon ausgenommen, sie behalten den kraeftigen Ton (siehe --thynk-accent-solid). */
.lp-section--dark,
.lp-hero,
.lp-nav {
  --thynk-accent: var(--thynk-accent-on-dark);
}
.lp-section--accent {
  background: var(--thynk-accent);
  color: var(--thynk-warmwhite);
  text-align: center;
}

/* ---------- Typografie ---------------------------------------------- */
.lp-h2,
.lp-hero__title,
.lp-cta__title {
  font-family: var(--thynk-font-head);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .98;
  margin: 0 0 .35em;
}

.lp-h2 { font-size: clamp(32px, 4.5vw, 48px); }
.lp-hero__title { font-size: clamp(48px, 9vw, 96px); }
.lp-cta__title { font-size: clamp(34px, 6vw, 58px); }

.lp-eyebrow {
  display: block;
  font-family: var(--thynk-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--thynk-accent);
  margin: 0 0 16px;
}

.lp-sub {
  font-size: clamp(18px, 2.4vw, 22px);
  color: var(--thynk-muted-2);
  max-width: 640px;
  margin: 0 0 40px;
}
.lp-section--dark .lp-sub {
  color: rgba(250, 248, 243, .68);
}

/* ---------- Buttons -------------------------------------------------- */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--thynk-font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  padding: 16px 28px;
  border: 0;
  border-radius: var(--thynk-radius);
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.lp-btn:hover { transform: translateY(-1px); }

.lp-btn--primary {
  background: var(--thynk-accent-solid);
  color: var(--thynk-warmwhite);
}
.lp-btn--primary:hover { background: var(--thynk-accent-hover); }

.lp-btn--ghost {
  background: transparent;
  color: inherit;
  border: 2px solid var(--thynk-line-light);
}
.lp-btn--ghost:hover {
  background: rgba(250, 248, 243, .06);
  border-color: rgba(250, 248, 243, .28);
}

.lp-btn--on-accent {
  background: var(--thynk-warmwhite);
  color: var(--thynk-accent);
}
.lp-btn--on-accent:hover { background: #fff; }

/* ---------- Navigation ---------------------------------------------- */
.lp-nav {
  position: sticky;
  top: 0;
  /* Über Leaflet-Panes/-Controls halten, die sonst über die Sticky-Nav floaten. */
  z-index: 1000;
  padding: 14px 0;
  background: rgba(33, 31, 26, .90);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--thynk-line-light);
}
.lp-nav .lp-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.lp-nav__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--thynk-ink);
  font-family: var(--thynk-font-head);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1;
}
/* Weißer Chip nur, wenn echter Logo-Inhalt direkt enthalten ist
   (ACF-Bild oder Text-Fallback). */
.lp-nav__logo:has(img),
.lp-nav__logo:has(span) {
  background: transparent;
  padding: 0;
  border-radius: var(--thynk-radius);
}
/* WP-custom_logo: get_custom_logo() liefert einen eigenen <a>, der aus dem
   Nav-Logo-Anchor herausgeparst wird (verschachtelte <a> sind ungültig) und
   zum Geschwister-Element wird. Leeren Anchor ausblenden, echtes Logo als Chip. */
.lp-nav__logo:has(+ .custom-logo-link) { display: none; }
.lp-nav .custom-logo-link {
  display: inline-flex;
  align-items: center;
  background: transparent;
  padding: 0;
  border-radius: var(--thynk-radius);
}
/* Die Leiste hat keine feste Höhe, sie wächst mit dem höchsten Kind. 40px statt
   der früheren 45: Die Logodatei trug 25,8 % eingebackenen Leerraum (oben 145,
   unten 232 von 1464 px), sichtbare Schrift war also nur 33,4 px. Mit der auf
   ihren Inhalt beschnittenen Datei sind 40px echte 40px — kleinere Zahl,
   größerer Schriftzug. Steht die alte, gepolsterte Datei noch im Medien-Katalog,
   wird das Logo nur unwesentlich kleiner, nichts bricht. */
.lp-nav__logo img,
.lp-nav .custom-logo {
  height: 40px !important;
  width: auto !important;
  max-width: 240px !important;
}

.lp-nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.lp-nav__links a {
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  color: rgba(250, 248, 243, .82);
  transition: color .15s ease;
}
.lp-nav__links a:hover { color: var(--thynk-warmwhite); }

/* Die App-Nav-Basisregel (.thynk-nav__item a in thynk-public.css) bringt
   border-bottom + Padding mit — im LP-Look neutralisieren. */
.lp-nav__links .thynk-nav__item { margin: 0; }
.lp-nav__links .thynk-nav__item > a {
  display: inline-block;
  padding: 0;
  border-bottom: 0;
}
/* Der aktive Eintrag stand auf der Akzentfarbe — Lila auf dem dunklen Nav-Grund
   ist kaum lesbar (Kontrast ~2:1). Stattdessen volles Weiß gegen die leicht
   gedämpften übrigen Links, plus eine dünne Linie: so bleibt erkennbar, wo man
   ist, ohne auf Farbe angewiesen zu sein. */
.lp-nav__links .thynk-nav__item.is-active > a {
  color: #fff;
  border-bottom: 2px solid rgba(255, 255, 255, .55);
  padding-bottom: 2px;
}
.lp-nav__links .thynk-nav__item--logout > a { color: rgba(250, 248, 243, .6); margin-top: 0; }

.lp-nav__cta { flex: 0 0 auto; padding: 12px 22px; }

/* ---------- Nav: Hamburger + Mobile-Drawer -------------------------- */
/* Der Knopf stand auf 2px-Strichen und einem Rahmen mit 14 % Deckkraft. Technisch
   war er hell, optisch verschwand er auf dem dunklen Hero-Foto. Kraeftigere
   Striche, sichtbarer Rahmen und eine leichte Abdunklung geben ihm Halt —
   letztere auch dort, wo die Nav ueber einem hellen Bildausschnitt liegt. */
.lp-nav__burger {
  display: none;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  margin-left: 6px;
  background: rgba(20, 19, 15, .38);
  border: 1px solid rgba(250, 248, 243, .38);
  border-radius: var(--thynk-radius);
  cursor: pointer;
}
.lp-nav__burger:hover {
  background: rgba(20, 19, 15, .55);
  border-color: rgba(250, 248, 243, .6);
}
.lp-nav__burger span {
  display: block;
  height: 3px;
  width: 100%;
  background: var(--thynk-warmwhite);
  border-radius: 2px;
}

.lp-nav__overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(15, 14, 11, .6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.lp-nav__overlay--open { display: block; }
.lp-nav__drawer {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(84vw, 340px);
  padding: 72px 28px 28px;
  background: #211f1a;
  /* Die Textfarbe gehoert zum dunklen Grund darueber. Sie fehlte, und der
     Drawer ist ein GESCHWISTER von <nav class="lp-nav lp-section--dark">,
     nicht dessen Kind — er erbt deren helle Schrift also nicht.
     Auf Unterseiten fiel das nicht auf: dort gewinnt die eigene Link-Regel.
     Auf der Startseite umschliesst .thynk-lp beides, und deren Basisregel
     .thynk-lp a:not(.lp-btn):not(.thynk-btn){color:inherit} hat (0,3,1) —
     jedes :not()-Argument zaehlt als Klasse. Das schlaegt
     .lp-nav__mobile .thynk-nav__item > a (0,2,1), und die Links erbten
     .thynk-lp{color:var(--thynk-ink)}: gemessen rgb(20,19,15) auf #211f1a.
     Lesbar blieb nur der aktive Eintrag, dessen Regel bei (0,3,1)
     gleichzieht und spaeter in dieser Datei steht. */
  color: var(--thynk-warmwhite);
  border-left: 1px solid var(--thynk-line-light);
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}
.lp-nav__close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 0;
  color: var(--thynk-warmwhite);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.lp-nav__mobile {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lp-nav__mobile .thynk-nav__item { margin: 0; }
/* Bewusst ueber .lp-nav__overlay .lp-nav__drawer gehaengt: (0,4,1) statt
   (0,2,1). Sonst entscheidet wieder die Basisregel einer umschliessenden
   Seite, welche Farbe die Nav hat. */
.lp-nav__overlay .lp-nav__drawer .lp-nav__mobile .thynk-nav__item > a {
  display: block;
  padding: 14px 4px;
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  color: rgba(250, 248, 243, .86);
  border-bottom: 1px solid var(--thynk-line-light);
}
/* Wie in der Desktop-Leiste: Lila ist auf dem dunklen Drawer kaum lesbar. Hier
   trennen bereits Linien die Einträge, deshalb hebt sich der aktive über volles
   Weiß und mehr Gewicht ab statt über einen weiteren Strich. */
.lp-nav__overlay .lp-nav__drawer .lp-nav__mobile .thynk-nav__item.is-active > a {
  color: #fff;
  font-weight: 800;
}
.lp-nav__mobile-cta { margin-top: 20px; }

/* ---------- Bild-Platzhalter ---------------------------------------- */
.lp-imgph {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 12px;
  text-align: center;
  border: 1px dashed rgba(20, 19, 15, .28);
  border-radius: var(--thynk-radius);
  background: repeating-linear-gradient(45deg, #ece6d9, #ece6d9 12px, #e2dbcb 12px, #e2dbcb 24px);
  color: var(--thynk-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: .04em;
}
.lp-imgph::after { content: "Bild"; }
.lp-imgph[data-label]::after { content: attr(data-label); }

/* ---------- Grids (gemeinsam) --------------------------------------- */
.lp-cards,
.lp-stepgrid,
.lp-quotes,
.lp-photostrip,
.lp-eventgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

/* ---------- Warum: Karten ------------------------------------------- */
.lp-card {
  border: 1px solid var(--thynk-line-dark);
  border-radius: var(--thynk-radius);
  padding: 32px;
  background: var(--thynk-warmwhite);
  /* Eigener heller Grund heisst: eigene Textfarbe. Sonst erbt die Karte das
     Weiss einer dunklen Sektion und der Text verschwindet. */
  color: var(--thynk-ink);
}
.lp-card__num {
  font-family: var(--thynk-font-head);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .06em;
  color: var(--thynk-accent);
  margin-bottom: 14px;
}
.lp-card__title {
  font-family: var(--thynk-font-head);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.1;
  font-size: clamp(22px, 2.4vw, 26px);
  margin: 0 0 12px;
}
.lp-card__text {
  margin: 0;
  color: var(--thynk-muted-2);
  font-size: 16px;
}

/* ---------- FAQ ------------------------------------------------------ */
.lp-faqlist {
  max-width: 820px;
  border-top: 1px solid var(--thynk-line-dark);
}
.lp-faq__item {
  border-bottom: 1px solid var(--thynk-line-dark);
}
.lp-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 22px 0;
  font-family: var(--thynk-font-head);
  font-weight: 700;
  text-transform: none;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.25;
}
.lp-faq__q::-webkit-details-marker { display: none; }
.lp-faq__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--thynk-accent);
  color: var(--thynk-accent);
  font-family: var(--thynk-font-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  transition: transform .15s ease;
}
details[open] .lp-faq__icon { transform: rotate(45deg); }
.lp-faq__a {
  margin: 0;
  padding: 0 0 22px;
  color: var(--thynk-muted-2);
  font-size: 16px;
  max-width: 720px;
}

/* Auf dunklem Grund: Antworttext und Trennlinien umkehren. Ohne das steht der
   Antworttext auf #6b6a63 (unlesbar) und die Linien auf 12 % Schwarz
   (unsichtbar) — beide sind für helle Sektionen gebaut. */
.lp-section--dark .lp-faq__a {
  color: rgba(250, 248, 243, .72);
}
.lp-section--dark .lp-faqlist,
.lp-section--dark .lp-faq__item {
  border-color: var(--thynk-line-light);
}

/* ---------- Termine: Event-Karten ----------------------------------- */
.lp-termine__empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  border: 1px dashed var(--thynk-line-dark);
  border-radius: var(--thynk-radius);
  padding: 40px;
}
.lp-termine__empty p { margin: 0; color: var(--thynk-muted-2); }

.lp-eventcard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--thynk-line-dark);
  border-radius: var(--thynk-radius);
  color: var(--thynk-ink);
  padding: 28px;
  background: var(--thynk-warmwhite);
}
.lp-eventcard__date {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--thynk-accent);
}
.lp-eventcard__title {
  font-family: var(--thynk-font-head);
  font-weight: 700;
  text-transform: none;
  line-height: 1.1;
  font-size: 24px;
  margin: 2px 0 4px;
}
.lp-eventcard__title a { text-decoration: none; }
.lp-eventcard__title a:hover { color: var(--thynk-accent); }
.lp-eventcard__meta {
  font-size: 15px;
  color: var(--thynk-muted-2);
}
.lp-eventcard .thynk-map {
  height: 120px;
  border-radius: var(--thynk-radius);
  overflow: hidden;
  margin: 10px 0;
  /* Eigener Stacking-Context: Leaflets hohe interne z-Indizes bleiben eingesperrt
     und floaten beim Scrollen nicht mehr über die Sticky-Nav. */
  position: relative;
  z-index: 0;
  isolation: isolate;
}
.lp-eventcard .lp-btn { margin-top: auto; }

/* ---------- Footer ---------------------------------------------------
   Heller Grund (Paper, von body geerbt). Die border-top trennt ihn vom
   Seiteninhalt: auf der Startseite steht darueber der dunkle Final-CTA und die
   Kante ergibt sich von selbst, auf den hellen Unterseiten aber nicht — dort
   liefe der Footer sonst ohne Grenze in den Inhalt. */
.lp-footer {
  padding: 56px 0 40px;
  border-top: 1px solid var(--thynk-line-dark);
}
.lp-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--thynk-line-dark);
}
.lp-footer__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--thynk-ink);
  font-family: var(--thynk-font-head);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1;
}
.lp-footer__logo:has(img),
.lp-footer__logo:has(span) {
  background: transparent;
  padding: 0;
  border-radius: var(--thynk-radius);
}
.lp-footer__logo:has(+ .custom-logo-link) { display: none; }
.lp-footer .custom-logo-link {
  display: inline-flex;
  align-items: center;
  background: transparent;
  padding: 0;
  border-radius: var(--thynk-radius);
}
.lp-footer__logo img,
.lp-footer .custom-logo {
  height: 30px !important;
  width: auto !important;
  max-width: 160px !important;
}
.lp-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-footer__links a {
  text-decoration: none;
  font-size: 15px;
  /* muted-2 auf Paper = 4.86:1. Der hellere --thynk-muted (#8b8779) erreicht
     nur 3.22:1 und faellt bei 15px unter die 4.5:1 der WCAG. */
  color: var(--thynk-muted-2);
  transition: color .15s ease;
}
.lp-footer__links a:hover { color: var(--thynk-ink); }
.lp-footer__copy {
  margin: 24px 0 0;
  font-size: 13px;
  color: var(--thynk-muted-2);
}


/* ---------- Seiten-Hero (Unterseiten) --------------------------------
   Der Hero der Startseite (.lp-hero) traegt Video-Ebene, Foto-Slideshow und
   Scrim — Maschinerie, die eine Inhaltsseite nicht braucht. Dies hier ist die
   schlanke Variante: dunkle Flaeche, Eyebrow, grosse Zeile, Lead.
   Zwischen Section-H2 (48px) und Home-Hero (96px) angesiedelt. */
.lp-pagehero { padding: 96px 0 72px; }

/* Mit Bild: mehr Höhe, damit das Foto Wirkung hat, und der Inhalt über die
   Medien-Ebene gehoben. Ohne Bild bleibt alles wie oben — der Hero
   funktioniert in beiden Fällen. */
.lp-pagehero--media {
  position: relative;
  overflow: hidden;
  padding: clamp(96px, 14vh, 160px) 0 clamp(72px, 11vh, 120px);
}
.lp-pagehero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.lp-pagehero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Zwei Verläufe wie im Home-Hero: der waagerechte gibt dem linksbündigen Text
   Kontrast und lässt die rechte Bildhälfte offen, der senkrechte trägt die
   untere Kante. Ohne Scrim ist Weiß auf einem hellen Foto unlesbar. */
.lp-pagehero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Deutlich heller als die frueheren .97/.82 — das Motiv war dahinter fast
     unsichtbar. Die hohen Werte stammten aus dem Versuch, den lila Eyebrow auf
     4.5:1 zu bringen; das gelingt auf einem Foto ohnehin nur mit einer
     Flaeche, die das Bild verdeckt. Der Eyebrow traegt hier jetzt Warmweiss
     (Regel unten), damit dieser Zwang entfaellt. */
  background:
    linear-gradient(90deg, rgba(20, 19, 15, .72), rgba(20, 19, 15, .54) 46%, rgba(20, 19, 15, .20) 80%),
    linear-gradient(180deg, rgba(20, 19, 15, .38), rgba(20, 19, 15, .30) 55%, rgba(20, 19, 15, .50));
}
.lp-pagehero--media .lp-eyebrow { color: var(--thynk-warmwhite); }
.lp-pagehero--media .lp-container {
  position: relative;
  z-index: 2;
}

.lp-pagehero__title {
  font-family: var(--thynk-font-head);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .98;
  font-size: clamp(40px, 7vw, 72px);
  margin: 0 0 20px;
}

.lp-pagehero__lead {
  font-size: clamp(18px, 2.4vw, 22px);
  /* Eigene Farbe, weil die Flaeche dunkel ist — --thynk-muted-2 waere hier
     unlesbar (siehe DESIGN.md: Komponenten auf dunklem Grund setzen ihre
     Textfarbe selbst). */
  color: rgba(250, 248, 243, .78);
  max-width: 680px;
  margin: 0;
}

/* ---------- Fliesstext ------------------------------------------------
   Fuer Seiteninhalt aus dem Block-Editor. Zeilenlaenge bewusst begrenzt:
   ueber ~70 Zeichen verliert das Auge beim Ruecksprung die Zeile. */
.thynk-prose {
  max-width: 68ch;
  font-size: 17px;
  line-height: 1.7;
  color: var(--thynk-ink);
}
.thynk-prose > *:first-child { margin-top: 0; }
.thynk-prose > *:last-child  { margin-bottom: 0; }

.thynk-prose p { margin: 0 0 1.2em; }

.thynk-prose h2 {
  font-family: var(--thynk-font-head);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1;
  font-size: clamp(26px, 3.4vw, 34px);
  margin: 2em 0 .6em;
}
.thynk-prose h3 {
  font-family: var(--thynk-font-head);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.15;
  font-size: 22px;
  margin: 1.8em 0 .5em;
}

.thynk-prose ul,
.thynk-prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.thynk-prose li { margin: 0 0 .45em; }

.thynk-prose a {
  color: var(--thynk-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.thynk-prose a:hover { color: var(--thynk-accent-hover); }

.thynk-prose strong { font-weight: 700; }

.thynk-prose blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--thynk-accent);
  color: var(--thynk-muted-2);
}

.thynk-prose img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--thynk-radius);
}

/* ---------- Responsive (geteilt) ------------------------------------- */
@media (max-width: 820px) {
  .lp-container { padding: 0 20px; }
  .lp-section { padding: 56px 0; }
  /* Steht nach .lp-pagehero und hat dieselbe Spezifitaet — ohne diese Zeile
     wuerde .lp-section{56px} den Hero-Wert stillschweigend ueberschreiben.
     Also ausdruecklich setzen, statt sich auf die Reihenfolge zu verlassen. */
  .lp-pagehero { padding: 64px 0 48px; }
  /* 10px ist hier die sinnvolle Untergrenze: Der Burger misst 44px, das ist das
     Mindestmaß für ein Tippziel (WCAG 2.5.5). Weniger Padding spart nur noch
     Pixel, die dem Daumen fehlen. Leistenhöhe damit 64px. */
  .lp-nav { padding: 10px 0; }
  .lp-nav__links { display: none; }
  .lp-nav__cta { display: none; }
  .lp-nav__burger { display: flex; margin-left: auto; }

  .lp-eventgrid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .lp-section { padding: 44px 0; }
  .lp-pagehero { padding: 48px 0 36px; }
  .lp-card,
  .lp-eventcard { padding: 24px; }
}