/* ============================================================
   FlotMotion – 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.
   ============================================================ */

: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-flotmotion          = gefuellter Haupt-Button (CTA)
   .btn-register            = Alias (Altbestand event.php)
   .btn-outline-flotmotion  = sekundaerer Button ("Zurueck")
   ============================================================ */

.btn-flotmotion,
.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-flotmotion:hover,
.btn-register:hover {
    background: var(--fm-primary-hover);
    color: var(--fm-on-primary);
}

.btn-outline-flotmotion {
    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-flotmotion: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);
}

/* ============================================================
   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;
    }
}

/* ===========================================================================
   Team (Startseite): Hover-Effekt abgeschaltet
   ---------------------------------------------------------------------------
   master.css blendet das Teamfoto beim Hovern auf opacity .5 ab und zoomt es
   (.team.style-2:hover .team-img img). Das diente ausschliesslich dazu, die
   darunter eingeblendeten Social-Icons lesbar zu machen. Solange
   $showSocial in index.php aus ist, gibt es nichts freizulegen -> Effekt aus.
   Wird $showSocial wieder eingeschaltet, diesen Block entfernen.
   =========================================================================== */
.team.style-2:hover .team-img img {
    opacity: 1;
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
}

/* ===========================================================================
   Sektionsueberschriften: Optik der frueheren H1
   ---------------------------------------------------------------------------
   Suchmaschinen erwarten genau eine <h1> je Seite. Die Vorlage nutzte <h1>
   dagegen als reinen Schriftgrad fuer jede Sektion. Die uebrigen Sektionen
   sind deshalb jetzt <h2 class="section-headline"> – die Groessen werden hier
   1:1 aus master.css/responsive.css (.section-title h1) uebernommen, damit
   sich am Erscheinungsbild nichts aendert.
   =========================================================================== */
.section-title h2.section-headline {
    font-size: 50px;
    font-weight: 800;
    margin-top: 10px;
    line-height: 1.1;
    letter-spacing: -1px;
}

@media (max-width: 991px) {
    .section-title h2.section-headline { font-size: 35px; }
}

@media (min-width: 320px) and (max-width: 680px) {
    .section-title h2.section-headline { font-size: 27px; }
}

/* Leistungskacheln: <h4> -> <h3> (Gliederungsebene unter der H1). Die Vorlage
   setzt h3 auf 24px, die Kacheln sollen aber wie bisher 18px gross bleiben. */
.feature-box h3 {
    font-size: 18px;
}

/* Leistungskacheln immer gleich hoch: Die Bootstrap-Spalten sind gefloatet, die
   Kacheln werden dadurch unterschiedlich hoch (unterschiedlich lange Texte) und
   der Rahmen wirkt ausgefranst. Die Zeile als Flex-Container setzen -- dann
   dehnen sich alle Kacheln einer Zeile auf die Hoehe der hoechsten.
   Gilt fuer jede Zeilenbreite: 4 nebeneinander (md), 2 (sm), 1 (xs). */
#feature .row.mt-50 {
    display: flex;
    flex-wrap: wrap;
}
/* Der Bootstrap-Clearfix (:before/:after der .row) wuerde sonst als leeres
   Flex-Item mitzaehlen und den Umbruch verschieben. */
#feature .row.mt-50::before,
#feature .row.mt-50::after {
    display: none;
}
#feature .row.mt-50 > [class*="col-"] {
    display: flex;
}
#feature .row.mt-50 .feature-box {
    float: none;
    width: 100%;
}

/* Beim Hover faerbt master.css die Kachel gruen und den Inhalt weiss -- dort
   aber nur h4. Die Kacheln nutzen seit der Gliederungskorrektur h3, die
   Ueberschrift blieb deshalb dunkel auf gruenem Grund stehen. */
.feature-box-default-bg:hover.feature-box h3 {
    color: #fff;
    -webkit-text-fill-color: #fff;
}

/* Weiterfuehrender Link in einer Leistungskachel ("Equipment ansehen").
   master.css faerbt jeden Link im Hover mit --fm-primary-dark -- genau die Farbe,
   die die Kachel beim Hover als Hintergrund bekommt (.feature-box-default-bg:after).
   Der Link verschwand dadurch beim Darauffahren. Deshalb eigene Farbregeln:
   im Normalzustand Gruen, sobald die Kachel gefuellt ist durchgaengig Weiss. */
.feature-box .feature-link {
    display: inline-block;
    margin-top: 18px;
    color: var(--fm-primary-dark);
    font-size: 14px;
    letter-spacing: .3px;
    border-bottom: 1px solid transparent;
}

/* Der Pfeil ist ein <i> und wuerde sonst die Regeln des grossen Kachel-Icons
   erben: 40px Schriftgroesse, 20px Abstand und beim Hover translateY(-10px). */
.feature-box .feature-link i,
.feature-box:hover .feature-link i {
    font-size: inherit;
    margin: 0 0 0 5px;
    color: inherit;
    display: inline-block;
    transform: none;
    transition: transform .3s;
}

.feature-box .feature-link:hover,
.feature-box .feature-link:focus {
    color: var(--fm-primary-dark);
    border-bottom-color: currentColor;
}

.feature-box .feature-link:hover i,
.feature-box:hover .feature-link:hover i {
    transform: translateX(4px);
}

/* Kachel gefuellt (Hover/Fokus innerhalb der Kachel): alles in Weiss */
.feature-box-default-bg:hover .feature-link,
.feature-box-default-bg:hover .feature-link:hover,
.feature-box-default-bg:hover .feature-link:focus,
.feature-box-default-bg:hover .feature-link i {
    color: #fff;
    -webkit-text-fill-color: #fff;
}

/* ===========================================================================
   Teamfoto in "Unsere Mission" (Startseite): auf dem Smartphone vollstaendig
   ---------------------------------------------------------------------------
   Auf dem Desktop steht das Gruppenfoto als Hintergrund einer halbhohen Spalte
   (.bg-flex + background-size:cover) neben dem Text -- dort ist der Beschnitt
   gewollt. Unter 768 px gibt responsive.css der Spalte dagegen eine feste Hoehe
   (.bg-flex{min-height:400px}) und zieht sie mit margin-top:-120px unter die
   vorhergehende Sektion. Ergebnis: links und rechts fehlten je rund 100 px und
   die Koepfe verschwanden hinter dem Leistungsblock.
   Auf dem Handy bekommt der Bildhalter deshalb das Seitenverhaeltnis des Fotos
   (team-group.webp, 1440x1005 -> 1005/1440 = 69.79 %) und laeuft im Textfluss
   mit; "cover" hat dann nichts mehr wegzuschneiden. padding-top statt
   aspect-ratio, weil sich Prozentwerte dort auf die Breite beziehen und das
   auch aeltere Handy-Browser koennen.
   Beim Austausch des Fotos den Prozentwert an das neue Format anpassen.
   =========================================================================== */
@media (max-width: 767px) {
    .about-section .bg-flex {
        min-height: 0;
        margin: 0 0 40px;
    }

    .about-section .bg-flex-holder {
        position: relative;
        height: 0;
        min-height: 0;
        padding-top: 69.79%;
    }
}