/*
Theme Name: Schachverein Darkmode Theme
Author: Basti
Description: Ein modernes, benutzerfreundliches Darkmode-Theme für einen Schachverein.
Version: 2.0
*/

/* TODO: alle px-Angaben auf em ändern */

/* Inter selbst gehostet statt über Google Fonts geladen (war TODO in
   header.php) - vermeidet den Drittanbieter-Request zu Google beim
   jedem Seitenaufruf (Datenschutz/DSGVO: Google Fonts CDN uebertraegt
   sonst die Besucher-IP an Google, ohne dass die Datenschutzerklaerung
   das bisher erwaehnt hat). Eine einzige Variable-Font-Datei deckt
   alle verwendeten Schnitte (400-800) ab, genau wie Google es selbst
   fuer "Inter" ausliefert - deshalb reicht eine Datei fuer den
   kompletten Bereich statt fuenf einzelne Schnitte. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/inter-variable-latin.woff2') format('woff2');
}

:root {
    --bg-dark: #121212;
    --bg-surface: #1e1e1e;
    --bg-card: #252525;
    --text-primary: #e0e0e0;
    --text-muted: #a0a0a0;
    --accent-gold: #dfb76c;
    --accent-gold-hover: #f1cd8a;
    --border-color: #333333;

    --font-display: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-main: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    --space-xs: 0.5rem;
    --space-sm: 0.9375rem;
    --space-md: 1.5625rem;
    --space-lg: 2.5rem;
    --space-xl: 3.75rem;

    --radius: 0.625rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
    height: 100%;
}

body {
    background-color: #0b0b0b;
    background-image: linear-gradient(
        rgba(18, 18, 18, 0.65),
        rgba(18, 18, 18, 0.65)
    ),
    url('images/hintergrund.jpg?v=2');
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;

    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* ---------- Typografie ---------- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.25;
    color: var(--accent-gold);
}

h1 { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.25rem; font-weight: 600; }

p { margin-bottom: var(--space-sm); }
p:last-child { margin-bottom: 0; }

.yt-facade {
    position: relative;
    aspect-ratio: 16 / 9;
    cursor: pointer;
    overflow: hidden;
    border-radius: 8px;
}
.yt-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.yt-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border-radius: 12px;
}

/* ---------- Einfache Textseiten (Impressum, Datenschutz, Satzung, Termine) ----------
   Diese Seiten laufen ueber das generische page.php-Template
   (<article class="post-card"><div class="entry-content">, ohne
   "-accent"-Modifier - die anderen .post-card-accent-Verwendungen in
   Beitragslisten sind davon nicht betroffen). Ueberschriften hatten
   wegen des globalen "* {margin:0}"-Resets keinerlei Abstand zum
   nachfolgenden Text und wirkten dadurch zusammengequetscht; zudem lief
   der Fliesstext ueber die volle 1200px-Containerbreite. */
.post-card .entry-content {
    max-width: 48.75rem;
    line-height: 1.7;
}

/* Sobald Punkt-Boxen (.info-block) im Spiel sind, wirkt die schmale
   780px-Lesespalte neben der vollen Karte seltsam abgeschnitten (viel
   leerer Platz rechts) - dann darf der Inhalt die ganze Kartenbreite
   nutzen, die Boxen sorgen selbst fuer angenehmen Innenabstand. Reine
   Fliesstext-Seiten ohne Boxen (Satzung, Termine) behalten die
   schmalere Lesebreite von oben. */
.post-card .entry-content:has(.info-block) {
    max-width: none;
}

/* Letzter Absatz vor der ersten Box (egal ob ein einzelner Einleitungssatz
   wie im Impressum oder mehrere Absaetze wie in der Datenschutzerklaerung):
   gleicher Abstand nach unten (zur ersten Box) wie die Ueberschrift ihn
   nach oben hat. */
.post-card .entry-content > p:has(+ .info-block) {
    margin-bottom: var(--space-md);
}

.post-card .entry-content h2,
.post-card .entry-content h3,
.post-card .entry-content h4 {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
}

.post-card .entry-content > h2:first-child,
.post-card .entry-content > h3:first-child,
.post-card .entry-content > h4:first-child {
    margin-top: 0;
}

.post-card .entry-content ul,
.post-card .entry-content ol {
    margin: 0 0 var(--space-sm) 1.3em;
}

.post-card .entry-content li {
    margin-bottom: 0.375rem;
}

.post-card .entry-content li > h3:first-child,
.post-card .entry-content li > h4:first-child {
    margin-top: 0;
    margin-bottom: 0.375rem;
}

/* Einzelne Punkte (Impressum-Abschnitte, Datenschutz-Ziffern) als
   abgesetzte Box, gleicher Look wie die Datei-Download-Bloecke -
   verhindert, dass alles wie ein einziger endloser Fliesstext wirkt. */
.post-card .entry-content .info-block {
    background-color: rgba(255, 255, 255, 0.03);
    border: 0.0625rem solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}

.post-card .entry-content .info-block > *:first-child {
    margin-top: 0;
}

.post-card .entry-content .info-block > *:last-child,
.post-card .entry-content .info-block > ul:last-child li:last-child > *:last-child {
    margin-bottom: 0;
}

/* ---------- Karten & Sidebar ---------- */

.hero-video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 0.5rem;
    background-color: #000;
}

.hero-video-wrapper iframe, 
.hero-video-wrapper video,
.hero-video-wrapper object,
.hero-video-wrapper embed {
    display: block;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

.post-card, .site-sidebar {
    position: relative;
    padding: var(--space-md) !important;
    border-radius: var(--radius) !important;
    background-color: rgba(25, 25, 25, 0.82) !important;
    backdrop-filter: blur(0.75rem);
    -webkit-backdrop-filter: blur(0.75rem);
    border: 0.0625rem solid rgba(255, 255, 255, 0.08) !important;
    margin-bottom: var(--space-md);
    
    /* FIX: Verhindert das Abschneiden von langen Texten */
    height: auto !important;
    overflow: visible !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.site-sidebar .widget {
    margin-bottom: var(--space-md);
    height: auto !important;
    overflow: visible !important;
}
.site-sidebar .widget:last-child {
    margin-bottom: 0;
}

a {
    color: var(--accent-gold);
    text-decoration: none;
    transition: color 0.25s ease;
}

a:hover {
    color: var(--accent-gold-hover);
}

/* ---------- Header & Navigation ---------- */

.site-header {
    background-color: rgba(30, 30, 30, 0.85);
    border-bottom: 0.125rem solid var(--accent-gold);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 0.25rem 1.25rem rgba(0,0,0,0.5);
    backdrop-filter: blur(0.625rem);
    -webkit-backdrop-filter: blur(0.625rem);
}

.header-container {
    max-width: 82.5rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Etwas großzügiger als vorher (var(--space-sm)=15px) - das ist jetzt
       der Zustand direkt beim Laden/oben auf der Seite. Sobald gescrollt
       wird, schrumpft es über .site-header.is-scrolled wieder auf die
       bisherige Größe (siehe dort). */
    padding: 0.75rem 1.25rem;
    transition: padding 0.3s ease;
}

.site-header.is-scrolled .header-container {
    padding: var(--space-sm) 1.25rem;
}

.logo {
    /* Erlaubt dem Logo als Flex-Kind von .header-container, bei Bedarf
       schmaler zu werden als sein Inhalt (Standard bei Flex-Items ist,
       NICHT unter die Inhaltsbreite zu schrumpfen) - Voraussetzung dafür,
       dass der Titeltext unten per Ellipsis kürzen kann, statt den
       Burger-Button auf schmalen Bildschirmen aus dem sichtbaren Bereich
       zu drängen. */
    min-width: 0;
}

.logo a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-display);
    /* Etwas größer als vorher (war 26px) - das ist jetzt der Zustand
       direkt beim Laden/oben auf der Seite, siehe .is-scrolled unten für
       das Zurückschrumpfen beim Scrollen. Der eigene, noch kleinere Wert
       für schmale Handy-Breiten (@media max-width:480px) bleibt davon
       unberührt, da jene Regel später im Quellcode steht und bei
       gleicher Spezifität automatisch gewinnt - dort soll der Header
       nicht zusätzlich größer starten, der Platz ist ohnehin schon knapp. */
    font-size: 1.875rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #ffffff;
    min-width: 0;
    transition: font-size 0.3s ease;
}

.site-header.is-scrolled .logo a {
    font-size: 1.625rem;
}

.site-logo-icon {
    height: 4.625rem;
    width: auto;
    flex-shrink: 0;
    transition: height 0.3s ease;
}

.site-header.is-scrolled .site-logo-icon {
    height: 3.75rem;
}

/* Ab 940px bleibt der Header durchgehend bei der (bisherigen) kleineren
   Größe - kein größerer Zustand mehr direkt beim Laden/oben auf der
   Seite, unabhängig vom Scroll-Status. Auf diesen Bildschirmbreiten ist
   der zusätzliche Platzbedarf des größeren Headers nicht mehr
   gerechtfertigt. Bewusst VOR dem @media(max-width:480px)-Block weiter
   unten platziert: gleiche Selektor-Spezifität, aber durch die frühere
   Position im Quellcode gewinnt bei ≤480px zuverlässig weiterhin die
   noch kleinere, eigene Größe von dort statt dieser Regel hier. */
@media (max-width: 58.75rem) {
    .header-container {
        padding: var(--space-sm) 1.25rem;
    }

    .logo a {
        font-size: 1.625rem;
    }

    .site-logo-icon {
        height: 3.75rem;
    }

    /* Exzerpte (siehe schachverein_responsive_excerpt() in functions.php
       und .excerpt-long/-medium/-short weiter unten): ab hier die
       25-Wörter-Version statt der 55-Wörter-Version. !important auf
       "block" nötig, da weiter unten im Quellcode eine allgemeine,
       unbedingte ".excerpt-medium{display:none}"-Basisregel mit
       gleicher Spezifität steht, die sonst trotz kleinerer Bildschirm-
       breite hier gewinnen würde (spätere Regel schlägt frühere bei
       Gleichstand, unabhängig vom Media Query). */
    .excerpt-long,
    .excerpt-short {
        display: none;
    }

    .excerpt-medium {
        display: block !important;
    }
}

.logo-text {
    /* Titeltext bleibt immer sichtbar, kürzt sich aber mit "…" statt den
       Burger-Button zu verdrängen, falls auf sehr schmalen Bildschirmen
       (oder mit einer breiter rendernden Schriftart) doch nicht genug
       Platz für den vollen Namen ist. min-width:0 ist nötig, weil Flex-
       Items sonst nicht unter ihre eigene Inhaltsbreite schrumpfen. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.main-navigation ul {
    list-style: none;
    display: flex;
}

/* Footer-Reiter (Datenschutz/Impressum/Satzung/Credits/Kontakt) im
   Burger-Menü: auf breiten Bildschirmen ausgeblendet, da dort ohnehin
   der normale Footer direkt erreichbar ist - nur innerhalb des
   Burger-Menüs (siehe @media max-width:1280px weiter unten) sichtbar,
   wo man sonst bis zum Seitenende scrollen müsste. Selektor bewusst mit
   ".main-navigation" davor (zwei Klassen statt einer), da sonst die
   Regel ".main-navigation ul{display:flex}" direkt darüber (1 Klasse +
   1 Typ-Selektor) trotz gleicher/späterer Position im Quellcode
   spezifischer wäre und gewinnen würde. */
.main-navigation .mobile-footer-links-label,
.main-navigation .mobile-footer-links {
    display: none;
}

.main-navigation li {
    position: relative;
}

.main-navigation a {
    display: block;
    padding: 0.625rem 0.9375rem;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.95rem;
}

.main-navigation li:hover > a {
    color: var(--accent-gold);
}


.main-navigation ul ul {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: rgba(30, 30, 30, 0.95);
    border: 0.0625rem solid var(--border-color);
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.6);
    min-width: 13.125rem;
    border-radius: 0.375rem;
    overflow: hidden;
    backdrop-filter: blur(0.625rem);
    -webkit-backdrop-filter: blur(0.625rem);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.375rem);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.main-navigation ul ul li { width: 100%; }

.main-navigation ul ul a {
    padding: 0.75rem 0.9375rem;
    border-bottom: 0.0625rem solid var(--border-color);
}
.main-navigation ul ul li:last-child a { border-bottom: none; }

.main-navigation li:hover > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ---------- Burger-Button ---------- */

.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 0.3125rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1100;
    /* Darf als Flex-Kind von .header-container nie kleiner werden - der
       Titeltext daneben soll bei Platzmangel per Ellipsis kürzen, nicht
       der Button. */
    flex-shrink: 0;
}

.menu-toggle .bar {
    width: 1.625rem;
    height: 0.125rem;
    background-color: var(--accent-gold);
    border-radius: 0.125rem;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.menu-toggle.is-active .bar:nth-child(1) { transform: translateY(0.4375rem) rotate(45deg); }
.menu-toggle.is-active .bar:nth-child(2) { opacity: 0; }
.menu-toggle.is-active .bar:nth-child(3) { transform: translateY(-0.4375rem) rotate(-45deg); }

/* ---------- Hauptinhalt Layout ---------- */

.site-content {
    max-width: 75rem;
    margin: 7.5rem auto var(--space-lg) auto;
    padding: 0 1.25rem;
    display: flex;
    gap: var(--space-md);
    flex: 1;
    width: 100%;
}

.main-content { flex: 3; min-width: 0; }
.main-content.full-width { flex: 1; }

.site-sidebar {
    flex: 1;
    height: fit-content;
}

.widget h3 {
    color: var(--accent-gold);
    margin-bottom: var(--space-sm);
    border-bottom: 0.0625rem solid var(--border-color);
    padding-bottom: 0.3125rem;
}

.widget ul { list-style: none; }
.widget li {
    padding: 0.5rem 0;
    border-bottom: 0.0625rem solid #2a2a2a;
}
.widget li:last-child { border-bottom: none; }

/* ---------- Pagination Styling ---------- */
/* flex-wrap:wrap ist Absicht: bei vielen Seiten (z.B. Seite 4 von 7,
   dazu "Neuer"/"Älter") reicht die Breite auf schmalen Handy-Displays
   nicht für eine einzelne Zeile - ohne Umbruch liefen die Buttons rechts
   aus dem sichtbaren Bereich bzw. wurden unbrauchbar schmal
   zusammengequetscht (u.a. "Älter" ab ca. 360-420px, je nachdem wie
   viele Seitenzahlen gerade angezeigt werden). PHP kennt die
   Bildschirmbreite nicht und kann die Anzahl der Seitenzahlen nicht
   serverseitig reduzieren - Umbrechen auf mehrere Zeilen ist die
   verlässliche Lösung, die bei jeder Seitenanzahl/Bildschirmbreite
   funktioniert. */
.pagination-wrapper .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    row-gap: 0.625rem;
    margin-top: var(--space-md);
}

/* Alle Pagination-Buttons (Seitenzahlen wie "Neuer"/"Älter") einheitlich:
   kein Groesser-Werden beim Hover, sondern ein reiner Farbtausch -
   Standard gold gefuellt mit dunkler Schrift, beim Hover dreht es sich
   zum bekannten Grauton mit goldener Schrift/Umrandung. */
.pagination-wrapper .page-numbers {
    padding: 0.5rem 0.875rem;
    background-color: var(--accent-gold);
    border: 0.0625rem solid var(--accent-gold);
    color: #1a1a1a;
    border-radius: 0.25rem;
    font-weight: 500;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.pagination-wrapper .page-numbers.current,
.pagination-wrapper .page-numbers:hover {
    background-color: var(--bg-card);
    border-color: var(--accent-gold);
    color: var(--accent-gold) !important;
}

/* Einheitlicher Gold-CTA-Button (Archiv-Verweise, Formular-Absenden,
   404-Rueckkehr-Link): kein Groesser-Werden/Schatten-Wachsen mehr beim
   Hover, nur der gleiche Farbtausch wie bei Pagination und
   Datei-Download-Button - Standard gold gefuellt, beim Hover Grauton
   mit goldener Schrift/Umrandung. */
.archiv-note-box a,
.gold-cta-button {
    display: inline-block;
    color: #1a1a1a;
    background-color: var(--accent-gold);
    border: 0.0625rem solid var(--accent-gold);
    padding: 0.625rem 1.375rem;
    border-radius: var(--radius);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.archiv-note-box a:hover,
.gold-cta-button:hover {
    background-color: var(--bg-card);
    border-color: var(--accent-gold);
    color: var(--accent-gold) !important;
}

/* Hinweis-Box in Archiv/Suche: nur sichtbar, wenn die Sidebar
   (Suche/Kategorien) unter die Beitragsliste rutscht - siehe
   @media(max-width:992px) weiter unten, wo das zweispaltige Layout
   umbricht. Ohne diesen Hinweis ist auf den ersten Blick nicht
   erkennbar, dass Suche und Kategorien noch weiter unten stehen, statt
   wie auf breiteren Bildschirmen direkt sichtbar daneben. */
.archive-sidebar-hint {
    display: none;
    position: relative;
    margin-bottom: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background-color: rgba(223, 183, 108, 0.14);
    border: 0.0625rem solid rgba(223, 183, 108, 0.3);
    border-radius: var(--radius);
    text-align: center;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* Klickfläche über die gesamte Box statt nur über den Linktext - gleiches
   Stretched-Link-Prinzip wie bei den Beitrags-Karten
   (.post-card-link-stretch): .archive-sidebar-hint ist "position:relative",
   der Link braucht das selbst nicht zu sein, da inset:0 sich automatisch
   am nächsten positionierten Vorfahren orientiert (hier die Box, nicht
   der Link). */
.archive-sidebar-hint a::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* Hover wirkt jetzt auf die ganze Box (nicht nur den Text darin), da die
   Klickfläche die ganze Box abdeckt - etwas kräftigere Füllung plus ein
   deutlich sichtbarerer, voll deckender Rand statt des blassen
   Standardrands. */
.archive-sidebar-hint:has(a:hover) {
    background-color: rgba(223, 183, 108, 0.2);
    border-color: var(--accent-gold);
}

.archive-sidebar-hint a {
    color: var(--accent-gold);
    font-weight: 600;
}

.archive-sidebar-hint a:hover {
    color: var(--accent-gold-hover);
}

/* Sprungziel des Hinweis-Links oben: ohne scroll-margin-top springt der
   Browser die Sidebar exakt an die Fensteroberkante, wo sie größtenteils
   unter dem fixierten Header (site-header, position:fixed) verschwindet
   bzw. direkt daran klebt. scroll-margin-top hält beim Ankerspringen
   automatisch diesen Abstand ein, ohne die normale Fließposition der
   Sidebar zu beeinflussen. */
#site-sidebar {
    scroll-margin-top: 6.875rem;
}

/* ---------- Suchformular ---------- */

.search-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.search-form .search-field,
input[type="search"] {
    /* WordPress' Standard-Suchformular verpackt das Eingabefeld in ein
       <label> - das ist kein Flex-Container, wodurch "flex:1" hier ins
       Leere lief und das Feld auf seiner Browser-Standardbreite blieb
       statt wie der Rest der Sidebar die volle Breite einzunehmen.
       width:100% behebt das unabhängig vom umschließenden Element. */
    width: 100%;
    flex: 1;
    padding: 0.625rem 1rem;
    border-radius: var(--radius);
    border: 0.0625rem solid var(--border-color);
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 0.9rem;
    min-width: 0;
}

.search-form .search-field:focus,
input[type="search"]:focus {
    outline: none;
    border-color: var(--accent-gold);
}

.search-form .search-submit,
input[type="submit"].search-submit {
    width: 100%;
    padding: 0.625rem 1.125rem;
    border-radius: var(--radius);
    border: 0.0625rem solid var(--accent-gold);
    background-color: var(--accent-gold);
    color: #1a1a1a;
    font-family: var(--font-main);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
    white-space: nowrap;
}

/* Gleicher Hover wie alle anderen Buttons der Seite (Pagination,
   Datei-Download, Gold-CTA): reiner Farbtausch auf den bekannten
   Grauton statt des alten Aufhellens - der Suchen-Button war bei der
   Button-Hover-Vereinheitlichung übersehen worden. */
.search-form .search-submit:hover,
input[type="submit"].search-submit:hover {
    background-color: var(--bg-card);
    border-color: var(--accent-gold);
    color: var(--accent-gold) !important;
}

.site-footer {
    background-color: rgba(25, 25, 25, 0.9);
    border-top: 0.0625rem solid rgba(255, 255, 255, 0.08); /* Deine Anpassung */
    padding: var(--space-md) 0 0 0;
    margin-top: auto; /* Erzwingt Sticky-Verhalten am Seitenende */
    width: 100%;
    box-shadow: 0 -0.25rem 1.25rem rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(0.75rem);
    -webkit-backdrop-filter: blur(0.75rem);
}

/* ---------- Footer: Partnerlogos ---------- */

.footer-partners {
    max-width: 75rem;
    margin: 0 auto;
    padding: 0 1.25rem;
    text-align: center;
}

.footer-partners-label {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-sm);
}

.footer-partners-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    gap: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.08);
}

.footer-partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    /* Macht jedes Logo unabhängig vom Original-Grauton komplett weiß:
       brightness(0) -> alles schwarz (Transparenz bleibt erhalten), invert(1) -> weiß */
    filter: brightness(0) invert(1);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.footer-partner-logo:hover {
    opacity: 1;
    transform: translateY(-0.125rem);
}

.footer-partner-logo img {
    height: 4.25rem;
    width: auto;
    max-width: 13.75rem;
    object-fit: contain;
}

/* Bei genau 4 Partnerlogos passen im Flex-Zeilenumbruch zwischen ca.
   601px und 710px nur noch 3 Logos in eine Zeile - das vierte rutscht
   allein in eine zweite Zeile. Statt eines festen 2x2-Rasters (das später,
   sobald mehr Partner dazukommen, ohnehin wieder in eine andere Aufteilung
   wechseln würde) werden die Logos hier einfach schon etwas früher
   verkleinert - die gleiche Lösung wie unten ab 600px, nur mit etwas
   höherer Schwelle, damit alle 4 in einer Zeile bleiben. */
@media (max-width: 44.375rem) {
    .footer-partners-logos {
        gap: var(--space-md);
    }

    .footer-partner-logo img {
        height: 3rem;
        max-width: 10rem;
    }
}

/* Auch verkleinert (48px, siehe oben) passen 4 Logos unter ca. 500px
   nicht mehr nebeneinander - dort dann doch lieber ein festes 2x2-Raster
   als ein erneutes 3-oben-1-unten. */
@media (max-width: 31.1875rem) {
    .footer-partners-logos {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
        row-gap: var(--space-md);
    }
}

.footer-container {
    max-width: 75rem;
    margin: 0 auto;
    padding: var(--space-md) 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

/* RADIKALER UNIVERSAL-FIX: Greift bei JEDER Liste, die sich im Footer befindet */
.site-footer ul,
.site-footer div > ul,
.site-footer nav ul {
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 1.25rem !important;
}

/* Radikale Absicherung für alle Listenelemente im Footer */
.site-footer li {
    list-style: none !important;
    list-style-type: none !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.site-footer a {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.25s ease;
}

.site-footer a:hover {
    color: var(--accent-gold);
}

/* Die 5 Footer-Links (Datenschutz/Impressum/Satzung/Credits/Kontakt)
   passen ab 480px nicht mehr ohne Umbruch in eine Zeile - ohne flex-wrap
   wurde "Kontakt" (letzter Punkt) dann rechts aus dem sichtbaren Bereich
   gedrängt statt umzubrechen. Copyright-Zeile und Links werden dabei
   zentriert. Statt einer einheitlichen festen Breite je Punkt (die je
   nach Textlänge unvorhersehbar mal 3-oben/2-unten, mal 4-oben/1-unten
   umbricht) bekommen die ersten beiden Punkte bewusst eine breitere
   Basis (42%) und die letzten drei eine schmalere (28%) - dadurch passen
   nach den ersten zwei keine dritte mehr in die erste Zeile (2x42%≈84%
   der Breite ist schon belegt), während die letzten drei problemlos zu
   dritt in die zweite Zeile passen (3x28%≈84%). Ergebnis: zuverlässig
   2 oben / 3 unten, unabhängig von den einzelnen Wortlängen. */
@media (max-width: 30rem) {
    .site-footer nav ul {
        flex-wrap: wrap !important;
        justify-content: center;
        row-gap: 0.625rem;
    }

    .site-footer nav li {
        text-align: center;
    }

    .site-footer nav li:nth-child(1),
    .site-footer nav li:nth-child(2) {
        flex: 0 0 42% !important;
    }

    .site-footer nav li:nth-child(3),
    .site-footer nav li:nth-child(4),
    .site-footer nav li:nth-child(5) {
        flex: 0 0 28% !important;
    }

    /* Titel "SC Rochade Zeulenroda" im Header (60px-Icon + 26px-Schrift)
       verkleinert, damit auf schmalen Handy-Breiten mehr Luft neben dem
       Burger-Button bleibt (der eigentliche Schutz vor dem Verdrängen
       kommt über min-width:0 + Ellipsis auf .logo-text, siehe dort -
       diese Verkleinerung hier ist nur fürs Aussehen). Gilt IMMER, auch
       im .is-scrolled-Zustand (siehe eigene Regeln unten) - auf schmalen
       Handys ist ohnehin schon knapp Platz, der Header soll dort weder
       beim Laden größer starten noch beim Scrollen nochmal die Größe
       ändern, sondern durchgehend bei dieser einen kompakten Größe
       bleiben. */
    .header-container,
    .site-header.is-scrolled .header-container {
        padding: 0.5rem 0.625rem;
    }

    .logo a,
    .site-header.is-scrolled .logo a {
        font-size: 1rem;
        gap: 0.375rem;
    }

    .site-logo-icon,
    .site-header.is-scrolled .site-logo-icon {
        height: 2.25rem;
    }
}

/* RESPONSIVE DESIGN (Optimierung für Smartphones & Tablets) */

@media (max-width: 62rem) {
    /* Zwingt das zweispaltige Archiv-Layout auf Tablets/Handys untereinander */
    .main-layout-container {
        flex-direction: column !important;
        gap: var(--space-md) !important;
    }

    /* Content und Sidebar nehmen mobil die volle Breite ein */
    .content-column,
    .sidebar-column {
        width: 100% !important;
        flex: none !important;
    }

    /* Die Sidebar rutscht mobil sauber unter den Hauptinhalt */
    .sidebar-column {
        margin-top: var(--space-md);
    }

    /* Hinweis, dass Suche & Kategorien (die Sidebar) jetzt unterhalb der
       Beitragsliste stehen - ohne diesen Hinweis ist das nicht auf den
       ersten Blick erkennbar, sobald sie nicht mehr direkt daneben
       sichtbar ist. Nur in dieser Ansicht sichtbar, siehe Basisregel. */
    .archive-sidebar-hint {
        display: block;
    }
}

@media (max-width: 48rem) {
    /* Passt die massive H1-Überschrift auf kleinen Handy-Displays an */
    h1 {
        font-size: 1.8rem !important;
    }

    /* Etwas weniger Abstand oben mobil wegen der Sticky Headbar.
       WICHTIG: "margin" (Shorthand), NICHT "margin-top" - margin-top
       akzeptiert nur einen einzelnen Wert. Die vorige Version stand hier
       als "margin-top: 100px auto var(--space-md) auto" mit einem
       var()-Anteil im Wert; da var() zur Parse-Zeit nicht geprüft werden
       kann, hat der Browser die Deklaration trotz ungültiger Werteliste
       im Cascade gewinnen lassen (wegen !important), sie beim Berechnen
       dann aber verworfen und ist auf den Initialwert 0 zurückgefallen -
       der Abstand zum Header war dadurch schlicht weg, die Überschrift
       rutschte sichtbar dahinter. */
    .site-content {
        margin: 6.25rem auto var(--space-md) auto !important;
    }
}

/* MOBILES BURGER-MENÜ & NAVIGATION */
/* Schwelle bewusst bei 1280px (nicht erst bei ~850px wie frueher): das
   Desktop-Menu hat 8 Punkte (inkl. "Mannschaften"-Dropdown) und passt ab
   ca. 1260px nicht mehr verzerrungsfrei in eine Zeile - "Über uns" kippte
   zuerst in zwei Zeilen (ca. ab 1270px), darunter (ca. ab 1210px) reichte
   selbst das Umbrechen nicht mehr und der Header lief seitlich über die
   volle Breite hinaus. Das Burger-Menü selbst ist bereits durchgehend
   responsive, daher loest ein frueheres Umschalten beide Symptome. */
@media (max-width: 80rem) {
    
    /* 1. Kleinerer, dezenterer Burger-Button */
    .menu-toggle {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        gap: 0.25rem; /* Engerer Abstand zwischen den Strichen */
        background: none;
        border: none;
        cursor: pointer;
        padding: 0.25rem;
        z-index: 1100;
    }

    /* Kürzere und dünnere Striche */
    .menu-toggle .bar {
        width: 1.25rem; /* Von 26px auf 20px verkürzt */
        height: 0.125rem;
        background-color: var(--accent-gold);
        border-radius: 0.0625rem;
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

    /* 2. Kompakte Kreuz-Animation */
    .menu-toggle.is-active .bar:nth-child(1) {
        transform: translateY(0.375rem) rotate(45deg); /* Abstand angepasst */
    }
    .menu-toggle.is-active .bar:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle.is-active .bar:nth-child(3) {
        transform: translateY(-0.375rem) rotate(-45deg); /* Abstand angepasst */
    }

    /* 3. Kompaktes Dropdown-Menü (Kein Vollbild, klappt unter dem Header auf) */
    .main-navigation {
        position: absolute;
        top: 100%; /* Startet exakt an der Unterkante deiner Sticky Headbar */
        left: 0;
        width: 100%;
        height: auto; /* Wächst nur so weit wie nötig */
        max-height: calc(100vh - 6.25rem); /* Verhindert das Herausragen aus dem Bildschirm */
        overflow-y: auto; /* Macht das Menü scrollbar, falls es viele Punkte sind */
        background-color: rgba(25, 25, 25, 0.96); /* Gleicher Ton wie deine Karten */
        border-bottom: 0.125rem solid var(--accent-gold);
        box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.5);
        backdrop-filter: blur(0.75rem);
        -webkit-backdrop-filter: blur(0.75rem);
        z-index: 1050;
        
        /* Start-Zustand: Unsichtbar und leicht nach oben eingefaltet */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-0.625rem);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    }

    /* 4. Aktiv-Zustand: Klappt flüssig nach unten auf */
    .main-navigation.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Menü-Liste sauber untereinander anordnen */
    .main-navigation ul {
        flex-direction: column !important;
        align-items: stretch; /* Nutzt die volle Breite für Klickflächen */
        gap: 0;
        width: 100%;
        padding: 0.625rem 0;
    }

    /* Normale, dezente Schriftgröße wie auf dem Desktop */
    .main-navigation a {
        font-size: 1rem; 
        padding: 0.75rem 1.5625rem;
        text-align: left; /* Klassisch linksbündig für Listen */
        display: block;
        border-bottom: 0.0625rem solid rgba(255,255,255,0.03);
    }
    .main-navigation li:last-child > a {
        border-bottom: none;
    }

    /* 5. Mobile Untermenüs (Dropdowns) */
    .main-navigation ul ul {
        position: static !important;
        background: rgba(0, 0, 0, 0.2) !important;
        border: none !important;
        box-shadow: none !important;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        padding: 0 !important;
        transition: max-height 0.25s ease, opacity 0.25s ease;
    }

    /* Untermenü per Klick öffnen */
    .main-navigation li.submenu-open > ul {
        max-height: 25rem;
        opacity: 1;
        visibility: visible;
    }

    .main-navigation ul ul a {
        font-size: 0.95rem;
        padding-left: 2.5rem; /* Einrücken für eine klare Struktur */
    }

    /* Footer-Reiter im Burger-Menü sichtbar machen (siehe Basisregel
       weiter oben) - dezent abgesetzt vom Hauptmenü durch eine
       Trennlinie, ein kleines Label und etwas kleinere/gedämpfte
       Schrift, damit klar wird, dass es sich um einen eigenen,
       zweitrangigen Bereich (die Footer-Links) handelt statt um
       weitere Hauptmenüpunkte. Selektor mit ".main-navigation" davor,
       damit die Spezifität die Basis-Ausblendregel oben zuverlässig
       übersteuert (gleiche Anzahl Klassen, aber später im Quellcode). */
    .main-navigation .mobile-footer-links-label {
        display: block;
        padding: 1.25rem 1.5625rem 0.625rem 1.5625rem;
        margin-top: 0.375rem;
        border-top: 0.0625rem solid rgba(255, 255, 255, 0.08);
        color: var(--accent-gold);
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }

    .main-navigation .mobile-footer-links {
        display: flex;
        flex-direction: column !important;
        width: 100%;
        padding-bottom: 0.625rem;
    }

    .mobile-footer-links a {
        font-size: 0.9rem;
        color: var(--text-muted);
        padding: 0.625rem 1.5625rem;
        border-bottom: none;
    }

    .mobile-footer-links a:hover {
        color: var(--accent-gold);
    }
}

/* ---------- Startseite "Über uns": Container-Reihe ---------- */
/* Jeder Container entspricht einem Abschnitt, den die Redaktion im
   WordPress-Editor per "Weiterlesen"-Tag (<!--more-->) festlegt. */

.about-us-sections {
    max-width: 58.75rem;
    margin: var(--space-lg) auto 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.about-us-container {
    position: relative;
    padding: var(--space-md) var(--space-md) var(--space-md) 4.375rem !important;
    border-radius: var(--radius) !important;
    background-color: rgba(25, 25, 25, 0.82) !important;
    backdrop-filter: blur(0.75rem);
    -webkit-backdrop-filter: blur(0.75rem);
    border: 0.0625rem solid rgba(255, 255, 255, 0.08) !important;
    border-left: 0.1875rem solid var(--accent-gold) !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.about-us-container:hover {
    transform: translateX(-0.1875rem);
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.about-us-container-index {
    position: absolute;
    top: var(--space-md);
    left: 1.25rem;
    width: 2.125rem;
    height: 2.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(223, 183, 108, 0.12);
    border: 0.0625rem solid var(--accent-gold);
    color: var(--accent-gold);
    font-weight: 700;
    font-size: 0.95rem;
}

.about-us-container .entry-content > *:last-child {
    margin-bottom: 0;
}

/* Eigenständiger Video-Bereich innerhalb der Abschnittsliste - bewusst OHNE
   die Karten-Optik (Nummer-Badge, Rahmen, Padding) der Textcontainer, damit
   das Video wie der Imagefilm oben frei/losgelöst wirkt. */
.about-us-extra-video {
    width: 100%;
}

.about-us-extra-video .entry-content {
    text-align: center;
    margin-bottom: var(--space-md);
}

.about-us-extra-video .entry-content h2 {
    font-size: 2.2rem;
}

@media (max-width: 37.5rem) {
    .about-us-container {
        padding: var(--space-md) !important;
        padding-top: 3.4375rem !important;
    }

    .about-us-container-index {
        top: 0.9375rem;
        left: 0.9375rem;
    }

    /* Kontaktformular (siehe .kontakt-form-row weiter unten): Vor-/
       Nachname-Felder untereinander statt nebeneinander. */
    .kontakt-form-row {
        flex-direction: column;
        gap: 0;
    }

    /* Pagination unter den Beitragslisten: bei vielen Seiten (z.B.
       "1 2 3 … 16" oder "← Neuer 1 2 3 4 5 6 Älter →") wird es auf
       schmalen Handy-Breiten trotz Umbruch schnell unübersichtlich breit.
       Reduziert auf das Wesentliche - Zurück-Pfeil, erste Seite, aktuelle
       Seite, letzte Seite, Vor-Pfeil - alles dazwischen (inkl. "…") wird
       ausgeblendet. Da WP page 1 immer als erste Zahl direkt nach dem
       Zurück-Pfeil (bzw. als allererstes Element, falls kein Zurück-Pfeil
       da ist, weil man schon auf Seite 1 ist) und die letzte Seite immer
       direkt vor dem Vor-Pfeil (bzw. als allerletztes Element ohne
       Vor-Pfeil auf der letzten Seite) rendert, lässt sich "erste"/
       "letzte" darüber zuverlässig treffen, ohne die Gesamtseitenzahl zu
       kennen. ":has(+ .page-numbers.next)" trifft die Seitenzahl direkt
       VOR dem Vor-Pfeil (es gibt keinen "vorheriges Geschwister"-
       Selektor in CSS, :has() mit einem nachfolgenden Geschwister ist der
       Umweg dafür). Funktioniert für beide Pagination-Varianten der
       Seite gleichermaßen (page-archiv.php's einfaches paginate_links()
       ohne Wrapper UND archive.php/search.php's the_posts_pagination()
       mit .nav-links-Wrapper), da hier ganz allgemein auf
       ".pagination-wrapper .page-numbers" gezielt wird. */
    .pagination-wrapper .page-numbers {
        display: none;
    }

    .pagination-wrapper .page-numbers.prev,
    .pagination-wrapper .page-numbers.next,
    .pagination-wrapper .page-numbers.current,
    .pagination-wrapper .page-numbers.prev + .page-numbers,
    .pagination-wrapper .page-numbers:not(.prev):first-child,
    .pagination-wrapper .page-numbers:has(+ .page-numbers.next),
    .pagination-wrapper .page-numbers:not(.next):last-child {
        display: inline-block;
    }

    /* WordPress' eigene "…"-Punkte reichen nicht aus: die erscheinen nur,
       wenn WP SELBST eine große Lücke sieht - meine Kürzung oben blendet
       aber auch Seiten aus, die in WPs eigenem Schema direkt aufeinander
       folgen (z.B. Seite 2 und 3 zwischen Seite 1 und aktueller Seite 4),
       wofür WP gar keinen eigenen "…"-Platzhalter gerendert hat. Daher
       werden WPs "…"-Punkte hier ignoriert (bleiben ausgeblendet, siehe
       oben) und stattdessen selbst erzeugt: ein "…" nach der ersten Seite
       (außer sie ist selbst die aktuelle, oder die aktuelle folgt direkt
       auf sie - dann ist nichts dazwischen versteckt) und symmetrisch vor
       der letzten Seite. */
    .pagination-wrapper .page-numbers.prev + .page-numbers:not(.current)::after,
    .pagination-wrapper .page-numbers:not(.prev):first-child:not(.current)::after {
        content: " …";
    }

    /* !important nötig: diese "Kein-Punkt"-Ausnahme (erste Seite direkt
       vor der aktuellen, nichts dazwischen versteckt) hat durch das
       :has() weniger Klassen in der Selektor-Kette als die Regel
       darüber und würde sonst trotz gleicher/späterer Position im
       Quellcode nicht gewinnen. */
    .pagination-wrapper .page-numbers:has(+ .page-numbers.current)::after {
        content: none !important;
    }

    .pagination-wrapper .page-numbers:has(+ .page-numbers.next):not(.current)::before,
    .pagination-wrapper .page-numbers:not(.next):last-child:not(.current)::before {
        content: "… ";
    }

    .pagination-wrapper .page-numbers.current + .page-numbers::before {
        content: none !important;
    }
}

/* ---------- Termine: Tabelle aus der Excel-Datei ---------- */

.termine-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
    color: var(--text-muted);
    font-size: 0.85rem;
}

.termine-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.termine-legend-dot {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
}

.termine-table-wrapper {
    overflow-x: auto;
    margin-bottom: var(--space-lg);
    border-radius: var(--radius);
    border: 0.0625rem solid rgba(255, 255, 255, 0.08);
}

.termine-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.termine-table thead th {
    background-color: rgba(223, 183, 108, 0.1);
    color: var(--accent-gold);
    text-align: left;
    font-weight: 700;
    padding: 0.75rem 1rem;
    border-bottom: 0.125rem solid var(--accent-gold);
    white-space: nowrap;
}

.termine-table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    vertical-align: top;
}

.termine-table tbody tr:last-child td {
    border-bottom: none;
}

.termine-table tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.03);
}

/* Die 3 häufigsten Veranstaltungen farblich absetzen, damit man sie in der
   Tabelle schnell wiedererkennt. */
.termine-table tbody tr.termine-highlight-1,
.termine-legend-dot.termine-highlight-1 {
    --termine-highlight-color: var(--accent-gold);
}

.termine-table tbody tr.termine-highlight-2,
.termine-legend-dot.termine-highlight-2 {
    --termine-highlight-color: #4aa8e8;
}

.termine-table tbody tr.termine-highlight-3,
.termine-legend-dot.termine-highlight-3 {
    --termine-highlight-color: #e2637a;
}

.termine-table tbody tr[class*="termine-highlight-"] {
    border-left: 0.1875rem solid var(--termine-highlight-color);
    background-color: color-mix(in srgb, var(--termine-highlight-color) 18%, transparent);
}

.termine-legend-dot {
    background-color: var(--termine-highlight-color, var(--text-muted));
}

/* Schwelle bei 900px statt erst bei 700px: bei 6 Spalten reichte der
   Platz ab ca. 850px nicht mehr fuer die volle Tabelle - der Wrapper hat
   zwar overflow-x:auto (nichts geht technisch verloren), aber ohne
   sichtbaren Scrollbar-Hinweis wirkte es wie "nicht mehr alles
   angezeigt". Die Kachel-Ansicht greift jetzt fruehzeitig genug, dass es
   gar nicht erst zum Scrollen kommt. */
@media (max-width: 56.25rem) {
    /* Copyright-Zeile und Footer-Reiter zentriert statt links/rechts
       verteilt (siehe .footer-container weiter unten). */
    .footer-container {
        justify-content: center;
        text-align: center;
    }

    .termine-table thead {
        display: none;
    }

    .termine-table, .termine-table tbody, .termine-table tr, .termine-table td {
        display: block;
        width: 100%;
    }

    .termine-table tbody tr {
        padding: var(--space-sm) 1rem;
        border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.08);
    }

    .termine-table tbody td {
        border-bottom: none;
        padding: 0.25rem 0;
        display: flex;
        justify-content: space-between;
        gap: var(--space-sm);
    }

    .termine-table tbody td::before {
        content: attr(data-label);
        color: var(--accent-gold);
        font-weight: 600;
        font-size: 0.8rem;
        flex-shrink: 0;
    }

    /* Trainingszeiten-Boxen (siehe .trainingszeiten-info-grid weiter unten):
       zwei Gruppen teilen sich die Klasse, sollen hier aber unterschiedlich
       reagieren - die 3-Boxen-Gruppe (Wann/Wer/Wo, länger) wird bei 3 knapp
       gequetschten Spalten schnell überlang und soll komplett untereinander
       stehen; die 4-Boxen-AG-Gruppe (nur Wann/Wo, kürzer) kippt bei
       "auto-fit" sonst in ein unschönes 3-oben-1-unten und soll stattdessen
       sauber 2x2 werden. Erkennung über :has() an der jeweiligen
       Boxenanzahl statt an einer festen Reihenfolge, damit es robust
       bleibt, falls künftig weitere Gruppen dazukommen. */
    .trainingszeiten-info-grid:has(> .trainingszeiten-info-box:nth-child(3):last-child) {
        grid-template-columns: 1fr;
    }

    .trainingszeiten-info-grid:has(> .trainingszeiten-info-box:nth-child(4):last-child) {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- Spiellokale: Text + Maps-Vorschau, seitenwechselnd ---------- */

.spiellokal-container {
    display: flex;
    /* "center" statt "flex-start": der Text ("Wo?/Wer?/Wann?") ist mal
       kürzer, mal länger als das feste 300x300-Maps-Quadrat - je nach
       Fensterbreite wird die Textbox mit der Zeit höher als das Quadrat.
       Mittige statt oben-bündiger Ausrichtung wirkt in beiden Fällen
       (Text höher oder niedriger als das Quadrat) ausgeglichen, statt nur
       bei exakt gleicher Höhe zu passen. */
    align-items: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
}

.spiellokal-container.is-reversed {
    flex-direction: row-reverse;
}

.spiellokal-text {
    flex: 1 1 23.75rem;
    min-width: 20rem;
    /* min-height passt die Box grob an die 300px-Maps-Box daneben an. Ist
       der Inhalt kürzer, bleibt in der Box Platz übrig - "center" statt
       "flex-start" verteilt diesen Rest gleichmäßig oben UND unten, statt
       ihn (wie vorher) komplett unten zu sammeln und dadurch trotz
       gleichem Padding einen größeren Abstand unten wirken zu lassen. */
    min-height: 18.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Einheitliches Padding auf allen vier Seiten (vorher oben deutlich
       mehr als an den Seiten/unten) - dadurch sitzt die Überschrift näher
       am oberen Rand statt mit auffällig großem Abstand zu starten. */
    padding: var(--space-md) !important;
    border-radius: var(--radius) !important;
    background-color: rgba(25, 25, 25, 0.82) !important;
    backdrop-filter: blur(0.75rem);
    -webkit-backdrop-filter: blur(0.75rem);
    border: 0.0625rem solid rgba(255, 255, 255, 0.08) !important;
}

.spiellokal-text .entry-content > *:last-child {
    margin-bottom: 0;
}

/* Aufzählungspunkte entfernen und stattdessen "Wo? / Wer? / Wann?" als fette
   Labels voranstellen - rein per CSS, da die Links im Text direkt im
   WordPress-Editor gesetzt wurden und dort nicht weiter formatiert werden
   können. Wirkt automatisch auf 1., 2. und (falls künftig ergänzt) 3. Punkt
   pro Spiellokal. */

.spiellokal-text .entry-content h2 {
    margin-top: var(--space-xs);
    /* "Kommunikationszentrum des Neuform-Türenwerkes" enthält mit
       "Kommunikationszentrum" ein einzelnes, sehr langes zusammengesetztes
       Wort ohne Leerstelle - ohne overflow-wrap liefe es auf schmalen
       Handy-Breiten (ab ca. 430px) rechts über den Bildschirmrand hinaus,
       wodurch auch die eigentlich zentrierte Maps-Box optisch aus der
       Mitte rutschte (die Seite wurde durch den Überlauf insgesamt
       breiter als der sichtbare Viewport). overflow-wrap:break-word
       verhindert das zuverlässig (bricht notfalls mitten im Wort), sieht
       dabei aber unschön aus, da kein Bindestrich gesetzt wird. hyphens:
       auto sorgt zusätzlich für echte, sprachabhängige Silbentrennung mit
       Bindestrich (html-Tag hat lang="de-DE" über language_attributes()
       in header.php) - wo der Browser das unterstützt, wird bevorzugt
       dort sauber getrennt statt beliebig mitten im Wort. */
    overflow-wrap: break-word;
    hyphens: auto;
}

.spiellokal-text .entry-content ul {
    list-style: none;
    padding-left: 0;
    margin: var(--space-md) 0 0 0;
}

.spiellokal-text .entry-content li {
    display: flex;
    margin-bottom: var(--space-md);
    line-height: 1.6;
    /* Die Adressen sind im Editor mit &nbsp; statt normaler Leerzeichen
       gesetzt (kein Umbruch an Wortgrenzen möglich) - ohne diese Zeile
       bleibt der Text auf schmalen Handy-Breiten ein einziges
       unteilbares "Wort" und läuft über den Rand der Box hinaus. */
    overflow-wrap: break-word;
    min-width: 0;
}

.spiellokal-text .entry-content li:last-child {
    margin-bottom: 0;
}

.spiellokal-text .entry-content li::before {
    flex: 0 0 4.375rem;
    font-weight: 700;
    color: var(--accent-gold);
}

.spiellokal-text .entry-content li:nth-child(1)::before {
    content: "Wo?";
}

.spiellokal-text .entry-content li:nth-child(2)::before {
    content: "Wer?";
}

.spiellokal-text .entry-content li:nth-child(3)::before {
    content: "Wann?";
}

.spiellokal-map {
    position: relative;
    flex: 0 0 18.75rem;
    width: 18.75rem;
    aspect-ratio: 1 / 1;
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
    border: 0.0625rem solid rgba(255, 255, 255, 0.08);
    transition: border-color 0.25s ease;
}

.spiellokal-map:hover {
    border-color: var(--accent-gold);
}

.spiellokal-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    pointer-events: none; /* Vorschau bleibt statisch, Klick geht an den umschließenden Link */
}

.spiellokal-map-badge {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    background-color: var(--accent-gold);
    color: #1a1a1a;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    box-shadow: 0 0.25rem 0.875rem rgba(0, 0, 0, 0.5);
}

/* Schwelle bei 940px statt 700px: die Zeilen-Variante braucht wegen
   flex-basis 380px (Text) + 300px (Karte) + Lücke rein rechnerisch ab
   ca. 760px genug Platz - real bricht der Zeilenumbruch aber erst
   zwischen ca. 920 und 940px ab (die Adresse ohne echte Leerstellen
   zwingt den Text-Flexitem zu einer größeren Mindestbreite als der
   Basiswert; je nach Spiellokal/Adresslänge leicht unterschiedlich, 940
   deckt alle sicher ab). Bis dahin fiel .spiellokal-container ohne die
   eigene Spalten-Variante in einen ungewollten Zeilenumbruch: die Karte
   rutschte in eine zweite Zeile, aber ohne "margin:0 auto" blieb sie
   dabei links- oder (bei is-reversed) rechtsbündig statt zentriert. */
@media (max-width: 58.75rem) {
    .spiellokal-container,
    .spiellokal-container.is-reversed {
        flex-direction: column;
        /* "stretch" statt "center" (das gilt in der Zeilen-Variante
           weiterhin, siehe .spiellokal-container oben - hier nur für die
           gestapelte Spalten-Variante überschrieben): in Spalten-Richtung
           steuert align-items die Breite der Kinder. "center" sizt jedes
           Kind auf seine eigene Inhaltsbreite (fit-content) statt auf die
           volle Containerbreite - bei kürzeren Adressen/weniger Text (z.B.
           "Freizeitzentrum") fiel die Textbox dadurch sichtbar schmaler
           aus als bei den anderen Spiellokalen. "stretch" füllt zuverlässig
           die komplette Breite; die Maps-Box hat ohnehin eine eigene feste
           Breite (max-width:300px + margin:auto) und bleibt davon unberührt. */
        align-items: stretch;
    }

    .spiellokal-map {
        width: 100%;
        max-width: 18.75rem;
        margin: 0 auto;
    }

    .spiellokal-text {
        min-height: 0;
        min-width: 0;
        /* flex-basis:380px war für die Breite in der Zeilen-Variante
           gedacht - sobald der Container per flex-direction:column
           umschaltet, wird aus der Haupt-Achse die Höhe, und derselbe
           380px-Wert würde dann als FESTE Höhe wirken (der Container ist
           selbst nicht höhenbegrenzt, wodurch flex-grow/-shrink hier
           nichts umverteilen und der hypothetische Basiswert 1:1
           übernommen wird). "auto" lässt die Box stattdessen auf ihre
           tatsächliche Inhaltshöhe wachsen, statt bei kurzem Text zu viel
           Leerraum zu lassen oder bei langem Text den Inhalt abzuschneiden. */
        flex-basis: auto;
    }
}


/* ---------- Trainingszeiten: Überschriften-Boxen + kleine Info-Kacheln ---------- */

.trainingszeiten-group {
    margin-bottom: var(--space-lg);
}

.trainingszeiten-group:last-child {
    margin-bottom: 0;
}

/* Bewusst NICHT im Button-Stil (voll goldgefuellt) - das sieht sonst
   wie ein anklickbarer, nicht gehoverter Button aus, ist aber nur eine
   Ueberschrift. Stattdessen der gleiche Gold-Akzentstreifen wie bei
   den Beitrags-Karten im Rest der Seite. */
.trainingszeiten-heading-box {
    display: inline-block;
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
    background-color: rgba(201, 165, 97, 0.2);
    border-left: 0.1875rem solid var(--accent-gold);
    border-radius: var(--radius);
}

.trainingszeiten-heading-box h2 {
    margin: 0;
    color: var(--accent-gold);
    font-size: 1.15rem;
}

.trainingszeiten-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
    gap: var(--space-sm);
}

.trainingszeiten-info-box {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius);
    background-color: rgba(25, 25, 25, 0.82);
    backdrop-filter: blur(0.75rem);
    -webkit-backdrop-filter: blur(0.75rem);
    border: 0.0625rem solid rgba(255, 255, 255, 0.08);
    border-top: 0.1875rem solid var(--accent-gold);
    font-size: 0.92rem;
    line-height: 1.55;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.trainingszeiten-info-box:hover {
    transform: translateY(-0.1875rem);
    border-color: rgba(255, 255, 255, 0.2);
}

.trainingszeiten-info-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.trainingszeiten-info-box li {
    display: flex;
    margin-bottom: 0.375rem;
}

.trainingszeiten-info-box li:last-child {
    margin-bottom: 0;
}

.trainingszeiten-label {
    flex: 0 0 3.4375rem;
    font-weight: 700;
    color: var(--accent-gold);
}

/* Unter 620px wird selbst die 2-spaltige AG-Ansicht zu eng - dort dann
   einspaltig wie die Trainingszeiten-Gruppe. */
@media (max-width: 38.75rem) {
    .trainingszeiten-info-grid:has(> .trainingszeiten-info-box:nth-child(4):last-child) {
        grid-template-columns: 1fr;
    }
}

/* ---------- Partner: Karten mit farbigem Logo-Chip ---------- */

.partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--space-lg);
}

.partner-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-md);
    border-radius: var(--radius);
    background-color: rgba(25, 25, 25, 0.82);
    backdrop-filter: blur(0.75rem);
    -webkit-backdrop-filter: blur(0.75rem);
    border: 0.0625rem solid rgba(255, 255, 255, 0.08);
    border-top: 0.1875rem solid var(--accent-gold);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.partner-card:hover {
    transform: translateY(-0.1875rem);
    border-color: rgba(255, 255, 255, 0.2);
}

.partner-logo-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 6.875rem;
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
    background-color: #ffffff;
    border-radius: var(--radius);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.35);
}

.partner-logo-chip img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.partner-card-title {
    font-size: 1.15rem;
    margin-bottom: var(--space-sm);
}

.partner-card-text {
    color: var(--text-muted);
    font-size: 0.92rem;
}

.partner-card-text > *:last-child {
    margin-bottom: 0;
}

/* Bei 4 Partnern kippt "auto-fit, minmax(240px,1fr)" in einem mittleren
   Breitenbereich auf 3 Spalten - 3 Karten oben, 1 einzelne darunter. Fest
   auf 2 Spalten (2x2) erzwungen, solange das passiert; darunter greift
   die minmax-Untergrenze ohnehin schon von selbst auf 1 Spalte, darüber
   passen von selbst wieder alle 4 nebeneinander in eine Zeile. */
@media (min-width: 51.9375rem) and (max-width: 74.9375rem) {
    .partner-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- Seitentitel-Icons (Termine, Trainingszeiten, Spiellokale) ---------- */

.page-title-with-icon {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.page-title-icon {
    height: 0.85em;
    width: auto;
    flex-shrink: 0;
}

/* ---------- Mannschaften-Untermenü: Schachfigur je Team ---------- */

.team-submenu a {
    display: flex !important;
    align-items: center;
    gap: 0.625rem;
}

.team-menu-icon {
    height: 1.125rem;
    width: auto;
    flex-shrink: 0;
}

/* ---------- Beitrags-Karten: Gold-Akzentstreifen + Hover wie "Über uns" ---------- */

.post-card-accent {
    border-left: 0.1875rem solid var(--accent-gold) !important;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.post-card-accent:hover {
    transform: translateX(-0.1875rem);
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Stretched Link: der Titel-Link spannt sich unsichtbar über die
   komplette Karte auf, sodass ein Klick egal wo (außer auf die
   .post-card-readmore-text-Notiz) zum Beitrag führt. */
.post-card-link-stretch::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* "Zum vollständigen Bericht"-Schriftzug: kein eigener Link mehr
   (redundant durch den Stretched Link), bleibt aber optisch unverändert
   im Gold-Stil als Lesehinweis am Kartenende stehen. */
.post-card-readmore-text {
    display: inline-block;
    margin-top: 0.9375rem;
    color: var(--accent-gold);
    font-weight: 600;
    font-size: 0.95rem;
}

/* Responsive Exzerpt-Länge (siehe schachverein_responsive_excerpt() in
   functions.php): PHP schreibt alle drei Längen gleichzeitig ins HTML,
   hier wird per Breite entschieden, welche davon sichtbar ist - 55
   Wörter (Standard) auf breiten Bildschirmen, 25 ab 940px (Regel dazu
   steht bei der Header-Größe weiter oben in der Datei, gleicher
   Breitenwert), 15 ab 500px. Die 500px-Regel unten muss im Quellcode
   NACH der 940px-Regel stehen (gleiche Selektor-Spezifität, spätere
   Regel gewinnt bei ≤500px sonst nicht zuverlässig gegen die 940er). */
.excerpt-medium,
.excerpt-short {
    display: none;
}

@media (max-width: 31.25rem) {
    /* !important auf .excerpt-medium nötig: bei ≤500px greift auch noch
       die 940px-Regel weiter oben (die .excerpt-medium mit !important
       sichtbar macht) - ohne eigenes !important hier würde diese Regel
       trotz kleinerer/späterer Bildschirmbreite dagegen verlieren
       (!important schlägt immer normale Deklarationen, unabhängig von
       Reihenfolge oder Spezifität). */
    .excerpt-long,
    .excerpt-medium {
        display: none !important;
    }

    .excerpt-short {
        display: block;
    }
}

/* ---------- Download-Block (WP-Datei-Block) in Beiträgen ---------- */
/* Der globale "* { padding: 0; margin: 0; }"-Reset (siehe oben) nullt
   sonst das Innenpolster des Buttons und den Abstand zwischen mehreren
   gestapelten Datei-Blöcken. justify-content: space-between hält den
   Button außerdem immer am rechten Rand, egal wie lang der Dateiname
   ist - dadurch stehen mehrere Downloads sauber übereinander statt
   sich je nach Textlänge zu verschieben. */
.wp-block-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.625rem 1.25rem;
    padding: 0.75rem 1.125rem;
    margin-bottom: var(--space-sm);
    background-color: rgba(255, 255, 255, 0.03);
    border: 0.0625rem solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
}

.wp-block-file > a:not(.wp-block-file__button) {
    color: var(--text-primary);
    font-weight: 500;
    overflow-wrap: anywhere;
}

.wp-block-file__button {
    flex-shrink: 0;
    margin-left: 0 !important;
    padding: 0.5em 1.2em;
    background-color: var(--accent-gold);
    border: 0.0625rem solid var(--accent-gold);
    color: #1a1a1a !important;
    border-radius: 62.4375rem;
    font-weight: 600;
    font-size: 0.85rem;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* Kein Groesser-Werden beim Hover - reiner Farbtausch: Fuellung dreht
   von Gold auf den bekannten Grauton, Schrift und Rand bleiben/werden
   gold. */
.wp-block-file__button:hover {
    background-color: var(--bg-card);
    border-color: var(--accent-gold);
    color: var(--accent-gold) !important;
}

/* Unter 520px stehen Dateiname und Download-Button nicht mehr nebeneinander
   (links Dateiname, rechts Button), sondern übereinander und beide
   zentriert in ihrer Box - nebeneinander wirkt es auf schmalen Handy-
   Breiten schnell gequetscht, vor allem bei längeren Dateinamen. */
@media (max-width: 32.5rem) {
    .wp-block-file {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
}

/* Für den Einzelbeitrag: nur der dauerhafte Gold-Streifen, ohne Hover-
   Effekt, da hier nichts auszuwählen ist (kein Listeneintrag). */
.post-card-accent-static {
    border-left: 0.1875rem solid var(--accent-gold) !important;
}

.post-meta-subtle {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: var(--space-lg);
}

/* ---------- Mannschaftsseiten: Foto + Vorstellungstext ---------- */

.team-intro-container {
    display: flex;
    align-items: stretch;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
}

.team-photo-box {
    position: relative;
    flex: 0 0 30rem;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 0.75rem 2.5rem rgba(0, 0, 0, 0.5);
    border: 0.0625rem solid rgba(255, 255, 255, 0.08);
}

.team-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.03);
    border: 0.0625rem dashed rgba(255, 255, 255, 0.15);
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
    padding: var(--space-md);
}

.team-photo-placeholder-icon {
    font-size: 2.2rem;
    opacity: 0.5;
}

.team-intro-text-box {
    flex: 1 1 20rem;
    min-width: 17.5rem;
    padding: var(--space-md) !important;
    border-radius: var(--radius) !important;
    background-color: rgba(25, 25, 25, 0.82) !important;
    backdrop-filter: blur(0.75rem);
    -webkit-backdrop-filter: blur(0.75rem);
    border: 0.0625rem solid rgba(255, 255, 255, 0.08) !important;
}

.team-intro-placeholder {
    color: var(--text-muted);
    font-style: italic;
    margin: 0;
}

@media (max-width: 43.75rem) {
    .team-photo-box {
        flex-basis: 100%;
        aspect-ratio: 16 / 9;
    }
}

/* ---------- Credits-Seite: Listen ohne Aufzählungszeichen, mehr Abstand ---------- */

.page-id-1657 .entry-content ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.page-id-1657 .entry-content h2 {
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
}

/* ---------- Kontaktformular (page-kontakt.php) ---------- */

/* Zweispaltig: Formular links, Direktkontakt-Box + weitere Wege rechts.
   Formularfelder wie Vor-/Nachname sind von Natur aus kurz und koennen
   nie sinnvoll eine ganze 850px-Kartenbreite ausfuellen (anders als
   Fliesstext) - daher hier bewusst eine feste, kompakte Spalte statt
   des Fliesstext-Breite-Tricks von Impressum/Datenschutz, und der
   freie Platz daneben wird mit echtem Inhalt (Kontaktdaten) gefuellt
   statt nur gestreckt zu werden. */
.kontakt-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-lg);
}

.kontakt-layout-form {
    flex: 1 1 23.75rem;
    min-width: 0;
}

.kontakt-layout-info {
    flex: 1 1 20rem;
    min-width: 0;
    max-width: none;
}

.kontakt-form {
    margin-bottom: 0;
}

.kontakt-form-honeypot {
    position: absolute;
    left: -624.9375rem;
    width: 0.0625rem;
    height: 0.0625rem;
    overflow: hidden;
}

.kontakt-form-row {
    display: flex;
    gap: var(--space-md);
}

.kontakt-form-row .kontakt-form-field {
    flex: 1;
    min-width: 0;
}

.kontakt-form-field {
    margin-bottom: var(--space-md);
}

.kontakt-form-field label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.kontakt-form-required {
    color: var(--accent-gold);
}

.kontakt-form-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.kontakt-form-radio {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: rgba(255, 255, 255, 0.04);
    border: 0.0625rem solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius);
    padding: 0.625rem 1rem;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.95rem;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

.kontakt-form-radio:has(input:checked) {
    border-color: var(--accent-gold);
    background-color: rgba(223, 183, 108, 0.1);
}

.kontakt-form-radio input[type="radio"] {
    accent-color: var(--accent-gold);
    width: 1rem;
    height: 1rem;
    margin: 0;
    flex-shrink: 0;
}

.kontakt-form-field input[type="text"],
.kontakt-form-field input[type="email"],
.kontakt-form-field textarea {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.04);
    border: 0.0625rem solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius);
    padding: 0.625rem 0.875rem;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

.kontakt-form-field textarea {
    resize: vertical;
    min-height: 7.5rem;
}

.kontakt-form-field input[type="text"]:focus,
.kontakt-form-field input[type="email"]:focus,
.kontakt-form-field textarea:focus {
    outline: none;
    border-color: var(--accent-gold);
    background-color: rgba(255, 255, 255, 0.07);
}

.kontakt-form-submit {
    display: inline-block;
    background-color: var(--accent-gold);
    border: 0.0625rem solid var(--accent-gold);
    color: #1a1a1a;
    font-weight: 600;
    font-size: 1rem;
    border-radius: var(--radius);
    padding: 0.75rem 1.75rem;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.kontakt-form-submit:hover {
    background-color: var(--bg-card);
    border-color: var(--accent-gold);
    color: var(--accent-gold) !important;
}

.kontakt-form-feedback {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius);
    margin-bottom: var(--space-md);
    font-weight: 500;
}

.kontakt-form-feedback-success {
    background-color: rgba(74, 222, 128, 0.12);
    border: 0.0625rem solid rgba(74, 222, 128, 0.35);
    color: #86efac;
}

.kontakt-form-feedback-error {
    background-color: rgba(248, 113, 113, 0.12);
    border: 0.0625rem solid rgba(248, 113, 113, 0.35);
    color: #fca5a5;
}