/* ===== ERLEBNIS DEUTSCHLAND - Stylesheet =====
   Umgesetzt nach dem Corporate Design (Version 1.0, Stand Juli 2026,
   siehe dokumentation/design/Corporate-Design-Erlebnis-Deutschland.pdf).
   ALLE Farben, Radien, Abstände und Schriften kommen aus den Variablen
   unten – wer das Aussehen ändern will, ändert dort und nirgends sonst. */

/* --- Reset & Base --- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== Hausschrift Inter (lokal eingebunden) =====
   Das CD gibt Inter vor: Bold 700 für Hauptüberschriften, SemiBold 600 für
   Navigation und Buttons, Regular 400 für Fließtext. Die Dateien liegen unter
   /fonts/ auf unserem eigenen Server (Datenschutz: keine Anfrage an Google;
   die CSP in der .htaccess erlaubt mit "font-src 'self'" genau das).
   Es sind "variable" Schriften – eine Datei enthält alle Stärken 400–700.
   font-display: swap = Text ist sofort lesbar (erst Systemschrift, dann Inter). */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/inter-latin.woff2') format('woff2');
    /* Grundzeichensatz: Deutsch, Englisch, Währungs- und Satzzeichen */
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/inter-latin-ext.woff2') format('woff2');
    /* Erweitertes Latein (z. B. polnische/tschechische Ortsnamen) */
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* ===== Farbwelt (CD-Abschnitt 02) =====
       Empfohlene Gewichtung: 55 % helle Flächen, 25 % Waldgrün, 15 % Mint, 5 % Gold.
       Kontrastregel: Weiße Schrift NUR auf Waldgrün. Auf Mint, Gold und hellen
       Flächen immer Waldgrün oder Graphit. Gold ist nie große Hintergrundfläche. */

    /* Waldgrün #174A38 – Logo, Navigation, Überschriften, Primärbuttons */
    --primary: #174A38;
    /* Aufgehelltes Waldgrün – Hover-Zustände, Links, Farbverläufe.
       Kein eigener CD-Ton, sondern die Brücke zwischen Waldgrün und Mint;
       auf Weiß noch kontraststark genug für Fließtext-Links (6,1:1). */
    --primary-light: #2C6E52;
    /* Entdecker-Mint #58B98B – Sekundärflächen, Hervorhebungen */
    --accent: #58B98B;
    /* Heller Mint – nur auf Waldgrün (dort kontraststark), z. B. Fußzeilen-Links */
    --accent-light: #8FD3B2;
    /* Sehr helles Mint – ruhige Hinweisflächen, Tags, Kästen */
    --accent-pale: #E5F5ED;
    /* Sonnen-Gold #F2B544 – Pin, Sterne, kleine Hinweise und Statusakzente */
    --gold: #F2B544;
    /* Sehr helles Gold – Hintergrund von Warn-/Wartehinweisen */
    --gold-pale: #FDF4E1;
    /* Dunkles Gold – Schriftfarbe auf goldenen Hinweisflächen (auf Gold nie Weiß) */
    --gold-text: #7A5410;
    /* Flächenweiß #F7F9F8 – Seitenhintergrund und ruhige Zwischenflächen */
    --bg: #F7F9F8;
    --surface: #FFFFFF;
    /* Graphit #263238 – Fließtext und neutrale UI-Informationen */
    --text: #263238;
    /* Gedämpftes Grau-Blau aus dem CD – Zweittexte, Meta-Angaben */
    --text-muted: #68747D;
    /* Liniengrau #DDE5E1 – Rahmen, Trennlinien und dezente Eingabefelder */
    --border: #DDE5E1;

    /* ===== Signalfarben =====
       Das CD kennt kein Rot – für Löschen, Fehler und Ablehnungen braucht die
       Oberfläche aber eine unmissverständliche Warnfarbe. Deshalb ein ruhiges,
       entsättigtes Rot, das neben Waldgrün nicht schreit. Wird BEWUSST sparsam
       eingesetzt; alles, was nur „Hinweis" ist, läuft über Gold. */
    --danger: #B3261E;        /* Fläche (immer mit weißer Schrift) */
    --danger-hover: #8F1D17;
    --danger-text: #B3261E;   /* Schriftfarbe auf hellem Grund */
    --danger-pale: #FCEDEC;   /* helle Warnfläche */

    /* ===== Schatten (CD: „sehr dezent und nur zur Ebenentrennung") =====
       Grünstichig statt neutralschwarz, damit die Flächen ruhig wirken. */
    --shadow: 0 1px 2px rgba(23, 74, 56, 0.05), 0 2px 8px rgba(23, 74, 56, 0.06);
    --shadow-lg: 0 6px 20px rgba(23, 74, 56, 0.10), 0 2px 6px rgba(23, 74, 56, 0.06);

    /* ===== Formen (CD-Abschnitt 03, UI-System) ===== */
    --radius: 14px;      /* Karten */
    --radius-sm: 10px;   /* Buttons, Eingabefelder, kleine Flächen */
    --radius-pill: 999px;/* Pillen: Tags, Chips, Badges */

    /* ===== Abstände: 8-px-Raster (CD-Abschnitt 03) =====
       Für Seitenaufbau und Abstände zwischen Blöcken. Feine Innenabstände
       (Knopf-Padding o. Ä.) dürfen halbe Schritte nutzen. */
    --sp-1: 0.5rem;   /* 8px  */
    --sp-2: 1rem;     /* 16px */
    --sp-3: 1.5rem;   /* 24px */
    --sp-4: 2rem;     /* 32px */
    --sp-6: 3rem;     /* 48px */
    --sp-8: 4rem;     /* 64px */

    --transition: 0.25s ease;
    /* Inter zuerst; als Ersatz genau der im CD genannte System-Stack */
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --max-width: 1200px;
}

/* ===== Dark Mode =====
   Aktiviert über <html data-theme="dark"> (Umschalter in der Navbar, gemerkt in
   localStorage; Standard folgt der Systemeinstellung). Trick: --primary wird
   HELL, damit alle Überschriften/Texte mit color:var(--primary) – auch inline –
   lesbar bleiben; die grünen Flächen (Navbar/Buttons/Banner …) werden gezielt
   wieder dunkel gesetzt. */
html[data-theme="dark"] {
    --primary: #7FCBA6;
    --primary-light: #A6DCC0;
    --accent: #58B98B;
    --accent-light: #8FD3B2;
    --accent-pale: #1D3327;
    --gold: #F2B544;
    --gold-pale: #33290F;
    --gold-text: #E8C070;
    --danger: #B3261E;
    --danger-hover: #C9352C;
    --danger-text: #F2867E;
    --danger-pale: #33201E;
    --bg: #12171A;
    --surface: #1B2226;
    --text: #E4EAE7;
    --text-muted: #9AA7A2;
    --border: #2B3733;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Grüne Flächen mit weißer Schrift bleiben Waldgrün (sonst hellgrün + weiß = unleserlich). */
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .navbar-nav,
html[data-theme="dark"] .footer,
html[data-theme="dark"] .card-category,
html[data-theme="dark"] .kachel-anzahl,
html[data-theme="dark"] .sammlung-chip.active,
html[data-theme="dark"] .email-preview-header {
    background: #174A38;
}

html[data-theme="dark"] .hero,
html[data-theme="dark"] .search-header,
html[data-theme="dark"] .auth-header,
html[data-theme="dark"] .admin-header,
html[data-theme="dark"] .karte-header {
    background: linear-gradient(135deg, #0E2F24 0%, #174A38 55%, #2C6E52 100%);
}

html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .toast,
html[data-theme="dark"] .back-to-top {
    background: #2C6E52;
}

html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .btn-outline:hover,
html[data-theme="dark"] .image-preview .set-titel-btn:hover {
    background: #3B8A67;
    color: #fff;
}

/* Hinweis: Die hellen Hinweis-Flächen (ungelesene Benachrichtigung,
   abgelehnter Beitrag, wartende Änderung …) brauchen hier KEINE Sonderregel
   mehr. Sie laufen alle über die Variablen --accent-pale / --gold-pale /
   --danger-pale, die oben für den Dark Mode bereits dunkel gesetzt sind. */

/* Lade-Skelette im Dark Mode: dunkler Schimmer statt grellem Hellgrau. */
html[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg, #212A26 25%, #2A3531 37%, #212A26 63%);
    background-size: 400% 100%;
}

/* Umschalter (🌙/☀️) in der Navbar */
.theme-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-sm);
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Inter bringt eigene optische Feinabstimmung mit; „grayscale" verhindert,
       dass die Schrift auf dunklen Flächen zu fett wirkt. */
    -webkit-font-smoothing: antialiased;
}

/* Überschriften laut CD durchgängig in Bold 700 mit leicht enger Laufweite. */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.015em;
}

/* Links: Auf hellen Flächen laut Kontrastregel NIE Mint, sondern
   (aufgehelltes) Waldgrün – das ist der einzige gut lesbare Grünton. */
a {
    color: var(--primary-light);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--primary);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ===== Barrierefreiheit =====
   Sichtbarer Tastatur-Fokus: Jedes Element, das man mit der Tab-Taste
   anspringt, bekommt einen deutlichen Rahmen – ABER nur bei echter
   Tastaturbedienung (:focus-visible), nicht beim Mausklick. So sehen
   Tastatur-Nutzer immer, wo sie gerade stehen; für Maus-Nutzer ändert
   sich optisch nichts. */
:focus-visible {
    outline: 3px solid var(--primary-light);
    outline-offset: 2px;
}

/* Auf den waldgrünen Flächen (Kopf, Fußzeile, Kopfbanner) wäre ein grüner
   Rahmen unsichtbar. Dort übernimmt Sonnen-Gold – laut CD die Akzentfarbe
   für Hinweise, und auf Waldgrün sehr kontraststark. */
.navbar :focus-visible,
.footer :focus-visible,
.hero :focus-visible,
.search-header :focus-visible,
.auth-header :focus-visible,
.admin-header :focus-visible,
.karte-header :focus-visible {
    outline-color: var(--gold);
}

/* Fokus durch Maus/Touch (ohne Tastatur) bekommt keinen Rahmen. */
:focus:not(:focus-visible) {
    outline: none;
}

/* Nur für Screenreader: Inhalt ist unsichtbar, wird aber vorgelesen.
   (Wird z. B. für den „Zum Inhalt springen“-Link genutzt.) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Sprung-Link „Zum Inhalt springen“: normal außerhalb des sichtbaren
   Bereichs versteckt; sobald man ihn mit Tab anspringt, rutscht er sichtbar
   nach unten. Hintergrund bewusst fest dunkelgrün (nicht var(--primary)),
   damit der weiße Text auch im Dark Mode gut lesbar bleibt. */
.skip-link {
    position: absolute;
    top: -4rem;
    left: 0.5rem;
    z-index: 2000;
    background: #174A38;
    color: #fff;
    padding: 0.7rem 1.2rem;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: var(--shadow-lg);
    transition: top var(--transition);
}

.skip-link:hover {
    color: #fff;
}

.skip-link:focus {
    top: 0;
}

/* --- Navigation --- */
/* Navigationsleiste: laut CD in Waldgrün. Fest #174A38 (nicht var(--primary)),
   weil die Variable im Dark Mode absichtlich hell wird – die Leiste soll aber
   in beiden Modi gleich aussehen. */
.navbar {
    background: #174A38;
    padding: 0 var(--sp-4);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 12px rgba(23, 74, 56, 0.25);
}

.navbar-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    gap: var(--sp-2);
}

/* ===== Wort-Bild-Marke im Kopf =====
   Aufbau laut CD: Bildmarke (Deutschland-Symbol) + Wortmarke.
   Da die Leiste dunkel ist, sitzt die vollfarbige Bildmarke auf einer weißen
   Kreisfläche („vollfarbig auf sehr hellem Hintergrund"), die Wortmarke steht
   daneben in Weiß + Mint – genau wie im Original-Logo die Zweifarbigkeit.
   Freiraum: der Abstand ringsum entspricht mindestens der Höhe des gelben
   Pin-Kreises im Symbol. Kein Hover-Effekt, kein Schlagschatten, keine
   Verzerrung – das Logo bleibt unangetastet. */
.navbar-brand {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    letter-spacing: -0.02em;
    flex-shrink: 0;
    /* Schutzraum rund um die Marke */
    padding: 0.25rem 0.5rem 0.25rem 0;
}

.navbar-brand:hover {
    color: #fff;
}

/* Weiße Kreisfläche als ruhiger Untergrund für die vollfarbige Bildmarke */
.brand-mark {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    /* Innenabstand hält das Symbol vom Kreisrand weg – so wird nichts
       abgeschnitten und der Freiraum aus dem CD bleibt gewahrt. */
    padding: 5px;
    background: #fff;
    border-radius: 50%;
    object-fit: contain;
}

.brand-name {
    white-space: nowrap;
}

/* Zweiter Wortteil in Mint – wie in der Original-Wortmarke */
.brand-name span {
    color: var(--accent-light);
}

.navbar-nav {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 0.25rem;
}

.navbar-nav a {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.8);
    /* Etwas kompakter, damit alle Punkte (mit Icon) nebeneinander passen */
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    /* CD: SemiBold 600 für Navigation und Buttons */
    font-weight: 600;
    white-space: nowrap;
    transition: all var(--transition);
}

.navbar-nav a:hover,
.navbar-nav a.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

/* Die aktive Seite bekommt zusätzlich einen Mint-Strich – so ist auch ohne
   Farbunterscheidung erkennbar, wo man gerade ist. */
.navbar-nav a.active {
    box-shadow: inset 0 -2px 0 var(--accent);
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
}

/* --- Konto-Menü im Header (wird von app.js eingesetzt) --- */
.nav-user {
    position: relative;
}

/* Der Namens-Button mit Avatar */
.nav-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #fff;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-pill);
    font-family: var(--font);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
}

.nav-user-btn:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* Lange Namen kürzen, damit die Leiste nicht gesprengt wird */
.nav-user-name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mint-Kreis mit Anfangsbuchstaben. Schrift laut Kontrastregel in Waldgrün
   (fest, nicht var(--primary)) – weiße Schrift auf Mint wäre zu blass. */
.nav-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: #174A38;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.nav-caret {
    font-size: 0.75rem;
    opacity: 0.85;
    transition: transform var(--transition);
}

.nav-user.open .nav-caret {
    transform: rotate(180deg);
}

/* Hinweis auf ungelesene Benachrichtigungen. Laut CD ist Sonnen-Gold die
   Farbe für „kleine Hinweise und Statusakzente" – Schrift darauf in Graphit
   (auf Gold niemals Weiß). */
.nav-badge {
    background: var(--gold);
    color: #263238;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-pill);
    min-width: 1.1rem;
    text-align: center;
}

/* Das aufklappbare Menü */
.nav-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 230px;
    background: var(--surface);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    list-style: none;
    padding: 0.4rem;
    display: none;
    z-index: 1100;
}

.nav-user.open .nav-dropdown {
    display: block;
}

.nav-dropdown li {
    list-style: none;
}

.nav-dropdown a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 500;
}

.nav-dropdown a:hover {
    background: var(--accent-pale);
    color: var(--primary);
}

/* --- Mein Bereich (mein-bereich.html) --- */
.mb-wrap {
    max-width: 1000px;
    margin: 2rem auto;
    padding: 0 1.5rem;
}

/* Seitenleiste + Inhalt nebeneinander (ab 769px, siehe Media Query unten
   für die schmale Kopfzeilen-Fassung auf dem Handy). Vorher war die
   Umschaltung eine Reiter-Leiste über volle Breite – bei 5 Punkten brach
   sie in einem 760px schmalen Container immer in zwei Zeilen um, egal wie
   breit das Browserfenster war. Die Seitenleiste nutzt die Breite jetzt
   sinnvoll aus und hat auch für künftige Punkte Platz, ohne umzubrechen. */
.mb-layout {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

/* Umschaltung zwischen den Teilbereichen */
.mb-tabs {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 0 0 220px;
    padding-right: 1.5rem;
    border-right: 1px solid var(--border);
    /* Bleibt beim Scrollen sichtbar, direkt unter der (ebenfalls sticky) Navbar. */
    position: sticky;
    top: 88px;
}

.mb-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.9rem;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.95rem;
    border-left: 3px solid transparent;
}

.mb-tab:hover {
    color: var(--primary);
    background: var(--accent-pale);
}

.mb-tab.active {
    color: var(--primary);
    background: var(--accent-pale);
    border-left-color: var(--accent);
}

.mb-content {
    flex: 1;
    min-width: 0; /* Inhalt darf schrumpfen, statt den Flex-Container zu sprengen */
}

/* Auf schmalen Bildschirmen wird aus der Seitenleiste wieder eine
   Kopfzeile mit umbrechenden Reitern – für eine feste Spalte ist dort
   kein Platz. */
@media (max-width: 768px) {
    .mb-layout {
        flex-direction: column;
        gap: 0;
    }

    .mb-tabs {
        flex-direction: row;
        flex-wrap: wrap;
        flex-basis: auto;
        gap: 0.5rem;
        width: 100%;
        padding-right: 0;
        border-right: none;
        border-bottom: 2px solid var(--border);
        margin-bottom: 2rem;
        position: static;
    }

    .mb-tab {
        border-left: none;
        border-bottom: 3px solid transparent;
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
        margin-bottom: -2px;
    }

    .mb-tab.active {
        border-bottom-color: var(--accent);
    }
}

/* Es ist immer nur der gewählte Teilbereich sichtbar */
.mb-section {
    display: none;
}

.mb-section.active {
    display: block;
}

.mb-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.mb-section-head h2 {
    font-size: 1.4rem;
    color: var(--primary);
    margin: 0;
}

/* --- Einheitliche Seiten-Kopfbanner ---
   Hero (Home), Detailsuche, Konto-/Anmeldeseiten und Admin teilen sich
   GENAU dasselbe Aussehen: gleicher Farbverlauf, gleiche Höhe, gleiche
   Überschrift. Beim Seitenwechsel wirkt der Kopf dadurch immer identisch.
   Soll das Aussehen ALLER Köpfe geändert werden, hier anpassen. */
.hero,
.search-header,
.auth-header,
.admin-header,
.karte-header {
    /* Waldgrün → Mint als ruhiger Verlauf. Feste Farbwerte (nicht die
       Variablen), damit das Band im Dark Mode nicht hell wird und die weiße
       Schrift laut Kontrastregel immer auf Waldgrün steht. */
    background: linear-gradient(135deg, #123B2D 0%, #174A38 45%, #2C6E52 100%);
    color: #fff;
    text-align: center;
    padding: var(--sp-6) var(--sp-4);
    /* Feste Mindesthöhe + vertikale Zentrierung → jedes Band ist auf allen
       Seiten exakt gleich hoch, egal ob der Untertitel ein- oder zweizeilig ist. */
    min-height: 12rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero h1,
.search-header h1,
.auth-header h1,
.admin-header h1,
.karte-header h1 {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.hero p,
.search-header p,
.auth-header p,
.admin-header p,
.karte-header p {
    font-size: 1.05rem;
    opacity: 0.9;
    line-height: 1.6;
    margin-bottom: 0;
    max-width: 640px;
}

/* --- Hero (Home) – nur die Besonderheiten gegenüber den anderen Köpfen --- */
.hero {
    position: relative;
    overflow: hidden;
}

/* Zwei sehr weiche Kreise als ruhige Tiefenwirkung – einer in Mint, einer in
   Weiß. Das bringt den Mint-Anteil ins Kopfband, ohne die Lesbarkeit der
   weißen Schrift anzutasten. */
.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: rgba(88, 185, 139, 0.14);
    border-radius: 50%;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 50%;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
}

/* --- Sections --- */
.section {
    padding: var(--sp-8) var(--sp-4);
}

.section-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.section-subtitle {
    color: var(--text-muted);
    font-size: 1.05rem;
    margin-bottom: 2.5rem;
}

/* --- About / Vorstellung --- */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.about-text p {
    margin-bottom: 1rem;
    color: var(--text-muted);
    line-height: 1.8;
}

.about-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.5rem;
}

.about-feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--accent-pale);
    border-radius: var(--radius-sm);
}

.about-feature-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.about-feature-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary);
}

/* Feature-Kacheln sind jetzt Links: kein Unterstrich, leichter Hover-Effekt */
a.about-feature {
    text-decoration: none;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

a.about-feature:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    background: var(--accent-light);
}

.about-image-placeholder {
    background: linear-gradient(135deg, var(--accent-pale), var(--accent-light));
    border-radius: var(--radius);
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    position: relative;
    overflow: hidden;
}

/* Diashow: klickbarer Slide (Bild + dezenter Name), wird sanft ein-/ausgeblendet */
.about-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.about-slide.show {
    opacity: 1;
}

.about-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Name des Erlebnisses dezent unten ins Bild eingeblendet */
.about-slide-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.5rem 1rem 0.7rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* --- Map Section --- */
.map-section {
    background: var(--surface);
}

.map-controls {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.map-controls select,
.map-controls input {
    padding: 0.6rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-family: var(--font);
    background: var(--surface);
    color: var(--text);
    transition: border-color var(--transition);
}

.map-controls select:focus,
.map-controls input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(88, 185, 139, 0.15);
}

#map {
    height: 500px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: var(--shadow);
}

/* --- Cards Grid --- */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--sp-3);
}

/* --- Lade-Skelette (graue Platzhalter-Karten während des Ladens) --- */
.skeleton-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.skeleton-image {
    width: 100%;
    height: 200px;
}

.skeleton-body {
    padding: 1.25rem;
}

.skeleton-line {
    height: 0.8rem;
    border-radius: 4px;
    margin-bottom: 0.7rem;
}

.skeleton-line-title {
    height: 1.1rem;
    width: 70%;
    margin-bottom: 1rem;
}

.skeleton-line-short {
    width: 45%;
    margin-bottom: 0;
}

.skeleton {
    background: linear-gradient(90deg, #E4EBE7 25%, #F2F6F4 37%, #E4EBE7 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
}

@keyframes skeleton-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* Respektiert die Systemeinstellung „Bewegung reduzieren" */
@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; }

    .card:hover .card-image img { transform: none; }
    .card:hover { transform: none; }
}

/* --- Card --- */
.card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

.card {
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    transition: all var(--transition);
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-light);
}

.card-image {
    height: 200px;
    background: linear-gradient(135deg, var(--accent-pale), var(--accent-light));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

/* Beim Überfahren der Karte zoomt das Bild ganz leicht heran (dezenter Effekt). */
.card:hover .card-image img {
    transform: scale(1.05);
}

.card-image-placeholder {
    font-size: 3rem;
    opacity: 0.5;
}

.card-category {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: var(--primary);
    color: #fff;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.card-body {
    padding: var(--sp-3);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text);
    line-height: 1.3;
}

.card-title a {
    color: inherit;
}

.card-title a:hover {
    color: var(--primary);
}

.card-description {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-meta {
    /* Ort, Erreichbarkeit und Datum untereinander – so bleiben die
       Kacheln gleichmäßig, auch wenn das 🚆-Badge dazukommt. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.card-meta-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.card-tags {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

/* --- Sterne-Bewertung --- */
/* Anzeige (nicht klickbar): gefüllte/leere Sterne plus kleiner Textzusatz. */
.card-rating {
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.sterne {
    letter-spacing: 1px;
    white-space: nowrap;
}

.stern {
    font-size: 1rem;
    line-height: 1;
}

.stern.voll {
    color: var(--gold);
}

.stern.leer {
    color: var(--border);
}

.sterne-text {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* Eingabe (klickbar) auf der Detailseite: größere Sterne als Knöpfe. */
.sterne-eingabe {
    display: flex;
    gap: 0.2rem;
}

.stern-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.8rem;
    line-height: 1;
    padding: 0;
    color: var(--border);
    transition: color var(--transition);
}

.stern-btn.voll {
    color: var(--gold);
}

.stern-btn:hover {
    color: var(--gold);
}

.tag {
    background: var(--accent-pale);
    color: var(--primary);
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 500;
}

/* Klickbare Tags (z. B. auf der Detailseite) sehen aus wie die Pillen,
   ohne Unterstreichung, mit dezentem Hover-Hinweis. */
a.tag {
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

a.tag:hover {
    background: var(--accent);
    color: #174A38;
}

/* --- Search Page ---
   Kopf siehe gemeinsame Banner-Definition oben (.hero/.search-header/…). */
/* Suchfeld sitzt in derselben Zeile wie die Filter und nimmt den freien
   Platz links ein (flex: 1) → es ist deutlich größer als die Filter rechts. */
.search-bar {
    flex: 1 1 280px;
    min-width: 240px;
    position: relative;
}

.search-bar input {
    width: 100%;
    padding: 0.85rem 1.25rem 0.85rem 3rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: 1rem;
    font-family: var(--font);
}

.search-bar input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(88, 185, 139, 0.3);
}

/* Filter-Gruppe (Label + Dropdowns + Zurücksetzen): behält ihre natürliche
   Breite; das wachsende Suchfeld links schiebt sie an den rechten Rand. */
.filter-controls {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

/* Häkchen-Filter in der Filterleiste (z. B. „🚆 Deutschlandticket"):
   normale Schrift statt der Großbuchstaben von ".filters label". */
.filters .filter-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.9rem;
    color: var(--text);
}

.filter-check input {
    accent-color: var(--primary);
}

.search-bar-icon {
    position: absolute;
    left: 1.15rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1.1rem;
}

.filters {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: var(--sp-3) var(--sp-4);
}

.filters-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

.filters label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filters select {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
}

.filters select:focus {
    outline: none;
    border-color: var(--accent);
}

.results-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.results-count {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: var(--font);
    line-height: 1.2;
    box-sizing: border-box;
    /* Transparenter Rahmen als Platzhalter, damit gefüllte und Rahmen-Buttons
       (btn-outline) exakt gleich hoch sind. */
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition);
}

/* Hauptaktion: Waldgrün mit weißer Schrift – die einzige laut CD erlaubte
   Kombination mit Weiß. Feste Farbe, damit der Knopf auch im Dark Mode
   dunkelgrün bleibt. */
.btn-primary {
    background: #174A38;
    color: #fff;
}

.btn-primary:hover {
    background: #2C6E52;
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

/* Zweitrangige Aktion: Mint-Fläche mit Waldgrün-Schrift (Kontrastregel!) */
.btn-accent {
    background: var(--accent);
    color: #174A38;
}

.btn-accent:hover {
    background: var(--accent-light);
    color: #174A38;
    transform: translateY(-1px);
}

.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}

.btn-outline:hover {
    background: var(--primary);
    color: #fff;
}

.btn-danger {
    background: var(--danger);
    color: #fff;
}

.btn-danger:hover {
    background: var(--danger-hover);
    color: #fff;
}

/* Gedrückter Zustand: Knopf senkt sich sichtbar ab (CD: „klare aktive Zustände") */
.btn:active {
    transform: translateY(1px);
    box-shadow: none;
}

.btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
}

.btn-lg {
    padding: 0.85rem 2rem;
    font-size: 1rem;
}

/* --- Admin / Form ---
   Kopf siehe gemeinsame Banner-Definition oben (.hero/.search-header/…). */
.admin-login {
    max-width: 400px;
    margin: 3rem auto;
    padding: 2rem;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-align: center;
}

.admin-login h2 {
    margin-bottom: 1rem;
    color: var(--primary);
}

.admin-login input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-family: var(--font);
    margin-bottom: 1rem;
}

.admin-login input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(88, 185, 139, 0.15);
}

.admin-panel {
    display: none;
}

.admin-panel.visible {
    display: block;
}

.form-section {
    background: var(--surface);
    padding: var(--sp-4);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 2rem;
}

.form-section h2 {
    font-size: 1.4rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--accent-pale);
}

/* --- „Gefahrenzone": Konto löschen (mein-bereich.html) ---
   Setzt sich bewusst vom Rest ab, damit niemand versehentlich hier landet:
   heller Warnton statt weißer Fläche, dazu ein roter Balken an der Seite.
   Schrift bleibt Graphit – Rot ist nur Rahmen und Fläche, nie Fließtext
   (Kontrastregel des Corporate Designs, siehe :root). */
.konto-loeschen-box {
    background: var(--danger-pale);
    border: 1px solid var(--danger);
    border-left-width: 4px;
    box-shadow: none;
}

/* --- Admin-Abschnitte als Akkordeon (ein-/ausklappbar über <details>) ---
   Die Überschrift (<summary>) ist anklickbar und nativ tastaturbedienbar. */
.akkordeon > summary {
    display: block;          /* statt list-item -> entfernt das native Dreieck */
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.akkordeon > summary::-webkit-details-marker {
    display: none;           /* natives Dreieck in Chrome/Safari ausblenden */
}

.akkordeon > summary > h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;        /* zugeklappt: kein Abstand unter der Überschrift */
}

.akkordeon[open] > summary > h2 {
    margin-bottom: 1.5rem;   /* aufgeklappt: Abstand zum Inhalt */
}

/* Eigenes Aufklapp-Zeichen, dreht sich beim Öffnen um 90°. */
.akkordeon > summary > h2::before {
    content: "▸";
    font-size: 0.85em;
    color: var(--accent);
    transition: transform var(--transition);
}

.akkordeon[open] > summary > h2::before {
    transform: rotate(90deg);
}

/* --- Duplikat-Hilfe in der Admin-Prüfvorschau (Nr. 22) --- */
.preview-naehe {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    background: var(--accent-pale);
    border-radius: var(--radius-sm);
}

.preview-naehe .naehe-liste {
    margin: 0.4rem 0 0;
    padding-left: 1.2rem;
}

.preview-naehe .naehe-liste li {
    margin-bottom: 0.2rem;
}

/* Deutlicher Warnhinweis, wenn ein sehr nahes Erlebnis existiert (mögliches Duplikat).
   Feste Farben (nicht über Variablen), damit der Alarm in Hell und Dunkel klar bleibt. */
.dup-warnung {
    background: var(--danger-pale);
    color: var(--danger-text);
    border: 1px solid rgba(179, 38, 30, 0.35);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    margin-bottom: 0.6rem;
    font-weight: 600;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
    color: var(--text);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.65rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    transition: border-color var(--transition);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(88, 185, 139, 0.15);
    background: var(--surface);
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

/* Auswahlfelder (Dropdowns) genauso hoch wie Text-Eingaben:
   Ohne appearance:none zeichnet v. a. Safari sie als kleineres System-
   element und ignoriert unser Padding. Der Pfeil kommt als eingebettetes
   SVG (grau, funktioniert in Hell und Dunkel) wieder dazu. */
.form-group select,
.filters select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    padding-right: 2.4rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
}

/* Checkbox mit nebenstehendem Text (z. B. Bildrechte-Bestätigung) */
.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

/* Regeln/Wünsche im Beitragsformular (KI-Angabe beim Text, Bild-Regeln):
   Mint-Fläche, daher laut CD Schrift in Graphit (nie weiß). */
.regel-box {
    margin-top: 0.6rem;
    padding: 0.8rem 1rem;
    background: var(--accent-pale);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text);
}

.regel-box strong {
    color: var(--primary);
}

.regel-box ul {
    margin: 0.4rem 0 0;
    padding-left: 1.2rem;
    list-style: disc;
}

.regel-box li+li {
    margin-top: 0.4rem;
}

.image-preview-container {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.image-preview {
    width: 120px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 2px solid var(--border);
    background: var(--surface);
}

/* Quadratischer Bild-Teil mit überlagertem Entfernen-Knopf + Titelbild-Markierung;
   eigener Positionierungs-Kontext (position: relative) für diese Knöpfe. */
.image-preview-thumb {
    position: relative;
    width: 100%;
    height: 100px;
    overflow: hidden;
}

.image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Eingabefeld für die Bildbeschreibung (Alt-Text) unter dem Vorschaubild. */
.image-alt-input {
    width: 100%;
    border: none;
    border-top: 1px solid var(--border);
    padding: 0.4rem 0.5rem;
    font-size: 0.72rem;
    font-family: inherit;
    color: var(--text);
    background: var(--surface);
}

.image-alt-input:focus {
    background: var(--accent-pale);
}

.image-preview .remove-img {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(179, 38, 30, 0.92);
    color: #fff;
    border: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Titelbild-Auswahl: das erste Bild ist das Titelbild und wird hervorgehoben.
   Bei den übrigen Bildern erscheint unten ein „★ Als Titelbild“-Knopf. */
.image-preview.titelbild {
    border-color: var(--accent);
}

.image-preview .titel-badge,
.image-preview .set-titel-btn {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border: none;
    font-size: 0.62rem;
    padding: 0.25rem 0;
    text-align: center;
}

.image-preview .titel-badge {
    background: var(--accent);
    color: #174A38;
    font-weight: 600;
}

.image-preview .set-titel-btn {
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
}

.image-preview .set-titel-btn:hover {
    background: var(--primary);
}

/* --- Dashboard / Statistik (Startseite) --- */
.stats-band {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-2);
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem 1rem;
    text-align: center;
}

.stat-number {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}

.stat-label {
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .stats-band {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Post List (Admin) --- */
.post-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.post-list-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.post-list-item-thumb {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--accent-pale);
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-list-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-list-item-info {
    flex: 1;
}

.post-list-item-info h3 {
    font-size: 1rem;
    margin-bottom: 0.2rem;
}

.post-list-item-info p {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.post-list-item-actions {
    display: flex;
    gap: 0.5rem;
}

/* --- Post Detail --- */
.post-detail {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 2rem;
}

.post-detail-header {
    margin-bottom: 2rem;
}

.post-detail-header h1 {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.post-detail-meta {
    display: flex;
    gap: 1.5rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    flex-wrap: wrap;
}

.post-detail-meta-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.post-detail-gallery {
    margin-bottom: 2rem;
}

.post-detail-gallery-main {
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1rem;
    max-height: 450px;
}

.post-detail-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in; /* Hinweis: anklickbar zum Vergrößern (öffnet die Lightbox) */
}

.post-detail-gallery-thumbs {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
}

.post-detail-gallery-thumbs img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color var(--transition);
}

.post-detail-gallery-thumbs img:hover,
.post-detail-gallery-thumbs img.active {
    border-color: var(--accent);
}

.post-detail-content {
    background: var(--surface);
    padding: var(--sp-4);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 2rem;
    line-height: 1.8;
}

.post-detail-content p {
    margin-bottom: 1rem;
}

/* KI-Kennzeichnung über dem Beitragstext: goldene Hinweisfläche (nie große
   Fläche, nie weiße Schrift – Schrift daher in --gold-text). */
.post-detail-ki-hinweis {
    background: var(--gold-pale);
    color: var(--gold-text);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius-sm);
    padding: 0.8rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    line-height: 1.6;
}

.post-detail-sidebar {
    background: var(--surface);
    padding: var(--sp-3);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 2rem;
}

.post-detail-sidebar h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--primary);
}

.post-detail-map {
    height: 250px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 1rem;
}

.post-detail-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

/* Button-Texte immer einzeilig halten (z. B. „Mehr aus Mecklenburg-Vorpommern“).
   Bei wenig Platz brechen ganze Buttons in die nächste Zeile um (flex-wrap oben). */
.post-detail-actions .btn {
    white-space: nowrap;
}

/* „Teilen"-Zeile direkt unter dem Kopf – schlicht, ohne Kasten-Rahmen */
.post-detail-teilen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.post-detail-teilen .teilen-label {
    font-weight: 600;
    color: var(--text-muted);
    margin-right: 0.25rem;
}

/* Dezenter „Mehr aus …"-Link unter den Aktionen */
.post-mehr-link {
    display: inline-block;
    margin-bottom: 2rem;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.post-mehr-link:hover {
    text-decoration: underline;
}

/* „Ähnliche Erlebnisse"-Abschnitt unten auf der Detailseite.
   Rahmen/Abstand nur, wenn der Abschnitt wirklich Inhalt hat (:not(:empty)),
   sonst entsteht kein leerer Block. */
.aehnliche-erlebnisse:not(:empty) {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.aehnliche-titel {
    color: var(--primary);
    margin-bottom: 1rem;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    transition: color var(--transition);
}

.back-link:hover {
    color: var(--primary);
}

/* --- Impressum --- */
.impressum-content {
    max-width: 700px;
    margin: 3rem auto;
    padding: 0 2rem;
}

.impressum-content h1 {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 2rem;
}

.impressum-content h2 {
    font-size: 1.25rem;
    color: var(--primary);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.impressum-content p {
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    line-height: 1.7;
}

.impressum-content a {
    color: var(--primary-light);
    font-weight: 600;
    text-decoration: underline;
}

/* --- Kontakt & Hilfe (kontakt.html) --- */
/* Schmaler, zentrierter Inhaltsbereich mit Abstand zwischen den Blöcken */
.kontakt-wrap {
    max-width: 760px;
    margin: 2.5rem auto;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* In-Seiten-Sprungmenü (Schnellzugriff) oben auf der Kontakt/Hilfe-Seite:
   macht direkt sichtbar, dass es neben dem Formular auch Hilfe + FAQ gibt,
   und springt per Klick sanft dorthin (Smooth-Scroll ist global aktiv). */
.seiten-menue {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.seiten-menue a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 600;
    box-shadow: var(--shadow);
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.seiten-menue a:hover {
    background: var(--accent-pale);
    border-color: var(--accent);
    color: var(--primary);
}

/* Beim Anspringen genug Abstand lassen, damit die Überschrift nicht unter der
   oben fixierten Navigationsleiste verschwindet. */
.kontakt-wrap section[id] {
    scroll-margin-top: 92px;
}

/* Honeypot-Feld: für Menschen unsichtbar, aber im DOM vorhanden (Spam-Schutz) */
.hp-feld {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Hilfebereich: Liste aus Icon + Erklärungstext */
.hilfe-grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.hilfe-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.hilfe-icon {
    font-size: 1.75rem;
    line-height: 1;
    flex-shrink: 0;
}

.hilfe-item h3 {
    font-size: 1.05rem;
    color: var(--primary);
    margin-bottom: 0.25rem;
}

.hilfe-item p {
    color: var(--text-muted);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* FAQ-Akkordeon über native <details>/<summary>-Elemente */
.faq-item {
    border-bottom: 1px solid var(--border);
}

.faq-item summary {
    cursor: pointer;
    list-style: none;
    padding: 1rem 2rem 1rem 0;
    font-weight: 600;
    color: var(--text);
    position: relative;
}

/* Standard-Dreieck des <summary> ausblenden (Chrome/Safari) */
.faq-item summary::-webkit-details-marker {
    display: none;
}

/* Eigenes Plus-/Minus-Zeichen rechts neben der Frage */
.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--accent);
}

.faq-item[open] summary::after {
    content: '–';
}

.faq-item summary:hover {
    color: var(--primary);
}

.faq-item p {
    color: var(--text-muted);
    line-height: 1.7;
    padding: 0 0 1rem 0;
    margin: 0;
}

/* --- Footer ---
   Wie die Navigationsleiste fest in Waldgrün (nicht var(--primary)), damit
   die Fußzeile in Hell und Dunkel gleich aussieht. */
.footer {
    background: #174A38;
    color: rgba(255, 255, 255, 0.75);
    padding: var(--sp-4) var(--sp-4);
    margin-top: auto;
}

.footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-2);
}

/* Bildmarke neben dem Copyright – auf weißer Kreisfläche wie im Kopf */
.footer-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
}

.footer-mark {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    padding: 3px;
    background: #fff;
    border-radius: 50%;
    object-fit: contain;
}

.footer a {
    color: var(--accent-light);
}

.footer a:hover {
    color: #fff;
}

.footer-links {
    display: flex;
    gap: var(--sp-3);
    list-style: none;
    font-size: 0.9rem;
    font-weight: 600;
}

/* --- PDF Export --- */
.pdf-content {
    display: none;
}

.pdf-content.printing {
    display: block;
}

/* --- Utility --- */
.text-center {
    text-align: center;
}

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

.mt-1 {
    margin-top: 0.5rem;
}

.mt-2 {
    margin-top: 1rem;
}

.mt-3 {
    margin-top: 1.5rem;
}

.mb-1 {
    margin-bottom: 0.5rem;
}

.mb-2 {
    margin-bottom: 1rem;
}

.mb-3 {
    margin-bottom: 1.5rem;
}

.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-muted);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.4;
}

.empty-state h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: var(--text);
}

/* --- Loading / Toast --- */
.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: var(--primary);
    color: #fff;
    padding: 1rem 1.5rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    /* Volle Höhe + die 2rem Abstand nach unten, damit die Meldung
       komplett aus dem Bild verschwindet (sonst bleibt ein Streifen sichtbar). */
    transform: translateY(calc(100% + 2rem));
    transition: transform 0.3s ease;
}

.toast.show {
    transform: translateY(0);
}

.toast.success {
    background: #2C6E52;
}

.toast.error {
    background: var(--danger);
}

/* --- Lightbox (Bild groß anzeigen) ---
   Dunkles Vollbild-Overlay; per JS (.show) eingeblendet. */
.lightbox {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.88);
    z-index: 10000;
    cursor: zoom-out;
}

.lightbox.show {
    display: flex;
}

.lightbox-img {
    max-width: 95vw;
    max-height: 95vh;
    object-fit: contain;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    cursor: default;
}

.lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition);
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* --- Zurück nach oben ---
   Schwebender Button unten rechts; erscheint per JS (.visible) nach dem Scrollen. */
.back-to-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--transition), transform var(--transition), background var(--transition), visibility var(--transition);
    z-index: 1500;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--primary-light);
}

/* --- Cookie-Hinweis ---
   Schmaler Balken am unteren Bildschirmrand; erscheint nur beim allerersten
   Besuch (Merker in localStorage) und verschwindet dauerhaft nach Klick auf
   „Verstanden". Da wir nur technisch notwendige Cookies/Speicherung nutzen,
   reicht ein reiner Hinweis ohne Ja/Nein-Regler. */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    background: var(--surface);
    color: var(--text);
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: 1rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.cookie-banner p {
    margin: 0;
    flex: 1 1 320px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.cookie-banner a {
    color: var(--primary);
    font-weight: 600;
}

.cookie-banner-actions {
    flex: 0 0 auto;
}

@media (max-width: 480px) {
    .cookie-banner-actions {
        width: 100%;
    }

    .cookie-banner-actions .btn {
        width: 100%;
    }
}

/* --- Modal --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal {
    background: var(--surface);
    border-radius: var(--radius);
    padding: var(--sp-4);
    max-width: 500px;
    width: 90%;
    box-shadow: var(--shadow-lg);
    transform: scale(0.95);
    transition: transform 0.25s ease;
}

.modal-overlay.active .modal {
    transform: scale(1);
}

.modal h2 {
    margin-bottom: 1rem;
    color: var(--primary);
}

.modal p {
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

/* Vorteils-Liste im Pop-up: ohne Aufzählungspunkte (Emojis stehen im Text) */
.modal-list {
    list-style: none;
    margin: 0 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.modal-list li {
    line-height: 1.5;
}

.modal-list strong {
    color: var(--primary);
}

.modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

/* Ortssuche im "Standort wählen"-Pop-up (beitrag-erstellen.html) */
.standort-ergebnisliste {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    margin: 0.25rem 0 0;
    padding: 0.25rem;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    max-height: 220px;
    overflow-y: auto;
}

.standort-ergebnis {
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.9rem;
}

.standort-ergebnis:hover {
    background: var(--accent-pale);
    color: var(--primary);
}

.standort-ergebnis-hinweis {
    padding: 0.5rem 0.6rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* --- Responsive: Navigation ---
   Das Klappmenü (Burger) greift bewusst schon UNTER 1200px, nicht erst
   bei 768px: Mit allen Menüpunkten samt Icons und Konto-Menü wird die
   Leiste in dem Zwischenbereich sonst zu eng und bricht unschön um.
   Alle übrigen Mobil-Regeln bleiben bei 768px. */
@media (max-width: 1199px) {
    .menu-toggle {
        display: block;
    }

    .navbar-nav {
        display: none;
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        background: var(--primary);
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .navbar-nav.open {
        display: flex;
    }

    /* Im Klappmenü: bequeme Tipp-Flächen (Desktop ist kompakter) */
    .navbar-nav a {
        padding: 0.65rem 1rem;
        font-size: 0.95rem;
    }

    /* Konto-Menü im Klappmenü: volle Breite, Dropdown untereinander,
       Name darf ausgeschrieben werden (Platz ist da) */
    .nav-user {
        width: 100%;
    }

    .nav-user-btn {
        width: 100%;
        justify-content: flex-start;
        border-radius: var(--radius-sm);
    }

    .nav-user-name {
        max-width: none;
    }

    .nav-dropdown {
        position: static;
        min-width: 0;
        padding: 0.25rem 0 0 0;
        background: transparent;
        box-shadow: none;
    }

    .nav-dropdown a {
        color: rgba(255, 255, 255, 0.85);
        padding-left: 2.5rem;
    }

    .nav-dropdown a:hover {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
    }
}

/* --- Responsive --- */
@media (max-width: 768px) {
    /* Alle Banner-Köpfe auf Mobil gleich kompakt */
    .hero h1,
    .search-header h1,
    .auth-header h1,
    .admin-header h1,
    .karte-header h1 {
        font-size: 1.9rem;
    }

    .hero,
    .search-header,
    .auth-header,
    .admin-header,
    .karte-header {
        padding: 2rem 1.5rem;
        /* Auf Mobil natürliche Höhe – mehrzeiliger Text bestimmt die Höhe */
        min-height: auto;
    }

    .about-grid {
        grid-template-columns: 1fr;
    }

    .about-features {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .cards-grid {
        grid-template-columns: 1fr;
    }

    .footer-inner {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .filters-inner {
        flex-direction: column;
        align-items: stretch;
    }

    /* Auf Mobil Suchfeld und Filter untereinander, jeweils volle Breite */
    .filter-controls {
        flex-direction: column;
        align-items: stretch;
    }

    #map {
        height: 350px;
    }

    .post-detail-header h1 {
        font-size: 1.6rem;
    }

    /* Marke etwas kompakter, damit sie neben dem Burger-Knopf Platz hat */
    .navbar {
        padding: 0 var(--sp-2);
    }

    .navbar-brand {
        font-size: 1.05rem;
        gap: 0.55rem;
    }

    .brand-mark {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 480px) {
    /* Ganz schmale Geräte: nur noch die Bildmarke + „Erlebnis Deutschland"
       in einer Zeile, notfalls ohne den Schutzraum links. */
    .navbar-inner {
        height: 64px;
    }

    .navbar-nav {
        top: 64px;
    }

    .navbar-brand {
        font-size: 0.95rem;
    }

    .brand-mark {
        width: 32px;
        height: 32px;
        padding: 3px;
    }

    .hero h1,
    .search-header h1,
    .auth-header h1,
    .admin-header h1,
    .karte-header h1 {
        font-size: 1.6rem;
    }

    .section {
        padding: var(--sp-6) var(--sp-2);
    }

    .section-title {
        font-size: 1.5rem;
    }
}

/* --- Leaflet Overrides --- */
/* Karten-Nadel im Markenbild (wird von App.addMarkers erzeugt):
   waldgrüner Kreis, weißer Rand, goldener Kern – wie der Pin im Logo. */
.karten-nadel {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #174A38;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(23, 74, 56, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
}

.karten-nadel-punkt {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gold);
}


.leaflet-popup-content-wrapper {
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-lg) !important;
}

.leaflet-popup-content {
    margin: 0.75rem 1rem !important;
    font-family: var(--font) !important;
    font-size: 0.9rem !important;
}

.popup-title {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.3rem;
    color: var(--primary);
}

.popup-category {
    font-size: 0.75rem;
    color: var(--primary-light);
    font-weight: 600;
    text-transform: uppercase;
}

.popup-location {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

.popup-link {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-light);
}

/* --- Auth / Registration ---
   Kopf siehe gemeinsame Banner-Definition oben (.hero/.search-header/…). */
.auth-container {
    max-width: 500px;
    margin: 3rem auto;
    padding: 0 2rem;
}

.auth-card {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--sp-4);
}

.auth-user-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    text-align: center;
}

.auth-card h2 {
    color: var(--primary);
    margin-bottom: 0.5rem;
    text-align: center;
}

.auth-tabs {
    display: flex;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--border);
}

.auth-tab {
    flex: 1;
    padding: 0.75rem;
    background: none;
    border: none;
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--transition);
}

.auth-tab:hover {
    color: var(--primary);
}

.auth-tab.active {
    color: var(--primary);
    border-bottom-color: var(--accent);
}

.auth-tab-content {
    display: none;
}

.auth-tab-content.active {
    display: block;
}

.auth-logged-in {
    max-width: 900px;
    width: 75%;
    margin: 3rem auto;
    padding: 0 2rem;
}

/* CAPTCHA */
.captcha-box {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--accent-pale);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
}

.captcha-question {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
    flex: 1;
}

.captcha-refresh {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
    transition: background var(--transition);
}

.captcha-refresh:hover {
    background: rgba(0, 0, 0, 0.08);
}

/* User info bar */
.user-info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--accent-pale);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

/* Wartet-auf-Freigabe: goldener Streifen (CD: Gold = Statusakzent) */
.pending-item {
    border-left: 4px solid var(--gold);
}

/* --- User Status Badges --- */
.user-status-pending {
    background: var(--gold-pale);
    color: var(--gold-text);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
}

.user-status-approved {
    background: var(--accent-pale);
    color: var(--primary);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
}

.user-status-blocked {
    background: var(--danger-pale);
    color: var(--danger-text);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
}

.user-avatar {
    font-size: 1.5rem;
    background: var(--accent-pale) !important;
}

/* --- E-Mail Preview --- */
.email-preview {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin: 1.5rem 0;
    text-align: left;
    overflow: hidden;
}

.email-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--primary);
    color: #fff;
    font-size: 0.85rem;
}

.email-preview-header .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.8rem;
}

/* --- Entdecken: Stöber-Kacheln (Kategorien / Bundesländer) --- */
.entdecken-gruppe {
    margin-bottom: 2.5rem;
}

.entdecken-gruppe-titel {
    font-size: 1.15rem;
    color: var(--primary);
    margin: 0 0 1rem;
}

.kachel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--sp-2);
}

.kachel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.kachel:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
}

.kachel-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kachel-anzahl {
    flex-shrink: 0;
    background: var(--primary);
    color: #fff;
    border-radius: var(--radius-pill);
    padding: 0.1rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 700;
}

/* Hervorgehobene Filter-Kacheln (Deutschlandticket, Barrierefrei) oben in der Entdecken-Übersicht */
.kachel-ticket {
    border: 2px solid var(--primary);
    font-size: 1.05rem;
}

.kachel-ticket .kachel-name {
    white-space: normal;
    /* langer Text darf auf dem Handy umbrechen */
}

/* --- Tagesausflug-Planer (ausflug.html) --- */
/* Auswahl-Liste: anklickbare Zeilen mit Häkchen, Mini-Bild und Titel */
.ausflug-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    background: var(--surface);
    cursor: pointer;
    transition: border-color var(--transition);
}

.ausflug-item:hover {
    border-color: var(--primary);
}

.ausflug-item input {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--primary);
    flex-shrink: 0;
}

.ausflug-item img,
.ausflug-item-platzhalter {
    width: 56px;
    height: 42px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    font-size: 1.2rem;
}

/* Ohne Koordinaten: ausgegraut und nicht anklickbar */
.ausflug-item.ohne-koordinaten {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Stopp-Liste unter der Karte (nummeriert) */
.ausflug-stopps {
    margin: 1rem 0;
    padding-left: 1.4rem;
}

.ausflug-stopps li {
    margin-bottom: 0.5rem;
}

/* Nummerierte Kreis-Marker auf der Routen-Karte (1, 2, 3 … / "S" = Start) */
.route-marker-kreis {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #174A38;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Teilen-Zeile unter den Sammlungs-Chips (Merkliste): Status + Knöpfe */
.sammlung-teilen {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.9rem;
    margin-bottom: 1rem;
}

/* --- Merkliste: Sammlungen ("Ordner") --- */
.sammlungen-leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.sammlung-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.sammlung-chip:hover {
    border-color: var(--primary);
}

.sammlung-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.chip-anzahl {
    font-size: 0.78rem;
    opacity: 0.85;
}

/* ✏️/🗑️ direkt im aktiven Chip */
.chip-aktion {
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    padding: 0 0.1rem;
    opacity: 0.85;
    transition: transform var(--transition), opacity var(--transition);
}

.chip-aktion:hover {
    opacity: 1;
    transform: scale(1.15);
}

/* Karte (App.createCard) – füllt die Zeilenhöhe, damit alle Karten gleich hoch sind */
.fav-item {
    position: relative;
    display: flex;
    flex-direction: column;
}

.fav-item > .card-link {
    flex: 1;
    width: 100%;
}

.fav-item .card {
    flex: 1;
}

/* Kleiner runder Knopf oben rechts auf dem Kartenbild */
.fav-sammlung-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 5;
    width: 2.2rem;
    height: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}

.fav-sammlung-btn:hover {
    background: rgba(0, 0, 0, 0.75);
    transform: scale(1.08);
}

.fav-sammlung-pop {
    position: absolute;
    z-index: 30;
    top: 3.2rem;
    right: 0.75rem;
    min-width: 220px;
    max-width: 280px;
    max-height: 260px;
    overflow-y: auto;
    padding: 0.6rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
}

.fav-pop-zeile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.2rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.fav-pop-zeile input {
    width: auto;
    margin: 0;
}

.fav-pop-neu {
    display: block;
    width: 100%;
    margin-top: 0.4rem;
    padding: 0.4rem;
    background: none;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
}

.fav-pop-neu:hover {
    border-color: var(--primary);
}

.email-preview-body {
    padding: 1.25rem;
    font-size: 0.9rem;
    line-height: 1.7;
}

.email-preview-body p {
    margin-bottom: 0.5rem;
}

/* --- Benachrichtigungen --- */
.notif-badge {
    background: var(--danger);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius-pill);
    margin-left: 0.3rem;
    vertical-align: top;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
    background: var(--surface);
    transition: background 0.2s;
}

.notif-item.notif-unread {
    background: var(--accent-pale);
    border-left: 3px solid var(--accent);
}

.notif-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.notif-body {
    flex: 1;
    min-width: 0;
}

.notif-title {
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
}

.notif-reason {
    background: var(--danger-pale);
    border-left: 3px solid var(--danger);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.88rem;
    color: var(--text);
    margin-bottom: 0.35rem;
}

.notif-date {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.notif-delete {
    flex-shrink: 0;
    align-self: center;
}

/* --- Meine Beiträge --- */
.my-post-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
    background: var(--surface);
}

.my-post-item.my-post-rejected {
    border-left: 3px solid var(--danger);
    background: var(--danger-pale);
}

.my-post-item.my-post-pending {
    border-left: 3px solid var(--gold);
    background: var(--gold-pale);
}

.my-post-item.my-post-approved {
    border-left: 3px solid var(--accent);
}

.my-post-thumb {
    width: 70px;
    height: 70px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    font-size: 1.5rem;
}

.my-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.my-post-info {
    flex: 1;
    min-width: 0;
}

.my-post-info h3 {
    font-size: 1rem;
    margin-bottom: 0.2rem;
    color: var(--text);
}

.my-post-info p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

.my-post-status {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-pill);
}

.my-post-status.my-post-rejected {
    background: var(--danger-pale);
    color: var(--danger-text);
}

.my-post-status.my-post-pending {
    background: var(--gold-pale);
    color: var(--gold-text);
}

.my-post-status.my-post-approved {
    background: var(--accent-pale);
    color: var(--primary);
}

/* --- Preview Modal --- */
.modal-lg {
    max-width: 700px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.preview-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--accent-pale);
}

.preview-modal-header h2 {
    margin: 0;
    font-size: 1.3rem;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.75rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 0.25rem;
    line-height: 1;
    border-radius: 50%;
    transition: all var(--transition);
}

.modal-close:hover {
    color: var(--text);
    background: var(--bg);
}

#preview-content {
    overflow-y: auto;
    flex: 1;
    padding-right: 0.5rem;
}

.preview-meta-bar {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    background: var(--bg);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1.25rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.preview-status-badge {
    background: var(--gold-pale);
    color: var(--gold-text);
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: auto;
}

.preview-field {
    margin-bottom: 1rem;
}

.preview-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}

.preview-value {
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.7;
}

.preview-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
}

.preview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.preview-gallery {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.preview-gallery-img {
    width: 120px;
    height: 90px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
}

.preview-gallery-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Bild + Startseiten-Schalter als kleine Spalte in der Galerie */
.preview-bild {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 120px;
}

.startbild-toggle {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition);
}

.startbild-toggle:hover {
    border-color: var(--accent);
}

.startbild-toggle.aktiv {
    background: var(--accent-pale);
    border-color: var(--accent);
    color: var(--primary);
}

/* Block mit der vorgeschlagenen Änderung im Vorschau-Modal */
.preview-aenderung {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--gold-pale);
    border: 1px solid rgba(242, 181, 68, 0.5);
    border-radius: var(--radius-sm);
}

@media (max-width: 768px) {
    .modal-lg {
        max-width: 95%;
        max-height: 85vh;
    }

    .preview-grid {
        grid-template-columns: 1fr;
    }

    .preview-gallery-img {
        width: 80px;
        height: 60px;
    }

    .preview-meta-bar {
        flex-direction: column;
        gap: 0.3rem;
    }

    .preview-status-badge {
        margin-left: 0;
    }
}

@media (max-width: 768px) {

    .auth-container,
    .auth-logged-in {
        padding: 0 1rem;
    }

    .captcha-box {
        flex-direction: column;
        text-align: center;
    }

    .user-info-bar {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
}