/* ==========================================================================
   Darstellung der Bausteine (Verein.Blocks), übernommen aus Karls Mockup 2.0 (Landingpage "lp-…", Karten, Hinweise,
   Aufklapper, Teilen-Leiste).

   Dieselbe Datei benutzen die öffentliche Seite UND die Live-Ansicht der Verwaltung (neben Radzen). Deshalb:
   - ALLE Regeln beginnen mit der Wurzelklasse ".blocks"; es gibt keine Regel für nackte Elemente (body, h1, a …) außerhalb.
   - Alle Klassen haben den Vorsatz "b-" (englische Namen; Karls deutsche Namen stehen als Hinweis daneben).
   - Die Datei hängt NICHT von site.css ab. Sie braucht nur tokens.css (Farben, Maße, Schrift).
   - Farben und Maße nur über Variablen aus tokens.css, nie als fester Wert.
   - Keine Adressen von fremden Servern, keine Einbindungen anderer Stylesheets, keine eingebetteten Daten-URIs:
     Symbole sind eingebettetes SVG in den Komponenten.
   - Bilder werden nie über ihre echte Breite hinaus vergrößert (siehe ".b-figure").
   - Kontraste (WCAG AA) sind aus den echten Farbwerten gerechnet; die Paarungen stehen bei den Regeln.
   ========================================================================== */

/* ---------- Grundlagen ---------- */

.blocks {
  /* Fläche für Listenzeilen und die kompakte Teilen-Leiste, die auf dem Abschnitt liegen: auf Weiß ein Papierton, sonst Weiß
     (wie in Karls Vorlage; die Abschnitte setzen es neu). Karten, Säulen, Wege und Reiter-Inhalte sind immer weiß. */
  --b-inset: var(--color-white);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  /* Die Breite des Bausteinbereichs, nicht des Fensters, entscheidet über Spalten und Schriftgrößen (Container-Abfragen
     und "cqw" statt Medienabfragen und "vw"). Auf der öffentlichen Seite ist das dasselbe wie die Fensterbreite; in der
     Live-Ansicht der Verwaltung (schmale Vorschau neben der Seitenleiste, Handy-Ansicht) sieht die Seite dadurch so aus,
     wie sie bei dieser Breite aussähe. */
  container-type: inline-size;
}

.blocks,
.blocks *,
.blocks *::before,
.blocks *::after {
  box-sizing: border-box;
}

/* Grundabstände zurücksetzen. ":where" hält die Gewichtung der Regel niedrig, damit jede Baustein-Regel sie überstimmt. */
.blocks :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) {
  margin: 0;
  padding: 0;
}

.blocks :where(ul, ol) {
  list-style: none;
}

.blocks :where(img, svg) {
  display: block;
}

/* Das HTML-Attribut "hidden" muss immer gewinnen (sonst würde zum Beispiel "display: inline-flex" es aushebeln). */
.blocks [hidden] {
  display: none !important;
}

/* Fokus-Rahmen: Wer mit der Tastatur bedient, sieht immer, wo er ist (wie site.css: dunkles Orange, überall >= 4,3 : 1). */
.blocks :where(a, button, summary, input, label, [tabindex]):focus-visible {
  outline: 3px solid var(--color-orange-dark);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Nur für Hilfsprogramme lesbar */
.blocks .b-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Gemeinsame Breite (Karl: .bahn) */
.blocks .b-container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Ein Abschnitt in einem Abschnitt: kein zweiter Seitenrand */
.blocks .b-section .b-section .b-container {
  padding: 0;
}

/* Der innere Abschnitt ist ein farbiges Feld in der Breite des Seiteninhalts. Damit Text und Karten nicht bündig am Rand des Feldes
   kleben, bekommt er innen links und rechts etwas Luft und runde Ecken (E037: erst mit den verschobenen Startseiten-Abschnitten
   auf "Worum es geht" fiel auf, dass Überschriften am Rand klebten). */
.blocks .b-section .b-section {
  padding-left: clamp(16px, 3cqw, 36px);
  padding-right: clamp(16px, 3cqw, 36px);
  border-radius: var(--radius-xl);
}

/* Bausteine, die nicht selbst die volle Breite einnehmen (zum Beispiel ein Hinweis unter dem Kopfbereich) */
.blocks .b-loose {
  padding-top: 24px;
  padding-bottom: 24px;
}

.blocks .b-loose + .b-loose {
  padding-top: 0;
}

/* ---------- Kleine Bausteine der Typografie ---------- */

/* Kleine Zeile über der Überschrift (Karl: .lp-auge). Orange-Text auf Weiß 5,35 / Papier 4,97 / Sand 4,56 / Himmel 4,67 : 1 */
.blocks .b-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--color-orange-text);
  margin: 0 0 14px;
}

.blocks .b-eyebrow::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 3px;
  background: var(--color-orange);
  flex-shrink: 0;
}

/* Einleitung (Karl: .lp-lead). Neutral-7 auf Sand 7,69 / Himmel 7,88 : 1 */
.blocks .b-lead {
  font-size: clamp(18px, 1.9cqw, 21px);
  line-height: 1.55;
  color: var(--color-neutral-7);
  max-width: 60ch;
}

.blocks .b-lead strong {
  color: var(--color-ink);
}

/* Textmarker unter dem hervorgehobenen Wort (Karl: .lp-mark) */
.blocks .b-mark {
  background: linear-gradient(transparent 62%, var(--color-mark) 62%, var(--color-mark) 92%, transparent 92%);
  padding: 0 0.06em;
}

/* Titel eines Abschnitts (Karl: ".lp h2") */
.blocks .b-section__title {
  font-size: clamp(30px, 4.2cqw, 48px);
  line-height: 1.07;
  letter-spacing: -0.032em;
  font-weight: 800;
  color: var(--color-ink);
  margin: 0 0 16px;
}

/* Hervorgehobener Teil eines Abschnittstitels = Zitatwort in Blau auf eigener Zeile (Karl: ".lp-politik h2 .zit" plus Umbruch).
   Himmel auf Himmel-hell 4,77 : 1 (große Schrift braucht 3 : 1), auf Weiß und Papier höher. */
.blocks .b-section__title strong {
  display: block;
  color: var(--color-sky);
}

/* ---------- Knöpfe und Verweise (Karl: .knopf, .lp-pfeil) ---------- */

/* Weißer Text auf Orange-Dunkel 5,08 : 1, auf Orange-Tief (Hover) 7,40 : 1 */
.blocks .b-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  background: var(--color-orange-dark);
  color: var(--color-on-accent);
}

.blocks .b-button:hover {
  background: var(--color-orange-deep);
}

.blocks .b-button--secondary {
  background: var(--color-white);
  color: var(--color-ink);
  border-color: var(--color-neutral-3);
}

.blocks .b-button--secondary:hover {
  background: var(--color-white);
  border-color: var(--color-orange);
  color: var(--color-orange-text);
}

.blocks .b-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.blocks .b-buttons--large .b-button {
  padding: 15px 26px;
  font-size: 17px;
}

.blocks .b-buttons--center {
  justify-content: center;
}

/* Text-Verweis mit Pfeil im Text (Karl: .lp-pfeil) */
.blocks .b-arrow-link {
  font-weight: 700;
  font-size: 17px;
  color: var(--color-orange-text);
  text-decoration: none;
}

.blocks .b-arrow-link:hover {
  text-decoration: underline;
}

.blocks .b-cta {
  display: flex;
  gap: 12px 18px;
  flex-wrap: wrap;
  align-items: center;
}

/* ---------- Bilder mit Bildnachweis (Karl: .lp-bild, .lp-credit) ---------- */

/* Die Bildbox ist so breit wie das Bild (aber nie breiter als der Platz): "fit-content" statt fester Breite.
   Das Bild selbst hat width/height-Attribute mit den Maßen des Originals und "height: auto"; mit "max-width: 100%" wird es
   nur kleiner, nie größer als sein Original (die Fotos sind 720 px breit, ein größeres Original gibt es nicht). */
.blocks .b-figure {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

.blocks .b-figure__img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-image);
}

/* Unterschrift und Nachweis: Neutral-5 auf Weiß 5,50 / Papier 5,11 / Sand 4,69 / Himmel 4,81 : 1 */
.blocks .b-figure__caption {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--color-neutral-5);
  margin-top: 8px;
}

.blocks .b-figure__text {
  display: block;
  font-size: 14px;
  color: var(--color-neutral-7);
  margin-bottom: 2px;
}

.blocks .b-credit a {
  color: inherit;
}

/* Platzhalter, wenn in der Live-Ansicht noch kein Bild gewählt ist */
.blocks .b-figure--empty {
  width: 100%;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--color-neutral-4);
  border-radius: var(--radius-l);
  color: var(--color-neutral-5);
  font-size: 14px;
}

/* Fließtext aus dem Editor (Karl: .erzaehlung). Neutral-8 auf Weiß/Sand/Himmel > 9 : 1 */
.blocks .b-prose {
  font-size: 18px;
  line-height: 1.65;
  color: var(--color-neutral-8);
  max-width: 70ch;
}

.blocks .b-prose > * + * {
  margin-top: 12px;
}

.blocks .b-prose :where(h2, h3, h4) {
  color: var(--color-ink);
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 800;
  margin-top: 1.4em;
}

.blocks .b-prose h2 {
  font-size: 26px;
}

.blocks .b-prose h3 {
  font-size: 21px;
}

.blocks .b-prose h4 {
  font-size: 18px;
}

.blocks .b-prose > :first-child {
  margin-top: 0;
}

.blocks .b-prose ul {
  list-style: disc;
  padding-left: 1.4em;
}

.blocks .b-prose ol {
  list-style: decimal;
  padding-left: 1.4em;
}

.blocks .b-prose li + li {
  margin-top: 6px;
}

.blocks .b-prose :where(strong, b) {
  color: var(--color-ink);
}

.blocks .b-prose a {
  color: var(--color-orange-text);
  text-underline-offset: 2px;
}

.blocks .b-prose a:hover {
  color: var(--color-orange-deep);
}

.blocks .b-prose blockquote {
  border-left: 4px solid var(--color-orange);
  padding-left: 16px;
  color: var(--color-neutral-7);
}

.blocks .b-prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 16px;
}

.blocks .b-prose :where(th, td) {
  border: 1px solid var(--color-neutral-3);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.blocks .b-prose hr {
  border: 0;
  border-top: 1px solid var(--color-neutral-3);
  margin: 1.6em 0;
}

/* ---------- Kopfbereich (Karl: .lp-hero; Unterseiten: .seiten-hero) ---------- */

.blocks .b-hero {
  padding: clamp(28px, 5cqw, 64px) 0 clamp(48px, 7cqw, 88px);
  background:
    radial-gradient(900px 520px at 85% 10%, var(--color-hero-glow-1) 0%, transparent 70%),
    radial-gradient(700px 500px at 0% 100%, var(--color-hero-glow-2) 0%, transparent 70%),
    var(--color-paper);
}

/* Unterseite: weniger Luft, kleinere Überschrift */
.blocks .b-hero--page {
  padding: clamp(24px, 4cqw, 48px) 0 clamp(28px, 4cqw, 48px);
}

.blocks .b-hero__grid {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: clamp(28px, 5cqw, 64px);
  align-items: center;
}

.blocks .b-hero__grid--single {
  grid-template-columns: minmax(0, 1fr);
}

.blocks .b-hero__text {
  animation: b-hero-in 0.7s ease-out both;
}

@keyframes b-hero-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.blocks .b-hero__title {
  font-size: clamp(36px, 5.6cqw, 66px);
  line-height: 1.03;
  letter-spacing: -0.04em;
  font-weight: 850;
  color: var(--color-ink);
  margin: 0 0 22px;
}

.blocks .b-hero--page .b-hero__title {
  font-size: clamp(32px, 4.6cqw, 54px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}

.blocks .b-hero .b-lead {
  font-size: clamp(19px, 2cqw, 22px);
  margin-bottom: 30px;
}

.blocks .b-hero--page .b-lead {
  margin-bottom: 0;
}

/* Häkchen-Liste (Karl: .lp-vertrauen). Neutral-6 auf dem Verlauf: 5,78 : 1 und besser */
.blocks .b-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 26px;
  font-size: 15px;
  color: var(--color-neutral-6);
}

.blocks .b-trust li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.blocks .b-trust .b-icon {
  width: 18px;
  height: 18px;
  color: var(--color-green-bright);
}

.blocks .b-hero__photo {
  min-width: 0;
}

/* Plakette über dem Foto (Karl: .lp-badge); Farben: Orange-Text 5,35 / Himmel 5,46 / Grün 6,47 : 1 auf Weiß */
.blocks .b-badge {
  position: absolute;
  left: -18px;
  bottom: 34px;
  background: var(--color-white);
  border-radius: var(--radius-l);
  padding: 14px 18px;
  box-shadow: var(--shadow-badge);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.35;
  color: var(--color-ink);
}

.blocks .b-badge span {
  display: block;
}

.blocks .b-badge span:nth-child(1) {
  color: var(--color-orange-text);
}

.blocks .b-badge span:nth-child(2) {
  color: var(--color-sky);
}

.blocks .b-badge span:nth-child(3) {
  color: var(--color-green);
}

/* Symbole (Karl: .lp-ico) */
.blocks .b-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Abschnitt (Karl: .lp-sek, .lp-weiss, .lp-sand, .lp-himmel) ---------- */

.blocks .b-section {
  padding: clamp(56px, 8cqw, 96px) 0;
  scroll-margin-top: calc(var(--header-height) + 16px);
}

.blocks .b-section--white {
  background: var(--color-band-white);
  --b-inset: var(--color-paper);
}

.blocks .b-section--paper {
  background: var(--color-paper);
  --b-inset: var(--color-white);
}

.blocks .b-section--sand {
  background: var(--color-sand);
  --b-inset: var(--color-white);
}

.blocks .b-section--sky {
  background: var(--color-sky-light);
  --b-inset: var(--color-white);
}

.blocks .b-section__head + .b-section__body {
  margin-top: 34px;
}

/* Abstand zwischen den Bausteinen im Abschnitt. Gilt für den Baustein selbst und für seinen Bearbeiten-Rahmen. */
.blocks .b-section__body > * + * {
  margin-top: 34px;
}

/* Bild und Text-Spalte nebeneinander (Karl: .lp-zwei) */
.blocks .b-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5cqw, 64px);
  align-items: center;
}

.blocks .b-split + .b-section__body {
  margin-top: 38px;
}

.blocks .b-split__rest > * + * {
  margin-top: 22px;
}

.blocks .b-split__head + .b-split__rest,
.blocks .b-section__head + .b-split__rest {
  margin-top: 22px;
}

/* ---------- Bild und Text (Karl: .lp-zwei, .lp-haus) ---------- */

.blocks .b-imagetext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5cqw, 64px);
  align-items: center;
}

.blocks .b-imagetext--single {
  grid-template-columns: minmax(0, 1fr);
}

.blocks .b-imagetext .b-prose {
  font-size: 18.5px;
  line-height: 1.65;
}

.blocks h3.b-imagetext__title {
  font-size: clamp(22px, 2.6cqw, 30px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 14px;
}

.blocks .b-imagetext__extra {
  margin-top: 22px;
}

.blocks .b-imagetext__extra > * + * {
  margin-top: 22px;
}

.blocks .b-image .b-figure__img {
  margin: 0 auto;
}

/* ---------- Karten (Karl: .lp-drei, .lp-karte) ---------- */

.blocks .b-cards {
  display: grid;
  gap: 18px;
}

.blocks .b-cards--1 {
  grid-template-columns: minmax(0, 1fr);
}

.blocks .b-cards--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.blocks .b-cards--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.blocks .b-cards--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.blocks .b-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--color-white);
  border-radius: 22px;
  padding: 26px 24px;
  box-shadow: var(--shadow-card-sky);
}

.blocks .b-card__image {
  width: 100%;
  margin: 0 0 14px;
}

.blocks .b-card__image .b-figure__img {
  border-radius: 14px;
  box-shadow: none;
}

.blocks .b-card__image .b-figure__caption {
  font-size: 10.5px;
  margin-top: 4px;
}

/* Himmel auf Weiß 5,46 / auf Himmel-Hell 4,77 : 1 (Symbol: nur Zierde) */
.blocks .b-card__icon {
  width: 34px;
  height: 34px;
  color: var(--color-sky);
  margin-bottom: 14px;
}

.blocks .b-card__title {
  font-size: 21px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 8px;
}

.blocks .b-card__text {
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--color-neutral-7);
}

.blocks .b-card__link {
  margin-top: 14px;
}

/* Kleine Zeile über dem Kartentitel (Eyebrow, Wegweiser-Karten der Startseite, E037). Orange-Text auf Weiß 5,35 : 1, dunkel 7,0 : 1 */
.blocks .b-card__eyebrow {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--color-orange-text);
  margin: 0 0 8px;
}

/* Wegweiser-Karte mit Verweis: als Ganzes anklickbar. Der eine Verweis spannt per ::after eine Fläche über die ganze Karte;
   der Pfeil-Text bleibt unten (margin-top: auto), auch wenn die Nachbarkarten höher sind. */
.blocks .b-card--linked {
  position: relative;
  transition: transform 0.15s;
}

.blocks .b-card--linked:hover {
  transform: translateY(-3px);
}

.blocks .b-card--linked .b-card__link {
  margin-top: auto;
  padding-top: 14px;
}

.blocks .b-card--linked .b-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Der Bildnachweis ("Foto: … · Unsplash") ist ein eigener Verweis und muss anklickbar bleiben: Er liegt über der Karten-Fläche. */
.blocks .b-card--linked .b-credit a {
  position: relative;
  z-index: 1;
}

/* Wegweiser-Karte (mit Eyebrow): gleich hohe Bilder in allen Karten einer Reihe, auch wenn die Fotos verschiedene Seitenverhältnisse haben */
.blocks .b-card--teaser .b-card__image .b-figure__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ---------- Hinweiskasten (Karl: .hinweis, .kennung, .lp-ziel) ---------- */

.blocks .b-callout {
  border-left: 4px solid var(--color-orange);
  background: var(--color-orange-light);
  padding: 15px 18px;
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--color-ink);
}

.blocks .b-callout__title {
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 4px;
}

.blocks .b-callout__body {
  font-size: 16px;
  line-height: 1.55;
  max-width: none;
  color: var(--color-neutral-8);
}

.blocks .b-callout__body > * + * {
  margin-top: 8px;
}

/* Info: ruhig grau (Karl: .hinweis.still / .kennung) */
.blocks .b-callout--info {
  border-left-color: var(--color-neutral-4);
  background: var(--color-neutral-1);
}

/* Erfolg: grün (Karl: .hinweis.gut) */
.blocks .b-callout--success {
  border-left-color: var(--color-green);
  background: var(--color-green-light);
}

/* Hervorhebung: weiße Karte mit blauem Rand (Karl: .lp-ziel). Himmel auf Weiß 5,46 : 1 */
.blocks .b-callout--accent {
  border-left: 6px solid var(--color-sky);
  background: var(--color-white);
  border-radius: 20px;
  padding: 20px 22px;
}

.blocks .b-callout--accent .b-callout__title {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-sky);
  margin-bottom: 6px;
}

.blocks .b-callout--accent .b-callout__body {
  font-weight: 700;
  color: var(--color-ink);
}

/* Versprechen: gelber Kasten, fetter Satz links, Verweis rechts daneben (Karl: .lp-versprechen und .lp-pfeil).
   Tinte auf Sonnengelb-hell 13,23 : 1; der Verweis (Orange-Text) darauf 4,87 : 1, beim Überfahren (Orange-Tief) 6,74 : 1. */
.blocks .b-callout--promise {
  border-left: 0;
  background: var(--color-sun-light);
  border-radius: 22px;
  padding: 22px 26px;
}

.blocks .b-callout--promise .b-callout__body {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}

.blocks .b-callout--promise .b-callout__body > * + * {
  margin-top: 0;
}

.blocks .b-callout--promise .b-callout__body p {
  font-size: 19px;
  font-weight: 700;
  color: var(--color-promise-ink);
  max-width: 62ch;
  line-height: 1.45;
}

/* Der Verweis im Kasten sieht aus wie Karls Pfeil-Verweis */
.blocks .b-callout--promise .b-callout__body p:has(> a:only-child) {
  font-size: 17px;
}

.blocks .b-callout--promise .b-callout__body a {
  color: var(--color-promise-link);
  text-decoration: none;
}

.blocks .b-callout--promise .b-callout__body a:hover {
  color: var(--color-orange-deep);
  text-decoration: underline;
}

/* ---------- Aufklapper (Karl: .aufklapp) ---------- */

.blocks .b-accordion {
  max-width: 820px;
}

.blocks .b-accordion__item {
  border: 1px solid var(--color-neutral-2);
  border-radius: var(--radius);
  background: var(--color-white);
}

.blocks .b-accordion__item + .b-accordion__item {
  margin-top: 10px;
}

.blocks .b-accordion__question {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  font-weight: 700;
  font-size: 16.5px;
  cursor: pointer;
  color: var(--color-ink);
  list-style: none;
}

.blocks .b-accordion__question::-webkit-details-marker {
  display: none;
}

.blocks .b-accordion__arrow {
  transition: transform 0.2s;
  color: var(--color-orange-text);
}

.blocks .b-accordion__item[open] .b-accordion__arrow {
  transform: rotate(90deg);
}

.blocks .b-accordion__answer {
  padding: 0 18px 16px;
  font-size: 17px;
}

/* ---------- Zitat (Karl: .lp-wir blockquote) ---------- */

.blocks .b-quote__text {
  font-size: clamp(24px, 3cqw, 34px);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  border-left: 6px solid var(--color-sun);
  padding-left: 22px;
}

.blocks .b-quote__source {
  padding-left: 28px;
  margin-top: 10px;
  font-size: 15px;
  color: var(--color-neutral-6);
}

/* ---------- Zeitleiste (Karl: .lp-weg) ---------- */

.blocks .b-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  position: relative;
}

.blocks .b-timeline::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 17px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--color-orange), var(--color-sun), var(--color-sky));
}

.blocks .b-timeline__step {
  position: relative;
  padding-top: 48px;
}

/* Zahl im Kreis: Orange-Tief auf Weiß 7,4 : 1, Himmel auf Weiß 5,46 : 1 */
.blocks .b-timeline__dot {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-white);
  border: 4px solid var(--color-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--color-orange-deep);
}

.blocks .b-timeline__step:nth-child(4n + 2) .b-timeline__dot {
  border-color: var(--color-orange-bright);
}

.blocks .b-timeline__step:nth-child(4n + 3) .b-timeline__dot {
  border-color: var(--color-amber);
}

.blocks .b-timeline__step:nth-child(4n + 4) .b-timeline__dot {
  border-color: var(--color-sky);
  color: var(--color-sky);
}

/* Der erste Schritt ("Jetzt") ist eine weiße Karte */
.blocks .b-timeline__step:first-child {
  background: var(--color-white);
  border-radius: var(--radius-l);
  padding: 48px 16px 16px;
  box-shadow: var(--shadow-step);
}

.blocks .b-timeline__step:first-child .b-timeline__dot {
  left: 14px;
  background: var(--color-orange-dark);
  border-color: var(--color-orange);
  color: var(--color-on-accent);
}

.blocks .b-timeline__when {
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--color-orange-text);
  margin-bottom: 6px;
}

.blocks .b-timeline__title {
  font-size: 19px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 8px;
}

.blocks .b-timeline__text {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--color-neutral-7);
}

/* ---------- Meilensteine (Karl: .lp-horizont) ---------- */

.blocks .b-milestones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.blocks .b-milestone {
  display: flex;
  gap: 18px;
  align-items: center;
  border-radius: 22px;
  padding: 22px 24px;
  background: var(--color-sun-light);
}

/* Jahreszahl: Orange-Text auf Sonne-Hell 4,87 : 1 */
.blocks .b-milestone__label {
  font-size: clamp(34px, 4cqw, 46px);
  font-weight: 850;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--color-orange-text);
}

.blocks .b-milestone__text {
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-ink);
}

/* Jeder zweite Meilenstein in Blau: Himmel auf Himmel-Hell 4,77 : 1 */
.blocks .b-milestone:nth-child(even) {
  background: var(--color-sky-light);
}

.blocks .b-milestone:nth-child(even) .b-milestone__label {
  color: var(--color-sky);
}

/* ---------- Reiter (Karl: .lp-tage), reines CSS mit Radio-Eingaben ---------- */

.blocks .b-tabs {
  position: relative;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

/* Die Radio-Eingaben sind unsichtbar, aber erreichbar und mit der Tastatur bedienbar (Pfeiltasten) */
.blocks .b-tabs__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.blocks .b-tabs__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.blocks .b-tabs__label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 16.5px;
  color: var(--color-neutral-7);
  cursor: pointer;
}

.blocks .b-tabs__label:hover {
  background: var(--color-sand);
}

.blocks .b-tabs__icon {
  width: 22px;
  height: 22px;
  color: var(--color-neutral-5);
}

/* Gewählter Reiter: Orange-Tief auf Orange-Hell 6,38 : 1 */
.blocks .b-tabs__input:nth-of-type(1):checked ~ .b-tabs__list .b-tabs__label:nth-child(1),
.blocks .b-tabs__input:nth-of-type(2):checked ~ .b-tabs__list .b-tabs__label:nth-child(2),
.blocks .b-tabs__input:nth-of-type(3):checked ~ .b-tabs__list .b-tabs__label:nth-child(3),
.blocks .b-tabs__input:nth-of-type(4):checked ~ .b-tabs__list .b-tabs__label:nth-child(4),
.blocks .b-tabs__input:nth-of-type(5):checked ~ .b-tabs__list .b-tabs__label:nth-child(5),
.blocks .b-tabs__input:nth-of-type(6):checked ~ .b-tabs__list .b-tabs__label:nth-child(6),
.blocks .b-tabs__input:nth-of-type(7):checked ~ .b-tabs__list .b-tabs__label:nth-child(7),
.blocks .b-tabs__input:nth-of-type(8):checked ~ .b-tabs__list .b-tabs__label:nth-child(8),
.blocks .b-tabs__input:nth-of-type(9):checked ~ .b-tabs__list .b-tabs__label:nth-child(9),
.blocks .b-tabs__input:nth-of-type(10):checked ~ .b-tabs__list .b-tabs__label:nth-child(10),
.blocks .b-tabs__input:nth-of-type(11):checked ~ .b-tabs__list .b-tabs__label:nth-child(11),
.blocks .b-tabs__input:nth-of-type(12):checked ~ .b-tabs__list .b-tabs__label:nth-child(12) {
  background: var(--color-orange-light);
  color: var(--color-orange-deep);
}

.blocks .b-tabs__input:nth-of-type(1):checked ~ .b-tabs__list .b-tabs__label:nth-child(1) .b-tabs__icon,
.blocks .b-tabs__input:nth-of-type(2):checked ~ .b-tabs__list .b-tabs__label:nth-child(2) .b-tabs__icon,
.blocks .b-tabs__input:nth-of-type(3):checked ~ .b-tabs__list .b-tabs__label:nth-child(3) .b-tabs__icon,
.blocks .b-tabs__input:nth-of-type(4):checked ~ .b-tabs__list .b-tabs__label:nth-child(4) .b-tabs__icon,
.blocks .b-tabs__input:nth-of-type(5):checked ~ .b-tabs__list .b-tabs__label:nth-child(5) .b-tabs__icon,
.blocks .b-tabs__input:nth-of-type(6):checked ~ .b-tabs__list .b-tabs__label:nth-child(6) .b-tabs__icon,
.blocks .b-tabs__input:nth-of-type(7):checked ~ .b-tabs__list .b-tabs__label:nth-child(7) .b-tabs__icon,
.blocks .b-tabs__input:nth-of-type(8):checked ~ .b-tabs__list .b-tabs__label:nth-child(8) .b-tabs__icon,
.blocks .b-tabs__input:nth-of-type(9):checked ~ .b-tabs__list .b-tabs__label:nth-child(9) .b-tabs__icon,
.blocks .b-tabs__input:nth-of-type(10):checked ~ .b-tabs__list .b-tabs__label:nth-child(10) .b-tabs__icon,
.blocks .b-tabs__input:nth-of-type(11):checked ~ .b-tabs__list .b-tabs__label:nth-child(11) .b-tabs__icon,
.blocks .b-tabs__input:nth-of-type(12):checked ~ .b-tabs__list .b-tabs__label:nth-child(12) .b-tabs__icon {
  color: var(--color-orange-text);
}

/* Tastatur-Fokus auf der (unsichtbaren) Radio-Eingabe wird am Reiter-Namen sichtbar */
.blocks .b-tabs__input:nth-of-type(1):focus-visible ~ .b-tabs__list .b-tabs__label:nth-child(1),
.blocks .b-tabs__input:nth-of-type(2):focus-visible ~ .b-tabs__list .b-tabs__label:nth-child(2),
.blocks .b-tabs__input:nth-of-type(3):focus-visible ~ .b-tabs__list .b-tabs__label:nth-child(3),
.blocks .b-tabs__input:nth-of-type(4):focus-visible ~ .b-tabs__list .b-tabs__label:nth-child(4),
.blocks .b-tabs__input:nth-of-type(5):focus-visible ~ .b-tabs__list .b-tabs__label:nth-child(5),
.blocks .b-tabs__input:nth-of-type(6):focus-visible ~ .b-tabs__list .b-tabs__label:nth-child(6),
.blocks .b-tabs__input:nth-of-type(7):focus-visible ~ .b-tabs__list .b-tabs__label:nth-child(7),
.blocks .b-tabs__input:nth-of-type(8):focus-visible ~ .b-tabs__list .b-tabs__label:nth-child(8),
.blocks .b-tabs__input:nth-of-type(9):focus-visible ~ .b-tabs__list .b-tabs__label:nth-child(9),
.blocks .b-tabs__input:nth-of-type(10):focus-visible ~ .b-tabs__list .b-tabs__label:nth-child(10),
.blocks .b-tabs__input:nth-of-type(11):focus-visible ~ .b-tabs__list .b-tabs__label:nth-child(11),
.blocks .b-tabs__input:nth-of-type(12):focus-visible ~ .b-tabs__list .b-tabs__label:nth-child(12) {
  outline: 3px solid var(--color-orange-dark);
  outline-offset: 2px;
}

/* Nur der Inhalt des gewählten Reiters ist sichtbar */
.blocks .b-tabs__panels > .b-tabs__panel {
  display: none;
}

.blocks .b-tabs__input:nth-of-type(1):checked ~ .b-tabs__panels > .b-tabs__panel:nth-child(1),
.blocks .b-tabs__input:nth-of-type(2):checked ~ .b-tabs__panels > .b-tabs__panel:nth-child(2),
.blocks .b-tabs__input:nth-of-type(3):checked ~ .b-tabs__panels > .b-tabs__panel:nth-child(3),
.blocks .b-tabs__input:nth-of-type(4):checked ~ .b-tabs__panels > .b-tabs__panel:nth-child(4),
.blocks .b-tabs__input:nth-of-type(5):checked ~ .b-tabs__panels > .b-tabs__panel:nth-child(5),
.blocks .b-tabs__input:nth-of-type(6):checked ~ .b-tabs__panels > .b-tabs__panel:nth-child(6),
.blocks .b-tabs__input:nth-of-type(7):checked ~ .b-tabs__panels > .b-tabs__panel:nth-child(7),
.blocks .b-tabs__input:nth-of-type(8):checked ~ .b-tabs__panels > .b-tabs__panel:nth-child(8),
.blocks .b-tabs__input:nth-of-type(9):checked ~ .b-tabs__panels > .b-tabs__panel:nth-child(9),
.blocks .b-tabs__input:nth-of-type(10):checked ~ .b-tabs__panels > .b-tabs__panel:nth-child(10),
.blocks .b-tabs__input:nth-of-type(11):checked ~ .b-tabs__panels > .b-tabs__panel:nth-child(11),
.blocks .b-tabs__input:nth-of-type(12):checked ~ .b-tabs__panels > .b-tabs__panel:nth-child(12) {
  display: grid;
}

.blocks .b-tabs__panel {
  grid-template-columns: 1.1fr 1fr;
  gap: 26px;
  align-items: center;
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: 18px;
  box-shadow: var(--shadow-panel);
}

/* Ohne Bild: nur Text */
.blocks .b-tabs__panel:not(:has(.b-tabs__image)) {
  grid-template-columns: minmax(0, 1fr);
}

.blocks .b-tabs__image {
  width: 100%;
}

.blocks .b-tabs__image .b-figure__img {
  border-radius: 20px;
  box-shadow: none;
}

.blocks .b-tabs__text {
  padding: 8px 10px 8px 0;
}

.blocks .b-tabs__title {
  font-size: clamp(22px, 2.4cqw, 28px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin-bottom: 10px;
}

.blocks .b-tabs__text .b-prose {
  color: var(--color-neutral-7);
}

/* Gestapelte Form (Bearbeiten-Modus, oder mehr Reiter, als das Stylesheet kennt): alles untereinander, alles sichtbar */
.blocks .b-tabs--stacked {
  display: block;
}

.blocks .b-tabs--stacked .b-tabs__item + .b-tabs__item {
  margin-top: 24px;
}

.blocks .b-tabs--stacked .b-tabs__label {
  cursor: default;
  padding-left: 0;
}

.blocks .b-tabs--stacked .b-tabs__label:hover {
  background: none;
}

.blocks .b-tabs--stacked .b-tabs__panel {
  display: grid;
}

/* ---------- Säulen (Karl: .lp-saeulen) ---------- */

.blocks .b-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.blocks .b-pillar {
  background: var(--color-white);
  border-radius: 20px;
  padding: 24px;
  border-top: 6px solid var(--color-orange);
  /* feiner Rand, nur im Dunkelmodus sichtbar (Token --color-card-edge); hell unsichtbar */
  box-shadow: inset 0 0 0 1px var(--color-card-edge);
}

.blocks .b-pillar:nth-child(3n + 2) {
  border-top-color: var(--color-sky);
}

.blocks .b-pillar:nth-child(3n + 3) {
  border-top-color: var(--color-green-bright);
}

.blocks .b-pillar__title {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 8px;
}

.blocks .b-pillar__text {
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--color-neutral-7);
}

/* ---------- Symbolliste (Karl: .lp-momente, .lp-moment) ---------- */

.blocks .b-iconlist {
  display: grid;
  gap: 12px;
}

.blocks .b-iconlist__item {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  background: var(--b-inset);
  border-radius: 18px;
  padding: 16px 18px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-neutral-8);
  /* feiner Rand, nur im Dunkelmodus sichtbar (Token --color-card-edge); hell unsichtbar */
  box-shadow: inset 0 0 0 1px var(--color-card-edge);
}

.blocks .b-iconlist__icon {
  color: var(--color-orange-text);
  margin-top: 1px;
}

.blocks .b-iconlist__body strong {
  color: var(--color-ink);
}

/* ---------- Personen (Karl: .lp-menschen, .lp-person, .vorstand) ---------- */

.blocks .b-people {
  display: grid;
  /* auto-fill (nicht auto-fit): Eine einzelne Karte, zum Beispiel nur "Und du?", bleibt so breit wie eine von vieren. */
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.blocks .b-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: var(--color-white);
  border-radius: 22px;
  padding: 22px;
  text-align: center;
  /* feiner Rand, nur im Dunkelmodus sichtbar (Token --color-card-edge); hell unsichtbar */
  box-shadow: inset 0 0 0 1px var(--color-card-edge);
}

.blocks .b-person__portrait {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--shadow-portrait);
}

/* Initialen auf Farbverlauf: Weiß auf Orange-Dunkel 5,08 : 1 bis Himmel 5,46 : 1 (Karls hellerer Verlauf unterschritt 3 : 1) */
.blocks .b-person__portrait--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  font-weight: 850;
  letter-spacing: -0.02em;
  color: var(--color-on-accent);
  background: linear-gradient(135deg, var(--color-orange-dark) 0%, var(--color-sky) 100%);
}

.blocks .b-person__name {
  font-size: 19px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--color-ink);
  margin-top: 4px;
}

.blocks .b-person__role {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-orange-text);
}

.blocks .b-person__quote {
  font-size: 15px;
  line-height: 1.5;
  font-style: italic;
  color: var(--color-neutral-7);
}

/* Einladungskarte "Und du?": Weiß auf Orange-Dunkel 5,08 : 1 */
.blocks .b-person--join {
  justify-content: center;
  background: var(--color-orange-dark);
  color: var(--color-on-accent);
  text-decoration: none;
  box-shadow: none;
}

.blocks .b-person--join:hover {
  background: var(--color-orange-deep);
}

.blocks .b-person--join .b-person__name {
  font-size: 21px;
  color: var(--color-on-accent);
}

.blocks .b-person--join .b-person__portrait--join {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2px solid var(--color-on-accent);
  background: var(--color-white-translucent);
  font-size: 34px;
  font-weight: 850;
}

.blocks .b-person__joinText {
  font-size: 15px;
}

/* ---------- Mitmach-Wege (Karl: .lp-wege, .lp-weg-k) ---------- */

.blocks .b-ways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.blocks .b-way {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--color-white);
  border-radius: 20px;
  padding: 20px;
  text-decoration: none;
  color: inherit;
  border: 2px solid transparent;
  /* feiner Rand, nur im Dunkelmodus sichtbar (Token --color-card-edge); hell unsichtbar */
  box-shadow: inset 0 0 0 1px var(--color-card-edge);
  transition: transform 0.15s, border-color 0.15s;
}

.blocks .b-way:hover {
  transform: translateY(-3px);
  border-color: var(--color-orange);
}

/* Aufwand-Marke: Neutral-8 auf Sonne-Hell > 10 : 1 */
.blocks .b-way__effort {
  align-self: flex-start;
  background: var(--color-pill-bg);
  color: var(--color-pill-ink);
  font-size: 12.5px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
}

.blocks .b-way__title {
  font-size: 18.5px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--color-ink);
}

.blocks .b-way__text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-neutral-6);
}

/* "Los geht's": Orange-Text auf Weiß 5,35 / Papier 4,97 / Orange-Hell 4,61 : 1 */
.blocks .b-way__go {
  margin-top: auto;
  padding-top: 4px;
  font-weight: 800;
  font-size: 15px;
  color: var(--color-orange-text);
}

.blocks .b-way--primary {
  background: var(--color-orange-light);
  /* Feiner Rand in Orange-mittel, wie im freigegebenen Startseiten-Entwurf (E037) */
  box-shadow: inset 0 0 0 1px var(--color-orange-mid);
}

/* ---------- Teilen-Leiste (Karl: .teilen, .teilen-k) ---------- */

.blocks .b-share--compact {
  background: var(--b-inset);
  border-radius: 20px;
  padding: 18px 20px;
  /* feiner Rand, nur im Dunkelmodus sichtbar (Token --color-card-edge); hell unsichtbar */
  box-shadow: inset 0 0 0 1px var(--color-card-edge);
}

.blocks .b-share__heading {
  font-size: 19px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 10px;
}

.blocks .b-share__label {
  font-weight: 800;
  color: var(--color-ink);
  margin-bottom: 10px;
}

.blocks .b-share__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.blocks .b-share__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--color-white);
  border: 1.5px solid var(--color-neutral-3);
  color: var(--color-neutral-8);
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.blocks .b-share__button:hover {
  border-color: var(--color-orange);
  color: var(--color-ink);
}

/* Die Farbpunkte sind nur Zierde neben dem Namen */
.blocks .b-share__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  background: var(--color-neutral-5);
}

.blocks .b-share__dot--whatsapp {
  background: var(--color-share-whatsapp);
}

.blocks .b-share__dot--telegram {
  background: var(--color-share-telegram);
}

.blocks .b-share__dot--facebook {
  background: var(--color-share-facebook);
}

.blocks .b-share__dot--x,
.blocks .b-share__dot--threads {
  background: var(--color-ink);
}

.blocks .b-share__dot--linkedin {
  background: var(--color-share-linkedin);
}

.blocks .b-share__dot--xing {
  background: var(--color-share-xing);
}

.blocks .b-share__dot--bluesky {
  background: var(--color-share-bluesky);
}

.blocks .b-share__dot--reddit {
  background: var(--color-share-reddit);
}

.blocks .b-share__dot--email {
  background: var(--color-neutral-6);
}

.blocks .b-share__dot--copy {
  background: var(--color-orange);
}

.blocks .b-share__note {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-neutral-5);
  max-width: 70ch;
}

/* ---------- Quellen ---------- */

.blocks .b-sources {
  display: grid;
  gap: 4px;
  list-style: disc;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-neutral-6);
}

.blocks .b-sources a {
  color: var(--color-orange-text);
  text-underline-offset: 2px;
}

/* ---------- Banner (Karl: .lp-schluss) ---------- */

/* Karl füllt die ganze Breite mit dem Foto. Unser Foto ist 720 px breit und wird nicht vergrößert: Es steht mittig, links und
   rechts füllt Karls warmer heller Ton (Sand); die weiße Karte mit dem Text liegt darüber. */
.blocks .b-banner {
  display: grid;
  background: var(--color-banner-band);
  overflow: hidden;
}

.blocks .b-banner--plain {
  background: var(--color-banner-band);
}

.blocks .b-banner__image {
  grid-area: 1 / 1;
  align-self: stretch;
  justify-self: center;
}

.blocks .b-banner__image .b-figure__img {
  border-radius: 0;
  box-shadow: none;
  width: 100%;
}

.blocks .b-banner__inner {
  grid-area: 1 / 1;
  position: relative;
  width: 100%;
  align-self: center;
  /* Bewusst knapp: Die Zeile soll nie höher werden als das Foto, sonst bliebe unter dem (nicht vergrößerten) Foto ein Streifen Farbfläche. */
  padding-top: 28px;
  padding-bottom: 28px;
}

/* Ohne Foto gibt es nichts, was die Höhe bestimmt: dann bekommt die Karte großzügig Luft */
.blocks .b-banner--plain .b-banner__inner {
  padding-top: clamp(40px, 6cqw, 72px);
  padding-bottom: clamp(40px, 6cqw, 72px);
}

.blocks .b-banner__card {
  max-width: 560px;
  margin: 0 auto;
  background: var(--color-white-95);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 4cqw, 44px);
  text-align: center;
  box-shadow: var(--shadow-banner);
}

.blocks .b-banner__title {
  font-size: clamp(26px, 3.4cqw, 38px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--color-ink);
  margin-bottom: 12px;
}

.blocks .b-banner__text {
  font-size: 20px;
  line-height: 1.5;
  color: var(--color-neutral-7);
  margin-bottom: 26px;
}

/* Bildnachweis als Marke auf dem Foto (Karl: .lp-ki). Neutral-7 auf Weiß 9,0 : 1 */
.blocks .b-banner__credit {
  position: absolute;
  right: 12px;
  bottom: 12px;
  background: var(--color-white);
  color: var(--color-neutral-7);
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
}

/* ---------- "Kommt bald" (wie die bestehende Seite: .page-hero, .card--accent) ---------- */

.blocks .b-soon__card {
  background: var(--color-white);
  border: 1px solid var(--color-neutral-2);
  border-left: 3px solid var(--color-orange);
  border-radius: var(--radius);
  padding: 20px;
  max-width: 560px;
}

.blocks .b-soon__card p {
  color: var(--color-neutral-7);
  font-size: 17px;
}

/* ---------- Bearbeiten-Modus (nur Live-Ansicht der Verwaltung; öffentliche Seiten haben nichts davon im HTML) ---------- */

.blocks .b-edit {
  position: relative;
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: -2px;
}

/* Beim Überfahren: dezenter Rahmen, aber nur am innersten Baustein unter dem Zeiger */
.blocks .b-edit:hover:not(:has(.b-edit:hover)) {
  outline: 2px dashed var(--color-sky);
}

.blocks .b-edit.is-selected {
  outline: 3px solid var(--color-orange-dark);
}

.blocks .b-edit:focus-visible {
  outline: 3px solid var(--color-orange-dark);
  outline-offset: -3px;
}

/* Typ-Marke: Weiß auf Tinte > 13 : 1 */
.blocks .b-edit__tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  background: var(--color-ink);
  color: var(--color-on-accent);
  font: 700 11px/1 var(--font-sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 8px;
  border-radius: 0 0 6px 0;
  opacity: 0;
  pointer-events: none;
}

.blocks .b-edit:hover:not(:has(.b-edit:hover)) > .b-edit__tag,
.blocks .b-edit.is-selected > .b-edit__tag {
  opacity: 1;
}

/* In der Live-Ansicht verlässt kein Klick die Seite: Verweise, Knöpfe und Bedienelemente sind stillgelegt,
   der Klick landet auf dem Rahmen und wählt den Baustein. */
.blocks .b-edit a,
.blocks .b-edit button,
.blocks .b-edit summary,
.blocks .b-edit label,
.blocks .b-edit input {
  pointer-events: none;
}

.blocks .b-edit .b-hero__text,
.blocks .b-edit .b-way {
  animation: none;
  transition: none;
}

/* ---------- Schmale Bildschirme ---------- */

@container (max-width: 1000px) {
  .blocks .b-cards--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (max-width: 900px) {
  .blocks .b-hero__grid,
  .blocks .b-split,
  .blocks .b-imagetext {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Im Kopfbereich steht das Foto auf dem Telefon oben */
  .blocks .b-hero__photo {
    order: -1;
  }

  .blocks .b-badge {
    left: 12px;
    bottom: 36px;
    padding: 10px 13px;
    font-size: 13px;
  }

  .blocks .b-cards--3 {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Reiter: Namen als Reihe oben, Inhalt darunter */
  .blocks .b-tabs {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .blocks .b-tabs__list {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .blocks .b-tabs__label {
    padding: 10px 14px;
    font-size: 15px;
    background: var(--color-white);
  }

  .blocks .b-tabs__panel {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px;
  }

  .blocks .b-tabs__text {
    padding: 4px 6px 8px;
  }

  /* Zeitleiste: senkrechte Linie */
  .blocks .b-timeline {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .blocks .b-timeline::before {
    left: 19px;
    right: auto;
    top: 20px;
    bottom: 20px;
    width: 4px;
    height: auto;
    background: linear-gradient(180deg, var(--color-orange), var(--color-sun), var(--color-sky));
  }

  .blocks .b-timeline__step {
    padding: 4px 0 14px 54px;
  }

  .blocks .b-timeline__step:first-child {
    padding: 16px 16px 16px 54px;
  }

  .blocks .b-timeline__step .b-timeline__dot {
    left: 5px;
  }

  .blocks .b-timeline__step:first-child .b-timeline__dot {
    left: 5px;
    top: 14px;
  }
}

@container (max-width: 720px) {
  /* Banner: Foto oben, die Karte überlappt es von unten (statt es zu verdecken) */
  .blocks .b-banner {
    display: block;
    background: var(--color-paper);
    padding-bottom: 28px;
  }

  .blocks .b-banner__inner {
    margin-top: -48px;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Auf dem Telefon liegt die Karte nur am unteren Rand über dem Foto: voll deckend, die Marke wandert nach oben */
  .blocks .b-banner__card {
    background: var(--color-white);
  }

  .blocks .b-banner__credit {
    top: 12px;
    bottom: auto;
  }

  .blocks .b-banner--plain {
    background: var(--color-banner-band);
    padding: 40px 0;
  }

  .blocks .b-banner--plain .b-banner__inner {
    margin-top: 0;
  }
}

@container (max-width: 700px) {
  .blocks .b-cards--2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container (max-width: 520px) {
  .blocks .b-cards--4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .blocks .b-milestone {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ---------- Sanfte Bewegung beim Scrollen (E043) ----------
   Gesteuert von js/reveal.js, und nur auf Seiten, deren Bausteinbereich das Attribut "data-reveal" trägt (Inhaltsseiten).
   - "b-rv": Wartezustand, vom Skript gesetzt für Elemente UNTERHALB des Sichtbereichs: unsichtbar und 22 px nach unten versetzt.
   - "b-rv--in": Einblenden über 0,6 s mit sanfter Kurve; die Staffel bei Karten einer Reihe setzt das Skript als
     "transition-delay" (alle 0,1 s, höchstens 0,4 s). Danach nimmt das Skript beide Klassen wieder weg, damit die eigenen
     Regeln der Bausteine (z. B. Anheben beim Darüberfahren, "transition: transform 0.15s") wieder voll gelten.
   Ohne Skript gibt es diese Klassen nie: Alles ist sichtbar. Dezent: nur Verschieben und Aufblenden, kein Zoom, nichts seitlich. */

.blocks[data-reveal] .b-rv {
  opacity: 0;
  transform: translateY(22px);
}

.blocks[data-reveal] .b-rv.b-rv--in {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Bewegung zurücknehmen, wenn das Gerät es wünscht ---------- */

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

  /* Ausnahme: Das Einblenden beim Scrollen läuft auch hier (Frank, 27.10.2026, E043 Punkt 6). Die Einstellung ist auf
     vielen Windows-Rechnern unbemerkt an, und die Seite wirkte dort völlig statisch. Der Selektor ist spezifischer als
     ".blocks *" oben und die Regel "*" in site.css und setzt sich deshalb trotz deren !important durch. Einzelne
     Eigenschaften statt der Kurzform "transition", damit die Staffel (transition-delay, vom Skript gesetzt) erhalten bleibt. */
  .blocks[data-reveal] .b-rv.b-rv--in {
    transition-property: opacity, transform !important;
    transition-duration: 0.6s !important;
    transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  }
}

/* ---------- Druck ---------- */

@media print {
  /* Beim Drucken muss alles sichtbar sein, auch was noch auf sein Einblenden wartet. */
  .blocks[data-reveal] .b-rv {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .blocks .b-share,
  .blocks .b-buttons {
    display: none !important;
  }

  .blocks .b-accordion__item {
    break-inside: avoid;
  }
}