/* ==========================================================================
   Author:      bertram.fritz@ethik.com
   Created:     2026-08-14
   Updated:     2026-08-16
   Version:     1.13
   Description: Basis-Stylesheet der Hochzeitswebsite. Mobile-First (die
                meisten Gäste kommen vom Handy). Ein File für Public-Seite +
                Admin-Bereich (kein Build-Step nötig). Schriften selbst gehostet
                (keine Google-Fonts-CDN-Anfrage - passt zur CSP & zum
                "selbst gehostet"-Gedanken des Projekts). Seit Version 1.4:
                Anker-Navigation der Einzelseiten-Startseite (Smooth-Scroll,
                scroll-margin-top gegen die sticky Nav - siehe section[id] weiter
                unten und app.js initNavHeight()). Seit Version 1.5: Optik an die
                loveplanr-Referenz (sophie-felix.loveplanr.com) angeglichen - Werte
                per Pixel-Sampling aus Nutzer-Screenshots gemessen: Terrakotta
                #a85448 als Hauptakzent (vorher Haselnuss/Dusty-Rose), Schiefergrau
                #6c6c78 als Fliesstext (vorher warmes Braun), Sektionshintergruende
                praktisch weiss statt kräftigem Pastellrosa, dazu Quicksand (rund,
                fett) statt Cormorant (Serif) für Überschriften. Variablennamen
                (z. B. --color-hazelnut) bewusst NICHT umbenannt, um den Diff auf
                die eigentliche Farbänderung zu beschränken - sie stehen jetzt für
                "Hauptakzent" statt wörtlich für Haselnussbraun. Seit Version 1.6:
                Admin-Farb-/Schriftschema-Auswahl (siehe App\Core\DesignSchemes,
                /admin/design, templates/layout.php) - die tatsächlichen Farb-/
                Schriftwerte kommen dann zur Laufzeit per Inline-<style> aus der
                DB (Settings), :root hier bleibt nur der Terracotta/Modern-
                Standardwert (= Fallback, falls das Inline-<style> mal fehlt, z. B.
                in bin/design-preview.php ohne DB). Neu ausserdem: Karten-Auswahl-
                UI (.scheme-picker/.scheme-card) für die Design-Seite sowie die
                draggable Abschnitts-Liste (.block-list) für "Startseite-Blöcke".
                Seit Version 1.7: .form-actions-row (Speichern/Löschen-Buttons
                nebeneinander statt gestapelt, siehe templates/admin/location_edit.php
                + schedule_edit.php). Seit Version 1.8: .gallery-grid (Fotogalerie,
                öffentlicher #fotogalerie-Abschnitt + Moderationswarteschlange unter
                /admin/fotogalerie) sowie .qr-card (Gäste-Zugangskarte mit QR-Code,
                /admin/einstellungen, siehe assets/js/vendor/qrcode.js + admin.js
                initQrCard()). Seit Version 1.9: .faq-list/.faq-item (FAQ als Akkordeon,
                #faq in home/index.php) - nutzt natives <details>/<summary> statt JS,
                eigener Pfeil per ::after statt des Browser-Standard-Markers. Seit
                Version 1.10: .badge--danger (Wartungsmodus-Status in /admin/system)
                sowie .maintenance-banner (persistenter Hinweisbalken im Admin-Bereich,
                solange der Wartungsmodus eingeschaltet ist, siehe App\Core\Maintenance
                + templates/admin/layout.php). Seit Version 1.11: .stat-grid/.stat-tile
                (RSVP-Übersicht /admin/gaeste) sowie fieldset.rsvp-person (öffentlicher
                #rsvp-Abschnitt, siehe Controllers/RsvpController) - dazu
                input[type="number"] in die gemeinsame Input-Selektorliste aufgenommen
                (bisher ungestylt, jetzt erstmals für "Begleitpersonen" verwendet).
                Seit Version 1.12: .hero__attribution (Pflicht-Bildquellenangabe, wenn
                das Hero-Hintergrundbild von Unsplash stammt, siehe App\Core\ImageRef/
                UnsplashClient) sowie .hero { position:relative } dafür.
                Seit Version 1.13: .story-section(s) - beliebig viele Story-Abschnitte
                untereinander (siehe database/migrations/022_create_story_sections.sql,
                Controllers/Admin/ContentController, home/index.php #story), je
                Abschnitt optional ein Bild, das ab 640px automatisch abwechselnd
                links/rechts vom Text erscheint (:nth-child(even), kein manueller
                Schalter - Admin-Wunsch war ausdruecklich "automatisch abwechselnd").
   ========================================================================== */

/* --- Selbst gehostete Schriften -------------------------------------------- */
@font-face {
    font-family: 'Cormorant';
    src: url('/assets/fonts/cormorant-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Cormorant';
    src: url('/assets/fonts/cormorant-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lato';
    src: url('/assets/fonts/lato-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lato';
    src: url('/assets/fonts/lato-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
/* Quicksand ersetzt seit Version 1.5 Cormorant als Ueberschriften-Font (siehe
   --font-heading weiter unten). Cormorant-@font-face/-Dateien bewusst NICHT entfernt
   (kleine Dateien, kein Laufzeit-Kosten solange ungenutzt) - falls spaeter doch wieder
   gebraucht, ist nichts weiter noetig. Nur 600/700 geladen: alle Stellen, die
   --font-heading nutzen, setzen explizit eines der beiden Gewichte (siehe h1/h2-h4,
   .site-nav__brand, .countdown__value, .timeline__time). */
@font-face {
    font-family: 'Quicksand';
    src: url('/assets/fonts/quicksand-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Quicksand';
    src: url('/assets/fonts/quicksand-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
/* Seit 1.6: weitere Ueberschriften-Schriften fuer die Schriftschema-Auswahl unter
   /admin/design (siehe App\Core\DesignSchemes::FONT_SCHEMES) - "Elegant" und
   "Handschrift". "Klassisch" nutzt das oben bereits vorhandene Cormorant,
   "Minimalistisch" die Fliesstext-Schrift Lato - fuer beide sind keine weiteren
   Dateien noetig. */
@font-face {
    font-family: 'Playfair Display';
    src: url('/assets/fonts/playfair-display-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Playfair Display';
    src: url('/assets/fonts/playfair-display-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    /* Nur Schnitt 400 vorhanden (Skriftschriften kommen praktisch nie in mehreren
       Gewichten) - siehe FONT_SCHEMES-Kommentar zu heading_weight_bold/_normal. */
    font-family: 'Sacramento';
    src: url('/assets/fonts/sacramento-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* --- Design Tokens -------------------------------------------------------- */
:root {
    /* Gemessene Referenzwerte (siehe Versionshinweis oben): Terrakotta #a85448 und
       Schiefergrau #6c6c78 landen 1:1 auf --color-hazelnut-dark bzw. --color-text-muted,
       da genau diese beiden Variablen im File bisher schon fuer Ueberschriften- bzw.
       Fliesstext-Farbe zustaendig sind. --color-hazelnut (heller) ist ein daraus
       abgeleiteter Tint fuer Rahmen/Hover-Akzente, kein zweiter Messwert.
       Seit 1.6: das hier ist nur noch der Standard-/Fallback-Wert (Schema "Terracotta").
       Die tatsaechlich aktive Auswahl (App\Core\DesignSchemes, /admin/design) ueberschreibt
       --color-hazelnut(-dark)/--color-rose(-dark)/--color-text-muted/--color-pastel-blush
       sowie --font-heading zur Laufzeit per Inline-<style> in templates/layout.php - siehe
       dort. Nur bin/design-preview.php (keine DB) sieht ausschliesslich diese Fallback-Werte. */
    --color-cream: #fefcfb;
    --color-cream-soft: #fbf6f4;
    --color-hazelnut: #c2877f;
    --color-hazelnut-dark: #a85448;
    --color-rose: #a85448;
    --color-rose-dark: #8a4238;
    --color-pastel-blush: #fbf6f4;
    --color-pastel-sage: #dce5d3;
    --color-pastel-blue: #c9dce6;
    --color-text: #4b4b56;
    --color-text-muted: #6c6c78;
    --color-white: #ffffff;
    --color-border: #e6e2e6;
    --color-danger: #a4423a;
    --color-danger-bg: #f7e3e1;
    --color-success: #4b6b4b;
    --color-success-bg: #e6ede2;

    --font-heading: 'Quicksand', 'Century Gothic', 'Trebuchet MS', sans-serif;
    --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    --radius: 14px;
    --radius-control: 8px;
    --shadow-soft: 0 6px 24px rgba(75, 75, 86, 0.08);
    --container-width: 720px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--color-cream);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 0.5em;
    color: var(--color-hazelnut-dark);
}

h1 { font-size: clamp(2.75rem, 9vw, 5rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1em; }

a { color: var(--color-hazelnut-dark); }
a:hover { color: var(--color-hazelnut); }

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* --- Nav ------------------------------------------------------------------ */
.site-nav {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 20;
}

.site-nav__inner {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0.85rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 0.5rem;
    column-gap: 1rem;
}

.site-nav__brand {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--color-hazelnut-dark);
    text-decoration: none;
}

.site-nav__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.35rem 1rem;
    font-size: 0.92rem;
}

/* "Abmelden" ist technisch kein <a>, sondern ein <button> in einem <form> (siehe
   templates/partials/nav.php) - ohne diese gemeinsame Regel übernimmt es nicht das
   Padding/den Rahmen der <a>-Punkte und sitzt dadurch spürbar schief/uneinheitlich
   in der Zeile. a und button bekommen deshalb bewusst exakt dieselbe Box (Padding,
   transparente Baseline-Border, Schrift) statt getrennter/inline Styles je Element. */
.site-nav__links a,
.site-nav__links button {
    display: inline-block;
    text-decoration: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin: 0;
    padding: 0.35rem 0;
    font: inherit;
    font-weight: 600;
    /* Referenz zeigt Nav-Links durchgehend im Akzentton (nicht erst bei Hover/aktiv) -
       siehe --color-hazelnut-dark oben, gemessen aus dem Nav-Screenshot. */
    color: var(--color-hazelnut-dark);
    cursor: pointer;
    line-height: normal;
}

.site-nav__links a:hover,
.site-nav__links a[aria-current="page"],
.site-nav__links button:hover {
    /* Farbe ist seit 1.5 schon der Ruhezustand (siehe oben) - hier bleibt nur noch
       der Unterstrich als Hover-/Aktiv-Kennzeichen uebrig. */
    border-bottom-color: var(--color-hazelnut);
}

/* Reicht die Breite (Name + alle Menüpunkte) auf einem schmalen Bildschirm nicht für
   eine einzelne Zeile, bricht .site-nav__inner dank flex-wrap in zwei Zeilen um
   (Name oben, Menüpunkte darunter) statt die Menüpunkte einzeln/zerrissen an den
   Rand zu quetschen. Unterhalb von 600px wird dieser umgebrochene Zustand zusätzlich
   zentriert, damit beide Zeilen sauber mittig stehen statt schief auszusehen. */
@media (max-width: 600px) {
    .site-nav__inner {
        justify-content: center;
        text-align: center;
    }

    .site-nav__links {
        width: 100%;
    }
}

/* --- Anker-Navigation (Single-Page) ------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Anker-Ziele (#tagesablauf, #location - siehe templates/home/index.php) duerfen
   nicht hinter der sticky Nav (.site-nav) verschwinden: scroll-margin-top schiebt
   den "Landepunkt" beim Anker-Sprung um die Nav-Hoehe nach unten. --nav-height wird
   per JS aktuell gehalten (siehe app.js initNavHeight()), weil die Nav auf schmalen
   Bildschirmen zweizeilig umbricht (siehe @media oben) und dadurch unterschiedlich
   hoch ist - ein fixer Pixelwert waere fuer eine der beiden Ansichten immer falsch.
   Der Fallback-Wert (70px) greift nur kurz, bevor JS geladen/gelaufen ist. */
section[id] {
    scroll-margin-top: var(--nav-height, 70px);
}

/* Animation-Schalter (/admin/design, "Animation"): templates/layout.php setzt
   data-animations="off" auf <html>, wenn deaktiviert. !important ist hier bewusst,
   weil das u. a. die inline gesetzte Transition der Flash-Meldungen (app.js
   initFlashAutoHide) mit uebersteuern soll - eine normale (nicht-!important) Regel
   wuerde gegen ein inline style="transition:..." verlieren. app.js initScrollTop
   prueft denselben Schalter zusaetzlich in JS, weil sich ein per JS gestartetes
   scrollTo({behavior:"smooth"}) nicht per CSS abschalten laesst. */
html[data-animations="off"] *,
html[data-animations="off"] *::before,
html[data-animations="off"] *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
}

/* --- Hero ------------------------------------------------------------------ */
.hero {
    position: relative;
    text-align: center;
    padding: 4rem 1.25rem 3rem;
    background: linear-gradient(180deg, var(--color-pastel-blush) 0%, var(--color-cream) 65%);
    background-size: cover;
    background-position: center;
}

.hero__attribution {
    position: absolute;
    right: 0.75rem;
    bottom: 0.5rem;
    margin: 0;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.hero__attribution a { color: inherit; text-decoration: underline; }

.hero--has-image {
    background-blend-mode: soft-light;
    color: var(--color-white);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.hero--has-image h1,
.hero--has-image .hero__date { color: var(--color-white); }

.hero__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.hero__date {
    font-size: 1.05rem;
    color: var(--color-hazelnut-dark);
    margin-bottom: 1.75rem;
}

/* --- Countdown -------------------------------------------------------------- */
/* Seit 1.5 bewusst ohne Kartenrahmen (Referenz zeigt nackte Zahlen direkt auf dem
   Sektionshintergrund) - dafuer groesser/fetter, damit die Zahlen trotzdem als
   eigenstaendiger Blickfang wirken. */
.countdown {
    display: flex;
    justify-content: center;
    gap: 2.25rem;
    flex-wrap: wrap;
    margin: 1.5rem 0 0.5rem;
}

.countdown__unit {
    min-width: 4.5rem;
    text-align: center;
}

.countdown__value {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(2.25rem, 6vw, 3.25rem);
    line-height: 1.1;
    color: var(--color-hazelnut-dark);
}

.countdown__label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-top: 0.15rem;
}

/* --- Cards / Sections -------------------------------------------------------- */
.section { padding: 2.5rem 0; }

.card {
    background: var(--color-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}

.card--sage { background: var(--color-pastel-sage); box-shadow: none; }
.card--blue { background: var(--color-pastel-blue); box-shadow: none; }
.card--rose { background: var(--color-pastel-blush); box-shadow: none; }

/* Story-Abschnitte (#story, siehe home/index.php + Admin > "Story & Inhalte"): beliebig
   viele Abschnitte untereinander, mobil einspaltig gestapelt (Bild oben, Text darunter).
   Ab 640px zweispaltig nebeneinander - die Bildseite wechselt automatisch pro Abschnitt
   (ungerade = Bild links, gerade = Bild rechts) per row-reverse auf :nth-child(even),
   kein manueller Links/Rechts-Schalter noetig. Abschnitte ganz ohne Bild (kein
   .story-section__media im Markup) nehmen automatisch die volle Breite ein, da dann nur
   ein einziges Flex-Kind vorhanden ist. */
.story-sections { display: flex; flex-direction: column; gap: 1.25rem; }
.story-section { display: flex; flex-direction: column; gap: 1.25rem; }
.story-section__image { display: block; width: 100%; border-radius: 10px; }

@media (min-width: 640px) {
    .story-section { flex-direction: row; align-items: center; gap: 2rem; }
    .story-section__media,
    .story-section__text { flex: 1 1 50%; min-width: 0; }
    .story-section:nth-child(even) { flex-direction: row-reverse; }
}

/* Echter Zeitstrahl: Uhrzeit-Spalte, dann eine Spalte mit Punkt + durchgehender
   vertikaler Linie (per ::after ueber die volle Listenhoehe gezogen, damit die
   Linie unabhaengig von unterschiedlich hohen Eintraegen sauber durchlaeuft),
   dann der Inhalt. Letzter Punkt bekommt keine Linie mehr nach unten. */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline li {
    display: flex;
    gap: 1.1rem;
    padding-bottom: 1.6rem;
}
.timeline li:last-child { padding-bottom: 0; }
.timeline__time {
    flex: 0 0 4.2rem;
    font-family: var(--font-heading);
    color: var(--color-hazelnut-dark);
    font-weight: 600;
    padding-top: 0.15rem;
}
.timeline__marker {
    position: relative;
    flex: 0 0 auto;
    width: 0.9rem;
    display: flex;
    justify-content: center;
}
.timeline__dot {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: var(--color-hazelnut);
    margin-top: 0.3rem;
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
}
.timeline__marker::after {
    content: "";
    position: absolute;
    top: 1.1rem;
    bottom: -1.6rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: var(--color-border);
}
.timeline li:last-child .timeline__marker::after { display: none; }
.timeline__content { padding-top: 0.05rem; }

/* Ab 640px: Zickzack-Zeitstrahl wie in der Referenz (Eintraege wechseln links/rechts
   einer Mittellinie) statt der einspaltigen Handy-Ansicht oben. Gleiches Markup, nur
   Grid statt Flex: Spalte 1 = links von der Linie, Spalte 2 = Linie/Punkt (fixe Breite,
   uebernimmt die 0.9rem von .timeline__marker oben), Spalte 3 = rechts. Zeit+Inhalt
   wandern je nach ungerade/gerade in Spalte 1 oder 3, Punkt bleibt immer in Spalte 2. */
@media (min-width: 640px) {
    .timeline li {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        column-gap: 1.75rem;
        /* align-items bewusst NICHT auf "start" gesetzt: .timeline__marker (spannt
           beide Reihen) soll per Default-"stretch" die volle, je nach Textlaenge
           unterschiedliche Item-Hoehe ausfuellen - sonst reicht die Verbindungslinie
           (::after unten, bottom:-1.6rem = ueberbrueckt exakt das padding-bottom) nicht
           bis zum naechsten Punkt (mit fixem Versatz waer's nur bei gleich hohen
           Eintraegen zufaellig richtig). */
        gap: 0;
    }

    .timeline__time {
        grid-row: 1;
        padding-top: 0;
    }

    .timeline__marker {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .timeline__content {
        grid-row: 2;
        padding-top: 0;
    }

    .timeline li:nth-child(odd) .timeline__time,
    .timeline li:nth-child(odd) .timeline__content {
        grid-column: 1;
        text-align: right;
    }

    .timeline li:nth-child(even) .timeline__time,
    .timeline li:nth-child(even) .timeline__content {
        grid-column: 3;
        text-align: left;
    }
}

/* Referenz zeigt die Zeitplan-Ueberschrift zentriert (Story/Location bleiben bewusst
   linksbuendig wie bisher - in der Referenz sind die mit einem Bild kombiniert, das
   wir (noch) nicht haben; reines Umfaerben/Zentrieren ohne Bild waere kein sauberer
   Vergleich). */
#tagesablauf > .container > h2 {
    text-align: center;
}

/* --- Forms ------------------------------------------------------------------ */
label { display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.92rem; }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="date"], input[type="datetime-local"], input[type="number"], textarea, select {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-white);
    color: var(--color-text);
    font-family: inherit;
    font-size: 1rem;
    margin-bottom: 1rem;
}

textarea { min-height: 6rem; resize: vertical; }

input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--color-hazelnut);
    outline-offset: 1px;
}

.form-group { margin-bottom: 1rem; }
.form-hint { font-size: 0.82rem; color: var(--color-text-muted); margin-top: -0.6rem; margin-bottom: 1rem; }
.checkbox-row { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }
.checkbox-row input { width: auto; margin: 0; }

.btn {
    display: inline-block;
    background: var(--color-rose);
    color: var(--color-white);
    border: none;
    padding: 0.7rem 1.5rem;
    border-radius: var(--radius-control);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}
.btn:hover { background: var(--color-rose-dark); color: var(--color-white); }
.btn--secondary { background: var(--color-hazelnut); }
.btn--secondary:hover { background: var(--color-hazelnut-dark); }
.btn--ghost { background: transparent; color: var(--color-hazelnut-dark); border: 1px solid var(--color-hazelnut); }
.btn--ghost:hover { background: var(--color-cream-soft); }
.btn--danger { background: var(--color-danger); }
.btn--danger:hover { background: #832f29; }
.btn--small { padding: 0.45rem 1rem; font-size: 0.85rem; border-radius: 6px; }

/* --- Alerts / Flash ----------------------------------------------------------- */
.alert {
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
}
.alert--error { background: var(--color-danger-bg); color: var(--color-danger); }
.alert--success { background: var(--color-success-bg); color: var(--color-success); }

/* --- Footer -------------------------------------------------------------------- */
.site-footer {
    text-align: center;
    padding: 2.5rem 1.25rem 3rem;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

/* --- Nach-oben-Button (schwebend) ------------------------------------------------ */
/* Erscheint erst nach etwas Scrollen (siehe app.js initScrollTop) statt permanent im
   Weg zu sein, v. a. direkt auf der Startseite oben. prefers-reduced-motion wird dort
   ebenfalls beachtet (kein "smooth" scrollTo bei entsprechender Systemeinstellung). */
.scroll-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 15;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    border: 1.5px solid var(--color-hazelnut-dark);
    border-radius: var(--radius-control);
    color: var(--color-hazelnut-dark);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.scroll-top:hover {
    background: var(--color-cream-soft);
}

/* --- Auth (Gäste-/Admin-Login) -------------------------------------------------- */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
}
.auth-card {
    max-width: 380px;
    width: 100%;
    background: var(--color-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 2rem 1.75rem;
    text-align: center;
}

/* --- Admin-Bereich --------------------------------------------------------------- */
.admin-shell { display: flex; min-height: 100vh; flex-direction: column; }

.admin-topbar {
    background: var(--color-hazelnut-dark);
    color: var(--color-white);
    padding: 0.75rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.admin-topbar a { color: var(--color-white); text-decoration: none; }
.admin-topbar__role {
    font-size: 0.75rem;
    background: rgba(255,255,255,0.15);
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    margin-left: 0.5rem;
}

/* Persistenter Hinweis auf allen Admin-Seiten, solange der Wartungsmodus eingeschaltet
   ist (siehe App\Core\Maintenance::isActive(), templates/admin/layout.php) - bewusst
   knallig/rot (--color-danger), damit er nicht übersehen wird und niemand vergisst,
   die Website wieder freizuschalten. */
.maintenance-banner {
    background: var(--color-danger);
    color: var(--color-white);
    text-align: center;
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
}
.maintenance-banner a { color: var(--color-white); text-decoration: underline; }

.admin-body { display: flex; flex: 1; flex-direction: column; }

.admin-nav {
    background: var(--color-cream-soft);
    border-bottom: 1px solid var(--color-border);
    padding: 0.6rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    font-size: 0.9rem;
}
.admin-nav a { text-decoration: none; color: var(--color-text); }
.admin-nav a[aria-current="page"] { color: var(--color-hazelnut-dark); font-weight: 700; }

.admin-main { padding: 1.5rem 1.25rem 3rem; max-width: 960px; margin: 0 auto; width: 100%; }

.admin-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.admin-table th, .admin-table td {
    text-align: left;
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}
.admin-table th { color: var(--color-text-muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; }

.badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.badge--full { background: var(--color-pastel-blue); color: var(--color-hazelnut-dark); }
.badge--restricted { background: var(--color-pastel-sage); color: #3a4d3a; }
.badge--muted { background: var(--color-cream-soft); color: var(--color-text-muted); }
.badge--active { background: var(--color-success-bg); color: var(--color-success); }
.badge--inactive { background: var(--color-cream-soft); color: var(--color-text-muted); }
.badge--danger { background: var(--color-danger-bg); color: var(--color-danger); }
/* Aktiviert/Deaktiviert-Badge in der Abschnitts-Liste (.block-list) ist klickbar
   (siehe admin.js) - <button>, aber visuell wie .badge, deshalb Rahmen/Hintergrund
   zuruecksetzen statt einen zweiten Klassensatz zu pflegen. */
button.badge { border: none; cursor: pointer; font: inherit; font-weight: 600; flex-shrink: 0; }

.inline-form { display: inline; }

/* Speichern/Löschen nebeneinander statt gestapelt: zwei getrennte <form>-Elemente je
   Eintrag (siehe templates/admin/location_edit.php + schedule_edit.php) - der
   Speichern-Button referenziert sein Formular über das HTML5-Attribut form="...",
   steht im Markup aber neben dem Löschen-Button, damit beide hier als eine
   gemeinsame Flex-Reihe layoutbar sind, ohne das grosse Speichern-Formular selbst
   in eine Flex-Zeile zu zwingen. */
.form-actions-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* Statistik-Kacheln (z. B. RSVP-Übersicht /admin/gaeste) - optisch an .countdown
   angelehnt, aber kompakter/enger, da hier mehrere Kacheln nebeneinander in einer
   Admin-Karte stehen statt einzeln auf der ganzen öffentlichen Seite. */
.stat-grid {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.stat-tile { min-width: 4rem; }
.stat-tile__value {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 1.1;
    color: var(--color-hazelnut-dark);
}
.stat-tile__label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-top: 0.15rem;
}

/* --- Schema-Auswahlkarten (Farbe/Schrift, /admin/design) ------------------------ */
.scheme-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 1.5rem;
}

.scheme-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 0.75rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-control);
    background: var(--color-white);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.scheme-card:hover { border-color: var(--color-hazelnut); }
/* :has() ist seit 2023/24 in allen gaengigen Browsern verfuegbar (Chrome/Edge/Safari/
   Firefox) - fuer eine reine Admin-Seite (nicht die oeffentliche Gaeste-Seite) bewusst
   ohne JS-Fallback verwendet, das Formular funktioniert aber auch ohne die Hervorhebung
   (das <input type="radio"> bleibt ein normales, semantisches Formularfeld). */
.scheme-card:has(input:checked) {
    border-color: var(--color-hazelnut-dark);
    background: var(--color-cream-soft);
}
.scheme-card input[type="radio"] {
    position: absolute;
    /* bewusst nicht display:none - bleibt fuer Screenreader/Tastatur-Fokus ansteuerbar */
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}
.scheme-card:focus-within {
    outline: 2px solid var(--color-hazelnut);
    outline-offset: 2px;
}

.scheme-card__swatches {
    display: flex;
    gap: 0.3rem;
}
.scheme-card__swatch {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.08);
    flex: 0 0 auto;
}

.scheme-card__preview {
    font-size: 1.6rem;
    line-height: 1;
    color: var(--color-hazelnut-dark);
}

.scheme-card__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
}

/* --- Draggable Abschnitts-Liste (Startseite-Blöcke, /admin/einstellungen) -------- */
.block-list {
    list-style: none;
    margin: 1rem 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    overflow: hidden;
}
.block-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.85rem;
    padding: 0.65rem 0.9rem;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    cursor: grab;
}
.block-list__item:last-child { border-bottom: none; }
.block-list__item.is-dragging { opacity: 0.4; }
/* Zeigt die Einfuegeposition beim Drueberziehen an (siehe admin.js) - oben ODER
   unten am jeweils naechsten Element, je nachdem auf welcher Haelfte man sich
   gerade befindet. */
.block-list__item.is-dragover-before { box-shadow: inset 0 2px 0 var(--color-hazelnut-dark); }
.block-list__item.is-dragover-after { box-shadow: inset 0 -2px 0 var(--color-hazelnut-dark); }

.block-list__handle {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-size: 1.1rem;
    line-height: 1;
    /* Nur optische Kennzeichnung "hier ziehen" - das ganze .block-list__item ist
       draggable, nicht nur dieser Griff (einfacher auf Touch-Geraeten zu treffen). */
    user-select: none;
}

/* min-width:0 + der flex-wrap oben an .block-list__item sind hier das eigentlich
   Wichtige: Flex-Kinder duerfen ohne min-width:0 nicht unter ihre Inhalts-Mindestbreite
   schrumpfen (CSS-Spec-Verhalten) - bei einem langen Label wie "Location & Anreise" auf
   schmalen Bildschirmen wuerde das sonst die ganze Zeile (inkl. Aktiviert-Badge und
   Auf/Ab-Buttons) ueber den Kartenrand hinaus schieben, wo .block-list { overflow:hidden }
   es dann sichtbar (und ohne Ellipsis-Hinweis) abschneidet. white-space/text-overflow
   sorgen zusaetzlich dafuer, dass ein IMMER NOCH zu langes Label sauber mit "..." endet
   statt hart abgeschnitten zu werden - .block-list__actions (siehe unten) wandert dank
   flex-wrap vorher schon in eine eigene Zeile, wodurch dem Label auf schmalen Bildschirmen
   die volle Zeilenbreite bleibt und das in der Praxis kaum noch vorkommt. */
.block-list__label {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Badge + Auf/Ab-Buttons als gemeinsame Einheit, die bei fehlendem Platz zusammen in
   eine zweite Zeile umbricht (siehe flex-wrap an .block-list__item) - so bleiben
   Griff+Label auf Zeile 1 zusammen, statt dass nur ein einzelner Button "abreisst". */
.block-list__actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 auto;
    margin-left: auto;
}

.block-list__move {
    display: flex;
    gap: 0.2rem;
    flex: 0 0 auto;
}
.block-list__move button {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    width: 1.75rem;
    height: 1.75rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}
.block-list__move button:hover { border-color: var(--color-hazelnut); color: var(--color-hazelnut-dark); }
.block-list__move button:disabled { opacity: 0.3; cursor: not-allowed; }

/* --- Fotogalerie (Gäste-Upload, öffentlicher #fotogalerie-Abschnitt +
   /admin/fotogalerie) --------------------------------------------------------------- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.6rem;
    margin: 1.25rem 0;
}
.gallery-grid__item {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-control);
    overflow: hidden;
    background: var(--color-cream-soft);
}
.gallery-grid__item img,
.gallery-grid__item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Admin-Ansicht (Moderationswarteschlange, /admin/fotogalerie): Bild/Video +
   Metadaten + Freigeben/Ablehnen/Löschen zusammen als Karte statt reines
   Bildraster - braucht deutlich mehr Platz je Eintrag als die öffentliche Galerie. */
.gallery-grid--admin {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.gallery-grid--admin .gallery-grid__item {
    aspect-ratio: auto;
    background: var(--color-white);
    box-shadow: var(--shadow-soft);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.gallery-grid--admin .gallery-grid__item img,
.gallery-grid--admin .gallery-grid__item video {
    aspect-ratio: 4 / 3;
    border-radius: 8px;
}
.gallery-grid__meta {
    margin: 0;
    font-size: 0.85rem;
}

/* --- QR-/Zugangskarte (Gäste-Passwort, /admin/einstellungen) ---------------------- */
.qr-card {
    margin-top: 1rem;
    padding: 1.25rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-control);
    text-align: center;
    max-width: 280px;
}
.qr-card__code {
    display: flex;
    justify-content: center;
    margin-bottom: 0.75rem;
}
.qr-card__code svg {
    width: 180px;
    height: 180px;
}
.qr-card__url {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    word-break: break-all;
    margin: 0 0 0.4rem;
}
.qr-card__password-label {
    font-size: 1rem;
    margin: 0;
}

/* --- FAQ-Akkordeon (öffentlicher #faq-Abschnitt) ---------------------------------- */
/* Nutzt natives <details>/<summary> statt JS - kostenlos tastatur-/screenreader-
   bedienbar, kein aria-expanded/aria-controls von Hand nötig. Der Browser-eigene
   Dreieck-Marker (list-style bzw. ::-webkit-details-marker je nach Engine) wird
   ausgeblendet, stattdessen ein eigener Pfeil per ::after, der beim Öffnen ([open])
   um 180° dreht - siehe App\Core\Features/parse_faq_pairs() (src/Support/helpers.php)
   für die Frage/Antwort-Zerlegung des FAQ-Freitexts. */
.faq-list {
    margin: 1.25rem 0;
}
.faq-item {
    background: var(--color-white);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-soft);
    margin-bottom: 0.75rem;
    overflow: hidden;
}
.faq-item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-hazelnut-dark);
    cursor: pointer;
    list-style: none;
}
.faq-item__question::-webkit-details-marker {
    display: none;
}
.faq-item__question::after {
    content: "▾";
    flex: 0 0 auto;
    font-size: 1.1rem;
    color: var(--color-hazelnut);
    transition: transform 0.15s ease;
}
.faq-item[open] .faq-item__question::after {
    transform: rotate(180deg);
}
.faq-item__answer {
    padding: 0 1.25rem 1.15rem;
    color: var(--color-text);
}

/* --- RSVP (öffentlicher #rsvp-Abschnitt) -------------------------------------------- */
/* Ein <fieldset> pro Person innerhalb einer Haushalt-Rückmeldung (siehe
   Controllers/RsvpController + #rsvp in templates/home/index.php) - <legend> statt
   eines eigenen Sub-Headings, das ist semantisch korrektes HTML für "diese Felder
   gehören zu dieser Person" und kommt auch Screenreadern zugute. */
fieldset.rsvp-person {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    padding: 0.75rem 1rem 0.25rem;
    margin: 0 0 1.25rem;
}
fieldset.rsvp-person legend {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-hazelnut-dark);
    padding: 0 0.4rem;
}
fieldset.rsvp-person .checkbox-row {
    margin-bottom: 1rem;
}

/* --- Responsive ------------------------------------------------------------------- */
@media (min-width: 640px) {
    .container { padding: 0 2rem; }
    .hero { padding: 6rem 1.25rem 4rem; }
    .admin-main { padding: 2rem 2rem 4rem; }
}