/*
 * Template „Garagenflohmarkt“ – Theme auf Basis von MDB5 (Bootstrap 5), geprüft mit MDB5 PRO 9.3.0.
 * Farben aus dem Sechtemer Wappen. Wird nach mdb.min.css geladen und überschreibt dessen Primärfarben.
 */
:root {
    --gfm-blau: #055193;
    --gfm-blau-rgb: 5, 81, 147;
    --gfm-blau-dunkel: #033a6b;
    --gfm-gelb: #f2dc03;
    --gfm-text: #1e2427;
    --gfm-text-hell: #5b6570;
    --gfm-linie: #dde2e8;
    --gfm-flaeche: #f4f6f8;
    --gfm-weiss: #fff;
    --gfm-radius: 10px;

    /* MDB5/Bootstrap-Variablen */
    --mdb-primary: var(--gfm-blau);
    --mdb-primary-rgb: var(--gfm-blau-rgb);
    --mdb-link-color: var(--gfm-blau);
    --mdb-link-color-rgb: var(--gfm-blau-rgb);
    --mdb-link-hover-color: var(--gfm-blau-dunkel);
    --mdb-body-color: var(--gfm-text);
    --mdb-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: var(--gfm-text);
    background: var(--gfm-weiss);
    font-family: var(--mdb-body-font-family);
}
a { color: var(--gfm-blau); }
a:hover, a:focus-visible { color: var(--gfm-blau-dunkel); }
h1, h2, h3 { color: var(--gfm-blau-dunkel); }
:focus-visible { outline: 3px solid var(--gfm-gelb); outline-offset: 2px; }
img { max-width: 100%; height: auto; }

.gfm-skip { position: absolute; left: -9999px; }
.gfm-skip:focus { left: 16px; top: 8px; z-index: 2000; background: var(--gfm-gelb); color: var(--gfm-text); padding: 8px 12px; }

/* ------------------------------------------------------------ Buttons in Wappenfarben */
.btn-primary {
    --mdb-btn-color: #fff; --mdb-btn-bg: var(--gfm-blau); --mdb-btn-border-color: var(--gfm-blau);
    --mdb-btn-hover-color: #fff; --mdb-btn-hover-bg: var(--gfm-blau-dunkel); --mdb-btn-hover-border-color: var(--gfm-blau-dunkel);
    --mdb-btn-focus-bg: var(--gfm-blau-dunkel); --mdb-btn-focus-shadow-rgb: var(--gfm-blau-rgb);
    --mdb-btn-active-color: #fff; --mdb-btn-active-bg: var(--gfm-blau-dunkel); --mdb-btn-active-border-color: var(--gfm-blau-dunkel);
    --mdb-btn-disabled-color: #fff; --mdb-btn-disabled-bg: var(--gfm-blau); --mdb-btn-disabled-border-color: var(--gfm-blau);
}
.btn-outline-primary {
    --mdb-btn-color: var(--gfm-blau); --mdb-btn-border-color: var(--gfm-blau);
    --mdb-btn-hover-color: var(--gfm-blau-dunkel); --mdb-btn-hover-bg: rgba(var(--gfm-blau-rgb), .06); --mdb-btn-hover-border-color: var(--gfm-blau-dunkel);
    --mdb-btn-focus-color: var(--gfm-blau-dunkel); --mdb-btn-focus-shadow-rgb: var(--gfm-blau-rgb);
    --mdb-btn-active-color: var(--gfm-blau-dunkel); --mdb-btn-active-bg: rgba(var(--gfm-blau-rgb), .1); --mdb-btn-active-border-color: var(--gfm-blau-dunkel);
}
.btn-warning {
    --mdb-btn-color: var(--gfm-text); --mdb-btn-bg: var(--gfm-gelb); --mdb-btn-border-color: var(--gfm-gelb);
    --mdb-btn-hover-color: var(--gfm-text); --mdb-btn-hover-bg: #ffe927; --mdb-btn-hover-border-color: #ffe927;
    --mdb-btn-focus-bg: #ffe927; --mdb-btn-focus-shadow-rgb: 242, 220, 3;
    --mdb-btn-active-color: var(--gfm-text); --mdb-btn-active-bg: #e0cb00; --mdb-btn-active-border-color: #e0cb00;
    --mdb-btn-disabled-color: var(--gfm-text); --mdb-btn-disabled-bg: var(--gfm-gelb); --mdb-btn-disabled-border-color: var(--gfm-gelb);
}
/* Ohne MDB greifen die Variablen nicht – dort direkt färben */
body:not(.gfm-mdb) .btn-primary { background: var(--gfm-blau); color: #fff; }
body:not(.gfm-mdb) .btn-outline-primary { color: var(--gfm-blau); border-color: var(--gfm-blau); }
body:not(.gfm-mdb) .btn-warning { background: var(--gfm-gelb); color: var(--gfm-text); }
.text-primary { color: var(--gfm-blau) !important; }
.bg-primary { background-color: var(--gfm-blau) !important; }

/* ------------------------------------------------------------ Kopf */
/* Sprungziele (#gfm-konto, #gfm-anmeldung …) nicht hinter der feststehenden Kopfzeile verstecken.
   --gfm-header-hoehe setzt das Template per JavaScript auf die tatsächliche Höhe. */
html { scroll-padding-top: calc(var(--gfm-header-hoehe, 72px) + 16px); }
.gfm-header { z-index: 1030; }
.gfm-header .navbar { box-shadow: 0 1px 0 var(--gfm-linie); padding-top: .5rem; padding-bottom: .5rem; }
.gfm-brand { display: flex; align-items: center; gap: 10px; color: var(--gfm-blau-dunkel) !important; font-weight: 700; font-size: 1.1rem; }
.gfm-brand img { height: 40px; width: auto; }
.gfm-header .nav-link { color: var(--gfm-text); padding-left: .9rem !important; padding-right: .9rem !important; border-radius: 6px; }
.gfm-header .nav-link:hover, .gfm-header .nav-link.active, .gfm-header .show > .nav-link { color: var(--gfm-blau) !important; background: var(--gfm-flaeche); }
.gfm-header .dropdown-item.active, .gfm-header .dropdown-item:active { background-color: rgba(var(--gfm-blau-rgb), .1); color: var(--gfm-blau); }
.gfm-header .navbar-toggler { border: 0; padding: 8px; box-shadow: none; }
.gfm-header .gfm-konto-link { color: var(--gfm-blau-dunkel); text-transform: none; font-weight: 600; box-shadow: none; }
.gfm-header .gfm-konto-link:hover { color: var(--gfm-blau); background: var(--gfm-flaeche); }

/* Burger-Symbol ohne Icon-Font */
.gfm-burger { display: inline-block; width: 24px; }
.gfm-burger span { display: block; height: 2px; margin: 5px 0; background: var(--gfm-blau-dunkel); transition: transform .2s, opacity .2s; }
.navbar-toggler[aria-expanded="true"] .gfm-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .gfm-burger span:nth-child(2) { opacity: 0; }
.navbar-toggler[aria-expanded="true"] .gfm-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 991.98px) {
    .gfm-header .navbar-collapse { max-height: calc(100vh - 64px); overflow-y: auto; padding-bottom: 12px; }
    .gfm-header .nav-link { padding-top: .75rem; padding-bottom: .75rem; }
    .gfm-nav-buttons .btn { flex: 1 1 auto; }
}

/* ------------------------------------------------------------ Startseite */
.gfm-hero {
    padding: 72px 0 80px;
    background:
        radial-gradient(circle at 15% 20%, rgba(242, 220, 3, .18) 0 120px, transparent 121px),
        radial-gradient(circle at 88% 75%, rgba(255, 255, 255, .08) 0 180px, transparent 181px),
        linear-gradient(135deg, var(--gfm-blau) 0%, var(--gfm-blau-dunkel) 100%);
}
.gfm-hero h1 { font-size: clamp(2rem, 6vw, 3.4rem); margin: 16px 0 12px; }
.gfm-hero-wann { font-size: clamp(1.15rem, 3vw, 1.5rem); font-weight: 600; margin: 0; }
.gfm-hero-ort { margin: 4px 0 0; opacity: .85; }
.gfm-hero-hinweis { opacity: .8; }
.gfm-hero.is-abgesagt h1, .gfm-hero.is-abgesagt .gfm-hero-wann { text-decoration: line-through; }
.gfm-badge { background: var(--gfm-gelb); color: var(--gfm-text); font-weight: 700; font-size: .9rem; padding: .35em 1em; }

/* ------------------------------------------------------------ Unterseiten */
.gfm-terminleiste { background: var(--gfm-blau); font-size: .95rem; }
.gfm-terminleiste .gfm-badge { font-size: .8rem; }
.gfm-terminleiste.is-abgesagt { background: #8a1c1c; }
.gfm-main { flex: 1; padding: 40px 0 64px; }
.gfm-seitentitel { margin-top: 0; margin-bottom: 1.5rem; font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 700; }
@media (max-width: 991.98px) { .gfm-hero { padding: 48px 0 56px; } .gfm-main { padding: 28px 0 48px; } }

/* Seite mit Vollbild-Karte: Karte schließt direkt an Kopfzeile/Terminleiste an, Titel nur für Screenreader */
.gfm-main:has(.gfm-karte-vollbild) { padding-top: 0; padding-bottom: 0; }
.gfm-main:has(.gfm-karte-vollbild) .gfm-seitentitel {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------ Module des AddOns an MDB angleichen */
.gfm-main .gfm-anmeldung { max-width: 760px; }
.gfm-main .gfm-anmeldung fieldset { background: var(--gfm-flaeche); border-radius: var(--gfm-radius); padding: 20px; margin-bottom: 1.5rem; }
.gfm-main .gfm-anmeldung legend { float: none; width: auto; color: var(--gfm-blau-dunkel); font-size: 1.15rem; font-weight: 700; margin-bottom: .75rem; }
.gfm-main .gfm-feld input[type=text], .gfm-main .gfm-feld input[type=email], .gfm-main .gfm-feld input[type=tel], .gfm-main .gfm-feld textarea,
.gfm-main .gfm-v-form input, .gfm-main .gfm-v-form select, .gfm-main .gfm-v-form textarea { background: var(--gfm-weiss); border: 1px solid var(--gfm-linie); border-radius: 8px; padding: 10px 12px; }
.gfm-main .gfm-feld input:focus, .gfm-main .gfm-feld textarea:focus,
.gfm-main .gfm-v-form input:focus, .gfm-main .gfm-v-form select:focus, .gfm-main .gfm-v-form textarea:focus { border-color: var(--gfm-blau); outline: none; box-shadow: 0 0 0 3px rgba(var(--gfm-blau-rgb), .2); }
.gfm-main .gfm-v-form input[type=checkbox] { padding: 0; }
.gfm-main .gfm-kategorien label { display: flex; gap: 8px; align-items: center; background: var(--gfm-weiss); border: 1px solid var(--gfm-linie); border-radius: 8px; padding: 8px 12px; cursor: pointer; margin: 0; }
.gfm-main input[type=checkbox] { accent-color: var(--gfm-blau); }
.gfm-main .gfm-hinweis { border-radius: var(--gfm-radius); }
.gfm-main .gfm-button { background: var(--gfm-blau); color: #fff; border: 0; border-radius: 999px; padding: .75rem 1.75rem; text-transform: uppercase; font-size: .9rem; letter-spacing: .03em; box-shadow: 0 4px 9px -4px rgba(var(--gfm-blau-rgb), .6); }
.gfm-main .gfm-button:hover { background: var(--gfm-blau-dunkel); }
.gfm-main .gfm-karte { border-radius: var(--gfm-radius); border: 1px solid var(--gfm-linie); }
.gfm-main .gfm-filter-btn.is-active { background: var(--gfm-blau); border-color: var(--gfm-blau); }
.gfm-main .gfm-v-tabs a.is-active { border-bottom-color: var(--gfm-blau); color: var(--gfm-blau); }
.gfm-main .gfm-vbtn.primaer { background: var(--gfm-blau); border-color: var(--gfm-blau); }

/* ------------------------------------------------------------ Als installierte App */
/* viewport-fit=cover: Inhalte nicht unter Notch / Home-Indikator legen */
.gfm-header .navbar { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.gfm-header { padding-top: env(safe-area-inset-top); background: #fff; }
.gfm-footer { padding-bottom: env(safe-area-inset-bottom); }
.gfm-app-install[hidden], .gfm-app-ios[hidden] { display: none !important; }
@media (display-mode: standalone) {
    /* Kein versehentliches Markieren/Zurückwischen-Gefühl wie im Browser */
    body { overscroll-behavior-y: none; }
}

/* ------------------------------------------------------------ Fuß */
.gfm-footer { background: var(--gfm-blau-dunkel); font-size: .95rem; }
.gfm-footer a { color: #fff; }

/* ------------------------------------------------------------ Ersatz, falls der Ordner /mdb fehlt */
body:not(.gfm-mdb) { margin: 0; line-height: 1.6; font-size: 17px; }
body:not(.gfm-mdb) *, body:not(.gfm-mdb) *::before, body:not(.gfm-mdb) *::after { box-sizing: border-box; }
body:not(.gfm-mdb) .container { max-width: 1140px; margin: 0 auto; padding: 0 16px; }
body:not(.gfm-mdb) .sticky-top { position: sticky; top: 0; }
body:not(.gfm-mdb) .navbar { background: #fff; }
body:not(.gfm-mdb) .navbar > .container { display: flex; flex-wrap: wrap; align-items: center; min-height: 64px; }
body:not(.gfm-mdb) .navbar-brand { margin-right: auto; text-decoration: none; }
body:not(.gfm-mdb) .navbar-toggler { background: none; cursor: pointer; }
body:not(.gfm-mdb) .collapse { display: none; width: 100%; }
body:not(.gfm-mdb) .collapse.show { display: block; }
body:not(.gfm-mdb) .navbar-nav { list-style: none; margin: 0; padding: 0; }
body:not(.gfm-mdb) .nav-link, body:not(.gfm-mdb) .dropdown-item { display: block; padding: .6rem .9rem; text-decoration: none; }
body:not(.gfm-mdb) .dropdown-menu { list-style: none; padding-left: 1rem; }
body:not(.gfm-mdb) .dropdown-divider { display: none; }
body:not(.gfm-mdb) .btn { display: inline-block; padding: .6rem 1.4rem; border-radius: 999px; border: 2px solid transparent; text-decoration: none; font-weight: 600; }
body:not(.gfm-mdb) .btn-outline-light { color: #fff; border-color: #fff; }
body:not(.gfm-mdb) .d-flex { display: flex; }
body:not(.gfm-mdb) .flex-wrap { flex-wrap: wrap; }
body:not(.gfm-mdb) .justify-content-between { justify-content: space-between; }
body:not(.gfm-mdb) .justify-content-center { justify-content: center; }
body:not(.gfm-mdb) .align-items-center { align-items: center; }
body:not(.gfm-mdb) .gap-2 { gap: .5rem; } body:not(.gfm-mdb) .gap-3 { gap: 1rem; } body:not(.gfm-mdb) .gap-4 { gap: 1.5rem; }
body:not(.gfm-mdb) .py-2 { padding-top: .5rem; padding-bottom: .5rem; } body:not(.gfm-mdb) .py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
body:not(.gfm-mdb) .mt-4 { margin-top: 1.5rem; } body:not(.gfm-mdb) .mt-3 { margin-top: 1rem; }
body:not(.gfm-mdb) .text-center { text-align: center; } body:not(.gfm-mdb) .text-white { color: #fff; }
body:not(.gfm-mdb) .badge { display: inline-block; border-radius: 999px; }
@media (min-width: 992px) {
    body:not(.gfm-mdb) .navbar-toggler { display: none; }
    body:not(.gfm-mdb) .collapse { display: flex !important; width: auto; align-items: center; }
    body:not(.gfm-mdb) .navbar-nav { display: flex; }
    body:not(.gfm-mdb) .dropdown { position: relative; }
    body:not(.gfm-mdb) .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; background: #fff; border: 1px solid var(--gfm-linie); border-radius: 8px; padding: 6px; }
    body:not(.gfm-mdb) .dropdown:hover .dropdown-menu, body:not(.gfm-mdb) .dropdown:focus-within .dropdown-menu { display: block; }
}