/* ============================================================================
   SICODA · „Marine & Mint" — Block-Theme-Fassung
   Portiert aus sicoda-divi-child/assets/css/sicoda-design.css (610 Zeilen).
   Divi-gebundene Abschnitte 6, 8, 9, 11 wurden verworfen:
     6  Hauptmenü        → als Block-Navigation neu gebaut (parts/header.html)
     8  Divi-Modulpflege → entfällt ersatzlos
     9  Home-Hero        → Teilprojekt P2 (Startseite)
     11 Unterseiten-Hero → Teilprojekt P2 (Divi fullwidth-header)
   Tokens kommen aus theme.json über assets/css/tokens-alias.css.
   WCAG-Hartregeln: Mint-500 nie als Text auf hell (Text = Mint-700);
   nie weißer Text auf Mint-500; auf Navy-700 weißer Text.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   0 · Grundrhythmus & Details
   ---------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
body { background-color: var(--surface-page); }
::selection { background: var(--mint-100); color: var(--text-900); }
* { scrollbar-color: var(--mint-500) var(--ice-50); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ice-50); }
::-webkit-scrollbar-thumb { background: var(--steel-600); border-radius: 999px; border: 3px solid var(--ice-50); }
::-webkit-scrollbar-thumb:hover { background: var(--navy-700); }

:focus-visible { outline: 2px solid var(--mint-500); outline-offset: 2px; border-radius: 3px; }

/* Die Mint-Fortschrittskante ganz oben gehört gestalterisch zur Kopfleiste
   selbst (nicht zu einem losgelösten fixed-Element) — so bewegt sie sich
   korrekt mit, egal ob der Header fixiert ist oder nicht, und der Innenabstand
   des Headers sorgt zuverlässig für Luft zum Text. Im Block-Theme wird diese
   Absicht in parts/header.html umgesetzt (Task 5); deshalb steht hier bewusst
   keine Header-Regel mehr. */

/* ----------------------------------------------------------------------------
   1 · Typografie
   ---------------------------------------------------------------------------- */
/* Ohne `!important`: die beiden Schriftfamilien sollen im Editor wählbar
   bleiben. WordPress gibt die Preset-Klassen `.has-head-font-family` /
   `.has-body-font-family` selbst mit `!important` aus — eine Auswahl im Editor
   gewinnt dadurch zuverlässig gegen diese Grundregel. */
body, .wp-block-post-content, p, li, td, th, input, select, textarea, button {
  font-family: var(--font-body);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--text-heading);
  text-wrap: balance;
}
/* Ohne `!important`: diese drei Regeln sind wertgleiche Doppelungen dessen,
   was theme.json styles.elements.h1/h2/h3 ohnehin als `h1{…}` / `h2{…}` /
   `h3{…}` ausgibt (Spezifität 0,0,1, früher geladen — bei Gleichstand gewinnt
   diese Datei). Die Sperre kostete nur Gestaltungsspielraum: Kartentitel in
   der Query-Schleife konnten die zu ihrer heading-3-Größe passenden Werte
   500/1.3 nicht annehmen (siehe Abschnitt 10.3). */
h1 { letter-spacing: var(--tracking-h1); font-weight: 700; line-height: var(--leading-h1); }
h2 { font-weight: 700; line-height: var(--leading-h2); letter-spacing: -0.01em; }
h3 { font-weight: 500; line-height: var(--leading-h3); }

/* Links im Fließtext: Mint-700 mit animiertem Unterstrich */
.wp-block-post-content a, p a, li a {
  color: var(--text-link);
  text-decoration: none;
  background-image: linear-gradient(var(--mint-500), var(--mint-500));
  background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .25s ease, color .15s ease;
  padding-bottom: 1px;
}
.wp-block-post-content a:hover, p a:hover, li a:hover { background-size: 100% 1.5px; color: var(--mint-700); }

/* ----------------------------------------------------------------------------
   1.1 · Content-Farb-Absicherung (zielgenau)
   Die frühere Fassung sperrte JEDEN Absatz und JEDES <span> im Inhalt per
   `!important` auf --text-body. Messung über alle 162 Divi-freien Inhalte:
   genau EIN Inhalt (Seite 12354) trägt überhaupt eine Inline-Textfarbe — und
   die ist `color:#2C4A73`, also das Marken-Navy, per Editor gesetzt
   (`class="has-text-color"`). Die Sperre schützte damit vor nichts, machte
   aber die 14-Farben-Palette für Absätze wirkungslos.
   Jetzt greift sie nur noch bei Alt-Inline-Farben OHNE die vom Editor
   gesetzte Klasse `has-text-color` (typischer Divi-/Legacy-Fall) und lässt
   Elemente in Ruhe, die inline eine Hintergrundfarbe mitbringen.
   Steht weiterhin bewusst VOR den Dark-Section-Regeln (Abschnitt 7) — bei
   gleicher Spezifität gewinnt die spätere Regel. Reihenfolge nicht verändern.
   ---------------------------------------------------------------------------- */
.wp-block-post-content [style*="color:"]:not(.has-text-color):not([style*="background-color"]) {
  color: var(--text-body) !important;
}

/* ----------------------------------------------------------------------------
   1.2 · Basisstile für klassisches HTML im Inhalt
   133 der 162 Divi-freien Inhalte sind klassisches HTML ohne Blockmarkup
   (23 mit Bildern, 24 <ul>, 18 <ol>, 7 Tabellen, 7 Zitate, 9 <figure>).
   Diese Grundstile kamen bisher aus Divis PARENT-Stylesheet
   (Divi/style.min.css: `img{max-width:100%;height:auto}`,
   `.entry-content table/thead th/tr td`, `.entry-content ul/ol`, `blockquote`)
   und wurden bei der Portierung nie mitgenommen — ohne Divi liefen Bilder auf
   Mobil über und Tabellen waren randlos.
   Übernommen ist ausschließlich die Basis für rohes HTML, umgesetzt mit
   Tokens. Keine Divi-Modulklassen.
   ---------------------------------------------------------------------------- */

/* Medien laufen nie über den Textblock hinaus (Divi-Parent: img{max-width:100%}) */
img { max-width: 100%; height: auto; }
embed, iframe, object, video { max-width: 100%; }
figure { max-width: 100%; }

/* Tabellen: voller Breite, Rahmen, Zellpadding (Divi-Parent: .entry-content table) */
.wp-block-post-content table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line-200);
  margin: 0 0 var(--space-2);
  text-align: left;
  font-size: var(--size-body);
}
.wp-block-post-content thead th,
.wp-block-post-content tr th {
  color: var(--text-900);
  font-weight: var(--weight-emphasis);
  background: var(--ice-50);
  padding: 9px 24px;
  border-bottom: 1px solid var(--line-200);
}
.wp-block-post-content tr td {
  border-top: 1px solid var(--line-200);
  padding: 6px 24px;
}
.wp-block-post-content table caption {
  caption-side: bottom;
  color: var(--text-secondary);
  font-size: var(--size-caption);
  padding-top: var(--space-1);
  text-align: left;
}
/* Core-Tabellenblock darf auf schmalen Viewports waagerecht rollen */
.wp-block-post-content figure.wp-block-table { overflow-x: auto; max-width: 100%; }

/* Listen: Einzug + Abstände (Divi-Parent: .entry-content ul/ol).
   Abweichung zur Vorlage: `ol` bekommt `list-style-position: outside` statt
   `inside` — bei mehrzeiligen Punkten bleibt der Text so sauber ausgerichtet. */
.wp-block-post-content ul { list-style-type: disc; }
.wp-block-post-content ol { list-style-type: decimal; }
.wp-block-post-content ul,
.wp-block-post-content ol {
  list-style-position: outside;
  padding: 0 0 var(--space-2) 1.25em;
  margin: 0;
  line-height: var(--leading-body);
}
.wp-block-post-content li { margin-bottom: 6px; }
.wp-block-post-content li > ul,
.wp-block-post-content li > ol { padding: 6px 0 6px 1.25em; }
/* Blocklisten, die keine Aufzählung sind, bleiben unbepunktet */
.wp-block-post-content ul.wp-block-gallery,
.wp-block-post-content ul.wp-block-social-links,
.wp-block-post-content ul.wp-block-navigation__container,
.wp-block-post-content ul.wp-block-post-template {
  list-style: none;
  padding-left: 0;
}

/* Definitionslisten */
.wp-block-post-content dl { margin: 0 0 var(--space-2); }
.wp-block-post-content dt { font-weight: var(--weight-emphasis); color: var(--text-900); }
.wp-block-post-content dd { margin: 0 0 var(--space-1) var(--space-3); }

/* Zitate — Marken-Optik: Mint-Kante links, Mint-100-Fläche, Radius rechts.
   Gilt für rohes <blockquote> (6 der 7 betroffenen Inhalte). Der Core-Block
   `core/quote` bekommt dieselbe Optik zusätzlich über theme.json
   styles.blocks, damit sie auch im Editor sichtbar ist. */
.wp-block-post-content blockquote {
  border-left: 4px solid var(--mint-500);
  background: var(--mint-100);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text-900);
  margin: var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
}
.wp-block-post-content blockquote cite {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--size-caption);
  color: var(--text-secondary);
  font-style: normal;
}

/* Trennlinie und Code im Fließtext */
.wp-block-post-content hr { border: 0; border-top: 1px solid var(--line-200); margin: var(--space-4) 0; }
.wp-block-post-content pre { overflow: auto; padding: var(--space-2); background: var(--ice-50); border-radius: var(--radius); }

/* ----------------------------------------------------------------------------
   2 · Buttons  (Primär Navy-Pill → Hover Steel · Sekundär Mint-700-Outline · Ghost)
   Faithful zu Button.jsx: weight 600, Pill, weicher Press.

   Ohne `!important`: Button-Einstellungen im Editor (Farbe, Radius, Padding,
   Schriftgröße) sollen wirken. WordPress gibt Preset-Klassen wie
   `.has-navy-700-background-color` selbst mit `!important` aus und Editor-Maße
   als Inline-Style — beides gewinnt damit gegen diese Grundregel, während die
   Grundregel weiterhin gegen die (früher geladenen, gleich spezifischen)
   Core-Blockstile gewinnt.
   Entfernt wurden drei tote Selektoren: die zusätzliche Element-Klassen-
   Variante des Button-Links (deckungsgleich mit der reinen Klassenregel,
   erhöhte nur die Spezifität), der WooCommerce-Button (Plugin nicht
   installiert) und die Divi-Formular-Submitklasse.
   ---------------------------------------------------------------------------- */
.wp-block-button__link,
.fluentform .ff-btn-submit,
.fluentform button[type="submit"],
input[type="submit"] {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0;
  padding: 13px 30px;
  min-height: 44px;
  color: var(--button-primary-fg);
  background: var(--button-primary-bg);
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  box-shadow: 0 1px 2px rgba(34,52,78,.12);
  text-transform: none;
  transition: background-color .15s ease, color .15s ease, box-shadow .2s ease, transform .06s ease;
}
.wp-block-button__link:hover,
.fluentform .ff-btn-submit:hover,
input[type="submit"]:hover {
  background: var(--button-primary-bg-hover);
  color: var(--button-primary-fg);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
  padding: 13px 30px;                       /* Padding im Hover bewusst fixiert */
}
.wp-block-button__link:active, input[type="submit"]:active { transform: translateY(1px) scale(.99); }

/* Sekundär: Outline Mint-700 (Klasse „sicoda-btn-secondary" am Button-Block-
   Wrapper bzw. „sicoda-secondary" direkt am Link) */
.sicoda-btn-secondary .wp-block-button__link,
.wp-block-button__link.sicoda-secondary {
  background: transparent !important;
  color: var(--mint-700) !important;
  border: 1.5px solid var(--mint-700) !important;
  box-shadow: none !important;
}
.sicoda-btn-secondary .wp-block-button__link:hover,
.wp-block-button__link.sicoda-secondary:hover { background: var(--mint-100) !important; color: var(--mint-700) !important; }

/* Ghost (Wrapper-Klasse „sicoda-btn-ghost") */
.sicoda-btn-ghost .wp-block-button__link {
  background: transparent !important; color: var(--navy-700) !important; border-color: transparent !important; box-shadow: none !important;
}
.sicoda-btn-ghost .wp-block-button__link:hover { background: var(--ice-50) !important; }

/* Größen-Helfer */
.sicoda-btn-lg .wp-block-button__link { padding: 17px 36px !important; min-height: 52px; }
.sicoda-btn-sm .wp-block-button__link { padding: 9px 20px !important; min-height: 36px; font-size: 14px !important; }

/* Buttons in dunklen Sektionen: heller Kontrast (weiß → Navy-Text) */
.sicoda-dark .wp-block-button__link { background: var(--white) !important; color: var(--navy-700) !important; }
.sicoda-dark .wp-block-button__link:hover { background: var(--mint-100) !important; color: var(--navy-700) !important; }

/* ----------------------------------------------------------------------------
   3 · Karten — Signatur: 4px Mint-Kante OBEN, weiß auf Ice, Radius unten, Lift
   Helfer .sicoda-card auf jeden Gruppen-/Spalten-Block anwendbar.
   ---------------------------------------------------------------------------- */
.sicoda-card {
  background: var(--surface-card);
  border-top: var(--accent-edge) solid var(--mint-500);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-3) !important;
  transition: box-shadow .25s ease, transform .25s ease;
}
.sicoda-card:hover { box-shadow: var(--shadow-raised); transform: translateY(-3px); }

/* Hinweis: Das Motiv „Karten-Icon als runder Mint-Chip" (Friendly-Refresh)
   hing in der Vorlage vollständig an der Innenstruktur des Divi-Blurb-Moduls
   (Icon-Wrapper + Icon-Font). Es hat im Core-Block-Markup keine
   Entsprechung und wurde deshalb nicht portiert — gehört zu einem eigenen
   Karten-Pattern (P2), nicht zu dieser Portierung. */

/* ----------------------------------------------------------------------------
   4 · Seitenkopf-Muster & Akzent-Hilfsklassen
   Label (Mint-700 Versalien) → Headline → Subline
   ---------------------------------------------------------------------------- */
.sicoda-label {
  display: inline-block;
  font-family: var(--font-body) !important;
  font-size: var(--size-label); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--mint-700) !important; margin-bottom: var(--space-1);
}
.sicoda-subline { color: var(--text-secondary) !important; font-size: var(--size-body-lg); }
.sicoda-caption { color: var(--text-muted) !important; font-size: var(--size-caption); }

/* Inhalts-Badges/Pills */
.sicoda-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px; background: var(--mint-100); color: var(--mint-700);
}
.sicoda-badge--navy { background: var(--navy-700); color: #fff; }
.sicoda-badge--neutral { background: var(--ice-50); color: var(--text-600); }

/* Inhalts-Alert (4px-Kante oben) */
.sicoda-alert {
  background: var(--surface-card); border-top: 4px solid var(--mint-500);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 16px 20px;
}
.sicoda-alert--error { border-top-color: var(--error-500); }

/* ----------------------------------------------------------------------------
   5 · Formulare — FluentForm (aktives Plugin)
   Border 1.5px gray-400, Radius 12, Fokus Mint-700 + Ring mint-100
   (Die Regeln für Divis Kontaktformular-Modul sind entfallen.)
   ---------------------------------------------------------------------------- */
.fluentform input[type="text"], .fluentform input[type="email"], .fluentform input[type="tel"],
.fluentform input[type="number"], .fluentform input[type="url"], .fluentform input[type="password"],
.fluentform .ff-el-input--content input, .fluentform .ff-el-input--content textarea,
.fluentform select, .fluentform textarea,
select {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  color: var(--text-body) !important;
  background: var(--surface-card) !important;
  border: 1.5px solid var(--border-input) !important;
  border-radius: var(--radius) !important;
  padding: 11px 16px !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
.fluentform input:focus, .fluentform textarea:focus, .fluentform select:focus,
select:focus {
  border-color: var(--mint-700) !important;
  box-shadow: 0 0 0 2px var(--mint-100) !important;
  outline: none !important;
}
.fluentform .ff-el-input--label label {
  font-family: var(--font-body) !important; font-weight: 600 !important; color: var(--text-900) !important;
}
.fluentform .ff-el-is-error input, .fluentform .ff-el-is-error textarea { border-color: var(--error-700) !important; }
.fluentform .text-danger, .fluentform .error { color: var(--error-700) !important; }
.fluentform .ff-el-form-check-label::before { border-color: var(--border-input) !important; border-radius: 4px; }
.fluentform input[type="checkbox"]:checked + label::before,
.fluentform .ff-el-form-check input:checked ~ label::before { background: var(--mint-500) !important; border-color: var(--mint-500) !important; }

/* --- 5.1 Suchblock (core/search) — in templates/404.html und
   templates/search.html im Einsatz. Ohne diese Regeln rendern Browser-
   Standardelemente. Feld analog zu den Formularfeldern oben, Button analog
   zum Primärbutton aus Abschnitt 2. --- */
.wp-block-search .wp-block-search__label {
  font-family: var(--font-body);
  font-weight: var(--weight-emphasis);
  color: var(--text-900);
  margin-bottom: var(--space-1);
}
.wp-block-search .wp-block-search__inside-wrapper {
  gap: var(--space-1);
  border: none;
  padding: 0;
}
.wp-block-search .wp-block-search__input {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-body);
  background: var(--surface-card);
  border: 1.5px solid var(--border-input);
  border-radius: var(--radius);
  padding: 11px 16px;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wp-block-search .wp-block-search__input:focus {
  border-color: var(--mint-700);
  box-shadow: 0 0 0 2px var(--mint-100);
  outline: none;
}
.wp-block-search .wp-block-search__input::placeholder { color: var(--text-muted); }
.wp-block-search .wp-block-search__button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  min-height: 44px;
  padding: 13px 30px;
  color: var(--button-primary-fg);
  background: var(--button-primary-bg);
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  box-shadow: none;
  text-transform: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, box-shadow .2s ease, transform .06s ease;
}
.wp-block-search .wp-block-search__button:hover {
  background: var(--button-primary-bg-hover);
  color: var(--button-primary-fg);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}
.wp-block-search .wp-block-search__button:active { transform: translateY(1px) scale(.99); }

/* ----------------------------------------------------------------------------
   7 · Footer & dunkle Sektionen — Navy als Trägerfläche
   Der Footer ist im Block-Theme das Footer-Template-Part
   (parts/footer.html, tagName „footer" → footer.wp-block-template-part).
   ---------------------------------------------------------------------------- */
footer.wp-block-template-part { background: var(--navy-700) !important; }
footer.wp-block-template-part,
footer.wp-block-template-part p,
footer.wp-block-template-part li,
footer.wp-block-template-part a { color: var(--text-on-dark-secondary) !important; }
footer.wp-block-template-part a:hover { color: var(--mint-500) !important; }
/* Hinweis: Die früheren Regeln footer h1/h2/h3/h4 samt Mint-Strich (h4::after)
   sind entfernt — parts/footer.html enthält keine Überschrift (der Site-Title
   läuft mit "level":0 als <p>). Sie waren seit Task 6 tot. Falls der Footer
   später Spaltenüberschriften bekommt, gehören die Regeln zusammen mit dem
   Markup zurück. */

/* Dunkle Sektion / CTA-Band (Gruppenklasse „sicoda-dark")
   Navy-Overlay dunkelt evtl. vorhandene Hintergrundbilder ab → weißer Text immer lesbar;
   ohne Bild = solides Navy. Inhalt liegt über dem Overlay. */
.sicoda-dark { position: relative !important; background-color: var(--surface-dark) !important; }
.sicoda-dark::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(165deg, rgba(20,34,55,.90) 0%, rgba(44,74,115,.92) 100%);
}
/* Direkte Kindblöcke über das Overlay heben (in der Vorlage die Divi-Row-/
   Modul-Container, im Block-Theme jeder direkte Kindblock). */
.sicoda-dark > * { position: relative; z-index: 1; }
.sicoda-dark, .sicoda-dark p, .sicoda-dark li, .sicoda-dark .wp-block-post-content,
.sicoda-dark h1, .sicoda-dark h2, .sicoda-dark h3 { color: #fff !important; }
.sicoda-dark .sicoda-label { color: var(--mint-500) !important; }
.sicoda-dark a { color: var(--mint-500); }
.sicoda-ice { background-color: var(--surface-page) !important; }
.sicoda-tint { background-color: var(--surface-tint) !important; }

/* ============================================================================
   10 · SITE-WEITER SEITENKOPF & UNTERSEITEN  (gilt für ALLE Seiten/Beiträge
   außer der Startseite — ein etwaiger Home-Hero bleibt unberührt).
   Schließt die Lücke „Design nur auf Startseite": jede Unterseite und jeder
   Beitrag bekommt automatisch das Marken-Seitenkopf-Muster, ohne Eingriff im
   Editor. Rein additiv, faithful zur „Marine & Mint"-Vorgabe.
   ============================================================================ */

/* --- 10.1 Seitentitel als Marken-Band. Greift den vom Block-Theme
   gerenderten Titel quer über Templates ab (core/post-title für Seiten und
   Beiträge, core/query-title für Archiv- und Suchseiten).

   Scope bewusst auf den DIREKTEN Kindtitel von <main> eingeengt: In
   archive.html, search.html und index.html tragen auch die Kartentitel in der
   Query-Schleife die Klasse `.wp-block-post-title`. Die breite Fassung feuerte
   dort bis zu 10× pro Seite — Mint-Strich doppelt (die Karte hat schon eine
   Mint-Oberkante) und erzwungene 700/--leading-h1 auf Titeln, die 500/1.3
   tragen sollen. Kartentitel werden ausschließlich in 10.3 bedient.
   Der Seitentitel ist in allen sechs Templates direktes Kind von <main>. --- */
body:not(.home) .wp-site-blocks > main > .wp-block-post-title,
body:not(.home) .wp-site-blocks > main > .wp-block-query-title {
  position: relative;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  color: var(--text-900) !important;
  letter-spacing: var(--tracking-h1) !important;
  line-height: var(--leading-h1) !important;
}

/* Dünner Mint-Akzentstrich über dem Seitentitel — gleiches Signal wie im Hero */
body:not(.home) .wp-site-blocks > main > .wp-block-post-title::before,
body:not(.home) .wp-site-blocks > main > .wp-block-query-title::before {
  content: ""; display: block; width: 56px; height: 3px; border-radius: 2px;
  background: var(--mint-500); margin: 0 0 18px;
}

/* Titel-Metazeile (Datum/Autor/Kategorie) markenkonform */
body:not(.home) .wp-block-post-date,
body:not(.home) .wp-block-post-author,
body:not(.home) .wp-block-post-terms,
body:not(.home) .wp-block-post-date a,
body:not(.home) .wp-block-post-author a,
body:not(.home) .wp-block-post-terms a {
  font-family: var(--font-body) !important;
  color: var(--text-secondary) !important;
  font-size: var(--size-caption) !important;
}
body:not(.home) .wp-block-post-date a:hover,
body:not(.home) .wp-block-post-author a:hover,
body:not(.home) .wp-block-post-terms a:hover { color: var(--mint-700) !important; }

/* --- 10.2 Inhaltsbereich: lesbare Maßzeile, gebrandete Überschriften. --- */
body:not(.home) .wp-block-post-content {
  font-family: var(--font-body) !important;
  color: var(--text-body);
  line-height: var(--leading-body);
}
body:not(.home) .wp-block-post-content h2 { margin-top: var(--space-6); }

/* --- 10.3 Blog-Liste & Einzelbeitrag (113 Beiträge) — Karten-Anmutung,
   Marken-Titel, Mint-„Weiterlesen". --- */
.wp-block-post {
  background: var(--surface-card);
  border-top: var(--accent-edge) solid var(--mint-500);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-3) !important;
  transition: box-shadow .25s ease, transform .25s ease;
}
.wp-block-post:hover { box-shadow: var(--shadow-raised); transform: translateY(-3px); }
.wp-block-post .wp-block-post-title,
.wp-block-post .wp-block-post-title a { font-family: var(--font-head) !important; color: var(--text-900) !important; }
/* Kartentitel tragen "fontSize":"heading-3" und sollen dazu passend 500/1.3
   führen — nicht die H1-Werte aus 10.1. Spezifität (0,2,0) schlägt die
   theme.json-Regel für <h2> (:root :where(h2) = (0,1,0)), kein !important
   nötig. */
.wp-block-post .wp-block-post-title {
  font-weight: var(--weight-h3);
  line-height: var(--leading-h3);
  letter-spacing: normal;
}
.wp-block-post .wp-block-post-title a:hover { color: var(--mint-700) !important; }
.wp-block-post .wp-block-post-date,
.wp-block-post .wp-block-post-date a,
.wp-block-post .wp-block-post-terms,
.wp-block-post .wp-block-post-terms a { color: var(--text-secondary) !important; }
.wp-block-read-more,
.wp-block-post-excerpt__more-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body) !important; font-weight: 600 !important;
  color: var(--mint-700) !important; text-decoration: none !important;
  background: none !important; padding: 0 !important;
}
.wp-block-read-more:hover,
.wp-block-post-excerpt__more-link:hover { color: var(--navy-700) !important; }

/* --- 10.4 Sektions-Rhythmus site-weit: der Inhaltsbereich einer Unterseite
   bekommt etwas Luft zur (weißen, fixierten) Kopfleiste. Konservativ — keine
   Layout-verändernden Eingriffe in Spaltenbreiten. --- */
body:not(.home) .wp-site-blocks > main {
  padding-top: clamp(28px, 4vw, 56px);
}

/* --- 10.5 Such- & 404-Seite markenkonform --- */
body.search-no-results .wp-block-post-content,
body.error404 .wp-block-post-content { color: var(--text-body); }
body.error404 h1 { font-family: var(--font-head) !important; color: var(--navy-700) !important; }

/* ============================================================================
   11 · REDAKTIONELLE HELFERKLASSEN — bewusst vorgehalten, aktuell NICHT
   vergeben.
   Die folgenden `sicoda-*`-Klassen sind vom Theme gestaltet, werden aber von
   keinem Template, keinem Template-Part und keinem Menüeintrag getragen. Sie
   sind kein toter Code, sondern die redaktionelle Schicht: Redaktion und
   Teilprojekt P2 (Startseite, Hero, Block-Patterns) vergeben sie im Editor
   über „Erweitert → Zusätzliche CSS-Klasse(n)" bzw. am Menüeintrag.
   Vor dem Entfernen einer dieser Klassen ist P2 zu fragen.

     .sicoda-nav-cta        (header.css) Menüeintrag als Navy-Pille
     .sicoda-card           Karte mit Mint-Oberkante
     .sicoda-btn-secondary  Button als Mint-700-Outline
     .sicoda-btn-ghost      Button ohne Fläche
     .sicoda-btn-lg / -sm   Buttongrößen
     .sicoda-label          Mint-700-Versalien über der Headline
     .sicoda-subline        Subline unter der Headline
     .sicoda-caption        Bildunterschrift / Kleintext
     .sicoda-badge          Pille; Varianten --navy, --neutral
     .sicoda-alert          Hinweisbox; Variante --error
     .sicoda-ice            Flächenhelfer Ice
     .sicoda-tint           Flächenhelfer Mint-100

   Vergeben sind dagegen (nicht als „unbenutzt" behandeln):
     .sicoda-header         parts/header.html
     .sicoda-dark           parts/footer.html
   ============================================================================ */

/* ============================================================================
   12 · Bausteine aus dem Divi-Renderer (2026-08-06)
   Diese Klassen erzeugt inc/divi5-block-renderer.php für Blocktypen, die
   vorher als strukturlose <p>-Absätze ausgegeben wurden.
   ============================================================================ */

/* --- 12.1 Aufklapper (divi/toggle, divi/accordion-item) ------------------
   Natives <details>. Die Höhenanimation läuft über grid-template-rows von
   0fr auf 1fr — der einzige Weg, „auto" ohne feste Pixelhöhe zu animieren,
   und im Gegensatz zu max-height ohne Sprung bei langen Inhalten. */
.sicoda-disclosure {
  background: var(--surface-card);
  border-top: var(--accent-edge) solid var(--mint-500);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  margin: 0 0 var(--space-2);
  overflow: hidden;
}
.sicoda-disclosure__title {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 14px var(--space-3);
  font-family: var(--font-head);
  font-weight: var(--weight-emphasis);
  color: var(--text-900);
  cursor: pointer;
  list-style: none;
  transition: background-color .15s ease;
}
.sicoda-disclosure__title::-webkit-details-marker { display: none; }
.sicoda-disclosure__title:hover { background: var(--ice-50); }
/* Rückmeldung auf den Druck, nicht erst auf das Loslassen. */
.sicoda-disclosure__title:active { background: var(--mint-100); }
.sicoda-disclosure__title:focus-visible { outline: 2px solid var(--mint-500); outline-offset: -2px; }

/* Eigenes Chevron, damit es sich drehen kann. */
.sicoda-disclosure__title::after {
  content: ""; margin-left: auto; flex: none;
  width: 9px; height: 9px;
  border-right: 2px solid var(--mint-700);
  border-bottom: 2px solid var(--mint-700);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s cubic-bezier(.16,.84,.24,1);
}
.sicoda-disclosure[open] .sicoda-disclosure__title::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.sicoda-disclosure__body {
  display: grid;
  grid-template-rows: 1fr;
  padding: 0 var(--space-3) var(--space-3);
  color: var(--text-body);
}
.sicoda-disclosure__body > * { min-height: 0; }
.sicoda-disclosure__body :last-child { margin-bottom: 0; }

/* --- 12.2 Preistafel (divi/pricing-table) --- */
.sicoda-preis {
  background: var(--surface-card);
  border-top: var(--accent-edge) solid var(--mint-500);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-3);
  display: flex; flex-direction: column; gap: 6px;
  transition: box-shadow .25s ease, transform .25s ease;
}
.sicoda-preis:hover { box-shadow: var(--shadow-raised); transform: translateY(-3px); }
.sicoda-preis__titel { margin: 0; }
.sicoda-preis__sub { color: var(--text-secondary); font-size: var(--size-caption); margin: 0; }
.sicoda-preis__betrag {
  margin: var(--space-1) 0; display: flex; align-items: baseline; gap: 2px;
  font-family: var(--font-head); color: var(--text-900);
  font-variant-numeric: tabular-nums;
}
.sicoda-preis__waehrung { font-size: 1.25rem; font-weight: 500; }
.sicoda-preis__zahl { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.02em; }
.sicoda-preis__takt { font-size: var(--size-caption); font-weight: 400; color: var(--text-secondary); font-family: var(--font-body); }
.sicoda-preis__liste p { margin: 0 0 4px; font-size: 0.9375rem; color: var(--text-secondary); }
.sicoda-preis__aktion { margin-top: auto; padding-top: var(--space-2); }

/* --- 12.3 Handlungsaufruf (divi/cta) --- */
.sicoda-cta {
  background: var(--surface-tint);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-3) 0;
}
.sicoda-cta__titel { margin: 0 0 var(--space-1); }
.sicoda-cta__text { color: var(--text-body); }
.sicoda-cta__text p:last-child { margin-bottom: 0; }
.sicoda-cta__aktion { margin: var(--space-2) 0 0; }

/* --- 12.4 Code (divi/code, divi/fullwidth-code) --- */
.sicoda-code {
  background: var(--ice-50);
  border: 1px solid var(--line-200);
  border-radius: var(--radius);
  padding: var(--space-2);
  overflow-x: auto;
  font-size: 0.8125rem;
  line-height: 1.5;
  /* Schlüsselblöcke und Prüfsummen dürfen nicht umbrechen. */
  white-space: pre;
}

/* --- 12.5 Trenner und Personen --- */
.sicoda-trenner { border: 0; border-top: 1px solid var(--line-200); margin: var(--space-4) 0; }

.sicoda-person { display: flex; gap: var(--space-3); align-items: flex-start; margin: 0 0 var(--space-3); }
.sicoda-person__bild {
  flex: none; width: 96px; height: 96px; object-fit: cover;
  border-radius: 50%; box-shadow: var(--shadow-card);
}
.sicoda-person__name { margin: 0; }
.sicoda-person__rolle { color: var(--mint-700); font-weight: var(--weight-emphasis); font-size: var(--size-caption); margin: 2px 0 8px; }
.sicoda-person__text p { margin: 0 0 6px; }

@media (max-width: 600px) {
  .sicoda-person { flex-direction: column; }
}

/* Bewegung raus, Rückmeldung drin — dieselbe Regel wie in den Templates. */
@media (prefers-reduced-motion: reduce) {
  .sicoda-disclosure__title::after,
  .sicoda-preis { transition-duration: .01ms !important; }
  .sicoda-preis:hover { transform: none; }
}

/* --- 12.6 Beitragsübersicht (divi/blog) ---
   Spaltenzahl kommt als --spalten aus den Blockattributen. auto-fit sorgt
   dafür, dass die Karten auch dann sauber umbrechen, wenn der Redakteur im
   Builder drei Spalten einstellt, der Platz aber nur zwei hergibt. */
.sicoda-beitraege {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
  margin: var(--space-2) 0;
  /* Karten wachsen mit ihrem Inhalt statt auf Zeilenhoehe gestreckt zu
     werden: ein Beitrag ohne Bild und ohne Anriss riss sonst eine
     bildschirmhohe Luecke in die Zeile. */
  align-items: start;
}
/* Bewusst KEINE Viewport-Medienabfrage fuer die Spaltenzahl: .entry ist auf
   760px Lesebreite begrenzt, drei Spalten ergaeben darin 205px je Karte
   (gemessen). auto-fit richtet sich nach dem tatsaechlich verfuegbaren Platz
   und liefert hier zwei lesbare Spalten, in breiteren Containern drei. */
.sicoda-beitrag {
  display: flex; flex-direction: column;
  background: var(--surface-card);
  border-top: var(--accent-edge) solid var(--mint-500);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
}
.sicoda-beitrag:hover { box-shadow: var(--shadow-raised); transform: translateY(-3px); }
.sicoda-beitrag__bild { display: block; }
.sicoda-beitrag__bild img { width: 100%; height: 160px; object-fit: cover; display: block; border-radius: 0; }
.sicoda-beitrag__text { padding: var(--space-3); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.sicoda-beitrag__datum { margin: 0; font-size: var(--size-caption); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sicoda-beitrag__titel { margin: 0; font-size: 1.0625rem; line-height: 1.35; }
.sicoda-beitrag__titel a { color: var(--text-900); text-decoration: none; }
.sicoda-beitrag__titel a:hover { color: var(--mint-700); }
.sicoda-beitrag__anriss { margin: 0; font-size: 0.9375rem; color: var(--text-secondary); }
.sicoda-beitrag__mehr { margin: auto 0 0; padding-top: var(--space-2); }
.sicoda-beitrag__mehr a { font-weight: var(--weight-emphasis); font-size: 0.875rem; color: var(--mint-700); text-decoration: none; }
.sicoda-beitrag__mehr a:hover { text-decoration: underline; }
.sicoda-beitrag__mehr a:active { opacity: .7; }

/* Nur für Screenreader — sichtbar bleibt „Weiterlesen", vorgelesen wird der Titel. */
.sicoda-nur-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sicoda-beitrag { transition-duration: .01ms !important; }
  .sicoda-beitrag:hover { transform: none; }
}

/* --- 12.7 Filterbare Tabelle (Aufbewahrungsfristen) ---------------------
   Für lange Nachschlagetabellen. Die Tabelle ist ohne JavaScript vollständig
   lesbar — nur das Suchfeld ist an die Klasse `js` gebunden. */
.fristen { margin: var(--space-2) 0; }
.fristen__suche { display: grid; gap: 6px; margin-bottom: var(--space-2); }
.fristen__suche label { font-weight: var(--weight-emphasis); font-size: var(--size-caption); color: var(--text-900); }
.fristen__suche input {
  font-family: var(--font-body); font-size: 1rem; color: var(--text-body);
  background: var(--surface-card);
  border: 1.5px solid var(--border-input); border-radius: var(--radius);
  padding: 11px 16px; box-shadow: none; max-width: 30rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fristen__suche input:focus { border-color: var(--mint-700); box-shadow: 0 0 0 2px var(--mint-100); outline: none; }
.fristen__zaehler { margin: 0; font-size: var(--size-caption); color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* Eigener Rollbereich: die Tabelle rollt in sich, die Seite nie waagerecht. */
.fristen__rollbereich {
  max-height: 70vh; overflow: auto;
  border: 1px solid var(--line-200); border-radius: var(--radius);
  background: var(--surface-card);
  overscroll-behavior: contain;
}
.fristen__tabelle { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
/* Zwei Klassen im Selektor, damit die Regel gegen die Grundregel
   `.wp-block-post-content table caption { caption-side: bottom }` gewinnt —
   sonst steht die Legende hinter 401 Zeilen und ist faktisch unsichtbar. */
.fristen .fristen__tabelle caption {
  caption-side: top; text-align: left; padding: 10px 14px;
  font-size: var(--size-caption); color: var(--text-secondary);
  border-bottom: 1px solid var(--line-200); background: var(--surface-card);
}
.fristen__tabelle thead th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; background: var(--ice-50); color: var(--text-900);
  font-weight: var(--weight-emphasis); padding: 10px 14px;
  border-bottom: 2px solid var(--line-200);
}
.fristen__tabelle td { padding: 9px 14px; border-bottom: 1px solid var(--line-200); vertical-align: top; }
.fristen__tabelle tbody tr:last-child td { border-bottom: none; }
.fristen__tabelle tbody tr:hover td { background: var(--ice-50); }
.fristen__jahre { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: var(--weight-emphasis); }
.fristen__norm { color: var(--text-secondary); font-size: 0.875rem; }
.fristen__hinweis {
  margin-top: var(--space-2); padding: 12px 16px;
  background: var(--surface-tint); border-radius: var(--radius);
  font-size: 0.9375rem; color: var(--text-900);
}
/* Meldung, wenn der Filter nichts findet. */
.fristen__leer td { padding: var(--space-3) 14px; color: var(--text-secondary); text-align: center; }

@media (max-width: 600px) {
  .fristen__tabelle { font-size: 0.875rem; }
  .fristen__tabelle td, .fristen__tabelle thead th { padding: 8px 10px; }
  .fristen__norm { font-size: 0.8125rem; }
}

/* ============================================================================
   13 · Leistungsseiten (2026-08-06)
   Bauteile für Seiten, deren Inhalt als HTML im post_content steht und über
   page-sicoda-subpage.php gerendert wird.
   ============================================================================ */

/* --- 13.1 Bänder, die breiter sind als die Lesespalte -------------------
   Maßgeblich ist die Fassung in page-sicoda-subpage.php: diese Datei wird von
   jener Vorlage nicht geladen, sie liefert ihr CSS inline. Beide Fassungen
   werden gleich gehalten, damit eine Änderung an der falschen Stelle nicht
   wirkungslos bleibt.

   Der Ausbruch über `width: 100vw` und `margin-left: calc(50% - 50vw)` ist
   entfallen: er setzt eine zentrierte Lesespalte voraus, `.entry` ist aber
   linksbündig. Bänder überspannen jetzt beide Spalten des .entry-Rasters. */
.band { padding: var(--space-6) 0; }
.band__inner { max-width: 100%; }
.entry > * { grid-column: 1; }
.entry > .band { grid-column: 1 / -1; }
/* Deutsche Komposita brechen sonst bei 360px aus der Spalte. Silbentrennung
   nur in Überschriften und schmalen Bauteilen, nicht im Fließtext. */
.entry { overflow-wrap: break-word; }
.entry h1, .entry h2, .entry h3, .entry h4,
.leistung-karte, .konzept-punkt, .ampel__stufe,
.sicoda-disclosure__title, .sicoda-disclosure__body, .sicoda-cta { hyphens: auto; }
.band--hero { padding-top: 0; }
.band--breit { padding: var(--space-3) 0 var(--space-5); }

/* --- 13.2 Kopfbereich der Leistungsseite --- */
.leistung-hero__raster { display: grid; grid-template-columns: 1fr 0.85fr; gap: var(--space-6); align-items: center; }
.leistung-hero__titel { margin: var(--space-1) 0 var(--space-2); }
.leistung-hero__lead { color: var(--text-secondary); font-size: 1.0625rem; line-height: 1.7; max-width: 46ch; }
.leistung-hero__aktionen { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.leistung-hero__bild { margin: 0; }
.leistung-hero__bild img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius); box-shadow: var(--shadow-raised);
}

/* --- 13.3 Leistungskarten --- */
.leistung-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); align-items: stretch; }
/* Vier Kacheln in fester 2x2-Aufteilung. `auto-fit` ergibt bei 1024px drei
   Spalten und eine verwaiste vierte Kachel darunter. */
.leistung-raster.leistung-raster--vier,
.konzept-raster.konzept-raster--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Fünf Karten: drei oben, zwei darunter, die zusammen die Zeile füllen. */
.leistung-raster.leistung-raster--fuenf { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.leistung-raster--fuenf > * { grid-column: span 2; }
.leistung-raster--fuenf > :nth-child(4) { grid-column: 1 / span 3; }
.leistung-raster--fuenf > :nth-child(5) { grid-column: 4 / span 3; }
@media (max-width: 700px) {
  .leistung-raster.leistung-raster--vier,
  .konzept-raster.konzept-raster--vier { grid-template-columns: 1fr; }
  .leistung-raster.leistung-raster--fuenf { grid-template-columns: 1fr; }
  .leistung-raster--fuenf > *,
  .leistung-raster--fuenf > :nth-child(4),
  .leistung-raster--fuenf > :nth-child(5) { grid-column: 1; }
}
.leistung-karte {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface-card);
  border-top: var(--accent-edge) solid var(--mint-500);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-3);
  transition: box-shadow .25s ease, transform .25s ease;
}
.leistung-karte:hover { box-shadow: var(--shadow-raised); transform: translateY(-3px); }
/* Die Karten stehen unter einer h3-Gruppenüberschrift und tragen daher h4.
   theme.json stylt kein h4 — die Größe hängt deshalb an der Klasse und nicht
   am Element, damit beide Auszeichnungen gleich aussehen. */
.leistung-karte__titel { margin: 0; font-size: var(--size-h3); line-height: 1.3; hyphens: auto; }
.leistung-karte__text { color: var(--text-secondary); font-size: 0.9375rem; margin: 0; }
.leistung-karte__preis {
  margin: var(--space-2) 0 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-family: var(--font-head); color: var(--text-900);
}
.leistung-karte__zahl { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.leistung-karte__einheit { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 400; color: var(--text-secondary); }
.leistung-karte__einheit--solo { font-size: 1.0625rem; font-weight: 600; color: var(--text-900); }
.leistung-karte__fuss { margin: 2px 0 0; font-size: var(--size-caption); color: var(--text-muted); }
.leistung-karte__mehr { margin: auto 0 0; padding-top: var(--space-2); }
.leistung-karte__mehr a { font-weight: var(--weight-emphasis); font-size: 0.875rem; color: var(--mint-700); text-decoration: none; }
.leistung-karte__mehr a:hover { text-decoration: underline; }
.leistung-karte__mehr a:active { opacity: .7; }
.leistung-karte--schlank { border-top-color: var(--steel-600); }

/* --- 13.4 Konzeptkomponenten --- */
.konzept-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); }
.konzept-punkt {
  padding: var(--space-3); background: var(--surface-card);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  border-left: 3px solid var(--mint-500);
}
.konzept-punkt__nr {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: 0.8125rem; color: var(--mint-700); letter-spacing: .08em; margin-bottom: 4px;
}
.konzept-punkt h3 { margin: 0 0 4px; font-size: 1.0625rem; }
.konzept-punkt p { margin: 0; font-size: 0.9375rem; color: var(--text-secondary); }

/* --- 13.5 Ampel --- */
.ampel { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); }
.ampel__stufe {
  padding: var(--space-3); background: var(--surface-card);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  border-top: var(--accent-edge) solid var(--line-200);
}
.ampel__punkt { display: block; width: 14px; height: 14px; border-radius: 50%; margin-bottom: 10px; }
.ampel__stufe h3 { margin: 0 0 4px; font-size: 1.0625rem; }
.ampel__stufe p { margin: 0; font-size: 0.9375rem; color: var(--text-secondary); }
.ampel__stufe--gruen { border-top-color: var(--success-700, #1F7A3D); }
.ampel__stufe--gruen .ampel__punkt { background: var(--success-700, #1F7A3D); }
.ampel__stufe--gelb  { border-top-color: #C98A00; }
.ampel__stufe--gelb  .ampel__punkt { background: #C98A00; }
.ampel__stufe--rot   { border-top-color: var(--error-700, #B23A31); }
.ampel__stufe--rot   .ampel__punkt { background: var(--error-700, #B23A31); }

/* --- 13.8 Bild-Text-Abschnitte (2026-08-06) ------------------------------
   Ein Bild neben dem Text, je Abschnitt auf der anderen Seite. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: center; }
.split__bild { margin: 0; }
.split__bild img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow-card);
}
.split--bildrechts .split__bild { order: 2; }
/* Eigener Abstand im Textteil: die Seite bezieht Absatzabstände aus dem
   Rasterabstand von `.entry`, und der greift nur bei direkten Kindern. In
   einem verschachtelten Kasten stünden die Absätze sonst ohne Luft
   aufeinander. */
.split__text { display: grid; gap: var(--space-2); align-content: center; }
.split__text > :first-child { margin-top: 0; }
.split__text > :last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: var(--space-3); }
  .split--bildrechts .split__bild { order: 0; }
}

/* --- 13.6 Einblenden beim Scrollen ---------------------------------------
   Startzustand an die Klasse `js` gebunden: ohne JavaScript ist alles
   sichtbar, statt für immer ausgeblendet zu bleiben. */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .5s cubic-bezier(.16,.84,.24,1), transform .5s cubic-bezier(.16,.84,.24,1); }
.js [data-reveal].ist-sichtbar { opacity: 1; transform: none; }
.js [data-reveal]:nth-child(2) { transition-delay: .06s; }
.js [data-reveal]:nth-child(3) { transition-delay: .12s; }
.js [data-reveal]:nth-child(4) { transition-delay: .06s; }
.js [data-reveal]:nth-child(5) { transition-delay: .12s; }
.js [data-reveal]:nth-child(6) { transition-delay: .18s; }

@media (max-width: 900px) {
  .leistung-hero__raster { grid-template-columns: 1fr; gap: var(--space-4); }
  .band { padding: var(--space-4) 0; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .leistung-karte { transition-duration: .01ms !important; }
  .leistung-karte:hover { transform: none; }
}

@media (prefers-contrast: more) {
  .leistung-karte, .konzept-punkt, .ampel__stufe { border: 1px solid var(--text-heading); }
}

/* --- 13.7 Zweitrangige Schaltflaechen -----------------------------------
   page-sicoda-subpage.php definiert nur .btn und .btn-primary; ein
   .btn-secondary blieb dort rahmenlos und sah aus wie blosser Text
   (gemessen: border-color transparent). */
.btn-secondary {
  background: transparent;
  color: var(--mint-700);
  border: 1.5px solid var(--mint-700);
}
.btn-secondary:hover { background: var(--mint-100); color: var(--mint-700); }
.btn-secondary:active { transform: translateY(1px) scale(.99); }

/* Auf schmalen Viewports darf eine Schaltflaeche umbrechen. `white-space:
   nowrap` mit fester Hoehe liess lange Beschriftungen sonst aus dem Kasten
   laufen (gemessen: „Zum Entscheidungsbaum" 247px in einem 232px breiten
   Kasten bei 360px Sichtfeldbreite). Die Mindesthoehe von 44px bleibt, damit
   die Trefferflaeche nicht kleiner wird. */
@media (max-width: 480px) {
  .btn {
    white-space: normal;
    height: auto;
    min-height: 44px;
    padding: 10px 20px;
    text-align: center;
    line-height: 1.3;
  }
}