@import "fonts.css";
@import "base.css";
@import "header-footer.css";
@import "bricks.css";

/*------------------------*/
/* Farben (Vereinsfarben aus dem Wappen)
/*------------------------*/

:root {
    --green: #2e6d45;
    --greenDark: #22533a;
    --greenDeep: #16301f;      /* Preheader, Footer */
    --gold: #c4a94e;   /* wie Wappen und Banner (bis 2026-10-11 Beige #a49766) */
    --goldLight: #d8cfa6;
    --blue: #0e3aad;           /* nur sparsam, gehört zum Wappen */
    --ink: #151916;

    --textDarker: #141b16;
    --textDark: #1f2a23;
    --textMedium: rgba(31, 42, 35, 0.78);
    --borderMedium: rgba(31, 42, 35, 0.2);
    --borderLight: rgba(31, 42, 35, 0.08);
    --accent: var(--green);
    --accentDarker: var(--greenDark);
    --light: #f6f5f0;          /* warmes Off-White statt Grau */
}

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

body {color: var(--textMedium); font-size: 1.0625rem;}
h1, h2, h3 {font-family: var(--fontTitles); font-weight: 800; letter-spacing: -0.01em;}
h1, h2, h3 {color: var(--green);}   /* Überschriften im Vereinsgrün */
h1 {font-size: clamp(2.3rem, 4.5vw, 3rem);}
h2 {font-size: clamp(1.7rem, 3.2vw, 2.2rem);}
h3 {font-size: 1.3rem;}
a {color: var(--greenDark);}

/* Oberkante der Trainings- und Kontaktkarten */
:root {--kartenkante: 1px solid var(--borderLight);}   /* schlicht, Schmuck sitzt an den Überschriften */

/* Section-Überschriften zentriert, links und rechts eine Linie in Vereinsgrün (wie „1929 e.V.“ im Banner) */
section.wide .container > h2:first-child {display: flex; align-items: center; justify-content: center; gap: 1.1rem; text-align: center;}
section.wide .container > h2:first-child::before,
section.wide .container > h2:first-child::after {content: ""; flex: 0 1 5rem; height: 2px; background: var(--green);}
/* kurzer Einleitungssatz direkt darunter ebenfalls zentriert (nicht bei den Rechtstexten) */
body:not(.filename_impressum):not(.filename_datenschutz) section.wide .container > h2:first-child + p {text-align: center;}
/* einzeln stehender Button (Shortcode button) in breiten Abschnitten mittig */
section.wide .container > p:has(> a.button:only-child) {text-align: center;}

/* Goldener Akzentstrich unter zentrierten Section-Überschriften */
section .container.small > h2:first-child::after,
section.title:not(.bgimage) h1::after,
section.posts h2::after {
    content: "";
    display: block;
    width: 3rem;
    height: 0.2rem;
    margin: 0.9rem auto 0;
    border-radius: 0.1rem;
    background: var(--gold);
}

/*------------------------*/
/* Theme-Hilfsklassen
/*------------------------*/

img {filter: grayscale(0);}
.colorize_image {filter: contrast(1) sepia(1) hue-rotate(160deg) grayscale(0.8)!important;}
.map::after, .black_2_textDark {filter: contrast(0.7) sepia(1) hue-rotate(160deg)!important;}
.black_2_textMedium {filter: contrast(0.3) sepia(0.3) hue-rotate(160deg) brightness(1.4)!important;}
.black_2_accent {filter: contrast(0.11) sepia(1) hue-rotate(340deg) contrast(13)!important;}

/*------------------------*/
/* Buttons
/*------------------------*/

.button, button {font-family: var(--fontTitles); font-weight: 700; letter-spacing: 0.01em;}
.button.ghost:hover {
    background: var(--accent);
    color: white;
    box-shadow: inset 0 0 0 0.1rem var(--accent);
    transition: background-color 300ms linear;
}

/*------------------------*/
/* Preheader: Tannengrün, Trainingszeiten gut lesbar
/*------------------------*/

.preheader, body:not(.transparent_header) .preheader.light {background: var(--greenDeep); border-bottom: 0;}
.preheader, .preheader a,
body:not(.transparent_header) .preheader.light, body:not(.transparent_header) .preheader.light a {color: rgba(255,255,255,0.85);}
.preheader .container a.icon img,
body:not(.transparent_header) .preheader.light .container a.icon img {filter: brightness(0) invert(1)!important; opacity: 0.85;}
.preheader .container a.icon:hover img {opacity: 1;}
.preheader a {text-decoration: none;}
.preheader a:hover {color: white;}

/*------------------------*/
/* Logo: Wappen + Schriftzug (partials/brandlogo.html)
/*------------------------*/

a.logo.brand {display: flex; align-items: center; gap: 0.85rem; color: var(--textDark); text-decoration: none;}
a.logo.brand img.badge {height: 4.2rem; width: auto; flex: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));}
header.sticky a.logo.brand img.badge {height: 2.9rem;}
a.logo.brand .wordmark {display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap;}
a.logo.brand .wordmark span:first-child {font-family: var(--fontTitles); font-weight: 800; font-size: 1.35rem; letter-spacing: 0.04em;}
a.logo.brand .wordmark span:nth-child(2) {font-family: var(--fontBody); font-size: 0.8rem; font-weight: 600; opacity: 0.8;}
body.transparent_header header:not(.sticky) a.logo.brand,
footer.dark a.logo.brand {color: white;}
@media (max-width: 420px) {
    header a.logo.brand .wordmark span:nth-child(2) {display: none;}
}

/*------------------------*/
/* Navigation
/*------------------------*/

header .navnav > ul > li a {font-family: var(--fontTitles); font-weight: 700; letter-spacing: 0.04em;}
header .navnav > ul > li::after,
header.dark .navnav > ul > li::after,
body.transparent_header header:not(.sticky) .navnav > ul > li::after {background-color: var(--gold); height: 0.15rem;}
header.dark {background: var(--greenDeep);}

/*------------------------*/
/* Hero (brick_title2 mit Bild)
/*------------------------*/

section.title.bgimage .overlay {background: linear-gradient(180deg, rgba(10,24,15,0.55) 0%, rgba(10,24,15,0.35) 45%, rgba(10,24,15,0.7) 100%);}
section.title.bgimage h1 {font-size: clamp(2.4rem, 5vw, 3.6rem); text-shadow: 0 2px 12px rgba(0,0,0,0.35);}
section.title.bgimage h1 + p {font-size: 1.2rem; font-weight: 600; color: rgba(255,255,255,0.92);}

/* Schriftzug im Startseiten-Hero: Name klein in Gold, „Reilingen“ groß, Jahr mit Linien.
   (Bis 2026-10-11 war „Reilingen“ in Fraktur wie im Banner, auf der Website wieder verworfen.) */

.lockup {display: block; line-height: 1; text-transform: none;}
.lockup .oben, .lockup .unten {display: block; font-size: max(0.3em, 0.8rem); letter-spacing: 0.35em; text-transform: uppercase; color: #e2cd85; font-weight: 800; text-shadow: 0 1px 6px rgba(0,0,0,0.6);}
.lockup .oben {margin-bottom: 0.3em; padding-left: 0.35em;}
.lockup .ort {display: block; font-size: 1.6em; line-height: 1.05; color: #fff;}
.lockup .unten {display: flex; align-items: center; justify-content: center; gap: 0.8em; margin-top: 0.45em; letter-spacing: 0.2em; text-transform: none;}
.lockup .unten::before, .lockup .unten::after {content: ""; width: 3em; height: 1px; background: currentColor;}

/*------------------------*/
/* Trainingszeiten (shortcodes/trainingszeiten.html)
/*------------------------*/

.training {display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.25rem; margin-top: 1.5rem;}
.training-card {
    background: white;
    border: 1px solid var(--borderLight);
    border-top: var(--kartenkante);
    border-radius: 0.6rem;
    padding: 1.25rem 1.4rem 1.1rem;
    box-shadow: 0 0.4rem 1.2rem rgba(22, 48, 31, 0.07);
}
.training-card h3 {padding-top: 0; margin-bottom: 0.75rem; color: var(--green); font-size: 1.35rem;}
.training-card ul {list-style: none; margin: 0; padding: 0;}
.training-card li {display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.55rem 0; border-top: 1px solid var(--borderLight);}
.training-card .gruppe {font-weight: 600; color: var(--textDark);}
.training-card .zeit {font-variant-numeric: tabular-nums; white-space: nowrap;}

/*------------------------*/
/* Platzhalter "Noch offen" (shortcodes/offen.html) – vor dem Livegang entfernen
/*------------------------*/

.offen {
    margin: 1.25rem 0;
    padding: 0.9rem 1.1rem;
    border: 2px dashed #c9a227;
    border-radius: 0.5rem;
    background: #fff8dc;
    color: #5c4a00;
    font-size: 0.95rem;
}
.offen p {display: inline; margin: 0;}
.offen strong:first-child {color: #8a6d00;}

/*------------------------*/
/* Kacheln (shortcodes/kacheln.html, kachel.html)
/*------------------------*/

.kacheln {display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr)); gap: 1.25rem; margin-top: 1.5rem;}
a.kachel {
    display: flex; flex-direction: column;
    background: white; border-radius: 0.6rem; overflow: hidden; text-decoration: none;
    border: 1px solid var(--borderLight);
    box-shadow: 0 0.4rem 1.2rem rgba(22, 48, 31, 0.07);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.kachel:hover {transform: translateY(-3px); box-shadow: 0 0.8rem 1.6rem rgba(22, 48, 31, 0.14);}
a.kachel img {width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; border-radius: 0;}
a.kachel .kachel-text {padding: 0.9rem 1.1rem 1.1rem; border-top: 0.25rem solid var(--gold);}
a.kachel strong {display: block; font-family: var(--fontTitles); font-weight: 800; font-size: 1.2rem; color: var(--green);}
a.kachel .kachel-text > span, a.kachel .kachel-text > span p {color: var(--textMedium); font-size: 0.95rem; line-height: 1.45; margin: 0.3rem 0 0;}
a.kachel .kachel-datum {display: block; font-size: 0.8rem; font-weight: 600; color: var(--gold); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.15rem;}
.kacheln-mehr {margin-top: 1.5rem; text-align: center;}

/*------------------------*/
/* Hinweis (shortcodes/hinweis.html): grünes Gegenstück zum gelben „offen“-Kasten
/*------------------------*/

.hinweis {margin: 1.5rem auto; max-width: 46rem; padding: 0.9rem 1.4rem; text-align: center;
    background: rgba(46, 109, 69, 0.07); border: 1px solid rgba(46, 109, 69, 0.2); border-radius: 0.6rem;}
.hinweis p {margin: 0;}

/*------------------------*/
/* Verbände (shortcodes/verbaende.html, data/de/verbaende.yaml)
/*------------------------*/

.verbaende {display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 1rem; margin-top: 1.5rem;}
a.verband {
    display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
    background: white; border: 1px solid var(--borderLight); border-radius: 0.6rem;
    padding: 1rem 0.8rem 0.9rem; text-decoration: none; text-align: center;
    box-shadow: 0 0.4rem 1.2rem rgba(22, 48, 31, 0.07);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.verband:hover {transform: translateY(-3px); box-shadow: 0 0.8rem 1.6rem rgba(22, 48, 31, 0.14);}
.verband-logo {height: 5rem; width: 100%; display: flex; align-items: center; justify-content: center;}
.verband-logo img {max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; border-radius: 0;}
.verband-name {font-size: 0.85rem; line-height: 1.3; color: var(--textMedium);}

/*------------------------*/
/* Kontaktkarte (shortcodes/kontakt.html)
/*------------------------*/

.kontakt {display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.25rem; margin-top: 1.5rem;}
.kontakt-card {background: white; border: 1px solid var(--borderLight); border-top: var(--kartenkante); border-radius: 0.6rem; padding: 1.25rem 1.4rem; box-shadow: 0 0.4rem 1.2rem rgba(22, 48, 31, 0.07);}
.kontakt-card h3 {padding-top: 0; margin-bottom: 0.5rem;}
.kontakt-card p {margin: 0 0 1rem; line-height: 1.7;}

/*------------------------*/
/* Tabellen (z. B. Beiträge)
/*------------------------*/

section table {width: 100%; border-collapse: collapse; margin: 1rem 0; background: white;}
section th, section td {text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--borderLight);}
section th {font-family: var(--fontTitles); color: var(--green); border-bottom: 2px solid var(--green);}
section td:last-child {white-space: nowrap;}

/*------------------------*/
/* Footer: Tannengrün
/*------------------------*/

footer.dark {background: var(--greenDeep);}
footer.dark select, footer.dark, footer.dark > div:last-child a, footer.dark ul li a {color: rgba(255,255,255,0.7);}
footer.dark ul.buttons.social .button {background: var(--green);}
footer.dark ul li a:not(.button)::after {background: var(--gold);}

footer.dark > div:last-child {font-size: 0.9rem;}

/*------------------------*/
/* Suche
/*------------------------*/

.search-result {
    font-size: 1.2rem;
    min-height: 2rem;
    border: var(--accent) 1px solid;
    padding: 0.4rem;
    border-radius: 0.4rem;
    margin: 0.2rem;
}
.search-result-single {text-decoration: none;}
.search-result:hover {
    background: var(--accent);
    color: white;
    transition: background-color 300ms linear;
}

/*------------------------*/
/* Nur Branch notfall: kein Menü, kein Abstand vor dem Footer
/*------------------------*/

body.mobilemenu #togglemenu {display: none;}
section + footer, footer {margin-top: 0!important;}
section.title.bgimage + footer {margin-top: 3.5rem!important;}
html, body {background: var(--greenDeep);}