/* ============================================================
   Flotaxt – zentrales Farb- und Komponenten-Schema
   ------------------------------------------------------------
   Einzige Quelle der Wahrheit fuer Markenfarben und Buttons.
   Farbe aendern? Nur die Variablen in :root anpassen.
   Auf ALLEN Seiten nach master.css/responsive.css einbinden.
   ============================================================ */

/* Old-English-Schrift "Old London" (klassischer Cloister-Stil), selbst
   gehostet statt Google Fonts. Frei fuer privat + kommerziell nutzbar
   (Dieter Steffmann). Quelle der Wahrheit fuer den Old-English-Look:
   Logo-Schriftzug + alle Hero-/Section-Titel referenzieren 'Old London'. */
@font-face {
    font-family: 'Old London';
    src: url('../fonts/OldLondon.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Utility-Klasse: einzelne Ueberschriften in der Old-English-Schrift setzen.
   Einfach class="font-oldenglish" am <h1>/Element ergaenzen oder entfernen,
   um den Look pro Ueberschrift an-/abzuschalten. Schrift zentral hier
   aenderbar (eine Stelle wirkt auf alle so markierten Ueberschriften). */
.font-oldenglish {
    font-family: 'Old London', 'Old English Text MT', serif !important;
    font-weight: 400;
}

:root {
    /* Markenfarben */
    --fm-primary:        #8BD234; /* Logo-Gruen: Buttons, Akzente */
    --fm-primary-hover:  #76B32C; /* dunkleres Gruen: Button-Hover */
    --fm-on-primary:     #1d2124; /* Schrift AUF hellem Gruen (dunkel = lesbar) */
    --fm-accent:         #e2b84c; /* Gold: aktive Nav-Tabs, Hover-Highlights */

    /* Dunkle Marken-Gruentoene fuer gefuellte Flaechen MIT weisser Schrift
       (ersetzen das fruehere Theme-Lila auf der Startseite; weisse Schrift
       bleibt lesbar, da diese Toene dunkel genug sind). */
    --fm-primary-dark:   #4a7d1f; /* Flaechen/Text-Akzente (Weiss darauf ~5:1) */
    --fm-primary-darker: #356015; /* Verlaufs-Endpunkt (Weiss darauf ~7:1) */

    /* Gleiche Toene als RGB-Kanaele – noetig fuer rgba(...) mit Transparenz,
       z. B. Bild-Hover-Overlays und Verlaeufe (rgba(var(--...-rgb), 0.9)). */
    --fm-primary-rgb:        139, 210, 52;  /* #8BD234 */
    --fm-primary-dark-rgb:   74, 125, 31;   /* #4a7d1f */
    --fm-primary-darker-rgb: 53, 96, 21;    /* #356015 */

    /* Neutrale Toene */
    --fm-dark:           #888;     /* gedaempfte dunkle Beschriftungen */
    --fm-nav:            #111;     /* Nav-/Hero-Flaechen (bewusst near-black) */
    --fm-bg:             #f7f7f7;  /* heller Seitenhintergrund */
    --fm-text-muted:     #666;     /* Meta-/Hilfstexte */
    --fm-heading:        #1d2124;  /* dunkle Ueberschriften */
}

/* ============================================================
   Buttons – ein einheitliches System fuer alle Seiten
   .btn-flotaxt          = gefuellter Haupt-Button (CTA)
   .btn-register            = Alias (Altbestand event.php)
   .btn-outline-flotaxt  = sekundaerer Button ("Zurueck")
   ============================================================ */

.btn-flotaxt,
.btn-register {
    display: inline-block;
    background: var(--fm-primary);
    color: var(--fm-on-primary);
    border: 0;
    border-radius: 999px;
    padding: 11px 24px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease;
}

.btn-flotaxt:hover,
.btn-register:hover {
    background: var(--fm-primary-hover);
    color: var(--fm-on-primary);
}

.btn-outline-flotaxt {
    display: inline-block;
    background: transparent;
    border: 2px solid var(--fm-primary);
    color: var(--fm-on-primary);
    border-radius: 999px;
    padding: 10px 23px; /* 1px weniger wg. 2px Rahmen -> gleiche Hoehe */
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.btn-outline-flotaxt:hover {
    background: var(--fm-primary);
    color: var(--fm-on-primary);
}

/* ============================================================
   Template-Akzentklassen (index.php) auf das helle Standardgruen
   umstellen. master.css faerbt diese mit dem dunklen --fm-primary-dark;
   hier ueberschrieben mit dem hellen Logo-Gruen --fm-primary.
   Bei gefuellten Buttons dunkle Schrift (--fm-on-primary), da Weiss auf
   hellem Gruen zu wenig Kontrast haette.
   ============================================================ */

/* Gefuellte Buttons */
.btn-color {
    background-color: var(--fm-primary);
    color: var(--fm-on-primary);
    opacity: 1;
}
.btn-color:hover,
.btn-color:active,
.btn-color:focus {
    background-color: var(--fm-primary-hover);
    color: var(--fm-on-primary);
    opacity: 1;
}

/* Outline-Button: gefuellt -> hell, Hover -> transparent mit hellem Gruen */
.btn-color-outline {
    color: var(--fm-on-primary);
    border-color: var(--fm-primary);
    background-color: var(--fm-primary);
}
.btn-color-outline:hover,
.btn-color-outline:active,
.btn-color-outline:focus {
    color: var(--fm-primary);
    border-color: var(--fm-primary);
    background-color: transparent;
}

/* Akzent-Text und -Icons */
.default-color {
    color: var(--fm-primary) !important;
}

/* Gefuellte Akzentflaechen / Icon-Kreise */
.default-bg,
.default-bg-icon {
    background-color: var(--fm-primary);
}
.border-bg-default-color:hover {
    background-color: var(--fm-primary);
    border-color: var(--fm-primary);
}

/* ============================================================
   Footer: Rechtslinks (Impressum / Datenschutz)
   ============================================================ */

.footer-legal-links {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    text-align: center;
}
.footer-legal-links li {
    display: inline-block;
}
.footer-legal-links li:not(:last-child)::after {
    content: "·";
    margin: 0 10px;
    color: rgba(255, 255, 255, 0.4);
}
.footer-legal-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color .15s ease;
}
.footer-legal-links a:hover {
    color: var(--fm-primary);
}

/* Mitgliedschaft Verband Deutscher Doppelaxtwerfer (Footer) */
.footer-membership {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.footer-membership-logo {
    width: 90px;
    height: auto;
    background: #fff;
    border-radius: 50%;
    padding: 6px;
}
.footer-membership-text {
    font-size: 13px;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, 0.7);
}

/* ============================================================
   Tab-Leiste (event-nav) – identisch auf event.php & register.php
   ============================================================ */

.event-nav {
    padding: 18px 0;
    background: var(--fm-nav);
    position: sticky;
    top: 0;
    z-index: 50;
}

.event-nav a {
    color: #fff;
    margin: 0 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.event-nav a:hover,
.event-nav a.active {
    color: var(--fm-accent);
}

.event-nav a.disabled {
    color: #666;
    cursor: not-allowed;
    opacity: 0.55;
    pointer-events: none; /* Klick auch auf Touch zuverlaessig blockieren */
}

.event-nav a.disabled:hover {
    color: #666;
}

@media (max-width: 768px) {
    .event-nav a {
        margin: 0 7px;
        font-size: 0.9rem;
    }
}

/* ============================================================
   Anmeldeseite (register.php)
   ============================================================ */

.registration-page {
    padding: 48px 0 72px;
}

.registration-card {
    max-width: 780px;
    margin: 0 auto;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
}

.step-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 28px;
}

.step-bar span {
    border-radius: 999px;
    padding: 8px 14px;
    background: #e9ecef;
    color: #555;
    font-size: 0.9rem;
    font-weight: 600;
}

.step-bar span.active {
    background: var(--fm-primary);
    color: var(--fm-on-primary);
}

.form-label {
    font-weight: 600;
    color: #222;
}

.form-control,
.form-select {
    min-height: 46px;
    border-radius: 10px;
    font-size: 14px;
}

.registration-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 30px;
}

.form-full {
    grid-column: 1 / -1;
}

.birthdate-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.registration-card .form-label {
    margin-bottom: 6px;
}

@media (max-width: 576px) {
    .registration-form-grid,
    .birthdate-grid {
        grid-template-columns: 1fr;
    }
}

.summary-row {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.summary-row span:first-child {
    color: var(--fm-text-muted);
}

.summary-row span:last-child {
    font-weight: 600;
    text-align: right;
}

@media (max-width: 768px) {
    .summary-row {
        display: block;
    }

    .summary-row span:last-child {
        display: block;
        text-align: left;
        margin-top: 3px;
    }
}

/* ===== Sammel-Anmeldung ===== */
.sub-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 14px;
}

.sub-card-title {
    font-size: 15px;
    color: #333;
    margin-bottom: 14px;
}

.field-group {
    margin-bottom: 14px;
}

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

.field-group > label {
    display: block;
    font-size: 12px;
    color: var(--fm-dark);
    margin-bottom: 4px;
}

.field-group input,
.field-group select {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    color: #111;
    background: #fff;
}

/* gruene Pflichtfeld-Markierung links */
.field-group.required {
    border-left: 2px solid var(--fm-primary);
    padding-left: 12px;
}

.row-2,
.row-3 {
    display: flex;
    gap: 10px;
}

.row-3 > select {
    flex: 1;
}

.field-sm {
    width: 130px;
    flex: 0 0 130px;
}

.field-grow {
    flex: 1;
}

.medal-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 14px;
}

.medal-label {
    font-weight: 400;
    margin: 0;
    cursor: pointer;
    color: #111;
}

.medal-label input {
    margin-right: 10px;
}

.add-link {
    display: inline-block;
    color: #2f5fdf;
    font-weight: 600;
    margin: 6px 0 18px;
}

.add-link:hover {
    color: #1d3f9f;
    text-decoration: underline;
}

/* ============================================================
   Eventseite (event.php) – Anmelde-Boxen & Tabelle
   ============================================================ */

.registration-box {
    background: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 6px;
    margin-bottom: 28px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.registration-box:last-child {
    margin-bottom: 0;
}

.registration-box h2 {
    color: var(--fm-heading);
    font-size: 22px;
    margin: 5px 0 15px;
    font-weight: 700;
}

.registration-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: transparent;
}

.registration-table th {
    color: #111;
    font-weight: 700;
    padding: 8px 10px;
    border-bottom: 1px solid #bbb;
}

.registration-table td {
    padding: 8px 10px;
    border-bottom: none;
    vertical-align: top;
    color: #111;
}

.registration-table tbody tr.distance-row {
    border-bottom: 1px solid #ddd;
}

.registration-table tbody tr.distance-row:last-child {
    border-bottom: none;
}

/* Preiszeile: Klasse links, Betrag rechts (Desktop ueber Flex,
   bleibt auf Mobile identisch -> einheitliches Verhalten) */
.price-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 2px 0;
}

.price-amount {
    font-weight: 600;
    white-space: nowrap;
    color: var(--fm-heading);
}

/* "Frei"-Label nur auf Mobile sichtbar */
.col-free .free-label {
    display: none;
}

.text-right {
    text-align: right;
}

.registration-button-wrap {
    text-align: right;
    margin-top: 18px;
}

/* ============================================================
   Mobile-Layout fuer die Anmelde-Tabelle (< 992px)
   Tabelle wird in gestapelte Karten umgebaut, eine Karte pro
   Wettbewerb -- analog zu RaceResult. Breakpoint bei 991px, weil
   die 5-spaltige Tabelle schon auf Tablets/schmalen Fenstern eng wird.
   ============================================================ */

@media (max-width: 991px) {
    .registration-box {
        padding: 14px;
    }

    .registration-box h2 {
        font-size: 20px;
        color: var(--fm-primary-dark);
    }

    /* Tabelle in gestapelte Bloecke umbauen. !important ist noetig, weil eine
       konkurrierende Regel das display sonst (bei gleicher Spezifitaet, spaeterer
       Quelle) auf table-cell zurueckzieht. th bleibt absichtlich aussen vor,
       damit die thead-Regeln (nur "Wettbewerb" zeigen) weiter greifen. */
    .registration-table,
    .registration-table thead,
    .registration-table tbody,
    .registration-table tr,
    .registration-table td {
        display: block !important;
        width: 100%;
    }

    /* Original-Tabellen-Header verbergen; auf Mobile zeigen wir
       statt Spaltentiteln nur "Wettbewerb" als Karten-Ueberschrift. */
    .registration-table thead tr {
        border-bottom: 1px solid #bbb;
        padding-bottom: 6px;
        margin-bottom: 6px;
    }

    .registration-table thead th {
        display: none;
        padding: 0;
        border: 0;
    }

    .registration-table thead th.col-name {
        display: block;
        font-size: 14px;
        font-weight: 700;
        color: #111;
        padding: 0;
    }

    .registration-table tbody tr.distance-row {
        padding: 14px 0;
        border-bottom: 1px solid #ddd;
    }

    .registration-table tbody tr.distance-row:last-child {
        border-bottom: none;
        padding-bottom: 4px;
    }

    .registration-table td {
        padding: 1px 0;
        border: 0;
    }

    /* Startzeit klein und unauffaellig oberhalb */
    .registration-table td.col-start {
        font-size: 12px;
        font-weight: 600;
        color: #555;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 4px;
    }

    /* Wettbewerb fett */
    .registration-table td.col-name {
        font-size: 16px;
        margin-bottom: 2px;
    }

    .registration-table td.col-name strong {
        font-weight: 700;
    }

    /* "274 Frei" inline statt nur "274" */
    .registration-table td.col-free {
        font-size: 14px;
        color: #111;
        margin-bottom: 8px;
    }

    .col-free .free-label {
        display: inline;
        margin-left: 2px;
    }

    /* Preisbloecke -- Flex bleibt aktiv, Klasse/Betrag eigene Zeile bei Bedarf */
    .registration-table td.col-prices {
        padding-top: 2px;
    }

    .price-line {
        padding: 4px 0;
        font-size: 14px;
    }

    .price-class {
        flex: 1;
        min-width: 0;
    }

    .price-amount {
        font-size: 14px;
    }

    /* CTA full-width unten in der Box */
    .registration-button-wrap {
        text-align: center;
        margin-top: 14px;
    }

    .registration-button-wrap .btn-register {
        display: block;
        width: 100%;
        padding: 14px 20px;
        font-size: 15px;
    }
}
/* =========================================================
   Gemeinsamer Seitenkopf (gehoert zu includes/site_header.php)
   Diese Regeln gelten auf ALLEN Seiten – nicht pro Seite
   ueberschreiben, sonst sieht der Header wieder unterschiedlich aus.
   ========================================================= */

/* Flotaxt-Schriftzug in Old-English-Schriftart (statt Bild-Logo) */
.logo-text {
    font-family: 'Old London', 'Old English Text MT', serif;
    font-size: 34px;
    line-height: 60px;
    display: inline-block;
    white-space: nowrap;
}
.navbar .logo .logo-text { transition: opacity .3s; }
.logo-text.logo-display { color: #fff; }   /* weiss auf transparenter Navbar */
.logo-text.logo-scrolled { color: #1c1c1c; } /* dunkel nach dem Scrollen */

/* Beide Logo-Varianten uebereinanderlegen: Als Text-Spans (statt der
   Template-Bilder) wuerde die jeweils unsichtbare Variante sonst weiterhin
   Breite einnehmen (opacity/height:0 entfernt sie nicht) und den sichtbaren
   Schriftzug nach rechts Richtung Menue schieben. .logo hat bereits
   position:relative (master.css), daher genuegt absolute Positionierung. */
.navbar .logo .logo-scrolled {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.logo-text-side, .logo-text-footer { color: #fff; }
.logo-text-footer { font-size: 44px; }

/* Navbar immer ganz oben fixieren */
nav.bootsnav.navbar-fixed { top: 0 !important; }

/* Hover-Unterstrich der Menuepunkte weiss (statt dunkel) auf transparenter Navbar */
nav.navbar.bootsnav.studio.navbar-transparent ul.nav > li > a:after { background: #fff; }

/* Hinweis: Die dunklen Hero-Baender der Unterseiten (team-/about-/gallery-/legal-hero)
   muessen mit margin-top:0 und padding-top:115px beginnen, damit das Band hinter
   der transparenten Navbar durchlaeuft (80px Navbar + 35px Abstand). */

/* Seitentitel auf den dunklen Hero-Baendern: Old-English wie der Logo-Schriftzug,
   weiss auf schwarzem Band. !important gegen die dunkle h1-Regel aus master.css.
   Gilt zentral fuer alle Unterseiten – nicht pro Seite ueberschreiben. */
.about-hero h1,
.team-hero h1,
.gallery-hero h1,
.downloads-hero h1,
.news-hero h1,
.article-hero h1,
.competition-hero h1,
.legal-hero h1 {
    font-family: 'Old London', 'Old English Text MT', serif;
    font-weight: 400;
    font-size: 60px;
    color: #fff !important;
}

/* Kontaktformular (Startseite #contact): Felder weiss mit dunkler Schrift und
   sichtbarem Rahmen, damit sie sich vom grauen Abschnittshintergrund abheben.
   Die master.css-Basisregel setzt sonst hellgrauen Hintergrund + weisse Schrift
   (Text waere praktisch unsichtbar). Nur auf das Kontaktformular beschraenkt. */
#contact-form .md-input,
#contact-form .md-textarea {
    background-color: #fff;
    color: #222;
    border: 1px solid #d8d8d8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
#contact-form .md-input::placeholder,
#contact-form .md-textarea::placeholder {
    color: #8a8a8a;
}
#contact-form .md-input:focus,
#contact-form .md-textarea:focus {
    border-color: #b01818;
    box-shadow: 0 0 0 2px rgba(176, 24, 24, 0.15);
    outline: none;
}