/* Bausteine aller Seiten (06.11.2026 aus startseite.css herausgelöst): Gestaltung je Abschnittsinhalt (hat-kennzahlen, hat-faq,
   Magazin, Formate, Agenda …). Die Startseite ist die Referenz – Unterseiten nutzen dieselben Bausteine. */

/* ── 2 · „Der Hub“: Netzwerk auf einen Blick (04.11.2026, überarbeitet 05.11.2026) ─────────────────────
   Links die Kernaussage, darunter Legende und eine schmale Zeile zur gewählten Stadt; rechts groß die Deutschlandkarte mit den echten
   Veranstaltungsorten und feinen Verbindungen (Spannbaum ab Hannover), darunter die Jahreszahlen. Voller Punkt mit Puls = kommender Termin,
   hohler Kreis = Rückblick (Form + Text, nicht nur Farbe). Keine Veranstaltungskarte mehr hier – die Termine folgen im Abschnitt „Kommende Termine“. */
section.abschnitt.hat-kennzahlen { --oben: clamp(3rem, 2rem + 4.2vw, 6.25rem); padding-top: var(--oben) !important; }
.hub-netz { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "text karte" "auswahl karte" "zahlen zahlen"; grid-template-rows: auto 1fr auto;
  gap: clamp(1.75rem, 1rem + 2.5vw, 3.5rem) clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
.hub-netz-text { grid-area: text; }
.hub-netz-text .register { margin-bottom: 1.1rem; }
.hub-netz-text .register h2 { font-size: clamp(2rem, 1.35rem + 2.1vw, 3.3rem); line-height: 1.02; letter-spacing: -.04em; max-width: 13ch; }
.hub-netz-text p.gross { font-size: clamp(1.02rem, .97rem + .22vw, 1.15rem); line-height: 1.55; max-width: 30rem; margin: 0; color: var(--tinte-2); }
.hub-netz-text p.gross + p.gross { margin-top: .85rem; }   /* Einleitung in mehreren Absätzen (05.11.2026) */

/* Karte: so groß wie die Spalte erlaubt, aber nie höher als der sichtbare Bereich */
.netz-karte { grid-area: karte; justify-self: center; width: min(100%, calc(80vh * var(--verh, .74)), 44rem); width: min(100%, calc(80svh * var(--verh, .74)), 44rem); }
.netz-kennung { margin: 0 0 .9rem; display: flex; align-items: center; gap: .6rem; }
.netz-kennung .mono { color: var(--leise); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.netz-kennung::before { content: ""; width: 10px; height: 10px; background: var(--marke); flex: none; }
.karte-flaeche { position: relative; width: 100%; aspect-ratio: var(--verh, .74); }
.karte-flaeche svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.karte-land { fill: var(--flaeche); stroke: none; }
/* Außenrand und Ländergrenzen (Natural Earth, gemeinfrei): flach, fein; der Rand etwas kräftiger als die Grenzen */
.karte-rand { fill: none; stroke: color-mix(in srgb, var(--tinte) 34%, transparent); stroke-width: calc(var(--strich, 1) * 1.2px); stroke-linejoin: round; }
.karte-grenze { fill: none; stroke: color-mix(in srgb, var(--tinte) 15%, transparent); stroke-width: calc(var(--strich, 1) * .8px); stroke-linejoin: round; stroke-linecap: round; }
/* Verbindungen: fein und zurückhaltend; die der gewählten Stadt etwas deutlicher. --strich = Kartenpunkte je Bildschirmpixel (netzkarte.js) */
.netz-linie { fill: none; stroke: var(--marke); stroke-opacity: .38; stroke-width: calc(var(--strich, 1) * 1px); stroke-linecap: round; transition: stroke-opacity var(--dauer-2) var(--kurve), stroke-width var(--dauer-2) var(--kurve); }
.netz-linie.ist-aktiv { stroke-opacity: .85; stroke-width: calc(var(--strich, 1) * 1.6px); }
.netz-impuls { fill: none; stroke: var(--marke); stroke-width: calc(var(--strich, 1) * 2.2px); stroke-linecap: round; stroke-dasharray: 7 140; opacity: 0; }
[data-theme="dunkel"] .netz-impuls { stroke: #ffb987; }
.karte-orte { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.ort { position: absolute; width: 0; height: 0; }
.ort-knopf { all: unset; box-sizing: border-box; position: absolute; top: -12px; left: -12px; display: flex; align-items: center; gap: 4px; padding: 5px; cursor: pointer; white-space: nowrap; color: var(--tinte); font-size: .8rem; font-weight: 560; line-height: 1; z-index: 1; }
.seite-l .ort-knopf { left: auto; right: -12px; flex-direction: row-reverse; }
.seite-o .ort-knopf { left: 50%; top: auto; bottom: -12px; transform: translateX(-50%); flex-direction: column-reverse; gap: 2px; }
.seite-u .ort-knopf { left: 50%; top: -12px; transform: translateX(-50%); flex-direction: column; gap: 2px; }
.seite-or .ort-knopf { top: auto; bottom: -12px; flex-direction: column-reverse; align-items: flex-start; gap: 2px; }
.ort-punkt { position: relative; width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--marke); border: 2px solid var(--marke); box-sizing: border-box; transition: transform var(--dauer-2) var(--kurve), box-shadow var(--dauer-2) var(--kurve); }
/* Kommende Termine: Punkt mit Puls (Michel, 05.11.2026) – eine langsame Welle nach der Einstiegsfolge, Rückblick bleibt ein ruhiger hohler Kreis */
.ort-knopf:not(.ist-rueckblick) .ort-punkt::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid var(--marke); opacity: 0; pointer-events: none; }
.ist-rueckblick .ort-punkt { background: var(--grund); }
.ort-name { padding: 2px 4px; text-shadow: 0 0 3px var(--flaeche), 0 0 6px var(--flaeche); transition: color var(--dauer-1); }  /* ohne Fläche und ohne Unterstreichung (05.11.2026); der weiche Schein in Kartenfarbe hält Namen über Linien lesbar */
.ort-knopf:hover .ort-name { color: var(--marke-text); }
.ort-knopf:hover .ort-punkt { transform: scale(1.25); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marke) 22%, transparent); }
.ort-knopf[aria-pressed="true"] { z-index: 2; font-weight: 700; }
.ort-knopf[aria-pressed="true"] .ort-punkt { transform: scale(1.3); box-shadow: 0 0 0 2px var(--grund), 0 0 0 4px var(--tinte); }
.ort-knopf[aria-pressed="true"] .ort-name { color: var(--marke-text); }
.ort-knopf:focus-visible { outline: 2px solid var(--marke-text); outline-offset: 1px; z-index: 3; }

/* Legende, Auswahl (Handy) und Zeile zur gewählten Stadt – feste Höhe, damit der Wechsel nicht springt */
.netz-auswahl { grid-area: auswahl; align-self: end; width: 100%; max-width: 26rem; display: grid; gap: 1.1rem; }
.karte-legende { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin: 0; font-size: .8rem; color: var(--leise); }
.karte-legende span { display: inline-flex; align-items: center; gap: .45rem; }
.karte-legende i { width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--marke); background: var(--marke); }
.karte-legende .zeichen-rueckblick { background: transparent; }
.karte-wahl { display: none; }
.netz-termin { display: grid; align-content: start; min-height: 7.4rem; padding-top: 1rem; border-top: 1px solid var(--linie); }
.netz-status { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; font: 600 .7rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--marke-text); }
.netz-zeichen { width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--marke); background: var(--marke); }
.netz-status.ist-rueckblick { color: var(--leise); }
.netz-status.ist-rueckblick .netz-zeichen { background: transparent; }
.netz-zeile { margin: 0 0 .35rem; font-size: .95rem; color: var(--tinte-2); }
.netz-zeile strong { color: var(--tinte); font-weight: 650; }
.netz-link { justify-self: start; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.netz-termin > * { animation: netz-wechsel var(--dauer-2) var(--kurve); }
@keyframes netz-wechsel { from { opacity: 0; transform: translateY(4px); } }

/* Jahreszahlen als eine Zeile verbundener Knoten */
.hub-netz-zahlen { grid-area: zahlen; }
.hub-netz-zahlen .belege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--spalt); margin: 0; padding: 0; border: 0; border-top: 2px solid var(--linie-stark); position: relative; }
.hub-netz-zahlen .belege div { position: relative; display: flex; align-items: baseline; gap: .75rem; padding: 1.1rem 0 0; border: 0; }
.hub-netz-zahlen .belege div::before { content: ""; position: absolute; left: 0; top: -6px; width: 10px; height: 10px; background: var(--marke); transition: transform 400ms var(--kurve) calc(200ms + var(--k, 0) * 180ms); }
.hub-netz-zahlen .belege div:nth-child(2) { --k: 1; } .hub-netz-zahlen .belege div:nth-child(3) { --k: 2; }
.js .hub-netz-zahlen .belege:not(.sichtbar) div::before { transform: scale(0); }
.hub-netz-zahlen .belege dt { font-size: clamp(2rem, 1.6rem + 1.2vw, 2.8rem); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.hub-netz-zahlen .belege dd { margin: 0; font-size: .9rem; color: var(--tinte-2); line-height: 1.3; }
.hub-netz-zahlen .quelle { margin: .75rem 0 0; font-size: .78rem; color: var(--leise); }

@media (max-width: 1100px) {
  .hub-netz { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "text text" "karte auswahl" "zahlen zahlen"; grid-template-rows: auto auto auto; }
  .hub-netz-text .register h2 { max-width: 18ch; }
}
@media (max-width: 760px) {
  .hub-netz { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "karte" "auswahl" "zahlen"; }
  .netz-karte { width: min(100%, 30rem); }
  .netz-auswahl { max-width: none; }
  /* Dicht: nur die gewählte Stadt beschriftet, gewählt wird auch über die Liste */
  .ort-knopf:not([aria-pressed="true"]) .ort-name { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ort-knopf { padding: 8px; top: -15px; left: -15px; }
  .seite-l .ort-knopf { right: -15px; } .seite-o .ort-knopf, .seite-or .ort-knopf { bottom: -15px; } .seite-u .ort-knopf { top: -15px; }
  .karte-wahl { display: grid; gap: .35rem; }
  .karte-wahl label { font-size: .85rem; font-weight: 600; }
  .hub-netz-zahlen .belege { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 2px solid var(--linie-stark); padding-left: 1.25rem; }
  .hub-netz-zahlen .belege div { padding: .2rem 0 1rem; }
  .hub-netz-zahlen .belege div::before { left: calc(-1.25rem - 6px); top: .7rem; }
}

/* Einstiegsfolge, einmal beim ersten Eintritt (netzkarte.js setzt „netz-an“), etwa 3,4 s:
   Text (0–0,8 s) → Außenrand zeichnet sich (0,1–1,1 s), Fläche füllt sich, Ländergrenzen ziehen von Nord nach Süd (0,6–1,6 s)
   → Orte nach ihrem ersten Termin (1–2,2 s) → Verbindungen wachsen von Hannover aus (1,9–2,9 s) → Lichtimpuls auf drei Wegen (2,7–3,8 s, danach alle 15 s erneut) → sonst ruhig. Zeiten je Element als --ab aus dem Bau (darstellung.py).
   Nur mit Bewegung: ohne JavaScript oder bei „Bewegung reduzieren“ ist alles sofort da, die Linien stehen fest.
   Ausgeblendet wird erst, wenn netzkarte.js läuft und „netz-bereit“ gesetzt hat – lädt das Skript nicht (oder ein alter Stand aus dem
   Zwischenspeicher), bleibt die Sektion sichtbar statt leer (05.11.2026). */
@media (prefers-reduced-motion: no-preference) {
  .js .hub-netz.netz-bereit:not(.netz-an) :is(.netz-kennung, .karte-flaeche, .ort, .netz-auswahl) { opacity: 0; }
  .js .hub-netz.netz-bereit:not(.netz-an) :is(.netz-linie, .karte-rand, .karte-grenze) { stroke-dasharray: 100 100; stroke-dashoffset: 100; }
  .js .hub-netz.netz-bereit:not(.netz-an) .karte-land { opacity: 0; }
  .js .hub-netz.netz-an .netz-kennung { animation: netz-steigen 600ms var(--kurve) 80ms backwards; }
  .js .hub-netz.netz-an .karte-flaeche { animation: netz-steigen 950ms var(--kurve) 80ms backwards; }
  .js .hub-netz.netz-an .karte-rand { stroke-dasharray: 100 100; animation: netz-linie 1000ms var(--kurve-weich) 100ms backwards; }
  .js .hub-netz.netz-an .karte-land { animation: netz-name 650ms var(--kurve-weich) 520ms backwards; }
  .js .hub-netz.netz-an .karte-grenze { stroke-dasharray: 100 100; animation: netz-linie 640ms var(--kurve-weich) var(--ab, 700ms) backwards; }
  .js .hub-netz.netz-an .ort { animation: netz-ort 460ms var(--kurve) var(--ab, 600ms) backwards; }
  .js .hub-netz.netz-an .ort-name { animation: netz-name 420ms var(--kurve) calc(var(--ab, 600ms) + 130ms) backwards; }
  .js .hub-netz.netz-an .netz-linie { stroke-dasharray: 100 100; animation: netz-linie 460ms var(--kurve-weich) var(--ab, 1800ms) backwards; }
  /* Lichtimpuls: erster Lauf am Ende der Folge, danach alle 15 s erneut (Michel, 05.11.2026); pausiert, solange die Karte nicht im Bild ist */
  .js .hub-netz.netz-an .netz-impuls { animation: netz-impuls 15s linear var(--ab, 2500ms) infinite backwards; }
  .js .hub-netz.netz-an .ort-knopf:not(.ist-rueckblick) .ort-punkt::after { animation: ort-puls 3.6s var(--kurve) calc(var(--ab, 600ms) + 2700ms) infinite backwards; }
  .js .hub-netz.netz-an.netz-aus .netz-impuls { animation-play-state: paused; }
  .js .hub-netz.netz-an.netz-aus .ort-punkt::after { animation-play-state: paused; }
  .js .hub-netz.netz-an .netz-auswahl { animation: netz-steigen 650ms var(--kurve) 1900ms backwards; }
  /* Zwei Spalten: der Text gehört zur selben Folge wie die Karte (auf dem Handy erscheint er wie gewohnt beim Scrollen) */
  @media (min-width: 1101px) {
    .js .hub-netz-text .auftritt { opacity: 1; transform: none; transition: none; }
    .js .hub-netz.netz-bereit:not(.netz-an) .hub-netz-text > * { opacity: 0; }
    .js .hub-netz.netz-an .hub-netz-text > * { animation: netz-steigen 720ms var(--kurve) backwards; }
    .js .hub-netz.netz-an .hub-netz-text > :nth-child(2) { animation-delay: 110ms; }
    .js .hub-netz.netz-an .hub-netz-text > :nth-child(3) { animation-delay: 220ms; }
  }
}
@keyframes netz-steigen { from { opacity: 0; transform: translateY(14px); } }
@keyframes netz-ort { from { opacity: 0; transform: scale(.55); } }
@keyframes netz-name { from { opacity: 0; } }
@keyframes ort-puls { 0% { opacity: 0; transform: scale(1); } 4% { opacity: .75; } 62% { opacity: 0; transform: scale(2.8); } 100% { opacity: 0; transform: scale(2.8); } }
@keyframes netz-linie { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
/* Ein Zyklus = 15 s; der Lauf selbst dauert davon 0,82 s (5,47 %), der Rest ist Ruhe */
@keyframes netz-impuls {
  0% { stroke-dashoffset: 7; opacity: 0; animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  .66% { opacity: 1; } 4.26% { opacity: .9; }
  5.47% { stroke-dashoffset: -100; opacity: 0; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ort-punkt, .netz-linie, .hub-netz-zahlen .belege div::before { transition: none !important; }
  .hub-netz-zahlen .belege div::before, .ort-knopf:hover .ort-punkt, .ort-knopf[aria-pressed="true"] .ort-punkt { transform: none; }
  .netz-termin > * { animation: none; }
  /* Ohne Bewegung: statt der Welle ein fester feiner Hof um kommende Orte */
  .ort-knopf:not(.ist-rueckblick) .ort-punkt::after { opacity: .45; transform: scale(1.7); }
}

/* Nutzen: die drei Bilder klappen nacheinander auf (groß, dann rechts oben, dann rechts unten), jeder Text folgt seinem Bild (05.11.2026) */
.js .nutzen .auftritt[data-art="bild"], .js .nutzen .auftritt[data-art="bild"] img { transition-delay: calc(var(--i, 0) * 380ms); }
.js .nutzen .auftritt[data-art="text"] { transition-delay: calc(var(--i, 0) * 380ms + 260ms); }

/* ── 3 · Nutzen: asymmetrische Komposition (04.11.2026) ────────────────────────────────────────────
   Links das erste Argument mit großem Querformat, rechts die beiden anderen kleiner, leicht abgesenkt. Bild und Text bilden je
   eine Einheit (gleiches article), der quadratische Knoten markiert jeden Text. */
.nutzen { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; column-gap: clamp(1.5rem, 1rem + 3vw, 4.5rem); row-gap: clamp(2rem, 1.5rem + 1.5vw, 3rem); align-items: start; padding-top: .5rem; }
.nutzen-teil { position: relative; display: grid; gap: 0; min-width: 0; }
.nutzen-teil.n1 { grid-column: 1; grid-row: 1 / span 2; }
.nutzen-teil.n2 { grid-column: 2; grid-row: 1; margin-top: clamp(0rem, -2rem + 6vw, 5rem); }
.nutzen-teil.n3 { grid-column: 2; grid-row: 2; align-self: start; }
/* Rechts: kleines Motiv neben dem Text */
.nutzen-teil.n2, .nutzen-teil.n3 { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 1.25rem; align-items: start; }
.nutzen-bild { margin: 0; overflow: hidden; }
.nutzen-bild img { display: block; width: 100%; object-fit: cover; }
.n1 .nutzen-bild img { aspect-ratio: 16 / 10; }
.n2 .nutzen-bild img, .n3 .nutzen-bild img { aspect-ratio: 4 / 3; }
.nutzen-text { position: relative; padding: 1.5rem 1rem 0 1.6rem; }
.n2 .nutzen-text, .n3 .nutzen-text { padding-top: 0; }
.nutzen-text .knoten { position: absolute; left: 0; top: 1.85rem; width: 10px; height: 10px; background: var(--marke); }
.n2 .nutzen-text .knoten, .n3 .nutzen-text .knoten { top: .35rem; }
.nutzen-text h3 { margin: 0 0 .55rem; font-size: clamp(1.25rem, 1.05rem + .6vw, 1.6rem); line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; }
.n1 .nutzen-text h3 { font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.2rem); max-width: 18ch; }
.nutzen-text p { margin: 0; color: var(--tinte-2); max-width: 34rem; }
@media (max-width: 900px) {
  .nutzen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nutzen-teil.n1 { grid-column: 1 / -1; grid-row: auto; }
  .nutzen-teil.n2, .nutzen-teil.n3 { grid-column: auto; grid-row: auto; margin-top: 0; grid-template-columns: minmax(0, 1fr); }
  .n2 .nutzen-text, .n3 .nutzen-text { padding-top: 1.25rem; }
  .n2 .nutzen-text .knoten, .n3 .nutzen-text .knoten { top: 1.6rem; }
  .n2 .nutzen-bild img, .n3 .nutzen-bild img { aspect-ratio: 3 / 2; }
}
@media (max-width: 640px) { .nutzen { grid-template-columns: minmax(0, 1fr); } .n1 .nutzen-bild img { aspect-ratio: 3 / 2; } }

/* ── 4 · Veranstaltungen als Agenda ──────────────────────────────────────────────────────────────── */
.agenda { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
.agenda-erster { display: grid; text-decoration: none; background: var(--flaeche); overflow: hidden; }
.agenda-erster figure { margin: 0; aspect-ratio: 2 / 1; overflow: hidden; }
.agenda-erster img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dauer-3) var(--kurve); }
.agenda-erster:is(:hover, :focus-visible) img { transform: scale(1.04); }
.agenda-erster:focus-visible { outline: 2px solid var(--marke-text); outline-offset: 4px; }
.agenda-erster-text { padding: clamp(1.25rem, 1rem + 1.2vw, 2rem); display: grid; gap: .5rem; justify-items: start; }
.agenda-datum { margin: 0; font-size: 1.1rem; }
.agenda-datum b { font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); letter-spacing: -.05em; font-weight: 650; line-height: 1; margin-right: .2rem; }
.agenda-datum span { display: block; font: .76rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--leise); margin-top: .3rem; }
.agenda-erster .mono { color: var(--marke-text); margin: .5rem 0 0; }
.agenda-erster h3 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); line-height: 1.1; letter-spacing: -.03em; }
.agenda-ort { color: var(--leise); margin: 0; }
.agenda-erster .knopf { margin-top: .75rem; }
.agenda-liste { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--linie-stark); }
.agenda-liste a { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto 1.5rem; gap: 1rem; align-items: center; padding: 1.15rem 0; border-bottom: 1px solid var(--linie); text-decoration: none; transition: padding var(--dauer-2) var(--kurve), background-color var(--dauer-2); }
.agenda-liste a:is(:hover, :focus-visible) { padding-left: .75rem; background: var(--flaeche); }
.agenda-liste a:focus-visible { outline: 2px solid var(--marke-text); outline-offset: 2px; }
.agenda-tag { display: grid; font: .74rem/1.2 var(--mono); text-transform: uppercase; color: var(--leise); }
.agenda-tag b { font: 650 1.9rem/1 var(--schrift); letter-spacing: -.04em; color: var(--tinte); }
.agenda-mitte { display: grid; gap: .2rem; }
.agenda-mitte .mono { color: var(--leise); font-size: .7rem; }
.agenda-mitte strong { font-size: 1.12rem; line-height: 1.25; }
.agenda-pfeil { color: var(--marke-text); transition: transform var(--dauer-2) var(--kurve); }
.agenda-liste a:is(:hover, :focus-visible) .agenda-pfeil { transform: translateX(4px); }
.agenda + .register-link, .agenda-alle { display: inline-block; margin-top: 1.25rem; }
@media (max-width: 960px) { .agenda { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .agenda-liste a { grid-template-columns: 3.4rem minmax(0, 1fr) 1rem; } .agenda-liste .status { grid-column: 2; grid-row: 2; } .agenda-pfeil { grid-row: 1; grid-column: 3; } }

/* ── 5 · Formate kompakt: flache Bilder, gleiche Angaben, Links auf einer Grundlinie (04.11.2026) ──── */
.formate-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spalt); align-items: stretch; }
.formatkarte { min-width: 0; }
.formatkarte a { display: flex; flex-direction: column; height: 100%; text-decoration: none; background: var(--grund); }
.formatkarte figure { margin: 0; aspect-ratio: 1 / 1; overflow: hidden; background: var(--flaeche); }  /* quadratisch (Michel, 05.11.2026) */
.formatkarte img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dauer-3) var(--kurve); }
.formatkarte a:is(:hover, :focus-visible) img { transform: scale(1.05); }
.formatkarte a:focus-visible { outline: 2px solid var(--marke-text); outline-offset: 4px; }
.formatkarte-text { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.15rem 1.15rem; }
.formatkarte h3 { margin: 0 0 .4rem; font-size: 1.3rem; line-height: 1.15; letter-spacing: -.02em; }
.formatkarte p { margin: 0 0 .9rem; color: var(--tinte-2); font-size: .95rem; line-height: 1.5; }
.formatkarte .format-fakt { display: grid; gap: .15rem; margin: 0; padding-top: .7rem; border-top: 1px solid var(--linie); font-size: .88rem; color: var(--tinte); }
.formatkarte .format-fakt .mono { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); }
.formatkarte-link { margin-top: auto; padding-top: 1rem; display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .95rem; color: var(--marke-text); }
.formatkarte a:is(:hover, :focus-visible) .formatkarte-link { text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 1100px) { .formate-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .formate-raster { grid-template-columns: minmax(0, 1fr); } }

/* ── 6 · Ein Beispiel: Frage → Hub → nächster Schritt als verbundene Knoten (04.11.2026) ──────────────
   Die Linie zeichnet sich beim ersten Sichtbarwerden; am Rechner verbindet ein Steg den Fall mit dem ersten Schritt. */
.beispiel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 1rem + 4vw, 5rem); align-items: start; }
.beispiel-art { margin: 0 0 .9rem; font: .74rem/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--leise); }
.beispiel-kopf h3 { margin: 0 0 1.25rem; font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; }
.beispiel-schritte { --steg: clamp(1.5rem, 1rem + 4vw, 5rem); list-style: none; margin: 0; padding: 0 0 0 1.75rem; position: relative; }
.beispiel-schritte::before { content: ""; position: absolute; left: 5px; top: .7rem; bottom: 2.4rem; width: 2px; background: var(--marke); transform-origin: top; transition: transform 1200ms var(--kurve-weich) 200ms; }
.js .beispiel-schritte:not(.sichtbar)::before { transform: scaleY(0); }
.js .beispiel-schritte.auftritt { opacity: 1; transform: none; }
.beispiel-schritte li { position: relative; padding-bottom: 1.75rem; }
.beispiel-schritte li .knoten { position: absolute; left: -1.75rem; top: .3rem; width: 12px; height: 12px; background: var(--grund); border: 2px solid var(--tinte); z-index: 1; }
.beispiel-schritte li:last-child .knoten { background: var(--marke); border-color: var(--marke); }
/* Waagerechter Strich zum ersten Knoten entfernt (Michel, 05.11.2026). Die Einträge klappen nacheinander auf, während die Linie
   nach unten wächst – jeder erscheint etwa, wenn die Linie ihn erreicht (gesteuert über die Liste, nicht je Eintrag). */
.js .beispiel-schritte li.auftritt { clip-path: inset(0 0 100% -3rem); opacity: 0; transform: none; transition: clip-path 700ms var(--kurve), opacity 500ms var(--kurve); transition-delay: calc(250ms + var(--i, 0) * 380ms); }
.js .beispiel-schritte.sichtbar li.auftritt { clip-path: inset(0 0 0 -3rem); opacity: 1; }
.beispiel-schritt { font: .74rem/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--marke-text); }
.beispiel-schritte p { margin: .35rem 0 0; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.45; max-width: 38rem; }
@media (max-width: 900px) { .beispiel { grid-template-columns: minmax(0, 1fr); } }

/* ── Haltung: typografischer Moment auf Orange (04.11.2026 verfeinert) ────────────────────────────────
   Kein Mitgliederzitat mit Freigabe vorhanden – das bestehende Zitat bleibt, mit klarer Quelle. Hängende Anführungszeichen,
   ruhigere Größe und Zeilenlänge, Quelle mit Knoten und kurzer Linie. */
.haltung { margin: 0; display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); gap: 1.5rem clamp(1.5rem, 1rem + 3vw, 4rem); align-items: end; }
.haltung blockquote { margin: 0; }
.haltung blockquote p { margin: 0; max-width: 21ch; font-size: clamp(1.9rem, 1.15rem + 2.9vw, 3.9rem); line-height: 1.04; letter-spacing: -.04em; font-weight: 640; text-wrap: balance; text-indent: -.42em; }
.haltung blockquote p::before { content: "„"; } .haltung blockquote p::after { content: "“"; }
.haltung figcaption { position: relative; display: grid; gap: .25rem; padding: 1.1rem 0 0 1.6rem; font-size: .95rem; line-height: 1.4; border-top: 2px solid #14171a; }
.haltung figcaption .knoten { position: absolute; left: 0; top: -6px; width: 10px; height: 10px; background: #14171a; }
.haltung figcaption strong { font-size: 1.05rem; }
.haltung figcaption span { color: var(--leise); }
.haltung a { color: inherit; text-underline-offset: .2em; }
.haltung a:hover { text-decoration-thickness: 2px; }
/* Quelle ohne Unterstreichung, kleiner Pfeil (05.11.2026) */
.haltung a.haltung-quelle { text-decoration: none; }
.haltung a.haltung-quelle .pfeil { display: inline-block; font-size: .9em; margin-left: .1em; }
/* Zitat-Wechsler: alle Zitate im selben Raster, nur das aktive sichtbar (startseite.js); ohne Wechsel stehen sie untereinander */
.haltung-wechsel { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 4rem); }
.haltung-wechsel.im-wechsel > .haltung { grid-area: 1 / 1; }
.haltung-wechsel.im-wechsel > .haltung:not(.ist-aktiv) { opacity: 0; visibility: hidden; transition: opacity 450ms var(--kurve-weich), visibility 0s linear 450ms; }
.haltung-wechsel.im-wechsel > .haltung.ist-aktiv { opacity: 1; visibility: visible; transition: opacity 300ms var(--kurve-weich); }
.haltung a:focus-visible { outline: 2px solid #14171a; outline-offset: 3px; }
@media (max-width: 900px) { .haltung { grid-template-columns: minmax(0, 1fr); } .haltung blockquote p { text-indent: 0; max-width: none; } .haltung figcaption { max-width: 26rem; } }

/* ── Magazin mit Themen ──────────────────────────────────────────────────────────────────────────── */
/* Themen-Schlagworte: dezent (Michel, 05.11.2026) – kleine Mono-Schrift, feiner Rahmen, leise Farbe; beim Darüberfahren Akzentfarbe */
.themen-chips { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.themen-chips a { display: inline-flex; padding: .3rem .6rem; border: 1px solid var(--linie); color: var(--leise); text-decoration: none; font: 400 .72rem/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; transition: border-color var(--dauer-1), color var(--dauer-1); }
.themen-chips a:hover, .themen-chips a:focus-visible { border-color: var(--marke); color: var(--marke-text); }

/* ── Mitgliedschaft: die Menschen hinter dem Hub (04.11.2026) ───────────────────────────────────────
   Gruppenfoto 3:2, die Gruppe steht im unteren Teil über die ganze Breite. Rechner: 2:1 mit voller Breite, unten ausgerichtet –
   die Leinwand darüber fällt größtenteils weg. Handy: eigener Ausschnitt 16:10 aus 88 % der Breite (alle Personen bleiben drin). */
.hat-bild .spalten { align-items: center; }
.hat-bild .bildblock { margin: 0; }
.hat-bild .bild-rahmen { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--flaeche); }  /* höher, Breite bleibt (05.11.2026; vorher 2:1) */
.hat-bild .bild-rahmen img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; max-width: none; aspect-ratio: auto; object-fit: fill; }
.hat-bild .bildblock figcaption { font-size: .85rem; color: var(--leise); margin-top: .5rem; }
/* Mitgliedschaft: Links ohne Unterstreichung, kleiner Pfeil rechts, beim Darüberfahren orange (05.11.2026) */
.hat-bild .haken a, .hat-bild p.absatz a { text-decoration: none; transition: color var(--dauer-1); }
.hat-bild .haken a::after, .hat-bild p.absatz a::after { content: "→"; display: inline-block; margin-left: .35em; font-size: .85em; color: var(--marke-text); transition: transform var(--dauer-2) var(--kurve); }
.hat-bild .haken a:is(:hover, :focus-visible), .hat-bild p.absatz a:is(:hover, :focus-visible) { color: var(--marke-text); }
.hat-bild .haken a:is(:hover, :focus-visible)::after, .hat-bild p.absatz a:is(:hover, :focus-visible)::after { transform: translateX(3px); }
@media (max-width: 640px) {
  .hat-bild .bild-rahmen { aspect-ratio: 16 / 10; }
  .hat-bild .bild-rahmen img { width: 113.2%; left: -3.8%; }
}

/* ── Summit: Verbindung zur Summit-Marke (Türkis-Knoten) ─────────────────────────────────────────── */
.summit-text .mono::before { background: #1fb5a9; }

/* ── Häufige Fragen: Überschrift links, Fragen rechts ────────────────────────────────────────────── */
.hat-faq > .huelle { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
.hat-faq .register { position: sticky; top: 96px; display: block; margin: 0; }
.hat-faq .register-link { display: inline-block; margin-top: 1rem; }
.hat-faq .faq { margin: 0; max-width: none; }
@media (max-width: 900px) { .hat-faq > .huelle { grid-template-columns: minmax(0, 1fr); } .hat-faq .register { position: static; } }

/* ── Nachschliff nach der ersten Sichtung ───────────────────────────────────────────────────────── */
/* Abstand vor vollflächigen Bändern kommt vom vorigen Abschnitt; kein weißer Streifen vor dem Summit */
.summit { margin-top: 0; }
section.abschnitt:not([class*="stil-"]):has(+ .summit, + .abschluss) { padding-bottom: var(--abschnitt); }
/* Logos: ohne Kästchen und Lückenfüller, beschnitten, optisch ausgeglichen, auf ruhiger Fläche (Schutzraum) */
.hat-logos .logowand { margin-bottom: 2.5rem; }
.hat-logos .logos { display: flex; flex-wrap: wrap; gap: clamp(.6rem, .4rem + .5vw, 1rem); background: none; border: 0; }
/* Glasfläche wie .logos li in system.css (Summit-Optik, 04.11.2026) – hier nur Größe und Abstand */
.hat-logos .logos li { flex: 1 1 200px; min-height: 120px; aspect-ratio: auto; padding: 1.75rem 2rem; margin: 0; }
.hat-logos .logos img { filter: none; opacity: 1; max-width: 100%; width: auto; max-height: none; object-fit: contain; }
.hat-logos .logos-gross li { min-height: 150px; }
/* Magazin redaktionell (04.11.2026): Hauptartikel links, zwei kompakte Beiträge rechts mit kleinem Bild; bei zwei Beiträgen Zweiteilung */
.magazin-start { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
.magazin-start .aufmacher a { display: grid; text-decoration: none; }
.magazin-start .aufmacher figure { margin: 0 0 1.1rem; aspect-ratio: 40 / 27; overflow: hidden; background: var(--flaeche); }  /* 20 % höher als 16:9 (05.11.2026) */
.magazin-start .aufmacher img { width: 100%; height: 100%; object-fit: cover; }
.magazin-start .aufmacher h3 { margin: .45rem 0 .6rem; font-size: clamp(1.45rem, 1.15rem + 1vw, 2.1rem); line-height: 1.12; letter-spacing: -.03em; text-wrap: balance; }
.magazin-start .aufmacher p:last-child { margin: 0; color: var(--tinte-2); max-width: 44rem; }
.beitrag-kompakte { display: grid; border-top: 2px solid var(--linie-stark); }
.beitrag-kompakt a { display: grid; grid-template-columns: minmax(0, 1fr) clamp(96px, 7vw + 30px, 150px); gap: 1.1rem; align-items: start; padding: 1.25rem 0 1.4rem; border-bottom: 1px solid var(--linie); text-decoration: none; }
.beitrag-kompakt figure { grid-column: 2; grid-row: 1; margin: 0; aspect-ratio: 1; overflow: hidden; background: var(--flaeche); }
.beitrag-kompakt img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dauer-3) var(--kurve); }
.beitrag-kompakt a > div { grid-column: 1; grid-row: 1; }
.beitrag-kompakt h3 { margin: .4rem 0 .45rem; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; }
.beitrag-kompakt p:last-child { margin: 0; color: var(--tinte-2); font-size: .93rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.magazin-start .meta { margin: 0; display: flex; flex-wrap: wrap; gap: .2rem .8rem; font: .7rem/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--leise); }
.magazin-start .meta .kategorie { color: var(--marke-text); font-weight: 600; }
.magazin-start h3 { transition: color var(--dauer-1); }
.magazin-start a:is(:hover, :focus-visible) h3 { color: var(--marke-text); }   /* statt Unterstreichung (Michel, 05.11.2026) */
.beitrag-kompakt a:is(:hover, :focus-visible) img, .magazin-start .aufmacher a:is(:hover, :focus-visible) img { transform: scale(1.04); }
.magazin-start a:focus-visible { outline: 2px solid var(--marke-text); outline-offset: 4px; }
.beitrag-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .magazin-start, .beitrag-zwei { grid-template-columns: minmax(0, 1fr); } }
/* Magazin: Beiträge klappen nacheinander auf – „klack, klack“ (05.11.2026): erst der große, dann rechts einer nach dem anderen */
.js .magazin-start .auftritt { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 650ms var(--kurve); transition-delay: calc(var(--i, 0) * 480ms); }
.js .magazin-start .auftritt.sichtbar { clip-path: inset(-12px); }
/* Formate: die vier Karten klappen langsam nacheinander auf (05.11.2026) */
.js .formate-raster .formatkarte.auftritt { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 900ms var(--kurve); transition-delay: calc(var(--i, 0) * 380ms); }
.js .formate-raster .formatkarte.auftritt.sichtbar { clip-path: inset(-12px); }
@media (prefers-reduced-motion: reduce) { .js .magazin-start .auftritt, .js .formate-raster .formatkarte.auftritt { clip-path: none !important; } }
/* Agenda: Zeile zum Kalender */
.agenda-alle-zeile a { color: var(--marke-text); }
.agenda-alle-zeile .agenda-tag b { color: var(--marke-text); }
/* Mitgliedschaft auf heller Fläche */
.hat-bild.stil-flaeche .bildblock figcaption { color: var(--leise); }

/* ── Leitmotiv an ausgewählten Übergängen (04.11.2026) ──────────────────────────────────────────────
   In den Nutzen (dunkles Band) und ins Praxisbeispiel führt eine Linie vom Rand des Abschnitts zum Knoten der Überschrift –
   die Verbindung geht weiter. Am Raster ausgerichtet (Knotenmitte = linke Inhaltskante + 4 px), zeichnet sich einmal beim
   Sichtbarwerden; Text wird nie überlagert (die Linie endet am Knoten über der Überschrift). */
.hat-nutzen .register::before, .hat-beispiel .register::before { display: block; top: -18px; transition: transform 400ms var(--kurve) 700ms; }
.js .hat-nutzen .register:not(.sichtbar)::before, .js .hat-beispiel .register:not(.sichtbar)::before { transform: scale(0); }
.hat-nutzen .register::after, .hat-beispiel .register::after {
  content: ""; position: absolute; left: 4px; bottom: calc(100% + 18px); width: 2px; height: calc(var(--abschnitt) - 18px);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--marke) 0%, transparent), var(--marke)); transform-origin: bottom; transition: transform 900ms var(--kurve);
}
.js .hat-nutzen .register:not(.sichtbar)::after, .js .hat-beispiel .register:not(.sichtbar)::after { transform: scaleY(0); }
.hat-beispiel .register::after { height: calc(var(--oben) * .8 - 18px); }

/* ── Rhythmus: großzügige und kompakte Abschnitte im Wechsel ──────────────────────────────────────── */
section.abschnitt.hat-nutzen { padding-bottom: calc(var(--abschnitt) * .85); }
section.abschnitt.hat-formate { padding: calc(var(--abschnitt) * .7) 0 calc(var(--abschnitt) * .65); }
section.abschnitt.hat-formate .register { margin-bottom: 1.25rem; }
section.abschnitt.hat-beispiel { --oben: calc(var(--abschnitt) * .75); padding-top: var(--oben); padding-bottom: 0; }
section.abschnitt.hat-beispiel .beispiel-schritte li:last-child { padding-bottom: 0; }
section.abschnitt.hat-beispiel + section.hat-haltung { margin-top: calc(var(--abschnitt) * .75); }
section.abschnitt.hat-haltung { padding: calc(var(--abschnitt) * .85) 0; }
section.abschnitt.hat-logos { padding-top: calc(var(--abschnitt) * .75); }

@media (prefers-reduced-motion: reduce) {
  .hat-kennzahlen .belege::before, .hat-kennzahlen .belege div::before, .beispiel-schritte::before, .js .beispiel-schritte li.auftritt,
  .hat-nutzen .register::after, .hat-beispiel .register::after, .hat-nutzen .register::before, .hat-beispiel .register::before { transition: none !important; transform: none !important; }
}

/* ── Presse (06.11.2026): aktuelle Meldung hervorgehoben, Archiv nach Jahren, Ansprechperson kompakt ─────────────────────────────
   Titel sind Links, Datum und Zusammenfassung klar davon getrennt; die ganze Fläche ist klickbar (Link über die Fläche gezogen). */
.presse-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 1rem + 3vw, 4.5rem); align-items: start; }
.presse-aufmacher { position: relative; display: grid; background: var(--nacht); color: var(--nacht-tinte); border-top: 3px solid var(--marke); }
.presse-aufmacher .pa-bild { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.presse-aufmacher .pa-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dauer-3) var(--kurve); }
.pa-text { display: grid; gap: .9rem; padding: clamp(1.6rem, 1rem + 2.4vw, 3.2rem); }
.presse-aufmacher:not(.mit-bild) .pa-text { min-height: clamp(18rem, 30vw, 26rem); align-content: end; }
.pa-meta { margin: 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; font: .72rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #a7b0b8; }
.pa-meta span { color: #f5873d; font-weight: 600; }
.presse-aufmacher h3 { margin: 0; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.08; letter-spacing: -.03em; font-weight: 650; text-wrap: balance; }
.presse-aufmacher .pa-link { color: #fff; text-decoration: none; }
.presse-aufmacher .pa-link::after, .pa-jahr li .pa-link::after { content: ""; position: absolute; inset: 0; }
.pa-teaser { margin: 0; color: #c3cad0; font-size: 1.05rem; line-height: 1.6; max-width: 40rem; }
.pa-weiter { margin-top: .4rem; color: #f5873d; font-weight: 600; font-size: .95rem; }
.presse-aufmacher:hover .pa-weiter .pfeil { transform: translateX(4px); }
.presse-aufmacher:hover img { transform: scale(1.03); }
.presse-aufmacher:has(.pa-link:focus-visible) { outline: 2px solid var(--marke-text); outline-offset: 4px; }
.pa-link:focus-visible { outline: none; }
.pa-titel { margin: 0 0 .25rem; color: var(--leise); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.pa-jahr + .pa-jahr { margin-top: 1.5rem; }
.pa-jahr .pa-jahr-titel { margin: 0; padding: .6rem 0; border-bottom: 2px solid var(--linie-stark); font-size: .8rem; letter-spacing: .06em; color: var(--tinte); }
.pa-jahr ol { list-style: none; margin: 0; padding: 0; }
.pa-jahr li { position: relative; display: grid; grid-template-columns: 6.2rem minmax(0, 1fr) auto; gap: .35rem 1rem; padding: 1.05rem 0 1.15rem; border-bottom: 1px solid var(--linie); }
.pa-jahr time { padding-top: .2rem; color: var(--leise); font-size: .74rem; letter-spacing: .04em; }
.pa-jahr h3 { margin: 0 0 .3rem; font-size: 1.05rem; line-height: 1.3; letter-spacing: -.01em; font-weight: 600; }
.pa-jahr h3 .pa-link { color: var(--tinte); text-decoration: none; transition: color var(--dauer-1); }
.pa-jahr p { margin: 0; color: var(--tinte-2); font-size: .92rem; line-height: 1.5; }
.pa-jahr .pfeil { align-self: center; color: var(--leise); transition: transform var(--dauer-1), color var(--dauer-1); }
.pa-jahr li:hover h3 .pa-link, .pa-jahr li:has(.pa-link:focus-visible) h3 .pa-link { color: var(--marke-text); }
.pa-jahr li:hover .pfeil { transform: translateX(4px); color: var(--marke-text); }
.pa-jahr li:has(.pa-link:focus-visible) { outline: 2px solid var(--marke-text); outline-offset: 2px; }
@media (max-width: 900px) { .presse-raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .pa-jahr li { grid-template-columns: minmax(0, 1fr) auto; } .pa-jahr time { grid-column: 1 / -1; padding: 0; } }

.ansprechpersonen { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ansprechpersonen li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 1.1rem; align-items: center; padding: 1rem; background: var(--grund); border: 1px solid var(--linie); }
.ansprechpersonen img, .ansprechpersonen .kopf-initialen { width: 112px; height: 112px; object-fit: cover; object-position: 50% 30%; }
.ansprechpersonen strong { display: block; font-size: 1.1rem; letter-spacing: -.01em; }
.ansprechpersonen span:not(.kopf-initialen) { display: block; margin-top: .2rem; color: var(--marke-text); font: .74rem/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
/* Kontaktabschnitt mit Ansprechperson: kompakt statt Großüberschrift */
section.abschnitt:has(.ansprechpersonen) { padding-block: clamp(2.5rem, 2rem + 2.5vw, 4.5rem); }
section.abschnitt:has(.ansprechpersonen) .register h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); }
/* Personen mit LinkedIn und E-Mail (Teamseite, 06.11.2026) */
.koepfe .person-links { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin-top: .45rem; font: .72rem/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.koepfe .person-links a { color: var(--leise); text-decoration: none; }
.koepfe .person-links a:is(:hover, :focus-visible) { color: var(--marke-text); }

/* ── Podcast (06.11.2026): neueste Folge groß (Video 7, Text 5), weitere als Zeilen mit kleinem Video und aufklappbarer Beschreibung ── */
.folgen { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.folge-video { margin: 0; background: var(--nacht); aspect-ratio: 16 / 9; }
.folge-video video { display: block; width: 100%; height: 100%; background: var(--nacht); object-fit: contain; }
.folge-gross { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); align-items: start; }
.folge-gross h3 { margin: .35rem 0 .9rem; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1.08; letter-spacing: -.03em; }
.folge-meta { margin: 0; font: .72rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--marke-text); }
.folge-zitat { margin: 0 0 1rem; padding-left: 1rem; border-left: 3px solid var(--marke); }
.folge-zitat p { margin: 0; font-size: 1.12rem; line-height: 1.45; font-weight: 550; letter-spacing: -.01em; color: var(--tinte); }
.folge-text p { margin: 0 0 .8rem; color: var(--tinte-2); line-height: 1.6; }
.folge-text .folge-zitat p { color: var(--tinte); }
.folge-credits { font: .74rem/1.5 var(--mono) !important; letter-spacing: .03em; color: var(--leise) !important; }
.folgen-liste { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--linie-stark); }
.folgen-liste .folge { display: grid; grid-template-columns: clamp(220px, 26vw, 340px) minmax(0, 1fr); gap: clamp(1rem, .8rem + 1.5vw, 2.25rem); padding: clamp(1.25rem, 1rem + 1vw, 2rem) 0; border-bottom: 1px solid var(--linie); align-items: start; }
.folgen-liste h3 { margin: .3rem 0 .6rem; font-size: 1.25rem; letter-spacing: -.015em; }
.folgen-liste .folge-zitat p { font-size: 1rem; }
.folge-mehr summary { cursor: pointer; font-weight: 600; font-size: .92rem; color: var(--marke-text); list-style: none; }
.folge-mehr summary::-webkit-details-marker { display: none; }
.folge-mehr summary::after { content: " ↓"; } .folge-mehr[open] summary::after { content: " ↑"; }
.folge-mehr[open] summary { margin-bottom: .8rem; }
.folge-mehr summary:focus-visible { outline: 2px solid var(--marke-text); outline-offset: 3px; }
@media (max-width: 860px) { .folge-gross, .folgen-liste .folge { grid-template-columns: minmax(0, 1fr); } }
/* Logoblock (06.11.2026, Förderlogo): Logo ganz, auf heller Fläche – auch im dunklen Schema lesbar */
.logoblock { margin: 1rem 0 0; padding: clamp(1rem, .8rem + 1vw, 1.5rem); background: #fff; border: 1px solid var(--linie); }
.logoblock img { display: block; width: 100%; max-width: 30rem; height: auto; }

/* ── Partner als Zeilen (Partnernetzwerke, Medienpartner, 06.11.2026): Logo auf ruhiger Fläche, Text, Link; ganze Zeile klickbar ── */
.netzpartner-liste { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--linie-stark); }
.netzpartner { position: relative; display: grid; grid-template-columns: clamp(170px, 18vw, 240px) minmax(0, 1fr) auto; gap: clamp(1rem, .8rem + 2vw, 3rem);
  align-items: center; padding: clamp(1.1rem, .9rem + 1vw, 1.75rem) 0; border-bottom: 1px solid var(--linie); }
.netzpartner-logo { display: grid; place-items: center; height: 104px; padding: 1rem 1.25rem; background: #fff; border: 1px solid var(--linie); }
.netzpartner-logo img { max-width: 100%; max-height: 64px; width: auto; object-fit: contain; }
.netzpartner-name { font-weight: 650; font-size: .95rem; text-align: center; color: #0d1013; line-height: 1.25; }
.netzpartner-text h3 { margin: 0 0 .35rem; font-size: 1.2rem; letter-spacing: -.015em; line-height: 1.2; transition: color var(--dauer-1); }
.netzpartner-text p { margin: 0; color: var(--tinte-2); font-size: .97rem; line-height: 1.55; max-width: 46rem; }
.netzpartner-link { white-space: nowrap; font-weight: 600; font-size: .92rem; color: var(--marke-text); text-decoration: none; }
.netzpartner-link::after { content: ""; position: absolute; inset: 0; }
.netzpartner:hover h3 { color: var(--marke-text); }
.netzpartner:hover .pfeil { transform: translate(2px, -2px); }
.netzpartner:has(.netzpartner-link:focus-visible) { outline: 2px solid var(--marke-text); outline-offset: 3px; }
.netzpartner-link:focus-visible { outline: none; }
@media (max-width: 760px) {
  .netzpartner { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .netzpartner-logo { height: 88px; justify-content: start; justify-items: start; }
}
.netzpartner-logo.dunkel { background: #0d1013; border-color: #0d1013; }
/* Podcast-Startfläche (06.11.2026): dunkle Fläche mit Reihenname, Gast und orangem Abspielknopf, Knoten-Motiv der Startseite */
.folge-video { position: relative; }
.folge-start { display: none; }
.folge-video.mit-start .folge-start { position: absolute; inset: 0; display: grid; align-content: end; justify-items: start; gap: .35rem; padding: clamp(1rem, .8rem + 1.5vw, 2rem);
  border: 0; cursor: pointer; text-align: left; color: #fff;
  background: radial-gradient(120% 90% at 85% 10%, rgb(240 122 46 / .28), transparent 55%), linear-gradient(160deg, #1b2026, #0d1013 70%); }
.folge-video.mit-start video { visibility: hidden; }
.folge-start-reihe { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #f5873d; }
.folge-start-gast { font-size: clamp(1.1rem, .9rem + 1vw, 1.9rem); font-weight: 650; letter-spacing: -.02em; line-height: 1.1; }
.folgen-liste .folge-start-gast { font-size: clamp(1rem, .9rem + .4vw, 1.2rem); }
.folge-start-knopf { position: absolute; right: clamp(1rem, .8rem + 1.5vw, 2rem); bottom: clamp(1rem, .8rem + 1.5vw, 2rem); display: grid; place-items: center;
  width: clamp(44px, 3vw + 30px, 64px); aspect-ratio: 1; background: #f07a2e; color: #0d1013; transition: transform var(--dauer-2, .25s) var(--kurve, ease), background var(--dauer-1, .14s); }
.folge-start-knopf svg { width: 42%; height: 42%; margin-left: 6%; }
.folge-start:hover .folge-start-knopf { transform: scale(1.06); background: #fff; }
.folge-start:focus-visible { outline: 3px solid #f07a2e; outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .folge-start-knopf { transition: none; } }

/* ── Pitch-Trophy-Gewinner als Zeitleiste (06.11.2026): Faden mit Knoten wie auf der Startseite, Jahr groß, keine grauen Kästen ── */
.karten-raster:has(> .pitch) { position: relative; gap: 0; padding-top: 2.25rem; }
.karten-raster:has(> .pitch)::before { content: ""; position: absolute; left: 0; right: 0; top: .6rem; height: 2px; background: var(--linie-stark); }
.karten-raster > .karte.pitch { position: relative; background: none; border: 0; box-shadow: none; padding: 0 clamp(1rem, .5rem + 2vw, 2.5rem) 0 0; }
.karten-raster > .karte.pitch::before { content: ""; position: absolute; left: 0; top: calc(-2.25rem + .6rem - 4px); width: 10px; height: 10px; background: var(--tinte); }
.karten-raster > .karte.pitch:first-child::before { background: var(--marke); }
.karte.pitch .mono { margin: 0 0 .5rem; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.karte.pitch h3 { margin: 0 0 .6rem; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.8rem); letter-spacing: -.025em; line-height: 1.1; }
.karte.pitch p:not(.mono) { color: var(--tinte-2); line-height: 1.55; }
@media (max-width: 1000px) {
  .karten-raster:has(> .pitch) { padding-top: 0; padding-left: 1.75rem; gap: 1.75rem; grid-template-columns: minmax(0, 1fr); }
  .karten-raster:has(> .pitch)::before { left: .3rem; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .karten-raster > .karte.pitch::before { left: calc(-1.75rem + .3rem - 4px); top: .3rem; }
}
/* Dunkle Darstellung (06.11.2026): dunkle Flächen der neuen Bausteine heben sich vom dunklen Grund ab */
@media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) .presse-aufmacher { background: #171b20; } :root:not([data-theme="hell"]) .netzpartner-logo.dunkel { border-color: #303840; } }
:root[data-theme="dunkel"] .presse-aufmacher { background: #171b20; }
:root[data-theme="dunkel"] .netzpartner-logo.dunkel { border-color: #303840; }

/* ── Stationen (06.11.2026): jede Veranstaltung als Zeile – Datum, Stadt groß, Thema, Partner; ganze Zeile klickbar ── */
.stationen { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--linie-stark); counter-reset: station; }
.station { position: relative; display: grid; grid-template-columns: 8.5rem minmax(0, 4fr) minmax(0, 7fr) auto; gap: clamp(.75rem, .5rem + 1.5vw, 2.5rem); align-items: baseline;
  padding: clamp(1rem, .8rem + .8vw, 1.5rem) 0; border-bottom: 1px solid var(--linie); }
.station-datum { color: var(--leise); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.station-datum span { font-size: 1.05rem; color: var(--tinte); }
.station-ort h3 { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2.1rem); line-height: 1.05; letter-spacing: -.03em; font-weight: 650; }
.station-ort p { margin: .3rem 0 0; color: var(--leise); font-size: .88rem; }
.station-link { color: inherit; text-decoration: none; transition: color var(--dauer-1); }
.station-link::after { content: ""; position: absolute; inset: 0; }
.station-thema p { margin: 0; color: var(--tinte-2); line-height: 1.5; }
.station-thema .station-partner { margin-top: .45rem; font-size: .88rem; color: var(--leise); }
.station-partner .mono { margin-right: .35rem; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--marke-text); }
.station .pfeil { align-self: center; color: var(--leise); transition: transform var(--dauer-1), color var(--dauer-1); }
.station:hover .station-link, .station:has(.station-link:focus-visible) .station-link { color: var(--marke-text); }
.station:hover .pfeil { transform: translateX(4px); color: var(--marke-text); }
.station:has(.station-link:focus-visible) { outline: 2px solid var(--marke-text); outline-offset: 2px; }
.station-link:focus-visible { outline: none; }
@media (max-width: 900px) {
  .station { grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1rem; }
  .station-datum { grid-column: 1 / -1; }
  .station-thema { grid-column: 1; }
  .station .pfeil { grid-row: 2; grid-column: 2; }
}

/* ── Partner dieser Termine (06.11.2026): Logowand mit Anzahl der Abende ── */
.tp-wand { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
.tp { background: var(--grund); }
.tp > a, .tp > .tp-logo { text-decoration: none; color: inherit; }
.tp > a, .tp:not(:has(a)) { display: grid; grid-template-rows: 1fr auto; gap: .6rem; height: 100%; padding: 1.1rem 1.1rem .9rem; }
.tp-logo { display: grid; place-items: center; min-height: 64px; padding: .6rem; background: #fff; }
.tp-logo img { max-width: 100%; max-height: 44px; width: auto; object-fit: contain; }
.tp-name { font-weight: 650; font-size: .92rem; text-align: center; color: #0d1013; line-height: 1.25; }
.tp-zahl { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); }
.tp > a:is(:hover, :focus-visible) .tp-zahl { color: var(--marke-text); }
.tp > a:focus-visible { outline: 2px solid var(--marke-text); outline-offset: -2px; }
.tp-wand { background: none; gap: 0; border: 0; }
.tp { border: 1px solid var(--linie); margin: 0 -1px -1px 0; }
/* Galerie-Link in den Stationen (06.11.2026): liegt über dem Zeilen-Link */
.station-fotos { position: relative; z-index: 1; display: inline-flex; gap: .35rem; margin-top: .55rem; font-weight: 600; font-size: .88rem; color: var(--marke-text); text-decoration: none; }
.station-fotos:hover { text-decoration: underline; text-underline-offset: .2em; }

/* ── Tabelle und weiterführende Links auf Seiten (06.11.2026) ── */
.tabelle-rahmen { overflow-x: auto; margin: 0 0 1.5rem; border-top: 2px solid var(--linie-stark); }
.tabelle-rahmen:focus-visible { outline: 2px solid var(--marke-text); outline-offset: 3px; }
.inhaltstabelle { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: .95rem; }
.inhaltstabelle caption { caption-side: bottom; text-align: left; padding-top: .6rem; font-size: .82rem; color: var(--leise); }
.inhaltstabelle th, .inhaltstabelle td { padding: .85rem 1rem .85rem 0; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; line-height: 1.5; }
.inhaltstabelle thead th { font: .72rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--leise); font-weight: 500; }
.inhaltstabelle tbody th { font-weight: 650; color: var(--tinte); }
.inhaltstabelle td { color: var(--tinte-2); }
/* Handy: jede Zeile als Karte – erste Zelle als Überschrift, die übrigen mit ihrem Spaltennamen darüber (06.11.2026) */
@media (max-width: 640px) {
  .tabelle-rahmen { overflow: visible; }
  .inhaltstabelle { min-width: 0; display: block; }
  .inhaltstabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .inhaltstabelle tbody, .inhaltstabelle tr, .inhaltstabelle caption { display: block; }
  .inhaltstabelle tr { padding: .9rem 0; border-bottom: 1px solid var(--linie); }
  .inhaltstabelle th, .inhaltstabelle td { display: block; padding: 0; border: 0; }
  .inhaltstabelle tbody th { font-size: 1.02rem; margin-bottom: .35rem; }
  .inhaltstabelle td + td, .inhaltstabelle th + td { margin-top: .45rem; }
  .inhaltstabelle td[data-spalte]::before { content: attr(data-spalte); display: block; font: .68rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--leise); margin-bottom: .1rem; }
}
.linkliste { margin: 0 0 1.5rem; }
.linkliste-titel { margin: 0 0 .5rem; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); }
.linkliste ul { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--linie-stark); }
.linkliste a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; padding: .95rem 0; border-bottom: 1px solid var(--linie); text-decoration: none; color: inherit; }
.linkliste strong { grid-column: 1; font-weight: 600; transition: color var(--dauer-1); }
.linkliste span:not(.pfeil) { grid-column: 1; color: var(--tinte-2); font-size: .92rem; }
.linkliste .pfeil { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--leise); }
.linkliste a:is(:hover, :focus-visible) strong { color: var(--marke-text); }
.stil-dunkel .tabelle-rahmen, .stil-dunkel .linkliste ul { border-top-color: currentColor; }

/* Praxisbeispiel und Podcast-Folge in einer Seitenspalte: untereinander statt nebeneinander (06.11.2026, Themenseiten) */
.spalte .praxis-raster { grid-template-columns: minmax(0, 1fr); }
.spalte .praxis:only-child dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
.spalte .praxis:only-child dl > div::before { display: block; }
.spalte .folge-gross { grid-template-columns: minmax(0, 1fr); }
.spalte .folge-gross h3, .spalte .folge-gross .folge-titel { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.8rem); }

/* Agenda: der nächste Termin im Überblick neben der großen Kachel (06.11.2026) */
.agenda-rechts { display: grid; gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); align-content: start; }
.agenda-steckbrief { display: grid; gap: 1rem; justify-items: start; }
.agenda-steckbrief .kicker-punkt { margin: 0; }
.steck-thema { margin: 0; font-size: clamp(1.35rem, 1.1rem + .9vw, 1.9rem); line-height: 1.2; letter-spacing: -.025em; font-weight: 600; text-wrap: balance; }
.steck-daten { margin: 0; display: grid; gap: .55rem; width: 100%; border-top: 2px solid var(--linie-stark); padding-top: 1rem; }
.steck-daten > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; }
.steck-daten dt { font: .72rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--leise); }
.steck-daten dd { margin: 0; }
.steck-kopf { margin: .5rem 0 0; font-size: .72rem; color: var(--leise); text-transform: uppercase; letter-spacing: .05em; }
.steck-firmen, .steck-speaker { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; width: 100%; }
.steck-firmen li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; align-items: center; }
.steck-firmen li.ohne-logo { grid-template-columns: minmax(0, 1fr); }
.steck-firmen .tp-logo { min-height: 58px; }
.steck-firmen .tp-logo img { max-height: 36px; }
.steck-firma { display: grid; gap: .15rem; }
.steck-firma .mono { font-size: .68rem; color: var(--marke-text); text-transform: uppercase; letter-spacing: .05em; }
.steck-firma strong a { color: inherit; text-decoration: none; }
.steck-firma strong a:hover { text-decoration: underline; }
.steck-firma > span:last-child:not(.mono) { color: var(--leise); font-size: .9rem; line-height: 1.45; }
.steck-speaker li { display: grid; gap: .1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--linie); }
.steck-speaker span, .steck-mehr { color: var(--leise); font-size: .9rem; }
.steck-mehr { margin: 0; }
.agenda-steckbrief + .agenda-liste { border-top-width: 1px; }
@media (max-width: 560px) { .steck-firmen li { grid-template-columns: 6.5rem minmax(0, 1fr); } .steck-daten > div { grid-template-columns: 4.5rem minmax(0, 1fr); } }
.steck-text { margin: -.4rem 0 0; color: var(--leise); line-height: 1.55; max-width: 60ch; }

/* Logofelder wie die Logowand der Startseite (06.11.2026, Michel: „Logo im Frame wie Startseite, damit es im Dark und Light Modus
   funktioniert“): heller Glasrahmen in beiden Modi, Logos in Originalfarbe, weiße Dateihintergründe gehen per Multiplizieren auf.
   Gilt für Partnerwand und Terminüberblick (.tp-logo) und die Tech-Partner auf den Terminseiten (.logo-rahmen). */
.tp-logo, .logo-rahmen { --glas-a: rgb(243 246 248 / .9); --glas-b: rgb(206 215 222 / .78); --glas-kante: rgb(255 255 255 / .75); --glas-rand: rgb(255 255 255 / .28); --glas-schatten: 0 14px 34px -18px rgb(0 0 0 / .75);
  position: relative; overflow: hidden; isolation: isolate; border: 0; border-radius: 3px;
  background: linear-gradient(150deg, var(--glas-a), var(--glas-b)); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 1px 0 var(--glas-kante), inset 0 0 0 1px var(--glas-rand), var(--glas-schatten); }
:root[data-theme="hell"] :is(.tp-logo, .logo-rahmen) { --glas-a: rgb(250 251 252 / .92); --glas-b: rgb(226 232 237 / .88); --glas-kante: rgb(255 255 255 / .95); --glas-rand: rgb(11 14 17 / .08); --glas-schatten: 0 12px 28px -18px rgb(11 14 17 / .35); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dunkel"]) :is(.tp-logo, .logo-rahmen) { --glas-a: rgb(250 251 252 / .92); --glas-b: rgb(226 232 237 / .88); --glas-kante: rgb(255 255 255 / .95); --glas-rand: rgb(11 14 17 / .08); --glas-schatten: 0 12px 28px -18px rgb(11 14 17 / .35); } }
:is(.tp-logo, .logo-rahmen)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(115deg, rgb(255 255 255 / .55) 0%, rgb(255 255 255 / 0) 38%); }
:is(.tp-logo, .logo-rahmen) img { filter: none; opacity: 1; mix-blend-mode: multiply; }
.tp-logo .tp-name, .logo-rahmen strong { color: #1a2026; }
.tp > a:is(:hover, :focus-visible) .tp-logo { outline: 1px solid color-mix(in srgb, var(--marke) 70%, transparent); outline-offset: 3px; }
.logo-rahmen { display: grid; place-items: center; justify-self: start; min-width: 9rem; min-height: 64px; padding: .9rem 1.25rem; }
.logo-rahmen img { max-height: 36px; max-width: 12rem; width: auto; object-fit: contain; }


/* ── Ein kommender Termin groß (06.11.2026, zweite Fassung): oben Motiv + Einstieg, darunter Programm, Mitwirkende, Anmeldezeile ── */
.termin-gross { display: grid; gap: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.tg-oben { display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: start; }
.tg-oben.ohne-bild { grid-template-columns: minmax(0, 1fr); }
.tg-bild { margin: 0; }
.tg-bild img { display: block; width: 100%; height: auto; }   /* natürliches Seitenverhältnis, nichts abgeschnitten */
.tg-einstieg { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.tg-dach { margin: 0; color: var(--marke-text); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }
.tg-wann { margin: 0; display: grid; gap: .15rem; }
.tg-wann time { font-weight: 650; font-size: 1.05rem; }
.tg-wann span { color: var(--leise); font-size: .95rem; }
.termin-gross h3 { margin: 0; font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.4rem); line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; max-width: 22ch; overflow-wrap: anywhere; }
.termin-gross h3 a { color: inherit; text-decoration: none; }
.termin-gross h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.tg-beschreibung { display: grid; gap: .7rem; max-width: 60ch; }
.tg-beschreibung p { margin: 0; line-height: 1.6; color: var(--tinte-2); }
.tg-anmeldung, .tg-schluss { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.25rem; }
.tg-anmeldung .status, .tg-schluss .status { margin: 0; flex-basis: 100%; }
.tg-zugang { margin: 0; color: var(--leise); font-size: .86rem; }
/* Teile über die ganze Breite */
.tg-teil { display: grid; gap: .75rem; }
.tg-teil-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1.5rem; padding-bottom: .6rem; border-bottom: 1px solid var(--linie-stark); }
.tg-teil-kopf h4 { margin: 0; font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); letter-spacing: -.02em; }
.tg-gast { margin: 0; font-size: .95rem; }
.tg-gast .mono { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); margin-right: .5rem; }
.tg-programm { list-style: none; margin: 0; padding: 0; }
.tg-programm li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: .25rem 1.5rem; align-items: baseline; padding: .8rem 0; border-bottom: 1px solid var(--linie); }
.tg-zeit { font: .78rem/1.5 var(--mono); color: var(--leise); }
.tg-punkt { display: grid; gap: .2rem; }
.tg-punkt strong { font-weight: 650; line-height: 1.35; }
.tg-punkt span { color: var(--tinte-2); font-size: .92rem; line-height: 1.5; max-width: 70ch; }
.tg-leute { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
.tg-leute li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .85rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--linie); }
.tg-leute li[hidden] { display: none; }
.tg-leute strong { display: block; font-size: 1rem; line-height: 1.3; }
.tg-leute small { display: block; color: var(--leise); font-size: .88rem; line-height: 1.4; }
.tg-avatar { width: 3rem; height: 3rem; border-radius: 50%; overflow: hidden; background: var(--flaeche); display: grid; place-items: center; }
.tg-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; transform-origin: center; }
.tg-initialen { font: 650 .85rem/1 var(--schrift); color: var(--tinte-2); letter-spacing: .02em; box-shadow: inset 0 0 0 1px var(--linie); }
.tg-alle { all: unset; cursor: pointer; justify-self: start; font-size: .9rem; font-weight: 600; color: var(--marke-text); padding: .4rem 0; }
.tg-alle:hover { text-decoration: underline; text-underline-offset: .2em; }
.tg-alle:focus-visible { outline: 2px solid var(--marke-text); outline-offset: 2px; }
.tg-schluss { justify-content: space-between; padding: 1rem 1.25rem; background: var(--flaeche); }
.tg-schluss .status { flex-basis: auto; }
.tg-schluss .tg-zugang { margin-left: auto; }
.agenda-leer { margin: 0; padding: 1.1rem 1.25rem; background: var(--flaeche); display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; }
@media (max-width: 900px) {
  .tg-oben { grid-template-columns: minmax(0, 1fr); }
  .tg-leute { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .tg-programm li { grid-template-columns: minmax(0, 1fr); }
  .tg-anmeldung .knopf, .tg-schluss .knopf { width: 100%; justify-content: center; }
  .tg-schluss { padding: 1rem; }
  .tg-schluss .tg-zugang { margin-left: 0; }
}

/* „Persönlich betreut“ auf Über den Hub (06.11.2026, Michel: „Team Bilder größer“): vier Köpfe je Reihe statt alle in einer Zeile */
.hat-personen-kurz .team .koepfe { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: auto; gap: 1.75rem 1.25rem; }
.hat-personen-kurz .team .koepfe img { filter: none; }
.hat-personen-kurz .team .koepfe strong { font-size: 1rem; }
.hat-personen-kurz .team .koepfe span { font-size: .86rem; }
@media (max-width: 1000px) { .hat-personen-kurz .team .koepfe { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hat-personen-kurz .team .koepfe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Fließtext neben der Karte (06.11.2026, Michel: „Fliestext“): Einleitung, Liste und Absatz in einer Schriftgröße und mit gleichmäßigen
   Abständen; Liste mit eigenen Marken statt Browser-Punkten, alles in derselben Spaltenbreite */
.hub-netz-text p.gross, .hub-netz-text p.absatz, .hub-netz-text .punktliste { max-width: 31rem; font-size: clamp(1rem, .96rem + .18vw, 1.08rem); line-height: 1.6; color: var(--tinte-2); }
.hub-netz-text p.gross + :is(.punktliste, p.absatz), .hub-netz-text .punktliste + :is(p.absatz, p.gross), .hub-netz-text p.absatz + p.absatz { margin-top: 1rem; }
.hub-netz-text .punktliste { list-style: none; padding: 0; gap: .5rem; margin-bottom: 0; }
.hub-netz-text .punktliste li { position: relative; padding-left: 1.1rem; }
.hub-netz-text .punktliste li::before { content: ""; position: absolute; left: 0; top: .68em; width: 6px; height: 6px; background: var(--marke); }
.hub-netz-text p.absatz { margin-bottom: 0; }
.hub-netz-text p:has(> .knopf) { margin: 1.5rem 0 0; }

/* Infokacheln in der rechten Spalte (06.11.2026, Michel: „rechte Kacheln etwas runter, mit etwas orangenen Akzenten“): auf breiten
   Bildschirmen auf Höhe der Überschrift statt der Dachzeile, orange Kante und Symbol, Titel mit orangem Strich */
@media (min-width: 901px) {
  .spalten:has(> .spalte:first-child > .register:first-child) > .spalte + .spalte > .meldung:first-child { margin-top: clamp(2.25rem, 1.5rem + 2vw, 3.5rem); }   /* nur wenn links Dachzeile und Überschrift stehen */
}
.spalte .meldung:not(.erfolg):not(.fehler) { border-left-color: var(--marke); }
.spalte .meldung:not(.erfolg):not(.fehler)::before { background: var(--marke); color: #14171a; }
.spalte .meldung:not(.erfolg):not(.fehler) strong { color: var(--tinte); }
.spalte p.gross + :is(p.gross, p.absatz) { margin-top: .9rem; }   /* Absätze in Spalten nicht aneinanderkleben (06.11.2026) */

/* Nutzen-Band auf Unterseiten (06.11.2026, Michel: „Rechter Teil mit Oberkante großem Bild“): rechte Spalte bündig mit dem großen Bild –
   der versetzte Einstieg bleibt nur auf der Startseite */
@media (min-width: 901px) { body:not(.hat-buehne) .nutzen-teil.n2 { margin-top: 0; } }

/* Bild-Text-Block (06.11.2026, Michel: „text kleiner“): Fließtext in Lesegröße wie die übrigen Absätze, Dachzeile in Mono-Größe */
.feature-text p { font-size: 1.05rem; line-height: 1.6; }   /* wie p.absatz */
.feature-text p + p { margin-top: .9rem; }
.feature-text .kicker-punkt { font-size: .76rem; }

/* Liste „nebeneinander“ (06.11.2026): kurze Punkte in Spalten, orange Strich oben, Titel und ein Satz */
.nebeneinander { list-style: none; margin: 1.75rem 0 clamp(2rem, 1.5rem + 2vw, 3.5rem); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem clamp(1.25rem, 1rem + 1.5vw, 2.5rem); }
.nebeneinander li { display: grid; gap: .45rem; align-content: start; padding-top: 1rem; border-top: 2px solid var(--linie-stark); position: relative; }
.nebeneinander li::before { content: ""; position: absolute; top: -2px; left: 0; width: 2.5rem; height: 2px; background: var(--marke); }
.nebeneinander strong { font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); letter-spacing: -.015em; line-height: 1.2; }
.nebeneinander span { color: var(--tinte-2); font-size: .98rem; line-height: 1.55; }

/* Terminkarten (06.11.2026, Michel: „um das Event eine dezente Linie oder Hintergrund“): leichte Fläche mit feinem Rahmen, Inhalt mit Innenabstand */
.termin a { background: var(--flaeche); border: 1px solid var(--linie); border-top: 2px solid var(--linie-stark); transition: border-color .16s; }
.termin a:is(:hover, :focus-visible) { border-color: var(--linie-stark); }
.termin-text { padding: 1rem 1.1rem .75rem; }
.termin-fuss { margin-inline: 1.1rem; padding-bottom: .9rem; }

/* Karte „Standorte der Mitglieder“ (06.11.2026): Punkte, Größe nach Zahl der Mitglieder am Ort.
   Seit 07.11.2026 mit Ortsnamen (Michel: „Orte ranschreiben“): die Seite je Name (seite-r, -l, -o, -u, -or, -ur, -ol, -ul) wählt der Bau so,
   dass sich auf der schmalsten Karte (288 px – Handy mit 320 px Breite –, 12 px Schrift) nichts überschneidet – Abstand --d = Punktradius + 3 px wie in darstellung.py. */
.hub-netz.ist-mitglieder .mitglied-ort .ort-punkt { position: absolute; left: -6px; top: -6px; transform: scale(var(--g, 1)); }
.hub-netz.ist-mitglieder .karte-orte { pointer-events: none; }
.hub-netz.ist-mitglieder .mitglied-ort .ort-name { --d: calc(6px * var(--g, 1) + 3px); --dd: calc(var(--d) * .7); position: absolute; left: 0; top: 0; padding: 1px 2px;
  font: 600 12px/1 var(--schrift); letter-spacing: -.005em; color: var(--tinte); white-space: nowrap; transform: translate(var(--d), -50%);
  text-shadow: 0 0 2px var(--flaeche), 0 0 4px var(--flaeche), 0 0 6px var(--flaeche); }
.hub-netz.ist-mitglieder .seite-l .ort-name { transform: translate(calc(-100% - var(--d)), -50%); }
.hub-netz.ist-mitglieder .seite-o .ort-name { transform: translate(-50%, calc(-100% - var(--d))); }
.hub-netz.ist-mitglieder .seite-u .ort-name { transform: translate(-50%, var(--d)); }
.hub-netz.ist-mitglieder .seite-or .ort-name { transform: translate(var(--dd), calc(-100% - var(--dd))); }
.hub-netz.ist-mitglieder .seite-ur .ort-name { transform: translate(var(--dd), var(--dd)); }
.hub-netz.ist-mitglieder .seite-ol .ort-name { transform: translate(calc(-100% - var(--dd)), calc(-100% - var(--dd))); }
.hub-netz.ist-mitglieder .seite-ul .ort-name { transform: translate(calc(-100% - var(--dd)), var(--dd)); }
@media (min-width: 761px) and (min-height: 600px) { .hub-netz.ist-mitglieder .mitglied-ort .ort-name { font-size: 13px; } }
/* Orte ohne Kartenpunkt (Ausland, fehlende Koordinate) unter der Legende */
.karte-weitere { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--leise); }

/* Podcast, große Folge neu angeordnet (06.11.2026, Michel: „anders anordnen“): Video und Kopf (Datum, Gast, Zitat) nebeneinander,
   die Beschreibung darunter über die ganze Breite in zwei Spalten – keine lange Textsäule neben einem kurzen Video */
.folge-gross { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "video kopf" "text text" "credits credits"; row-gap: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem); align-items: end; }
.folge-gross > .folge-video { grid-area: video; }
.folge-gross > .folge-text-gross { display: contents; }
.folge-gross .folge-kopf { grid-area: kopf; padding-bottom: .25rem; }
.folge-gross .folge-kopf .folge-zitat { margin-bottom: 0; }
.folge-gross .folge-kopf .folge-zitat p { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); }
.folge-gross .folge-beschreibung { grid-area: text; columns: 2 22rem; column-gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); padding-top: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); border-top: 1px solid var(--linie); }
.folge-gross .folge-beschreibung p { break-inside: avoid-column; }
.folge-gross > .folge-text-gross > .folge-credits { grid-area: credits; margin: calc(-1 * clamp(1rem, .8rem + 1vw, 2rem)) 0 0; }
@media (max-width: 860px) { .folge-gross { grid-template-columns: minmax(0, 1fr); grid-template-areas: "video" "kopf" "text" "credits"; row-gap: 1.25rem; } .folge-gross .folge-beschreibung { columns: auto; } }
.spalte .folge-gross { grid-template-areas: "video" "kopf" "text" "credits"; }
.spalte .folge-gross .folge-beschreibung { columns: auto; }

/* Ablauf in Schritten (06.11.2026, Michel: „unter die 4 Punkte eine Haarlinie“): feine Linie unter jedem Schritt als Abschluss */
.schritte li { padding-bottom: clamp(1rem, .8rem + .6vw, 1.5rem); border-bottom: 1px solid var(--linie); }

/* Schritte in einer Reihe (06.11.2026): so viele Spalten wie Schritte, Text etwas kleiner; schmal untereinander bzw. zu zweit */
.schritte { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.schritte p { font-size: .95rem; line-height: 1.55; }
.schritte[style*="--n:5"] .schritt-nr, .schritte[style*="--n:6"] .schritt-nr { font-size: clamp(2rem, 1.6rem + 1.2vw, 2.8rem); }
@media (max-width: 1100px) { .schritte[style*="--n:5"], .schritte[style*="--n:6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2rem; } }
@media (max-width: 900px) { .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 2rem; } }
@media (max-width: 520px) { .schritte { grid-template-columns: minmax(0, 1fr) !important; } }

/* Fotogalerien (06.11.2026): je Jahr ein Raster aus Bildkarten; ohne freigegebene Fotos ruhiger („Fotos folgen“) */
.galerien { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 4rem); }
.gal-jahr-titel { margin: 0 0 1.25rem; padding-bottom: .75rem; border-bottom: 1px solid var(--linie); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); letter-spacing: -.03em; }
.gal-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, .8rem + 1vw, 1.75rem); }
.gal-karte a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; background: var(--flaeche); border: 1px solid var(--linie); }
.gal-bild { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--nacht); }
.gal-bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dauer-2) var(--kurve); }
.gal-ohne { background: linear-gradient(135deg, var(--nacht), #2b3138); }
.gal-karte.ohne-fotos .gal-bild img { filter: grayscale(.6); opacity: .75; }
.gal-karte a:is(:hover, :focus-visible) .gal-bild img { transform: scale(1.035); }
.gal-karte a:focus-visible { outline: 2px solid var(--marke-text); outline-offset: 2px; }
.gal-text { display: grid; gap: .4rem; padding: 1rem 1.1rem 1.15rem; flex: 1; align-content: start; }
.gal-meta { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--marke-text); }
.gal-titel { font-size: 1.2rem; line-height: 1.25; letter-spacing: -.015em; font-weight: 620; }
.gal-zahl { margin-top: .35rem; font-weight: 600; color: var(--marke-text); }
.gal-folgen { margin-top: .35rem; color: var(--leise); font-size: .92rem; }
@media (max-width: 1000px) { .gal-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .gal-raster { grid-template-columns: minmax(0, 1fr); } }

/* Häufige Fragen (06.11.2026, Michel: „Schaltfläche unter die Fragen“): der Knopf „Alle Fragen“ steht in der Spalte der Fragen */
@media (min-width: 901px) { .hat-faq > .huelle > p:last-child { grid-column: 2; margin: 0; } }
.hat-faq > .huelle > p:last-child { margin-top: .5rem; }

/* Sprachumschalter DE/EN (07.11.2026): im Kopf als kurzes Kürzel, im Handy-Menü als Knopf, im Fuß in der Unterzeile */
.sprachwahl { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 .35rem; font: 600 .78rem/1 var(--mono); letter-spacing: .06em; color: inherit; text-decoration: none; border-radius: 999px; }
.sprachwahl:hover { opacity: .75; }
.sprachwahl:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; }
.fuss .unterzeile .urheber > a.fuss-sprache { font: 400 .8rem/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--leise); margin-right: 1.25rem; }
.fuss .unterzeile .urheber > a.fuss-sprache:hover { color: var(--tinte); }
@media (max-width: 380px) { .kopf .sprachwahl { min-width: 32px; } }
/* Englische Rechtstexte: Hinweis, dass die deutsche Fassung gilt */
.hinweis-fassung { margin-top: 1.5rem; }
.nummern + p:has(> .knopf:only-child) { text-align: right; }   /* Schaltfläche unter Schrittliste rechtsbündig (Michel 07.11.2026) */
/* 08.11.2026 Handy-Prüfung: Vergleichstabelle der Mitgliedschaft wieder wischbar – die Karten-Regel für Inhaltstabellen (overflow: visible)
   überschrieb hier das seitliche Wischen, die Spalten rechts waren abgeschnitten */
@media (max-width: 760px) { .tabelle-rahmen.vergleich-rahmen { overflow-x: auto; overflow-y: hidden; } }
/* Sehr schmale Handys (bis 400 px): lange Knopftexte umbrechen statt über den Rand zu laufen, Kalender-Filter rutscht in die nächste Zeile */
@media (max-width: 400px) {
  main .knopf { white-space: normal; max-width: 100%; padding-block: .7rem; line-height: 1.25; text-align: center; }
  .kf-links { flex-wrap: wrap; }
}
/* Stufe „Netzwerkpartner“ (08.11.2026): eine Kachelbreite wie bei den strategischen Partnern (4 je Reihe), etwas niedriger */
.logowand-netzwerkpartner .logos li { flex: 0 1 calc((100% - 3 * clamp(.6rem, .4rem + .5vw, 1rem)) / 4); }
.hat-logos .logowand-netzwerkpartner .logos-gross li { min-height: 120px; }
@media (max-width: 560px) { .logowand-netzwerkpartner .logos li { flex-basis: calc((100% - clamp(.6rem, .4rem + .5vw, 1rem)) / 2); } }
/* Partnernetzwerke und Medienpartner (08.11.2026, Michel: „Logos Glasoptik“): Logofelder aus demselben hellen Glas wie die Logowände;
   Logos mit eigenem dunklen Grund (Haken „auf dunklem Grund“) bekommen dunkles Glas mit derselben Kante und demselben Schatten. */
.netzpartner-logo { --glas-a: rgb(243 246 248 / .9); --glas-b: rgb(206 215 222 / .78); --glas-kante: rgb(255 255 255 / .75); --glas-rand: rgb(255 255 255 / .28); --glas-schatten: 0 14px 34px -18px rgb(0 0 0 / .75);
  position: relative; overflow: hidden; isolation: isolate; border: 0; border-radius: 3px;
  background: linear-gradient(150deg, var(--glas-a), var(--glas-b)); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 1px 0 var(--glas-kante), inset 0 0 0 1px var(--glas-rand), var(--glas-schatten); }
:root[data-theme="hell"] .netzpartner-logo { --glas-a: rgb(250 251 252 / .92); --glas-b: rgb(226 232 237 / .88); --glas-kante: rgb(255 255 255 / .95); --glas-rand: rgb(11 14 17 / .08); --glas-schatten: 0 12px 28px -18px rgb(11 14 17 / .35); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dunkel"]) .netzpartner-logo { --glas-a: rgb(250 251 252 / .92); --glas-b: rgb(226 232 237 / .88); --glas-kante: rgb(255 255 255 / .95); --glas-rand: rgb(11 14 17 / .08); --glas-schatten: 0 12px 28px -18px rgb(11 14 17 / .35); } }
.netzpartner-logo::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(115deg, rgb(255 255 255 / .55) 0%, rgb(255 255 255 / 0) 38%); }
.netzpartner-logo:not(.dunkel) img { mix-blend-mode: multiply; }
.netzpartner-logo .netzpartner-name { color: #1a2026; }
.netzpartner-logo.dunkel, :root[data-theme] .netzpartner-logo.dunkel { --glas-a: rgb(24 29 34 / .96); --glas-b: rgb(9 11 14 / .96); --glas-kante: rgb(255 255 255 / .16); --glas-rand: rgb(255 255 255 / .08); border: 0; }
.netzpartner-logo.dunkel::before { background: linear-gradient(115deg, rgb(255 255 255 / .12) 0%, rgb(255 255 255 / 0) 38%); }