/* ============================================================
   STARTHOUSE SPESSART — Theme styles
   Drop into your WordPress theme (e.g. /assets/css/starthouse.css)
   and enqueue. No Elementor required.
   All brand values live in :root — change them in one place.
   ============================================================ */

/* ------------------------------------------------------------
   Schriften LOKAL (DSGVO/trackerless) — keine externen Google Fonts.
   Lege die woff2-Dateien unter assets/fonts/ ab (Dateinamen unten).
   Fehlen sie, greift automatisch der system-ui-Fallback aus :root.
   ------------------------------------------------------------ */
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/PlusJakartaSans-Variable.woff2") format("woff2");
}

:root {
  /* --- Brand palette — Starthouse CI: green tones + heavy black ---
     Tip: replace the greens below with your exact hex once confirmed. */
  --c-ink:        #0d0d0d;   /* black — headings & dark sections (CI: viel Schwarz) */
  --c-ink-2:      #181818;
  --c-primary:    #3aaa35;   /* Starthouse green — flat accents, icons, big type, on-black */
  --c-primary-d:  #267c24;
  --c-accent:     #3aaa35;   /* same green — decorative markers, on-black accents */
  /* --c-accent-d gab es bis 1.28.1 — ohne einen einzigen Verwender. Auf
     Schwarz braucht niemand das dunkle Grün; dort trägt es nur 3,7:1.
     Ein Token, an dem man drehen kann, ohne dass sich etwas ändert, ist
     eine Falle. Der Prüfblock `ci-farben` hält die Wurzel jetzt frei davon. */
  --c-sun:        #7ec850;   /* light lime — highlights on black */

  /* WCAG-AA-Grün für TEXT und Flächen mit weißer Schrift auf hellem
     Grund (v1.17.0, BITV/EN 301 549): das CI-Grün #3aaa35 schafft auf
     Weiß nur 3,0:1 — genug für große Schrift, Icons und Flächen, zu
     wenig für Fließtext-Links und Button-Beschriftungen (4,5:1).
     Dieser Ton hält den Farbwinkel und liegt bei 5,3:1 auf Weiß bzw.
     4,8:1 auf --c-bg-soft; die Hover-Stufe bei 6,7:1. Das helle
     CI-Grün bleibt überall dort, wo es bestehen kann: große Typo,
     dunkle Sektionen, dekorative Marker. */
  --c-green-text:   #267c24;
  --c-green-text-d: #1f6a1e;

  --c-bg:         #ffffff;
  --c-bg-soft:    #f2f5f1;   /* cool off-white with a faint green cast */
  --c-bg-mute:    #e7ede6;
  --c-bg-mute-2:  #dfe7e6;   /* zweiter Halt des Platzhalter-Verlaufs (.ph) */
  --c-line:       #e1e6e0;
  /* Die Kante auf dunklem Grund. Bis 1.28.1 standen dafür zwei fast
     gleiche Werte fest in der CSS (#262626 und #2a2a2a) — ein
     Unterschied, den niemand sehen kann, aber jeder pflegen muss. */
  --c-line-on-ink: #262626;
  /* Rahmen von BEDIENELEMENTEN (v1.22.8, SC 1.4.11 „Nicht-Text-Kontrast").
     --c-line bleibt, was es ist: eine dekorative Haarlinie mit 1,27:1 auf
     Weiß. Karten, Trenner, Kacheln und Chips sind keine Bedienelemente,
     dort verlangt 1.4.11 nichts — deshalb ändert sich an der Optik der
     Seite nichts. Ein LEERES Eingabefeld dagegen ist ausschließlich über
     seinen Rahmen als Feld erkennbar; auf einer section--soft war es
     praktisch unsichtbar. Dieser Ton hält den Grünstich der Linie und
     liegt bei 3,9:1 auf Weiß, 3,6:1 auf --c-bg-soft und 3,3:1 auf
     --c-bg-mute — alle drei Untergründe, auf denen ein Formular steht. */
  --c-field-line: #78847a;
  /* Dasselbe auf dunklem Grund (Newsletter im Footer, Suchfeld im
     Header-Panel): die bisherigen 18 % Deckkraft ergaben 1,5:1 gegen die
     Feldfläche. 45 % ergeben 3,9:1 gegen die Fläche und 4,5:1 gegen den
     Sektionsgrund. */
  --c-field-line-dark: rgba(255,255,255,.45);
  --c-text:       #1b211c;   /* near-black body text */
  --c-text-soft:  #586059;
  /* --c-white gab es bis 1.28.1, ebenfalls ohne Verwender. Weiß steht
     als Literal in der CSS (rund 100×) und ist keine Stellschraube der
     Marke — ein Token hätte nur so getan, als wäre es eine. Der
     Seitengrund heißt --c-bg. */

  /* --- Schrift auf dunklem Grund (v1.29.0) ---
     Die dunklen Bänder (Hero, Slider, Fuß, .section--ink, Kontaktbox)
     trugen zwölf feste Grautöne, keinen davon mit Namen. Alle hielten
     den Kontrast — aber wer eine neue dunkle Sektion baut, hat nichts
     zum Greifen und erfindet den dreizehnten. Vier Stufen statt zwölf
     Einzelwerten: die Zusammenlegung kostet höchstens zwei Prozent
     Helligkeit und hebt den leisesten Ton von 5,57:1 auf 6,24:1.
     Alle Werte gegen --c-ink #0d0d0d gerechnet. */
  --c-on-ink-strong: #e8ebe8;   /* 16,2:1 — Navigation, Feld-Beschriftungen, Grundfarbe der Heros */
  --c-on-ink:        #c9cfc9;   /* 12,3:1 — Fließtext im dunklen Band, Links im Fuß */
  --c-on-ink-soft:   #aab2aa;   /*  8,9:1 — zweite Stimme: Vorspann, Kartentext */
  --c-on-ink-mute:   #8a958a;   /*  6,2:1 — Kleingedrucktes, Platzhalter, Einwilligungszeile */

  /* --- Status (v1.29.0) ---
     Bewusst NICHT in der theme.json-Palette: Diese Farben gehören den
     Formularen und Event-Zuständen. Stünden sie im Block-Editor, würde
     irgendwann ein Fließtext rot. Und sie tragen nie allein — neben der
     Farbe steht immer ein Satz (SC 1.4.1). */
  --c-error:        #a4282a;              /* 7,2:1 auf Weiß, 6,6:1 auf Soft */
  --c-error-on-ink: #ff9d9d;              /* dasselbe im schwarzen Fuß: 9,8:1 — das Dunkelrot käme dort auf 2,7:1 */
  --c-error-bg:     rgba(214,54,56,.08);  /* Tönung der Meldung */
  --c-error-line:   rgba(214,54,56,.3);   /* Rahmen der Meldung */
  --c-warn-on-ink:  #ffb86b;              /* Hinweis im schwarzen Fuß, 11,4:1 */
  --c-no:           #b23b3b;              /* verneinende Aufzählung („Wer kann NICHT einziehen?") — kein Fehlerton, 5,9:1 auf Weiß */

  /* --- Type --- */
  --f-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --f-body:    "Plus Jakarta Sans", system-ui, sans-serif;

  /* --- Layout --- */
  --wrap:   1200px;
  --wrap-n: 960px;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow:    0 14px 40px -18px rgba(0,0,0,.30);
  --shadow-sm: 0 6px 20px -10px rgba(0,0,0,.22);
  --ease: cubic-bezier(.22,.61,.36,1);

  --header-h: 88px;
}

/* ----------------------------- Reset ----------------------------- */
*,*::before,*::after { box-sizing: border-box; }
/* scroll-padding-top hält den Sprung-/Fokus-Ziel unter dem klebenden
   Balken frei (SC 2.4.11). Das Weichscrollen dagegen ist Bewegung und
   respektiert deshalb die Systemeinstellung (v1.22.7) — Slider und
   Reveal tun das längst, nur diese Zeile fiel durch. */
html { scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  font-family: var(--f-body);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-green-text); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--c-green-text-d); }
h1,h2,h3,h4,h5,h6 { font-family: var(--f-display); color: var(--c-ink); line-height: 1.12; margin: 0 0 .4em; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul { margin: 0 0 1em; padding-left: 1.1em; }
/* Fokus-Ring im AA-Grün: besteht auf Weiß (5,3:1), Soft (4,8:1) und
   Schwarz (3,7:1) — das helle CI-Grün fiel auf Soft durch (2,7:1). */
:focus-visible { outline: 3px solid var(--c-green-text); outline-offset: 2px; border-radius: 4px; }
/* Sprungziel: <main> ist nur wegen des Sprunglinks fokussierbar
   (tabindex="-1"). Die halbe Seite zu umranden hilft niemandem — der
   Sprung selbst ist der sichtbare Vorgang (v1.22.7). */
main[tabindex="-1"]:focus { outline: none; }

/* ----------------------------- Layout helpers ----------------------------- */
.wrap { width: min(100% - 48px, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 48px, var(--wrap-n)); margin-inline: auto; }
.section { padding: clamp(56px, 8vw, 110px) 0; }
.section--soft { background: var(--c-bg-soft); }
.section--ink { background: var(--c-ink); color: var(--c-on-ink); }
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink h4 { color: #fff; }
.section--ink .lead { color: var(--c-on-ink-soft); }
.eyebrow {
  font-family: var(--f-display); font-weight: 700; font-size: .82rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--c-green-text);
  margin: 0 0 .9rem; display: inline-flex; align-items: center; gap: .55em;
}
/* Der Balken ist dekorativ — er darf das helle CI-Grün behalten. */
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--c-accent); display: inline-block; }
/* Auf Schwarz besteht das helle CI-Grün (6,5:1) — dort bleibt es. */
.section--ink .eyebrow { color: var(--c-accent); }
.section-head { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
/* v1.23.0: Vier Ganzseiten-Vorlagen begannen mit einer h2 und hatten
   damit gar keine Seitenüberschrift (gemessen: /events/ und /newsletter/
   live mit h1=0). Jetzt tragen sie eine h1 — und die braucht eine eigene
   Größe, sonst entschiede der Browser-Standard (2em) darüber, wie die
   wichtigste Zeile der Seite aussieht. Der Zielwert ist nicht erfunden:
   41,6 px ist genau die Größe, in der auf /events/ heute schon die
   Hauptüberschriften stehen. */
.section-head h1 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.lead { font-size: 1.18rem; color: var(--c-text-soft); }

/* image placeholder so layout reads even before remote images load */
.ph { background: linear-gradient(135deg, var(--c-bg-mute), var(--c-bg-mute-2)); }

/* ----------------------------- Buttons ----------------------------- */
.btn {
  --b: var(--c-green-text); --bd: var(--c-green-text-d);
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--f-display); font-weight: 600; font-size: 1rem;
  padding: .85em 1.6em; border-radius: 999px; cursor: pointer;
  background: var(--b); color: #fff; border: 2px solid var(--b);
  transition: transform .25s var(--ease), background .2s, box-shadow .25s;
  box-shadow: 0 10px 24px -12px rgba(58,170,53,.55);
}
.btn:hover { background: var(--bd); border-color: var(--bd); color:#fff; transform: translateY(-3px); box-shadow: 0 16px 30px -12px rgba(58,170,53,.6); }
.btn .arr { transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn--primary { --b: var(--c-green-text); --bd: var(--c-green-text-d); box-shadow: 0 10px 24px -12px rgba(58,170,53,.55); }
.btn--primary:hover { box-shadow: 0 16px 30px -12px rgba(58,170,53,.6); }
.btn--dark { --b: var(--c-ink); --bd: #000; box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); }
.btn--dark:hover { box-shadow: 0 16px 30px -12px rgba(0,0,0,.55); }
.btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line); box-shadow: none; }
.btn--ghost:hover { background: var(--c-ink); border-color: var(--c-ink); color:#fff; transform: translateY(-3px); }
.btn--lg { padding: 1.05em 2em; font-size: 1.08rem; }

/* arrow-link */
.alink { font-family: var(--f-display); font-weight: 600; display: inline-flex; align-items: center; gap: .45em; }
.alink .arr { transition: transform .25s var(--ease); }
.alink:hover .arr { transform: translateX(4px); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  /* Ruhezustand OPAK im CI-Schwarz: rgba(13,13,13,.92) über weißem Body
     kompositierte zu #202020 und verfälschte das Marken-Schwarz. */
  background: var(--c-ink);
  border-bottom: 1px solid rgba(255,255,255,.10);
  transition: box-shadow .3s, background .3s;
}
/* Glas-Effekt nur beim Scrollen — dort schimmert echter Inhalt durch. */
.site-header.is-scrolled {
  box-shadow: 0 10px 34px -18px rgba(0,0,0,.6);
  background: rgba(10,10,10,.96);
  backdrop-filter: saturate(140%) blur(12px);
}
.header-inner {
  width: min(100% - 48px, 1320px); margin-inline: auto;
  height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px;
  /* Zeile fix auf Balkenhöhe pinnen: das große Startseiten-Logo (Emblem)
     überragt dann nur selbst den Balken, statt die ganze Zeile (und damit
     die Navigation) mit nach unten zu schieben. */
  grid-template-rows: var(--header-h);
}
.nav-left  { justify-self: start; }
.nav-right { justify-self: end; }
.brand { justify-self: center; display: inline-flex; }
.brand img, .brand .brand-logo { height: 50px; width: auto; transition: height .35s var(--ease), margin-top .35s var(--ease); }
.brand .ph-logo { font-family: var(--f-display); font-weight: 800; font-size: 1.35rem; color: #fff; letter-spacing: -.02em; }
.brand .ph-logo span { color: var(--c-primary); }

.mainnav { display: flex; align-items: center; gap: 6px; }
.mainnav > li { position: relative; list-style: none; }
.mainnav a {
  display: inline-flex; align-items: center; gap: .35em;
  font-family: var(--f-display); font-weight: 600; font-size: .96rem;
  color: var(--c-on-ink-strong); padding: .55em .7em; border-radius: 10px;
}
.mainnav a:hover { color: #fff; background: rgba(255,255,255,.10); }
/* Die aktuelle Seite trug nur eine andere Farbe — wer Farben nicht
   unterscheidet, sah keinen Unterschied (v1.22.7, SC 1.4.1). Der Strich
   trägt die Information jetzt mit; `aria-current` sagt es ohnehin an. */
.mainnav a[aria-current="page"] {
  color: var(--c-primary);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.mainnav .has-sub > a::after { content: "▾"; font-size: .7em; opacity: .6; }
/* Auf .mainnav gescopet (v1.22.7): ungescopet legte diese Regel JEDE
   Liste mit der Klasse still — auch im mobilen Auszug, wo die
   Fallback-Menüs dieselbe Klasse ausgeben. Solange dort kein Menü mit
   Unterpunkten hängt, fiel es nicht auf; wer eines zuweist, hätte
   unsichtbare Unterpunkte bekommen. */
.mainnav .submenu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 230px;
  background: #fff; border: 1px solid var(--c-line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 8px; margin: 0; list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.mainnav .has-sub:hover .submenu,
.mainnav .has-sub:focus-within .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
/* v1.7.1: Farbe explizit — .submenu erbte sonst die helle Header-
   Linkfarbe (--c-on-ink-strong) und war auf dem weißen Panel unlesbar. */
.mainnav .submenu a { display: block; padding: .5em .7em; font-size: .92rem; border-radius: 8px; color: var(--c-ink); }
.mainnav .submenu a:hover { background: var(--c-bg-soft); color: var(--c-green-text); }
.nav-cta a { background: var(--c-green-text); color:#fff; }
.nav-cta a:hover { background: var(--c-green-text-d); color:#fff; }

/* wp_nav_menu() output compatibility (when a real menu is assigned) */
.mainnav .menu-item-has-children { position: relative; }
.mainnav .menu-item-has-children > a::after { content: "▾"; font-size: .7em; opacity: .6; margin-left: .3em; }
.mainnav .current-menu-item > a, .mainnav .current_page_item > a {
  color: var(--c-primary);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.mainnav .sub-menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 230px;
  background: #fff; border: 1px solid var(--c-line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 8px; margin: 0; list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.mainnav .menu-item-has-children:hover > .sub-menu,
.mainnav .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.mainnav .sub-menu a { display: block; padding: .5em .7em; font-size: .92rem; border-radius: 8px; color: var(--c-ink); }
.mainnav .sub-menu a:hover { background: var(--c-bg-soft); color: var(--c-green-text); }

.burger {
  display: none; flex-direction: column; gap: 5px; width: 46px; height: 46px;
  border: 1px solid rgba(255,255,255,.28); border-radius: 12px; background: rgba(255,255,255,.06);
  align-items: center; justify-content: center; cursor: pointer;
}
.burger span { width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.burger.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity: 0; }
.burger.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* mobile drawer */
.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 90;
  background: #fff; padding: 24px; overflow-y: auto;
  transform: translateX(100%); transition: transform .35s var(--ease);
  visibility: hidden;
}
.mobile-nav.is-open { transform: translateX(0); visibility: visible; }
.mobile-nav ul { list-style: none; padding: 0; margin: 0; }
.mobile-nav > ul > li { border-bottom: 1px solid var(--c-line); }
.mobile-nav a { display: block; padding: .9em .2em; font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; color: var(--c-ink); }
.mobile-nav .submenu a, .mobile-nav .sub-menu a { font-size: .98rem; font-weight: 500; color: var(--c-text-soft); padding-left: 1.2em; }

/* ============================================================
   HERO — großflächiger Banner mit Hintergrundbild (Full-Bleed)
   CI: Schwarz + Grün
   ============================================================ */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--c-ink);
  color: var(--c-on-ink-strong);
  min-height: clamp(620px, 88vh, 1000px);
  display: flex; align-items: center;
  padding: clamp(104px, 17vh, 210px) 0 clamp(76px, 10vh, 140px);
}
/* full-bleed background photo */
.hero-bg {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
/* legibility scrim — heavier on the left where the copy sits */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,8,8,.94) 0%, rgba(8,8,8,.78) 36%, rgba(8,8,8,.34) 68%, rgba(8,8,8,.52) 100%),
    linear-gradient(0deg, rgba(8,8,8,.72), transparent 48%);
}
/* green brand glow */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 80% at 90% -4%, rgba(58,170,53,.32), transparent 60%);
  mix-blend-mode: screen;
}
.hero .wrap { position: relative; z-index: 1; }
.hero-inner { max-width: 740px; }
.hero .eyebrow { color: var(--c-sun); }
.hero .eyebrow::before { background: var(--c-sun); }
.hero h1 { font-size: clamp(3rem, 7.6vw, 6.2rem); color: #fff; margin-bottom: .1em; letter-spacing: -.025em; line-height: 1.03; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.hero .h-sub { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.45rem, 3.4vw, 2.5rem); color: var(--c-sun); text-transform: lowercase; margin: 0 0 .65em; }
.hero .h-intro { font-size: clamp(1.14rem, 1.6vw, 1.38rem); color: var(--c-on-ink); max-width: 540px; text-shadow: 0 1px 18px rgba(0,0,0,.4); }

.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 2.1em; }
/* ghost CTA adapted for the dark banner */
.hero .btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); backdrop-filter: blur(4px); }
.hero .btn--ghost:hover { background: #fff; border-color: #fff; color: var(--c-ink); }

.hero-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 1.9em; }
.chip { font-family: var(--f-display); font-weight: 600; font-size: .86rem; background: #fff; border: 1px solid var(--c-line); padding: .5em 1em; border-radius: 999px; color: var(--c-ink); box-shadow: var(--shadow-sm); }
/* chips restyled glassy on the photo */
.hero .chip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; box-shadow: none; backdrop-filter: blur(8px); }
.hero .chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-sun); display: inline-block; margin-right: .55em; vertical-align: middle; }

/* floating location badge, anchored bottom-right of the banner */
.hero-loc {
  position: absolute; right: max(24px, (100% - var(--wrap)) / 2); bottom: clamp(20px, 4vh, 40px); z-index: 2;
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--f-display); font-weight: 600; font-size: .92rem; color: #fff;
  background: rgba(13,13,13,.55); backdrop-filter: saturate(140%) blur(10px);
  border: 1px solid rgba(255,255,255,.18); padding: .6em 1.05em; border-radius: 999px;
  box-shadow: var(--shadow);
}
.hero-loc .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-sun); box-shadow: 0 0 0 4px rgba(126,200,80,.25); }

@media (max-width: 980px) {
  .hero { min-height: clamp(520px, 78vh, 720px); padding: clamp(72px, 12vw, 110px) 0 clamp(56px, 9vw, 80px); }
  .hero::before { background: linear-gradient(90deg, rgba(8,8,8,.9), rgba(8,8,8,.62)), linear-gradient(0deg, rgba(8,8,8,.78), transparent 55%); }
  .hero-loc { display: none; }
}

/* ============================================================
   VALUES / TEXT + TEAM
   ============================================================ */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.split--rev .split-media { order: -1; }
.team-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--c-ink); }
.team-card img { width:100%; aspect-ratio: 4/3; object-fit: cover; }
.team-card .team-cap { padding: 22px 24px; }
.team-card .team-cap h3 { color:#fff; margin:0 0 .2em; }
.team-card .team-cap p { color:var(--c-on-ink-soft); margin:0 0 .9em; }

/* ============================================================
   START CARDS
   ============================================================ */
.cards-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.scard {
  background:#fff; border:1px solid var(--c-line); border-radius: var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.scard:hover { transform: translateY(-8px); box-shadow: var(--shadow); border-color: transparent; }
.scard-media { aspect-ratio: 16/11; overflow:hidden; }
.scard-media img { width:100%; height:100%; object-fit: cover; transition: transform .5s var(--ease); }
.scard:hover .scard-media img { transform: scale(1.06); }
.scard-body { padding: 24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.scard-body h3 { font-size: 1.3rem; margin-bottom:.4em; }
.scard-body h3 a { color: var(--c-ink); }
.scard:hover .scard-body h3 a { color: var(--c-green-text); }
.scard-body p { color: var(--c-text-soft); font-size: .98rem; flex:1; }
.scard-body .alink { margin-top: 1em; color: var(--c-green-text); }

/* ============================================================
   OFFER LISTS
   ============================================================ */
.offer-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 18px 48px; }
.offer-list { --haken: var(--c-primary); list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.offer-list li { position:relative; padding-left: 2em; }
.offer-list li::before {
  content:""; position:absolute; left:0; top:.32em; width:1.25em; height:1.25em;
  background: var(--haken); border-radius: 6px;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/contain no-repeat;
}

/* audience band */
.band { display:grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.band-card { background:#fff; border-radius: var(--radius-lg); padding: clamp(28px,4vw,48px); box-shadow: var(--shadow-sm); border:1px solid var(--c-line); }
.band-card .eyebrow { color: var(--c-green-text); }
.band-card .eyebrow::before { background: var(--c-primary); }
.band-card h3 { font-size: clamp(1.5rem,2.6vw,2rem); margin-bottom:.6em; }
.band-links { list-style:none; padding:0; margin: 1.2em 0 0; display:grid; gap:10px; }
.band-links a { display:flex; align-items:center; gap:.6em; font-family:var(--f-display); font-weight:600; color:var(--c-ink); padding:.7em .9em; border-radius:12px; background:var(--c-bg-soft); transition: background .2s, transform .2s; }
.band-links a:hover { background: var(--c-ink); color:#fff; transform: translateX(4px); }
.band-links a::before { content:"→"; color: var(--c-accent); font-weight:700; }

/* audience band on black */
.section--ink .band-card { background:var(--c-ink-2); border-color:var(--c-line-on-ink); box-shadow:none; }
.section--ink .band-card p { color:var(--c-on-ink-soft); }
.section--ink .band-card h3 { color:#fff; }
.section--ink .band-links a { background:var(--c-ink); color:var(--c-on-ink-strong); border:1px solid var(--c-line-on-ink); }
.section--ink .band-links a:hover { background: var(--c-green-text); border-color: var(--c-green-text); color:#fff; }
.section--ink .band-links a:hover::before { color:#fff; }
.band-links a:hover::before { color: var(--c-sun); }

/* tiles row (Team / Startups / Netzwerkpartner) */
.tiles-3 { display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.tile { position:relative; border-radius: var(--radius); overflow:hidden; aspect-ratio: 1/1; box-shadow: var(--shadow-sm); display:block; }
.tile img { width:100%; height:100%; object-fit: cover; transition: transform .5s var(--ease); }
.tile:hover img { transform: scale(1.07); }
.tile::after { content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,0) 55%); }
.tile h3 { position:absolute; left:22px; right:22px; bottom:18px; z-index:2; color:#fff; font-size:1.25rem; margin:0; }

/* ============================================================
   PARTNERS
   ============================================================ */
.partner-block + .partner-block { margin-top: 44px; }
.partner-label { font-family: var(--f-display); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:.85rem; color: var(--c-text-soft); margin-bottom: 18px; text-align:center; }
/* Kachelgröße (v1.23.2): Das Starthouse-Team meldete die Logos als zu
   klein. Zwei Größen tragen das Ergebnis — die Kachelbreite und der
   Innenabstand; das Logo selbst füllt seine Kachel schon vollständig.
   Gemessen an der laufenden Instanz bei 1280 px: Kachel 117 → 165,
   Logo 83 → 139 px.

   Warum flex und nicht grid: Bei `auto-fill` bleibt eine angebrochene
   letzte Reihe links stehen (18 Partner, 5 je Reihe → 3 Logos allein
   am linken Rand). Flex mit `justify-content:center` mittet JEDE Reihe,
   auch die letzte. `flex: 1 1 <basis>` lässt die Kacheln die Reihe noch
   ausfüllen, `max-width` deckelt sie — sonst würde eine Reihe mit zwei
   Kacheln zwei Riesenkacheln zeigen.

   Die Basis wächst mit dem Fenster (clamp): unter ~1000 px greift der
   untere Wert, damit die Zahl der Kacheln je Reihe auf Tablet und
   Handy dieselbe bleibt wie bisher. Auf dem Handy ändert sich dadurch
   nichts an der Aufteilung (2 je Reihe), nur der Innenabstand macht
   das Logo etwas größer (128 → 136 px). */
.partner-grid { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap: 18px; }
.partner-grid > * { flex: 1 1 clamp(140px, 15vw, 165px); max-width: 165px; }
.partner-grid.few > * { flex: 1 1 clamp(150px, 15vw, 185px); max-width: 185px; }
.partner-item { background:#fff; border:1px solid var(--c-line); border-radius: 16px; aspect-ratio: 1/1; display:grid; place-items:center; padding: 12px; transition: transform .25s var(--ease), box-shadow .25s; }
.partner-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.partner-item img { max-height: 100%; width:auto; object-fit: contain; filter: grayscale(1); opacity:.78; transition: filter .3s, opacity .3s; }
.partner-item:hover img { filter: none; opacity:1; }

/* Partner-Logos als native Core-Bild-Blöcke in einer Gruppe (.partner-grid):
   sauberes Markup, voll editierbar, kein wpautop-Workaround nötig. */
.partner-grid .wp-block-image,
.partner-grid .partner-item { margin: 0; }
.partner-grid .wp-block-image { background:#fff; border:1px solid var(--c-line); border-radius:16px; aspect-ratio:1/1; display:grid; place-items:center; padding:12px; transition: transform .25s var(--ease), box-shadow .25s; }
.partner-grid .wp-block-image:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.partner-grid .wp-block-image a { display:grid; place-items:center; width:100%; height:100%; }
.partner-grid .wp-block-image img { max-height:100%; width:auto; object-fit:contain; filter:grayscale(1); opacity:.78; transition: filter .3s, opacity .3s; }
.partner-grid .wp-block-image:hover img { filter:none; opacity:1; }

/* ============================================================
   STARTUP-KARTEN (1.27.0) — wendbare Karten der Startup-Leiste
   ([partner_leiste stil="karten"], Team-Entscheidung: Variante A
   aus dem Flip-Prototyp — Wende-Knopf, NICHT Hover).
   Beide Seiten liegen in derselben Grid-Zelle: der Container ist so
   hoch wie die höhere Seite, ganz ohne feste Kartenhöhe.
   ============================================================ */
.startup-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.startup-karte { perspective: 1200px; }
.sk-flaeche { display: grid; height: 100%; transform-style: preserve-3d; transition: transform .55s var(--ease); }
.sk-flaeche.geflippt { transform: rotateY(180deg); }
.sk-seite {
  grid-area: 1 / 1; position: relative;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: 22px; display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: box-shadow .25s;
}
.startup-karte:hover .sk-seite { box-shadow: var(--shadow-sm); }
.sk-rueck { transform: rotateY(180deg); background: var(--c-ink); border-color: var(--c-ink); justify-content: center; gap: 8px; }
.sk-front-link { display: flex; flex-direction: column; align-items: center; gap: 6px; color: inherit; height: 100%; }
.sk-logo { display: grid; place-items: center; min-height: 96px; margin-bottom: 6px; }
.sk-logo img { max-height: 96px; max-width: 180px; width: auto; object-fit: contain; }
.sk-logo-ph { width: 96px; height: 96px; border: 2px dashed var(--c-primary); border-radius: 16px; }
.sk-name { margin: 0; font-size: 1.15rem; }
.startup-karte:hover .sk-name { color: var(--c-green-text); }
.sk-claim { margin: 0; font-size: .92rem; color: var(--c-text-soft); line-height: 1.5; }
/* Der Wende-Knopf ist ein Bedienelement → --c-field-line (Regel 1.22.8);
   36px Trefferfläche (SC 2.5.8). Er hängt an seiner SEITE, damit er mit
   ihr verschwindet (backface). */
.sk-flip {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--c-field-line); background: #fff; color: var(--c-green-text);
  cursor: pointer; display: grid; place-items: center;
  transition: border-color .2s, background .2s;
}
.sk-flip:hover { border-color: var(--c-green-text); background: var(--c-bg-soft); }
.sk-rueck .sk-flip { background: var(--c-ink); border-color: var(--c-field-line-dark); color: #fff; }
.sk-rueck .sk-flip:hover { background: var(--c-ink-2); }
/* Fokusring auf der dunklen Seite: --c-sun statt AA-Grün (Konvention 1.22.5). */
.sk-rueck .sk-flip:focus-visible, .sk-web:focus-visible { outline-color: var(--c-sun); }
.sk-foto { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; }
.sk-initialen {
  width: 84px; height: 84px; border-radius: 50%; background: var(--c-primary); color: var(--c-ink);
  font-family: var(--f-display); font-weight: 800; font-size: 1.6rem;
  display: grid; place-items: center;
}
.sk-gname { margin: 4px 0 0; font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; color: #fff; }
.sk-ginfo { margin: 0; font-size: .88rem; color: var(--c-on-ink-soft); line-height: 1.5; }
.sk-web {
  margin-top: 10px; display: inline-block; padding: 9px 18px; border-radius: 999px;
  background: var(--c-green-text); color: #fff; font-family: var(--f-display); font-weight: 700; font-size: .9rem;
}
.sk-web:hover { background: var(--c-green-text-d); color: #fff; }
/* Bewegung reduziert: Überblenden statt 3D-Drehung — die Seiten wechseln
   per visibility, nichts dreht sich. */
@media (prefers-reduced-motion: reduce) {
  .sk-flaeche { transition: none; transform: none !important; }
  .sk-rueck { transform: none; }
  .sk-flaeche:not(.geflippt) .sk-rueck { visibility: hidden; }
  .sk-flaeche.geflippt .sk-vorn { visibility: hidden; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--c-ink); color:var(--c-on-ink-soft); padding: clamp(48px,7vw,84px) 0 28px; }
.footer-grid { display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 44px; padding-bottom: 40px; border-bottom:1px solid rgba(255,255,255,.12); }
.site-footer h4 { color:#fff; font-size:1.05rem; margin-bottom:.8em; }
.site-footer a { color:var(--c-on-ink); }
.site-footer a:hover { color: var(--c-sun); }
.foot-brand img { height: 54px; margin-bottom: 18px; }
.foot-brand .ph-logo { font-family:var(--f-display); font-weight:800; font-size:1.5rem; color:#fff; }
.foot-brand .ph-logo span { color: var(--c-accent); }
.socials { display:flex; gap:12px; margin-top:18px; }
.socials a { width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.08); display:grid; place-items:center; color:#fff; transition: background .25s, transform .25s; }
.socials a:hover { background: var(--c-accent); transform: translateY(-3px); }
.socials svg { width:20px; height:20px; }

/* newsletter */
.news-form { display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px; }
/* Bewusst auf [type="email"] gescoped: seit die Datenschutz-Checkbox im
   Formular steht (v1.18.0), würde ein nacktes `input` auch sie auf
   180px Pillenbreite ziehen. */
.news-form input[type="email"] { flex:1; min-width: 180px; padding:.85em 1.1em; border-radius:999px; border:1px solid var(--c-field-line-dark); background:rgba(255,255,255,.06); color:#fff; font-family:var(--f-body); font-size:.95rem; }
.news-form input[type="email"]::placeholder { color:var(--c-on-ink-mute); }
/* Kein `outline:none` (v1.22.5): der Ring aus :focus-visible (oben) ist
   der Indikator, der Randwechsel nur die Zugabe. Auf dem schwarzen
   Footer trägt das AA-Grün zu schwach (3,7:1) — dort das helle
   CI-Grün-Hell, das dort 9,5:1 erreicht. */
.news-form input[type="email"]:focus { border-color: var(--c-sun); }
.news-form input[type="email"]:focus-visible { outline-color: var(--c-sun); }
.news-note { font-size:.82rem; color:var(--c-on-ink-mute); margin-top:.8em; }

.foot-bottom { display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; padding-top: 24px; font-size:.88rem; }
.foot-legal { display:flex; gap:20px; flex-wrap:wrap; }
.foot-fund { display:flex; align-items:center; gap:14px; }
.foot-fund span { font-size:.8rem; color:var(--c-on-ink-mute); }
.foot-fund img { height:46px; background:#fff; padding:6px 10px; border-radius:8px; }

/* small print rows */
.hours p { margin:0 0 .3em; font-size:.96rem; }
.hours .note { font-size:.8rem; color:var(--c-on-ink-mute); margin-top:.6em; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .mainnav { gap: 0; }
  .mainnav a { padding: .5em .5em; font-size: .9rem; }
}
@media (max-width: 980px) {
  :root { --header-h: 74px; }
  .nav-left, .nav-right { display: none; }
  .burger { display: flex; }
  .nav-left.show-burger { display:flex; }
  .header-inner { grid-template-columns: auto 1fr auto; }
  .brand { justify-self: start; }
  .hero-grid, .split, .offer-grid, .band, .footer-grid { grid-template-columns: 1fr; }
  .split--rev .split-media { order: 0; }
  .cards-3, .tiles-3 { grid-template-columns: 1fr 1fr; }
  .footer-grid { gap: 32px; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .cards-3, .tiles-3 { grid-template-columns: 1fr; }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   INNER-PAGE COMPONENTS
   ============================================================ */
/* page hero */
.page-hero { background: var(--c-ink); color:#fff; padding: clamp(48px,7vw,96px) 0 0; position:relative; overflow:hidden; }
.page-hero .eyebrow { color: var(--c-sun); }
.page-hero .eyebrow::before { background: var(--c-sun); }
.page-hero h1 { color:#fff; font-size: clamp(2.4rem,5.5vw,4.2rem); margin:0 0 .15em; }
.page-hero .ph-tagline { font-family:var(--f-display); font-weight:700; font-size: clamp(1.2rem,2.6vw,1.9rem); color: var(--c-primary); }
.page-hero .ph-intro { color:var(--c-on-ink); font-size:1.15rem; max-width:640px; }
.page-hero-inner { display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px,4vw,60px); align-items:center; padding-bottom: clamp(40px,6vw,72px); }
.page-hero-media { border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow:hidden; align-self:end; box-shadow: var(--shadow); }
.page-hero-media img { width:100%; height:100%; object-fit: cover; }
.page-hero .hero-cta { margin-top: 1.8em; }

/* prose */
.prose { max-width: 760px; }
.prose h2 { font-size: clamp(1.7rem,3vw,2.4rem); margin-top: 1.4em; }
.prose h3 { font-size: 1.35rem; margin-top: 1.6em; color: var(--c-ink); }
.prose p { color: var(--c-text); }
.prose a { font-weight: 600; }
.prose ul { display:grid; gap:.4em; }
.subhead { color: var(--c-green-text); font-family:var(--f-display); font-weight:700; letter-spacing:.04em; margin-bottom:.2em; }

/* ============================================================
   404 (v1.22.9) — kein eigenes Layout, nur vier Handgriffe an
   bestehenden Bausteinen. Eine Fehlerseite ist der schlechteste
   denkbare Ort, um neue CSS-Schulden anzuhäufen: Man sieht sie
   selten, und genau deshalb merkt niemand, wenn sie kaputtgeht.
   ============================================================ */
.fof-titel { font-size: clamp(1.4rem, 2.4vw, 1.9rem); max-width: 640px; }
.fof-suche { margin-bottom: clamp(32px, 5vw, 52px); }
.fof-suche .search-form { max-width: 520px; }
/* Vier Wege statt der üblichen zwei Säulen — auf breiten Schirmen
   nebeneinander, darunter greift die 1fr-Regel der Responsive-Sektion. */
.fof-wege { grid-template-columns: repeat(2, 1fr); }
.fof-wege .pillar p:last-child { margin-top: .9em; }
.fof-events { margin-top: clamp(32px, 5vw, 52px); max-width: 520px; }
.fof-melden {
  margin-top: clamp(32px, 5vw, 52px); max-width: 760px;
  color: var(--c-text-soft); font-size: .98rem;
}

/* pillar / icon cards */
.pillars { display:grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.pillar { background:#fff; border:1px solid var(--c-line); border-radius: var(--radius); padding: 30px; transition: transform .3s var(--ease), box-shadow .3s; }
.pillar:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.pillar .pic { width:64px; height:64px; display:grid; place-items:center; background: var(--c-bg-soft); border-radius: 16px; margin-bottom: 18px; }
.pillar .pic img { width:36px; height:36px; object-fit:contain; }
.pillar h3 { margin:0 0 .4em; font-size:1.25rem; }
.pillar p { color: var(--c-text-soft); font-size:.98rem; margin:0; }

/* pricing cards */
.price-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 22px; }
.price-card { position:relative; background:#fff; border:1px solid var(--c-line); border-radius: var(--radius); padding: 28px 26px; display:flex; flex-direction:column; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.price-card.is-feature { border-color: var(--c-primary); box-shadow: 0 0 0 1px var(--c-primary); }
/* Badge trägt weiße Schrift → AA-Grün (v1.22.5), vgl. .btn. */
.price-card .pc-badge { position:absolute; top:-12px; right:20px; background: var(--c-green-text); color:#fff; font-family:var(--f-display); font-weight:700; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; padding:.4em .9em; border-radius:999px; }
.price-card .pc-name { font-family:var(--f-display); font-weight:700; font-size:1.3rem; color:var(--c-ink); margin:0; }
.price-card .pc-sub { color: var(--c-text-soft); font-size:.92rem; margin:.2em 0 0; }
.price-card .pc-price { display:flex; align-items:baseline; gap:.3em; margin: 18px 0 4px; }
.price-card .pc-amount { font-family:var(--f-display); font-weight:800; font-size:2.5rem; color: var(--c-ink); line-height:1; }
.price-card .pc-amount::before { content:"€"; font-size:1.4rem; font-weight:700; margin-right:.08em; color: var(--c-primary); }
.price-card .pc-period { color: var(--c-text-soft); font-size:.95rem; }
.price-card .pc-feat { list-style:none; padding:0; margin: 16px 0 20px; display:grid; gap:10px; }
.price-card .pc-feat li { position:relative; padding-left: 1.7em; font-size:.95rem; color: var(--c-text); }
.price-card .pc-feat li::before { content:""; position:absolute; left:0; top:.28em; width:1.05em; height:1.05em; background: var(--c-primary); border-radius:5px;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/contain no-repeat; }
.price-card .btn { margin-top:auto; justify-content:center; }
.price-card .pc-note { font-size:.8rem; color: var(--c-text-soft); margin: 12px 0 0; line-height:1.4; }

/* room category intro */
.cat-head { max-width: 720px; margin-bottom: 32px; }
.cat-head .subhead { font-size: .9rem; text-transform: uppercase; letter-spacing:.12em; }
.cat-head h2 { font-size: clamp(1.7rem,3.2vw,2.5rem); }

/* phase accordion */
.phases { display:grid; gap: 12px; max-width: 880px; }
.phase { border:1px solid var(--c-line); border-radius: 16px; background:#fff; overflow:hidden; }
.phase[open] { border-color: var(--c-primary); box-shadow: var(--shadow-sm); }
.phase summary { cursor:pointer; list-style:none; padding: 20px 24px; display:flex; align-items:center; gap:16px; font-family:var(--f-display); font-weight:700; color:var(--c-ink); font-size:1.12rem; }
.phase summary::-webkit-details-marker { display:none; }
.phase summary .pnum { flex:0 0 auto; width:34px; height:34px; border-radius:50%; background: var(--c-ink); color:#fff; display:grid; place-items:center; font-size:.9rem; }
/* Die Nummer trägt weiße Schrift → AA-Grün (v1.22.5). */
.phase[open] summary .pnum { background: var(--c-green-text); }
.phase summary .ptag { margin-left:auto; font-weight:600; font-size:.82rem; color: var(--c-green-text); text-transform:uppercase; letter-spacing:.06em; }
.phase summary .chev { flex:0 0 auto; transition: transform .25s var(--ease); color: var(--c-text-soft); }
.phase[open] summary .chev { transform: rotate(180deg); }
.phase-body { padding: 0 24px 22px 74px; }
.phase-body p { color: var(--c-text); margin:.2em 0 1em; }
.phase-body ul { display:grid; gap:8px; }

/* info band (dark, for network blurbs) */
.info-band { display:grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.info-card { background:var(--c-ink-2); border:1px solid var(--c-line-on-ink); border-radius: var(--radius-lg); padding: clamp(26px,3.5vw,40px); }
.info-card .subhead { color: var(--c-sun); font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; }
.info-card h3 { color:#fff; font-size: clamp(1.4rem,2.4vw,1.9rem); margin:.2em 0 .5em; }
.info-card p { color:var(--c-on-ink-soft); }
.info-card a { color: var(--c-sun); font-weight:600; }

/* notice */
.notice { border-left: 4px solid var(--c-primary); background: var(--c-bg-soft); padding: 20px 24px; border-radius: 0 14px 14px 0; max-width: 760px; }
.notice strong { color: var(--c-ink); }
.notice em { color: var(--c-text-soft); }

/* legal / long-form text */
.legal { max-width: 820px; }
.legal h2 { font-size: clamp(1.5rem,2.6vw,2rem); margin-top: 1.8em; padding-top: 1.4em; border-top: 1px solid var(--c-line); }
.legal h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.legal h3 { font-size: 1.2rem; margin-top: 1.5em; }
.legal h4 { font-size: 1.02rem; margin-top: 1.3em; color: var(--c-text); }
.legal p, .legal li { color: var(--c-text); font-size: 1rem; }
.legal ul { display: grid; gap: .4em; }
.legal a { color: var(--c-primary-d); font-weight: 600; word-break: break-word; }

/* team / person cards */
.team-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.person { background:#fff; border:1px solid var(--c-line); border-radius: var(--radius); overflow:hidden; transition: transform .3s var(--ease), box-shadow .3s; }
.person:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.person-media { aspect-ratio: 4/4.4; overflow:hidden; background: var(--c-bg-mute); }
.person-media img { width:100%; height:100%; object-fit: cover; object-position: top center; }
.person-body { padding: 20px 22px 24px; }
.person-body h3 { margin:0 0 .1em; font-size:1.3rem; }
.person-role { color: var(--c-green-text); font-weight:600; font-family:var(--f-display); font-size:.95rem; margin:0 0 .8em; }
.person-contact { display:grid; gap:6px; font-size:.95rem; }
.person-contact a { display:inline-flex; align-items:center; gap:.5em; color: var(--c-text); }
.person-contact a:hover { color: var(--c-green-text); }
.person-contact svg { width:16px; height:16px; flex:0 0 auto; color: var(--c-primary); }

/* logo cards (startups) */
.logo-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 20px; }
.logo-card { background:#fff; border:1px solid var(--c-line); border-radius: var(--radius); padding: 24px; display:flex; flex-direction:column; gap:14px; transition: transform .3s var(--ease), box-shadow .3s; }
.logo-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.logo-card .lc-logo { height: 64px; display:flex; align-items:center; }
.logo-card .lc-logo img { max-height:64px; max-width:160px; width:auto; object-fit: contain; }
.logo-card h3 { margin:0; font-size:1.1rem; }
.logo-card h3 a { color: var(--c-ink); }
.logo-card:hover h3 a { color: var(--c-green-text); }
.logo-card p { margin:0; color: var(--c-text-soft); font-size:.92rem; }

/* address / contact split */
.contact-box { background: var(--c-ink); color:var(--c-on-ink); border-radius: var(--radius-lg); padding: clamp(28px,4vw,44px); }
.contact-box h3 { color:#fff; }
.contact-box a { color: var(--c-sun); }
.contact-box .cb-row { display:grid; gap:4px; margin-bottom: 18px; }
.contact-box .cb-row b { color:#fff; }

/* ============================================================
   FOOTER v2 (shared, pagebuilder-free)
   ============================================================ */
.footer2 { background: var(--c-ink); color:var(--c-on-ink-soft); padding: clamp(52px,7vw,88px) 0 26px; }
.footer2 .f2-grid { display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer2 h4, .footer2 .f2-titel { color:#fff; font-size:.82rem; text-transform:uppercase; letter-spacing:.12em; margin-bottom:1em; }
.footer2 a { color:var(--c-on-ink); }
.footer2 a:hover { color: var(--c-sun); }
.footer2 .f2-brand .wordmark { font-family:var(--f-display); font-weight:800; font-size:1.5rem; color:#fff; letter-spacing:-.01em; }
.footer2 .f2-brand .wordmark b { color: var(--c-primary); font-weight:800; }
.footer2 .f2-brand .f2-logo { height: 54px; width: auto; display: block; }
.footer2 .f2-blurb { margin:.8em 0 1em; max-width: 320px; color:var(--c-on-ink-mute); }
.footer2 .f2-lock { display:inline-flex; align-items:center; gap:.5em; font-size:.85rem; color: var(--c-sun); background: rgba(126,200,80,.1); border:1px solid rgba(126,200,80,.25); padding:.45em .9em; border-radius:999px; }
.footer2 ul { list-style:none; padding:0; margin:0; display:grid; gap:.6em; }
.footer2 .f2-news { margin-top: 22px; }

/* --- Newsletter-Band über die volle Breite (v1.18.0) ---------------
   Eigene Zeile zwischen Menü-Raster und Öffnungszeiten. Die Abstände
   sind auf die Nachbarn abgestimmt: oben 36px zum Menü-Raster (das
   selbst 40px Fußabstand mitbringt), unten 36px zur Trennlinie vor
   den Öffnungszeiten (24px) — so wirkt das Band als eigener Block,
   ohne die Fußzeile auseinanderzuziehen. */
.footer2 .f2-newsband {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(300px, 1.5fr);
  gap: 12px 56px;
  align-items: start;
  padding: 36px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer2 .f2-newsband .f2-news { margin-top: 0; display: block; }
.footer2 .f2-newscopy h4, .footer2 .f2-newscopy .f2-titel { margin-bottom: .45em; }
.footer2 .f2-newscopy p { margin: 0; color: var(--c-on-ink-mute); max-width: 42ch; }
.footer2 .f2-newsrow { display: flex; gap: 10px; flex-wrap: wrap; }
.footer2 .f2-newsrow input { flex: 1 1 260px; }
.footer2 .f2-consent { margin: .9em 0 0; }
.footer2 .f2-consent label { display: flex; gap: .6em; align-items: flex-start; font-size: .85rem; color: var(--c-on-ink-mute); }
.footer2 .f2-consent input { margin-top: .25em; flex: 0 0 auto; accent-color: var(--c-primary); }
.footer2 .f2-consent a { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 782px) {
  .footer2 .f2-newsband { grid-template-columns: 1fr; gap: 16px; }
}

.footer2 .f2-mid { display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; padding: 24px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.footer2 .f2-hours { font-size:.92rem; color:var(--c-on-ink-soft); }
.footer2 .f2-hours b { color:#fff; font-weight:600; }
.footer2 .f2-fund { display:flex; align-items:center; gap:12px; }
.footer2 .f2-fund span { font-size:.78rem; color:var(--c-on-ink-mute); }
.footer2 .f2-fund img { height:42px; background:#fff; padding:5px 9px; border-radius:7px; }
.footer2 .f2-bottom { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding-top: 22px; font-size:.85rem; color:var(--c-on-ink-mute); }
.footer2 .f2-socials { display:flex; gap:10px; margin-top:18px; }
.footer2 .f2-socials a { width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.08); display:grid; place-items:center; color:#fff; transition: background .25s, transform .25s; }
.footer2 .f2-socials a:hover { background: var(--c-primary); transform: translateY(-3px); }
.footer2 .f2-socials svg { width:19px; height:19px; }

@media (max-width: 980px) {
  .page-hero-inner, .pillars, .info-band { grid-template-columns: 1fr; }
  .footer2 .f2-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer2 .f2-brand { grid-column: 1 / -1; }
  .page-hero-media { border-radius: var(--radius-lg); }
}
@media (max-width: 560px) {
  .pillars { grid-template-columns: 1fr; }
  .footer2 .f2-grid { grid-template-columns: 1fr; }
  .phase-body { padding-left: 24px; }
}


/* reveal-on-scroll — purely additive entrance, never hides content.
   Opacity is never gated, so content is always visible even if JS, the
   observer, or animation playback is unavailable. Real browsers get a
   gentle rise; worst case the element is just shifted a few px. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .reveal.in { animation: sh-rise .65s var(--ease) both; }
}
@keyframes sh-rise {
  from { transform: translateY(24px); }
  to   { transform: none; }
}

/* ============================================================
   NEWSLETTER-STATUS (serverseitig gerendert, ehrlich)
   ============================================================ */
.news-note--ok  { color: var(--c-sun); }
.news-note--err { color: var(--c-warn-on-ink); }

/* ============================================================
   CONSENT-GATE für Drittanbieter-Embeds (Monday, Spotify …)
   Lädt erst nach Klick – kein Tracker ohne Einwilligung.
   ============================================================ */
.embed-consent {
  background: var(--c-bg-soft); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: clamp(28px, 5vw, 52px);
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1em;
}
.embed-consent__title { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; color: var(--c-ink); margin: 0; }
.embed-consent__btn {
  font-family: var(--f-display); font-weight: 600; font-size: 1rem;
  display: inline-flex; align-items: center; gap: .5em;
  background: var(--c-green-text); color: #fff; border: 2px solid var(--c-green-text);
  padding: .85em 1.6em; border-radius: 999px; cursor: pointer;
  transition: background .2s, transform .25s var(--ease);
}
.embed-consent__btn:hover { background: var(--c-green-text-d); border-color: var(--c-green-text-d); transform: translateY(-2px); }
.embed-consent__note { font-size: .88rem; color: var(--c-text-soft); margin: 0; max-width: 46ch; }
.embed-consent.is-loaded { background: none; border: 0; padding: 0; display: block; }

/* ============================================================
   HERO als Core-Cover-Block (.st-hero) — voll im Block-Editor
   editierbar (Bild + Text), wpautop-fest. Scrim kommt aus dem
   Cover-Overlay (im Block gesetzt), Grün-Glow hier.
   ============================================================ */
.wp-block-cover.st-hero {
  min-height: clamp(560px, 82vh, 900px);
  align-items: center; color: var(--c-on-ink-strong); isolation: isolate;
  padding-block: clamp(96px, 14vh, 180px);
}
.wp-block-cover.st-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(58% 80% at 90% -4%, rgba(58,170,53,.32), transparent 60%);
  mix-blend-mode: screen;
}
.wp-block-cover.st-hero .wp-block-cover__inner-container {
  width: min(100% - 48px, var(--wrap)); margin-inline: auto; position: relative; z-index: 2;
}
.st-hero .hero-inner { max-width: 760px; }
.st-hero .eyebrow { color: var(--c-sun); }
.st-hero .eyebrow::before { background: var(--c-sun); }
.st-hero h1 { color: #fff; font-size: clamp(3rem, 7.6vw, 6.2rem); margin: 0 0 .08em; letter-spacing: -.025em; line-height: 1.03; }
.st-hero .h-sub { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.45rem, 3.4vw, 2.5rem); color: var(--c-sun); text-transform: lowercase; margin: 0 0 .55em; }
.st-hero .h-intro { font-size: clamp(1.14rem, 1.6vw, 1.38rem); color: var(--c-on-ink); max-width: 540px; margin: 0; }
.st-hero .hero-cta { margin-top: 2em; }
.st-hero .btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.st-hero .btn--ghost:hover { background: #fff; border-color: #fff; color: var(--c-ink); }
.st-hero .hero-badges { margin-top: 1.8em; }
.st-hero .chip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; box-shadow: none; backdrop-filter: blur(8px); }
.st-hero .chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-sun); display: inline-block; margin-right: .55em; vertical-align: middle; }

/* ============================================================
   CORE-BLOCK-ANPASSUNGEN
   Die Startseite besteht aus nativen Blöcken (cover/columns/column/
   group/image/list/buttons). Hier bekommen sie das Starthouse-Layout –
   sauber über die vorhandenen Klassen, mit Spezifität statt !important.
   Core nutzt für Layout-Spacing :where() (Spezifität 0) – unsere
   Klassenregeln gewinnen daher zuverlässig.
   ============================================================ */

/* Section-Gutter + zentrierte Inhaltsbreite */
.wp-block-group.section { padding-inline: 24px; }
.wp-block-group.section > .wp-block-group,
.wp-block-group.section > .wp-block-columns { max-width: var(--wrap); margin-inline: auto; }
/* Shortcode-Ausgaben ([event_liste], [newsletter_archiv], [news_archiv] …)
   sind nackte <div>/<nav> als Direktkinder der Sektion — ohne diese Regel
   laufen sie über die volle Breite (Befund 2026-07-23: Eventboxen zu weit
   links; gleiche Mechanik griffe beim Jahres-<nav> der Archiv-Seite). */
.wp-block-group.section > div,
.wp-block-group.section > nav { max-width: var(--wrap); margin-inline: auto; }

/* ============================================================
   FIX (v1.7.1): Core-Constrained-Layout vs. Starthouse-Layout.
   theme.json setzt contentSize 760px — Core zentrierte damit
   Überschriften/Absätze INNERHALB unserer Gruppen, die Headline
   „rutschte ein", während .eyebrow (eigene Margin-Regel gewinnt
   gegen Cores :where()-Regel) links blieb. Die Breite regeln
   unsere Sektions-Klassen selbst — Core-Zentrierung hier aus.
   ============================================================ */
.wp-block-group.section > :where(h1, h2, h3, h4, h5, h6, p, ul, ol) { max-width: var(--wrap); margin-inline: auto; }
/* !important ist hier kein Stilbruch, sondern Notwehr: Cores generierte
   constrained-Styles (.wp-container-… > :where(…)) setzen margin-left/right
   selbst mit !important — ohne Gegen-!important zentriert WP 7.x die
   Überschriften in section-heads trotz dieser Regel (Live-Befund
   2026-07-24: „Was wir dir bieten" rückte 240px ein). */
.wp-block-group.section .wp-block-group > :where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure) { max-width: none; margin-left: 0 !important; margin-right: 0 !important; }
/* Ausnahme (1.18.2, Bjoerns Befund „Gemeinsam stark"): in der ZENTRIERTEN
   Kopf-Variante müssen die auf Lesebreite gedeckelten Text-Boxen mittig
   bleiben — der Riegel oben pinnte die 720px-H2 an die Wrap-Kante,
   während der inline-flex-Eyebrow weiter der text-align-Mitte folgte.
   Höhere Spezifität + !important, damit die Ausnahme den Riegel schlägt. */
.wp-block-group.section .wp-block-group.section-head--center > :where(h1, h2, h3, h4, p) { margin-left: auto !important; margin-right: auto !important; }
/* Lesebreiten der Design-Referenz bleiben erhalten (linksbündig am Wrap-Rand): */
.wp-block-group.section .wp-block-group.section-head > :where(h1, h2, h3, p) { max-width: 720px; }
.wp-block-group.section > .wp-block-group.prose { max-width: var(--wrap); margin-inline: auto; }
.wp-block-group.section .wp-block-group.prose > :where(h2, h3, h4, p, ul, ol) { max-width: 760px; }

/* Spalten-Reihen als Starthouse-Grid (schlägt Core-Flex sicher) */
.wp-block-columns.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.wp-block-columns.cards-3, .wp-block-columns.tiles-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.wp-block-columns.offer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 48px; }
.wp-block-columns.band { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.wp-block-columns.split > .wp-block-column,
.wp-block-columns.cards-3 > .wp-block-column,
.wp-block-columns.tiles-3 > .wp-block-column,
.wp-block-columns.offer-grid > .wp-block-column,
.wp-block-columns.band > .wp-block-column { min-width: 0; }
@media (max-width: 980px) {
  .wp-block-columns.split, .wp-block-columns.offer-grid, .wp-block-columns.band,
  .wp-block-columns.cards-3, .wp-block-columns.tiles-3 { grid-template-columns: 1fr; }
}
@media (min-width: 621px) and (max-width: 980px) {
  .wp-block-columns.cards-3, .wp-block-columns.tiles-3 { grid-template-columns: 1fr 1fr; }
}

/* Bild-Blöcke ohne Default-Margin */
.scard-media.wp-block-image, .tile-img.wp-block-image, .team-card-img.wp-block-image { margin: 0; }

/* Start-Karten (scard ist jetzt eine Spalte) */
.wp-block-column.scard { padding: 0; }
.scard-media.wp-block-image { aspect-ratio: 16/11; overflow: hidden; border-radius: 0; }
.scard-media.wp-block-image img { width: 100%; height: 100%; object-fit: cover; }

/* Team-Card */
.team-card .team-card-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* Tiles: Bild oben, Titel darunter (editierbar, sauber statt Overlay-Hack) */
.wp-block-column.tile { position: static; aspect-ratio: auto; box-shadow: none; border-radius: 0; overflow: visible; background: none; display: block; }
.tile .tile-img.wp-block-image { border-radius: var(--radius); overflow: hidden; aspect-ratio: 1/1; box-shadow: var(--shadow-sm); }
.tile .tile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.tile:hover .tile-img img { transform: scale(1.05); }
.tile h3 { position: static; left: auto; right: auto; bottom: auto; margin: .7em 0 0; color: var(--c-ink); font-size: 1.25rem; }
.tile h3 a { color: var(--c-ink); }
.tile:hover h3 a { color: var(--c-accent); }
.tile::after { content: none; }

/* Partner-Logos: native Bild-Blöcke in einer Gruppe.
   Dieselbe Kachelgröße wie die Shortcode-Leiste (v1.23.2) — die Regeln
   stehen hier ein zweites Mal, weil `.partner-grid.wp-block-group`
   zwei Klassen trägt und damit `.partner-grid` weiter oben schlägt.
   Zwei Fassungen desselben Bausteins müssen dieselbe Antwort geben. */
.partner-grid.wp-block-group { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px; }
.partner-grid.wp-block-group > * { margin-block: 0; flex: 1 1 clamp(140px, 15vw, 165px); max-width: 165px; }
.partner-grid.wp-block-group.few > * { flex: 1 1 clamp(150px, 15vw, 185px); max-width: 185px; }

/* zentrierte Section-Überschrift (Partner) */
.section-head--center { text-align: center; margin-inline: auto; }
.section-head--center .eyebrow { justify-content: center; }

/* Core-Buttons im Starthouse-Pill-Stil (Hero-CTAs)
   AA-Grün wie bei .btn (v1.22.5): Die Umstellung aus v1.17.0 hatte nur
   die Theme-Buttons (.btn) erfasst — die Core-Block-Buttons trugen
   weiterhin das helle CI-Grün und damit weiße Schrift auf 3,0:1. Das
   betraf JEDE CTA aus den Patterns (Hero, Preiskarten, Digital Hub).
   #267c24 hält denselben Farbwinkel und liegt bei 5,3:1. */
.wp-block-button__link.wp-element-button {
  font-family: var(--f-display); font-weight: 600; font-size: 1rem;
  border-radius: 999px; padding: .85em 1.6em;
  background: var(--c-green-text); color: #fff; border: 2px solid var(--c-green-text);
  box-shadow: 0 10px 24px -12px rgba(58,170,53,.55);
  transition: transform .25s var(--ease), background .2s, box-shadow .25s;
}
.wp-block-button__link.wp-element-button:hover { background: var(--c-green-text-d); border-color: var(--c-green-text-d); transform: translateY(-3px); }
.hero-cta .wp-block-button__link.wp-element-button { font-size: 1.08rem; padding: 1.05em 2em; }
.st-hero .is-style-outline .wp-block-button__link.wp-element-button { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); box-shadow: none; }
.st-hero .is-style-outline .wp-block-button__link.wp-element-button:hover { background: #fff; color: var(--c-ink); border-color: #fff; }

/* ============================================================
   WÜRFEL-DISSOLVE-HINTERGRUND (aus der Design-Referenz)
   Motiv abgeleitet aus dem Starthouse-Logo (Würfel, der sich in
   kleinere Würfel auflöst). Dekorative Ebene hinter dem Inhalt.
   Aktivierbar per Section-Klasse .has-cube-bg (im Block-Editor
   unter „Zusätzliche CSS-Klasse") — #partner bleibt aus der
   Referenz heraus ebenfalls aktiv.
   ============================================================ */
#partner, .has-cube-bg { position: relative; overflow: hidden; }
#partner::before, .has-cube-bg::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../img/cube-dissolve.svg") top center / 100% auto no-repeat;
  opacity: .55;
}
/* Die Liste ist eine Positivliste — und genau daran fehlte sie (v1.23.2):
   Die Logo-Leisten kommen aus dem Shortcode als `<div class="partner-block">`
   und standen auf keiner dieser Zeilen. Ohne `z-index` bleiben sie
   unpositioniert und werden damit VOR dem absolut positionierten
   ::before gemalt — der Deko-Würfel lag also über den Logos, sichtbar
   auf der Startseite über der Träger- und der Startup-Leiste. */
#partner > .wrap, .has-cube-bg > .wrap,
#partner > .partner-block, .has-cube-bg > .partner-block,
#partner > .wp-block-group, .has-cube-bg > .wp-block-group,
#partner > .wp-block-columns, .has-cube-bg > .wp-block-columns { position: relative; z-index: 1; }
@media (max-width: 700px) {
  #partner::before, .has-cube-bg::before { opacity: .4; }
}

/* Leiste "Gründer & Startups im Starthouse" — Platzhalter-Kacheln
   im Stil der übrigen Logo-Integrationen. Später mit echten
   Startup-Logos befüllen (einfach ein Bild in die Kachel setzen). */
.partner-item.startup-ph,
.partner-grid .wp-block-image.startup-ph {
  background: var(--c-bg-soft);
  border-style: dashed;
  border-color: color-mix(in srgb, var(--c-primary) 32%, var(--c-line));
}
.partner-item.startup-ph::after,
.partner-grid .wp-block-image.startup-ph::after {
  content: "";
  /* wächst mit der Kachel mit (v1.23.2): 46 px wirkten in der auf 185 px
     vergrößerten Kachel verloren — gleiches Größenverhältnis wie zuvor. */
  width: 58px; height: 58px; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpolygon points='32,4 60,20 32,36 4,20' fill='%237ec850'/%3E%3Cpolygon points='4,20 32,36 32,60 4,44' fill='%232c8a29'/%3E%3Cpolygon points='32,36 60,20 60,44 32,60' fill='%233aaa35'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.partner-item.startup-ph:hover::after,
.partner-grid .wp-block-image.startup-ph:hover::after { transform: translateY(-3px) scale(1.06); opacity: .9; }

/* ============================================================
   BLOG/NEWS-LOOP (index.php, single.php)
   ============================================================ */
.f2-news .btn--primary { box-shadow: none; }
.post-teaser { padding-block: 1.6em; border-bottom: 1px solid var(--c-line); }
.post-teaser:last-of-type { border-bottom: 0; }
.post-teaser .entry-title { margin: 0 0 .2em; }
.post-teaser .entry-title a { color: var(--c-ink); }
.post-teaser .entry-title a:hover { color: var(--c-accent); }
.entry-meta { color: var(--c-text-soft); font-size: .92rem; margin: 0 0 1em; }
.entry-thumb { display: block; border-radius: var(--radius); overflow: hidden; margin: 0 0 1.2em; }
.entry-thumb img { width: 100%; height: auto; display: block; }
.pagination { margin-top: 2.5em; }
.pagination .nav-links { display: flex; gap: 1em; flex-wrap: wrap; align-items: center; }
.post-navigation .nav-links { display: flex; justify-content: space-between; gap: 1.5em; margin-top: 2.5em; }

/* ============================================================
   FIX: kein weißer Spalt zwischen Site-Header und Hero.
   WordPress/wpautop kann vor dem Cover-Block ein leeres <p>
   oder einen Flow-Margin einfügen — beides hier neutralisiert.
   ============================================================ */
main > article > p:first-child:empty { display: none; }
main > article > *:first-child,
main > article > .wp-block-cover.st-hero:first-child { margin-top: 0; margin-block-start: 0; }
body .is-layout-flow > .wp-block-cover.st-hero:first-child { margin-block-start: 0; }
.wp-block-cover.st-hero { margin-top: 0; }

/* ============================================================
   PARTNER-DETAILSEITE (single-starthouse_partner.php)
   Nur für „Gründer & Startups" — Logo-Karte links (sticky),
   Inhalt rechts im Prose-Stil.
   ============================================================ */
.partner-single { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: clamp(28px, 4.5vw, 64px); align-items: start; }
.partner-single-logo {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  aspect-ratio: 1/1; display: grid; place-items: center; padding: 32px;
  box-shadow: var(--shadow-sm);
  position: sticky; top: calc(var(--header-h) + 24px);
}
.partner-single-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.partner-single-logo.startup-ph { border-style: dashed; background: var(--c-bg-soft); }
.partner-single-body .lead { font-size: 1.15rem; color: var(--c-text-soft); }
.partner-single-actions { display: flex; gap: .8em; flex-wrap: wrap; margin-top: 2em; }
@media (max-width: 820px) {
  .partner-single { grid-template-columns: 1fr; }
  .partner-single-logo { max-width: 260px; position: static; }
}

/* Kacheln ohne Link (span statt a) verhalten sich optisch wie die übrigen */
span.partner-item { cursor: default; }

/* ============================================================
   STARTSEITEN-LOGO „EMBLEM" (v1.5.0)
   Nur auf der Startseite (body.home): Logo 3× so groß (150px),
   Oberkante bleibt im 88px-Balken, der Überhang (~81px) ragt in
   den dunklen Hero hinein. Beim Scrollen (is-scrolled) schrumpft
   es sanft auf das Normalmaß — die Transition liegt auf .brand img.
   margin-top hält die Oberkante an der Position des kleinen Logos,
   damit der Überhang ausschließlich nach unten wächst.
   ============================================================ */
/* Ohne eigenes Emblem bleibt alles wie seit 1.5.0: dasselbe Bild wird
   vergrößert. Die Maße gelten für ein HOCHFORMATIGES Logo — das war die
   Marke bis 2025. Eine Querfassung wird hier 493px breit und fällt aus
   dem Balken; dafür gibt es seit 1.31.0 das eigene Emblem-Bild unten. */
.home .site-header:not(.is-scrolled) .brand:not(.brand--mit-emblem) img,
.home .site-header:not(.is-scrolled) .brand:not(.brand--mit-emblem) .brand-logo {
  height: 150px;
  margin-top: 100px; /* (88−150−M)/2+M = 19px Oberkante → M=100 */
}
/* Text-Wortmarke (Fallback ohne Logo-Bild) moderat mitvergrößern */
.home .site-header:not(.is-scrolled) .brand .ph-logo { font-size: 2.2rem; }

/* --- Eigenes Emblem-Bild (v1.31.0) ---
   Der Balken (50px) und das Emblem (118px) verlangen zwei verschiedene
   Logoformen — gemessen an der Marke von 2025: gestapelt steht als Emblem
   mit 236×118, schrumpft im Balken aber auf 100×50, wo „SPESSART" nicht
   mehr lesbar ist; quer liest sich im Balken mit 165×50, wird als Emblem
   aber 493px breit. Deshalb liegen beide Bilder im Markup und die CSS
   zeigt je Zustand eines. Die Höhe 118 folgt derselben Formel wie oben:
   M = H − 50 hält die Oberkante bei 19px, der Überhang wächst nur nach
   unten. Der weiche Übergang beim Scrollen entfällt in diesem Fall —
   ein Bildwechsel lässt sich nicht interpolieren; dafür bleibt die
   Wortmarke in beiden Zuständen lesbar. */
.brand-emblem { display: none; }
.home .site-header:not(.is-scrolled) .brand--mit-emblem .brand-logo { display: none; }
.home .site-header:not(.is-scrolled) .brand--mit-emblem .brand-emblem {
  display: block;
  height: 150px;
  margin-top: 100px; /* Formel: M = H − 50 hält die Oberkante bei 19px */
  width: auto;
  /* Rettungsnetz (v1.31.1). Die Marke steht in der MITTLEREN Spalte eines
     `1fr auto 1fr`-Rasters — wird das Fenster schmaler, drücken die beiden
     Menüs sie zusammen. Mit `width:auto` allein staucht das Bild dann:
     live gemessen 13 % bei 1048 px Fensterbreite und 34 % bei 998 px, und
     zwar schon vor dieser Version. `object-fit` lässt es stattdessen
     proportional kleiner werden — eine Wortmarke darf nie verzerren. */
  max-width: 100%;
  object-fit: contain;
}

/* Die Breite, die zwischen den beiden Menüs übrig bleibt, schrumpft mit
   dem Fenster — nicht die Höhe. Deshalb stuft das Emblem hier ab, statt
   sich ins Rettungsnetz fallen zu lassen. Werte am Bild gemessen, jeweils
   die größte Höhe, die ohne Stauchung durchgeht. */
@media (max-width: 1199px) {
  .home .site-header:not(.is-scrolled) .brand--mit-emblem .brand-emblem {
    height: 100px;
    margin-top: 50px;
  }
}
@media (max-width: 1080px) {
  .home .site-header:not(.is-scrolled) .brand--mit-emblem .brand-emblem {
    height: 78px;
    margin-top: 28px;
  }
}

@media (max-width: 980px) {
  .home .site-header:not(.is-scrolled) .brand:not(.brand--mit-emblem) img,
  .home .site-header:not(.is-scrolled) .brand:not(.brand--mit-emblem) .brand-logo {
    height: 90px;
    margin-top: 40px; /* Balken 74px, Oberkante 12px, Überhang 28px */
  }
  .home .site-header:not(.is-scrolled) .brand--mit-emblem .brand-emblem {
    height: 84px;
    margin-top: 34px; /* dieselbe Formel: M = H − 50 */
  }
  .home .site-header:not(.is-scrolled) .brand .ph-logo { font-size: 1.7rem; }
}

/* ============================================================
   HERO-SLIDER (v1.6) — [hero_slider] aus CPT starthouse_slide.
   Ohne JS: nur Slide 1 sichtbar (statisch), Navigation versteckt.
   Das Slider-Script setzt .is-ready und schaltet auf Overlay-Fade.
   ============================================================ */
.st-slider {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--c-ink); color: var(--c-on-ink-strong);
  min-height: clamp(560px, 82vh, 900px);
}
.st-slide {
  display: flex; align-items: center;
  min-height: inherit;
  padding: clamp(96px, 14vh, 180px) 0 clamp(96px, 16vh, 200px);
  position: relative;
}
.st-slider:not(.is-ready) .st-slide:not(:first-child) { display: none; }
.st-slider:not(.is-ready) .st-slider-nav { display: none; }
.st-slider.is-ready .st-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .7s var(--ease), visibility .7s;
}
.st-slider.is-ready .st-slide.is-active { opacity: 1; visibility: visible; z-index: 1; position: relative; }
@media (prefers-reduced-motion: reduce) {
  .st-slider.is-ready .st-slide { transition: none; }
}

/* Hintergrundbild + Scrim wie beim statischen Hero */
.st-slide-bg {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.st-slide::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,8,8,.94) 0%, rgba(8,8,8,.78) 36%, rgba(8,8,8,.34) 68%, rgba(8,8,8,.52) 100%),
    linear-gradient(0deg, rgba(8,8,8,.72), transparent 48%);
}
.st-slide::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 80% at 90% -4%, rgba(58,170,53,.32), transparent 60%);
  mix-blend-mode: screen;
}
.st-slide .wrap { position: relative; z-index: 1; width: min(100% - 48px, var(--wrap)); margin-inline: auto; }
.st-slide-inner { max-width: 740px; }
.st-slide-title { color: #fff; font-size: clamp(2.6rem, 6.4vw, 5.2rem); margin: 0 0 .12em; letter-spacing: -.025em; line-height: 1.05; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.st-slide-sub { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.3rem, 3vw, 2.1rem); color: var(--c-sun); margin: 0 0 .6em; }
.st-slide .hero-badges { margin-top: 1.6em; }
.st-slide .chip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; box-shadow: none; backdrop-filter: blur(8px); }
.st-slide .chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-sun); display: inline-block; margin-right: .55em; vertical-align: middle; }
.st-slide-cta { margin: 2em 0 0; }

/* Navigation: Pfeile + Punkte, unten mittig über dem Bild */
.st-slider-nav {
  position: absolute; left: 0; right: 0; bottom: clamp(18px, 4vh, 36px); z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 16px;
}
.st-slider-arrow {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(255,255,255,.1); color: #fff;
  border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(6px);
  font-size: 1.05rem; line-height: 1;
  transition: background .25s, transform .25s var(--ease);
}
.st-slider-arrow:hover { background: var(--c-primary); border-color: var(--c-primary); transform: translateY(-2px); }
.st-slider-dots { display: flex; gap: 2px; }
/* Mindestzielfläche 24×24 (WCAG 2.2, SC 2.5.8, v1.22.5): der Punkt maß
   11px bei 10px Abstand — Mittelpunktabstand 21px, die 24px-Kreise der
   Abstands-Ausnahme überschnitten sich also. Die Fläche wächst auf
   24px, der sichtbare Punkt bleibt bei 11px (::before). */
.st-slider-dot {
  width: 24px; height: 24px; border-radius: 50%; padding: 0; cursor: pointer;
  background: none; border: 0;
  display: grid; place-items: center;
}
.st-slider-dot::before {
  content: ""; width: 11px; height: 11px; border-radius: 50%;
  background: rgba(255,255,255,.35);
  transition: background .25s, transform .25s var(--ease);
}
.st-slider-dot:hover::before { background: rgba(255,255,255,.7); }
.st-slider-dot.is-active::before { background: var(--c-sun); transform: scale(1.25); }
/* Pause/Play-Schalter (Barrierefreiheit: Autoplay dauerhaft stoppbar);
   Button hängt das Slider-JS an. */
.st-slider-pause {
  position: absolute; right: clamp(14px, 3vw, 28px); bottom: clamp(18px, 4vh, 36px); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(255,255,255,.1); color: #fff;
  border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(6px);
  font-size: 1rem; line-height: 1;
  transition: background .25s, transform .25s var(--ease);
}
.st-slider-pause:hover { background: var(--c-primary); border-color: var(--c-primary); }
.st-slider-pause[aria-pressed="true"] { background: var(--c-sun); border-color: var(--c-sun); color: var(--c-ink); }
@media (max-width: 980px) {
  .st-slider { min-height: clamp(480px, 74vh, 680px); }
  .st-slide::before { background: linear-gradient(90deg, rgba(8,8,8,.9), rgba(8,8,8,.62)), linear-gradient(0deg, rgba(8,8,8,.78), transparent 55%); }
}

/* ============================================================
   SUCHE (v1.6) — Lupe im Header, Panel darunter, Feld im Drawer,
   Formular-Basisstil (hell) für search.php.
   ============================================================ */
.search-form { display: flex; gap: 10px; max-width: 560px; }
.search-field {
  flex: 1; min-width: 0; padding: .8em 1.2em;
  border-radius: 999px; border: 1px solid var(--c-field-line);
  background: #fff; color: var(--c-text);
  font-family: var(--f-body); font-size: 1rem;
}
/* Der weiche Schein lag bei 1,2:1 und trug nichts — der Ring aus
   :focus-visible (oben) trägt. `outline:none` ist deshalb raus (v1.22.5). */
.search-field:focus { border-color: var(--c-green-text); }
.search-submit {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  /* AA-Grün wie alle gefüllten Knöpfe (v1.22.5): Die Lupe bestand als
     Grafik mit 3,01:1 gerade eben — nach der Umstellung von .btn und den
     Core-Buttons wäre sie aber der einzige hellgrüne Knopf geblieben. */
  background: var(--c-green-text); color: #fff; border: 2px solid var(--c-green-text);
  transition: background .2s, transform .25s var(--ease);
}
.search-submit:hover { background: var(--c-green-text-d); border-color: var(--c-green-text-d); transform: translateY(-2px); }
.search-again { margin-top: 1.2em; }
.search-term { color: var(--c-primary); }

/* Lupe im Header (Desktop) — gestylt wie die mainnav-Links */
.nav-right { display: flex; align-items: center; gap: 6px; }
.search-toggle {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  background: none; border: 0; border-radius: 10px; cursor: pointer; color: var(--c-on-ink-strong);
  transition: background .2s, color .2s;
}
.search-toggle:hover, .search-toggle[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.10); }

/* Panel unter dem Header-Balken (dunkel). Ohne JS dauerhaft sichtbar,
   mit JS (html.js) zugeklappt bis .is-open. */
.header-search { background: var(--c-ink); border-top: 1px solid rgba(255,255,255,.10); padding: 16px 0; }
html.js .header-search { display: none; }
html.js .header-search.is-open { display: block; }
.header-search .search-form { max-width: 560px; margin-inline: auto; }
.header-search .search-field {
  background: rgba(255,255,255,.06); border-color: var(--c-field-line-dark); color: #fff;
}
.header-search .search-field::placeholder { color: var(--c-on-ink-mute); }
.header-search .search-field:focus { border-color: var(--c-sun); box-shadow: none; }
/* Dunkles Panel: heller Ring (9,5:1) statt AA-Grün (3,7:1). */
.header-search .search-field:focus-visible { outline-color: var(--c-sun); }

/* Suchfeld im mobilen Drawer (heller Grund) */
.mobile-search { padding: 0 0 18px; border-bottom: 1px solid var(--c-line); margin-bottom: 6px; }
@media (max-width: 980px) {
  /* .nav-right erneut verstecken: die display:flex-Regel oben (Lupe)
     überschreibt sonst das display:none aus der Responsive-Sektion. */
  .nav-right, .search-toggle, .header-search { display: none; }
  html.js .header-search.is-open { display: none; }
}

/* ============================================================
   FORMULARE (v1.7) — gemeinsamer Stil für Event-Anmeldung,
   Ideen-Check und Kontakt (.sh-form). Status: .form-note.
   ============================================================ */
.sh-form label { display: block; font-family: var(--f-display); font-weight: 600; font-size: .95rem; margin-bottom: .35em; color: var(--c-ink); }
.sh-form input[type="text"],
.sh-form input[type="email"],
.sh-form input[type="tel"],
.sh-form input[type="number"],
.sh-form select,
.sh-form textarea {
  width: 100%; padding: .8em 1.1em;
  border-radius: 14px; border: 1px solid var(--c-field-line);
  background: #fff; color: var(--c-text);
  font-family: var(--f-body); font-size: 1rem;
}
/* Fokus (v1.22.5): `outline:none` löschte den Ring aus :focus-visible
   ausgerechnet in allen Formularen — Kontakt, Anmeldung, Ideen-Check,
   Raumanfrage, Mitglieder-Buchung. Der Ersatz trug nicht: der Schein
   bei 18 % Deckkraft erreicht 1,2:1, blieb also der Randwechsel von
   Grau auf Grün — 3,0:1 und Information allein über Farbe (SC 1.4.1).
   Jetzt: sichtbarer Ring, Randwechsel als Zugabe. */
/* v1.22.8: Der Randwechsel ging auf das helle CI-Grün — 2,7:1 gegen den
   Sektionsgrund. Damit wurde die Umrandung beim Fokussieren SCHLECHTER
   als im Ruhezustand (3,6:1). Jetzt das AA-Grün, 4,8:1. Gefunden hat das
   der Scanner in `a11y-kontrast-fund`, nicht das Auge. */
.sh-form input:focus, .sh-form select:focus, .sh-form textarea:focus { border-color: var(--c-green-text); }
.sh-form textarea { resize: vertical; }
.sh-form p { margin: 0 0 1.1em; }
.sh-form fieldset { border: 0; padding: 0; margin: 0 0 1.6em; }
.sh-form legend { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; color: var(--c-ink); margin-bottom: .9em; padding: 0; }
.sh-form-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.sh-check label { display: flex; gap: .6em; align-items: flex-start; font-weight: 500; font-size: .92rem; color: var(--c-text-soft); }
.sh-check input { margin-top: .3em; flex: 0 0 auto; accent-color: var(--c-primary); }
.sh-hinweis { font-size: .88rem; color: var(--c-text-soft); }
/* Legende zum Sternchen — steht VOR den Feldern, sonst kommt sie zu spät. */
.sh-pflicht { font-size: .88rem; color: var(--c-text-soft); margin: 0 0 1.4em; }
/* Honeypot: für Menschen (und Screenreader) unsichtbar */
.sh-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.form-note { border-radius: 12px; padding: .9em 1.2em; font-weight: 600; font-family: var(--f-display); }
/* v1.22.8: Das Grün stand auf der grün getönten Fläche — auf Weiß reichte
   das (4,66:1), auf einer section--soft nicht mehr (4,27:1). Und genau
   dort stehen Kontakt und Ideen-Check. Eine Stufe dunkler: 5,4:1 auf
   Soft, 5,9:1 auf Weiß, Fläche unverändert. */
.form-note--ok  { background: rgba(58,170,53,.12); color: var(--c-green-text-d); border: 1px solid rgba(58,170,53,.35); }
.form-note--err { background: var(--c-error-bg); color: var(--c-error); border: 1px solid var(--c-error-line); }
/* Die Meldung bekommt beim Laden den Fokus (starthouse.js). Sie ist kein
   Bedienelement — deshalb kein Ring, sie ist ja schon der Blickfang. */
.form-note:focus, .news-note:focus { outline: none; }

/* ============================================================
   FELDFEHLER (v1.22.6) — die Meldung steht AM Feld, nicht nur
   als Sammelhinweis oben (SC 3.3.1). Träger der Information ist
   der Text selbst: wo vorher nichts stand, steht jetzt ein Satz —
   die Farbe kommt obendrauf, sie trägt nicht allein (SC 1.4.1).
   ============================================================ */
.sh-feldfehler {
  display: block; margin-top: .4em;
  font-family: var(--f-display); font-weight: 600; font-size: .88rem;
  color: var(--c-error); /* 7,2:1 auf Weiß, 6,6:1 auf Soft */
}
/* Zusätzlich zur Farbe ein dickerer Rand — box-sizing hält die Maße.
   Die Elementnamen stehen hier nicht zur Zierde: Die Basisregel oben ist
   `.sh-form input[type="text"]` (0,2,1) und schlägt ein bloßes
   `.sh-form [aria-invalid]` (0,2,0). Ohne sie bliebe der Rahmen grau —
   im Browser nachgemessen, nicht angenommen. */
/* `.news-form` stand hier mit — und war tote Zeile: das Band gibt es nur
   im dunklen Fuss, wo die .footer2-Regel unten (0,3,1) diese hier (0,2,1)
   immer schlaegt. Das Dunkelrot kaeme dort auf 2,4:1 gegen Schwarz. Raus,
   damit die CSS sagt, was gilt (v1.22.8). */
.sh-form input[aria-invalid="true"],
.sh-form select[aria-invalid="true"],
.sh-form textarea[aria-invalid="true"] { border-color: var(--c-error); border-width: 2px; }
/* Ankreuzfelder rendert der Browser selbst — ein Rahmenwechsel bleibt dort
   unsichtbar. Deshalb box-shadow statt outline: outline würde den
   Fokus-Ring überschreiben, sobald das Feld beides zugleich ist. */
.sh-form input[type="checkbox"][aria-invalid="true"] { box-shadow: 0 0 0 2px var(--c-error); border-radius: 3px; }
/* Auf dem schwarzen Footer trägt das Dunkelrot nicht (2,7:1). */
.footer2 .sh-feldfehler { color: var(--c-error-on-ink); }              /* 9,8:1 auf Ink */
.footer2 .news-form input[aria-invalid="true"] { border-color: var(--c-error-on-ink); }
.footer2 .news-form input[type="checkbox"][aria-invalid="true"] { box-shadow: 0 0 0 2px var(--c-error-on-ink); }
.footer2 .f2-consent .sh-feldfehler { margin-left: 1.9em; }

/* Sichtbares Label über dem Newsletter-Feld (v1.22.6, B1) */
.footer2 .f2-newslabel { margin: 0 0 .45em; }
.footer2 .f2-newslabel label { font-family: var(--f-display); font-weight: 600; font-size: .9rem; color: var(--c-on-ink-strong); }

@media (max-width: 620px) {
  .sh-form-zeile { grid-template-columns: 1fr; }
}

/* ============================================================
   EVENTS (v1.7) — [event_liste] + Detailseite mit Termin-Box.
   ============================================================ */
.event-liste { display: grid; gap: 18px; }
.event-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.event-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: transparent; }
.event-card-link { display: flex; gap: 22px; padding: 22px 24px; color: inherit; align-items: flex-start; }
.event-datum {
  flex: 0 0 auto; width: 72px; text-align: center;
  background: var(--c-ink); color: #fff; border-radius: 14px; padding: 10px 6px 12px;
}
.event-datum .event-tag { display: block; font-family: var(--f-display); font-weight: 800; font-size: 1.7rem; line-height: 1.1; }
.event-datum .event-monat { display: block; font-family: var(--f-display); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--c-sun); }
.event-card-body { min-width: 0; }
.event-meta { margin: 0 0 .3em; display: flex; gap: 8px; flex-wrap: wrap; }
.event-art, .event-voll {
  font-family: var(--f-display); font-weight: 600; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .08em;
  padding: .3em .8em; border-radius: 999px;
}
.event-art { background: var(--c-bg-soft); color: var(--c-primary-d); }
.event-voll { background: var(--c-error-bg); color: var(--c-error); }
.event-titel { margin: 0 0 .15em; font-size: 1.3rem; }
.event-card:hover .event-titel { color: var(--c-accent); }
.event-termin { margin: 0; font-weight: 600; font-family: var(--f-display); font-size: .95rem; color: var(--c-primary-d); }
.event-ort { margin: .1em 0 0; font-size: .92rem; color: var(--c-text-soft); }
.event-teaser { margin: .6em 0 0; font-size: .96rem; color: var(--c-text-soft); }
/* „Details & Anmeldung" ist Fließtext (17px/600), nicht große Typo —
   dort trägt das helle CI-Grün nicht (3,0:1). AA-Grün ab v1.22.5. */
.event-card .alink { margin-top: .7em; display: inline-flex; color: var(--c-green-text); }
.event-leer { color: var(--c-text-soft); }

/* Detailseite: Inhalt + sticky Termin-Box */
.event-hero-abstand { height: clamp(24px, 4vw, 48px); }
.event-single { display: grid; grid-template-columns: 1fr minmax(300px, 380px); gap: clamp(28px, 4.5vw, 64px); align-items: start; }
.event-box {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 32px); box-shadow: var(--shadow-sm);
  position: sticky; top: calc(var(--header-h) + 24px);
}
.event-box-titel { font-size: 1.25rem; margin-bottom: .8em; }
.event-box-daten { margin: 0 0 1.4em; display: grid; gap: .25em; }
.event-box-daten dt { font-family: var(--f-display); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--c-text-soft); margin-top: .7em; }
.event-box-daten dd { margin: 0; color: var(--c-text); }
.event-box-hinweis { color: var(--c-text-soft); }
.event-box .form-note { margin-bottom: 1.2em; }
.event-zurueck { margin-top: clamp(28px, 4vw, 44px); }

/* Zusatzfelder der Anmeldung (1.33.0): Hinweis im Label, Ernährung als
   Radiogruppe — die Legende spricht hier wie ein Feld-Label, nicht wie
   eine Abschnittsüberschrift. */
.sh-feldhinweis { display: block; font-weight: 500; font-size: .85rem; color: var(--c-text-soft); margin-top: .15em; }
.sh-form .anm-ernaehrung { margin-bottom: 1.1em; }
.sh-form .anm-ernaehrung legend { font-weight: 600; font-size: .95rem; margin-bottom: .45em; }
.sh-form input[type="number"]#anm-personen { max-width: 8em; }

/* Teilen + QR unter dem Event (1.33.0) */
.event-teilen { margin-top: clamp(32px, 4.5vw, 52px); padding-top: clamp(22px, 3vw, 30px); border-top: 1px solid var(--c-line); }
.prose .event-teilen .event-teilen-titel { font-size: 1.25rem; margin: 0 0 .7em; }   /* schlägt .prose h2 — eine Nebenrubrik, keine Inhaltsüberschrift */
/* .btn setzt display — ohne diese Zeile wäre der Knopf auch ohne JS sichtbar. */
.event-teilen-knopf[hidden] { display: none; }
.event-teilen-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 0 0 1em; }
.event-teilen-adresse { margin: 0 0 .4em; }
.event-teilen-adresse label { display: block; font-family: var(--f-display); font-weight: 600; font-size: .9rem; margin-bottom: .3em; color: var(--c-text-soft); }
.event-teilen-url { width: 100%; max-width: 34em; font: inherit; font-size: .92rem; padding: .55em .7em; border: 1px solid var(--c-field-line); border-radius: 8px; background: var(--c-bg-soft); color: var(--c-text); }
.event-teilen-status { min-height: 1.5em; margin: 0 0 1em; font-weight: 600; color: var(--c-green-text); }
.event-qr summary { cursor: pointer; font-family: var(--f-display); font-weight: 600; color: var(--c-green-text); padding: .3em 0; }
.event-qr-inhalt { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: .8em; }
.event-qr-bild { width: 180px; height: 180px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-bg); }
.event-qr-laden { display: grid; gap: .5em; margin: 0; }
.event-qr-hinweis { font-size: .85rem; color: var(--c-text-soft); }
@media print {
  .event-teilen-aktionen, .event-teilen-adresse, .event-teilen-status { display: none; }
}
@media (max-width: 860px) {
  .event-single { grid-template-columns: 1fr; }
  .event-box { position: static; }
  .event-card-link { flex-direction: column; gap: 14px; }
}

/* Kleine Themen-Box (1.26.0): Partner-Termine wie die Beratertage der
   Aktivsenioren — bewusst schmaler und leiser als die Event-Karten,
   damit die Box als Einschub liest, nicht als zweite Terminliste. */
.event-mini {
  max-width: 720px; margin-inline: auto;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 32px); box-shadow: var(--shadow-sm);
}
/* Die Wrap-Regel (.section > .wp-block-group, Spezifität 0,3,0) schlägt
   .event-mini — ohne diese Gegenregel wäre die Box 1200px breit
   (dieselbe Falle wie v1.7.2 bei pillars/phases). */
.wp-block-group.section > .wp-block-group.event-mini { max-width: 720px; }
.section--soft .event-mini { border-color: transparent; }
.event-mini .eyebrow { margin-bottom: .3em; }
.event-mini h2 { font-size: 1.35rem; margin-bottom: .35em; }
.event-mini p { margin: 0 0 .8em; font-size: .96rem; color: var(--c-text-soft); }
.event-mini-liste { list-style: none; margin: 1em 0; padding: 0; display: grid; gap: 8px; }
.event-mini-termin a {
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
  padding: 10px 14px; border: 1px solid var(--c-line); border-radius: var(--radius);
  color: inherit; transition: border-color .2s, background .2s;
}
.event-mini-termin a:hover { border-color: var(--c-primary-d); background: var(--c-bg-soft); }
.event-mini-datum { font-family: var(--f-display); font-weight: 700; font-size: .92rem; color: var(--c-green-text); }
.event-mini-titel { font-size: .95rem; }
.event-mini-leer { color: var(--c-text-soft); font-size: .96rem; }
.event-mini .alink { display: inline-flex; }

/* Jahresübersicht (1.26.0): der vollständige Kalender eines Jahres als
   kompakte Monatsblöcke — Übernahme des Bestandsseiten-Eventkalenders.
   Vergangene Zeilen sind gedämpft; dass ein Termin vorbei ist, sagt
   sein Datum (keine Nur-Farbe-Information, SC 1.4.1). */
.event-jahr { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(18px, 2.5vw, 28px); align-items: start; }
.event-jahr-monat {
  margin: 0 0 .5em; font-family: var(--f-display); font-weight: 700; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--c-text-soft);
  border-bottom: 1px solid var(--c-line); padding-bottom: .4em;
}
.event-jahr-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.event-jahr-termin { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; font-size: .95rem; }
/* 5.4em traegt auch das laengste deutsche Kurzdatum („Do, 12.11.")
   einzeilig — bei 4.6em brach es um (im Browser gemessen). */
.event-jahr-datum { flex: 0 0 5.4em; font-family: var(--f-display); font-weight: 700; font-size: .88rem; color: var(--c-green-text); }
.event-jahr-titel { color: var(--c-text); }
.event-jahr-titel:hover { color: var(--c-green-text-d); }
.event-jahr-art { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-soft); }
/* Dämpfung über das bestehende Soft-Token (6,5:1 auf Weiß, 5,9:1 auf
   --c-bg-soft) — kein neues Grau, das auf einem der Untergründe unter
   4,5:1 rutschen könnte. */
.event-jahr-termin--vorbei .event-jahr-datum,
.event-jahr-termin--vorbei .event-jahr-titel { color: var(--c-text-soft); }

/* ============================================================
   IDEEN-CHECK (v1.7) — Slot-Auswahl als Radio-Karten.
   ============================================================ */
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.slot-option { display: block; cursor: pointer; }
.slot-option input { position: absolute; opacity: 0; pointer-events: none; }
/* Die Kachel IST das Radio — das echte <input> liegt auf opacity:0
   darüber. Damit ist ihr Rahmen die Umrandung eines Bedienelements und
   nicht Zierde: --c-field-line statt --c-line (v1.22.8, SC 1.4.11). */
.slot-option-inner {
  position: relative;
  display: grid; gap: .15em; height: 100%;
  background: #fff; border: 2px solid var(--c-field-line); border-radius: 14px;
  padding: 14px 46px 14px 16px; transition: border-color .2s, box-shadow .2s, transform .2s var(--ease);
}
/* Gewählt/nicht gewählt hing allein an der Rahmenfarbe — Grün gegen Grau,
   also Information allein über Farbe (SC 1.4.1). Das echte Radio kann
   nicht einspringen, es ist unsichtbar. Jetzt trägt eine FORM: leerer
   Ring gegen gefüllten Ring mit Punkt, wie ein Radio aussieht. Die Farbe
   kommt obendrauf (v1.22.8). */
.slot-option-inner::before {
  content: ""; position: absolute; top: 14px; right: 14px;
  width: 20px; height: 20px; border-radius: 999px;
  border: 2px solid var(--c-field-line); background: #fff;
}
.slot-option-inner::after {
  content: ""; position: absolute; top: 20px; right: 20px;
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--c-green-text); opacity: 0;
}
.slot-option:hover .slot-option-inner { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
/* AA-Grün: der Zustandsanzeiger braucht selbst 3:1 (1.4.11) — das helle
   CI-Grün schafft auf Weiß nur 3,0:1 und auf --c-bg-soft 2,7:1. */
.slot-option input:checked + .slot-option-inner { border-color: var(--c-green-text); box-shadow: 0 0 0 3px rgba(38,124,36,.15); }
.slot-option input:checked + .slot-option-inner::before { border-color: var(--c-green-text); }
.slot-option input:checked + .slot-option-inner::after { opacity: 1; }
.slot-option input:focus-visible + .slot-option-inner { outline: 3px solid var(--c-primary); outline-offset: 2px; }
.slot-termin { font-family: var(--f-display); font-weight: 700; color: var(--c-ink); font-size: .98rem; }
.slot-format { font-size: .88rem; color: var(--c-primary-d); font-weight: 600; }
.slot-berater { font-size: .84rem; color: var(--c-text-soft); }
.ideencheck .form-note { margin-bottom: 1.4em; }

/* Formatwahl (1.24.0): native Radios — sichtbar, kein versteckter Input,
   damit Fokusring und Kontrast dem Browser-Standard folgen. */
.format-auswahl .format-optionen { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.format-auswahl label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.format-auswahl input[type="radio"] { width: 20px; height: 20px; accent-color: var(--c-green-text); }

/* ============================================================
   INNENSEITEN ALS NATIVE BLÖCKE (v1.7.1) — Adaptionen für das
   Pattern „Kontakt-Seite": page-hero, Team-Karten und Kontakt-Box
   als Core-Blöcke (Bilder = normale Bild-Blöcke, austauschbar).
   ============================================================ */
.wp-block-group.page-hero > .wp-block-columns.page-hero-inner {
  width: min(100% - 48px, var(--wrap)); margin-inline: auto;
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4vw, 60px); align-items: center;
  padding-bottom: clamp(40px, 6vw, 72px);
}
.page-hero .wp-block-column { min-width: 0; }
.page-hero-media.wp-block-image { margin: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; align-self: end; box-shadow: var(--shadow); }
.page-hero-media.wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
.page-hero .hero-cta.wp-block-buttons { margin-top: 1.8em; gap: 14px; }
.page-hero .is-style-outline .wp-block-button__link { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); box-shadow: none; }
.page-hero .is-style-outline .wp-block-button__link:hover { background: #fff; color: var(--c-ink); border-color: #fff; }
@media (max-width: 980px) {
  .wp-block-group.page-hero > .wp-block-columns.page-hero-inner { grid-template-columns: 1fr; }
  .page-hero-media.wp-block-image { border-radius: var(--radius-lg); }
}

/* Team-Karten als Spalten */
.wp-block-columns.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.wp-block-column.person { padding: 0; }
.person .person-media.wp-block-image { margin: 0; aspect-ratio: 4/4.4; background: var(--c-bg-mute); }
.person .person-media.wp-block-image img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.person .wp-block-group.person-body > * { margin-left: 0; margin-right: 0; }
.wp-block-column.person .person-contact { display: block; }
.wp-block-column.person .person-contact a { display: inline-flex; margin-bottom: .35em; }
@media (min-width: 621px) and (max-width: 980px) {
  .wp-block-columns.team-grid, .team-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .wp-block-columns.team-grid, .team-grid { grid-template-columns: 1fr; }
}

/* Kontakt-Box: Zeilen als normale Absätze statt Grid */
.wp-block-group.contact-box p.cb-row { display: block; margin: 0 0 18px; }
.wp-block-group.contact-box p.cb-row:last-child { margin-bottom: 0; }
.contact-box p.cb-row b { display: block; color: #fff; }

/* Bild-Varianten der Innenseiten */
.fund-logo.wp-block-image img { height: 90px; width: auto; background: #fff; padding: 10px 14px; border-radius: 10px; }
.karte.wp-block-image img { border-radius: 16px; border: 1px solid var(--c-line); }

/* ============================================================
   INNENSEITEN v1.7.2 — Gründen, Community, Räume, Digital Hub
   Die Design-Klassen (.price-card, .logo-card, .pillar …) greifen
   unverändert auf einer wp:group. Hier stehen nur die Stellen, an
   denen der Block-Wrapper vom ursprünglichen HTML abweicht:
   Grid-Container, Rand-Resets und die Core-Blöcke Button/Bild/Details.
   ============================================================ */

/* Buttons als direktes Section-Kind (Community: „Mentor:in werden") an
   die Wrap-Kante ausrichten — die Wrap-Regel oben greift nur für
   .wp-block-group/.wp-block-columns, nicht für .wp-block-buttons. */
.wp-block-group.section > .wp-block-buttons {
  max-width: var(--wrap); margin-inline: auto; margin-block-start: 2em;
}

/* Kategorie-Kopf wie .section-head auf Lesebreite halten (die Section
   zieht direkte Kind-Gruppen sonst auf volle Wrap-Breite). */
.wp-block-group.section .wp-block-group.cat-head > :where(h1, h2, h3, p) { max-width: 720px; }

/* Karten-Raster als Gruppe: beliebig viele Karten, ohne starre Spaltenzahl */
.wp-block-group.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; }
.wp-block-group.card-grid > .wp-block-group.scard { min-width: 0; }

/* scard/scard-body als Gruppen (Startseite nutzt sie als Spalten) */
.wp-block-group.scard > .wp-block-group.scard-body { margin-block: 0; }
.wp-block-group.scard-body > :first-child { margin-block-start: 0; }
.wp-block-group.scard-body > .wp-block-list { margin-block-start: .6em; }

/* Pillars: .pillars bringt das 2-Spalten-Raster mit (Design-Referenz) */
.wp-block-group.pillar { min-width: 0; }
.wp-block-group.pillar > :where(h3, p) { margin-block-start: 0; }
.pillar .pic.wp-block-image { margin: 0 0 18px; }

/* Preiskarten: Kopfzeilen dicht, Button unten bündig */
.wp-block-group.price-grid > .wp-block-group.price-card { min-width: 0; }
.wp-block-group.price-card > :where(p, ul) { margin-block-start: 0; }
.price-card p.pc-badge { margin: 0; }
.price-card .wp-block-buttons { margin-top: auto; }
.price-card .wp-block-button { width: 100%; }
.price-card .wp-block-button__link.wp-element-button { width: 100%; justify-content: center; text-align: center; }
.price-card .wp-block-buttons + p.pc-note { margin-block-start: 12px; }

/* Logo-Karten der Community: .logo-card bringt display:flex + gap mit */
.wp-block-group.logo-grid > .wp-block-group.logo-card { min-width: 0; }
.wp-block-group.logo-card > * { margin-block: 0; }
.logo-card .lc-logo.wp-block-image { margin: 0; height: 64px; }
.logo-card .lc-logo.wp-block-image img { max-height: 64px; max-width: 160px; width: auto; object-fit: contain; }

/* Info-Band (dunkle Doppelkarte) */
.wp-block-group.info-band > .wp-block-group.info-card { min-width: 0; }
.wp-block-group.info-card > :where(p, h3) { margin-block-start: 0; }
.info-card h3 { margin-block-end: .5em; }
.info-card p + p { margin-block-start: 1em; }

/* Hinweis-Kasten als Gruppe — sonst zieht ihn die Section auf Wrap-Breite */
/* Linksbündig an der Wrap-Kante wie im Referenz-HTML (dort liegt der
   Kasten in .wrap). Als direktes Section-Kind muss der Einzug selbst
   gerechnet werden; unterhalb der Wrap-Breite greift die 0. */
.wp-block-group.section > .wp-block-group.notice {
  max-width: 760px;
  margin-block-start: clamp(24px, 3vw, 32px);
  margin-inline: max(0px, (100% - var(--wrap)) / 2) auto;
}
.wp-block-group.notice > * { margin-block: 0; }
.wp-block-group.notice > * + * { margin-block-start: .8em; }
.split-copy .wp-block-group.notice { max-width: none; margin-block-start: 24px; }

/* Logo auf weißer Platte (Gründen: „Gründen in Mainfranken") */
.logo-plate.wp-block-image {
  margin: 0; background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow);
}
.logo-plate.wp-block-image img { width: 100%; aspect-ratio: 16/10; object-fit: contain; }

/* Ideen-Check: Zitat-Karten (v1.7.4) — ehemals Inline-Styles im wp:html */
.wp-block-columns.quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.wp-block-columns.quote-grid > .wp-block-column { min-width: 0; }
.wp-block-column.quote-card {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 30px; display: flex; flex-direction: column; gap: 16px;
}
.quote-card .quote-avatar.wp-block-image { margin: 0; width: 90px; height: 90px; }
.quote-card .quote-avatar.wp-block-image img { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; }
.quote-card .quote-text { margin: 0; font-size: 1.12rem; color: var(--c-text); }
.quote-card .quote-person { margin: 0; font-family: var(--f-display); }
.quote-card .quote-person strong { color: var(--c-ink); }
/* Rolle unter dem Zitat ist Fließtext → AA-Grün (v1.22.5). */
.quote-card .quote-person .role { color: var(--c-green-text); font-weight: 600; }
@media (max-width: 980px) {
  .wp-block-columns.quote-grid { grid-template-columns: 1fr; }
}

/* Ideen-Check: Erwartung/Mehrwert als Karten im offer-grid */
.wp-block-columns.offer-cards { gap: 24px; }

/* Zentrierte Abschluss-Blöcke (ehemals Inline-Styles im HTML) */
.wp-block-group.section > .wp-block-group.center-copy { max-width: 820px; text-align: center; }
.center-copy .eyebrow { justify-content: center; }
.center-copy .lead { margin-inline: auto; }
.center-copy .wp-block-buttons { justify-content: center; margin-block-start: 1.6em; }
.section--ink .center-copy strong { color: #fff; }
.section--ink .subhead { color: var(--c-sun); }
.section--ink .is-style-outline .wp-block-button__link { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); box-shadow: none; }
.section--ink .is-style-outline .wp-block-button__link:hover { background: #fff; color: var(--c-ink); border-color: #fff; }

/* Verneinende Aufzählung (Gründen: „Wer kann nicht einziehen?").
   Bis 1.28.1 bog diese Zeile --c-primary lokal auf Rot um — der Name
   sagte „Markenfarbe", der Wert war Rot, und jede spätere Regel, die
   sich im selben Teilbaum auf --c-primary verlässt, hätte es geerbt.
   Jetzt kippt nur die Bauteil-Variable des Hakens, wie bei .btn. */
.offer-list--no { --haken: var(--c-no); }

/* Phasen als core/details — die Nummer kommt aus einem CSS-Counter,
   weil das Summary-Feld im Editor nur Text aufnimmt. */
.wp-block-group.phases { counter-reset: phase; }
/* Der Container bleibt auf Wrap-Breite (bündig mit dem Section-Kopf),
   begrenzt wird die einzelne Phase — wie .phases{max-width:880px} im Original. */
.wp-block-group.phases > .phase { max-width: 880px; }
.phase.wp-block-details { padding: 0; }
.phase.wp-block-details > summary { counter-increment: phase; }
.phase.wp-block-details > summary::marker,
.phase.wp-block-details > summary::-webkit-details-marker { content: ""; display: none; }
.phase.wp-block-details > summary::before {
  content: counter(phase); flex: 0 0 auto; width: 34px; height: 34px;
  border-radius: 50%; background: var(--c-ink); color: #fff;
  display: grid; place-items: center; font-size: .9rem;
}
.phase.wp-block-details[open] > summary::before { background: var(--c-green-text); }
.phase.wp-block-details > summary::after {
  content: "▾"; margin-left: auto; color: var(--c-text-soft);
  transition: transform .25s var(--ease);
}
.phase.wp-block-details[open] > summary::after { transform: rotate(180deg); }
.phase.wp-block-details > :not(summary) { margin: 0 24px 0 74px; }
.phase.wp-block-details > :not(summary):first-of-type { margin-block-start: .2em; }
.phase.wp-block-details > :last-child { margin-block-end: 22px; }
@media (max-width: 620px) {
  .phase.wp-block-details > :not(summary) { margin-inline: 24px; }
}

/* Podcast-Embeds (Digital Hub) */
.wp-block-group.embed-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px; margin-block-start: 28px;
}

/* ============================================================
   NEWS-TEASER (v1.6) — [news_teaser], Karten im scard-Stil.
   ============================================================ */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.news-grid .scard-media { display: block; }
.news-grid .scard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.news-grid .entry-meta { margin: 0 0 .5em; font-size: .88rem; }
.news-teaser-more { margin: 34px 0 0; text-align: center; }
@media (min-width: 621px) and (max-width: 980px) {
  .news-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .news-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ICON-SET (v1.10) — [sh_icon], Sprite assets/img/starthouse-icons.svg.
   Linien-Icons, Farbe über stroke (Vorgabe icon-set.html).
   ============================================================ */
/* Die Sprite-Symbole tragen stroke="currentColor" direkt am Symbol — das
   gewinnt gegen vererbtes stroke. Farbe deshalb über `color` steuern. */
.sh-icon {
  width: 34px; height: 34px; fill: none;
  color: var(--c-primary);
  stroke: var(--c-primary); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: middle;
}
.sh-icon--gruen { color: var(--c-primary); stroke: var(--c-primary); }
.sh-icon--dunkel { color: var(--c-ink); stroke: var(--c-ink); }
.sh-icon--weiss { color: #fff; stroke: #fff; }

/* ============================================================
   ARCHIV (v1.11) — archive.php + [news_archiv], Konzept §11 Option A.
   Jahres-Chips + Karten-Raster (nutzt .news-grid/.scard).
   ============================================================ */
.archiv-jahre {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin: 0 0 34px;
}
.archiv-jahre .archiv-jahr {
  display: inline-flex; align-items: center; gap: .35em;
  padding: 10px 18px; border: 1px solid var(--c-line);
  border-radius: 999px; background: var(--c-bg);
  font-weight: 700; text-decoration: none; color: var(--c-ink);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.archiv-jahre .archiv-jahr:hover { border-color: var(--c-primary); }
/* AA-Grün, weil hier weiße Schrift daraufliegt (v1.22.5): das helle
   CI-Grün trug den Jahres-Chip nur mit 3,0:1, die abgeblendete Anzahl
   sogar mit 2,5:1 — der schlechteste Wert im ganzen Stylesheet. */
.archiv-jahre .archiv-jahr.ist-aktiv {
  background: var(--c-green-text); border-color: var(--c-green-text); color: #fff;
}
.archiv-jahre .anzahl { font-weight: 500; color: var(--c-text-soft); }
.archiv-jahre .ist-aktiv .anzahl { color: #fff; }
.archiv-grid { margin-block-start: 6px; }

/* ============================================================
   NEWSLETTER-ARCHIV (v1.13) — [newsletter_archiv], Karten-Liste.
   ============================================================ */
.nl-archiv {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}
.nl-card {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 24px 22px; display: flex; flex-direction: column; gap: 8px;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.nl-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.nl-card .entry-meta { margin: 0; font-size: .88rem; color: var(--c-text-soft); }
.nl-card h3 { margin: 0; font-size: 1.1rem; }
.nl-card .alink { margin-top: auto; }

/* ============================================================
   NEWS-ÜBERSICHT MIT SEITENLEISTE (v1.13) — index.php (is_home).
   ============================================================ */
.news-layout {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 40px; align-items: start;
}
.news-seitenleiste { position: sticky; top: 96px; display: grid; gap: 22px; }
.aside-box {
  background: var(--c-bg-soft); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: 24px 22px;
}
.aside-titel { margin: 0 0 .7em; font-size: 1.05rem; }
.aside-events { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 14px; }
.aside-events a { font-weight: 700; text-decoration: none; color: var(--c-ink); }
.aside-events a:hover { color: var(--c-primary-d); }
.aside-events .aside-meta { display: block; font-size: .88rem; color: var(--c-text-soft); }
.aside-box--nl p { margin: 0 0 14px; color: var(--c-text-soft); }
.aside-box--nl .btn { margin-bottom: 10px; }
.aside-box--nl .alink { display: inline-block; }
@media (max-width: 860px) {
  .news-layout { grid-template-columns: 1fr; }
  .news-seitenleiste { position: static; }
}