/* ==========================================================================
   Kadence 4All - Styles für 4all-group.de
   Tokens: Abschnitt 9 des Website-Konzepts. Farben aus dem Logo gemessen.
   ========================================================================== */

:root {
  --f4-primary: #0C6838;
  --f4-primary-dark: #08512B;
  --f4-accent: #3CB448;
  --f4-accent-dark: #34A040;
  --f4-bg: #EEF0ED;
  --f4-surface: #FFFFFF;
  --f4-text: #1B2320;
  --f4-text-2: #5B6660;
  --f4-line: #DDE3DE;
  --f4-tint: #E9EFE9;
  --f4-warn: #B5471B;
  --f4-font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f4-font-head: var(--f4-font);
  /* Feinjustierung aus dem Customizer (4All - Schrift, inc/typografie.php): verschiebt alle
     Schriftgrößen um -2 bis +4 px. Die Karte im Regionsband bleibt fest. */
  --f4-fs: 0px;
  --f4-fs-h: 0px;
  --f4-fs-nav: 0px;
  /* Kadence-eigene Elemente (Menü, Formularfelder, Buttons) nutzen dieselbe Schrift. */
  --global-body-font-family: var(--f4-font);
  --global-heading-font-family: var(--f4-font-head);
  --f4-radius: 12px;
  --f4-radius-sm: 8px;
  --f4-max: 1120px;
  --f4-section-y: clamp(56px, 7vw, 96px);
  --f4-gutter: 20px;
}

/* --- Grundlagen -------------------------------------------------------- */
body,
body.kadence {
  background: var(--f4-bg);
  color: var(--f4-text);
  font-family: var(--f4-font);
  font-size: calc(17px + var(--f4-fs));
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 768px) {
  body, body.kadence { font-size: calc(18px + var(--f4-fs)); }
}

h1, h2, h3, h4, h5, h6,
.site h1, .site h2, .site h3, .site h4 {
  font-family: var(--f4-font-head);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--f4-text);
  margin: 0 0 0.6em;
}
h1, .site h1 { font-size: clamp(calc(32px + var(--f4-fs-h)), calc(4.2vw + var(--f4-fs-h)), calc(44px + var(--f4-fs-h))); line-height: 1.12; }
h2, .site h2 { font-size: clamp(calc(26px + var(--f4-fs-h)), calc(3vw + var(--f4-fs-h)), calc(32px + var(--f4-fs-h))); line-height: 1.2; }
@media (max-width: 480px) { h1, h2, .site h1, .site h2 { hyphens: auto; overflow-wrap: break-word; } }
h3, .site h3 { font-size: calc(18px + var(--f4-fs-h)); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--f4-primary); text-decoration: none; }
a:hover { color: var(--f4-primary-dark); text-decoration: underline; }
/* Links im Fließtext sind unterstrichen (WCAG 1.4.1: nicht nur Farbe). Buttons, Pfeil-Links,
   Chips und Karten-Titel bleiben ohne Unterstreichung. */
.entry-content :is(p, li, td, th, dd, summary, label, span, div) a:not(.wp-block-button__link, .f4-link-arrow),
.f4-footer p a, .site-footer p a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em;
}
.entry-content ul.f4-chips li a { text-decoration: none; }
.entry-content ul.f4-chips li a:hover { text-decoration: underline; }
.entry-content .f4-cards .f4-card h3 a, .entry-content .f4-posts .wp-block-post-title a { text-decoration: none; }

/* Nur für Screenreader (Kadence definiert die Klasse ebenfalls; hier als Rückfall). */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Fokus: immer sichtbar, nie outline:none (WCAG 2.4.7) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 2px solid var(--f4-primary);
  outline-offset: 2px;
  box-shadow: none;
}

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

/* Kadences Skip-Link sichtbar und im Markenlook, sobald er den Fokus hat */
.skip-link.screen-reader-text:focus {
  position: fixed !important; left: 16px; top: 16px; z-index: 100000;
  width: auto; height: auto; margin: 0; clip: auto; clip-path: none;
  background: var(--f4-primary); color: #fff; padding: 10px 14px;
  border-radius: var(--f4-radius-sm); text-decoration: none; font-weight: 600;
}

/* --- Sektionen --------------------------------------------------------- */
.f4-section {
  padding: var(--f4-section-y) var(--f4-gutter);
}
.f4-section.f4-section--tight { padding-top: 0; }
.f4-band { padding: var(--f4-section-y) var(--f4-gutter); }
/* Kadence setzt für ".entry-content .alignfull" padding-left/right auf 0 (content.css) - mit
   höherer Spezifität als .f4-band. Auf dem Desktop unsichtbar (Inhalt zentriert auf 1120px),
   unterhalb davon klebt der Inhalt am Rand. Hier mit höherer Spezifität zurückgeholt. */
.entry-content .alignfull.f4-band, .alignfull.f4-band, .alignfull.f4-section { padding-left: var(--f4-gutter); padding-right: var(--f4-gutter); box-sizing: border-box; }
.f4-band--white { background: var(--f4-surface); border-top: 1px solid var(--f4-line); border-bottom: 1px solid var(--f4-line); }
.f4-band--primary { background: var(--f4-primary); color: #fff; }
.f4-band--primary h1, .f4-band--primary h2, .f4-band--primary h3, .f4-band--primary p, .f4-band--primary li { color: #fff; }
.f4-band--primary a { color: #fff; }
.f4-band--pattern {
  background-color: var(--f4-primary);
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 14px);
  color: #fff;
}
.f4-band--pattern h2, .f4-band--pattern p, .f4-band--pattern li { color: #fff; }

.f4-kicker {
  font-size: calc(15px + var(--f4-fs)); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--f4-primary); margin-bottom: 16px;
}
.f4-band--primary .f4-kicker, .f4-band--pattern .f4-kicker { color: #CDEBD0; }
h2.f4-kicker, .f4-kicker.wp-block-heading { font-size: calc(15px + var(--f4-fs)); line-height: 1.4; margin: 0 0 16px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--f4-primary); }
.f4-lead { font-size: calc(18px + var(--f4-fs)); max-width: 36em; }
@media (min-width: 768px) { .f4-lead { font-size: calc(19px + var(--f4-fs)); } }
.f4-small { font-size: calc(14px + var(--f4-fs)); line-height: 1.5; color: var(--f4-text-2); }
.f4-muted { color: var(--f4-text-2); }
.f4-hint { color: var(--f4-warn); font-weight: 500; }

/* --- Abstände zwischen Blöcken innerhalb einer Sektion --------------- */
/* Überschriften bekommen Luft nach oben, sobald etwas vor ihnen steht (Liste, Tabelle, Absatz, Kacheln). */
.f4-section > * + h2, .f4-band > * + h2, .wp-block-column > * + h2 { margin-top: 1.6em; }
.f4-section > * + h3, .f4-band > * + h3, .wp-block-column > * + h3 { margin-top: 1.3em; }
.f4-section > * + h4, .f4-band > * + h4 { margin-top: 1.2em; }
/* Absätze, Buttons und Kacheln nach Listen und Tabellen */
ul.f4-checks + p, ol.f4-checks + p, .f4-table + p, .wp-block-details + p, .f4-cards + p, .wp-block-columns + p, .wp-block-list + p { margin-top: 20px; }
ul.f4-checks + .wp-block-buttons, ol.f4-checks + .wp-block-buttons, .f4-table + .wp-block-buttons, p + .wp-block-buttons, .wp-block-columns + .wp-block-buttons { margin-top: 24px; }
.f4-cards + .f4-cards, .f4-table + .f4-table, .wp-block-list + .f4-table { margin-top: 24px; }
h2 + .f4-cards, h2 + .f4-table, h2 + ul.f4-checks, h2 + .wp-block-details, h3 + .f4-table { margin-top: 4px; }
.f4-section > h2 + .f4-lead, .f4-band > h2 + .f4-lead { margin-top: -0.2em; }

/* --- Buttons ----------------------------------------------------------- */
.wp-block-buttons { gap: 12px; }
.wp-block-button .wp-block-button__link,
.f4-btn {
  font-family: var(--f4-font); font-weight: 600; font-size: calc(17px + var(--f4-fs)); line-height: 20px;
  padding: 14px 24px; border-radius: var(--f4-radius-sm); min-height: 48px;
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; border: 1.5px solid transparent; transition: background-color .15s, border-color .15s;
}
.wp-block-button.f4-btn-acc .wp-block-button__link { background: var(--f4-accent); color: var(--f4-text); }
.wp-block-button.f4-btn-acc .wp-block-button__link:hover { background: var(--f4-accent-dark); color: var(--f4-text); text-decoration: none; }
.wp-block-button.f4-btn-out .wp-block-button__link { background: transparent; color: var(--f4-primary); border-color: var(--f4-primary); }
.wp-block-button.f4-btn-out .wp-block-button__link:hover { background: var(--f4-tint); text-decoration: none; }
.wp-block-button.f4-btn-white .wp-block-button__link { background: #fff; color: var(--f4-primary); }
.wp-block-button.f4-btn-white .wp-block-button__link:hover { background: var(--f4-tint); text-decoration: none; }
.f4-band--primary .wp-block-button.f4-btn-out .wp-block-button__link { color: #fff; border-color: rgba(255,255,255,0.6); }
.f4-link-arrow { font-weight: 600; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.f4-link-arrow::after { content: "→"; }

/* --- Hero -------------------------------------------------------------- */
.f4-hero { align-items: center; gap: 64px; }
.f4-hero .wp-block-column { display: flex; flex-direction: column; gap: 20px; }
.f4-hero .wp-block-column > * { margin: 0; }
.f4-portrait img { border-radius: var(--f4-radius); width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
@media (max-width: 781px) {
  .f4-portrait img { aspect-ratio: 4 / 3; object-position: center 20%; }
}
.f4-avatar img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; }

/* --- Kacheln ----------------------------------------------------------- */
.f4-cards { gap: 24px; }
.f4-card {
  background: var(--f4-surface); border: 1px solid var(--f4-line); border-radius: var(--f4-radius);
  padding: 28px; height: 100%; box-sizing: border-box; transition: border-color .2s;
}
.f4-card:hover { border-color: var(--f4-primary); }
.f4-card h2, .f4-card h3 { font-size: calc(20px + var(--f4-fs-h)); margin: 10px 0 10px; }
.f4-card p { font-size: calc(16px + var(--f4-fs)); }
.f4-card .f4-icon { display: block; width: 28px; height: 28px; color: var(--f4-primary); }
.f4-card--preview { border-style: dashed; opacity: .85; }

/* --- Listen mit Häkchen ------------------------------------------------ */
ul.f4-checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
ul.f4-checks li { position: relative; padding-left: 34px; font-size: calc(16px + var(--f4-fs)); line-height: 1.55; }
ul.f4-checks li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233CB448' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 4.5 4.5L19 7'/></svg>") no-repeat center / contain;
}
@media (min-width: 782px) {
  ul.f4-checks.f4-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; }
}

/* --- Schritte ---------------------------------------------------------- */
.f4-steps { gap: 32px; counter-reset: f4step; }
.f4-step { display: flex; flex-direction: column; gap: 12px; }
.f4-step::before {
  counter-increment: f4step; content: counter(f4step);
  width: 40px; height: 40px; border-radius: 50%; background: var(--f4-primary); color: #fff;
  font-weight: 600; font-size: calc(18px + var(--f4-fs)); display: flex; align-items: center; justify-content: center;
}
.f4-step h3 { margin: 0; font-size: calc(18px + var(--f4-fs-h)); }
.f4-step p { margin: 0; font-size: calc(16px + var(--f4-fs)); }
@media (max-width: 781px) {
  /* Kreis links, Text rechts; die Verbindungslinie zeichnet jede Spalte selbst (Pseudo-Element),
     weil der Container von WordPress' Layout-CSS zentriert wird (margin auto !important) und
     negative Ränder dort nicht greifen. */
  .f4-steps .wp-block-column { position: relative; }
  .f4-steps .wp-block-column:not(:last-child)::after {
    content: ""; position: absolute; left: 19px; top: 40px; bottom: -32px; width: 2px; background: var(--f4-line);
  }
  .f4-step { flex-direction: row; gap: 16px; }
  .f4-step::before { flex-shrink: 0; position: relative; z-index: 1; }
  .f4-step > div { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
}

/* --- Region ------------------------------------------------------------ */
.f4-region { align-items: center; gap: 64px; }
.f4-map { position: relative; }
.f4-map svg { width: 100%; height: auto; display: block; }
/* Einschub Deutschland/Schweiz: eigenes SVG. Desktop/Tablet rechts oben über dem freien Bereich
   östlich der Grenze (30 % = 125 von 416 Einheiten, endet über Plößberg); Mobil unter der Regionskarte,
   damit die Beschriftung lesbar bleibt statt auf ~7 px zu schrumpfen. */
.f4-map svg.f4-map-inset { position: absolute; top: 0; right: 0; width: 30%; }
@media (max-width: 600px) {
  .f4-map svg.f4-map-inset { position: static; width: 62%; max-width: 230px; margin: 16px auto 0; }
  .f4-map svg.f4-map-main text { font-size: 13px; }
}
ul.f4-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
ul.f4-chips li a {
  display: inline-block; color: #fff; border: 1px solid rgba(255,255,255,0.45); border-radius: 999px;
  padding: 8px 14px; font-size: calc(15px + var(--f4-fs)); text-decoration: none; min-height: 40px; box-sizing: border-box;
}
ul.f4-chips li a:hover { background: rgba(255,255,255,0.12); }
ul.f4-chips li a.f4-chip--solid { background: #fff; color: var(--f4-primary); border-color: #fff; font-weight: 600; }
ul.f4-chips li a.f4-chip--solid:hover { background: var(--f4-tint); }

/* --- Datenschutzerklärung: eigener Block unter dem Kanzlei-Text ------- */
.wp-block-group.f4-dse-ergaenzung { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--f4-line); }
.f4-dse-ergaenzung > h2:first-child { margin-top: 0; }

/* --- Trust-Zeile ------------------------------------------------------- */
ul.f4-trust { list-style: none; padding: 28px 0 0; margin: 48px 0 0; border-top: 1px solid var(--f4-line);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; font-size: calc(15px + var(--f4-fs)); line-height: 1.5; }
@media (min-width: 782px) { ul.f4-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 781px) { ul.f4-trust { margin-top: 36px; padding-top: 24px; } }
ul.f4-trust li { display: flex; gap: 10px; align-items: flex-start; }
ul.f4-trust li > span { min-width: 0; hyphens: auto; overflow-wrap: break-word; } /* „Interessenkonflikte“ sprengte bei 360 px die Spalte */
ul.f4-trust li svg { flex-shrink: 0; width: 22px; height: 22px; color: var(--f4-primary); }

/* --- Tabellen (Pakete, Erstaudit, Preise) ------------------------------ */
.f4-table { overflow-x: auto; margin: 0; }
.f4-table table { border-collapse: collapse; width: 100%; min-width: 640px; background: var(--f4-surface); border: 1px solid var(--f4-line); border-radius: var(--f4-radius); font-size: calc(15px + var(--f4-fs)); }
.f4-table th, .f4-table td { border: 1px solid var(--f4-line); padding: 12px 14px; vertical-align: top; text-align: left; }
.f4-table thead th { background: var(--f4-tint); font-weight: 600; }
.f4-table tbody th, .f4-table tbody td:first-child { font-weight: 600; }
.f4-table--pakete tbody td:nth-child(3), .f4-table--pakete thead th:nth-child(3) { background: #F3F8F3; }
.f4-table .f4-price { font-size: calc(22px + var(--f4-fs)); font-weight: 600; color: var(--f4-primary); white-space: nowrap; }
.f4-table caption { text-align: left; font-size: calc(14px + var(--f4-fs)); color: var(--f4-text-2); padding: 8px 0; caption-side: bottom; }

/* Schmale Viewports: 4all.js schreibt Spalten- (data-col) und Zeilenbezeichnung (data-row) an
   jede Zelle und setzt .f4-table--ready. Erst dann wird aus der Tabelle ein Kartenstapel; ohne
   JavaScript bleibt sie seitlich scrollbar. Zwei Varianten:
   - Vergleichstabelle (.f4-table--pakete): jede Spalte (Paket) wird eine Karte, die Zeilen-
     bezeichnungen stehen als kleine Überschrift über dem Wert - bis Tablet-Breite.
   - Alle anderen (Leistung | Preis, Modul | Inhalt | Preis): jede Zeile wird eine Karte,
     die erste Zelle ist der Titel, die Spaltenüberschriften stehen über den Werten - bis 781px. */
.f4-table--ready td::before { display: none; font-size: calc(13px + var(--f4-fs)); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--f4-text-2); margin-bottom: 2px; }

@media (max-width: 1024px) {
  /* Raster mit zwei Spalten (Tablet): Paket 1 und 2 nebeneinander, darunter 3 und 4; die Zeilen
     beider Karten liegen auf gleicher Höhe. "dense" setzt jede Zelle in die nächste freie Zeile
     ihrer Spalte, "order" sortiert Spalte für Spalte statt Zeile für Zeile. */
  .f4-table--pakete.f4-table--ready { overflow: visible; }
  .f4-table--pakete.f4-table--ready table {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; column-gap: 20px;
    min-width: 0; width: 100%; border: 0; border-radius: 0; background: transparent;
  }
  .f4-table--pakete.f4-table--ready thead, .f4-table--pakete.f4-table--ready tbody, .f4-table--pakete.f4-table--ready tr { display: contents; }
  .f4-table--pakete.f4-table--ready th:first-child, .f4-table--pakete.f4-table--ready td:first-child { display: none; }
  .f4-table--pakete.f4-table--ready th, .f4-table--pakete.f4-table--ready td {
    display: block; white-space: normal; border: 0; border-left: 1px solid var(--f4-line); border-right: 1px solid var(--f4-line);
    padding: 10px 18px; background: var(--f4-surface); font-size: calc(16px + var(--f4-fs));
  }
  .f4-table--pakete.f4-table--ready thead th {
    margin-top: 20px; padding: 16px 18px; font-size: calc(20px + var(--f4-fs)); border-top: 1px solid var(--f4-line);
    border-radius: var(--f4-radius) var(--f4-radius) 0 0; background: var(--f4-tint);
  }
  .f4-table--pakete.f4-table--ready thead th:nth-child(2), .f4-table--pakete.f4-table--ready thead th:nth-child(3) { margin-top: 0; }
  .f4-table--pakete.f4-table--ready tbody tr:first-child td { padding-top: 16px; }
  .f4-table--pakete.f4-table--ready tbody tr:last-child td { padding-bottom: 18px; border-bottom: 1px solid var(--f4-line); border-radius: 0 0 var(--f4-radius) var(--f4-radius); }
  .f4-table--pakete.f4-table--ready td::before { content: attr(data-row); display: block; }
  .f4-table--pakete.f4-table--ready tbody td:nth-child(3) { background: #F3F8F3; }
  .f4-table--pakete.f4-table--ready th:nth-child(2), .f4-table--pakete.f4-table--ready td:nth-child(2) { order: 2; grid-column: 1; }
  .f4-table--pakete.f4-table--ready th:nth-child(3), .f4-table--pakete.f4-table--ready td:nth-child(3) { order: 3; grid-column: 2; }
  .f4-table--pakete.f4-table--ready th:nth-child(4), .f4-table--pakete.f4-table--ready td:nth-child(4) { order: 4; grid-column: 1; }
  .f4-table--pakete.f4-table--ready th:nth-child(5), .f4-table--pakete.f4-table--ready td:nth-child(5) { order: 5; grid-column: 2; }
  .f4-table--pakete.f4-table--ready th:nth-child(6), .f4-table--pakete.f4-table--ready td:nth-child(6) { order: 6; grid-column: 1; }
  .f4-table--pakete.f4-table--ready caption { order: 99; grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  /* Telefon: eine Spalte, Karte unter Karte */
  .f4-table--pakete.f4-table--ready table { grid-template-columns: minmax(0, 1fr); }
  .f4-table--pakete.f4-table--ready th:nth-child(3), .f4-table--pakete.f4-table--ready td:nth-child(3),
  .f4-table--pakete.f4-table--ready th:nth-child(5), .f4-table--pakete.f4-table--ready td:nth-child(5) { grid-column: 1; }
  .f4-table--pakete.f4-table--ready thead th:nth-child(3) { margin-top: 20px; }
}

@media (max-width: 781px) {
  .f4-table--ready:not(.f4-table--pakete) { overflow: visible; }
  .f4-table--ready:not(.f4-table--pakete) table { display: block; min-width: 0; width: 100%; border: 0; border-radius: 0; background: transparent; }
  .f4-table--ready:not(.f4-table--pakete) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .f4-table--ready:not(.f4-table--pakete) tbody { display: flex; flex-direction: column; gap: 12px; }
  .f4-table--ready:not(.f4-table--pakete) tr { display: block; background: var(--f4-surface); border: 1px solid var(--f4-line); border-radius: var(--f4-radius); padding: 14px 18px 16px; }
  .f4-table--ready:not(.f4-table--pakete) tbody td { display: block; border: 0; padding: 6px 0 0; white-space: normal; font-size: calc(16px + var(--f4-fs)); }
  .f4-table--ready:not(.f4-table--pakete) tbody td:first-child { padding: 0 0 8px; margin-bottom: 4px; border-bottom: 1px solid var(--f4-line); font-size: calc(17px + var(--f4-fs)); font-weight: 600; white-space: normal; }
  .f4-table--ready:not(.f4-table--pakete) tbody td:not(:first-child)::before { content: attr(data-col); display: block; }
  .f4-table--ready:not(.f4-table--pakete) caption { display: block; }
}

/* --- Akkordeon / FAQ (core/details) ------------------------------------ */
.wp-block-details.f4-faq { border-top: 1px solid var(--f4-line); padding: 14px 0; margin: 0; }
.wp-block-details.f4-faq:last-of-type { border-bottom: 1px solid var(--f4-line); }
.wp-block-details.f4-faq summary { font-size: calc(18px + var(--f4-fs)); font-weight: 600; cursor: pointer; padding: 6px 36px 6px 0; position: relative; list-style: none; min-height: 44px; display: flex; align-items: center; }
.wp-block-details.f4-faq summary::-webkit-details-marker { display: none; }
.wp-block-details.f4-faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 12px; height: 12px; margin-top: -8px;
  border-right: 2px solid var(--f4-primary); border-bottom: 2px solid var(--f4-primary); transform: rotate(45deg); transition: transform .15s;
}
.wp-block-details.f4-faq[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.wp-block-details.f4-faq > :not(summary) { font-size: calc(17px + var(--f4-fs)); max-width: 48em; }

/* --- Beitragsliste (Query Loop auf /wissen/) --------------------------- */
.f4-posts .wp-block-post-template { list-style: none; padding: 0; margin: 0; gap: 24px; }
.f4-posts .wp-block-post-template > li { margin: 0; }
.f4-posts .f4-card { display: flex; flex-direction: column; gap: 8px; }
.f4-posts .wp-block-post-date { font-size: calc(14px + var(--f4-fs)); color: var(--f4-text-2); }
.f4-posts .wp-block-post-title { font-size: calc(20px + var(--f4-fs-h)); margin: 0; }
.f4-posts .wp-block-post-title a { color: var(--f4-text); text-decoration: none; }
.f4-posts .wp-block-post-title a:hover { color: var(--f4-primary); text-decoration: underline; }
.f4-posts .wp-block-post-excerpt { font-size: calc(16px + var(--f4-fs)); }
.f4-posts .wp-block-post-excerpt__more-link { font-weight: 600; text-decoration: underline; }
.f4-posts .wp-block-query-pagination { margin-top: 32px; gap: 8px; }
.f4-posts .wp-block-query-pagination a, .f4-posts .wp-block-query-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--f4-line); border-radius: var(--f4-radius-sm); text-decoration: none; }
.f4-posts .wp-block-query-pagination .page-numbers.current { background: var(--f4-primary); color: #fff; border-color: var(--f4-primary); }

/* --- Matomo-Opt-out in der Datenschutzerklärung ------------------------ */
.f4-matomo-optout { background: var(--f4-surface); border: 1px solid var(--f4-line); border-radius: var(--f4-radius); padding: 20px 24px; margin: 16px 0; font-size: calc(16px + var(--f4-fs)); }
.f4-matomo-optout label { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; cursor: pointer; }
.f4-matomo-optout input[type="checkbox"] { width: 24px; height: 24px; margin-top: 1px; accent-color: var(--f4-primary); }

/* --- Kleine Helfer ----------------------------------------------------- */
.f4-divider { border: 0; border-top: 1px solid var(--f4-line); margin: 24px 0 0; }
.f4-meta-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--f4-line); padding-top: 24px; }
/* Trennlinie unter Listen (Leistungen, Trust-Zeile): deutlicher Abstand nach oben. Höhere Spezifität,
   weil WordPress/Kadence den Abstand zwischen Blöcken sonst auf wenige Pixel setzen. */
.f4-section .wp-block-group.f4-meta-row, .f4-band .wp-block-group.f4-meta-row { margin-top: 48px; padding-top: 28px; gap: 16px 40px; }
.f4-meta-row > p { margin: 0; }
@media (max-width: 781px) {
  .f4-section .wp-block-group.f4-meta-row, .f4-band .wp-block-group.f4-meta-row { margin-top: 36px; padding-top: 24px; }
}
.f4-stack > * + * { margin-top: 16px; }
.f4-center { text-align: center; }

/* --- Header (Kadence Header-Builder) ----------------------------------- */
.site-header, #masthead { background: var(--f4-surface); border-bottom: 1px solid var(--f4-line); }
.site-header .custom-logo { height: 44px; width: auto; }
/* Kopfzeile mit eigener Größe (--f4-fs-nav, Customizer „Schriftgröße Kopfzeile“) - sie wächst
   nicht mit der Text-Einstellung mit, damit Menü, Telefon und Button in eine Zeile passen. */
.site-header .main-navigation .primary-menu-container > ul > li.menu-item > a,
.site-header .primary-menu-container > ul > li > a { font-weight: 500; font-size: calc(16px + var(--f4-fs-nav)); }
.site-header .header-button, .site-header .button.header-button {
  background: var(--f4-accent) !important; color: var(--f4-text) !important; border: 0 !important;
  font-weight: 600; font-size: calc(16px + var(--f4-fs-nav)) !important; line-height: 1.2 !important;
  border-radius: var(--f4-radius-sm); padding: 10px 18px !important; min-height: 44px;
  display: inline-flex; align-items: center; white-space: nowrap;
}
.site-header .header-button:hover { background: var(--f4-accent-dark) !important; }

/* Menüfarben (Customizer „Menüfarbe“): body.f4-menu-hell oder body.f4-menu-gruen.
   Ohne Klasse (Einstellung „Kadence“) gelten Kadences eigene Navigationsfarben. */
body:is(.f4-menu-hell, .f4-menu-gruen) .site-header .main-navigation .primary-menu-container > ul > li.menu-item > a { color: var(--f4-text); }
body:is(.f4-menu-hell, .f4-menu-gruen) .site-header .main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
body:is(.f4-menu-hell, .f4-menu-gruen) .site-header .main-navigation .primary-menu-container > ul > li.menu-item:focus-within > a,
body:is(.f4-menu-hell, .f4-menu-gruen) .site-header .main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a,
body:is(.f4-menu-hell, .f4-menu-gruen) .site-header .main-navigation .primary-menu-container > ul > li.menu-item.current-menu-ancestor > a { color: var(--f4-primary); }
/* Untermenü: Kadence-Vorgabe ist 12 px, 200 px breit, fast schwarz - hier 15 px, breiter, Markenfarben. */
body:is(.f4-menu-hell, .f4-menu-gruen) .site-header .header-navigation .header-menu-container ul ul.sub-menu {
  padding: 6px; border-radius: var(--f4-radius-sm); box-shadow: 0 12px 32px rgba(27, 35, 32, 0.16);
}
body:is(.f4-menu-hell, .f4-menu-gruen) .site-header .header-navigation .header-menu-container ul ul li.menu-item { border-bottom: 0; }
body:is(.f4-menu-hell, .f4-menu-gruen) .site-header .header-navigation .header-menu-container ul ul li.menu-item > a {
  width: 19em; font-size: calc(15px + var(--f4-fs-nav)); font-weight: 500; line-height: 1.35;
  padding: 0.7em 0.9em; border-radius: 6px; text-decoration: none;
}
body.f4-menu-hell .site-header .header-navigation .header-menu-container ul ul.sub-menu { background: var(--f4-surface); border: 1px solid var(--f4-line); }
body.f4-menu-hell .site-header .header-navigation .header-menu-container ul ul li.menu-item > a { color: var(--f4-text); background: transparent; }
body.f4-menu-hell .site-header .header-navigation .header-menu-container ul ul li.menu-item > a:hover,
body.f4-menu-hell .site-header .header-navigation .header-menu-container ul ul li.menu-item > a:focus-visible,
body.f4-menu-hell .site-header .header-navigation .header-menu-container ul ul li.menu-item.current-menu-item > a { color: var(--f4-primary); background: var(--f4-tint); }
body.f4-menu-gruen .site-header .header-navigation .header-menu-container ul ul.sub-menu { background: var(--f4-primary-dark); border: 0; }
body.f4-menu-gruen .site-header .header-navigation .header-menu-container ul ul li.menu-item > a { color: #fff; background: transparent; }
body.f4-menu-gruen .site-header .header-navigation .header-menu-container ul ul li.menu-item > a:hover,
body.f4-menu-gruen .site-header .header-navigation .header-menu-container ul ul li.menu-item > a:focus-visible,
body.f4-menu-gruen .site-header .header-navigation .header-menu-container ul ul li.menu-item.current-menu-item > a { color: #fff; background: var(--f4-primary); }
body.f4-menu-gruen .site-header .header-navigation .header-menu-container ul ul li.menu-item > a:focus-visible { outline-color: #fff; outline-offset: -3px; }
/* Mobiles Menü (Kadence-Drawer): Markengrün statt Fast-Schwarz, Schrift wie Kopfzeile. */
body:is(.f4-menu-hell, .f4-menu-gruen) #mobile-drawer .drawer-inner { background: var(--f4-primary-dark); }
body:is(.f4-menu-hell, .f4-menu-gruen) #mobile-drawer .mobile-navigation ul li > a { font-size: calc(17px + var(--f4-fs-nav)); }
/* Kadences Untermenü-Schalter für die Tastatur (dropdown-nav-special-toggle) ist nur .9em breit,
   also 16px - WCAG 2.5.8 verlangt 24 × 24. Breiter machen und auf dem Pfeil zentriert halten. */
.wp-site-blocks .nav--toggle-sub .dropdown-nav-special-toggle { width: 1.6em; min-width: 24px; right: .35em; }
.wp-site-blocks .nav--toggle-sub .sub-menu .dropdown-nav-special-toggle { width: 2.6em; right: 0; }
.f4-header-phone, .site-header .f4-header-phone { font-weight: 600; font-size: calc(16px + var(--f4-fs-nav)); color: var(--f4-text); white-space: nowrap; text-decoration: none; }
.site-header .f4-header-phone:hover { color: var(--f4-primary); text-decoration: underline; }

/* --- Footer (Kadence Footer-Builder, Inhalt im HTML-Element) ------------ */
.site-footer, #colophon { background: var(--f4-primary-dark); color: var(--f4-line); }
.site-footer a { color: var(--f4-line); }
.site-footer a:hover { color: #fff; }
.f4-footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; font-size: calc(15px + var(--f4-fs)); line-height: 1.6; padding: 24px 0 8px; text-align: left; }
@media (min-width: 782px) { .f4-footer { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; } }
.f4-footer p { margin: 0 0 6px; }
.f4-footer strong { color: #fff; display: block; margin-bottom: 6px; }
.f4-footer .f4-footer-mark { width: 44px; height: auto; display: block; margin-bottom: 8px; }
.f4-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.f4-footer-bottom { border-top: 1px solid rgba(255,255,255,0.18); margin-top: 24px; padding-top: 18px; font-size: calc(14px + var(--f4-fs)); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; text-align: left; }

/* --- Editor: Patterns sichtbar wie im Frontend ------------------------- */
.editor-styles-wrapper { background: var(--f4-bg); font-family: var(--f4-font); }