/* ==========================================================================
   modern.css – Modernisierungs-Layer für die Einbecker Schützengilde
   Wird ZUSÄTZLICH zu style.css geladen und überschreibt gezielt einzelne
   Bereiche, ohne die bestehende Struktur zu zerstören.
   Farbwelt: Vereinsgrün (#004d40) + Gold (#ffcc00)
   ========================================================================== */

/* --- Webfont (modern, gut lesbar, kostenlos von Google Fonts) --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --esg-gruen: #004d40;
    --esg-gruen-dunkel: #00362b;
    --esg-gruen-hell: #00695c;
    --esg-gold: #ffcc00;
    --esg-text: #263238;
    --esg-text-hell: #4d6069;  /* etwas dunkler für besseren Kontrast (WCAG AA) */
    --esg-bg: #f4f6f5;
    --esg-karte: #ffffff;
    --esg-radius: 14px;
    --esg-schatten: 0 6px 24px rgba(0, 0, 0, 0.08);
    --esg-schatten-hover: 0 12px 32px rgba(0, 0, 0, 0.14);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--esg-text);
    background-color: var(--esg-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 {
    letter-spacing: -0.01em;
}

/* ==========================================================================
   Kennzahlen-Leiste (105 Mitglieder usw.) – wie bei modernen Vereinsseiten
   ========================================================================== */
.esg-kennzahlen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
}

.esg-kennzahl {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--esg-radius);
    padding: 18px 28px;
    min-width: 150px;
    backdrop-filter: blur(4px);
}

.esg-kennzahl .zahl {
    display: block;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--esg-gold);
    line-height: 1.1;
    transition: transform 0.2s ease;
}

/* Kurzer "Pop", wenn das Hochzählen fertig ist */
.esg-kennzahl .zahl.zahl-pop {
    animation: esg-zahl-pop 0.4s ease;
}
@keyframes esg-zahl-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.22); }
    100% { transform: scale(1); }
}

.esg-kennzahl .label {
    display: block;
    font-size: 0.95rem;
    color: #ffffff;
    margin-top: 4px;
    opacity: 0.95;
}

/* ==========================================================================
   Schnellzugriff-Kacheln (Termine / Downloads / Mitglied / Kontakt)
   ========================================================================== */
.esg-schnellzugriff {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.esg-kachel-grid {
    display: grid;
    /* Feste, gleichmäßige Spalten – nie ein einzelnes "Waisenkind" in der letzten Reihe.
       Desktop: 3 Spalten (6 Kacheln = 2 saubere Reihen à 3). */
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 10px 0;
}

/* Tablet: 2 Spalten (3 saubere Reihen à 2) */
@media (max-width: 900px) {
    .esg-kachel-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Handy: 1 Spalte */
@media (max-width: 560px) {
    .esg-kachel-grid { grid-template-columns: 1fr; }
}

.esg-kachel {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    background: var(--esg-karte);
    border-radius: var(--esg-radius);
    padding: 26px 24px;
    text-decoration: none;
    color: var(--esg-text);
    box-shadow: var(--esg-schatten);
    border: 1px solid #eceff1;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.esg-kachel:hover {
    transform: translateY(-4px);
    box-shadow: var(--esg-schatten-hover);
    border-color: var(--esg-gold);
}

/* Kachel-Inhalte über dem Glanz-Overlay */
.esg-kachel .icon,
.esg-kachel .titel,
.esg-kachel .beschreibung {
    position: relative;
    z-index: 1;
}

.esg-kachel .icon {
    font-size: 2rem;
    line-height: 1;
}

.esg-kachel .titel {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--esg-gruen);
}

.esg-kachel .beschreibung {
    font-size: 0.92rem;
    color: var(--esg-text-hell);
    margin: 0;
}

/* ==========================================================================
   Karten / Sektionen etwas moderner (weichere Ecken & Schatten)
   ========================================================================== */
.content-section {
    border-radius: var(--esg-radius);
    box-shadow: var(--esg-schatten);
    border: 1px solid #eceff1;
}

/* ==========================================================================
   Buttons moderner (aufbauend auf bestehender .button-Klasse)
   ========================================================================== */
.button {
    border-radius: 999px;
    font-weight: 600;
    padding: 12px 26px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 77, 64, 0.3);
}

/* ==========================================================================
   Social-Sektion auf der Aktuelles-Seite ("Folgt uns")
   ========================================================================== */
.esg-social-intro {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 30px;
    color: var(--esg-text-hell);
    font-size: 1.05rem;
}

.esg-social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    max-width: 760px;
    margin: 0 auto 40px;
}

.esg-social-karte {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
    border-radius: var(--esg-radius);
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    font-size: 1.1rem;
    box-shadow: var(--esg-schatten);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.esg-social-karte:hover {
    transform: translateY(-3px);
    box-shadow: var(--esg-schatten-hover);
}

.esg-social-karte .sm-icon {
    font-size: 1.8rem;
    line-height: 1;
}

.esg-social-karte.facebook { background: #1877f2; }
.esg-social-karte.instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.esg-social-karte.threads { background: #000000; }

/* --- DSGVO-konforme 2-Klick-Facebook-Einbindung --- */
.esg-fb-consent {
    max-width: 500px;
    margin: 0 auto 30px;
    padding: 30px 24px;
    background: #f0f2f5;
    border: 1px solid #dde1e7;
    border-radius: var(--esg-radius);
    text-align: center;
}

.esg-fb-consent p {
    color: var(--esg-text-hell);
    font-size: 0.92rem;
    margin: 12px 0 0;
}

.esg-fb-consent .button {
    background: #1877f2;
    cursor: pointer;
    border: none;
    font-size: 1rem;
    color: #fff;
}

.esg-fb-consent .button:hover {
    background: #145dbf;
}

.esg-archiv-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 auto 30px;
    max-width: 760px;
    padding: 0;
    list-style: none;
}

.esg-archiv-links a {
    display: inline-block;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #dde1e7;
    border-radius: 999px;
    text-decoration: none;
    color: var(--esg-gruen);
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.esg-archiv-links a:hover {
    background: var(--esg-gruen);
    color: #fff;
    border-color: var(--esg-gruen);
}

/* ==========================================================================
   Kleine Politur
   ========================================================================== */
.hero-content h2 {
    font-weight: 800;
}

@media (max-width: 600px) {
    .esg-kennzahl {
        min-width: 120px;
        padding: 14px 20px;
    }
    .esg-kennzahl .zahl {
        font-size: 1.8rem;
    }
}


/* ==========================================================================
   WOW-EFFEKTE – moderner Hero, Scroll-Reveal, Microinteractions
   Umgesetzt mit CSS Scroll-Driven Animations (Browser-nativ, performant).
   Alles hat einen sicheren Fallback: Ohne Unterstützung bleibt der Inhalt
   einfach sichtbar – nie unsichtbar.
   ========================================================================== */

/* --- 1. Großer, animierter Hero mit Bild und Overlay --- */
.esg-hero {
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    color: #fff;
    margin: 0 0 40px;
    border-radius: 0 0 28px 28px;
    background: var(--esg-gruen-dunkel);
}

.esg-hero__bg {
    position: absolute;
    inset: 0;
    background-image: url('img/IMG_0013.JPG');
    background-size: cover;
    background-position: center;
    /* Sanfter, langsamer Ken-Burns-Zoom – der erste "Blickfang" */
    animation: esg-kenburns 22s ease-in-out infinite alternate;
    transform: scale(1.05);
    z-index: 0;
}

@keyframes esg-kenburns {
    from { transform: scale(1.05) translateY(0); }
    to   { transform: scale(1.18) translateY(-12px); }
}

/* Dunkler Verlauf über dem Bild für Lesbarkeit */
.esg-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,54,43,0.55) 0%, rgba(0,54,43,0.35) 40%, rgba(0,54,43,0.78) 100%);
    z-index: 1;
}

.esg-hero__inhalt {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 40px 22px;
}

.esg-hero__badge {
    display: inline-block;
    background: rgba(255, 204, 0, 0.18);
    border: 1px solid var(--esg-gold);
    color: var(--esg-gold);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 8px 18px;
    border-radius: 999px;
    margin-bottom: 22px;
    backdrop-filter: blur(4px);
}

.esg-hero__titel {
    font-size: clamp(2.2rem, 6vw, 4.4rem);
    font-weight: 800;
    line-height: 1.05;
    margin: 0 0 18px;
    text-shadow: 0 4px 24px rgba(0,0,0,0.45);
    color: #fff;
    border: none;
}

.esg-hero__titel .gold { color: var(--esg-gold); }

.esg-hero__text {
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    max-width: 640px;
    margin: 0 auto 32px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
    line-height: 1.6;
}

.esg-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-bottom: 44px;
}

.esg-hero__cta .button {
    font-size: 1.05rem;
    padding: 14px 32px;
}

.esg-hero__cta .button.gold {
    background: var(--esg-gold);
    color: #263238 !important;
    text-shadow: none;
}
.esg-hero__cta .button.gold:hover { background: #ffd633; }

.esg-hero__cta .button.ghost {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.6);
}
.esg-hero__cta .button.ghost:hover { background: rgba(255,255,255,0.22); }

/* Kennzahlen im Hero */
.esg-hero .esg-kennzahlen { margin-top: 10px; }

/* Sanfter Scroll-Hinweis-Pfeil unten */
.esg-hero__scroll {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: rgba(255,255,255,0.85);
    font-size: 1.6rem;
    animation: esg-bounce 2s ease-in-out infinite;
}
@keyframes esg-bounce {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 10px); }
}

/* Hero-Inhalt sanft einblenden beim Laden */
.esg-hero__inhalt > * {
    animation: esg-hero-in 0.9s cubic-bezier(.2,.7,.2,1) both;
}
.esg-hero__inhalt > *:nth-child(1) { animation-delay: 0.05s; }
.esg-hero__inhalt > *:nth-child(2) { animation-delay: 0.20s; }
.esg-hero__inhalt > *:nth-child(3) { animation-delay: 0.35s; }
.esg-hero__inhalt > *:nth-child(4) { animation-delay: 0.50s; }
.esg-hero__inhalt > *:nth-child(5) { animation-delay: 0.65s; }

@keyframes esg-hero-in {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- 2. Scroll-Reveal: Sektionen gleiten beim Scrollen sanft ins Bild --- */
/* Standard: alles sichtbar (Fallback für alte Browser & ohne JS) */

/* Variante A: Native CSS Scroll-Driven Animation (moderne Browser) */
@supports (animation-timeline: view()) {
    .esg-reveal {
        animation: esg-reveal-in linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 55%;
    }
    @keyframes esg-reveal-in {
        from { opacity: 0; transform: translateY(40px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* Variante B: Fallback über JS-Klasse (ältere Browser) */
@supports not (animation-timeline: view()) {
    .js-reveal .esg-reveal {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.2,1);
    }
    .js-reveal .esg-reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Barrierefreiheit: wer Animationen reduziert haben möchte, bekommt keine */
@media (prefers-reduced-motion: reduce) {
    .esg-hero__bg,
    .esg-hero__scroll,
    .esg-hero__inhalt > *,
    .esg-reveal {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* --- 3. Abschnitts-Überschrift mit kleinem Akzent --- */
.esg-section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 30px;
}
.esg-section-head .eyebrow {
    display: inline-block;
    color: var(--esg-gruen-hell);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.82rem;
    margin-bottom: 8px;
}
.esg-section-head h2 {
    font-size: clamp(1.6rem, 3.5vw, 2.3rem);
    color: var(--esg-gruen);
    margin: 0;
    border: none;
    padding: 0;
}

/* Breiter, luftiger Inhaltsbereich für die neue Startseite */
.esg-main {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

/* Kachel-Icon im goldenen Kreis */
.esg-kachel .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: rgba(0, 77, 64, 0.08);
}


/* ==========================================================================
   Ergebnisse & Wettkämpfe – gebündelte Karten
   ========================================================================== */
.esg-ergebnis-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 10px;
}
@media (max-width: 900px) {
    .esg-ergebnis-grid { grid-template-columns: 1fr; }
}

.esg-ergebnis-karte {
    background: #f8faf9;
    border: 1px solid #e3e9e7;
    border-radius: var(--esg-radius);
    padding: 22px 24px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.esg-ergebnis-karte:hover {
    transform: translateY(-4px);
    box-shadow: var(--esg-schatten-hover, 0 12px 32px rgba(0,0,0,0.14));
    border-color: var(--esg-gold, #ffcc00);
}
.esg-ergebnis-karte h3 {
    margin: 0 0 14px;
    color: var(--esg-gruen);
    font-size: 1.1rem;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--esg-gold);
}
.esg-ergebnis-karte ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.esg-ergebnis-karte li {
    margin: 0 0 8px;
}
.esg-ergebnis-karte a {
    color: var(--esg-gruen-hell);
    text-decoration: none;
    font-weight: 500;
}
.esg-ergebnis-karte a:hover {
    color: var(--esg-gruen);
    text-decoration: underline;
}


/* ==========================================================================
   NAVIGATION – moderne, dezent verspielte Dropdowns (nur Desktop ab 768px)
   Baut auf der bestehenden Menüstruktur in style.css auf und verfeinert sie.
   ========================================================================== */
@media (min-width: 768px) {

    /* Hauptmenü-Punkte: weiche Pillen mit sanftem Hover */
    #mainNav .menu > li > a {
        border-radius: 10px;
        font-weight: 600;
        transition: background-color 0.25s ease, color 0.25s ease;
    }
    #mainNav .menu > li > a:hover,
    #mainNav .menu > li.has-submenu:hover > a {
        background-color: rgba(0, 77, 64, 0.08) !important;
        color: var(--esg-gruen) !important;
    }

    /* Kleiner Pfeil an Menüpunkten mit Untermenü */
    #mainNav .menu > li.has-submenu > a::after {
        content: "⌄" !important;
        font-size: 0.9em;
        margin-left: 6px;
        position: static !important;
        transform: none !important;
        transition: transform 0.25s ease;
        opacity: 0.7;
    }
    #mainNav .menu > li.has-submenu:hover > a::after {
        transform: translateY(2px) !important;
    }

    /* Das Dropdown-Panel: Karte mit Schatten, abgerundet, Akzentlinie oben */
    #mainNav .menu li ul {
        border: none !important;
        border-radius: 12px !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16) !important;
        padding: 8px !important;
        margin-top: 0 !important;        /* keine Lücke mehr */
        background: #fff !important;
        min-width: 250px !important;
        border-top: 3px solid var(--esg-gold) !important;
        overflow: visible;
    }

    /* Unsichtbare "Brücke": überbrückt den Spalt zwischen Menüpunkt und
       Dropdown, damit die Maus beim Rübergehen den Hover nicht verliert. */
    #mainNav .menu > li.has-submenu > ul::before {
        content: "";
        position: absolute;
        top: -14px;
        left: 0;
        right: 0;
        height: 14px;
        background: transparent;
    }

    /* Hover-Bereich erweitern: Dropdown bleibt offen, solange die Maus
       irgendwo über dem Menüpunkt ODER dem Dropdown ist. */
    #mainNav .menu > li.has-submenu {
        padding-bottom: 6px;
    }

    /* Sanftes Hochgleiten + Einblenden beim Öffnen */
    #mainNav .menu li:hover > ul {
        animation: esg-dropdown-in 0.22s ease both;
    }
    @keyframes esg-dropdown-in {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Einträge im Dropdown: abgerundet, Hover schiebt leicht nach rechts */
    #mainNav .menu li ul li a {
        border-radius: 8px !important;
        border-bottom: none !important;
        padding: 10px 14px !important;
        transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease !important;
    }
    #mainNav .menu li ul li a:hover {
        background-color: rgba(0, 77, 64, 0.08) !important;
        color: var(--esg-gruen) !important;
        padding-left: 20px !important;
    }

    /* Dezenter goldener Balken links beim Hover */
    #mainNav .menu li ul li {
        position: relative;
    }
    #mainNav .menu li ul li a::before {
        content: "";
        position: absolute;
        left: 4px;
        top: 50%;
        transform: translateY(-50%) scaleY(0);
        width: 3px;
        height: 60%;
        background: var(--esg-gold);
        border-radius: 3px;
        transition: transform 0.2s ease;
    }
    #mainNav .menu li ul li a:hover::before {
        transform: translateY(-50%) scaleY(1);
    }
}

/* Mobiles Menü: etwas modernere Abstände und Akzent */
@media (max-width: 767px) {
    .menu li.has-submenu > label::after {
        content: " ⌄" !important;
        transition: transform 0.25s ease;
    }
    .has-submenu > .submenu-toggle:checked ~ label::after {
        transform: rotate(180deg);
        display: inline-block;
    }
}


/* ==========================================================================
   Lade-Animation: drehende Zielscheibe (News-Seite)
   ========================================================================== */
.esg-lade {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 50px 20px;
}

.esg-zielscheibe {
    position: relative;
    width: 90px;
    height: 90px;
    animation: esg-scheibe-dreh 1.1s linear infinite;
}

/* Die konzentrischen Ringe der Zielscheibe */
.esg-zielscheibe .ring {
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.esg-zielscheibe .ring-1 {
    width: 90px; height: 90px;
    background: #fff;
    border: 3px solid var(--esg-gruen);
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.esg-zielscheibe .ring-2 {
    width: 58px; height: 58px;
    border: 3px solid var(--esg-gruen);
}
.esg-zielscheibe .ring-3 {
    width: 30px; height: 30px;
    border: 3px solid var(--esg-gruen);
}
.esg-zielscheibe .mitte {
    position: absolute;
    width: 12px; height: 12px;
    background: #ce000d;        /* rotes Zentrum */
    border-radius: 50%;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}
/* Ein "Treffer-Pfeil", der die Drehung sichtbar macht */
.esg-zielscheibe .nadel {
    position: absolute;
    width: 4px;
    height: 44px;
    background: var(--esg-gold);
    border-radius: 4px;
    top: 50%; left: 50%;
    transform-origin: bottom center;
    transform: translate(-50%, -100%);
    z-index: 1;
}

@keyframes esg-scheibe-dreh {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.esg-lade-text {
    color: var(--esg-gruen);
    font-weight: 600;
    margin: 0;
    letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
    .esg-zielscheibe { animation: none; }
}


/* ==========================================================================
   MOBILE-SCHUTZ – verhindert horizontales Überlaufen site-weit
   Viele Altseiten nutzen feste Breiten (<img width="650">, <object width="850">,
   <table width="80%">). Diese Regeln sorgen dafür, dass nichts über den
   Bildschirmrand hinausläuft, ohne die Seiten einzeln anfassen zu müssen.
   ========================================================================== */
/* Inhalts-Bilder skalieren mit (verhindert mobilen Overflow) */
img {
    max-width: 100%;
    height: auto;
}

/* AUSNAHME Logo im Header: feste, proportionale Größe statt mitskalieren –
   sonst wird es im engen Flex-Header zum schmalen "Ei" gequetscht.
   Höhere Spezifität (header .logo img) überschreibt die globale img-Regel. */
header .logo img {
    width: auto;
    max-width: none;
    flex-shrink: 0;
    object-fit: contain;
    height: 100px;
}
/* Mobil kleiner, damit Logo + Titel + Hamburger gut nebeneinander passen */
@media (max-width: 767px) {
    header .logo img { height: 52px; }
    header .logo h1 { font-size: 1.05rem; line-height: 1.2; }
}

/* Eingebettete PDFs/Kalender (object, iframe) nie breiter als der Container */
object,
iframe {
    max-width: 100%;
}

/* ==========================================================================
   MOBILE TABELLEN ALS CARDS (wie auf rwk-einbeck.de)
   Auf dem Handy wird jede Tabellenzeile zu einer eigenen Karte. Jede Zelle
   zeigt ihren Spaltennamen (aus data-label) davor. Kein Quetschen, kein
   horizontales Scrollen – gut lesbar auf schmalen Screens.
   ========================================================================== */
@media (max-width: 680px) {

    /* Tabellen-Struktur aufbrechen -> Blöcke */
    #content table,
    #design table,
    main table,
    .discipline-table,
    #mitgliedschaft-tabelle,
    #download-table,
    .zeit-tabelle,
    .esg-info-tabelle {
        display: block;
        width: 100%;
        box-shadow: none;
        border: none;
        background: transparent;
        border-radius: 0;
        overflow: visible;
        margin: 16px auto;
    }

    /* Kopfzeile ausblenden – die Spaltennamen kommen per data-label in jede Zelle */
    #content table thead,
    #design table thead,
    main table thead,
    .discipline-table thead,
    .zeit-tabelle thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    /* Jede Zeile = eine Karte */
    #content table tr,
    #design table tr,
    main table tr,
    .discipline-table tr,
    #mitgliedschaft-tabelle tr,
    #download-table tr,
    .zeit-tabelle tr,
    .esg-info-tabelle tr {
        display: block;
        background: #fff;
        border: 1px solid #eceff1;
        border-top: 3px solid var(--esg-gold, #ffcc00);
        border-radius: 12px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.08);
        padding: 8px 4px;
        margin-bottom: 16px;
    }

    /* Zellen werden zu Zeilen innerhalb der Karte */
    #content table td,
    #design table td,
    main table td,
    .discipline-table td,
    #mitgliedschaft-tabelle td,
    #download-table td,
    .zeit-tabelle td,
    .esg-info-tabelle td,
    .esg-info-tabelle th,
    .discipline-table th {
        display: block;
        width: auto !important;
        background: transparent !important;
        border: none !important;
        text-align: left !important;
        padding: 6px 16px;
        white-space: normal !important;
    }

    /* Spaltenname vor dem Zellinhalt (aus data-label), z.B. "Schüsse: 30".
       Nur anzeigen, wenn data-label nicht leer ist. */
    .discipline-table td[data-label]:not([data-label=""])::before,
    .zeit-tabelle td[data-label]:not([data-label=""])::before,
    main table td[data-label]:not([data-label=""])::before,
    #content table td[data-label]:not([data-label=""])::before {
        content: attr(data-label) ": ";
        font-weight: 700;
        color: var(--esg-gruen, #004d40);
    }

    /* Erste Zelle einer Daten-Tabellenzeile OHNE data-label-Text = Karten-Titel */
    .discipline-table td[data-label=""] {
        font-weight: 700;
        color: var(--esg-gruen, #004d40);
        font-size: 1.05rem;
        padding-bottom: 2px;
    }

    /* Label-Tabellen (Veranstaltungen): erste Zelle = Überschrift der Karte */
    .esg-info-tabelle td:first-child {
        font-weight: 700;
        color: var(--esg-gruen, #004d40);
        font-size: 1.05rem;
        padding-bottom: 2px;
    }

    /* Mitgliedschafts-Tabelle ohne data-label: Zellen untereinander,
       erste Zelle hervorgehoben */
    #mitgliedschaft-tabelle td:first-child {
        font-weight: 700;
        color: var(--esg-gruen, #004d40);
    }

    /* Download-Tabelle als Card: PDF-Icon zentriert oben, Text darunter */
    #download-table tr {
        text-align: center;
        padding: 16px;
    }
    #download-table td:first-child {
        padding-bottom: 4px;
    }
    #download-table td:first-child img {
        width: 48px;
        height: auto;
    }

    /* Leere Zellen in der Card-Ansicht ausblenden (z.B. leere 3. Spalte) */
    .esg-info-tabelle td:empty { display: none; }
}

/* Sicherheitsnetz gegen versehentlichen horizontalen Scroll der ganzen Seite */
html, body {
    overflow-x: hidden;
}


/* ==========================================================================
   MICROINTERACTIONS – dezenter Pep (alles mit Rücksicht auf reduce-motion)
   ========================================================================== */

/* Sponsoren- & Mitgliedschafts-Logos: sanfter Zoom + Farbe beim Hover */
.sponsors-list img,
.membership-logos img,
.sponsoren-liste img {
    transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
}
.sponsors-list a:hover img,
.membership-logos a:hover img,
.sponsoren-liste a:hover img {
    transform: scale(1.08);
    opacity: 1;
}

/* Abschnitts-Überschriften mit dezentem goldenem Unterstrich-Akzent,
   der beim Sichtbarwerden mitwächst */
.content-section > h2 {
    position: relative;
}

/* Inhaltslinks: wachsende Unterstreichung statt hartem Unterstrich */
main p a:not(.button):not(.spenden-btn):not(.cta-btn),
.faq-content a,
.text-container a {
    color: var(--esg-gruen-hell);
    text-decoration: none;
    background-image: linear-gradient(var(--esg-gold), var(--esg-gold));
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: left bottom;
    transition: background-size 0.3s ease, color 0.2s ease;
    padding-bottom: 1px;
}
main p a:not(.button):not(.spenden-btn):not(.cta-btn):hover,
.faq-content a:hover,
.text-container a:hover {
    background-size: 100% 2px;
    color: var(--esg-gruen);
}

/* CTA-Buttons: sanfter Lift (ergänzt bestehende .button-Regeln) */
.cta-btn,
.spenden-btn {
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* Info-Karten im Probetraining-Block: leichtes Anheben */
.info-card {
    transition: transform 0.25s ease, background-color 0.25s ease;
}
.info-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.18);
}

/* Trainingszeiten-Boxen: dezenter Lift */
.trainingszeit-box {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.trainingszeit-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Tastatur-Fokus sichtbar machen (Barrierefreiheit) */
a:focus-visible,
button:focus-visible,
.button:focus-visible {
    outline: 3px solid var(--esg-gold);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Reduce-Motion: alle Microinteractions ruhigstellen */
@media (prefers-reduced-motion: reduce) {
    .sponsors-list a:hover img,
    .membership-logos a:hover img,
    .sponsoren-liste a:hover img,
    .cta-btn:hover,
    .info-card:hover,
    .trainingszeit-box:hover {
        transform: none !important;
    }
    main p a { transition: none !important; }
}


/* ==========================================================================
   ALT-SEITEN-ANGLEICHUNG – hebt die alten #design/#content-Seiten optisch
   automatisch auf modernes Karten-Niveau, ohne jede Seite einzeln umzubauen.
   Betrifft u.a. geschichte, sport, blasrohr, archive, sponsor_werden, rwklp1718.
   ========================================================================== */

/* Der äußere #design-Container gibt nur Platz, keine eigene Optik */
#design {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

/* #content wird zur modernen weißen Karte wie .content-section */
#content {
    background: var(--esg-karte, #fff);
    border-radius: var(--esg-radius, 14px);
    box-shadow: var(--esg-schatten, 0 6px 24px rgba(0,0,0,0.08));
    border: 1px solid #eceff1;
    padding: 30px 34px;
    margin-bottom: 30px;
}

/* Überschriften auf Altseiten in Vereinsgrün, dezenter Goldakzent.
   Auch die alten <h1><u>...</u></h1>-Konstrukte sehen so wieder gut aus. */
#content h1,
#content h2 {
    color: var(--esg-gruen, #004d40);
}
#content h1 u,
#content h2 u {
    text-decoration: none;
    border-bottom: 3px solid var(--esg-gold, #ffcc00);
    padding-bottom: 4px;
}

/* Der alte dekorative "Balken" wird dezent ausgeblendet */
#balken {
    display: none;
}

/* Bilder auf Altseiten weich abrunden */
#content img {
    border-radius: 10px;
}

/* Alte <font>-Tags neutralisieren (Farben aus den 2000ern) */
#content font {
    color: inherit !important;
    font-size: inherit !important;
    font-family: inherit !important;
}

/* Alte Inhalts-Tabellen etwas moderner rahmen */
#content table {
    border-collapse: collapse;
    margin: 20px auto;
}
#content table td,
#content table th {
    padding: 8px 12px;
}


/* ==========================================================================
   Archiv-Übersicht – Jahres-Karten
   ========================================================================== */
.esg-archiv-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin: 10px 0;
}
@media (max-width: 900px) { .esg-archiv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .esg-archiv-grid { grid-template-columns: 1fr; } }

.esg-archiv-karte {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 26px 18px;
    background: var(--esg-karte, #fff);
    border: 1px solid #eceff1;
    border-radius: var(--esg-radius, 14px);
    box-shadow: var(--esg-schatten, 0 6px 24px rgba(0,0,0,0.08));
    text-decoration: none;
    color: var(--esg-gruen, #004d40);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.esg-archiv-karte:hover {
    transform: translateY(-4px);
    box-shadow: var(--esg-schatten-hover, 0 12px 32px rgba(0,0,0,0.14));
    border-color: var(--esg-gold, #ffcc00);
}
.esg-archiv-karte .jahr {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}
.esg-archiv-karte .label {
    font-size: 0.85rem;
    color: var(--esg-text-hell, #546e7a);
}


/* ==========================================================================
   Nach-oben-Button
   ========================================================================== */
.esg-nach-oben {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: var(--esg-gruen, #004d40);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease, visibility 0.25s;
    z-index: 50;
}
.esg-nach-oben.sichtbar {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.esg-nach-oben:hover {
    background: var(--esg-gold, #ffcc00);
    color: #263238;
}
.esg-nach-oben:focus-visible {
    outline: 3px solid var(--esg-gold, #ffcc00);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .esg-nach-oben { transition: opacity 0.2s ease, visibility 0.2s; transform: none; }
}


/* ==========================================================================
   Schnellanfrage-Formular (Mitglied werden)
   ========================================================================== */
.esg-anfrage {
    max-width: 560px;
    margin: 10px auto 0;
    text-align: left;
    background: #f8faf9;
    border: 1px solid #e3e9e7;
    border-top: 3px solid var(--esg-gold, #ffcc00);
    border-radius: var(--esg-radius, 14px);
    padding: 26px 28px;
}
.esg-anfrage h2 {
    margin-top: 0;
    color: var(--esg-gruen, #004d40);
    text-align: center;
}
.esg-anfrage > p {
    text-align: center;
    color: var(--esg-text-hell, #546e7a);
    margin-bottom: 20px;
}

.esg-formular .feld {
    margin-bottom: 16px;
}
.esg-formular label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--esg-text, #263238);
}
.esg-formular input,
.esg-formular select,
.esg-formular textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 13px;
    border: 1px solid #cfd8d5;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.esg-formular input:focus,
.esg-formular select:focus,
.esg-formular textarea:focus {
    outline: none;
    border-color: var(--esg-gruen, #004d40);
    box-shadow: 0 0 0 3px rgba(0, 77, 64, 0.12);
}
.esg-formular .feld-hinweis {
    font-size: 0.85rem;
    color: #595959;
    margin: 0 0 14px;
}
.esg-formular button {
    width: 100%;
    border: none;
    cursor: pointer;
    font-size: 1.05rem;
}
.mf-status {
    margin: 14px 0 0;
    font-size: 0.95rem;
}
.mf-status.ok { color: var(--esg-gruen, #004d40); }
.mf-status.fehler { color: #ce000d; font-weight: 600; }


/* ==========================================================================
   "Jetzt geöffnet?"-Trainingsstatus
   ========================================================================== */
.esg-trainingsstatus {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 auto 18px;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 0.98rem;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
/* Auf der Startseite steht die Sektion auf grünem Grund -> Box hebt sich weiß ab */
.trainingszeiten-section .esg-trainingsstatus {
    display: flex;
    width: fit-content;
}
.esg-trainingsstatus .punkt {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
.esg-trainingsstatus.offen .punkt {
    background: #2e7d32;
    box-shadow: 0 0 0 rgba(46, 125, 50, 0.5);
    animation: esg-puls 1.6s infinite;
}
.esg-trainingsstatus.offen .text { color: #1b5e20; }
.esg-trainingsstatus.zu .punkt { background: #b0bec5; }
.esg-trainingsstatus.zu .text { color: #455a64; }

@keyframes esg-puls {
    0%   { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.5); }
    70%  { box-shadow: 0 0 0 10px rgba(46, 125, 50, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .esg-trainingsstatus.offen .punkt { animation: none; }
}


/* ==========================================================================
   TABELLEN – zentrale moderne Gestaltung
   Greift auf Inhaltstabellen site-weit, ohne jede Seite einzeln anzufassen.
   Grüner Kopf, Zebra-Streifen, weiche Ecken, Hover – passend zum Vereinslook.
   ========================================================================== */
#content table,
#design table,
main table,
.discipline-table,
#mitgliedschaft-tabelle,
#download-table,
.zeit-tabelle {
    width: 100%;
    max-width: 760px;
    margin: 24px auto;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid #e3e9e7;
    border-radius: var(--esg-radius, 14px);
    overflow: hidden;              /* damit die runden Ecken greifen */
    box-shadow: var(--esg-schatten, 0 6px 24px rgba(0,0,0,0.08));
    font-size: 0.98rem;
}

/* Echte Kopfzeile (im <thead>): Vereinsgrün mit weißer Schrift */
#content table thead th,
#design table thead th,
main table thead th,
.discipline-table thead th,
#mitgliedschaft-tabelle thead th,
#download-table thead th,
.zeit-tabelle thead th {
    background: var(--esg-gruen, #004d40);
    color: #fff;
    font-weight: 600;
    text-align: left;
    padding: 12px 16px;
    border: none;
}

/* Zeilen-Label-Zellen (<th> innerhalb von <tbody>, z.B. "Altersgruppe:"):
   dezent hellgrün hervorheben statt kräftig grün */
#content table tbody th,
#design table tbody th,
main table tbody th,
.discipline-table tbody th {
    background: #eef5f3;
    color: var(--esg-gruen, #004d40);
    font-weight: 600;
    text-align: left;
    padding: 11px 16px;
    border: none;
    border-top: 1px solid #eceff1;
}

/* Beschreibungs-/Label-Tabellen: KEIN grüner Spaltenkopf (die erste Zeile
   ist hier Inhalt, keine Überschrift). Stattdessen linke Label-Spalte
   dezent hervorheben. Überschreibt gezielt die allgemeine thead-th-Regel. */
.esg-info-tabelle thead th,
.esg-info-tabelle tbody th {
    background: #eef5f3 !important;
    color: var(--esg-gruen, #004d40) !important;
    font-weight: 600;
    text-align: left;
    padding: 11px 16px;
    border: none;
    border-top: 1px solid #eceff1;
}
/* Erste Spalte (Label) in Label-Tabellen hervorheben, egal ob td oder th */
.esg-info-tabelle td:first-child,
.esg-info-tabelle th:first-child {
    background: #eef5f3;
    color: var(--esg-gruen, #004d40);
    font-weight: 600;
}
.esg-info-tabelle td:first-child u,
.esg-info-tabelle th u {
    text-decoration: none;
}
/* Restliche Zellen in Label-Tabellen normal (nicht hervorgehoben) */
.esg-info-tabelle td {
    background: #fff;
}
.esg-info-tabelle td:first-child { background: #eef5f3; }

/* Zellen */
#content table td,
#design table td,
main table td,
.discipline-table td,
#mitgliedschaft-tabelle td,
#download-table td,
.zeit-tabelle td {
    padding: 11px 16px;
    border: none;
    border-top: 1px solid #eceff1;
    vertical-align: top;
    /* Sauberer Umbruch: lange Wörter nicht hart mittendrin abschneiden,
       sondern mit Trennstrich umbrechen (verhindert "Kleinkaliberge-wehr"-Abbruch) */
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}

/* Tabellenzellen und -köpfe dürfen umbrechen (feste width-Attribute aus
   dem alten HTML aufheben, die Wörter einquetschen) */
#content table th, #content table td,
#design table th, #design table td,
main table th, main table td {
    white-space: normal;
}

/* Zebra-Streifen für bessere Lesbarkeit */
#content table tbody tr:nth-child(even),
#design table tbody tr:nth-child(even),
main table tbody tr:nth-child(even),
.discipline-table tbody tr:nth-child(even),
#mitgliedschaft-tabelle tbody tr:nth-child(even),
.zeit-tabelle tbody tr:nth-child(even) {
    background: #f6f9f8;
}

/* Sanfter Hover auf Zeilen */
#content table tbody tr:hover,
#design table tbody tr:hover,
main table tbody tr:hover,
.discipline-table tbody tr:hover,
#mitgliedschaft-tabelle tbody tr:hover,
.zeit-tabelle tbody tr:hover {
    background: #eef5f3;
}

/* Die alten "Folgt uns"-Button-Tabellen (archiv2019) NICHT als Datentabelle
   stylen – sie sind ein Layout-Hack mit Border 0. Zurücksetzen. */
#content table[border="0"],
#design table[border="0"] {
    border: none;
    box-shadow: none;
    background: transparent;
    width: auto;
}
#content table[border="0"] td,
#design table[border="0"] td {
    border: none;
    background: transparent;
}

/* Download-Tabelle: PDF-Icons sollen nicht von Zebra/Hover "zugedeckt" werden,
   linke Icon-Spalte schmal halten */
#download-table td:first-child {
    width: 60px;
    text-align: center;
}


/* ==========================================================================
   3D-TILT für Schnellzugriff-Kacheln (nur Desktop, dezent)
   Die Karte neigt sich leicht zur Maus. Nur bei echter Maus + wenn keine
   Bewegungsreduktion gewünscht ist. Touch/Handy: immer statische Karte.
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
    .esg-kachel-grid,
    .esg-ergebnis-grid,
    .esg-archiv-grid { perspective: 1000px; }

    .esg-kachel,
    .esg-tilt-karte {
        transform-style: preserve-3d;
        will-change: transform;
    }

    /* Der Tilt wird per JS über CSS-Variablen gesetzt */
    .esg-tilt {
        transform:
            perspective(1000px)
            rotateX(var(--tiltX, 0deg))
            rotateY(var(--tiltY, 0deg))
            translateY(-4px);
    }

    /* Dezenter Glanz, der dem Mauszeiger folgt */
    .esg-kachel .glanz {
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: radial-gradient(
            circle at var(--mausX, 50%) var(--mausY, 0%),
            rgba(255, 204, 0, 0.18),
            transparent 60%
        );
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }
    .esg-kachel:hover .glanz { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .esg-tilt { transform: none !important; }
}


/* ==========================================================================
   Trennlinie im Navigations-Dropdown (gruppiert lange Menüs optisch)
   ========================================================================== */
.menu-trenner {
    height: 0;
    margin: 6px 10px;
    padding: 0 !important;
    border-top: 1px solid #e3e9e7;
    list-style: none;
    pointer-events: none;
}
.menu-trenner a { display: none; }

/* Im mobilen Menü etwas mehr Luft und passende Farbe */
@media (max-width: 767px) {
    .menu-trenner {
        margin: 6px 16px;
        border-top: 1px solid rgba(255, 255, 255, 0.25);
    }
}


/* ==========================================================================
   Termine-Teaser auf der Startseite
   ========================================================================== */
.esg-termine-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}


/* ==========================================================================
   STARTSEITE – übersichtlichere Gliederung
   Mehr Weißraum zwischen den Abschnitten + Partner-Block zweispaltig.
   ========================================================================== */

/* Mehr Luft zwischen den Hauptabschnitten der Startseite */
.esg-main > section {
    margin-bottom: 44px;
}
.esg-main > section:last-child {
    margin-bottom: 20px;
}

/* Partner & Mitgliedschaften: zwei Spalten nebeneinander */
.esg-partner-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
    margin-top: 10px;
}
.esg-partner-spalte h3 {
    color: var(--esg-gruen, #004d40);
    margin: 0 0 16px;
    font-size: 1.1rem;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--esg-gold, #ffcc00);
    display: inline-block;
}
.esg-partner-spalte .sponsors-list,
.esg-partner-spalte .membership-logos {
    margin-bottom: 14px;
}

/* Trennstrich zwischen den beiden Spalten auf dem Desktop */
@media (min-width: 701px) {
    .esg-partner-grid .esg-partner-spalte:first-child {
        border-right: 1px solid #e3e9e7;
        padding-right: 30px;
    }
}

/* Mobil: Partner-Spalten untereinander */
@media (max-width: 700px) {
    .esg-partner-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .esg-partner-grid .esg-partner-spalte + .esg-partner-spalte {
        border-top: 1px solid #e3e9e7;
        padding-top: 26px;
    }
}


/* ==========================================================================
   Kompakte Trainingszeiten-Liste auf der Startseite (grüner Abschnitt)
   ========================================================================== */
.esg-zeiten-liste {
    list-style: none;
    padding: 0;
    margin: 18px auto;
    max-width: 560px;
}
.esg-zeiten-liste li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
}
.esg-zeiten-liste li:last-child { border-bottom: none; }
.esg-zeiten-liste .tag {
    font-weight: 700;
    min-width: 110px;
    text-align: left;
    color: var(--esg-gold, #ffcc00);
}
.esg-zeiten-liste .zeit {
    font-weight: 600;
    min-width: 150px;
    text-align: left;
}
.esg-zeiten-liste .wer {
    font-size: 0.9rem;
    opacity: 0.9;
    text-align: left;
    flex: 1;
}
.esg-zeiten-adresse {
    color: #fff;
    opacity: 0.95;
    margin: 8px 0 18px;
}

@media (max-width: 520px) {
    .esg-zeiten-liste li { flex-direction: column; gap: 2px; text-align: center; align-items: center; }
    .esg-zeiten-liste .tag,
    .esg-zeiten-liste .zeit,
    .esg-zeiten-liste .wer { min-width: 0; text-align: center; }
}