/*
Theme Name: Silvesterlauf Saarbrücken – Twenty Twenty-Five Child
Description: Eventwebsite für den Sparverein-Saarland Silvesterlauf Saarbrücken. Full-Site-Editing-Child-Theme auf Basis von Twenty Twenty-Five: globaler Header/Footer, Core-Blocks, kleine Pattern-Bibliothek, Partner-CPT, News-/Ausgaben-System, CF7-Kontaktformular. Abhängigkeiten und Redaktionshinweise siehe README.md.
Template: twentytwentyfive
Version: 0.83.0
Text Domain: silvesterlauf
*/

/* Aufbau: Tokens · Basis · Layout (Wide-Rahmen, feste Header-Leiste) ·
   Header · Hero · Statusbadge · Buttons/CTA · Laufkarten · Faktenleiste ·
   Editorial · Partner · Inhaltsmodule · Ergebnistabelle ·
   Icons · News-Frontend (Brotkrumen/Filter/Beitragskarten) · Utilities ·
   Editor-Angleichung · responsive Stufen je Abschnitt.
   Viele Regeln tragen "!important", weil sie gezielt Core-Block-Styles
   (u. a. .wp-block-group.has-background, .is-layout-*, Root-Padding,
   Query-Loop-Spaltenbreiten) überschreiben – dort NICHT entfernen. */

/* ============================== Tokens ============================== */
/* Farben = Aliase auf die theme.json-Palette (einzige Quelle, kein
   wiederholter Hex). --sl-primary war früher --sl-navy und trug eine
   Doppelrolle; die dunkle Variante ist jetzt --sl-deep (nur Hero-Overlay
   und Hover). Statusfarben separat im Statusbadge-Abschnitt. */
:root{
  --sl-primary:var(--wp--preset--color--primary);
  --sl-deep:var(--wp--preset--color--deep);
  --sl-red:var(--wp--preset--color--red);
  --sl-lsg:var(--wp--preset--color--lsg);
  --sl-lsg-dark:var(--wp--preset--color--lsg-dark);
  --sl-ink:var(--wp--preset--color--ink);
  --sl-muted:var(--wp--preset--color--muted);
  --sl-line:var(--wp--preset--color--line);
  --sl-surface:var(--wp--preset--color--surface);
  --sl-base:var(--wp--preset--color--base);
  --sl-wide:1360px; --sl-radius:10px;
}

/* ============================== Basis ============================== */
body{font-size:16px;color:var(--sl-ink)}
a{transition:color .15s ease,background-color .15s ease,border-color .15s ease}
:where(a,button,input,textarea,select,summary):focus-visible{outline:3px solid var(--sl-ink);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

.sl-kicker{font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--sl-primary)}
.sl-section-title{font-size:clamp(2rem,3.2vw,2.55rem);line-height:1.06;letter-spacing:-.025em;margin-bottom:1.5rem}
/* Schriftgröße kommt als echtes fontSize-Attribut ("page-title", theme.json)
   direkt am Heading-Block (slv9_page_hero() in patterns.php) – im Editor über
   den normalen Typografie-Regler änderbar. line-height/letter-spacing bleiben
   hier als Design-System-Vorgabe. */
.sl-page-title{line-height:1;letter-spacing:-.035em}
.sl-lead{font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.55;max-width:760px}
.sl-small{font-size:.9rem;color:var(--sl-muted)}

/* ====================== Layout: Wide-Rahmen ====================== */
/* Einheitlicher Rahmen für Kopf-/Fußzeile und Abschnittsinhalt (§12).
   width mit "!important" gegen Cores constrained-Layout-Breite. */
.sl-header-inner,
.sl-section > .wp-block-group.alignwide,
.sl-footer-inner,
.sl-cta-band-inner,
.wp-block-post-content > .alignwide{
  width:min(calc(100% - 48px), var(--sl-wide))!important;
  max-width:var(--sl-wide)!important;
  box-sizing:border-box;
}
.sl-section > .wp-block-group.alignwide{margin-left:auto!important;margin-right:auto!important}
/* Direkte Kinder des Wide-Rahmens laufen voll aus (Cores Auto-Zentrierung aufheben). */
.sl-section > .wp-block-group.alignwide > :where(.wp-block-columns,.wp-block-group,.wp-block-table,.wp-block-query,.sl-route-placeholder){
  width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;
}
/* Nicht als wide/full markierte Kinder: linksbündig statt auf 900px zentriert
   (einheitlicher linker Rand auf Service-Seiten wie Teilnehmerinfos). */
.sl-section > .alignwide.is-layout-constrained > :not(.alignwide):not(.alignfull):not(.has-text-align-center){
  margin-left:0!important;margin-right:0!important;
}
/* Breite Editorial-/Rastermodule immer voll ausnutzen. */
.sl-editorial-grid,.sl-actions,.sl-partner-card-cols,.sl-factbar{
  width:100%!important;max-width:none!important;
}

/* Abschnitts-Rahmen und Vertikalrhythmus. */
.sl-section{padding-top:72px!important;padding-bottom:72px!important}
.sl-section--soft{background:var(--sl-surface)}

/* Embed-/Platzhalterflächen (RaceResult u. Ä.) brauchen volle Breite + Höhe (§26). */
.sl-route-placeholder{
  width:100%!important;max-width:none!important;min-height:520px!important;
  border:1px dashed #aab6c3;border-radius:12px;background:var(--sl-surface);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:24px!important;box-sizing:border-box;
}
.sl-embed-wide{width:100%!important;max-width:none!important}
.sl-embed-wide .sl-route-placeholder{min-height:640px!important}

/* Feste Kopfzeile (§14). Ersetzt eine frühere sticky-Variante; deren
   backdrop-filter wurde entfernt, weil es das mobile Overlay-Menü einsperrte. */
.sl-header{
  position:fixed;inset:0 0 auto 0;width:100%;z-index:1000;
  background:rgba(255,255,255,.97);border-bottom:1px solid var(--sl-line);
  box-shadow:0 1px 0 rgba(17,24,39,.06);
}
.wp-site-blocks{padding-top:78px}
body.admin-bar .sl-header{top:32px}
body.admin-bar .wp-site-blocks{padding-top:78px}
@media(max-width:782px){body.admin-bar .sl-header{top:46px}}

@media(max-width:900px){
  /* Root-Padding (Core-Feature aus TT5, 48px) auf Tablet reduzieren –
     muss auf "body" gesetzt werden, nicht ":root" (Core setzt es auch auf body). */
  body{--wp--style--root--padding-left:24px!important;--wp--style--root--padding-right:24px!important}
  .sl-header-inner,
  .sl-section > .wp-block-group.alignwide,
  .sl-footer-inner,
  .sl-cta-band-inner,
  .wp-block-post-content > .alignwide{
    width:100%!important;margin-left:0!important;margin-right:0!important;
  }
  .sl-section{padding-top:48px!important;padding-bottom:48px!important}
}
@media(max-width:620px){
  body{--wp--style--root--padding-left:16px!important;--wp--style--root--padding-right:16px!important}
  .sl-section{padding-top:40px!important;padding-bottom:40px!important}
  .wp-site-blocks{padding-top:66px;padding-bottom:84px} /* Platz für den fixierten Mobil-CTA */
  /* Seiten mit Hero: Hero beginnt mobil direkt unter der Kopfleiste (Kopfleiste
     69px + 2px Abstand; 19,2px steuert Cores Blockabstand über <main> bei). */
  body:has(.sl-hero,.sl-page-hero) .wp-site-blocks{padding-top:52px}
  .sl-route-placeholder,.sl-embed-wide .sl-route-placeholder{min-height:420px!important}
}

/* ============================== Header ============================== */
.sl-header-inner{max-width:var(--sl-wide);margin:0 auto;padding:14px 24px}
/* Logo = nativer Website-Logo-Block (Design → Website-Identität, Bild
   ersetzen; die Größe stellt die Redaktion direkt am Block ein – Header-
   Vorlage öffnen, Logo anklicken, rechte Seitenleiste → "Bildbreite").
   V0.41.0: keine feste Höhe mehr – die Darstellung folgt proportional der
   eingestellten Bildbreite. max-height ist nur eine Sicherheitsgrenze,
   damit die Kopfzeile nicht höher wird als ihr größtes anderes Element
   (Anmelde-Button 48px, mobil Hamburger-Icon 44px) – bis dahin ändert sich
   sonst nichts am Header. */
.sl-brand{flex:none;line-height:0}
.sl-header .sl-brand img{display:block;height:auto;width:auto;max-width:none;max-height:48px}
.sl-brand a:focus-visible{outline:2px solid var(--sl-primary);outline-offset:3px;border-radius:4px}
.sl-header .wp-block-navigation-item__content{font-size:.92rem;font-weight:750;color:var(--sl-primary)}
.sl-header .wp-block-navigation-item__content:hover{color:var(--sl-lsg-dark)}
/* Aktive Seite blau (Core-Klasse current-menu-item; Elternpunkt "Infos" bleibt neutral). */
.sl-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content{color:var(--sl-lsg-dark)}
.sl-header .wp-block-shortcode{margin:0}

/* Eigener Nav-Breakpoint: Branding + 5 Links + CTA passen unter ~1200px
   nicht mehr in eine Zeile, daher schon hier auf das Hamburger-Overlay. */
@media(max-width:1200px){
  .sl-header-inner{padding:12px 18px;justify-content:flex-end!important}
  .sl-brand{margin-right:auto!important}
  .sl-header-inner>p:has(.sl-header-cta){order:2;margin:0}
  .sl-header .wp-block-navigation{order:3}
  .sl-header .wp-block-navigation .wp-block-navigation__responsive-container-open{display:flex!important}
  /* Hamburger: 44×44-Touchziel, dritter Balken per box-shadow ergänzt. */
  .sl-header .wp-block-navigation__responsive-container-open{
    width:44px;height:44px;padding:0;box-sizing:border-box;
    border:2px solid var(--sl-primary);border-radius:8px;
    display:flex;align-items:center;justify-content:center;color:var(--sl-primary);
  }
  .sl-header .wp-block-navigation__responsive-container-open svg{display:none}
  .sl-header .wp-block-navigation__responsive-container-open:before{content:"";display:block;width:20px;height:2px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}

  .sl-header .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open){display:none!important}

  /* Hintergrund-/Textfarbe kommen als echte Block-Attribute
     (overlayBackgroundColor/-TextColor, siehe parts/header.html) – im
     Design-Editor am Navigation-Block änderbar, ohne Code. Core setzt
     selbst ".responsive-container{background-color:inherit!important;
     color:inherit!important}", hier für den offenen Zustand zurückgesetzt.
     Layout darunter: linksbündige Liste statt zentriert (Grundlage für die
     Pillen-Optik unten), keine feste Seiten-Polsterung mehr (die Zeilen
     bekommen ihr eigenes Innen-Polster, damit die aktive Pille bündig bis
     zum linken Rand reichen kann). */
  .sl-header .wp-block-navigation .wp-block-navigation__responsive-container.has-base-background-color{
    background-color:var(--sl-base)!important;
  }
  .sl-header .wp-block-navigation .wp-block-navigation__responsive-container.has-primary-color{
    color:var(--sl-primary)!important;
  }

  /* V0.58.0, Feedback Dirk: der freie Bereich oben war mit 88px (Container)
     + core-eigenen 56px (".…-content", separat, nicht von uns gesetzt)
     zusammen ~144px – deutlich mehr als der 24px hohe Schließen-Button
     braucht. Beide Stellen jetzt knapp bemessen (16px + 40px), Button
     bleibt oben links Luft, Inhalt beginnt kurz unter dem Button statt in
     großem Abstand darunter. */
  .sl-header .wp-block-navigation__responsive-container.is-menu-open{
    padding:16px 0 32px!important;
  }
  .sl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{align-items:stretch!important;justify-content:flex-start!important;padding-top:40px!important}
  /* Die Links nutzen "justifyContent":"right" (Desktop-Ausrichtung, siehe
     header.html) – im Overlay wirkt das als "items-justified-right" auf
     dem inneren <ul> weiter und zieht die (sonst nur textbreiten) Zeilen
     nach rechts zusammen. Zeilen deshalb hier auf volle Breite zwingen,
     damit "flex-start" oben überhaupt greift und die Pille wirklich bis
     zum linken Rand reicht statt nur bis zum rechtsbündigen Text.
     V0.58.0: außerdem eigener "gap" von core (19px zwischen den Zeilen)
     auf 0 – Feedback Dirk: Abstände generell zu großzügig, bei der aktiven
     Pille wurde der (auf Blau unsichtbare, auf Weiß aber sichtbare) Lücke
     zur Trennlinie dadurch überhaupt erst sichtbar. */
  .sl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{justify-content:flex-start!important;align-items:stretch!important;gap:0!important}
  .sl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{text-align:left!important;width:100%!important;align-items:stretch!important}
  .sl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{width:100%!important;box-sizing:border-box!important}

  /* Trennlinien zwischen den Einträgen (zartes Blau statt hartem Weiß –
     halbtransparentes Weiß über dem dunkelblauen Overlay-Hintergrund wirkt
     als heller Blauton, kein harter Kontrast), und volle Zeile als
     Klickfläche statt nur des Textes. V0.58.0: Innenabstand 16px→12px
     (kompakter, Feedback Dirk).
     V0.59.0, Feedback Dirk: Linien liefen bis zum rechten Rand durch,
     sollten aber wie die aktive Pille vor der Rundung enden. Linie deshalb
     hierher (statt auf das <li>) auf denselben "…__content"-Baustein
     verschoben, der auch die Pille trägt, mit demselben margin-right:28px –
     Linie und Pille enden jetzt an derselben Stelle. */
  .sl-header .wp-block-navigation__responsive-container .wp-block-navigation-item__content{
    display:block!important;padding:12px 28px!important;
    margin-right:28px!important;border-bottom:1px solid var(--sl-line);
  }
  .sl-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
    padding-left:44px!important;
  }

  /* V0.58.0, Feedback Dirk: Der Standard-Fokusring des Browsers
     ("mal weiß, mal grau") kommt daher, dass viele Browser die
     Fokus-Umrandung standardmäßig aus der Textfarbe ableiten – auf dem
     weißen Pillen-Hintergrund (blaue Schrift) sieht das anders aus als auf
     dem dunkelblauen Zeilen-Hintergrund (weiße Schrift), deshalb die
     Inkonsistenz. V0.59.0, Feedback Dirk: der kastige Rahmen wirkte
     "dauerhaft" – ist keiner, WordPress setzt beim Öffnen automatisch den
     Tastatur-Fokus auf den ersten navigierbaren Link (welcher das ist,
     wechselt je nach aktueller Seite), das ist gewollte Barrierefreiheit
     und kein Bug. V0.60.0, Feedback Dirk: der weiße Rahmen war weiterhin
     zu sehen und wirkte irreführend (wie ein Fehler statt ein
     Fokus-Hinweis) – Ursache war ":focus-visible": dieser Auto-Fokus beim
     Öffnen wird per Skript gesetzt, Chrome stuft das NICHT als
     ":focus-visible" ein (nur bei echter Tab-Navigation), daher griff
     unser dezenter Stil hier nie – stattdessen zeigte sich WPs
     Standard-Regel ":where(.wp-site-blocks :focus){outline:2px solid}"
     (Farbe = aktuelle Textfarbe = Weiß). Fix: eigener Stil jetzt auf
     ":focus" statt ":focus-visible" (deckt auch den Auto-Fokus-Fall ab),
     Farbe wie gewünscht an den Trennlinien-Ton angelehnt statt Weiß. */
  .sl-header .wp-block-navigation__responsive-container .wp-block-navigation-item__content:focus{
    outline:none!important;background:var(--sl-surface)!important;
  }
  /* Aktive Seite: nur die Schriftfarbe wechselt auf LSG-Blau dunkel (V0.78.0, Feedback
     Dirk: die weiße/blaue Pille sah nicht gut aus). Klasse "current-menu-
     item" kommt von Core selbst; der Elternpunkt "Infos" trägt bei aktiven
     Unterseiten nur "current-menu-ancestor" und bleibt daher unmarkiert. */
  .sl-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content{
    color:var(--sl-lsg-dark)!important;
  }

  /* Mobiles Menü = eigener Template-Part (parts/navigation-overlay.html,
     WP 7.0 "Navigations-Overlay"). Core schaltet bei eigenem Overlay seine
     Menü-Darstellung ab (":not(.disable-default-overlay)") – Untermenüs
     sollen hier wie im Standard-Overlay offen untereinander stehen, statt
     als schwebendes Dropdown. */
  /* Eigenes Overlay: Core-/Alt-Polster oben weg, damit das Schließen-Kreuz auf
     derselben Position liegt wie der Hamburger-Button (Kopfzeile: 12px oben,
     18px rechts, 44px Kasten). */
  .sl-header .wp-block-navigation__responsive-container.is-menu-open:has(.sl-nav-overlay){padding:0!important}
  .sl-header .wp-block-navigation__responsive-container.is-menu-open:has(.sl-nav-overlay) .wp-block-navigation__responsive-container-content{padding-top:0!important}
  /* Angemeldet: Admin-Leiste verdeckt sonst den oberen Overlay-Rand. */
  /* Rechter Rand wie beim Hamburger: Kopfzeile 18px + Seitenpolster der Seite. */
  .sl-nav-overlay-top{padding-right:calc(18px + var(--wp--style--root--padding-right,0px))!important}
  body.admin-bar .sl-nav-overlay-top{padding-top:calc(var(--wp-admin--admin-bar--height,0px) + 5px)!important}
  .sl-nav-overlay .wp-block-navigation__submenu-icon{display:none}
  .sl-nav-overlay .has-child .wp-block-navigation__submenu-container{
    position:static;opacity:1;visibility:visible;height:auto;width:100%;min-width:0;
    overflow:visible;border:0;padding:0;background:transparent;box-shadow:none;
  }
  .sl-nav-overlay .wp-block-navigation__container,
  .sl-nav-overlay .wp-block-navigation-item{display:flex;flex-direction:column;align-items:stretch;width:100%}
  .sl-nav-overlay .wp-block-navigation-item__content{width:100%;box-sizing:border-box}
  .sl-header .sl-nav-overlay-home .wp-block-navigation-item__content{border-bottom:0;padding-left:4px!important;margin-right:0!important;font-size:1.05rem}
}
@media(max-width:620px){
  /* Sicherheitsgrenze wie oben, hier auf Höhe des Hamburger-Icons (44px). */
  .sl-header .sl-brand img{max-height:44px}
  /* CTA aus der Kopfzeile als fixiertes Overlay am unteren Rand
     (der eigentliche Elternknoten ist ein klassenloses <p> von wpautop). */
  .sl-header-inner>p:has(.sl-header-cta){position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:1001;margin:0}
  .sl-header-cta{box-shadow:0 8px 20px rgba(17,24,39,.25)!important}
}

/* =============================== Hero =============================== */
/* Nativer Cover-Block: Bild als Vollbreiten-Hintergrund, Text mit
   Abdunklung darüber. Linker Innenabstand folgt der --sl-wide-Formel,
   damit der Text am selben Rand beginnt wie die übrigen Wide-Inhalte. */
.sl-hero{color:#fff}
.sl-page-hero{color:#fff}
.sl-hero .wp-block-cover__inner-container,
.sl-page-hero .wp-block-cover__inner-container{
  padding-left:max(24px,calc((100% - var(--sl-wide)) / 2))!important;
  padding-right:max(24px,32%)!important;
}
.sl-hero .wp-block-cover__inner-container{padding-top:54px!important;padding-bottom:58px!important}
.sl-page-hero .wp-block-cover__inner-container{padding-top:50px!important;padding-bottom:52px!important}
/* Schriftgröße kommt als echtes fontSize-Attribut ("hero", theme.json)
   direkt am Heading-Block (slv9_home_hero() in patterns.php) – im Editor über
   den normalen Typografie-Regler änderbar. line-height/letter-spacing/Farbe/
   Abstand bleiben hier als Design-System-Vorgabe. */
.sl-hero-title{line-height:.94;letter-spacing:-.04em;color:#fff!important;margin:.35em 0 .2em}
.sl-hero .sl-lead{color:#fff!important;max-width:34rem}
.sl-page-hero .sl-page-title,
.sl-page-hero .sl-lead{color:#fff!important}
.sl-page-hero .sl-lead{max-width:34rem}
.sl-hero .wp-block-shortcode{margin:.35rem 0}
.sl-hero-meta{gap:20px!important;margin-top:8px!important;color:#fff}
/* Standard-Abstand Icon↔Text; von der Redaktion über den Blockabstand der
   Gruppe überschreibbar (niedrige Spezifität, kein !important). */
.sl-hero-meta-item{gap:1.15rem}
@media(max-width:620px){
  .sl-section-title{font-size:clamp(1.5rem,3vw + 0.9rem,2rem)!important}
  /* Hero-Text nutzt mobil die volle Breite (Desktop: rechte 32 % bleiben
     für das Foto frei, mobil wären das nur ~65 % Textbreite). */
  .sl-hero .wp-block-cover__inner-container{padding-right:24px!important}
  /* Countdown-Balken sitzt am oberen Heldrand: Cover-Innenabstand weg, damit
     die Positionierungsbox am Heldrand beginnt, Blockabstand des Balkens weg,
     Inhalt rückt unter den Balken. */
  .sl-hero{padding:0!important}
  .sl-hero .wp-block-cover__inner-container{padding-top:96px!important}
  .sl-hero .sl-countdown{margin:0!important}
}

/* ====================== Hero-Countdown (V0.72.0) ====================== */
/* Karte oben rechts im Hero, siehe slv9_countdown_card() (patterns.php) –
   Hintergrund/Rahmen/Innenabstand sind echte core/group-Blockattribute
   (Editor-Seitenleiste: Farbe/Rahmen/Abstand), hier kommt nur die Position.
   .wp-block-cover__inner-container ist von Haus aus vertikal zentriert und
   nur content-groß (flex-align-items:center) – als position:relative-Anker
   für "oben rechts" wäre das falsch (die Karte würde in der Content-Mitte
   statt am Bildrand landen).
   NACHBESSERUNG 1 (noch vor dem ersten Commit): ein erster Versuch hat die
   Box per position:static vom Positionierungs-Kontext befreit – das hat
   aber zugleich die Stapelreihenfolge zerstört: nicht-positionierte
   Elemente malen IMMER unter positionierten Geschwistern (hier: dem
   absolut positionierten Hintergrundbild/Abdunklung), unabhängig von der
   Reihenfolge im Quelltext. Titel/Lead/Status-Badge wurden dadurch vom
   Hero-Bild verdeckt. Fix: position:relative bleibt (korrekte
   Stapelreihenfolge), stattdessen wird die Box per align-self:stretch auf
   die volle Höhe des Covers gezogen und intern per Flex wieder vertikal
   zentriert.
   NACHBESSERUNG 2: align-self:stretch wirkt bei .wp-block-cover (flex-
   direction:row, Standard) nur auf die Quer-Achse (vertikal) – die Box
   blieb auf der Haupt-Achse (horizontal) weiter "shrink-to-fit" (nur so
   breit wie ihr Inhalt, hier durch .sl-lead{max-width:34rem} auf ~544px
   begrenzt), weil flex-grow:0 (Standard) sie nicht wachsen lässt. Die
   rechte "right"-Prozentrechnung der Countdown-Karte griff dadurch auf
   diese schmale ~544px-Box statt auf die volle Hero-Breite – die Karte
   landete rund 400px zu weit links, deutlich unter dem Anmelden-Button
   im Header. Fix: width:100% erzwingt die volle Breite auch auf der
   Haupt-Achse. align-items:flex-start verhindert, dass Badge/Button
   (ursprünglich content-breite Inline-Blöcke) durch die Flex-Spalte
   plötzlich auf volle Breite gestreckt werden – Titel/Lead bleiben davon
   unberührt (text-align:start, bzw. durch max-width ohnehin begrenzt).
   right-Formel jetzt wie beim Header-CTA-Button (.sl-header-inner:
   padding:14px 24px) um die zusätzlichen 24px Innenabstand ergänzt, damit
   die Karte exakt unter dem Button ausgerichtet ist.
   NACHBESSERUNG 3: width:100% griff zunächst nicht – Core setzt für
   is-position-center-left (unsere Hero-Einstellung) eine spezifischere
   Regel (".wp-block-cover.has-custom-content-position...is-position-
   center-left .wp-block-cover__inner-container{width:auto}"), die ohne
   !important gewinnt.
   NACHBESSERUNG 4: mit !important griff width:100%, aber die Box blieb
   trotzdem schmaler als erwartet (~947px statt ~1480px) und nach rechts
   verschoben – box-sizing:content-box (Core-Standard) addiert die
   bestehenden Prozent-Paddings (padding-right:32%!important,
   padding-left:max(24px,Wide-Formel)!important, siehe oben) ZUSÄTZLICH
   zu den 100% Inhaltsbreite, das Flex-Item wurde dadurch über den
   verfügbaren Platz hinausgeschoben und per flex-shrink:1 (Standard)
   wieder zusammengestaucht – mit einer Verschiebung als Nebeneffekt.
   Fix: box-sizing:border-box, damit die bestehenden Paddings in die
   100%-Breite eingerechnet werden statt addiert zu werden.
   NACHBESSERUNG 5: Breite stimmte jetzt, aber Titel/Badge/Button waren
   trotzdem nach rechts verschoben – das war die eigentliche Ursache von
   Dirks "alles zentriert"-Beobachtung. Grund: die Box trägt (von Haus aus,
   unabhängig von dieser Änderung) die WP-Klasse "is-layout-constrained";
   deren Core-Regel zentriert jeden direkten Kind-Block per
   margin-left/right:auto innerhalb von --wp--style--global--content-size
   (hier 900px). Bei der ursprünglich schmalen Box (~544px, schmaler als
   900px) hatte diese Regel keinen Spielraum und blieb unsichtbar – jetzt,
   bei voller Breite, zentrierte sie Titel/Badge/Button sichtbar in der
   Mitte. Fix: Zentrierung gezielt für diesen Hero deaktiviert (nur
   margin, max-width bleibt unangetastet – .sl-lead behält z. B. weiter
   sein eigenes max-width:34rem). */
.sl-hero .wp-block-cover__inner-container{
  align-self:stretch;width:100%!important;box-sizing:border-box!important;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
}
.sl-hero .wp-block-cover__inner-container.is-layout-constrained > *{
  margin-left:0!important;margin-right:0!important;
}
/* Countdown-Karte ist absolut positioniert und soll die volle Breite als
   Positionierungs-Rahmen nutzen können (Mobil-Balken) – nicht auf
   --wp--style--global--content-size (900px) gedeckelt. */
.sl-hero .sl-countdown{max-width:none!important}
.sl-hero .sl-countdown{
  position:absolute;top:28px;right:max(24px,calc((100% - var(--sl-wide)) / 2 + 24px));
  z-index:2;width:264px;box-shadow:0 14px 34px rgba(11,34,66,.22);
}
.sl-countdown-label{margin:0!important;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--sl-primary)}
.sl-countdown-date{margin:.1em 0 .6em!important;font-size:1.15rem;font-weight:800;color:var(--sl-ink)}
.sl-countdown-ticker{display:flex;gap:6px;justify-content:space-between}
.sl-cd-unit{display:flex;flex-direction:column;align-items:center;flex:1}
.sl-cd-val{font-size:1.5rem;font-weight:800;line-height:1;color:var(--sl-primary);font-variant-numeric:tabular-nums}
.sl-cd-unit:not(:last-child) .sl-cd-val:after{content:":";margin-left:.2em;color:var(--sl-line);font-weight:700}
.sl-cd-label{font-size:.62rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--sl-muted);margin-top:.3em}
@media(max-width:900px){
  .sl-hero .sl-countdown{width:230px;top:20px}
}
@media(max-width:620px){
  /* Reference-Vorgabe (Dirk): auf Mobil wandert die Anzeige auf die volle
     Breite als Balken statt als schwebende Karte. */
  .sl-hero .sl-countdown{
    position:absolute;top:0;left:0;right:0;width:100%;border-radius:0!important;
    box-shadow:none;display:flex;align-items:center;justify-content:center;
    gap:16px;padding:10px 16px!important;z-index:2;
  }
  .sl-hero .sl-countdown-label{display:none}
  .sl-hero .sl-countdown-date{margin:0!important;font-size:.85rem;white-space:nowrap}
  .sl-hero .sl-countdown-ticker{flex:none;gap:6px}
  .sl-hero .sl-cd-val{font-size:1rem}
  .sl-hero .sl-cd-label{font-size:.56rem}
}

/* ========================== Statusbadge ========================== */
/* Statusfarben (Punkt und Rand --sl-dot, Hintergrund --sl-bg, Schrift --sl-text) setzt das
   Plugin silvesterlauf-site-config je Status als Inline-Variablen am Badge
   (Einstellung „Farben des Statusbadges“, barrierefreie Standardwerte). */
/* V0.74.0, Feedback Dirk: Pille war transparent (rgba(255,255,255,.10)) und
   zu klein, auf dem Hero-Foto kaum lesbar; der Punkt-Animation fehlte
   ebenso Kontrast. Nach Mockup-Auswahl (Variante "C1"): deckender weißer
   Hintergrund (Höhe jetzt nah an der Hero-Überschrift, siehe Mess-Notiz im
   CHANGELOG), Status kommt über Text-/Punktfarbe UND einen umlaufenden
   Farbbogen in der Statusfarbe – Bogen und Punkt sitzen auf je einer neuen
   äußeren Hülle (.sl-status-ring), damit die Statusfarbe (--sl-dot) nach
   UNTEN an beide (Bogen-Hintergrund, Punkt, Text) vererbt werden kann;
   CSS-Variablen vererben nur abwärts, nie zum übergeordneten Element.
   --sl-dot sitzt deshalb jetzt auf der äußeren .sl-status--Klasse statt auf
   dem Punkt selbst. */
/* Farbbogen: läuft in 5s einmal komplett um die Pille, füllt sich dabei mit
   der Statusfarbe (wie eine Uhr). @property nötig, sonst springt der
   Winkel am Zyklusende nur, statt weich zu füllen (Custom Properties sind
   ohne @property nicht animierbar). */
@property --sl-ring-arc{syntax:'<angle>';inherits:false;initial-value:0deg}
.sl-status-ring{
  display:inline-block;border-radius:999px;padding:3px;
  background:conic-gradient(from -90deg, var(--sl-dot) 0deg, var(--sl-dot) var(--sl-ring-arc), rgba(11,34,66,.16) var(--sl-ring-arc) 360deg);
  animation:sl-ring-sweep 5s linear infinite;
}
@keyframes sl-ring-sweep{0%{--sl-ring-arc:0deg}100%{--sl-ring-arc:360deg}}
/* Globale reduced-motion-Regel (oben) schaltet die Animation ab; Bogen soll
   dann nicht leer/halbfertig wirken, sondern als vollständiger, ruhiger Ring. */
@media(prefers-reduced-motion:reduce){.sl-status-ring{--sl-ring-arc:360deg}}

.sl-status{
  display:inline-flex;align-items:center;gap:.65rem;padding:1.5rem 1.6rem;border-radius:999px;
  background:var(--sl-bg,#fff);color:var(--sl-text,var(--sl-dot));font-weight:800;font-size:1.05rem;
  box-shadow:0 14px 30px rgba(11,34,66,.26);
}
.sl-status__dot{position:relative;width:.95rem;height:.95rem;border-radius:50%;background:var(--sl-dot)}
.sl-status--open .sl-status__dot{box-shadow:0 0 0 5px color-mix(in srgb,var(--sl-dot) 16%,transparent)}

/* Animation des Statuspunkts – je Status über das Plugin einstellbar
   ([silvesterlauf_status_badge], Klasse sl-status--anim-*). Dekorativ;
   die globale reduced-motion-Regel weiter oben schaltet alles ab. */
.sl-status--anim-pulse .sl-status__dot{animation:sl-dot-pulse 1.6s ease-in-out infinite}
.sl-status--anim-pulse-fast .sl-status__dot{animation:sl-dot-pulse .8s ease-in-out infinite}
@keyframes sl-dot-pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.35);opacity:.6}
}
.sl-status--anim-ping .sl-status__dot::after{
  content:"";position:absolute;inset:0;border-radius:50%;background:var(--sl-dot,currentColor);
  animation:sl-dot-ping 2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes sl-dot-ping{
  0%{transform:scale(1);opacity:.65}
  70%,100%{transform:scale(2.4);opacity:0}
}
.sl-status--anim-glow .sl-status__dot::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;background:var(--sl-dot,currentColor);
  opacity:.25;animation:sl-dot-glow 2.4s ease-in-out infinite;
}
@keyframes sl-dot-glow{
  0%,100%{transform:scale(.85);opacity:.12}
  50%{transform:scale(1.5);opacity:.32}
}

/* ========================= Buttons / CTA ========================= */
/* Rot ausschließlich für die primäre Conversion (§15). */
.wp-block-button.is-style-sl-cta .wp-block-button__link,
.sl-btn,.sl-header-cta{
  background:var(--sl-red)!important;color:#fff!important;border:2px solid var(--sl-red)!important;
  border-radius:6px!important;font-weight:800!important;
}
.wp-block-button.is-style-sl-cta .wp-block-button__link{padding:.82rem 1.15rem!important}
.sl-btn,.sl-header-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.78rem 1.05rem!important;text-decoration:none!important;line-height:1.2;
}
.sl-header-cta{white-space:nowrap}
.wp-block-button.is-style-sl-cta .wp-block-button__link:hover,
.sl-btn:hover,.sl-header-cta:hover{background:#fff!important;color:var(--sl-red)!important}

/* Sekundärer Button-Stil: sichtbar untergeordnet, nie rot (§15). */
.wp-block-button.is-style-sl-cta-secondary .wp-block-button__link{
  background:transparent!important;color:var(--sl-primary)!important;border:2px solid var(--sl-primary)!important;
  border-radius:6px!important;font-weight:700!important;padding:.7rem 1rem!important;
}
.wp-block-button.is-style-sl-cta-secondary .wp-block-button__link:hover{background:var(--sl-primary)!important;color:#fff!important}

/* Sekundärziele als Textlink. */
.sl-text-link a,.sl-text-link{color:var(--sl-lsg-dark)!important;font-weight:800!important;text-decoration:none!important}
.sl-text-link a:hover,.sl-text-link:hover{color:var(--sl-primary)!important;text-decoration:underline!important;text-underline-offset:3px}
.sl-actions .sl-secondary-copy .sl-text-link a{color:var(--sl-lsg-dark)!important;text-decoration:none!important;font-weight:800!important}
.sl-actions .sl-secondary-copy .sl-text-link a:hover{color:var(--sl-primary)!important;text-decoration:underline!important}

/* ========================== Laufkarten ========================== */
/* V0.67.0: Karte aus drei echten core/cover-Abschnitten (Kopf/Inhalt/Fuß,
   siehe slv9_card() in inc/patterns.php) statt eines festen CSS-Verlaufs –
   jeder Abschnitt frei per Editor gestaltbar (Farbe/Bild + Deckkraft).
   Textfarbe kommt automatisch aus Cores eigenem ".is-dark"/".is-light"-
   Kontrastmechanismus, hier nicht mehr eigens gesetzt. Die Karte selbst
   trägt weiterhin optional ein Hintergrundbild (native Gruppen-Einstellung)
   – scheint durch alle drei Abschnitte hindurch, sobald deren Deckkraft
   unter 100% gesetzt wird. */
.sl-run-grid{display:flex!important;flex-wrap:wrap!important;width:100%!important;max-width:none!important;align-items:stretch!important;gap:18px!important}
.sl-run-card{
  position:relative;overflow:hidden;border-radius:var(--sl-radius);
  background-color:var(--sl-surface);border:1px solid var(--sl-line);
  box-shadow:0 9px 24px rgba(11,47,99,.10);
  box-sizing:border-box;display:flex;flex-direction:column;min-height:300px;
}
.sl-run-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(11,47,99,.16)}
/* Cores Cover-Grundstil bringt eigene min-height(430px)/padding/Zentrierung
   mit, die für einen kompakten Karten-Abschnitt zu groß sind – hier auf
   die Abschnittsgröße zurückgesetzt, Innenabstand je Abschnitt einzeln.
   Die Karte trägt selbst "layout":"constrained" (native Block-Einstellung,
   siehe slv9_card()) – dessen Standard-Abstand zwischen Kind-Elementen hier
   genullt, sonst klaffen sichtbare Lücken zwischen den drei Abschnitten;
   der Inhalt-Abschnitt (flex:1 1 auto) füllt dadurch die komplette Fläche
   zwischen Kopf und Fuß lückenlos aus. */
.sl-run-card>.wp-block-cover{margin:0!important;min-height:0;padding:0;display:block;border-radius:0;width:100%}
.sl-run-card .sl-card-head{padding:24px 22px 16px!important;flex:none}
/* "align-items:stretch" (statt eines engeren Werts) ist hier bewusst
   wichtig: nur so bleibt die Überschrift volle Abschnittsbreite – und
   damit bleiben ihre nativen Ausrichtungs-Knöpfe (links/zentriert/rechts
   im Editor-Toolbar) sichtbar wirksam, statt wirkungslos auf einer bereits
   inhaltsschmal geschrumpften Box zu stehen. */
.sl-run-card .sl-card-head .wp-block-cover__inner-container{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.sl-run-card .sl-card-head h3{margin:2px 0 0!important;font-size:clamp(1.45rem,1.8vw,1.75rem)!important;line-height:1.05!important;hyphens:none!important;word-break:normal!important;overflow-wrap:normal!important}
/* Icon-Farbe: die globale Vorgabe (weiter unten, ".wp-block-sbtl-icon.sl-
   event-icon{color:var(--sl-primary)}") ist spezifischer als Cores eigener
   ":where()"-Kontrastmechanismus und würde sonst immer gewinnen – auf
   Primärblau-Kopf (Standardfarbe) macht das ein blaues Icon auf blauem
   Grund unsichtbar. "inherit" übernimmt stattdessen die vom Kopf-Abschnitt
   selbst berechnete Textfarbe (weiß bei dunklem, dunkel bei hellem Kopf) –
   bleibt so auch nach einer Umfärbung durch die Redaktion automatisch
   lesbar, ganz ohne eigene Farbwahl hier. */
.sl-run-card .sl-card-head .wp-block-sbtl-icon.sl-event-icon{color:inherit}
.sl-run-card .sl-card-body{padding:16px 22px!important;flex:1 1 auto}
.sl-run-card .sl-card-body p{margin:0!important;font-size:.96rem!important;line-height:1.44!important;hyphens:auto;color:var(--sl-ink)}
.sl-run-card .sl-card-foot{padding:14px 22px!important;flex:none}
.sl-run-card .sl-card-foot .sl-card-link{margin:0!important}
.sl-run-card .sl-card-foot .sl-card-link a{position:static!important;font-weight:800!important;text-decoration:none!important}
.sl-run-card .sl-card-foot .sl-card-link a:hover{text-decoration:underline!important;text-underline-offset:3px}
/* Klick-Ziel = der ganze Fuß-Abschnitt (nicht mehr die ganze Karte): Cover-
   Blöcke sind selbst "position:relative" (eigene Hintergrund-Ebene) – das
   `::after`-Overlay kann darum nur innerhalb des Fuß-Abschnitts aufspannen,
   nicht über alle drei verschachtelten Abschnitte hinweg. */
.sl-run-card .sl-card-foot{cursor:pointer}
.sl-run-card .sl-card-foot .sl-card-link a::after{content:"";position:absolute;inset:0;z-index:5}
.sl-run-card:focus-within,
.sl-run-card:has(.sl-card-link a:focus-visible){outline:3px solid var(--sl-ink);outline-offset:4px}
@media(max-width:620px){.sl-run-card{min-height:0}}

/* ========================== Faktenleiste ========================== */
.sl-factbar{
  display:flex!important;flex-wrap:wrap!important;
  border:1px solid var(--sl-line);border-radius:10px;padding:18px 20px!important;
  background:#fff;gap:18px 28px!important;
}
.sl-fact{flex:1 1 190px!important;min-width:190px;gap:10px!important}
.sl-fact strong{display:block;color:var(--sl-primary);font-size:.95rem}
.sl-fact p{margin:0!important;font-size:.86rem!important;color:var(--sl-muted)!important}
@media(max-width:620px){.sl-fact{flex-basis:100%!important}}

/* ==================== Editorial "Mehr als ein Lauf" ==================== */
.sl-editorial-grid{gap:48px!important;align-items:center!important}
/* V0.54.0, Feedback Dirk: Überschrift war mit clamp(2.8rem,5vw,4.2rem) fast
   doppelt so groß wie jeder andere Abschnittstitel der Seite (vgl.
   .sl-section-title, max. 2.55rem) und wirkte dadurch unprofessionell.
   font-size kommt jetzt NICHT mehr von hier, sondern als echtes
   fontSize-Attribut ("page-title", 3,25rem laut theme.json) direkt am
   Heading-Block (slv9_home_editorial() in patterns.php) – dadurch im
   Editor über den normalen Typografie-Regler änderbar, keine CSS-Sperre
   mehr. line-height/color bleiben hier als Design-System-Vorgabe. */
.sl-editorial-title{line-height:.95;color:var(--sl-primary)}
/* Ebenso Feedback Dirk: Abstände zwischen/innerhalb der Proof-Zeilen wirkten
   zu großzügig UND waren per !important nicht editierbar. sl-proof-list
   hat jetzt ein natives layout:flex-Attribut (siehe patterns.php), damit
   im Editor ein echter Abstands-Regler erscheint; die Werte hier sind nur
   noch der Startwert, kein Override mehr (kein !important). */
.sl-proof-list{display:flex;flex-direction:column;gap:16px}
/* V0.73.0, Feedback Dirk: ohne align-items war jeder .sl-proof-Eintrag nur so
   breit wie sein eigener Inhalt (WP-Standard für "flex"-Layout vertikal) –
   dadurch hatte jede Trennlinie (border-top, liegt auf dem einzelnen
   Eintrag) eine andere Länge, und der breiteste Eintrag ("Über 200
   Helfende") hatte praktisch keinen Platz mehr zum Wachsen, sobald Text
   ergänzt wurde (brach sofort um). Jetzt strecken sich alle drei Einträge
   auf die volle Listenbreite – gleich lange Linien, voller Platz für Text.
   !important nötig: WP generiert für diesen Block eine eigene, nummerierte
   Container-Klasse (z. B. .wp-container-core-group-is-layout-37) mit
   align-items:flex-start aus dem "layout"-Blockattribut – gleiche
   Spezifität, aber später im Dokument eingefügt, würde ohne !important
   gewinnen. */
.sl-proof-list{align-items:stretch!important}
/* border-top kommt jetzt als echtes Blockattribut (slv9_proof_item() in
   patterns.php, "Ränder und Schatten"-Panel im Editor) statt von hier. */
.sl-proof{display:flex!important;flex-wrap:nowrap!important;gap:10px;padding-top:14px;align-items:flex-start!important}
.sl-proof .wp-block-sbtl-icon{flex:none;color:var(--sl-primary)}
/* V0.73.1, Feedback Dirk: display:block erzwang JEDES <strong> im Absatz
   auf eine eigene Zeile. Der Editor legt beim Tippen direkt hinter dem
   Link gelegentlich ein zweites <strong> an (normales RichText-Verhalten
   an Formatierungsgrenzen) – jedes neu getippte Zeichen sprang dadurch
   sofort in eine eigene Zeile. Erster Versuch (display:block ganz
   entfernt) war falsch: der gespeicherte Inhalt hat gar keinen <br> zur
   Beschreibung – die Titelzeile trennt sich einzig durch display:block,
   ohne das liefen Titel und Beschreibung ohne jeden Abstand zusammen.
   Jetzt gezielt nur das ERSTE <strong> (der Titel) als Block – ein
   eventuelles zweites (das Editor-Artefakt) bleibt inline und erzwingt
   keine eigene Zeile mehr. */
.sl-proof strong:first-of-type{display:block}
.sl-proof strong{color:var(--sl-primary)}
.sl-proof strong a{color:inherit;text-decoration:none}
.sl-proof strong a:hover{color:var(--sl-primary);text-decoration:underline;text-underline-offset:3px}
.sl-editorial-img img{border-radius:14px;min-height:390px;object-fit:cover;box-shadow:0 14px 34px rgba(11,47,99,.12)}
.sl-editorial-media{position:relative}
.sl-editorial-badge{
  position:absolute;left:20px;bottom:20px;background:#fff;border-radius:999px;
  padding:.6rem 1rem!important;box-shadow:0 10px 24px rgba(11,47,99,.18);gap:.5rem!important;
  display:flex!important;align-items:center!important;flex-wrap:nowrap!important;
}
.sl-editorial-badge p{margin:0!important;font-weight:800!important;color:var(--sl-primary)!important;font-size:.92rem!important}
.sl-editorial-badge .wp-block-sbtl-icon{color:var(--sl-primary)}
/* "Social Streams"-Spalte: bewusst als eigener, klar erkennbarer Abschnitt
   gestaltet (Label + Kontext-Satz + große Icon-Buttons) statt einer
   beiläufigen Icon-Zeile – bleibt auf allen Bildschirmgrößen sichtbar (siehe
   slv9_home() in patterns.php) und wird auf Mobil durch das native
   Spalten-Stacking zu einem eigenen, vollbreiten Block. */
.sl-social-streams{align-self:flex-start}
.sl-social-streams-title{
  font-size:.88rem!important;font-weight:800!important;letter-spacing:.08em!important;
  text-transform:uppercase;margin:0 0 8px!important;color:var(--sl-primary)!important;
}
.sl-social-streams-text{font-size:.92rem!important;color:var(--sl-muted)!important;margin:0 0 18px!important}
@media(max-width:900px){
  .sl-editorial-grid{gap:30px!important}
}
@media(max-width:620px){.sl-editorial-badge{left:12px;bottom:12px}}

/* Core-Block core/social-links, kleine Kreis-Variante (Footer): einfarbig
   statt Marken-Kreisfarben, passt sich per currentColor der jeweiligen
   Umgebung an (im Footer: --sl-base). Bewusst NICHT für ".sl-social-links--
   bold" (V0.51.0: dort steuert die Redaktion Größe/Farbe über die eigenen
   Editor-Regler des Blocks – siehe slv9_social_streams() – Theme-CSS soll
   dem nicht mehr in die Quere kommen). */
.sl-social-links{gap:12px!important}
.sl-social-links:not(.sl-social-links--bold) .wp-social-link{background:none!important;width:32px!important;height:32px!important;color:currentColor!important}
.sl-social-links:not(.sl-social-links--bold) .wp-social-link a{color:currentColor!important}
.sl-social-links:not(.sl-social-links--bold) .wp-social-link svg{fill:currentColor!important}
.sl-social-links .wp-social-link:hover{opacity:.75}

/* Variante "--bold": nur die eckige Form (Radius/Schatten/Hover) – für
   Größe und Farbe siehe Kommentar oben, die kommen aus den Block-eigenen
   Attributen (iconColor/iconBackgroundColor/size), nicht aus CSS. */
.sl-social-links--bold{gap:14px!important}
.sl-social-links--bold .wp-social-link{border-radius:12px!important;box-shadow:0 10px 20px rgba(11,47,99,.18);transition:transform .15s ease}
.sl-social-links--bold .wp-social-link:hover{transform:translateY(-3px);opacity:1}

/* ============================= Partner ============================= */
/* V0.42.0: Abstand nach oben beim Ansprung per Sprungmarke (?partner=…,
   /partner/#slug), damit der Abschnitt nicht unter der fest stehenden
   Kopfzeile verschwindet. */
.sl-partner-anchor{scroll-margin-top:100px}

/* V0.47.0: EINE Kartenvorlage für Partnerporträts UND Namenspartner –
   vorher zwei Markup-Strukturen (Float-Geschwisterblöcke bzw. wp:columns),
   die trotz optisch angeglichener CSS-Werte (0.45.0/0.46.0) unterschiedlich
   auf kurze Texte reagierten: der Float-Aufbau richtete seine Höhe nur nach
   der NICHT geschwebten rechten Spalte, bei kurzem Text ragten Logo/Name
   links unten aus dem Rahmen (0.46.0-Bug). Echte wp:columns lösen das
   strukturell – eine Flex-Zeile richtet sich immer nach der höheren Spalte,
   kein Clearfix nötig, kein Restfall möglich. Aufbau je Karte: linke Spalte
   (38,2%, goldener Schnitt) = nur Logo; rechte Spalte (61,8%) = Name → Text
   → „Mehr erfahren"/Website-Link – Name jetzt über der Beschreibung statt
   danaben unter dem Logo. Das ist im gespeicherten Seiteninhalt verankert
   (Partnerseite + Startseiten-Teaser), da eine reine CSS-Lösung das
   Float-Höhenproblem nicht zuverlässig beheben konnte; einmalig migriert
   per app/backups/migrate-partner-cards-0.47.0.php (Details CHANGELOG). */
.sl-partner-card{
  position:relative;cursor:pointer;text-align:left;
  border:1px solid var(--sl-line);border-radius:10px;padding:20px!important;background:#fff;
  box-sizing:border-box;overflow-wrap:break-word;word-break:break-word;
  transition:transform .15s ease,box-shadow .15s ease;
}
.sl-partner-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(11,47,99,.1)}
.sl-partner-card,.sl-partner-card *{text-align:left!important}
.sl-partner-card-cols > .wp-block-column{display:flex;flex-direction:column;justify-content:flex-start}
/* Nur in den Listen; auf der Einzelseite bestimmt die Spaltenausrichtung (Vorlage bzw. Partner-Feld) die Position. */
.sl-partner-card-cols:not(.sl-partner-single) > .wp-block-column:first-child{justify-content:center!important}
/* Abschnitte ohne Partner (Markierung aus inc/partner.php): Überschrift davor und
   Abschnitte, die nur leere Abfragen enthalten, ausblenden. */
.sl-section-title:has(+ .sl-empty-partner-section){display:none}
.sl-section:has(.sl-empty-partner-section):not(:has(li)){display:none}
/* Partner ohne Logo: leere Logo-Spalte ausblenden, Text über die volle Breite
   (wie auf der Einzelseite). */
.sl-partner-card-cols:not(:has(.sl-partner-card-logo)) > .wp-block-column:first-child{display:none}
.sl-partner-card-cols:not(:has(.sl-partner-card-logo)) > .wp-block-column:last-child{flex-basis:100%!important}

/* Logo: proportional bis 400×300px (nur max-width/max-height, kein festes
   width/height, das würde verzerren); min(400px,100%) verhindert Überstand,
   falls die Spalte schmaler als 400px ist. */
/* Nur in den Listen. Auf der Einzelseite gelten die Einstellungen der Vorlage bzw. des Partners. */
.sl-partner-card-cols:not(.sl-partner-single) .sl-partner-card-logo img{
  max-width:min(400px,100%)!important;max-height:300px!important;
  width:auto!important;height:auto!important;object-fit:contain!important;margin:0!important;
}

/* Name → Text → Link, mit etwas Abstand zwischen den Zeilen. */
.sl-partner-card h3{font-size:1.2rem!important;color:var(--sl-primary)!important;margin:0 0 6px!important}
.sl-partner-card .wp-block-post-content{margin:0!important}
.sl-partner-card .wp-block-button{margin-top:10px!important}
/* Verlinkter Partnername (führt zur Partner-Detailseite) – das ::after
   macht die ganze Karte klickbar. position:absolute sucht den nächsten
   positionierten Vorfahren, das ist .sl-partner-card selbst, auch über
   die Spalten-Verschachtelung hinweg. */
.sl-partner-card h3 a{color:inherit!important;text-decoration:none}
.sl-partner-card h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.sl-partner-card h3 a::after{content:"";position:absolute;inset:0;z-index:10;border-radius:10px}
.sl-partner-card:has(h3 a:focus-visible){outline:3px solid var(--sl-ink);outline-offset:4px}

/* Echter "Website besuchen"-Link – erscheint nur noch auf der Partner-
   Einzelseite (in Listen-Ansichten ersetzt inc/partner.php ihn durch
   "Mehr erfahren", s.u.). Textlink-Optik statt Standard-Button. */
.sl-partner-portrait-link a{color:var(--sl-lsg-dark)!important;font-weight:800!important;text-decoration:none!important;background:none!important;padding:0!important;border:0!important}
.sl-partner-portrait-link a:hover{color:var(--sl-primary)!important;text-decoration:underline!important}

/* "Mehr erfahren" (ersetzt in Listen-Ansichten den externen Website-Link,
   siehe inc/partner.php) – rein informativer Hinweis, kein eigener Link,
   die Karte ist ja schon als Ganzes klickbar. */
.sl-partner-portrait-more{display:block;margin:10px 0 0!important;color:var(--sl-lsg-dark);font-weight:800}
.sl-partner-card:hover .sl-partner-portrait-more{color:var(--sl-primary)}

/* Sponsorenband: lückenloses CSS-Marquee (kein Slider), pausiert bei
   Hover/Fokus/Reduced-Motion. slv9_partner_band() gibt die Sponsoren-Folge so
   oft aus (Kopien = Klasse sl-band-c*), dass > 1 Bildschirmbreite gefüllt ist;
   die Animation verschiebt um GENAU eine Folge (--sl-band-shift = -100 %/Kopien)
   und springt auf identischen Inhalt → echte Schleife bei jeder Sponsorenzahl.
   V0.38.0: einheitliche Kachelbreite (--sl-tile-w) – jedes Logo sitzt zentriert
   in einem gleich großen Feld, unabhängig vom transparenten Rand der Datei →
   gleichmäßiger Rhythmus. Der Übergang zwischen den Folgen hat denselben
   Abstand (Flex-Spacer je Folge, Track-gap 0). Tempo = Klasse sl-band-d*. */
.sl-partner-band{overflow:hidden;padding:20px 0!important;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);--sl-tile-w:156px;--sl-band-gap:24px}
.sl-partner-band-track{display:flex!important;flex-wrap:nowrap!important;gap:0!important;width:max-content!important;animation:sl-partner-marquee var(--sl-band-dur,34s) linear infinite}
.sl-partner-band:hover .sl-partner-band-track,
.sl-partner-band:focus-within .sl-partner-band-track{animation-play-state:paused}
.sl-partner-band-query{display:flex!important;flex:none}
.sl-partner-band-query .wp-block-post-template{display:flex!important;gap:var(--sl-band-gap,24px)!important;flex-wrap:nowrap!important}
/* Cores columns-1 gibt jedem <li> flex-basis:100% – hier auf Inhaltsbreite. */
.sl-partner-band-query .wp-block-post-template > li{flex:0 0 auto!important;width:auto!important;min-width:0!important}
/* Sponsoren ohne Logo erscheinen nicht im Logo-Band (Ghost-Kachel vermeiden). */
.sl-partner-band-query .wp-block-post-template > li:not(.has-post-thumbnail){display:none}
/* Abstand zwischen zwei Folgen = Abstand innerhalb (Spacer am Folgen-Ende). */
.sl-partner-band-query::after{content:"";flex:0 0 var(--sl-band-gap,24px)}
.sl-band-c2{--sl-band-shift:-50%}
.sl-band-c3{--sl-band-shift:-33.334%}
.sl-band-c4{--sl-band-shift:-25%}
.sl-band-c5{--sl-band-shift:-20%}
.sl-band-c6{--sl-band-shift:-16.667%}
.sl-band-da{--sl-band-dur:13s}
.sl-band-db{--sl-band-dur:22s}
.sl-band-dc{--sl-band-dur:34s}
.sl-band-dd{--sl-band-dur:50s}
.sl-band-de{--sl-band-dur:76s}
.sl-partner-tile{position:relative!important;flex:none;width:var(--sl-tile-w,156px);padding:0;display:flex!important;flex-direction:column;align-items:center;justify-content:center}
.sl-partner-tile-logo{display:flex;align-items:center;justify-content:center;width:100%;height:56px}
.sl-partner-tile-logo img{max-width:124px!important;max-height:56px!important;width:auto!important;height:auto!important;object-fit:contain!important;display:block;transition:transform .18s ease}
/* Beim Mouseover (Band pausiert) das Logo unter dem Cursor leicht heranzoomen. */
.sl-partner-tile:hover .sl-partner-tile-logo img{transform:scale(1.18)}
/* Der Namens-Link ist unsichtbar (font-size:0) – die leere Zeile darf keine
   Höhe reservieren, sonst wird die Kachel höher als das Logo. Klickfläche
   liegt über ::after auf der ganzen Kachel. */
.sl-partner-tile-link{font-size:0!important;line-height:0!important;margin:0!important}
.sl-partner-tile-link a{position:static!important;font-size:0!important;line-height:0;padding:0!important;background:transparent!important;border:0!important;color:transparent!important}
.sl-partner-tile-link a::after{content:"";position:absolute;inset:0;border-radius:4px}
.sl-partner-tile:has(.sl-partner-tile-link a:focus-visible){outline:3px solid var(--sl-ink);outline-offset:4px}
@keyframes sl-partner-marquee{from{transform:translateX(0)}to{transform:translateX(var(--sl-band-shift,-50%))}}

/* Beide Abschnittstypen (Portrait-Karten je Sponsoring-Stufe, Namenspartner-
   Kasten): einspaltige Liste von Karten, keine 2er-Raster. Eigene grid-
   Breite auf den <li> hebt Cores feste is-flex-container-columns-Breite
   auf. Die Karten selbst (.sl-partner-card, s.o.) sind seit V0.47.0
   identisch aufgebaut – nur die Query (Sponsoring-Stufe vs. taxQuery
   "Namenssponsor") und ihr Wrapper-Klassenname unterscheiden sich noch. */
.sl-partner-portrait-query .wp-block-post-template,
.sl-namenssponsor-query .wp-block-post-template{
  list-style:none;margin:0;padding:0;display:grid!important;grid-template-columns:1fr!important;gap:20px!important;
}
.sl-partner-portrait-query .wp-block-post-template > li,
.sl-namenssponsor-query .wp-block-post-template > li{width:auto!important;max-width:none!important;min-width:0!important}

/* Partner-Einzelseite (single-partner.html): eigene, schlankere Variante
   ohne Klick-Overlay (die Seite zeigt sich ja selbst) und ohne Namen in der
   Kachel (der Name steht schon im Seitentitel/Hero) – Logo etwas größer,
   echter Website-Link statt "Mehr erfahren" (siehe inc/partner.php). Ohne
   Logo (post-featured-image rendert dann nichts): Kasten einspaltig, Text
   über die volle Breite. */
.sl-partner-single{cursor:default}
/* Logo-Größe/-Ausrichtung: Beitragsbild-Block und Gruppe in der Vorlage (global) bzw. Felder am
   Partner (inc/partner.php). Hier nur Sicherungen, keine festen Größen. */
.sl-partner-single .sl-partner-card-logo{margin:0}
.sl-partner-single .sl-partner-card-logo img{max-width:100%;height:auto;object-fit:contain}
.sl-partner-single .wp-block-button{margin-top:16px}
.sl-partner-single:not(:has(.sl-partner-card-logo)) > .wp-block-column:first-child{display:none}
.sl-partner-single:not(:has(.sl-partner-card-logo)) > .wp-block-column:last-child{flex-basis:100%!important}

/* ========================= Inhaltsmodule ========================= */
.sl-info-list{border-top:1px solid var(--sl-line)}
.sl-info-row{display:grid!important;grid-template-columns:180px 1fr;gap:20px!important;padding:14px 0!important;border-bottom:1px solid var(--sl-line)}
.sl-info-row strong{color:var(--sl-primary)}
.sl-service-card{border:1px solid var(--sl-line);border-radius:10px;padding:20px!important;background:#fff;width:100%!important;height:100%!important;box-sizing:border-box!important}
.sl-service-card h3{font-size:1.15rem!important;color:var(--sl-primary)!important}
.sl-section .wp-block-columns:has(.sl-service-card){align-items:stretch!important}
.sl-section .wp-block-columns:has(.sl-service-card) > .wp-block-column{display:flex!important}
.sl-actions{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:28px!important;padding-top:18px!important}
.sl-actions .sl-secondary-copy{max-width:640px}
.sl-actions .wp-block-buttons{margin-left:auto}
@media(max-width:900px){
  .sl-actions{align-items:flex-start!important;flex-direction:column!important}
  .sl-actions .wp-block-buttons{margin-left:0}
}
@media(max-width:620px){.sl-info-row{grid-template-columns:1fr;gap:3px!important}}

/* ========================= Ergebnistabelle ========================= */
/* V0.69.0, Feedback Dirk: gebänderte Tabelle (Titelzeile Primärblau/weiß,
   Zeilen hellblau/weiß) statt schlichter Linien-Trennung. Nutzt Cores
   eigenen "Streifen"-Blockstil ("is-style-stripes", im Editor unter
   "Stile" wählbar) – Zeilen/Spalten bleiben dadurch ganz normal über die
   Tabellen-Toolbar einfüg-/löschbar, Inhalte normal editierbar.
   Streifenfarbe kommt NICHT über den nativen Hintergrund-Farbwähler des
   Blocks (in dieser WP-Version ein Core-eigener Bug: die beim Wählen
   gesetzte Klasse "has-{farbe}-background-color" landet auf dem inneren
   <table>, Cores mitgeliefertes Stripes-CSS erwartet sie aber am äußeren
   <figure> – live im Editor nachgewiesen per wp.blocks.serialize() +
   getComputedStyle(), die Farbe blieb wirkungslos bei grauem Standard-
   Streifen). Stattdessen fest an die Palettenfarbe "Streifen (Blau hell)"
   (theme.json, Slug "band") gekoppelt – über Design → Einstellungen →
   Farben weiterhin themeweit änderbar, nur eben nicht pro Tabelle einzeln
   über den defekten Block-eigenen Regler. */
.sl-results-table.is-style-stripes{border-spacing:0;width:100%}
.sl-results-table.is-style-stripes table{width:100%!important;border-collapse:collapse}
.sl-results-table.is-style-stripes th,.sl-results-table.is-style-stripes td{padding:12px 16px!important;text-align:left}
.sl-results-table.is-style-stripes thead{border-bottom:none!important}
.sl-results-table.is-style-stripes thead th{background-color:var(--sl-primary)!important;color:#fff!important;font-size:.85rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.sl-results-table.is-style-stripes tbody tr:nth-child(odd){background-color:var(--wp--preset--color--band)!important}
.sl-results-table.is-style-stripes tbody tr:nth-child(even){background-color:var(--sl-base)!important}
.sl-results-table a{color:var(--sl-lsg-dark)!important;font-weight:700!important;text-decoration:none!important}
.sl-results-table a:hover{color:var(--sl-primary)!important;text-decoration:underline!important}

/* ============================== Icons ============================== */
/* Nur die WAAGERECHTEN Ränder werden fest genullt (Cores constrained-Layout
   zentriert sonst jedes nicht ausgerichtete Kind per margin:auto!important –
   das würde u. a. die Laufkarten-Icons verschieben). Die SENKRECHTEN Ränder
   bleiben frei: die Redaktion kann an jedem Icon über die Block-Abstände
   den Abstand zum Text darunter setzen. Ausrichtung „Mittig/Rechts" des
   Icon-Blocks wirkt über den äußeren display:flex (Plugin). Größe fix. */
.wp-block-sbtl-icon.sl-event-icon{margin:0;line-height:1;color:var(--sl-primary)}
.wp-block-sbtl-icon.sl-event-icon:not(.aligncenter):not(.alignright){margin-left:0!important;margin-right:0!important}
.wp-block-sbtl-icon.sl-event-icon .sbtl-icon{display:inline-flex}
.wp-block-sbtl-icon.sl-event-icon.aligncenter{justify-content:center}
.wp-block-sbtl-icon.sl-event-icon.alignright{justify-content:flex-end;float:none}
.wp-block-sbtl-icon.sl-event-icon svg{width:var(--sbtl-icon-size,28px)!important;height:var(--sbtl-icon-size,28px)!important;display:block}
.sl-hero .wp-block-sbtl-icon.sl-event-icon{color:#fff!important}

/* ============ CTA-Band „Jetzt anmelden" + Footer ============ */
/* Band (Shortcode [silvesterlauf_cta_band], nur solange die Anmeldung möglich
   ist) und Footer schließen die Seite dunkel ab – deep, wie das Hero-Overlay.
   Bewusste Ausnahme von „rot nie auf Blau" (Farbpalette): der rote Button
   bekommt einen weißen Rahmen + pulsierenden Lichtring gegen den deep-Grund –
   offen = ruhiger Puls, Meldeschluss naht = schneller. prefers-reduced-motion
   schaltet den Puls über die globale Regel oben ab. */
/* alignfull → Hintergrund randlos; padding-inline = Root-Padding, damit der
   Inhalt im selben Wide-Rahmen wie Header/Footer/Seiteninhalt sitzt. */
.sl-cta-band{background:var(--sl-deep);color:var(--sl-base);padding-inline:var(--wp--style--root--padding-left,24px)}
.sl-cta-band-inner{margin-inline:auto;padding-block:48px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px}
.sl-cta-band-copy{flex:1 1 20rem}
.sl-cta-band h2{font-size:clamp(1.9rem,3vw,2.5rem);line-height:1.08;margin:0;color:var(--sl-base);display:inline-block;padding-bottom:.35em;border-bottom:3px solid var(--sl-lsg)}
.sl-cta-band-copy p{margin:.55rem 0 0;color:rgba(255,255,255,.76)}
.sl-cta-band-action{flex:0 0 auto}
.sl-cta-band .sl-btn{border-color:#fff!important}
.sl-cta-band--open .sl-btn{animation:sl-cta-ring 1.8s ease-in-out infinite}
.sl-cta-band--closing .sl-btn{animation:sl-cta-ring .9s ease-in-out infinite}
@keyframes sl-cta-ring{
  0%,100%{box-shadow:0 0 0 2px rgba(255,255,255,.14)}
  50%{box-shadow:0 0 0 8px rgba(255,255,255,.32)}
}
@media(max-width:620px){.sl-cta-band-inner{padding-block:38px}}
/* Band schließt bündig an den Footer an (kein Block-Abstand dazwischen) –
   ob als Template-Geschwister oder als letzter Block im Seiteninhalt. */
.sl-cta-band + footer,
main:has(> .sl-cta-band:last-child) + footer{margin-top:0}

.sl-footer{background:var(--sl-deep);color:var(--sl-base);border-top:3px solid var(--sl-lsg)}
.sl-footer-inner{max-width:var(--sl-wide);margin:0 auto;padding:48px 24px!important}
.sl-footer :where(h2,h3,p,li,a,strong){color:var(--sl-base)!important}
.sl-footer h3{font-size:1rem!important;margin-top:0!important;color:var(--sl-lsg)!important}
.sl-footer a{text-decoration:none}
.sl-footer a:hover{color:var(--sl-lsg)!important;text-decoration:underline;text-underline-offset:3px}
/* Linklisten (Service/Informationen/Rechtliches) optisch wie vormals
   <br>-getrennte Zeilen in einem Absatz – Grundwerte zurückgesetzt, damit
   die Redaktion Farbe/Abstände/Umbrüche trotzdem über die normalen
   Listen-Blockeinstellungen im Editor ändern kann. */
.sl-footer .wp-block-list{list-style:none;margin:0;padding:0}
.sl-footer .wp-block-list li{margin:0}
.sl-footer-logo img{width:84px!important;height:84px!important;object-fit:contain!important}
.sl-footer .sl-social-links{margin-top:16px!important}
.sl-footer .sl-social-links .wp-social-link{color:var(--sl-lsg)!important}
.sl-footer .sl-social-links a:hover{text-decoration:none!important}
@media(max-width:620px){.sl-footer-inner{padding:38px 18px!important}}

/* =================== News-Frontend: Brotkrumen =================== */
.sl-breadcrumb{margin:0 0 20px!important}
.sl-breadcrumb ol{font-size:.88rem!important}
.sl-breadcrumb a{color:var(--sl-muted)!important;text-decoration:none!important;font-weight:600!important}
.sl-breadcrumb a:hover{color:var(--sl-primary)!important;text-decoration:underline!important}
.sl-breadcrumb span[aria-current]{color:var(--sl-primary)!important;font-weight:700!important}
.sl-post-archive-link{margin:0 0 20px!important}

/* Ausgaben-Kontextleiste (nur beim Navigieren innerhalb einer Ausgabe). */
.sl-post-context-bar{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:16px!important;margin:0 0 16px!important;padding:12px 16px!important;background:var(--sl-surface);border-radius:8px;font-size:.9rem!important}
.sl-post-context-back,.sl-post-context-current-event{color:var(--sl-lsg-dark)!important;font-weight:700!important;text-decoration:none!important}
.sl-post-context-back:hover,.sl-post-context-current-event:hover{text-decoration:underline!important;color:var(--sl-primary)!important}
.sl-post-context-current{color:var(--sl-muted)!important}
.sl-post-context-current strong{color:var(--sl-primary)!important}
.sl-post-context-current-event{margin-left:auto!important}

/* Kategorie-Filterleiste: umbrechende Pillen. Das von wp:categories
   erzeugte <ul> wird per display:contents aufgelöst. */
.sl-post-filter-wrap{display:flex!important;flex-wrap:wrap!important;gap:10px!important;align-items:center;margin:0 0 32px!important}
.sl-post-filter-wrap .sl-post-filter{display:contents}
.sl-post-filter-wrap .sl-post-filter li{display:contents;margin:0!important}
.sl-post-filter-all,
.sl-post-filter a,
.sl-archive-pill{
  display:inline-block;padding:.5rem 1rem;border-radius:999px;
  border:1.5px solid var(--sl-line);color:var(--sl-primary)!important;
  font-weight:700!important;font-size:.9rem!important;text-decoration:none!important;
}
.sl-post-filter-all:hover,
.sl-post-filter a:hover,
.sl-archive-pill:hover{border-color:var(--sl-primary);background:var(--sl-surface)}
.sl-post-filter .current-cat a,
.sl-post-filter-all.is-active{background:var(--sl-primary)!important;border-color:var(--sl-primary)!important;color:#fff!important}

/* Ausgaben-Archiv-Picker: zwei Varianten (flach / 4+Akkordeon) per Media-Query. */
.sl-archive-picker-wrap{margin:0 0 32px!important}
.sl-archive-picker-full{display:flex!important;flex-wrap:wrap!important;gap:10px!important}
.sl-archive-picker-compact{display:none}
.sl-archive-more-summary{
  display:inline-block;cursor:pointer;padding:.5rem 1rem;border-radius:999px;
  border:1.5px dashed var(--sl-line);color:var(--sl-muted)!important;
  font-weight:700!important;font-size:.9rem!important;list-style:none;
}
.sl-archive-more-summary::-webkit-details-marker{display:none}
.sl-archive-more-summary:hover{border-color:var(--sl-primary);color:var(--sl-primary)!important}
.sl-archive-more[open] .sl-archive-more-summary{border-style:solid;color:var(--sl-primary)!important}
.sl-archive-more-content{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
@media(max-width:620px){
  .sl-archive-picker-full{display:none!important}
  .sl-archive-picker-compact{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;width:100%}
  .sl-archive-pill,.sl-archive-more-summary{padding:.75rem 1.25rem!important}
  .sl-archive-more{width:100%}
}

/* News-Beitragskarten. Eigene grid-Breite auf den <li> hebt Cores feste
   is-flex-container-columns-Breite auf. */
.sl-post-query .wp-block-post-template{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:24px!important}
.sl-post-query .wp-block-post-template > li{width:auto!important;min-width:0!important}
.sl-post-card{
  position:relative;background:#fff;border-radius:var(--sl-radius);overflow:hidden;
  border:1px solid var(--sl-line);height:100%!important;
  display:flex!important;flex-direction:column!important;transition:transform .15s ease,box-shadow .15s ease;
}
.sl-post-card-media{margin:0!important}
.sl-post-card-media img{width:100%!important;height:200px!important;object-fit:cover!important;display:block}
.sl-post-card-body{padding:20px 22px 22px!important;display:flex!important;flex-direction:column!important;flex-grow:1!important}
.sl-post-card-date{font-size:.82rem!important;color:var(--sl-muted)!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.04em;margin:0 0 .4rem!important}
.sl-post-card-title{font-size:1.2rem!important;line-height:1.25!important;color:var(--sl-primary)!important;margin:0 0 .5rem!important}
.sl-post-card-excerpt{font-size:.95rem!important;line-height:1.5!important;color:var(--sl-muted)!important;margin:0!important}
/* "Weiterlesen" (wp:read-more) rendert direkt als <a> – Klasse sitzt am Anker. */
.sl-post-card-link{margin-top:auto!important;padding-top:14px!important;font-size:0!important;line-height:0;color:transparent!important;position:static!important;display:block!important}
.sl-post-card-link::after{content:"";position:absolute;inset:0;border-radius:var(--sl-radius)}
.sl-post-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(11,47,99,.16)}
.sl-post-card:has(.sl-post-card-link:focus-visible){outline:3px solid var(--sl-ink);outline-offset:4px}
@media(max-width:900px){.sl-post-query .wp-block-post-template{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:620px){.sl-post-query .wp-block-post-template{grid-template-columns:1fr!important}}

.sl-post-pagination{display:flex!important;justify-content:center!important;align-items:center!important;gap:8px!important;margin-top:40px!important}
.sl-post-pagination a,.sl-post-pagination .page-numbers{color:var(--sl-primary)!important;font-weight:700!important;text-decoration:none!important;padding:.5rem .85rem;border-radius:6px}
.sl-post-pagination .page-numbers.current{background:var(--sl-primary);color:#fff!important}
.sl-post-pagination a:hover{background:var(--sl-surface)}

/* ============ Kontaktformular (Contact Form 7) ============ */
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 textarea{
  width:100%!important;border:1px solid var(--sl-line)!important;border-radius:8px!important;
  padding:.7rem .85rem!important;font-family:inherit!important;font-size:1rem!important;
}
.wpcf7 textarea{min-height:140px!important}
.wpcf7 input[type=submit]{
  background:var(--sl-red)!important;color:#fff!important;border:2px solid var(--sl-red)!important;
  border-radius:6px!important;font-weight:800!important;padding:.8rem 1.3rem!important;cursor:pointer!important;
}
.wpcf7 input[type=submit]:hover{background:#fff!important;color:var(--sl-red)!important}
.wpcf7-not-valid-tip{color:var(--sl-red)!important;font-size:.85rem!important;margin-top:.25rem!important}
.wpcf7 .sl-form-row{display:block;margin-bottom:16px} /* optionaler Zeilen-Wrapper, siehe CONTACT-FORM-CF7-SETUP.md */

/* ===================== Redaktions-Utilities ===================== */
/* Über das Editor-Feld "Zusätzliche CSS-Klasse(n)" auf beliebige Blöcke
   setzbar; reversibel, nur display:none (Inhalt bleibt im DOM). */
@media(max-width:620px){.sl-hide-mobile{display:none!important}}
@media(max-width:900px){.sl-hide-tablet{display:none!important}}
@media(min-width:621px){.sl-show-mobile-only{display:none!important}}

/* Nur für Screenreader (u. a. der „(öffnet in neuem Tab)"-Hinweis an
   externen Links, siehe inc/external-links.php). */
.sl-visually-hidden{
  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;
}

/* ==================== Editor-Angleichung ==================== */
.editor-styles-wrapper .wp-block-post-content > .wp-block-group.alignfull > .wp-block-group.alignwide,
.editor-styles-wrapper .sl-run-grid,
.editor-styles-wrapper .sl-factbar,
.editor-styles-wrapper .sl-section > .wp-block-group.alignwide{
  max-width:1360px!important;width:min(calc(100% - 40px),1360px)!important;
}
.editor-styles-wrapper .sl-run-grid{align-items:stretch!important}
.editor-styles-wrapper .sl-run-card{min-height:315px!important;height:100%!important}
.editor-styles-wrapper .sl-service-card{height:100%!important}