/*SERVER*/
:root {
    --bg: #0f0f0f;
    --text: #f5f5f5;
    --gold: #c9a15d;
    --accent: #d0a458;
    --muted: #bdbdbd;
    --footer: #888;
}

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

html {
    height: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    background: var(--bg);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
}

a {
    color: var(--gold);
    text-decoration: none;
}

/* Sticky Footer: .container nimmt die volle Höhe ein, .content wächst
   und schiebt den Footer ans untere Ende - bei kurzen Seiten klebt er
   am Fensterrand, bei langen Seiten bleibt er ganz normal am Seitenende */
.container {
    display: flex;
    flex-direction: column;
    flex: 1;

    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px;
    width: 100%;
}

.content {
    flex: 1;
    width: 100%;
}


/* --------------------------------------------------
   Menü
-------------------------------------------------- */

.menu-wrapper {
    position: absolute;
    bottom: 15px;
    right: 0;
    z-index: 1000;
}

/* header2.html.twig hat ein größeres Emblem links, dadurch mehr Höhe
   in der Logo-Zeile - Kartenstapel hier 20px tiefer setzen */
.header-v2 .menu-wrapper {
    bottom: -5px;
}

/* Kartenstapel */


#menu-toggle {
    position: relative;
    transform: translateY(6px);

    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;

    z-index: 1002;
}

/*
#menu-toggle {
    position: relative;
    transform: translateY(6px);

    background: var(--bg);
    border: 0;
    padding: 1px 1px;
    margin: 0;
    cursor: pointer;

    z-index: 1002;
}
*/

#menu-toggle img {
    display: block;
    width: 110px;
    height: auto;
    transition: transform .25s ease;
    filter:
        drop-shadow(2px 2px 0 #000)
        drop-shadow(-2px 2px 0 #000)
        drop-shadow(2px -2px 0 #000)
        drop-shadow(-2px -2px 0 #000);
}

#menu-toggle:hover img {
    transform: scale(1.08) rotate(-2deg);
}

/* Menü */

#main-menu {
    position: absolute;

    top: calc(100% - 30px);
    right: 20px;

    width: 280px;
    max-width: calc(100vw - 40px);

    display: none;

    background: var(--bg);
    border: 2px solid var(--gold);
    border-radius: 18px;

    padding: 24px;

    box-sizing: border-box;

    z-index: 1001;

    box-shadow:
        0 12px 30px rgba(0,0,0,.45),
        0 24px 60px rgba(0,0,0,.35);

    animation: menuOpen .22s ease;
}

#main-menu.open {
    display: block;
}

@keyframes menuOpen {

    from {
        opacity: 0;
        transform: translateY(-10px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}

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

#main-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#main-menu li {
    margin: 0;
}

#main-menu li + li {
    margin-top: 6px;
}

/* Hauptpunkte */

#main-menu > ul > li > a {
    display: block;

    padding: 8px 0;

    color: var(--text);

    text-decoration: none;

    font-size: 1rem;
    font-weight: 600;

    text-align: left;

    transition: color .2s ease;
}

/* Untermenüs */

#main-menu ul ul {
    margin: 8px 0 6px 10px;
    padding-left: 16px;

    border-left: 2px solid var(--footer);
}

#main-menu ul ul a {
    display: block;

    padding: 6px 0;

    color: var(--muted);

    font-size: .95rem;
    font-weight: 500;

    text-align: left;

    transition:
        color .2s ease,
        transform .2s ease;
}

/* Hover */

#main-menu a:hover {
    color: var(--gold);
    transform: translateX(4px);
}

/* Aktive Seite */

#main-menu li.active > a {
    color: var(--accent);
    font-weight: 700;
}

/* Hintergrund abdunkeln */

#main-menu::before {
    content: "";
    position: fixed;
    inset: 0;

    background: rgba(0,0,0,.45);

    opacity: 0;
    pointer-events: none;

    transition: opacity .2s ease;
}

#main-menu.open::before {
    opacity: 1;
}


/* --------------------------------------------------
   Social-Media-Buttons (fest am rechten Rand)
-------------------------------------------------- */

.social-fixed {
    position: fixed;
    top: 200px;
    right: 0;
    z-index: 900;

    pointer-events: none;
}

.social-box {
    display: flex;
    flex-direction: column;

    background: #1a1a1a;
    border: 1px solid var(--gold);
    border-right: none;
    border-radius: 12px 0 0 12px;
    overflow: hidden;

    box-shadow: 0 10px 24px rgba(0,0,0,.35);

    pointer-events: auto;
}

.social-box a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 45px;
    height: 45px;

    border-bottom: 1px solid rgba(201,161,93,.25);

    transition: background .2s ease;
}

.social-box a:last-child {
    border-bottom: none;
}

.social-box img {
    width: 22px;
    height: 22px;
}

.social-box a:hover,
.social-box a:focus-visible {
    background: var(--gold);
}

/* Blitzanmeldung: eigener CTA-Button in der gleichen Leiste, in Gold statt
   Weiß, damit er sich von den reinen Social-Media-Links abhebt. */
.social-box .social-cta {
    color: var(--gold);
}

.social-box .social-cta svg {
    width: 22px;
    height: 22px;
}

.social-box .social-cta:hover,
.social-box .social-cta:focus-visible {
    background: var(--gold);
    color: var(--bg);
}

@media (max-width: 768px) {

    .social-fixed {
        top: 45%;
    }

    .social-box a {
        width: 38px;
        height: 38px;
    }

    .social-box img {
        width: 18px;
        height: 18px;
    }

    .social-box .social-cta svg {
        width: 18px;
        height: 18px;
    }

}


/* --------------------------------------------------
   Content
-------------------------------------------------- */

.content {
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.7;
}

.content h1 {
    color: var(--muted);
    font-size: clamp(2.5rem, 6vw, 5rem);
    margin-bottom: 15px;
    text-align: center;
}

.content h2 {
    color: var(--gold);
    font-size: 2rem;
    margin-bottom: 15px;
    text-align: center;
}

.content h3 {
    color: var(--gold);
    font-size: 1.4rem;
    margin: 40px 0 15px;
}

.content h4 {
    color: var(--accent);
    font-size: 1.15rem;
    margin: 15px 0 5px;
}
		
.content p {
    color: var(--muted);
    font-size: 1.15rem;

    text-align: justify;
    text-align-last: left;
    hyphens: auto;
}

.content p + p {
    margin-top: 1.5rem;
}

.content ul {
    list-style-type: "– ";

    margin: 20px 0 20px 45px;

    color: var(--muted);
    font-size: 1.15rem;
}

.content li {
    margin-bottom: 8px;
    padding-left: 4px;
}

.content a:hover {
    text-decoration: underline;
}

.gold-text {
    color: var(--gold);
}

/* --------------------------------------------------
   Header
-------------------------------------------------- */
header {
    position: relative;
    /*overflow: hidden;*/
    text-align: center;
    padding-bottom: 55px; /* Platz für die Linie und den Kartenstapel */
}

header::before {
    content: "";
    position: absolute;
    inset: 0;

    background: url("../images/header_back.png") center center / cover no-repeat;

    opacity: .2;

    z-index: 0;
    pointer-events: none;

}

header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 42px;

    height: 2px;
    background: var(--gold);

    z-index: 2;
}

header > * {
    position: relative;
    z-index: 1;
}

/* "Start"-Wort, das linksbündig in die goldene Trennlinie eingelassen ist */
.home-link {
    position: absolute;
    left: 0;
    bottom: 34px;
    z-index: 3;

    background: var(--bg);
    padding: 0 14px 0 0;

    color: var(--gold);
    font-weight: 700;
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    white-space: nowrap;

    transition: color .2s ease;
}

.home-link:hover,
.home-link:focus-visible {
    color: var(--text);
}

/* Neue Zeile: Logo - Badge - Logo */
.header-top {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5rem;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

/* Emblem in header2 ist größer, dadurch weniger Platz in der Reihe -
   Abstände verkleinern, damit es nicht umbricht */
.header-v2 .header-top {
    gap: 2rem;
}

/* Bestehende Badge */
.badge {
    display: inline-block;
    padding: 10px 20px;
    margin-bottom: 25px;

    border: 1px solid var(--gold);
    border-radius: 999px;

    color: var(--gold);
    font-weight: bold;
    white-space: nowrap;
}

/* Nur innerhalb von .header-top */
.header-top .badge {
    margin-bottom: 0;
}

.subtitle {
    color: var(--gold);
    font-size: clamp(1.2rem, 3vw, 2rem);
    margin-bottom: 30px;
    text-align: center;
}

/* Mehrere Logos untereinander (bestehend) */
.logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.logos img {
    height: 90px;
    width: auto;
}

/* Sponsor-Logo-Reihe auf der Startseite (unterhalb des Headers) - eigene,
   um 50% kleinere Groesse statt der Basis-.logos-Groesse, die auch die
   Header-Partnerlogos (TSV/Wolfsburg) nutzen und unveraendert bleiben. */
.home-sponsor-logos img {
    height: 60px;
}

/* Emblem in header2.html.twig - etwas größer als die Partner-Logos */
.logos.header-emblem img {
    height: 110px;
}

.logos.header-partners img {
    height: 85px;
}

/* Logos innerhalb der neuen Header-Zeile */
.header-top .logos {
    margin-bottom: 0;
}

/* .content h3 bringt eigentlich 40px oben / 15px unten Abstand für
   Zwischenüberschriften im Seitentext mit - wirkt aber auch hier auf die
   Header-Überschrift, weil .content ein Elternelement ist. Der ungleiche
   Abstand verschiebt die Textmitte gegenüber den Logos nach unten, obwohl
   align-items: center eigentlich zentrieren soll. Deshalb hier auf 0. */
.header-top h3 {
    margin: 0;
}

/* "oder" in normaler statt fetter Schrift zwischen den beiden fett
   gesetzten Namensteilen der Überschrift. */
.header-top h3 .subtitle-light {
    font-weight: normal;
    color: var(--accent);
}

.logogold {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    margin: 5px 0 15px;
}

.logogold img {
    height: 300px;
    width: auto;
}

.content .back {
    margin-top: 50px;
    text-align: center;
}

.content .back a {
    display: inline-block;
    padding: 12px 24px;

    border: 1px solid var(--gold);
    border-radius: 999px;

    font-weight: bold;
}

.content .button {
    margin-top: 50px;
    text-align: center;
}

/* Button direkt unter einer Zwischenueberschrift (z.B. "Zur Ausschreibung"
   unter "Qualifikation"): der grosse Standardabstand oben ist hier gedacht,
   um Abstand zu vorherigem Absatztext zu schaffen - direkt nach einer
   Ueberschrift wirkt das nur wie ein Fehler (Button haengt weit vom Titel
   weg, dafuer fast ohne Abstand zur naechsten Ueberschrift darunter).
   Deshalb hier enger an den Titel heran und mit eigenem Abstand nach unten. */
.content h2 + .button {
    margin-top: 15px;
    margin-bottom: 35px;
}

.content .button a {
    display: inline-block;
    padding: 12px 24px;

    border: 1px solid var(--gold);
    border-radius: 999px;

    font-weight: bold;
}

.content .center,
.content .center p {
    text-align: center;
    text-align-last: center;
}

/* Countdown-Hinweis auf der Danke-Seite (automatische Weiterleitung) */
.content .redirect-hint {
    margin-top: 30px;

    color: var(--muted);
    font-size: .9rem;
    text-align: center;
}

.content .redirect-hint a {
    font-weight: bold;
}

/* --------------------------------------------------
   Schirmherr
-------------------------------------------------- */

.patron-card {
    display: flex;
    align-items: center;
    gap: 20px;

    width: 100%;
    max-width: 460px;

    margin: 50px auto 70px;
    padding: 18px;

    background: rgba(255,255,255,.06);
    border: 1px solid var(--gold);
    border-radius: 18px;

    box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.patron-card img {
    width: 120px;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    flex-shrink: 0;

    border-radius: 10px;
    border: 2px solid var(--gold);
}

.patron-info {
    flex: 1;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
}

.patron-title {
    margin-bottom: 8px;

    color: var(--gold);

    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.patron-name {
    color: var(--text);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
}

/* --------------------------------------------------
   Charity Card
-------------------------------------------------- */

.charity-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;

    width: 100%;
    max-width: 460px;

    margin: 24px auto;
    padding: 20px;

    background: rgba(255,255,255,.06);
    border: 1px solid var(--gold);
    border-radius: 18px;

    box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.charity-card > img {
    width: 100%;
    max-width: 300px;
    height: auto;
    object-fit: contain;

    background: #fff;
    padding: 14px 18px;

    border-radius: 12px;
    border: 2px solid var(--gold);
}

.charity-links {
    display: flex;
    justify-content: center;
    gap: 14px;
}

.charity-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #fff;

    opacity: .85;
    transition: opacity .2s ease;
}

.charity-links a:hover,
.charity-links a:focus-visible {
    opacity: 1;
}

.charity-links svg {
    width: 26px;
    height: 26px;
}

.charity-links img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

/* --------------------------------------------------
   Download List
-------------------------------------------------- */

.download-list {
    width: 100%;
    max-width: 700px;

    margin: 30px auto;

    background: rgba(255,255,255,.06);
    border: 1px solid var(--gold);
    border-radius: 18px;

    overflow: hidden;

    box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.download-item {
    display: flex;
    align-items: center;
    gap: 16px;

    padding: 16px 22px;

    color: var(--text);
    text-decoration: none;

    border-bottom: 1px solid rgba(201,161,93,.25);

    transition: background .2s ease;
}

.download-item:last-child {
    border-bottom: none;
}

.download-item:hover,
.download-item:focus-visible {
    background: rgba(255,255,255,.05);
}

.download-item:hover .download-name {
    color: var(--gold);
}

.download-badge {
    flex-shrink: 0;

    min-width: 46px;
    padding: 4px 6px;

    text-align: center;

    color: var(--gold);
    border: 1px solid var(--gold);
    border-radius: 6px;

    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
}

.download-name {
    flex: 1;

    font-weight: 600;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    transition: color .2s ease;
}

.download-meta {
    flex-shrink: 0;

    color: var(--muted);
    font-size: .85rem;
    white-space: nowrap;
}

.download-arrow {
    display: inline-flex;
    flex-shrink: 0;

    color: var(--gold);
}

.download-arrow svg {
    width: 20px;
    height: 20px;
}

.download-empty {
    padding: 22px;
    color: var(--muted);
    text-align: center;
}

/* --------------------------------------------------
   Reveal (Klick-zum-Anzeigen Kontaktdaten)
-------------------------------------------------- */

.reveal-btn {
    display: inline-block;

    padding: 10px 20px;

    background: none;
    border: 1px solid var(--gold);
    border-radius: 999px;

    color: var(--gold);
    font-weight: bold;
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;

    transition: .2s ease;
}

.reveal-btn:hover,
.reveal-btn:focus-visible {
    background: var(--gold);
    color: #111;
}

.reveal a {
    font-weight: bold;
}

/* --------------------------------------------------
   Sponsoren
-------------------------------------------------- */

.sponsor-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;

    margin: 60px auto;
}

.sponsor-item img {
    display: block;
    width: 400px;
    height: auto;
}

.sponsor-item a,
.sponsor-item span.logo-swap {
    display: block;
}

.sponsor-empty {
    color: var(--muted);
    text-align: center;
}

/* Ab 4 Logos: zweispaltig statt untereinander */
.sponsor-list--grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    align-items: center;
}

/* --------------------------------------------------
   Logo mit Hover-/Press-Zustand
   Wird an mehreren Stellen wiederverwendet: hier bei den Sponsoren-
   Logos, außerdem bei den Partner-Wappen im Header (header-partners)
   und bei den Sponsor-Logos auf der Startseite (home-sponsor-logos).

   Basis-, Hover- und (wo vorhanden) Press-Bild liegen deckungsgleich
   übereinander (position: absolute) und werden nur über die Deckkraft
   ein-/ausgeblendet - kein Nachladen/Flackern wie beim Austauschen von
   src. :focus-visible löst denselben Wechsel wie :hover aus, damit das
   Logo auch für Tastatur-Nutzer erkennbar reagiert, plus ein sichtbarer
   Fokus-Rahmen, da das Bild sonst keinen eigenen Indikator hat.
-------------------------------------------------- */
.logo-swap {
    position: relative;
    display: inline-block;
}

.logo-swap img {
    display: block;
}

.logo-swap .logo-img--hover,
.logo-swap .logo-img--press {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
}

.logo-swap:hover .logo-img--hover,
.logo-swap:focus-visible .logo-img--hover {
    opacity: 1;
}

.logo-swap:active .logo-img--press {
    opacity: 1;
}

.logo-swap:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 6px;
    border-radius: 4px;
}

/* --------------------------------------------------
   Spendenbox
-------------------------------------------------- */

.donation-card {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 30px;

    width: 100%;
    max-width: 700px;

    margin: 50px auto;
    padding: 24px;

    background: rgba(255,255,255,.06);
    border: 1px solid var(--gold);
    border-radius: 18px;

    box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

/* Beide Absaetze (vor und nach dem Bankdaten/QR-Block) sind eigene,
   direkte Flex-Kinder von .donation-card mit flex-basis 100% - dadurch
   erzwingen sie einen Zeilenumbruch und liegen ueber die volle Breite,
   waehrend .donation-details und .donation-qr dazwischen nebeneinander in
   einer Zeile bleiben (Desktop) bzw. gestapelt in Dokumentreihenfolge
   erscheinen (Mobil). */
.donation-note {
    flex: 1 1 100%;

    color: var(--muted);
    font-size: 1.15rem;

    text-align: justify;
    text-align-last: left;
    hyphens: auto;
}

.donation-details {
    flex: 1 1 320px;

    margin: 0;
    padding: 14px 18px;

    background: rgba(255,255,255,.05);
    border: 1px solid rgba(201,161,93,.3);
    border-radius: 12px;
}

.donation-details dt {
    color: var(--gold);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.donation-details dd {
    margin: 2px 0 12px;
    color: var(--text);
    font-size: 1rem;
}

.donation-details dd:last-child {
    margin-bottom: 0;
}

/* align-items: stretch am Elternelement gibt .donation-qr die gleiche
   Hoehe wie .donation-details daneben - justify-content: space-between
   haelt das Bild oben (Oberkante buendig mit dem Rahmen) und schiebt die
   Beschriftung ganz nach unten (buendig mit der Unterkante des Rahmens). */
.donation-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    flex-shrink: 0;
}

.donation-qr img {
    display: block;
    width: 160px;
    height: 160px;

    background: #fff;
    padding: 12px;

    border-radius: 12px;
    border: 2px solid var(--gold);
}

.donation-qr-label {
    color: var(--muted);
    font-size: .85rem;
    text-align: center;
}



/* --------------------------------------------------
   Private Sponsoren
-------------------------------------------------- */

.private-sponsors {
    width: 100%;
    max-width: 700px;

    margin: 80px auto 0;
    padding: 24px;

    background: rgba(255,255,255,.06);
    border: 1px solid var(--gold);
    border-radius: 18px;

    text-align: center;
}

.private-sponsors-title {
    margin-bottom: 14px;

    color: var(--gold);

    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.content .private-sponsors-list {
    margin: 0;
    list-style: none;
}

.private-sponsors-list {
    list-style: none;

    display: flex;
    flex-direction: column;
    gap: 8px;

    color: var(--text);
    font-size: 1.1rem;
}

/* --------------------------------------------------
   Formulare (Grav Form-Plugin)
-------------------------------------------------- */

.form-wrap-with-hint {
    width: 100%;
    max-width: 680px;

    margin: 30px auto;
}

/* Info-Box der Teilnehmer-Anmeldung (Qualifikation): zeigt den aus dem
   Kalenderlink uebernommenen Termin/Empfaenger an bzw. eine Fehlermeldung,
   falls das Formular ohne gueltigen Link aufgerufen wurde. */
.content .anmeldung-info {
    width: 100%;
    max-width: 680px;

    margin: 30px auto 0;
    padding: 14px 30px;

    background: rgba(255,255,255,.06);
    border: 1px solid var(--gold);
    border-radius: 18px;

    color: var(--muted);
    font-size: .9rem;
    text-align: center;
}

.content .anmeldung-info.is-error {
    border-color: #c0575c;
    color: #e2888c;
}

.content .form-wrap-with-hint form {
    margin: 0;

    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.content .form-required-hint {
    margin: 0;
    padding: 10px 30px 16px;

    background: rgba(255,255,255,.06);
    border: 1px solid var(--gold);
    border-top: none;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;

    color: var(--muted);
    font-size: .8rem;
    font-style: italic;
    text-align: center;
}

.content form {
    width: 100%;
    max-width: 680px;

    margin: 30px auto;
    padding: 30px;

    background: rgba(255,255,255,.06);
    border: 1px solid var(--gold);
    border-radius: 18px;

    text-align: left;
}

.content form .form-field {
    margin-bottom: 20px;
}

/* Startgeld/Verlustgeld nebeneinander statt in voller Breite. Label +
   Eingabe stecken zusammen in einem äußeren .form-field-Block - der muss
   als Ganzes schmaler werden, nicht nur die Eingabe selbst, sonst bricht
   die Zeile trotzdem nach jedem Feld um. */
.content form .form-field:has([data-grav-field="number"]) {
    display: inline-block;
    width: calc(50% - 12px);
    vertical-align: top;

    margin-right: 16px;
    box-sizing: border-box;
}

.content form .form-field:has([data-grav-field="number"]) + .form-field:has([data-grav-field="number"]) {
    margin-right: 0;
}

/* Datum/Uhrzeit nur ab etwas breiteren Bildschirmen nebeneinander - die
   nativen Datum-/Uhrzeit-Widgets (v.a. Safari) haben eine eingebaute
   Mindestbreite für ihre Segmente und laufen auf schmalen Handys sonst
   übereinander/über den Rand hinaus. */
@media (min-width: 480px) {
    .content form .form-field:has([data-grav-field="date"]),
    .content form .form-field:has([data-grav-field="time"]) {
        display: inline-block;
        width: calc(50% - 12px);
        vertical-align: top;

        margin-right: 16px;
        box-sizing: border-box;
    }

    .content form .form-field:has([data-grav-field="time"]) {
        margin-right: 0;
    }
}

/* Unabhängig von obiger Anordnung: die Eingabe selbst soll nie breiter als
   nötig sein - auf dem Handy stehen Datum/Uhrzeit zwar untereinander, aber
   ohne das hier wären sie trotzdem über die volle Formularbreite gezogen,
   obwohl "12:30" darin nur wenig Platz braucht. */
.content form [data-grav-field="date"] input,
.content form [data-grav-field="time"] input {
    max-width: 220px;
}

.content form label {
    display: block;
    margin-bottom: 6px;

    color: var(--gold);
    font-weight: 600;
    font-size: .95rem;

    text-wrap: pretty;
}

.content form label .required {
    color: var(--gold);
    margin-left: 2px;
}

.content form input:not([type="checkbox"]):not([type="radio"]),
.content form textarea,
.content form select {
    width: 100%;
    padding: 10px 14px;

    background: rgba(255,255,255,.06);
    border: 1px solid var(--gold);
    border-radius: 8px;

    color: var(--text);
    font-family: inherit;
    font-size: 1rem;

    box-sizing: border-box;

    /* Sagt dem Browser, dass hier ein dunkles Farbschema gilt, damit er
       die systemeigene Bedienoberfläche (Kalender-/Uhr-Symbol bei
       Datum/Uhrzeit, Aufklapp-Liste bei select) automatisch hell statt
       schwarz-auf-hell darstellt - vor allem unter Windows/Chrome
       sichtbar, wo diese Symbole sonst schwarz und auf dunklem
       Hintergrund kaum erkennbar sind. */
    color-scheme: dark;
}

/* Zusätzliche, explizite Absicherung für die Kontrastfarben in der
   Aufklapp-Liste von <select> - color-scheme deckt das zwar meist schon
   ab, aber nicht in jeder Browser-/Windows-Kombination zuverlässig. */
.content form select option {
    background: #1a1a1a;
    color: var(--text);
}

/* Checkbox/Radio: vor statt über dem Label, klein und bündig mit dem Text */
.content form input[type="checkbox"],
.content form input[type="radio"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;

    margin: 0;

    accent-color: var(--gold);
}

.content form .form-input-wrapper:has(input[type="checkbox"]),
.content form .form-input-wrapper:has(input[type="radio"]) {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.content form .form-input-wrapper:has(input[type="checkbox"]) label,
.content form .form-input-wrapper:has(input[type="radio"]) label {
    display: inline;
    margin-bottom: 0;
    color: var(--text);
    font-weight: 400;

    text-wrap: pretty;
}

.content form textarea {
    min-height: 110px;
    resize: vertical;
}

/* Mehrfachauswahl-Checkboxen (z.B. "Anmeldung möglich über"): das
   Form-Plugin lädt sein eigenes form-styles.css, das bei diesem Feldtyp
   den echten Input unsichtbar macht (display:none) und stattdessen ein
   ::before-Pseudoelement am Label als Kästchen zeichnet. Der Abstand zum
   Text kommt daher vom padding-left des Labels (20px im Plugin-Standard),
   nicht von einem Margin am Input - deshalb hier padding-left erhöhen. */
.content form .checkboxes label {
    padding-left: 28px;
    margin-right: 20px;
}

.content form input:focus,
.content form textarea:focus,
.content form select:focus {
    outline: none;
    border-color: var(--text);
}

.content form .form-description {
    display: block;
    margin-top: 6px;

    color: var(--muted);
    font-size: .85rem;
}

.content form button {
    display: inline-block;

    margin-top: 10px;
    padding: 12px 28px;

    background: none;
    border: 1px solid var(--gold);
    border-radius: 999px;

    color: var(--gold);
    font-weight: bold;
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;

    transition: .2s ease;
}

.content form button:hover,
.content form button:focus-visible {
    background: var(--gold);
    color: #111;
}

.content form .form-messages {
    margin-bottom: 20px;
    padding: 14px 18px;

    border: 1px solid var(--gold);
    border-radius: 12px;

    color: var(--text);
}

/* Erfolgs-/Fehlermeldung nach dem Absenden - wird vom Plugin als
   .notices (mit Status-Klasse success/error/warning) VOR dem eigentlichen
   <form>-Tag ausgegeben, deshalb eigene Regel statt ".content form ..." */
.content .notices {
    width: 100%;
    max-width: 600px;

    margin: 0 auto 20px;
    padding: 14px 18px;

    border: 1px solid var(--gold);
    border-radius: 12px;

    text-align: center;
}

.content .notices p {
    color: var(--text);
    font-size: 1rem;
}

.content .notices.error {
    border-color: #d0524a;
}

.content .notices.error p {
    color: #d0524a;
}

/* --------------------------------------------------
   Poster
-------------------------------------------------- */

.poster {
    margin-top: 60px;
    text-align: center;
}

.poster img {
    width: 100%;
    max-width: 900px;
    height: auto;

    border-radius: 12px;
    border: 1px solid #333;

    box-shadow: 0 0 40px rgba(0,0,0,.5);
}

/* --------------------------------------------------
   Termine
-------------------------------------------------- */

.events-section {
    max-width: 700px;
    margin: 60px auto 0;
}

.events-section h2 {
    margin-bottom: 30px;

    color: var(--gold);
    text-align: center;
    font-size: 2rem;
}

.events-section h3 {
    margin: 35px 0 15px;

    color: var(--gold);
    text-transform: capitalize;
    text-align: left;
}

.calendar-nav {
    margin-top: 40px;
    text-align: center;
}

.calendar-link {
    display: inline-block;

    padding: 12px 24px;

    border: 1px solid var(--gold);
    border-radius: 999px;

    color: var(--gold);
    font-weight: bold;

    transition: .2s ease;
}

.calendar-link:hover {
    background: var(--gold);
    color: #111;
}

.termine {
    list-style: none;
}

.termine li {
    display: flex;
    align-items: flex-start;
    gap: 20px;

    margin-bottom: 10px;
    padding: 14px 18px;

    background: #1a1a1a;
    border: 1px solid #2b2b2b;
    border-radius: 8px;
}

.datum {
    width: 260px;
    flex-shrink: 0;

    color: var(--gold);
    font-weight: bold;
    white-space: nowrap;
}

/* "Naechster Termin"-Vorschau (nexttermine.js) zeigt Tag UND Monat(+Jahr)
   an, weil hier - anders als in der nach Monaten gruppierten Hauptliste
   (termine.js) - keine Monatsueberschrift vorhanden ist, die diese Info
   schon liefert. Der laengere Text passt nicht in die fuer die kurze
   Variante ausgelegte feste 260px-Breite und lief dadurch in den Titel
   daneben. Statt umzubrechen (das haette Datum und Uhrzeit auf zwei
   Zeilen gerissen) bekommt die Box hier ihre Breite vom Inhalt selbst -
   dann bleibt alles in einer Zeile und .titel (flex: 1) nimmt sich den
   Rest der Zeile. */
#next-event-list .datum {
    width: auto;
}

.titel {
    flex: 1;
    text-align: left;
}

.ort {
    margin-top: 4px;

    color: #999;
    font-size: .9rem;

    text-align: left;
}

.note-icon {
    cursor: pointer;
    margin-left: 8px;
}

/* Schnellanmeldung: eigenes Icon neben dem Pin, verlinkt direkt zum
   Anmeldeformular fuer diesen Termin - erscheint nur, wenn der
   Beschreibungstext tatsaechlich einen Anmeldelink enthaelt. */
.quick-anmeldung {
    margin-left: 6px;

    text-decoration: none;
}

.note-popup {
    display: none;

    margin-top: 8px;
    padding: 10px;

    background: #111;

    border: 1px solid #444;
    border-radius: 6px;

    color: #ddd;
}

.note-popup.active {
    display: block;
}

/* --------------------------------------------------
   Qualifikationsergebnisse
-------------------------------------------------- */

.ergebnisse-box {
    width: 100%;
    max-width: 900px;

    margin: 30px auto;
    padding: 30px;

    background: #1a1a1a;
    border: 1px solid var(--gold);
    border-radius: 18px;
}

/* Pfeile haengen fest am Rand von .ergebnisse-nav (nicht am Text) - dafuer
   position:absolute, damit sie aus dem normalen Textfluss rausfallen. Der
   Info-Block bleibt dadurch das einzige Flex-Kind und wird von
   justify-content:center unabhaengig von der Textlaenge mittig gehalten,
   waehrend die Pfeile sich nicht mehr mitbewegen. */
.ergebnisse-nav {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;
    margin-bottom: 20px;
}

.ergebnisse-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    background: transparent;
    border: 1px solid var(--gold);
    border-radius: 50%;

    color: var(--gold);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;

    transition: background .2s ease, color .2s ease;
}

.ergebnisse-prev {
    left: 0;
}

.ergebnisse-next {
    right: 0;
}

.ergebnisse-arrow:hover:not(:disabled),
.ergebnisse-arrow:focus-visible:not(:disabled) {
    background: var(--gold);
    color: var(--bg);
}

.ergebnisse-arrow:disabled {
    opacity: .3;
    cursor: default;
}

/* Kompakte Kopfzeile: Termin und Ausrichter stehen platzsparend zwischen
   den beiden Pfeilen statt in einer eigenen Zeile darunter. Die separate
   "Ergebnis"-Überschrift entfällt bewusst - die Seite hat bereits eine
   "Ergebnisse"-Überschrift darüber. */
.ergebnisse-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;

    padding: 0 46px;

    color: var(--muted);
    font-size: .95rem;
    text-align: center;
}

.ergebnisse-ausrichter {
    color: var(--accent);
}

.ergebnisse-counter {
    color: var(--footer);
    font-size: .75rem;
}

.ergebnisse-tables {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 30px;
}

/* Platz-Spalte etwas breiter und ohne Grossschreibung im Tabellenkopf -
   "PLATZ"/"PUNKTE" in Versalien mit Sperrung waren breiter als ihre
   40px/70px-Spalten und liefen dadurch in die Nachbarspalte über. */
.ergebnisse-header-row {
    display: grid;
    grid-template-columns: 55px 1fr 60px;

    padding: 6px 8px;

    border-bottom: 1px solid var(--gold);

    color: var(--gold);
    font-size: .8rem;
    font-weight: 700;
}

.ergebnisse-row {
    display: grid;
    grid-template-columns: 55px 1fr 60px;

    padding: 6px 8px;

    border-bottom: 1px solid rgba(201,161,93,.15);

    color: var(--text);
    font-size: .95rem;
}

.ergebnisse-row .platz {
    color: var(--muted);
}

.ergebnisse-row .punkte {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ergebnisse-row.platz-1,
.ergebnisse-row.platz-2 {
    color: var(--gold);
    font-weight: 700;
}

.ergebnisse-row.platz-1 .platz,
.ergebnisse-row.platz-2 .platz {
    color: var(--gold);
}

.ergebnisse-empty {
    color: var(--muted);
}



/* --------------------------------------------------
   Footer
-------------------------------------------------- */

footer {
    position: relative;

    margin-top: 60px;
    padding-top: 20px;

    color: var(--footer);
    text-align: center;
    font-size: .95rem;
}

/* Goldene Linie oben am Footer, analog zur Linie im Header */
footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;

    height: 2px;
    background: var(--gold);
}

/* Sitzt mit der (bereits zugeschnittenen) Unterkante direkt auf der Linie
   und ragt nach oben heraus, so als würde es hinter dem Footer hervorschauen.
   Jetzt klickbar (Link "nach oben") - die Positionierung sitzt daher auf dem
   Link selbst, sonst würde das absolut positionierte Bild aus dem Link
   herausfallen und die Klickfläche kollabieren. */
.footer-grandouvert-link {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -100%);

    display: block;
    line-height: 0;
}

.footer-grandouvert {
    display: block;
    height: 50px;
    width: auto;

    transition: transform .2s ease;
}

.footer-grandouvert-link:hover .footer-grandouvert,
.footer-grandouvert-link:focus-visible .footer-grandouvert {
    transform: scale(1.06);
}

/* Reveal-Button im Footer soll wie die anderen Links wirken, nicht wie
   die umrahmte Schaltfläche aus dem Impressum-Text */
footer .reveal-btn {
    display: inline;

    padding: 0;

    background: none;
    border: none;
    border-radius: 0;

    color: var(--gold);
    font-weight: normal;
    font-size: inherit;
    font-family: inherit;
}

footer .reveal-btn:hover,
footer .reveal-btn:focus-visible {
    background: none;
    color: var(--gold);
    text-decoration: underline;
}

footer .reveal a {
    font-weight: normal;
}

/* --------------------------------------------------
   Responsive
-------------------------------------------------- */

@media (max-width: 768px) {

    header {
        padding-bottom: 14px;
    }

    header::after {
        bottom: 18px;
    }

    /* Logo - Logo nebeneinander oben, Titel darunter (statt Logo-Titel-Logo
       in einer Reihe wie am Desktop - dafür ist mobil zu wenig Platz) */
    .header-top {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "logo1 logo2"
            "title title";
        align-items: center;
        gap: 6px 0;
        margin-bottom: 10px;
    }

    .header-top .logos:first-of-type {
        grid-area: logo1;
        justify-self: start;
    }

    .header-top .logos:last-of-type {
        grid-area: logo2;
        justify-self: end;
    }

    .header-top h3 {
        grid-area: title;
        font-size: 0.85rem;
        line-height: 1.35;
        margin: 4px 0;
    }

    .home-link {
        bottom: 10px;
        font-size: .8rem;
    }

    .logos img {
        height: 52px;
    }

    .logos.header-emblem img {
        height: 60px;
    }

    .logos.header-partners img {
        height: 40px;
    }

    .logogold img {
        height: 220px;
    }

    /* Bleibt wie am Desktop bei der goldenen Linie, nur verkleinert und
       neu eingemessen für die kompaktere mobile Header-Höhe */
    .menu-wrapper {
        top: 96px;
        right: 6px;
    }

    #menu-toggle img {
        width: 68px;
    }

    /* header-v2 mobil: eigenes Layout statt der 2-Logo-Grid oben - alle
       3 Logos in einer Reihe (TSV mittig, die anderen beiden gleichmäßig
       daneben), darunter linksbündige Überschrift, Kartenstapel rechts
       über die Linie ragend wie am Desktop. */
    .header-v2 .header-top {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 0;
        margin-bottom: 14px;
    }

    /* Wrapper-Divs "auflösen", damit alle 3 Logo-Links als eine durchgehende,
       eng zusammenstehende Gruppe erscheinen statt als zwei getrennte Blöcke */
    .header-v2 .header-top .logos {
        display: contents;
    }

    .header-v2 .header-top .logos a {
        margin: 0 15px;
        order: 1;
    }

    .header-v2 .header-top h3 {
        flex-basis: 100%;
        order: 2;
        text-align: left;
        margin: 10px 0 0;
        padding-left: 17px;
    }

    .header-v2 .logos.header-emblem img,
    .header-v2 .logos.header-partners img {
        height: 62px;
    }

    /* Reine bottom-Positionierung statt der geerbten top-Regel oben, sonst
       spannt sich der Wrapper zwischen top und bottom auf */
    .header-v2 .menu-wrapper {
        top: auto;
        bottom: -8px;
        right: 6px;
    }

    .text {
        font-size: 1rem;
    }

    .content h1 {
        font-size: 2rem;
    }

    .termine li {
        flex-direction: column;
        gap: 6px;
    }

    .datum {
        width: auto;
    }

    .patron-card {
        max-width: 90%;
        gap: 16px;
        padding: 15px;
        margin: 45px auto 60px;
    }

    .patron-card img {
        width: 95px;
    }

    .patron-title {
        font-size: .9rem;
    }

    .patron-name {
        font-size: 1.5rem;
    }

    .charity-card {
        max-width: 90%;
        gap: 14px;
        padding: 15px;
        margin: 20px auto;
    }

    .charity-card > img {
        max-width: 220px;
        padding: 10px 14px;
    }

    .download-list {
        max-width: 92%;
    }

    .download-item {
        gap: 10px;
        padding: 12px 14px;
    }

    .download-meta {
        display: none;
    }

    .sponsor-list--grid {
        grid-template-columns: 1fr;
    }

    .sponsor-item img {
        width: 100%;
        max-width: 280px;
    }

    /* Mehrfachauswahl-Checkboxen ("Anmeldung möglich über"): auf schmalen
       Bildschirmen reicht der Platz nicht für mehrere Optionen pro Zeile -
       das inline-Layout aus dem Plugin-CSS bricht dann unschön um.
       Stattdessen jede Option auf eine eigene Zeile. */
    .content form .checkboxes {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .content form .checkboxes label {
        margin-right: 0;
    }

    .ergebnisse-box {
        padding: 20px 16px;
    }

    .ergebnisse-tables {
        grid-template-columns: 1fr;
    }

    /* Einspaltig gestapelt: die zweite .ergebnisse-table (rechte Spalte am
       Desktop) landet direkt unter der ersten - ihre eigene Kopfzeile
       waere dann eine Wiederholung mitten in der Liste. Nur die erste
       Kopfzeile behalten. */
    .ergebnisse-table:nth-child(2) .ergebnisse-header-row {
        display: none;
    }

    /* Sponsor-Logo-Reihe auf der Startseite: auf dem Handy nebeneinander
       zu breit/gedraengt - stattdessen mittig und jeweils nur ein Logo
       sichtbar, automatisch gewechselt (siehe js/home-sponsor-logos.js).
       Auf dem Desktop bleibt die Reihe unveraendert (diese Regeln gelten
       nur hier in der Media-Query). */
    .home-sponsor-logos {
        justify-content: center;

        /* Header hat mobil nur 14px padding-bottom (siehe header { }
           weiter oben) - reicht ohne eigenen Abstand nicht, dann klebt
           die Logo-Reihe an der goldenen Trennlinie. */
        margin-top: 24px;
        margin-bottom: 24px;
    }

    .home-sponsor-logos a {
        display: none;
    }

    .home-sponsor-logos a.active {
        display: block;
    }

    /* .patron-card bringt regulaer margin: 50px auto 70px mit (gedacht
       fuer den Abstand zu einer Ueberschrift/laengerem Text davor) - mit
       der Logo-Reihe direkt davor und den +24px oben wirkt das dann zu
       weit weg. Nur hier (direkt nach der Logo-Reihe) verkleinern. */
    .home-sponsor-logos + .patron-card {
        margin-top: 24px;
    }

    .donation-card {
        flex-direction: column;
        padding: 20px 16px;
    }

    /* flex-basis (320px/100%) ist auf die Zeilen-Breite im Desktop-Layout
       ausgelegt. Sobald .donation-card gestapelt wird, wird daraus wegen
       flex-direction: column eine HOEHEN-Vorgabe (Hauptachse dreht sich
       mit), wodurch z.B. der Bankdaten-Rahmen unnoetig auf 320px Hoehe
       aufgeblasen wird. Im gestapelten Layout reicht normales
       Blockverhalten (Hoehe = Inhalt). */
    .donation-details,
    .donation-qr,
    .donation-note {
        flex: none;
    }
}