﻿/**
 * ClubPress — Haupt-CSS (dsb-theme.css)
 *
 * Prinzip: Nur das, was theme.json NICHT leisten kann.
 * Layout/Colors/Spacing werden über theme.json + Templates gesteuert.
 * Hier:
 *  - Layout-Variablen (Spacing, Breiten, CSS Tokens)
 *  - Sidebar-Flex-Struktur
 *  - Block-Overrides (Submenu, Mobile-Drawer, Dropdowns)
 *  - Plugin-Content-Styling (Taxonomie-Tags, Filter-Bar)
 *  - Dark Mode (alle Seiten)
 *  - Responsive + Accessibility + Print
 *  - Startseiten-Layout (Hero, CTA-Karten)
 *
 * Single-Post-spezifisch (Relation Box, Related Posts, Card-Wrap):
 *  → dsb-single.css (lädt nur auf is_singular())
 *
 * Post-Card-Styles (Archiv, Suche):
 *  → dsb-archive.css (lädt nur auf is_archive/home/search)
 *
 * Version: 2.1.132
 */

/* ================================================================
   EDITOR STYLES — .editor-styles-wrapper
   Stellt sicher dass der Block-Editor visuell dem Frontend ähnelt.
   theme.json übernimmt Farben/Typo — hier nur strukturelle Korrekturen.
   ================================================================ */
.editor-styles-wrapper {
    font-family: var(--wp--preset--font-family--system);
    font-size: var(--wp--preset--font-size--base);
    line-height: 1.6;
    color: var(--wp--preset--color--body-text);
    background: var(--wp--preset--color--page-bg);
}
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6 {
    color: var(--wp--preset--color--primary-dark);
    font-weight: 700;
    line-height: 1.3;
}
.editor-styles-wrapper a {
    color: var(--wp--preset--color--primary);
}
.editor-styles-wrapper a:hover {
    color: var(--wp--preset--color--primary-dark);
}
/* Prevent editor toolbar from inheriting theme bg */
.editor-styles-wrapper .block-editor-block-list__layout.is-root-container > * {
    max-width: 1200px;
}

/* ================================================================
   X-98 ACCESSIBILITY — WCAG 2.1 AA
   Skip-Link, Focus-Visible, Kontrast-Korrekturen
   ================================================================ */

/* --- Skip-Link (WCAG 2.4.1) ----------------------------------- */
.dsb-skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.dsb-skip-link:focus {
    position: fixed;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    padding: 1rem 1.5rem;
    background: var(--wp--preset--color--primary-dark);
    color: var(--wp--preset--color--surface);
    z-index: 9999;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    outline: 3px solid var(--wp--preset--color--gold);
}

/* --- Focus-Visible (WCAG 2.4.7) ------------------------------- */
:focus-visible {
    outline: 3px solid var(--wp--preset--color--primary);
    outline-offset: 2px;
    border-radius: 2px;
}
.wp-block-navigation-item__content:focus-visible,
.wp-block-button__link:focus-visible {
    outline: 3px solid var(--wp--preset--color--gold);
    outline-offset: 3px;
}

/* --- Dark Mode Toggle Button (sk-dm-btn) ---------------------- */
.sk-dm-btn {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 3px 8px;
    border-radius: 3px;
    transition: background 0.2s;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sk-dm-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}
.sk-dm-btn:focus-visible {
    outline: 2px solid var(--wp--preset--color--gold);
    outline-offset: 2px;
}
body.sk-dark .sk-dm-btn {
    color: var(--wp--preset--color--gold, #c8a951);
}

/* ================================================================
   1. LAYOUT-VARIABLEN
   Spacings und Breiten die theme.json nicht als Custom Properties
   exportiert, aber mehrfach gebraucht werden.
   ================================================================ */
:root {
    --global-content-width: 1200px;
    --global-content-narrow-width: 842px;
    --global-content-edge-padding: 1.5rem;
    --global-content-boxed-padding: 2rem;

    --global-sm-spacing: 0.75rem;
    --global-md-spacing: 1.5rem;
    --global-lg-spacing: 2rem;

    /* === SK Color Tokens: Dark Mode structural === */
    --sk-dm-bg-deep:        #111;
    --sk-dm-bg:             #1a1a1a;
    --sk-dm-surface:        #222;
    --sk-dm-surface-alt:    #2a2a2a;
    --sk-dm-surface-green:  #1e2e1e;
    --sk-dm-border:         #333;
    --sk-dm-border-alt:     #3a3a3a;
    --sk-dm-border-mid:     #444;
    --sk-dm-border-light:   #555;
    --sk-dm-text:           #e5e5e5;
    --sk-dm-text-muted:     #ccc;
    --sk-dm-text-subtle:    #aaa;
    --sk-dm-text-dim:       #919191; /* X-98: #777→#919191 (WCAG AA: 4.55:1 on #2a2a2a) */
    --sk-dm-text-faint:     #666;
    --sk-dm-text-ticker:    #e8f5e1;
    --sk-dm-text-ticker-hover: #c8e8b8;

    /* === SK Color Tokens: Light Mode Utility === */
    --sk-text-strong:       #333;
    --sk-text-meta:         #666;
    --sk-text-muted:        #767676; /* X-98: #999→#767676 (WCAG AA: 4.54:1 on white) */
    --sk-border-light:      #ccc;
    --sk-border-warm:       #e8e4da;
    --sk-surface-warm:      #f5f3ee;
    --sk-surface-filter:    #f3f4f6;

    /* === SK Color Tokens: Alpha/RGB for rgba() === */
    --sk-primary-rgb:       45, 106, 31;     /* #2d6a1f */
    --sk-primary-dark-rgb:  26, 74, 26;      /* #1a4a1a */
    --sk-gold-rgb:          200, 169, 81;    /* #c8a951 */
}


/* ================================================================
   2. SEITEN-LAYOUT (Flex-Container für Sidebar-Layouts)
   theme.json kennt keinen Sidebar-Flex — wird hier manuell gebaut.
   ================================================================ */

/* X-97 CWV: content-visibility für Below-Fold-Sektionen (Rendering-Budget-Optimierung).
   Nur auf strukturelle Gruppen, nicht auf Hero (above fold) oder main content. */
.wp-block-group.alignfull:not(:first-child),
.dsb-content-area,
.dsb-layout-with-sidebar {
    content-visibility: auto;
    contain-intrinsic-size: auto 400px; /* Schätz-Höhe verhindert CLS beim Scroll */
}

body { margin: 0; }

.wp-site-blocks {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.wp-site-blocks > main,
.wp-site-blocks > .wp-block-group > main { flex: 1; }

.dsb-content-area {
    padding: 1rem var(--global-content-edge-padding) var(--global-lg-spacing);
}

.dsb-layout-with-sidebar {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.dsb-layout-with-sidebar > .dsb-content-main { flex: 1; min-width: 0; }
.dsb-layout-with-sidebar > .dsb-sidebar { flex-basis: 26% !important; flex-shrink: 0 !important; max-width: 26% !important; }

/* Sidebar-Spalten in wp:columns-Layouts (flex-basis inline style override) */
.wp-block-column[style*="flex-basis:38.2%"] {
    flex-basis: 26% !important;
    max-width: 26% !important;
}
.wp-block-column[style*="flex-basis:61.8%"] {
    flex-basis: 74% !important;
}

/* ================================================================
   3. TOPBAR
   ================================================================ */

/* Topbar-Leiste: gleiche Höhe wie Breadcrumb-Leiste (30px) */
.wp-block-group.alignfull.has-primary-dark-background-color {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.dsb-topbar {
    min-height: 24px;
    align-items: center;
}


/* ================================================================
   4. HEADER: Submenu-Dropdown + Site-Title
   Position, BG, Padding, Nav-Color kommen aus theme.json + Template.
   ================================================================ */

/* X-84: Wappen-Logo — feiner Goldring + Schatten
   Höhere Spezifität (0,2,0) nötig, da WP Core .wp-block-site-logo img { border-radius: inherit } (0,1,1) setzt
   object-fit/position: PNG-Wappen hat 1px asymm. Transparent-Padding (3px oben/links, 6px unten/rechts),
   daher Emblem-Mittelpunkt bei (49,49) statt (50,50) — 1px-Korrektur per object-position. */
.wp-block-site-logo .custom-logo {
    border-radius: 50% !important;
    box-shadow: 0 0 0 2px var(--wp--preset--color--gold), 0 4px 18px rgba(0,0,0,0.45);
    object-fit: none;
    object-position: calc(50% + 1px) calc(50% + 1px);
}

/* Site-Description im Header */
.dsb-header-branding .site-description {
    color: var(--wp--preset--color--footer-text);
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.2;
}

/* Submenu-Dropdown */
.dsb-header-main .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container,
.dsb-header-main .wp-block-navigation .wp-block-navigation__submenu-container {
    background: var(--wp--preset--color--primary);
    box-shadow: 0 2px 13px rgba(0,0,0,0.1);
    border: none;
    min-width: 200px;
}

.dsb-header-main .wp-block-navigation__submenu-container li {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.dsb-header-main .wp-block-navigation__submenu-container a {
    padding: 1em;
    font-size: 0.85rem;
}

.dsb-header-main .wp-block-navigation__submenu-container a:hover {
    background: var(--wp--preset--color--primary-dark);
}

.dsb-header-main .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
    background: var(--wp--preset--color--primary-dark);
}


/* ================================================================
   5. CONTENT & ENTRY
   ================================================================ */
.content-bg, .dsb-content-main {
    background: var(--wp--preset--color--surface);
}

.entry.single-entry { box-shadow: 0 15px 15px -10px rgba(0,0,0,0.05); }
.entry-content-wrap { padding: var(--global-content-boxed-padding); }

.entry-meta {
    font-size: 0.85rem;
    color: var(--wp--preset--color--text-light);
    display: flex;
    gap: 0.5em;
    align-items: center;
    flex-wrap: wrap;
}


/* ================================================================
   6. POST LOOP / QUERY BLOCK CARDS
   ================================================================ */
.entry.loop-entry { box-shadow: 0 15px 15px -10px rgba(0,0,0,0.05); }
.loop-entry .entry-content-wrap { padding: var(--global-content-boxed-padding); }

/* Basisstil für alle Query-Post-Items ohne neue Card-Klasse */
.wp-block-query:not(.sk-related-posts) .wp-block-post-featured-image { margin: 0; }
.wp-block-query:not(.sk-related-posts) .wp-block-post-featured-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}


/* ================================================================
   7. TAXONOMIE-TAGS (Plugin sksb-post-taxonomy-tags)
   ================================================================ */
.taxonomy-links,
.wp-block-post-terms {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.3rem;
}

.wp-block-post-terms a,
.taxonomy-links a {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--wp--preset--color--primary);
    text-decoration: none;
    padding: 1px 6px;
    border: 1px solid var(--wp--preset--color--primary-light);
    border-radius: 3px;
    background: var(--wp--preset--color--primary-bg);
}

.wp-block-post-terms a:hover,
.taxonomy-links a:hover {
    background: var(--wp--preset--color--primary-light);
}


/* ================================================================
   8. BLOCK-FEINHEITEN (Tables, Quotes, Captions, Gallery)
   ================================================================ */
.wp-block-table { border-collapse: collapse; }
.wp-block-table thead { border-bottom: 3px solid var(--wp--preset--color--text-light); }
.wp-block-table tfoot { border-top: 3px solid var(--wp--preset--color--text-light); }
.wp-block-table td,
.wp-block-table th {
    padding: 0.5em;
    border: 1px solid var(--wp--preset--color--text-light);
}

.wp-block-quote.has-text-align-right {
    border-left: none;
    border-right: 4px solid var(--wp--preset--color--body-text);
    padding-left: 0;
    padding-right: 1em;
}
.wp-block-quote.has-text-align-center { border: none; padding-left: 0; }

.wp-block-separator:not(.is-style-wide):not(.is-style-dots) { max-width: 160px; }
.wp-block-separator.has-background:not(.is-style-dots) {
    border-bottom: none;
    height: 1px;
}

.wp-block-image { margin-bottom: 0; }

.wp-block-image figcaption,
.wp-block-embed figcaption,
.wp-block-table figcaption,
.wp-block-audio figcaption,
.wp-block-video figcaption {
    color: var(--wp--preset--color--text-muted);
    font-size: 80%;
    text-align: center;
}

.wp-block-cover { display: flex; align-items: center; }


/* ================================================================
   9. SIDEBAR (Widgets)
   ================================================================ */
.dsb-sidebar .widget { margin-bottom: 1.5rem; }
.dsb-sidebar .widget-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--wp--preset--color--primary-dark);
    margin-bottom: 0.75rem;
}


/* ================================================================
   10. FOOTER  (X-83 — Gold-Polish)
   ================================================================ */
.dsb-footer {
    background: var(--wp--preset--color--footer-bg);
    color: var(--wp--preset--color--footer-text);
    padding: 2rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Links erben Absatzfarbe; Hover/Focus → Gold */
.dsb-footer a { color: inherit; text-decoration: none; transition: color .15s ease; }
.dsb-footer a:hover { color: var(--wp--preset--color--gold) !important; text-decoration: none; }
.dsb-footer a:focus-visible { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 2px; }

/* Spaltentitel Gold — Fallback (primär via has-gold-color im Template) */
.dsb-footer h4 {
    color: var(--wp--preset--color--gold);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(var(--sk-gold-rgb),.15);
}

/* Bottom-Bar — kein border-top (HR-Separator im Template übernimmt die Trennlinie) */
.dsb-footer-bottom {
    padding-top: 14px;
    margin-top: 24px;
    font-size: 12px;
    color: rgba(255,255,255,.6);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dsb-footer-bottom a { color: rgba(255,255,255,.6); text-decoration: none; }
.dsb-footer-bottom a:hover { color: var(--wp--preset--color--gold) !important; }

@media (max-width: 599px) {
    .dsb-footer-bottom {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
}


/* ================================================================
   11. DARK MODE
   body.sk-dark wird via sksb-topbar.php JS gesetzt.
   ================================================================ */
body.sk-dark {
    background: var(--sk-dm-bg);
    color: var(--sk-dm-text);
}

/* Globale Schrift- und Hintergrundfarben */
body.sk-dark .dsb-content-main,
body.sk-dark .content-bg { background: var(--sk-dm-surface-alt); color: var(--sk-dm-text); }

body.sk-dark p,
body.sk-dark li,
body.sk-dark td,
body.sk-dark th { color: var(--sk-dm-text); }

body.sk-dark h1, body.sk-dark h2, body.sk-dark h3,
body.sk-dark h4, body.sk-dark h5, body.sk-dark h6 { color: var(--wp--preset--color--surface); }

/* Query-Cards */
body.sk-dark .wp-block-query .wp-block-post {
    background: var(--sk-dm-surface-alt);
    border-color: var(--sk-dm-border-alt);
}
body.sk-dark .home .wp-block-post .wp-block-read-more {
    border-top-color: var(--sk-dm-border-alt);
}

/* Breadcrumb-Leiste */
body.sk-dark #sk-bc-bar {
    background: var(--sk-dm-bg-deep);
    border-bottom-color: var(--sk-dm-border);
}
body.sk-dark #sk-bc-bar a { color: var(--wp--preset--color--primary-vivid); }
body.sk-dark #sk-bc-bar .sk-bc-current { color: var(--sk-dm-text); }
body.sk-dark #sk-bc-bar .sk-bc-sep,
body.sk-dark #sk-bc-bar .sk-bc-dot { color: var(--sk-dm-border-light); }

/* Sidebar (Suchergebnisse + Widgets + Termine-Filter) */
body.sk-dark .dsb-sidebar-widgets .sk-sidebar,
body.sk-dark .dsb-sidebar .sk-sidebar,
body.sk-dark .sk-sidebar {
    background: var(--sk-dm-surface) !important;  /* !important nötig: WP block-group override */
    border-color: var(--sk-dm-border) !important; /* !important nötig: WP block border override */
    color: var(--sk-dm-text-muted); /* X-89: kein !important mehr — Inline-Styles in kalender.php weg */
}
body.sk-dark .sk-sidebar h4,
body.sk-dark .sk-sidebar .sk-filter-label,
body.sk-dark .dsb-sidebar-widgets h4 { color: var(--wp--preset--color--primary-vivid); }
body.sk-dark .dsb-sidebar-widgets ul li a,
body.sk-dark .dsb-sidebar-widgets p { color: var(--sk-dm-text-muted); }
/* .sk-sidebar a/hover: jetzt via .sk-filter-link / .sk-filter-link:hover (X-86, kein !important mehr nötig) */

/* ── X-86: Kalender-Filter CSS-Klassen (sksb-kalender.php) ─────────────────── */
/* Sidebar-Box: .sk-sidebar Basis schon vorhanden, nur fehlende Eigenschaften */
.sk-sidebar { border: 1px solid var(--wp--preset--color--primary-light); border-radius: 10px; background: var(--wp--preset--color--primary-bg); padding: 1.25rem; margin-bottom: 1rem; }

.sk-filter-label { font-size: 0.8rem; color: var(--sk-text-meta); margin: 0 0 0.75rem; line-height: 1.4; }

.sk-filter-heading { color: var(--wp--preset--color--primary); font-size: 0.9rem; font-weight: 700; margin: 0 0 0.5rem; }
.sk-filter-heading-ics { margin-top: 0.75rem; }

.sk-filter-list { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.sk-filter-month-list { margin: 0.3rem 0 0 12px; }

.sk-filter-link { color: var(--sk-text-strong); text-decoration: none; font-size: 0.85rem; }
.sk-filter-link-sm { font-size: 0.8rem; }
.sk-filter-link:hover { color: var(--wp--preset--color--primary-dark); }

.sk-filter-active { font-weight: 700; border-left: 3px solid var(--wp--preset--color--primary); padding-left: 8px; }

.sk-ics-link { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--wp--preset--color--primary-dark); text-decoration: none; padding: 4px 8px; background: var(--sk-surface-filter); border-radius: 4px; border: 1px solid var(--wp--preset--color--border); }
.sk-ics-link:hover { border-color: var(--wp--preset--color--primary); }
.sk-ics-hint { font-size: 0.7rem; color: var(--sk-text-muted); margin: 0.3rem 0 0; }

.sk-filter-reset-wrap { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--wp--preset--color--primary-light); }
.sk-filter-reset { display: inline-block; font-size: 0.8rem; color: var(--wp--preset--color--primary); text-decoration: none; font-weight: 600; }
.sk-filter-reset:hover { color: var(--wp--preset--color--primary-dark); }

/* Kalender-Pagination */
.sksb-kal-pagination { display: flex; justify-content: center; align-items: center; gap: 0.4rem; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--wp--preset--color--border); }
.sksb-kal-pag-btn { padding: 4px 10px; border: 1px solid var(--sk-border-light); border-radius: 4px; text-decoration: none; color: var(--sk-text-strong); font-size: 0.85rem; }
.sksb-kal-pag-btn-sm { padding: 4px 8px; border: none; }
.sksb-kal-pag-btn:hover { border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary-dark); }
.sksb-kal-pag-current { padding: 4px 10px; background: var(--wp--preset--color--primary); color: var(--wp--preset--color--surface); border-radius: 4px; font-size: 0.85rem; font-weight: 700; }
.sksb-kal-pag-ellipsis { color: var(--sk-text-muted); }

/* Dark Mode — X-86 */
body.sk-dark .sk-filter-label { color: var(--sk-dm-text-subtle); }
body.sk-dark .sk-filter-heading { color: var(--wp--preset--color--primary-vivid); }
body.sk-dark .sk-filter-link { color: var(--sk-dm-text-muted); }
body.sk-dark .sk-filter-link:hover { color: var(--wp--preset--color--surface); }
body.sk-dark .sk-filter-active { border-left-color: var(--wp--preset--color--primary-vivid); }
body.sk-dark .sk-ics-link { background: var(--sk-dm-surface-alt); border-color: var(--sk-dm-border-mid); color: var(--sk-dm-text-muted); }
body.sk-dark .sk-ics-link:hover { border-color: var(--wp--preset--color--primary-vivid); }
body.sk-dark .sk-ics-hint { color: var(--sk-dm-text-dim); }
body.sk-dark .sk-filter-reset-wrap { border-top-color: var(--sk-dm-border); }
body.sk-dark .sk-filter-reset { color: var(--wp--preset--color--primary-vivid); }
body.sk-dark .sksb-kal-pagination { border-top-color: var(--sk-dm-border); }
body.sk-dark .sksb-kal-pag-btn { border-color: var(--sk-dm-border-mid); color: var(--sk-dm-text-muted); }
body.sk-dark .sksb-kal-pag-btn:hover { border-color: var(--wp--preset--color--primary-vivid); color: var(--wp--preset--color--surface); }
body.sk-dark .sksb-kal-pag-current { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--surface); }
body.sk-dark .sksb-kal-pag-ellipsis { color: var(--sk-dm-text-faint); }

/* Suchfeld (topbar + suchseite) */
body.sk-dark #sksb-inline-search input,
body.sk-dark .sk-search-box input[type="search"] {
    background: var(--sk-dm-border);
    color: var(--sk-dm-text);
    border-color: var(--sk-dm-border-light);
}
body.sk-dark .sk-search-box {
    background: transparent;
}

/* Filter-Bar */
body.sk-dark .sk-filter-bar {
    background: var(--sk-dm-surface);
    border-color: var(--sk-dm-border);
}
body.sk-dark .sk-filter-bar select,
body.sk-dark .sk-filter-bar input {
    background: var(--sk-dm-border) !important; /* !important: sksb-filter-bar.php setzt background:#fff als Inline-Style */
    color: var(--sk-dm-text) !important;
    border-color: var(--sk-dm-border-light) !important;
    color-scheme: dark; /* native Browser-Listbox (Dropdown-Popup) im Dark-Mode rendern */
}

/* Sortier-Buttons (Suchseite) */
body.sk-dark .sk-sort-btn { background: var(--sk-dm-border); color: var(--sk-dm-text-muted); border-color: var(--sk-dm-border-light); }
body.sk-dark .sk-sort-btn.active { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--surface); }

/* Pagination-Buttons */
body.sk-dark .wp-block-query-pagination a,
body.sk-dark .page-numbers { color: var(--wp--preset--color--primary-vivid); }
body.sk-dark .page-numbers.current {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--surface);
}

/* Separatoren */
body.sk-dark .wp-block-separator { border-color: var(--sk-dm-border-alt); background-color: var(--sk-dm-border-alt); }

/* Tabellen */
body.sk-dark .wp-block-table td,
body.sk-dark .wp-block-table th { border-color: var(--sk-dm-border-alt); }
body.sk-dark .wp-block-table thead { border-bottom-color: var(--sk-dm-border-light); }

/* Single Post Card Dark Mode → nach dsb-single.css verschoben (v2.1.132) */
/* Related Section Dark Mode → nach dsb-single.css verschoben (v2.1.132) */

/* Links allgemein */
body.sk-dark a { color: var(--wp--preset--color--primary-vivid); }
body.sk-dark a:hover { color: var(--wp--preset--color--primary-vivid-hover); }

/* Dark mode: Hauptnavigation + Inhaltsbereich */


/* ================================================================
   12. MOBILE DRAWER (wp:navigation Responsive Overlay)
   ================================================================ */
.wp-block-navigation__responsive-container.is-menu-open {
    background: var(--wp--preset--color--primary-dark);
    padding: 2rem 1.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    padding: 1em 0.5em;
    display: block;
    width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    background: transparent;
    padding-left: 1rem;
    box-shadow: none;
    position: static;
    min-width: auto;
}


/* ================================================================
   13. RESPONSIVE
   ================================================================ */
@media all and (max-width: 1024px) {
    :root { --global-content-boxed-padding: 2rem; }
    .dsb-content-area {
        padding: var(--global-md-spacing) var(--global-content-edge-padding);
    }
    .dsb-layout-with-sidebar { flex-direction: column; }
    .dsb-layout-with-sidebar > .dsb-sidebar { width: 100%; flex-basis: 100% !important; max-width: 100% !important; }
}

@media all and (max-width: 767px) {
    :root {
        --global-content-boxed-padding: 1.5rem;
        --global-content-edge-padding: 1rem;
    }
    .dsb-content-area {
        padding: var(--global-sm-spacing) var(--global-content-edge-padding);
    }
    .entry-content-wrap,
    .loop-entry .entry-content-wrap { padding: 1.5rem; }
}


/* ================================================================
   14. FILTER-BAR (Plugin sksb-filter-bar.php)
   ================================================================ */
.sk-filter-bar {
    gap: 0.4rem;
    padding: 0.6rem 0.8rem;
}
.sk-filter-bar select {
    min-width: 80px;
    max-width: 150px;
    font-size: 0.85rem;
}
.sk-filter-bar input[type='text'] {
    min-width: 50px;
    width: 60px;
    font-size: 0.85rem;
}

/* ================================================================
   15. NAVIGATION — aktiver Menüpunkt fett
   ================================================================ */
.wp-block-navigation a[aria-current],
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation .current-menu-parent > a,
.wp-block-navigation .current-menu-ancestor > a {
    font-weight: 700;
}

/* ================================================================
   16. RELATION BOX + 17. ÄHNLICHE BEITRÄGE
   → nach dsb-single.css verschoben (v2.1.132, is_singular() only)
   ================================================================ */

/* ================================================================
   17. ÄHNLICHE BEITRÄGE → nach dsb-single.css verschoben (v2.1.132)
   ================================================================ */

/* ================================================================
   18. HOME-HERO, CTA-KARTEN & GLOBALE LAYOUT-KORREKTUREN
   ================================================================ */

/* Single-Post Card-Wrap + Video-Hero → nach dsb-single.css verschoben (v2.1.132) */

/* ── X-81: Home-Hero & Entry-CTA-Cards ─────────────────── */

/* X-85: Breadcrumb-Bar auch leer anzeigen (grauer Trennstreifen auf Startseite) */
/* Boxed layout: Header und Hero auf die Content-Breite (1200px) begrenzen.
   width: min(...) statt max-width, weil margin:auto in Flex-Column sonst
   shrink-wrap auslöst (Element schrumpft auf Inhalt statt auf 1200px zu wachsen). */
header.wp-block-template-part {
    width: min(1200px, 100%);
    margin-left: auto;
    margin-right: auto;
}
/* Hero: gleiche Breite wie Header/Content (boxed layout) */
.wp-site-blocks > .wp-block-cover.sksb-home-hero {
    width: min(1200px, 100%);
    margin-left: auto;
    margin-right: auto;
    margin-top: 0 !important;
    margin-block-start: 0 !important;
}

/* Hero: Gradient-Overlay statt flat dim */
.sksb-home-hero .wp-block-cover__background {
    background: linear-gradient(180deg, rgba(var(--sk-primary-dark-rgb),.28) 0%, rgba(var(--sk-primary-dark-rgb),.65) 100%) !important;
    opacity: 1 !important;
}

/* Hero: Medaillon ausgeblendet (X-85) */
.sksb-home-hero .sksb-hero-medaillon {
    display: none !important;
}
.sksb-home-hero .sksb-hero-medaillon--hidden {
    position: absolute;
    top: 28px;
    right: 36px;
    width: 90px;
    height: 90px;
    border: 2px solid var(--wp--preset--color--gold);
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(4px);
    z-index: 3;
    padding: 0 !important;
}
.sksb-home-hero .sksb-hero-medaillon p {
    margin: 0;
    padding: 0;
    text-align: center;
}
@media (max-width: 600px) {
    .sksb-home-hero .sksb-hero-medaillon { display: none !important; }
    .sksb-home-hero { min-height: 280px !important; }
    .sksb-home-hero h1 { font-size: 1.7rem !important; }
}

/* CTA-Cards: Ticker trennt Hero und Cards — kein negatives Margin mehr nötig */
.sksb-cta-cards-wrapper {
    position: relative;
    z-index: 1;
    /* Padding-bottom auf 0 — Ticker folgt direkt (Karten haben eigenen Innenabstand) */
    padding-bottom: 0 !important;
}

/* CTA-Karten: Innenabstand + Gap auf 2rem anheben → identisch mit Post-Raster und Außenspalten */
/* Ergebnis: alle 3 vertikalen Trennlinien fluchten exakt (card3=976px = sidebar=976px) */
@media (min-width: 601px) {
    .sksb-cta-cards.wp-block-columns {
        padding-left: 1rem;
        padding-right: 1rem;
        gap: 2rem !important;
    }
}

/* Außenspalten-Breiten an CTA-Raster (3 × 368px + 2 × 32px = 1168px) angleichen:
   col1 = 768px = 65.75%, col2 (Sidebar) = 368px = 31.51%
   Selector: Homepage-Post-Content → flow-Group → Columns */
@media (min-width: 782px) {
    .wp-block-post-content > .wp-block-group > .wp-block-columns > .wp-block-column:first-child {
        flex-basis: 65.75% !important;
    }
    .wp-block-post-content > .wp-block-group > .wp-block-columns > .wp-block-column:last-child {
        flex-basis: 31.51% !important;
    }
}

/* CTA-Card: Schatten + Hover-Lift */
.sksb-cta-card {
    box-shadow: 0 4px 20px rgba(0,0,0,.12);
    transition: transform .18s ease, box-shadow .18s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.sksb-cta-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0,0,0,.16);
}
/* Icon-Box kompakt — kein Hintergrund-Rahmen */
.sksb-cta-icon {
    display: inline-flex !important;
    width: fit-content;
    background-color: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* X-85: CTA-Card Buttons — gefüllt (normal) / Outline (hover) */
.sksb-cta-card .wp-block-button__link {
    color: var(--wp--preset--color--surface) !important;
    background-color: var(--wp--preset--color--primary) !important;
    border-color: var(--wp--preset--color--primary) !important;
}
.sksb-cta-card .wp-block-button__link:hover,
.sksb-cta-card .wp-block-button__link:focus {
    color: var(--wp--preset--color--primary) !important;
    background-color: transparent !important;
    border-color: var(--wp--preset--color--primary) !important;
}

/* Mobile: horizontal Scroll mit Snap */
@media (max-width: 600px) {
    .sksb-cta-cards-wrapper {
        padding-left: 1rem !important;
        padding-right: 0 !important;
    }
    .sksb-cta-cards.wp-block-columns {
        display: flex !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 0.75rem !important;
        flex-wrap: nowrap !important;
        padding-right: 1rem;
        padding-bottom: 0.5rem;
        /* Scrollbar dezent */
        scrollbar-width: thin;
        scrollbar-color: var(--wp--preset--color--gold) var(--wp--preset--color--gold-light);
    }
    .sksb-cta-cards.wp-block-columns > .wp-block-column {
        flex: 0 0 80% !important;
        width: 80% !important;
        scroll-snap-align: start;
    }
}

/* Aktiver Nav-Eintrag in Gold */
.dsb-header-main .wp-block-navigation a[aria-current="page"],
.dsb-header-main .wp-block-navigation .current-menu-item > a,
.dsb-header-main .wp-block-navigation li.sk-active > a {
    color: var(--wp--preset--color--gold) !important;
    font-weight: 700;
}
.dsb-header-main .wp-block-navigation a[aria-current="page"]:hover {
    opacity: 0.85;
    color: var(--wp--preset--color--gold) !important;
}

/* Single-Post Content-Styles → nach dsb-single.css verschoben (v2.1.132) */

/* ================================================================
   19. PAGINATION TOP (sksb-pagination-top.php)
   the_posts_pagination() via Shortcode-Kontext bekommt <br>-Tags
   durch wpautop — diese ausblenden + flex horizontal erzwingen.
   ================================================================ */
.sk-pagination-top .nav-links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin: 0 0 1rem;
}
.sk-pagination-top .nav-links br {
    display: none !important;
}
.sk-pagination-top .nav-links .page-numbers {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    text-decoration: none;
    color: var(--wp--preset--color--primary-dark);
    font-size: 0.9rem;
    font-weight: 500;
}
.sk-pagination-top .nav-links .page-numbers.current {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--surface);
    font-weight: 700;
}
.sk-pagination-top .nav-links .page-numbers:hover {
    background: var(--wp--preset--color--primary-light);
}




/* ================================================================
   9b. TAG-PILLS — sk-tag-l1/l2/l3/l4 + sk-disziplin-badge
   Gebraucht auf Archive- UND Single-Seiten.
   ================================================================ */
.sk-tag-l1 a,
.sk-tag-l1 .wp-block-post-terms__link {
    background-color: var(--wp--preset--color--gold) !important;
    color: var(--wp--preset--color--primary-dark) !important;
    border: 1.5px solid var(--wp--preset--color--gold);
}
.sk-tag-l1 a:hover,
.sk-tag-l1 .wp-block-post-terms__link:hover { opacity: 0.82; }

/* L2: WP category — dunkelgrün, weiß */
.sk-tag-l2 a,
.sk-tag-l2 .wp-block-post-terms__link {
    background-color: var(--wp--preset--color--primary-dark) !important;
    color: var(--wp--preset--color--surface) !important;
    border: 1.5px solid var(--wp--preset--color--primary-dark);
}
.sk-tag-l2 a:hover,
.sk-tag-l2 .wp-block-post-terms__link:hover { opacity: 0.82; }

/* L3: sk_disziplin — Rahmen grün, Füllung transparent */
.sk-tag-l3 a,
.sk-tag-l3 .wp-block-post-terms__link {
    background-color: transparent !important;
    color: var(--wp--preset--color--primary-dark) !important;
    border: 1.5px solid var(--wp--preset--color--primary-dark);
}
.sk-tag-l3 a:hover,
.sk-tag-l3 .wp-block-post-terms__link:hover {
    background-color: var(--wp--preset--color--primary-dark) !important;
    color: var(--wp--preset--color--surface) !important;
}

/* L4: sk_disziplin_kategorie — sehr subtil, grau */
/* X-93: tokenisiert auf --sk-text-meta (#666, WCAG AA ≥5:1 auf weiß) */
.sk-tag-l4 a,
.sk-tag-l4 .wp-block-post-terms__link {
    background-color: transparent !important;
    color: var(--sk-text-meta) !important;
    border: 1.5px solid var(--sk-border-light);
}
.sk-tag-l4 a:hover,
.sk-tag-l4 .wp-block-post-terms__link:hover {
    border-color: var(--sk-text-muted);
    color: var(--sk-text-strong) !important;
}

/* Separator zwischen mehreren Terms verstecken */
.sk-tag-row .wp-block-post-terms__separator {
    display: none;
}

/* Pill-Basis für L-Tags außerhalb .sk-tag-row (Search, Aktuelles, Related Cards, etc.)
 * Innerhalb .sk-tag-row gibt .sk-tag-row a dieselben Werte — keine Kollision. */
.sk-tag-l1 a, .sk-tag-l2 a, .sk-tag-l3 a, .sk-tag-l4 a,
.sk-tag-l1 .wp-block-post-terms__link,
.sk-tag-l2 .wp-block-post-terms__link,
.sk-tag-l3 .wp-block-post-terms__link,
.sk-tag-l4 .wp-block-post-terms__link {
    display: inline-block;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: opacity .15s;
}

/* sk-disziplin-badge: Kategorie-Pille im Aktuelles-Plugin (L2 Dunkelgrün) */
.sk-disziplin-badge {
    display: inline-block;
    background-color: var(--wp--preset--color--primary-dark);
    color: var(--wp--preset--color--surface) !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
}

/* =================================================================
   Abstand zwischen Beitragsblock und Footer halbieren
   main padding-bottom 32px→16px + Block-Gap 24px→12px = 56px→28px
   ================================================================= */
main.wp-block-group {
    padding-bottom: 1rem !important; /* war 2rem */
}
.wp-site-blocks > .wp-block-template-part:last-child {
    margin-block-start: 12px !important;
}

/* =================================================================
   Sidebar rechts: Abstand zwischen Nächster-Termin und Pinwand halbieren
   Spacer (24px mt + 24px h) + sksb-pinned-wrap (24px mt) = 72px → 36px
   ================================================================= */
.wp-block-post-content .wp-block-column:last-child .wp-block-spacer {
    margin-top: 12px !important;
    height: 12px !important;
}
.wp-block-post-content .wp-block-column:last-child .sksb-pinned-wrap {
    margin-top: 12px !important;
}

/* =================================================================
   X-91b: "Aktuelles" H2 + Button als Mini-Header/Footer in grüner Box
   ROLLBACK: diesen CSS-Block + add_action X-91b in functions.php entfernen
   Box: padding=20px, border-radius=12px → negative Margins exakt angepasst
   ================================================================= */

.sk-news-box > h2 {
    /* Mini-Header: weißer Text, grüne Box, Radius oben wie Container */
    color: var(--wp--preset--color--surface) !important;
    text-align: center;
    font-size: 1rem !important;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.7rem 20px;
    margin: -20px -20px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px 12px 0 0;
}

.sk-news-box > .wp-block-buttons {
    /* Mini-Footer: leicht abgedunkelt, Radius unten wie Container */
    margin: 16px -20px -20px !important;
    padding: 0.7rem 20px;
    background: rgba(0, 0, 0, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0 0 12px 12px;
    justify-content: center;
}

/* =================================================================
   X-91: SK News-Ticker (Homepage, [sk_ticker]-Shortcode)
   ================================================================= */

.sk-ticker-wrap {
    display: flex;
    align-items: center;
    background: var(--wp--preset--color--primary-dark, #162d0e);
    color: var(--sk-dm-text-ticker);
    height: 2.25rem;
    overflow: hidden;
    font-size: 0.82rem;
    letter-spacing: 0.01em;
    /* Auf Content-Breite begrenzen, zentriert */
    width: 100%;
    max-width: var(--global-content-width, 1200px);
    margin-inline: auto;
    border-radius: 0;
    /* Abstand nach oben zu den Karten */
    margin-block-start: 12px !important;
}

.sk-ticker-label {
    flex-shrink: 0;
    padding: 0 0.9rem;
    background: var(--wp--preset--color--primary, #2d6a1f);
    color: var(--wp--preset--color--surface);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.sk-ticker-overflow {
    flex: 1;
    overflow: hidden;
    position: relative;
    /* Soft fade-out rechts */
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
}

.sk-ticker-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding-left: 2rem;
    animation: sk-ticker-scroll var(--sk-ticker-dur, 40s) linear infinite;
    will-change: transform;
}

.sk-ticker-track:hover,
.sk-ticker-wrap:hover .sk-ticker-track {
    animation-play-state: paused;
}

.sk-ticker-sep {
    padding: 0 1rem;
    opacity: 0.4;
}

.sk-ticker-track a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s;
}

.sk-ticker-track a:hover {
    color: var(--sk-dm-text-ticker-hover);
    text-decoration: underline;
}

@keyframes sk-ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}


/* ================================================================
   PREFERS-REDUCED-MOTION (WCAG 2.3.3 / Animation from Interactions)
   Deaktiviert alle Animationen und Transitions für Nutzer die
   weniger Bewegung bevorzugen (Gleichgewichtsstörungen, Epilepsie etc.)
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    /* Ticker anhalten */
    .sk-ticker-track {
        animation: none !important;
        /* Statisch: ersten Eintrag zeigen */
        overflow: hidden;
    }
    /* Karten-Hover-Lift deaktivieren */
    .sksb-post-card:hover,
    .sk-related-card:hover {
        transform: none !important;
    }
    /* Fokus-Outline sofort (kein Fade) */
    :focus-visible {
        transition: none !important;
    }
}


/* ================================================================
   PRINT STYLES — @media print
   Versteckt Navigation/Sidebar/Footer, optimiert für Druck.
   ================================================================ */
@media print {
    /* Nicht-Inhalt ausblenden */
    .dsb-topbar,
    .wp-block-navigation,
    .dsb-footer,
    .sk-sidebar,
    .dsb-sidebar,
    .sk-filter-bar,
    .sksb-kal-pagination,
    .sk-ticker-wrap,
    .sk-back-link,
    .sk-sort-wrap,
    .wp-block-buttons,
    .wp-block-search,
    .wp-block-query-pagination { display: none !important; }

    /* Lesbare Basis */
    body,
    body.sk-dark {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
        line-height: 1.5;
    }

    /* Überschriften */
    h1, h2, h3, h4, h5, h6 {
        color: #000 !important;
        page-break-after: avoid;
    }

    /* Links */
    a { color: #000 !important; text-decoration: underline; }
    .dsb-content-main a[href]:not([href^="#"]):not([href^="javascript:"])::after {
        content: " (" attr(href) ")";
        font-size: 0.75em;
        color: #555;
        word-break: break-all;
    }

    /* Bilder */
    img, figure {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    /* Cover-Block Hero nicht drucken */
    .sksb-home-hero,
    .wp-block-cover { display: none !important; }

    /* Content-Breite für Druck */
    .dsb-content-area,
    .dsb-content-main {
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Seitenumbruch vor Hauptabschnitten */
    h2 { page-break-before: auto; }
    .sk-related-section { page-break-before: always; }
}

/* ================================================================
   19. BLOCK STYLES (register_block_style)
   Stil-Varianten für Core-Blöcke — per is-style-* Klasse aktiv.
   ================================================================ */

/* core/image → Abgerundet */
.wp-block-image.is-style-rounded img {
    border-radius: 12px;
}
.wp-block-image.is-style-rounded figcaption {
    border-radius: 0 0 12px 12px;
}

/* core/quote → Akzent */
.wp-block-quote.is-style-accent {
    border-left: 4px solid var(--wp--preset--color--primary, #2d6a1f);
    padding-left: 1.25rem;
    font-style: normal;
}
.wp-block-quote.is-style-accent cite {
    color: var(--wp--preset--color--primary-dark, #1a4012);
    font-size: .875em;
}

/* Dark Mode */
body.sk-dark .wp-block-quote.is-style-accent {
    border-left-color: var(--wp--preset--color--primary-light, #5a9e45);
}
body.sk-dark .wp-block-quote.is-style-accent cite {
    color: var(--wp--preset--color--primary-light, #5a9e45);
}

/* SKSB: BETA-Badge via ::after auf Dark-Mode-Button */
#sk-dm-link::after {
    content: "BETA";
    display: inline-block;
    background: var(--wp--preset--color--gold, #c8a951);
    color: var(--wp--preset--color--footer-bg, #1a2a12);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2px 5px;
    border-radius: 3px;
    line-height: 1.4;
    vertical-align: middle;
    white-space: nowrap;
    margin-left: 5px;
}
