/* ==========================================================================
   verein-theme — Komponenten (modular, token-getrieben)
   Eine Datei für ALLE Komponenten. Keine seitenspezifische CSS (ADR-0003).
   Werte ausschließlich über --sf-* / theme.json-Presets.
   BEM: .sf-<block>__<element>--<modifier>
   ========================================================================== */

/* --- Eyebrow (geteiltes Label über Sektionen) -------------------------------- */
.sf-eyebrow {
  margin: 0 0 var(--sf-space-3);
  font-family: var(--sf-font-sans);
  font-weight: var(--sf-weight-semibold);
  font-size: var(--sf-text-micro);
  line-height: 1;
  letter-spacing: var(--sf-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sf-color-eyebrow);
}

/* --- Seitenkopf mit Vorspann ------------------------------------------------- */
.sf-seitenkopf { padding-block: var(--sf-section-y-tight) var(--sf-space-6); }
.sf-seitenkopf__titel { margin: 0; max-width: var(--sf-measure-head); }
/* Titel und Lead haben ein schmaleres Lesemaß. Das „constrained“-Layout zentriert jedes
   Kind (margin-inline: auto) → sie rückten gegenüber der Eyebrow nach innen. Hier bündig
   an die linke Kante der Inhaltsspalte setzen, egal wie breit sie ist. */
.sf-seitenkopf.is-layout-constrained > .sf-seitenkopf__titel,
.sf-seitenkopf.is-layout-constrained > .sf-seitenkopf__lead {
  margin-inline-start: max(0px, calc((100% - var(--wp--style--global--content-size, 100%)) / 2)) !important;
  margin-inline-end: auto !important;
}
.sf-seitenkopf__lead {
  margin: var(--sf-space-5) 0 0;
  max-width: var(--sf-measure-lead);
  font-family: var(--sf-font-serif);
  font-size: var(--sf-text-lead);
  line-height: var(--sf-leading-snug);
  color: var(--sf-color-text-muted);
}
.sf-seitenkopf__hinweis-neu {           /* „Text folgt"-Markierung (7 Seiten, R-05) */
  margin-top: var(--sf-space-4);
  padding: var(--sf-space-2) var(--sf-space-4);
  border-left: var(--sf-border-accent) solid var(--sf-warning-700);
  background: var(--sf-warning-100);
  color: var(--sf-warning-700);
  font-size: var(--sf-text-small);
}

/* --- Kennzahlenband ---------------------------------------------------------- */
.sf-kennzahlenband {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 1px;
  background: var(--sf-color-border);
  border: 1px solid var(--sf-color-border);
}
.sf-kennzahl { background: var(--sf-color-surface); padding: clamp(1.125rem, 2.2cqi, 1.5rem); }
.sf-kennzahl__wert {
  margin: 0;
  font-family: var(--sf-font-serif);
  font-weight: var(--sf-weight-semibold);
  font-size: clamp(1.625rem, 3cqi, 2.125rem);
  line-height: 1;
  color: var(--sf-color-heading);
}
.sf-kennzahl__label {
  margin: var(--sf-space-2) 0 0;
  font-family: var(--sf-font-sans);
  font-size: var(--sf-text-small);
  color: var(--sf-color-text-muted);
}
.sf-kennzahl__quelle {
  margin: var(--sf-space-1) 0 0;
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-meta);
  color: var(--sf-color-text-subtle);
}

/* --- Kartenraster ------------------------------------------------------------ */
.sf-kartenraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 1px;
  background: var(--sf-color-border);
  border: 1px solid var(--sf-color-border);
}
.sf-karte {
  display: flex;
  flex-direction: column;
  gap: var(--sf-space-2);
  padding: clamp(1.25rem, 2.4cqi, 1.75rem);
  background: var(--sf-color-surface);
  text-decoration: none;
  transition: background var(--sf-duration-base) var(--sf-ease);
}
a.sf-karte:hover, a.sf-karte:focus-visible { background: var(--sf-color-page); }
.sf-karte__titel {
  font-family: var(--sf-font-serif);
  font-weight: var(--sf-weight-semibold);
  font-size: 1.1875rem;
  line-height: 1.28;
  color: var(--sf-color-heading);
}
.sf-karte__text { font-size: var(--sf-text-small); line-height: 1.65; color: var(--sf-color-text-muted); }
.sf-karte__meta {
  margin-top: var(--sf-space-1);
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-meta);
  color: var(--sf-color-text-subtle);
}

/* --- Faktentabelle ----------------------------------------------------------- */
.sf-faktentabelle { border: 1px solid var(--sf-color-border); background: var(--sf-color-surface); }
.sf-faktentabelle__zeile {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 2fr;
  gap: var(--sf-space-1) var(--sf-space-5);
  padding: var(--sf-space-3) clamp(1rem, 2cqi, 1.375rem);
}
.sf-faktentabelle__zeile + .sf-faktentabelle__zeile { border-top: 1px solid var(--sf-color-rule); }
.sf-faktentabelle__schluessel {
  font-family: var(--sf-font-sans);
  font-weight: var(--sf-weight-semibold);
  font-size: var(--sf-text-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sf-color-text-subtle);
  padding-top: 2px;
}
.sf-faktentabelle__wert { font-size: var(--sf-text-ui); line-height: 1.6; color: var(--sf-color-text); }

/* --- Hinweis (eine Komponente, drei Varianten) ------------------------------- */
.sf-hinweis {
  border-left: var(--sf-border-accent) solid var(--sf-color-border-strong);
  background: var(--sf-color-surface-sunken);
  padding: clamp(1.125rem, 2.2cqi, 1.5rem);
}
.sf-hinweis__label {
  margin: 0 0 var(--sf-space-2);
  font-family: var(--sf-font-sans);
  font-weight: var(--sf-weight-semibold);
  font-size: var(--sf-text-micro);
  letter-spacing: var(--sf-tracking-eyebrow);
  text-transform: uppercase;
}
.sf-hinweis__text { margin: 0; max-width: var(--sf-measure-prose); font-size: var(--sf-text-small); line-height: 1.7; color: var(--sf-color-text-muted); }
/* Variante: Information (Tinte) */
.sf-hinweis--info { border-left-color: var(--sf-ink-600); background: var(--sf-ink-050); }
.sf-hinweis--info .sf-hinweis__label { color: var(--sf-ink-600); }
/* Variante: Achtung (Warnung) */
.sf-hinweis--achtung { border-left-color: var(--sf-warning-700); background: var(--sf-warning-100); }
.sf-hinweis--achtung .sf-hinweis__label { color: var(--sf-warning-700); }
/* Variante: Bestätigung (Erfolg) */
.sf-hinweis--bestaetigung { border-left-color: var(--sf-success-700); background: var(--sf-success-100); }
.sf-hinweis--bestaetigung .sf-hinweis__label { color: var(--sf-success-700); }

/* --- Handlungsband auf Tinte (CTA) ------------------------------------------- */
.sf-handlungsband {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: clamp(1.125rem, 2.5cqi, 2rem);
  align-items: center;
  padding: clamp(1.5rem, 3cqi, 2.5rem);
  background: var(--sf-color-surface-inverse);
}
.sf-handlungsband__text { grid-column: span 2; }
/* auto-fit + minmax(min(230px,100%),…) kann bei 3 Grid-Kindern (Text + Button +
   zusätzlichem Link) inkonsistent 2 statt 1 Spalte bilden und den dritten Eintrag
   in eine schmale Restspalte quetschen. Unter 600px daher explizit auf eine
   Spalte erzwingen statt sich auf die auto-fit-Heuristik zu verlassen. */
@media (max-width: 37.5rem) {
  .sf-handlungsband { grid-template-columns: 1fr; }
  .sf-handlungsband > * { grid-column: 1; }
}
.sf-handlungsband__titel {
  margin: 0 0 var(--sf-space-2);
  font-family: var(--sf-font-serif);
  font-weight: var(--sf-weight-semibold);
  font-size: clamp(1.1875rem, 2cqi, 1.4375rem);
  line-height: 1.28;
  color: var(--sf-color-text-on-inverse);
}
.sf-handlungsband__lead { margin: 0; font-size: var(--sf-text-small); line-height: 1.7; color: var(--sf-color-text-on-inverse-muted); }
/* Textlinks auf Tinte: Signalrot hätte nur 1,8:1 Kontrast → Inverse-Farben (≥ 7:1). */
.sf-handlungsband a:not(.wp-element-button) { color: var(--sf-color-text-on-inverse); text-decoration: underline; }
.sf-handlungsband a:not(.wp-element-button):hover { color: var(--sf-color-eyebrow-inverse); }
.sf-handlungsband a:not(.wp-element-button):focus-visible { outline: var(--sf-focus-width) solid var(--sf-color-text-on-inverse); outline-offset: var(--sf-focus-offset); }

/* --- Brotkrumen -------------------------------------------------------------- */
.sf-brotkrumen { font-family: var(--sf-font-mono); font-size: var(--sf-text-meta); color: var(--sf-color-text-subtle); }
.sf-brotkrumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sf-space-2); }
.sf-brotkrumen li { display: flex; gap: var(--sf-space-2); }
.sf-brotkrumen li + li::before { content: "›"; color: var(--sf-color-border-strong); }
.sf-brotkrumen a { color: var(--sf-color-text-subtle); text-decoration: none; }
.sf-brotkrumen a:hover { color: var(--sf-color-link); text-decoration: underline; }
.sf-brotkrumen [aria-current="page"] { color: var(--sf-color-text); }

/* --- Prüfdatum --------------------------------------------------------------- */
.sf-pruefdatum {
  display: inline-flex;
  align-items: center;
  gap: var(--sf-space-2);
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-meta);
  letter-spacing: var(--sf-tracking-mono);
  color: var(--sf-color-text-subtle);
}
.sf-pruefdatum::before { content: "✓"; color: var(--sf-success-700); }

/* --- Zeilenliste ------------------------------------------------------------- */
.sf-zeilenliste { border-top: 1px solid var(--sf-color-rule); }
.sf-zeilenliste__zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sf-space-1);
  padding: var(--sf-space-4) 0;
  border-bottom: 1px solid var(--sf-color-rule);
}
.sf-zeilenliste__titel { margin: 0; font-family: var(--sf-font-serif); font-weight: var(--sf-weight-semibold); font-size: var(--sf-text-h4); color: var(--sf-color-heading); }
.sf-zeilenliste__text { margin: 0; font-size: var(--sf-text-small); line-height: 1.65; color: var(--sf-color-text-muted); }

/* --- Schrittfolge ------------------------------------------------------------ */
.sf-schrittfolge { display: grid; gap: var(--sf-space-5); counter-reset: sf-schritt; }
.sf-schritt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sf-space-4);
  align-items: start;
}
.sf-schritt::before {
  counter-increment: sf-schritt;
  content: counter(sf-schritt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border: 1px solid var(--sf-color-action);
  border-radius: var(--sf-radius-sm);
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-ui);
  color: var(--sf-color-action);
}
.sf-schritt__titel { margin: 0 0 var(--sf-space-1); font-family: var(--sf-font-serif); font-weight: var(--sf-weight-semibold); font-size: var(--sf-text-h4); color: var(--sf-color-heading); }
.sf-schritt__text { margin: 0; font-size: var(--sf-text-small); line-height: 1.65; color: var(--sf-color-text-muted); }

/* --- Dokumentenliste --------------------------------------------------------- */
.sf-dokumentenliste { border: 1px solid var(--sf-color-border); background: var(--sf-color-surface); }
.sf-dokument {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sf-space-2) var(--sf-space-5);
  align-items: baseline;
  justify-content: space-between;
  padding: var(--sf-space-4) clamp(1rem, 2cqi, 1.375rem);
}
.sf-dokument + .sf-dokument { border-top: 1px solid var(--sf-color-rule); }
.sf-dokument__titel { font-family: var(--sf-font-serif); font-size: var(--sf-text-ui); color: var(--sf-color-heading); text-decoration: none; }
.sf-dokument__titel:hover { color: var(--sf-color-link-hover); text-decoration: underline; }
.sf-dokument__meta { font-family: var(--sf-font-mono); font-size: var(--sf-text-meta); color: var(--sf-color-text-subtle); }

/* --- Sprungmarken-Leiste (sticky In-Page-Nav) -------------------------------- */
.sf-sprungmarken {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sf-space-4);
  padding: var(--sf-space-3) 0;
  background: color-mix(in srgb, var(--sf-color-page) 92%, transparent);
  border-bottom: 1px solid var(--sf-color-rule);
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-meta);
}
.sf-sprungmarken a { color: var(--sf-color-text-subtle); text-decoration: none; }
.sf-sprungmarken a:hover, .sf-sprungmarken a[aria-current="true"] { color: var(--sf-color-link); }

/* --- Bildplatzhalter (definierter Fallback, kein leeres Grau) ----------------- */
.sf-bildplatzhalter {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background: var(--sf-color-surface-sunken);
  border: 1px solid var(--sf-color-border);
  color: var(--sf-color-text-subtle);
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-meta);
  text-align: center;
}

/* --- Akkordeon (nativ <details>/<summary>) ----------------------------------- */
.sf-akkordeon { border-top: 1px solid var(--sf-color-rule); }
.sf-akkordeon__item { border-bottom: 1px solid var(--sf-color-rule); }
.sf-akkordeon__item > summary {
  display: flex;
  justify-content: space-between;
  gap: var(--sf-space-4);
  padding: var(--sf-space-4) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--sf-font-serif);
  font-weight: var(--sf-weight-semibold);
  font-size: var(--sf-text-h4);
  color: var(--sf-color-heading);
}
.sf-akkordeon__item > summary::-webkit-details-marker { display: none; }
.sf-akkordeon__item > summary::after { content: "+"; color: var(--sf-color-action); font-family: var(--sf-font-mono); }
.sf-akkordeon__item[open] > summary::after { content: "–"; }
.sf-akkordeon__inhalt { padding: 0 0 var(--sf-space-4); max-width: var(--sf-measure-prose); font-size: var(--sf-text-small); line-height: 1.7; color: var(--sf-color-text-muted); }

/* --- Filterband / Auswahlliste ----------------------------------------------- */
.sf-filterband {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sf-space-2);
  padding: var(--sf-space-3) 0;
  border-block: 1px solid var(--sf-color-rule);
  font-family: var(--sf-font-sans);
  font-size: var(--sf-text-small);
}
.sf-filterband__option {
  padding: var(--sf-space-2) var(--sf-space-4);
  border: 1px solid var(--sf-color-border);
  border-radius: var(--sf-radius-sm);
  color: var(--sf-color-text-muted);
  text-decoration: none;
  min-height: var(--sf-target-min);
  display: inline-flex;
  align-items: center;
}
.sf-filterband__option[aria-current="true"],
.sf-filterband__option[aria-current="page"] { background: var(--sf-color-action); border-color: var(--sf-color-action); color: var(--sf-color-action-text); }

/* --- Formular-Rahmen (PBTS-Einbettung) --------------------------------------- */
.sf-formular { border: 1px solid var(--sf-color-border); background: var(--sf-color-surface); padding: clamp(1.25rem, 3cqi, 2rem); }
.sf-formular__hinweis { margin: 0 0 var(--sf-space-4); font-size: var(--sf-text-small); color: var(--sf-color-text-subtle); }

/* --- Beitragsliste (Query-Loop) ---------------------------------------------- */
.sf-beitragsliste .wp-block-post-title { font-family: var(--sf-font-serif); }
.sf-beitragsliste .wp-block-post-date { font-family: var(--sf-font-mono); font-size: var(--sf-text-meta); color: var(--sf-color-text-subtle); }

/* ==========================================================================
   Plugin-Integration: PBTS Ticket System (Formulare) an Designsystem
   Scoped unter .sf-formular (die Formular-Komponente umschließt [pbts_form]).
   Bildet die alten CI-Hardcodes des Plugins auf --sf-*-Tokens ab. Keine
   Änderung an Plugin-Dateien (Kap. 13). !important nur dort, wo das Plugin
   selbst !important nutzt.
   ========================================================================== */
.sf-formular .pbts-form-container {
  background: var(--sf-color-surface);
  border-color: var(--sf-color-border);
  color: var(--sf-color-text);
  box-shadow: var(--sf-shadow-panel);
  font-family: var(--sf-font-sans);
}
.sf-formular .pbts-form__label { color: var(--sf-color-text); font-family: var(--sf-font-sans); }
.sf-formular .pbts-form__label span[aria-hidden] { color: var(--sf-color-action); }
.sf-formular .pbts-form__input {
  border-color: var(--sf-color-border);
  color: var(--sf-color-text);
  border-radius: var(--sf-radius-none);
  font-family: var(--sf-font-sans);
}
.sf-formular .pbts-form__input::placeholder { color: var(--sf-color-text-subtle); }
.sf-formular .pbts-form__input:hover { border-color: var(--sf-color-action); }
.sf-formular .pbts-form__input:focus { border-color: var(--sf-color-action); box-shadow: 0 0 0 3px var(--sf-signal-200); }
.sf-formular .pbts-form__input:focus-visible { outline-color: var(--sf-color-focus); }
.sf-formular .pbts-form__hint,
.sf-formular .pbts-legal-text { color: var(--sf-color-text-muted); }

/* Schrittanzeige */
.sf-formular .pbts-step-node__circle { background: var(--sf-color-surface-sunken); border-color: var(--sf-color-border); color: var(--sf-color-text-subtle); }
.sf-formular .pbts-step-node--active .pbts-step-node__circle { background: var(--sf-color-action); border-color: var(--sf-color-action); color: var(--sf-white); box-shadow: 0 0 0 3px var(--sf-signal-200); }
.sf-formular .pbts-step-node--done .pbts-step-node__circle { background: var(--sf-color-surface-inverse); border-color: var(--sf-color-surface-inverse); color: var(--sf-white); }
.sf-formular .pbts-step-node--done:not(:last-child)::after { background: var(--sf-color-action); }
.sf-formular .pbts-step-node__label { color: var(--sf-color-text-subtle); }
.sf-formular .pbts-step-node--active .pbts-step-node__label { color: var(--sf-color-action); }
.sf-formular .pbts-step-node--done .pbts-step-node__label,
.sf-formular .pbts-steps-indicator--single .pbts-step-node { color: var(--sf-color-heading); }
.sf-formular .pbts-steps-indicator--single { border-bottom-color: var(--sf-color-border); }

/* Buttons (Plugin nutzt !important) */
.sf-formular .pbts-btn-next,
.sf-formular .pbts-btn-submit { background-color: var(--sf-color-action) !important; border-color: var(--sf-color-action) !important; color: var(--sf-color-action-text) !important; font-family: var(--sf-font-sans); }
.sf-formular .pbts-btn-next:hover,
.sf-formular .pbts-btn-submit:hover { background-color: var(--sf-color-action-hover) !important; }
.sf-formular .pbts-btn-prev { background-color: var(--sf-color-surface-inverse) !important; border-color: var(--sf-color-surface-inverse) !important; color: var(--sf-color-text-on-inverse) !important; }
.sf-formular .pbts-btn-next:focus-visible,
.sf-formular .pbts-btn-submit:focus-visible,
.sf-formular .pbts-btn-prev:focus-visible { outline-color: var(--sf-color-focus) !important; }
.sf-formular .pbts-form-actions { border-top-color: var(--sf-color-border); }

/* Captcha */
.sf-formular .pbts-captcha-wrapper { background: var(--sf-color-surface-sunken); border-color: var(--sf-color-border); }
.sf-formular .pbts-captcha-question { color: var(--sf-color-heading); font-family: var(--sf-font-mono); }
.sf-formular .pbts-captcha-refresh { color: var(--sf-color-action) !important; }
.sf-formular .pbts-captcha-refresh:focus-visible { outline-color: var(--sf-color-focus); }

/* Meldungen / Nachrichten */
.sf-formular .pbts-copy-email-wrapper { background: var(--sf-color-surface-sunken); border-left-color: var(--sf-color-action); }
.sf-formular .pbts-success-msg { background: var(--sf-success-100); border-left-color: var(--sf-success-700); }
.sf-formular .pbts-ticket-number,
.sf-formular .pbts-error-msg { color: var(--sf-color-action); font-family: var(--sf-font-mono); }

/* Dropzone (Plugin nutzt Blautöne — auf Marke umstellen) */
.sf-formular .pbts-dropzone { border-color: var(--sf-color-border-strong); background: var(--sf-color-surface-sunken); border-radius: var(--sf-radius-none); }
.sf-formular .pbts-dropzone:hover,
.sf-formular .pbts-dropzone:focus-visible,
.sf-formular .pbts-dropzone--dragover { border-color: var(--sf-color-action); background: var(--sf-signal-100); }
.sf-formular .pbts-dropzone__icon,
.sf-formular .pbts-dropzone__text { color: var(--sf-color-action); }
.sf-formular .pbts-dropzone__hint { color: var(--sf-color-text-subtle); }
.sf-formular .pbts-dropzone--selected { border-color: var(--sf-color-surface-inverse); background: var(--sf-success-100); }
.sf-formular .pbts-dropzone--selected .pbts-dropzone__icon,
.sf-formular .pbts-dropzone--selected .pbts-dropzone__text { color: var(--sf-color-heading); }

/* Signatur + Toast */
.sf-formular .pbts-signature-field { border-color: var(--sf-color-border); border-radius: var(--sf-radius-none); }
.sf-formular .pbts-sig-canvas { background: var(--sf-color-surface-sunken); }
.sf-formular .pbts-toast__header { background: var(--sf-color-action); }
.sf-formular .pbts-toast__box { border-color: var(--sf-color-border); box-shadow: var(--sf-shadow-drawer); }

/* ==========================================================================
   Plugin-Integration: WP7 Patronus Mega-Menü an Designsystem
   Überschreibt die 2 Alt-CI-Hardcodes und vereinheitlicht Typografie/Farben
   über Tokens. Selektoren scoped auf .wp7pmm-mega-menu. Keine Plugin-Änderung.
   ========================================================================== */
.wp7pmm-mega-menu { font-family: var(--sf-font-sans); }
.wp7pmm-desktop-trigger,
.wp7pmm-sidebar-trigger { font-family: var(--sf-font-sans); font-weight: var(--sf-weight-medium); color: var(--sf-color-text); }
.wp7pmm-desktop-trigger:hover,
.wp7pmm-sidebar-trigger:hover,
.wp7pmm-sidebar-trigger.is-active { color: var(--sf-color-action); }
.wp7pmm-desktop-trigger:focus-visible,
.wp7pmm-sidebar-trigger:focus-visible,
.wp7pmm-mobile-toggle:focus-visible,
.wp7pmm-close:focus-visible,
.wp7pmm-back:focus-visible { outline: var(--sf-focus-width) solid var(--sf-color-focus); outline-offset: var(--sf-focus-offset); }
.wp7pmm-panel,
.wp7pmm-overlay-inner,
.wp7pmm-sidebar { background: var(--sf-color-surface); border-color: var(--sf-color-border); }
.wp7pmm-overlay { background: color-mix(in srgb, var(--sf-color-surface-inverse) 45%, transparent); }
.wp7pmm-column-title { font-family: var(--sf-font-sans); font-weight: var(--sf-weight-semibold); font-size: var(--sf-text-micro); letter-spacing: var(--sf-tracking-eyebrow); text-transform: uppercase; color: var(--sf-color-eyebrow); }
.wp7pmm-link-list a { color: var(--sf-color-text-muted); font-family: var(--sf-font-sans); }
.wp7pmm-link-list a:hover { color: var(--sf-color-action); }
.wp7pmm-home-card { background: var(--sf-color-surface-inverse); color: var(--sf-color-text-on-inverse); border-radius: var(--sf-radius-none); }
.wp7pmm-home-card-icon { color: var(--sf-color-eyebrow-inverse); }
.wp7pmm-mobile-toggle,
.wp7pmm-close,
.wp7pmm-back { color: var(--sf-color-heading); }
.wp7pmm-sidebar-trigger.is-active { background: var(--sf-color-surface-sunken); border-left: var(--sf-border-accent) solid var(--sf-color-action); }

/* ==========================================================================
   Plugin-Integration: HQ Sync (Kennzahlen/Charts) an Designsystem
   ALLE Selektoren durch [class*="hq-sync-"] eingegrenzt, damit ausschließlich
   HQ-Sync-Ausgaben betroffen sind (nie Theme-Komponenten). Token-basiert.
   Detailliertes Chart-Theming folgt bei Platzierung der hq_*-Shortcodes.
   ========================================================================== */
[class*="hq-sync-"] { font-family: var(--sf-font-sans); }
[class*="hq-sync-hinweis"] { border-left: var(--sf-border-accent) solid var(--sf-ink-600); background: var(--sf-ink-050); color: var(--sf-color-text-muted); }
[class*="hq-sync-"][class*="__card"],
[class*="hq-sync-"][class*="__kachel"],
[class*="hq-sync-"][class*="__box"] { border-color: var(--sf-color-border) !important; }
[class*="hq-sync-"][class*="__button"],
[class*="hq-sync-"][class*="__cta"],
[class*="hq-sync-"][class*="__top-btn"],
[class*="hq-sync-"][class*="__ansehen-btn"],
[class*="hq-sync-"][class*="__kontakt-btn"] {
  background-color: var(--sf-color-action) !important; border-color: var(--sf-color-action) !important; color: var(--sf-color-action-text) !important; border-radius: var(--sf-radius-sm) !important;
}
[class*="hq-sync-"][class*="__zahl"],
[class*="hq-sync-"][class*="__kpi"],
[class*="hq-sync-"][class*="__kennzahl-zahl"],
[class*="hq-sync-"][class*="__prozent"] { color: var(--sf-color-heading); font-family: var(--sf-font-serif); }
[class*="hq-sync-"][class*="__label"],
[class*="hq-sync-"][class*="__kennzahl-label"] { color: var(--sf-color-text-subtle); font-family: var(--sf-font-mono); font-size: var(--sf-text-meta); }

/* ==========================================================================
   Inverse Abschnitte — helle Schrift auf dunklem Grund
   Greift auf die dunklen Hintergrund-Utility-Klassen (Fußbereich = Tinte,
   Meta-Leiste = Tinte tief) und erzwingt lesbaren Kontrast (WCAG AA).
   Buttons (.wp-element-button) sind ausgenommen — sie tragen eigene Farben.
   ========================================================================== */
.has-tinte-background-color,
.has-tinte-tief-background-color { color: var(--sf-color-text-on-inverse); }
.has-tinte-background-color :where(h1, h2, h3, h4),
.has-tinte-tief-background-color :where(h1, h2, h3, h4),
.has-tinte-background-color .wp-block-site-title a,
.has-tinte-tief-background-color .wp-block-site-title a { color: var(--sf-color-text-on-inverse); }
.has-tinte-background-color a:not(.wp-element-button),
.has-tinte-tief-background-color a:not(.wp-element-button) { color: var(--sf-color-text-on-inverse-muted); }
.has-tinte-background-color a:not(.wp-element-button):hover,
.has-tinte-tief-background-color a:not(.wp-element-button):hover { color: var(--sf-color-text-on-inverse); text-decoration: underline; }

/* ==========================================================================
   Newsticker (Customizer-gepflegt) — laufendes Band, reduced-motion-fest
   ========================================================================== */
.sf-newsticker {
  display: flex;
  align-items: center;
  gap: var(--sf-space-3);
  background: var(--sf-signal-flaeche);
  border-bottom: 1px solid var(--sf-color-rule);
  padding: var(--sf-space-2) 0 var(--sf-space-2) var(--sf-gutter);
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-meta);
  overflow: hidden;
}
.sf-newsticker__label {
  flex: none;
  font-weight: var(--sf-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--sf-tracking-eyebrow);
  color: var(--sf-color-eyebrow);
}
.sf-newsticker__viewport { flex: 1 1 auto; overflow: hidden; }
.sf-newsticker__track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: sf-newsticker-scroll 60s linear infinite;
}
/* 1 echter Durchlauf + 3 Kopien (aria-hidden/inert). Jeder Durchlauf ist gleich breit
   (Abstand als padding statt gap) → translateX(-25%) ist exakt ein Durchlauf, nahtlos. */
.sf-newsticker__set,
.sf-newsticker__clone {
  display: inline-flex;
  align-items: center;
  gap: var(--sf-space-4);
  padding-right: var(--sf-space-4);
}
.sf-newsticker:hover .sf-newsticker__track,
.sf-newsticker:focus-within .sf-newsticker__track { animation-play-state: paused; }
.sf-newsticker__item { color: var(--sf-color-text-muted); }
.sf-newsticker__sep { color: var(--sf-color-eyebrow); }
@keyframes sf-newsticker-scroll { from { transform: translateX(0); } to { transform: translateX(-25%); } }
@media (prefers-reduced-motion: reduce) {
  .sf-newsticker__track { animation: none; white-space: normal; }
  .sf-newsticker__set { flex-wrap: wrap; }
  .sf-newsticker__clone { display: none; }
  .sf-newsticker { overflow: auto; }
}

/* ==========================================================================
   Social- & Teilen-Panel — fixierter Trigger + Overlay
   DSGVO: reine Links + Inline-SVG (keine Einbettungen/Tracker).
   ========================================================================== */
.sf-share-trigger {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: var(--sf-space-2) var(--sf-space-1);
  min-width: var(--sf-target-min);
  min-height: var(--sf-target-min);
  border: none;
  border-radius: var(--sf-radius-sm) 0 0 var(--sf-radius-sm);
  background: var(--sf-color-action);
  color: var(--sf-color-action-text);
  cursor: pointer;
  box-shadow: var(--sf-shadow-panel);
}
.sf-share-trigger:hover { background: var(--sf-color-action-hover); }
.sf-share-trigger:focus-visible { outline: var(--sf-focus-width) solid var(--sf-color-focus); outline-offset: var(--sf-focus-offset); }
.sf-share-trigger__icon { width: 16px; height: 16px; display: inline-flex; }
.sf-share-trigger__icon svg { width: 100%; height: 100%; }
.sf-share-trigger__text { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1; }

.sf-share-panel[hidden] { display: none; }
.sf-share-panel { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: var(--sf-space-4); }
.sf-share-panel__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--sf-color-surface-inverse) 45%, transparent); }
.sf-share-panel__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: var(--sf-color-surface);
  border: 1px solid var(--sf-color-border);
  border-radius: var(--sf-radius-sm);
  box-shadow: var(--sf-shadow-drawer);
  overflow: hidden;
}
.sf-share-panel__head { display: flex; align-items: center; justify-content: space-between; padding: var(--sf-space-3) var(--sf-space-4); background: var(--sf-color-surface-inverse); }
.sf-share-panel__title { margin: 0; color: var(--sf-color-text-on-inverse); font-size: var(--sf-text-h4); }
.sf-share-panel__close { background: none; border: none; color: var(--sf-color-text-on-inverse); font-size: 1.6rem; line-height: 1; cursor: pointer; min-width: var(--sf-target-min); min-height: var(--sf-target-min); }
.sf-share-panel__close:focus-visible { outline: 2px solid var(--sf-white); outline-offset: 2px; }
.sf-share__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--sf-color-rule); border-bottom: 1px solid var(--sf-color-rule); }
.sf-share__link { display: flex; flex-direction: column; align-items: center; gap: var(--sf-space-2); padding: var(--sf-space-4) var(--sf-space-2); background: var(--sf-color-surface); color: var(--sf-color-text-muted); text-decoration: none; }
.sf-share__link:hover { background: var(--sf-color-page); color: var(--sf-color-action); }
/* Kacheln liegen im Grid ohne Abstand aneinander (nur 1px Trennlinie via gap-Hintergrund)
   UND das Panel selbst hat wegen der abgerundeten Ecken "overflow: hidden"
   (.sf-share-panel__dialog). Der globale, nach außen wachsende Fokus-Ring
   (outline-offset 2px + 2px Breite = 4px nach außen) würde daher bei
   Randkacheln vom Dialogrand abgeschnitten (z. B. WhatsApp oben links) -
   z-index allein löst nur die Überdeckung durch Nachbarkacheln, nicht das
   Abschneiden durch den Dialogrand. Ring stattdessen nach innen zeichnen,
   dann bleibt er in jeder Position vollständig sichtbar.
   Bewusst ":focus" statt nur ":focus-visible" - ein Mausklick auf diese
   Kacheln matcht zwar ":focus", aber nicht ":focus-visible"; ohne eigene
   Regel faellt der Browser dann auf seinen nach außen wachsenden
   Default-Ring zurueck, der wieder vom Dialogrand abgeschnitten wuerde. */
.sf-share__link:focus { position: relative; z-index: 1; outline-offset: -3px; }
.sf-share__icon { width: 26px; height: 26px; color: var(--sf-color-icon); display: inline-flex; }
.sf-share__link:hover .sf-share__icon { color: var(--sf-color-action); }
.sf-share__icon svg { width: 100%; height: 100%; }
.sf-share__name { font-family: var(--sf-font-sans); font-size: var(--sf-text-small); }
.sf-share__page { padding: var(--sf-space-4); }
.sf-share__page-label { margin: 0 0 var(--sf-space-2); font-family: var(--sf-font-sans); font-weight: var(--sf-weight-semibold); font-size: var(--sf-text-small); color: var(--sf-color-heading); }
.sf-share__page-actions { display: flex; gap: var(--sf-space-2); flex-wrap: wrap; }
.sf-share__btn { padding: var(--sf-space-2) var(--sf-space-4); min-height: var(--sf-target-min); border: 1px solid var(--sf-color-border); border-radius: var(--sf-radius-sm); background: var(--sf-color-surface); color: var(--sf-color-text); font-family: var(--sf-font-sans); font-size: var(--sf-text-small); cursor: pointer; }
.sf-share__btn:hover { border-color: var(--sf-color-action); color: var(--sf-color-action); }
.sf-share__btn:focus-visible { outline: var(--sf-focus-width) solid var(--sf-color-focus); outline-offset: var(--sf-focus-offset); }

/* --- Header-Brand: Logo + Titel ------------------------------------------- */
.sf-brand { align-items: center; }
.sf-brand__logo img, .sf-brand .wp-block-site-logo img { display: block; height: 48px; width: auto; }
.sf-brand .wp-block-site-title { line-height: 1.1; }

/* --- Kopfbereich nahtlos: Meta-Leiste, Kopfzeile und Newsticker sollen als
   ein zusammenhaengender Block wirken, nicht durch den globalen Root-Block-
   Abstand (1,5rem) von WordPress Core auseinandergerissen werden. */
.wp-block-template-part + .wp-block-template-part { margin-top: 0; }

/* --- Fußbereich: Linklisten -------------------------------------------------
   Ersetzt zwei core/navigation-Blöcke. Deren Block-CSS (~21 KB inline auf jeder
   Seite) war für 7 statische Links unnötig; Optik und Abstände bleiben gleich. */
.sf-fusslinks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sf-space-6); }
.sf-fusslinks li { margin: 0; }
.sf-fusslinks a { color: inherit; text-decoration: none; }
.sf-fusslinks a:hover { color: var(--sf-color-text-on-inverse); text-decoration: underline; }
.sf-fusslinks a:focus-visible { outline: var(--sf-focus-width) solid var(--sf-color-text-on-inverse); outline-offset: var(--sf-focus-offset); }