/* ==========================================================================
   FeiPla — frontend4 "Goldsiegel" theme
   Warm walnut wood, ivory paper, gold wax seal, sage eucalyptus, linen ribbon.
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. Fonts — self-hosted, /themes/assets/fonts/
   ------------------------------------------------------------------------- */
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/themes/assets/fonts/playfair-display-v30-latin_latin-ext-regular.woff2') format('woff2'),
         url('/themes/assets/fonts/playfair-display-v30-latin_latin-ext-regular.woff') format('woff');
}
@font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/themes/assets/fonts/playfair-display-v30-latin_latin-ext-italic.woff2') format('woff2'),
         url('/themes/assets/fonts/playfair-display-v30-latin_latin-ext-italic.woff') format('woff');
}
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/themes/assets/fonts/playfair-display-v30-latin_latin-ext-800.woff2') format('woff2'),
         url('/themes/assets/fonts/playfair-display-v30-latin_latin-ext-800.woff') format('woff');
}
@font-face {
    font-family: 'Ms Madi';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/themes/assets/fonts/ms-madi-v2-latin-regular.woff2') format('woff2'),
         url('/themes/assets/fonts/ms-madi-v2-latin-regular.woff') format('woff');
}
@font-face {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url('/themes/assets/fonts/mulish-v13-latin-200.woff2') format('woff2'),
         url('/themes/assets/fonts/mulish-v13-latin-200.woff') format('woff');
}
@font-face {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/themes/assets/fonts/mulish-v13-latin-regular.woff2') format('woff2'),
         url('/themes/assets/fonts/mulish-v13-latin-regular.woff') format('woff');
}

/* -------------------------------------------------------------------------
   2. Design tokens
   ------------------------------------------------------------------------- */
:root {
    /* Colors */
    --c-ink: #362b1f;
    --c-ink-soft: #6b5c49;
    --c-walnut-900: #241a11;
    --c-walnut-700: #55402c;
    --c-walnut-500: #7d6045;
    --c-ivory-50: #fffcf6;
    --c-ivory-100: #faf3e6;
    --c-ivory-200: #f3e7d1;
    --c-ivory-300: #ecdcbc;
    --c-gold-700: #a97b3a;
    --c-gold-600: #bb8c42;
    --c-gold-500: #c99a4e;
    --c-gold-400: #dcb46c;
    --c-gold-200: #f2dda0;
    --c-gold-100: #f8ecc9;
    --c-sage-700: #5e6a49;
    --c-sage-500: #83916a;
    --c-sage-300: #aab692;
    --c-linen-400: #cbb995;
    --c-linen-200: #e7dbc0;
    --c-white: #fffdf9;
    --c-danger: #a1483a;

    /* Surfaces */
    --bg-page: var(--c-ivory-100);
    --bg-panel: var(--c-white);
    --bg-walnut: var(--c-walnut-700);

    /* Typography */
    --font-display: 'Playfair Display', 'Times New Roman', serif;
    --font-script: 'Ms Madi', cursive;
    --font-body: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Sizing */
    --container-w: 1180px;
    --container-pad: clamp(1.25rem, 5vw, 3rem);
    --radius-sm: 6px;
    --radius-md: 14px;
    --radius-lg: 28px;
    --radius-pill: 999px;
    --field-h: 3.25rem;   /* gemeinsame Höhe für Textfelder UND Selectize */

    /* Motion */
    --ease-silk: cubic-bezier(.22, .61, .27, 1);
    --ease-soft: cubic-bezier(.16, .84, .44, 1);
    --dur-fast: .35s;
    --dur-med: .7s;
    --dur-slow: 1.2s;

    /* Shadow */
    --shadow-soft: 0 20px 60px -25px rgba(36, 26, 17, .35);
    --shadow-card: 0 10px 30px -12px rgba(36, 26, 17, .25);
}

@media (min-width: 992px) {
    :root { --container-pad: clamp(2rem, 6vw, 4rem); }
}

/* -------------------------------------------------------------------------
   3. Reset & base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}
body {
    margin: 0;
    background: var(--bg-page);
    color: var(--c-ink);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* overflow-wrap + hyphens: lange deutsche Komposita ("Übernachtungs-
   möglichkeiten") sprengen auf schmalen Displays sonst den Sichtbereich. */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    margin: 0 0 .5em;
    color: var(--c-walnut-900);
    line-height: 1.15;
    overflow-wrap: break-word;
    hyphens: auto;
}
p { margin: 0 0 1em; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 1rem; }
.container { width: 100%; max-width: var(--container-w); margin: 0 auto; padding: 0 var(--container-pad); }

/* body lock while loader / modal active */
body.is-locked { overflow: hidden; height: 100vh; }

/* =========================================================================
   3b. Bootstrap-Komponenten — bewusst schlank nachgebaut
   -------------------------------------------------------------------------
   Das Theme lädt bootstrap.bundle.min.js (Modal/Collapse/Accordion-Verhalten),
   aber NICHT Bootstraps CSS. Ohne die Basisregeln hier rendern Modals inline
   und Collapses lassen sich nicht schließen. Umfang = exakt die Klassen, die
   im Markup der Views tatsächlich vorkommen.

   Steht bewusst FRÜH in der Datei: alle Theme-Regeln weiter unten (und die
   spezifischeren .feipla-nav-Regeln) überschreiben diese Defaults sauber.
   ========================================================================= */

/* --- fade ------------------------------------------------------------- */
.fade { transition: opacity .15s linear; }
.fade:not(.show) { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .fade { transition: none; } }

/* --- collapse --------------------------------------------------------- */
/* .feipla-nav .collapse.navbar-collapse (Spezifität 0,3,0) und die
   !important-Desktopregel gewinnen hierüber — Navigation bleibt unberührt. */
.collapse:not(.show) { display: none; }
.collapsing {
    height: 0;
    overflow: hidden;
    transition: height .35s var(--ease-silk);
}
@media (prefers-reduced-motion: reduce) { .collapsing { transition: none; } }

/* --- modal ------------------------------------------------------------ */
.modal {
    position: fixed;
    top: 0; left: 0;
    z-index: 1055;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}
.modal-dialog {
    position: relative;
    width: auto;
    margin: .75rem;
    pointer-events: none;
}
.modal.fade .modal-dialog {
    transform: translateY(-40px);
    transition: transform .3s var(--ease-silk);
}
.modal.show .modal-dialog { transform: none; }
@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog { transition: none; transform: none; }
}
.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background: var(--bg-panel);
    background-clip: padding-box;
    outline: 0;
}
.modal-header, .modal-footer { display: flex; flex-shrink: 0; align-items: center; padding: 1.1rem 1.4rem; }
.modal-header { justify-content: space-between; }
.modal-footer { justify-content: flex-end; flex-wrap: wrap; gap: .6rem; }
.modal-body { position: relative; flex: 1 1 auto; padding: 1.4rem; }
/* inset statt 100vw/100vh: 100vw schließt die Scrollbar ein und erzeugt
   dadurch waagerechten Überhang. */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: var(--c-walnut-900);
}
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.show { opacity: .6; }
body.modal-open { overflow: hidden; }
@media (min-width: 576px) {
    .modal-dialog { max-width: 520px; margin: 1.75rem auto; }
}

/* Schließen-Kreuz (Bootstrap liefert nur das Markup, nicht das Icon) */
.btn-close {
    box-sizing: content-box;
    font-size: 1rem;      /* Buttons erben keine Body-Größe — explizit setzen */
    line-height: 1;
    width: 1em; height: 1em;
    padding: .35em;
    flex-shrink: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2355402c'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    opacity: .6;
    cursor: pointer;
    transition: opacity var(--dur-fast);
}
.btn-close:hover { opacity: 1; }
.btn-close:focus-visible { outline: 2px solid var(--c-gold-500); outline-offset: 2px; opacity: 1; }

/* --- accordion -------------------------------------------------------- */
.accordion-header { margin: 0; }
.accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
}
.accordion-button::after {
    flex-shrink: 0;
    width: 1.1rem; height: 1.1rem;
    content: "";
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a97b3a'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") center/1.1rem auto no-repeat;
    transition: transform .3s var(--ease-silk);
}
.accordion-button:not(.collapsed)::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .accordion-button::after { transition: none; } }

/* --- Display-Utilities (Musik- und Galerie-Modul hängen daran) -------- */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
@media (min-width: 768px) {
    .d-md-none { display: none !important; }
    .d-md-block { display: block !important; }
}
@media (min-width: 992px) {
    .d-lg-block { display: block !important; }
}

/* --- Rest-Utilities aus dem Modul-Markup ------------------------------ */
.p-1 { padding: .25rem; }
.p-2 { padding: .5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.pt-2 { padding-top: .5rem; }
.pt-4 { padding-top: 1.5rem; }
.pt-5 { padding-top: 3rem; }
.m-4 { margin: 1.5rem; }
.float-end { float: right; }
.img-fluid { max-width: 100%; height: auto; }
.img-thumbnail { max-width: 100%; height: auto; }
.fs-5 { font-size: 1.15rem; }
.table { width: 100%; border-collapse: collapse; }
.alert { padding: 1rem 1.2rem; border-radius: var(--radius-md); margin-bottom: 1rem; }
.alert-warning { background: var(--c-gold-100); color: var(--c-walnut-900); border: 1px solid var(--c-gold-200); }
@media (min-width: 992px) {
    .pt-lg-4 { padding-top: 1.5rem; }
}
@media (min-width: 576px) {
    .text-sm-center { text-align: center; }
    .align-content-sm-center { align-content: center; }
}

/* -------------------------------------------------------------------------
   4. Typography helpers
   ------------------------------------------------------------------------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 400;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--c-gold-700);
}
.eyebrow::before, .eyebrow::after {
    content: "";
    width: 26px;
    height: 1px;
    background: var(--c-gold-500);
    opacity: .8;
}
.script {
    font-family: var(--font-script);
    font-weight: 400;
    color: var(--c-gold-700);
    line-height: 1;
}
.section-title {
    /* Untergrenze bewusst niedrig: Überschriften wie "Übernachtungs-
       möglichkeiten" müssen auf 320 px Breite noch hineinpassen. */
    font-size: clamp(1.6rem, 6vw, 3rem);
    margin-bottom: .3em;
}
.section-lede {
    max-width: 46ch;
    margin: 0 auto 1.4em;
    color: var(--c-ink-soft);
    font-size: 1.05rem;
}
.text-center { text-align: center; }

/* Ornamental divider (replaces frontend1's per-style trenner images) */
.divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    margin: 1.4rem auto 2.2rem;
    width: min(220px, 60%);
    color: var(--c-gold-500);
}
.divider::before, .divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, currentColor);
}
.divider::after { background: linear-gradient(90deg, currentColor, transparent); }
.divider svg { width: 22px; height: 22px; flex-shrink: 0; }

.section-head { text-align: center; max-width: 640px; margin: 0 auto; }

/* -------------------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------------------- */
.btn-feipla {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    padding: .95em 2.2em;
    border-radius: var(--radius-pill);
    border: 1px solid var(--c-gold-500);
    background: var(--c-walnut-700);
    color: var(--c-ivory-100) !important;
    font-family: var(--font-body);
    font-size: .92rem;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: background var(--dur-fast) var(--ease-silk), transform var(--dur-fast) var(--ease-silk), box-shadow var(--dur-fast) var(--ease-silk);
    box-shadow: var(--shadow-card);
}
.btn-feipla:hover { background: var(--c-walnut-900); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn-feipla:active { transform: translateY(0); }
.btn-feipla:disabled, .btn-feipla.disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-feipla-outline {
    background: transparent;
    border: 1px solid var(--c-walnut-500);
    color: var(--c-walnut-700) !important;
    box-shadow: none;
}
.btn-feipla-outline:hover { background: var(--c-walnut-700); color: var(--c-ivory-100) !important; }
.btn-feipla-ghost {
    background: transparent;
    border: none;
    color: var(--c-walnut-700) !important;
    box-shadow: none;
    text-decoration: underline;
    text-underline-offset: 4px;
    padding: .4em .2em;
}
.btn-feipla-sm { padding: .65em 1.4em; font-size: .8rem; }

/* Bootstrap primary-button aliasing so untouched module JS/markup keeps working
   without importing Bootstrap's default blue theme */
.btn.btn-primary,
.btn.btn-success,
.btn-primary.hauptbtn1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    padding: .85em 2em;
    border-radius: var(--radius-pill);
    border: 1px solid var(--c-gold-500) !important;
    background: var(--c-walnut-700) !important;
    color: var(--c-ivory-100) !important;
    font-size: .88rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    box-shadow: var(--shadow-card);
    transition: background var(--dur-fast), transform var(--dur-fast);
}
.btn.btn-primary:hover, .btn.btn-success:hover { background: var(--c-walnut-900) !important; transform: translateY(-2px); }
.btn.btn-light { background: var(--c-ivory-200) !important; color: var(--c-ink) !important; border: 1px solid var(--c-ivory-300) !important; border-radius: var(--radius-pill); }
.btn.btn-secondary { background: var(--c-ink-soft) !important; border-radius: var(--radius-pill); }

/* -------------------------------------------------------------------------
   6. Forms
   ------------------------------------------------------------------------- */
/* Alle Eingabefelder teilen sich --field-h. Ohne das sind Textfelder (Vor- &
   Nachname) deutlich höher als die Selectize-Felder (Getränke, Menü). */
.form-control {
    width: 100%;
    min-height: var(--field-h);
    padding: .7em 1.1em;
    line-height: 1.5;
    border: 1px solid var(--c-ivory-300);
    border-radius: var(--radius-sm);
    background: var(--c-white);
    color: var(--c-ink);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
textarea.form-control { line-height: 1.6; }
.form-control:focus {
    outline: none;
    border-color: var(--c-gold-500);
    box-shadow: 0 0 0 3px rgba(201, 154, 78, .18);
}
label, .form-check-label, .col-form-label { color: var(--c-ink-soft); font-size: .93rem; }
.form-group { margin-bottom: .9rem; }
.form-check-input { accent-color: var(--c-gold-600); width: 1.1em; height: 1.1em; margin-top: .2em; }
.trennstrich {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-ivory-300), transparent);
    margin: 1.6rem 0;
    border: none;
}

/* radios rendered as pill-toggle chips (zusage/absage, Erwachsen/Kind/Kleinkind) */
.form-group.text-lg-center label.p-1 {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .55em 1.3em;
    margin: .25em;
    border: 1px solid var(--c-ivory-300);
    border-radius: var(--radius-pill);
    background: var(--c-white);
    cursor: pointer;
    transition: border-color var(--dur-fast), background var(--dur-fast);
}
.form-group.text-lg-center input[type="radio"] { accent-color: var(--c-gold-600); }
.form-group.text-lg-center label.p-1:has(input:checked) {
    border-color: var(--c-gold-500);
    background: var(--c-gold-100);
}

/* Selectize re-skin (feipla-guestlist.css ships its own look — override to match palette) */
.selectize-control.select-beast, .selectize-control { width: 100%; }
.selectize-control .selectize-input {
    /* Flex + min-height: identische Höhe wie .form-control, Inhalt vertikal
       zentriert — auch im leeren Zustand. */
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: .35em;
    min-height: var(--field-h);
    border: 1px solid var(--c-ivory-300) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--c-white) !important;
    padding: .45em .85em !important;
    box-shadow: none !important;
}
/* Selectize räumt per ::after Floats auf — im Flex-Kontext wäre das nur ein
   zusätzliches, leeres Element mit Abstand. */
.selectize-control.multi .selectize-input::after { display: none !important; }
.selectize-control .selectize-input > input { flex: 1 1 4em; min-width: 4em; }
.selectize-control .selectize-input.focus { border-color: var(--c-gold-500) !important; box-shadow: 0 0 0 3px rgba(201, 154, 78, .18) !important; }
.selectize-control .item {
    background: var(--c-gold-100) !important;
    border: 1px solid var(--c-gold-200) !important;
    color: var(--c-walnut-900) !important;
    border-radius: var(--radius-pill) !important;
    padding: .2em .8em !important;
}
.selectize-dropdown { border-color: var(--c-ivory-300) !important; font-family: var(--font-body); }
.selectize-dropdown .active { background: var(--c-gold-100) !important; color: var(--c-walnut-900) !important; }

/* -------------------------------------------------------------------------
   7. Navigation
   ------------------------------------------------------------------------- */
.feipla-nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 900;
    background: transparent;
    padding: 1.1rem 0;
    transition: background var(--dur-fast) var(--ease-silk), padding var(--dur-fast) var(--ease-silk), box-shadow var(--dur-fast);
}
/* Bewusst OHNE Hintergrund: der beige Balken blendete sich beim Scrollen
   kurz ein und wieder aus. Die Leiste bleibt durchgehend transparent. */
.feipla-nav.is-scrolled {
    background: transparent;
    box-shadow: none;
    padding: .6rem 0;
}
/* Namen entfernt: der Header trägt nur noch die Navigation, mittig zentriert. */
.feipla-nav .navmitte { display: flex; align-items: center; justify-content: center; width: 100%; max-width: var(--container-w); margin: 0 auto; padding: 0 var(--container-pad); }
.feipla-nav .navbar-toggler {
    border: none;
    background: transparent;
    padding: .4rem;
    margin: 0 auto;
}
.feipla-nav .navbar-toggler-icon {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--c-walnut-900);
    position: relative;
}
.feipla-nav .navbar-toggler-icon::before, .feipla-nav .navbar-toggler-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: var(--c-walnut-900);
}
.feipla-nav .navbar-toggler-icon::before { top: -7px; }
.feipla-nav .navbar-toggler-icon::after { top: 7px; }

.feipla-nav .navbar-nav {
    list-style: none;
    display: flex;
    gap: 1.8rem;
    margin: 0;
    padding: 0;
}
.feipla-nav .nav-link {
    font-size: .82rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c-ink-soft);
    padding: .3em 0;
    position: relative;
}
.feipla-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0; right: 100%;
    bottom: -4px;
    height: 1px;
    background: var(--c-gold-600);
    transition: right var(--dur-fast) var(--ease-silk);
}
.feipla-nav .nav-link:hover::after, .feipla-nav .nav-link.active::after { right: 0; }
.feipla-nav .nav-link.active { color: var(--c-walnut-900); }
.feipla-lang-switcher { display: flex; gap: .6rem; margin-left: 1.5rem !important; }
.feipla-lang-switcher .nav-link { font-size: .78rem; }

@media (max-width: 991.98px) {
    /* Der Burger ist eine eigenständige, runde Schaltfläche und klebt per
       position:fixed dauerhaft oben rechts — unabhängig von der Leiste,
       die selbst keinen Platz mehr einnimmt und keine Klicks abfängt. */
    .feipla-nav,
    .feipla-nav.is-scrolled { padding: 0; pointer-events: none; }
    .feipla-nav .navmitte { display: block; padding: 0; }

    .feipla-nav .navbar-toggler {
        pointer-events: auto;
        position: fixed;
        top: .9rem;
        right: .9rem;
        z-index: 950;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        margin: 0;
        padding: 0;
        border: 1px solid rgba(201, 154, 78, .5);
        border-radius: 50%;
        background: rgba(250, 243, 230, .92);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        box-shadow: 0 6px 18px rgba(36, 26, 17, .3);
    }
    .feipla-nav .navbar-toggler-icon,
    .feipla-nav .navbar-toggler-icon::before,
    .feipla-nav .navbar-toggler-icon::after { width: 18px; }

    .feipla-nav .collapse.navbar-collapse { display: none; }
    .feipla-nav .collapse.navbar-collapse.show {
        pointer-events: auto;
        display: block;
        position: fixed;
        top: 4.1rem;                                  /* .9rem + 46px + Luft */
        right: .9rem;
        left: auto;
        z-index: 949;
        width: min(16rem, calc(100% - 1.8rem));
        max-height: calc(100vh - 6rem);
        overflow-y: auto;
        margin: 0;
        padding: 1.1rem 1.3rem;
        background: var(--c-ivory-50);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-soft);
    }
    .feipla-nav .navbar-nav { flex-direction: column; gap: 1rem; }
    .feipla-lang-switcher { margin-left: 0; margin-top: 1rem; }
}
@media (min-width: 992px) {
    /* mittig statt rechtsbündig: kein margin-left:auto mehr */
    .feipla-nav .collapse.navbar-collapse { display: flex !important; align-items: center; justify-content: center; flex: 1; }
    .feipla-nav .navbar-toggler { display: none; }
}

/* -------------------------------------------------------------------------
   8. Loader / monogram reveal
   ------------------------------------------------------------------------- */
.loader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: var(--c-ivory-100);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .9s var(--ease-silk), visibility .9s;
}
.loader::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 40%, rgba(201,154,78,.14), transparent 60%);
}
.loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-inner { position: relative; text-align: center; }
.loader-monogram {
    font-family: var(--font-script);
    font-size: clamp(2.6rem, 10vw, 4.5rem);
    color: var(--c-walnut-900);
    opacity: 0;
    transform: translateY(14px);
    animation: loaderIn 1.1s var(--ease-soft) .15s forwards;
}
.loader-sub {
    margin-top: .6rem;
    font-size: .72rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--c-gold-700);
    opacity: 0;
    animation: loaderIn .9s var(--ease-soft) .5s forwards;
}
.loader-bar {
    margin: 1.6rem auto 0;
    width: 140px;
    height: 1px;
    background: var(--c-ivory-300);
    position: relative;
    overflow: hidden;
}
.loader-bar span {
    position: absolute;
    inset: 0;
    width: 0%;
    background: var(--c-gold-600);
    transition: width .25s linear;
}
@keyframes loaderIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .loader-monogram, .loader-sub { animation: none; opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   9. Envelope scroll-scrub hero
   ------------------------------------------------------------------------- */
.envelope-scene {
    position: relative;
    height: 380vh; /* scroll distance that gets scrubbed into frame progress */
    /* svh = "small viewport height": bleibt konstant, wenn die mobile
       Adressleiste ein-/ausfährt. Sonst ändert sich die Scroll-Distanz
       mitten in der Animation und die Seite springt. */
    height: 380svh;
    background: var(--c-walnut-900);
}
.envelope-scene .envelope-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-walnut-900);
}
.envelope-stage canvas { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Ziel der Animation: das Kundenbild. Wird in den letzten ~18 % des Scrubs
   per JS eingeblendet (inline opacity) — kein Vorschaubild mehr davor. */
.envelope-stage .envelope-outro {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}
.envelope-caption {
    position: absolute;
    left: 0; right: 0;
    bottom: clamp(2rem, 8vh, 5rem);
    text-align: center;
    color: var(--c-ivory-50);
    pointer-events: none;
    opacity: 0;
    transition: opacity .6s ease;
}
.envelope-caption.is-visible { opacity: 1; }
.envelope-caption .script { color: var(--c-gold-200); font-size: clamp(1.6rem, 4vw, 2.4rem); display: block; }
.envelope-caption .hint { margin-top: .6rem; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.envelope-caption .hint::after { content: ""; display: block; width: 1px; height: 26px; background: rgba(255,255,255,.4); margin: .6rem auto 0; animation: hintDrop 1.8s ease-in-out infinite; }
@keyframes hintDrop { 0%,100% { transform: scaleY(.4); opacity: .3; } 50% { transform: scaleY(1); opacity: 1; } }

.envelope-noscript, .envelope-static {
    display: none;
}

/* Ohne Scroll-Animation (reduzierte Bewegung / kein JS) wird die Szene zu zwei
   ruhig gestapelten Bildern: geöffneter Umschlag, darunter das Kundenbild.
   Das Kundenbild bleibt damit unter allen Umständen sichtbar. */
@media (prefers-reduced-motion: reduce) {
    .envelope-scene { height: auto; }
    .envelope-scene .envelope-stage { position: relative; height: auto; display: block; }
    .envelope-stage canvas { display: none; }
    .envelope-static,
    .envelope-stage .envelope-outro {
        display: block;
        position: static;
        width: 100%; height: auto;
        opacity: 1;
        aspect-ratio: 16 / 10;
        object-fit: cover;
    }
    .envelope-caption { position: static; opacity: 1; padding: 2rem 1rem; }
    .envelope-caption .hint { display: none; }
}
.no-js .envelope-scene { height: auto; }
.no-js .envelope-scene .envelope-stage { position: relative; height: auto; display: block; }
.no-js .envelope-stage canvas { display: none; }
.no-js .envelope-static,
.no-js .envelope-stage .envelope-outro {
    display: block;
    position: static;
    width: 100%; height: auto;
    opacity: 1;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}
.no-js .envelope-caption { position: static; opacity: 1; padding: 2rem 1rem; }
.no-js .envelope-caption .hint { display: none; }
.no-js .loader { display: none; }
.no-js body { overflow: visible; height: auto; }

/* -------------------------------------------------------------------------
   10. Welcome / Willkommen
   ------------------------------------------------------------------------- */
#willkommen {
    position: relative;
    padding: clamp(4rem, 10vh, 7rem) 0 clamp(3rem, 8vh, 5rem);
    background: var(--c-ivory-100);
    text-align: center;
    overflow-x: hidden;
    overflow-x: clip;
}
#willkommen .eyebrow { justify-content: center; width: 100%; margin-bottom: 1.2rem; }
#willkommen h1 {
    font-size: clamp(2.6rem, 7vw, 4.6rem);
    color: var(--c-walnut-900);
}
#willkommen .names {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(.6rem, 3vw, 1.4rem);
    flex-wrap: wrap;
}
#willkommen .names .amp { font-family: var(--font-script); color: var(--c-gold-600); font-size: .7em; }
.eventdatum {
    margin-top: 1rem;
    font-size: .95rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--c-ink-soft);
}
.pwbox { background: var(--bg-panel); padding: 2.4rem; margin-top: 3rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.pwbox form input[type="text"] { padding: .8em 1em; border: 1px solid var(--c-ivory-300); border-radius: var(--radius-sm); width: 100%; max-width: 260px; }
.pwbox form input[type="submit"] {
    margin-top: 1rem;
    padding: .8em 2em;
    border: 1px solid var(--c-gold-500);
    background: var(--c-walnut-700);
    color: var(--c-ivory-100);
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .85rem;
}

/* Das Brautpaar-Bild lebt jetzt als .envelope-outro am Ende der Umschlag-
   Sequenz (Abschnitt 9) — hier braucht es keinen eigenen Block mehr. */

/* Vorstellung — die beiden Portraits des Paares (Daten: info->p1Img/p2Img).
   Sie stehen zwischen Überschrift und Namenszeile, die Namenszeile darunter
   dient ihnen als Bildunterschrift. Deshalb hier bewusst keine zweite
   Namensausgabe. Mobile first: nebeneinander ab 0 px, Größe skaliert fluid. */
#vorstellung {
    margin: clamp(1.8rem, 5vw, 2.8rem) auto clamp(1.4rem, 4vw, 2.2rem);
}
.vorstellung-paar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(.7rem, 4vw, 2.2rem);
}
#vorstellung .imagebox { margin: 0; }
#vorstellung .imagepass {
    width: clamp(112px, 32vw, 190px);
    aspect-ratio: 1;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    box-shadow: var(--shadow-card);
    border: 6px solid var(--c-white);
    outline: 1px solid var(--c-ivory-300);
}
#vorstellung .undzeichen {
    font-family: var(--font-script);
    font-size: clamp(2rem, 7vw, 3.2rem);
    line-height: 1;
    color: var(--c-gold-600);
}

/* -------------------------------------------------------------------------
   11. Countdown + gold-dust canvas
   ------------------------------------------------------------------------- */
#countdown {
    position: relative;
    padding: clamp(4rem, 10vh, 7rem) 0;
    background: var(--c-walnut-900);
    color: var(--c-ivory-100);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}
#countdown canvas.countdown-particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
#countdown .container { position: relative; z-index: 1; }
#countdown .eyebrow { justify-content: center; color: var(--c-gold-300); }
#countdown .eyebrow, #countdown .eyebrow::before, #countdown .eyebrow::after { color: var(--c-gold-300); background: var(--c-gold-300); }
#countdown h2 { color: var(--c-ivory-50); }
#countdown .lede { color: rgba(250,243,230,.75); max-width: 44ch; margin: 0 auto 2.4rem; }
.countdown-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, 4vw, 2.6rem); margin-top: 1rem; }
.countdown-cell {
    min-width: 110px;
    padding: 1.6rem 1.2rem;
    border: 1px solid rgba(220, 180, 108, .3);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.03);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.countdown-cell .num {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    color: var(--c-gold-200);
    line-height: 1;
}
.countdown-cell .unit { margin-top: .5rem; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(250,243,230,.65); }
.countdown-finished .ueberschrift1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); color: var(--c-gold-200); }

/* Intro text block */
.intro-text { max-width: 640px; margin: 3rem auto 0; text-align: center; }
.intro-text .divider { color: var(--c-sage-500); }

/* -------------------------------------------------------------------------
   12. Generic section shell + reveal system
   ------------------------------------------------------------------------- */
.section {
    position: relative;
    padding: clamp(4rem, 9vh, 6.5rem) 0;
    /* Schneidet die überstehenden Deko-Zweige ab und verhindert zugleich,
       dass irgendein Inhalt waagerechten Überhang erzeugt.
       "clip" statt "hidden": kein Scroll-Container, damit Selectize-Dropdowns
       und Sticky-Verhalten unangetastet bleiben. Die hidden-Zeile ist der
       Fallback für ältere Browser. */
    overflow-x: hidden;
    overflow-x: clip;
}
.section--panel { background: var(--bg-panel); }
.section--tint { background: var(--c-ivory-200); }
.section--walnut { background: var(--bg-walnut); color: var(--c-ivory-100); }
.section--walnut h2, .section--walnut h3 { color: var(--c-ivory-50); }

/* Die Modifier stehen im Markup teilweise OHNE die Basisklasse .reveal
   (z. B. class="col-lg-6 reveal--left"). Sie müssen deshalb eigenständig
   funktionieren — sonst bleibt der Versatz dauerhaft stehen und schiebt
   Inhalte seitlich aus dem Bild (Trauzeugen, Übernachtung). */
.reveal, .reveal--left, .reveal--right, .reveal--scale {
    opacity: 0;
    transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft);
}
.reveal { transform: translateY(28px); }
.reveal--left { transform: translate(-36px, 0); }
.reveal--right { transform: translate(36px, 0); }
.reveal--scale { transform: scale(.94); }
.reveal.is-visible,
.reveal--left.is-visible,
.reveal--right.is-visible,
.reveal--scale.is-visible { opacity: 1; transform: none; }
.reveal-stagger > * { transition-delay: calc(var(--stagger-i, 0) * 90ms); }

/* Mobil nie seitlich versetzen: der Versatz erzeugt sonst Überhang, der von
   overflow-x abgeschnitten wird. */
@media (max-width: 767.98px) {
    .reveal--left, .reveal--right { transform: translateY(24px); }
}
@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal--left, .reveal--right, .reveal--scale { opacity: 1; transform: none; transition: none; }
}

/* -------------------------------------------------------------------------
   Deko-Akzente: einzelne getrocknete Olivenzweige + Leinenband.
   Bewusst sparsam eingesetzt (5 Platzierungen auf der ganzen Seite), damit
   sie die Umschlag-Sequenz als Signature-Moment nicht verwässern.

   Sie ragen bewusst nur im ANSCHNITT ins Bild: der größere Teil liegt
   außerhalb der Sektion und wird von deren overflow-x abgeschnitten
   (siehe .section / #willkommen). --sprig-bleed ist der Anteil der
   Eigenbreite, der nach außen wandert — mobil mehr (schmalere Kante),
   ab Tablet etwas weniger.
   ------------------------------------------------------------------------- */
.sprig {
    --sprig-bleed: 64%;
    position: absolute;
    height: auto;
    opacity: .42;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
/* Wichtig: ein positioniertes Element mit z-index:0 wird ÜBER nicht
   positioniertem Inhalt gemalt. Der Inhalt bekommt daher eine eigene
   Ebene, damit die Zweige garantiert dahinter bleiben. */
section > .container { position: relative; z-index: 1; }

/* Mobile first: Grundbreiten gelten ab 0 px und wachsen über clamp() mit.
   Sichtbar bleibt jeweils nur (100 % − --sprig-bleed) der Breite. */
.sprig--zweig1 { width: clamp(120px, 15vw, 230px); }
.sprig--zweig2 { width: clamp(110px, 13vw, 200px); }
.sprig--zweig3 { width: clamp(95px, 11vw, 168px); }
.sprig--zweig4 { width: clamp(85px, 10vw, 148px); }
.sprig--band   { width: clamp(170px, 24vw, 380px); opacity: .35; }

/* left/right: 0 = bündig an der Sektionskante. Der Versatz nach außen kommt
   ausschließlich aus `translate` und ist dadurch immer proportional zur
   Eigenbreite — der Anschnitt bleibt auf jeder Displaygröße gleich stark.

   Bewusst die EINZELNEN Transform-Eigenschaften (translate/rotate/scale)
   statt der Kurzform `transform`: die Schwebe-Animation unten fasst nur
   `rotate` an, der Anschnitt-Versatz in `translate` kann ihr also nicht
   abhandenkommen — auch nicht im ersten Frame. */
.sprig--tl { top: 7%;    left: 0;  translate: calc(-1 * var(--sprig-bleed)) 0; rotate: -10deg; }
.sprig--tr { top: 7%;    right: 0; translate: var(--sprig-bleed) 0;            rotate: 14deg;  scale: -1 1; }
.sprig--bl { bottom: 7%; left: 0;  translate: calc(-1 * var(--sprig-bleed)) 0; rotate: 168deg; }
.sprig--br { bottom: 7%; right: 0; translate: var(--sprig-bleed) 0;            rotate: 190deg; }

/* Sanftes Schweben als leichtes Wiegen — Ausgangswinkel je Ecke erhalten,
   damit beim Start nichts springt. */
.sprig--float { animation: sprigSway 9s ease-in-out infinite; }
.sprig--tl.sprig--float { animation-name: sprigSwayTL; }
.sprig--tr.sprig--float { animation-name: sprigSwayTR; }
.sprig--bl.sprig--float { animation-name: sprigSwayBL; }
.sprig--br.sprig--float { animation-name: sprigSwayBR; }
@keyframes sprigSwayTL { 0%,100% { rotate: -10deg; } 50% { rotate: -6deg; } }
@keyframes sprigSwayTR { 0%,100% { rotate: 14deg; }  50% { rotate: 10deg; } }
@keyframes sprigSwayBL { 0%,100% { rotate: 168deg; } 50% { rotate: 172deg; } }
@keyframes sprigSwayBR { 0%,100% { rotate: 190deg; } 50% { rotate: 186deg; } }
@keyframes sprigSway   { 0%,100% { rotate: 0deg; }   50% { rotate: 4deg; } }
@media (prefers-reduced-motion: reduce) { .sprig--float { animation: none; } }

@media (min-width: 768px) {
    .sprig { --sprig-bleed: 56%; opacity: .5; }
    .sprig--band { opacity: .42; }
}

/* -------------------------------------------------------------------------
   13. Guestlist / RSVP
   ------------------------------------------------------------------------- */
#zusage { background: var(--c-ivory-200); position: relative; }
#zusage .rsvp-card {
    background: var(--bg-panel);
    border-radius: var(--radius-lg);
    padding: clamp(1.8rem, 5vw, 3.2rem);
    box-shadow: var(--shadow-soft);
    max-width: 640px;
    margin: 0 auto;
}
#zusage .additional1, #zusage .additional2, #zusage .additional3, #zusage .additional4,
#zusage .additional5, #zusage .additional6, #zusage .additional7, #zusage .additional8 {
    animation: fadeSlide .5s var(--ease-soft);
}
@keyframes fadeSlide { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#zusage .hauptbtn1 { width: 100%; }
#zusage #begleithinzu1, #zusage [id^="begleithinzu"] { width: 100%; }

/* -------------------------------------------------------------------------
   14. Bestman / Trauzeugen
   ------------------------------------------------------------------------- */
#trauzeugen .trauzeugen { align-items: flex-start; }
#trauzeugen .imagebox { text-align: center; }
#trauzeugen .imagepass {
    width: 220px; height: 220px;
    margin: 0 auto 1.2rem;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 6px solid var(--c-ivory-100);
    box-shadow: var(--shadow-card);
}
#trauzeugen .namen { text-align: center; font-family: var(--font-display); font-size: 1.5rem; margin-bottom: .5rem; color: var(--c-walnut-900); }
/* Vorher stand hier ".col > div" — die Spalten heißen aber .col-lg-6, die
   Regel griff nie und der Beschreibungstext blieb linksbündig. */
#trauzeugen .trauzeugen > div > div:last-child {
    text-align: center;
    color: var(--c-ink-soft);
    max-width: 380px;
    margin: 0 auto;
}
/* Mobil steht alles gestapelt und mittig — Bild, Name und Text. */
@media (max-width: 991.98px) {
    #trauzeugen .trauzeugen { justify-content: center; }
    #trauzeugen .trauzeugen > div { text-align: center; }
}

/* -------------------------------------------------------------------------
   15. Places / Anfahrt
   ------------------------------------------------------------------------- */
#anfahrt .object-fit, #anfahrt .iframe-container, #anfahrt .circle2 {
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    box-shadow: var(--shadow-card);
}
#anfahrt .object-fit img { width: 100%; height: 100%; object-fit: cover; }
#anfahrt .namen { font-family: var(--font-display); font-size: clamp(1.15rem, 4.5vw, 1.4rem); color: var(--c-walnut-900); }
#anfahrt a { color: var(--c-gold-700); border-bottom: 1px solid var(--c-gold-400); }
#anfahrt .row.justify-content-md-center { margin-bottom: 2.4rem; }
/* Die Karte kommt mit width="328" als Attribut — ohne diese Regeln steht sie
   auf schmalen Displays über den Rand hinaus. */
#anfahrt .iframe-container { width: 328px; max-width: 100%; margin: 0 auto; }
#anfahrt .iframe-container iframe { width: 100%; max-width: 100%; height: 328px; border: 0; display: block; }
#anfahrt .object-fit { margin: 0 auto; }

/* -------------------------------------------------------------------------
   16. Wishlist / Wunschzettel
   ------------------------------------------------------------------------- */
#wunschliste { background: var(--c-ivory-200); position: relative; }
.wunschzettel {
    background: var(--bg-panel);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: .5rem 0;
}
.wunschzettel .row { padding: .9rem clamp(1rem, 4vw, 2.4rem); border-bottom: 1px dashed var(--c-ivory-300); align-items: center; margin: 0; }
.wunschzettel .row:last-child { border-bottom: none; }
.wunschzettel a { color: var(--c-ink); }
.wunschzettel a:hover { color: var(--c-gold-700); }
.hide-on-small { display: inline; }
@media (max-width: 480px) { .hide-on-small { display: none; } }
.modal-content { border-radius: var(--radius-md); border: none; overflow: hidden; }
.modal-header { border-bottom: 1px solid var(--c-ivory-300); }
.modal-footer { border-top: 1px solid var(--c-ivory-300); }
.modal-title { font-family: var(--font-display); color: var(--c-walnut-900); }

/* -------------------------------------------------------------------------
   17. Agenda / Tagesablauf — compact vertical timeline
   ------------------------------------------------------------------------- */
.agenda-timeline { position: relative; max-width: 640px; margin: 0 auto; padding-left: 2.4rem; }
.agenda-timeline::before {
    content: "";
    position: absolute;
    left: 7px; top: 6px; bottom: 6px;
    width: 1px;
    background: linear-gradient(var(--c-gold-400), var(--c-ivory-300));
}
.agenda-item { position: relative; padding: 0 0 2rem; }
.agenda-item:last-child { padding-bottom: 0; }
.agenda-item::before {
    content: "";
    position: absolute;
    left: -2.4rem; top: 4px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--c-ivory-50);
    border: 2px solid var(--c-gold-500);
}
.agenda-item .time {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--c-gold-700);
    display: block;
    margin-bottom: .25rem;
}
.agenda-item .label { color: var(--c-ink); font-weight: 600; }
.agenda-item .desc { color: var(--c-ink-soft); font-size: .93rem; margin-top: .15rem; }
.agenda-item.is-headline .label { font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; color: var(--c-walnut-900); }

/* -------------------------------------------------------------------------
   18. Accommodations / Übernachtung
   ------------------------------------------------------------------------- */
#hotel .object-fit, #hotel .frame { border-radius: var(--radius-lg) !important; overflow: hidden; box-shadow: var(--shadow-card); }
#hotel .object-fit img { width: 100%; height: 100%; object-fit: cover; }
#hotel .namen { font-family: var(--font-display); font-size: clamp(1.15rem, 4.5vw, 1.4rem); color: var(--c-walnut-900); }
#hotel a { color: var(--c-gold-700); }
/* Karte/Bild: feste Pixelbreiten (330) aus dem Markup auf die verfügbare
   Breite deckeln und mittig setzen — sonst ragt die Karte heraus und wird
   auf der linken Seite abgeschnitten. */
#hotel .frame { width: 330px; max-width: 100%; margin: 0 auto; }
#hotel .frame iframe { width: 100%; max-width: 100%; height: 400px; border: 0; display: block; }
#hotel .object-fit { margin: 0 auto; }
/* Adressen und Links können lange URLs enthalten — umbrechen statt überstehen. */
#hotel .row > div, #anfahrt .row > div { min-width: 0; overflow-wrap: break-word; }

/* Mobil: alles mittig, nichts läuft aus dem Sichtbereich. */
@media (max-width: 991.98px) {
    #hotel .row > div, #anfahrt .row > div { text-align: center; }
    #hotel .row, #anfahrt .row { justify-content: center; }
}

/* -------------------------------------------------------------------------
   19. FAQ accordion
   ------------------------------------------------------------------------- */
/* Ruhige Linien statt Kästen: die Fragen bilden eine gesetzte Liste, der
   goldene Kreis rechts ist der einzige Akzent. */
#faq .accordion { border-top: 1px solid var(--c-ivory-300); }
#faq .accordion-item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--c-ivory-300);
    border-radius: 0;
    margin: 0;
}
#faq .accordion-button {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    line-height: 1.35;
    color: var(--c-walnut-900);
    background: transparent;
    padding: 1.5rem .25rem;
    transition: color var(--dur-fast) var(--ease-silk);
}
#faq .accordion-button:hover { color: var(--c-gold-700); }
#faq .accordion-button:not(.collapsed) { color: var(--c-gold-700); }
#faq .accordion-button:focus-visible {
    outline: 2px solid var(--c-gold-500);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}
/* Chevron im goldenen Kreis */
#faq .accordion-button::after {
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid var(--c-gold-400);
    border-radius: 50%;
    background-size: .95rem auto;
    background-position: center;
    transition: transform .3s var(--ease-silk), background-color var(--dur-fast), border-color var(--dur-fast);
}
#faq .accordion-button:not(.collapsed)::after {
    background-color: var(--c-gold-100);
    border-color: var(--c-gold-500);
}
#faq .accordion-body {
    padding: 0 3rem 1.7rem .25rem;
    color: var(--c-ink-soft);
    max-width: 62ch;
}
@media (prefers-reduced-motion: reduce) {
    #faq .accordion-button, #faq .accordion-button::after { transition: none; }
}

/* -------------------------------------------------------------------------
   20. Music / Musikwünsche
   ------------------------------------------------------------------------- */
#music { background: var(--c-walnut-900); color: var(--c-ivory-100); padding: clamp(4rem, 9vh, 6.5rem) 0; }
#music .eyebrow, #music .eyebrow::before, #music .eyebrow::after { color: var(--c-gold-300); background: var(--c-gold-300); }
#music h2 { color: var(--c-ivory-50); }
#music .section-lede { color: rgba(250,243,230,.7); }
#music .musiktext { text-align: center; margin-bottom: 2rem; }
/* dj.php / djLogin.php keep the original profile-photo markup (unverändert) */
#music .musikprofilbild { display: inline-block; vertical-align: middle; }
#music .musikprofilbild .dia {
    width: 90px; height: 90px; border-radius: 50%;
    background-size: cover; background-position: center;
    border: 4px solid rgba(255,255,255,.15);
    display: inline-block;
}
#music form#songForm {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(220,180,108,.25);
    border-radius: var(--radius-lg);
    padding: 1.6rem;
    max-width: 900px;
    margin: 0 auto 2.6rem;
}
#music form#songForm label { color: rgba(250,243,230,.7); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
#music form#songForm .form-control { background: rgba(255,255,255,.06); border-color: rgba(220,180,108,.3); color: var(--c-ivory-50); }
#music form#songForm .form-control::placeholder { color: rgba(250,243,230,.4); }
#music .musikbtn { width: 100%; height: 100%; margin-top: 1.4rem; }
@media (min-width: 992px) { #music .musikbtn { margin-top: 1.6rem; } }

.musikwunsch.table { width: 100%; max-width: 900px; margin: 0 auto; border-collapse: collapse; color: var(--c-ivory-100); }
.musikwunsch.table th { text-align: left; font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: rgba(250,243,230,.5); padding: .6rem .8rem; font-weight: 400; }
.musikwunsch.table td { padding: .8rem; border-top: 1px solid rgba(220,180,108,.15); vertical-align: middle; }
.musikwunsch.table .interpret, .musikwunsch.table .smalltext { color: rgba(250,243,230,.55); font-size: .85rem; }
.songposition { font-family: var(--font-display); font-size: 1.3rem; color: var(--c-gold-300); }
.symbol-heart, .symbol-copy, .symbol-spotify, .symbol-amz {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,.06); color: var(--c-gold-200); font-size: .8rem;
}
.symbol-heart::before { content: "♥"; }
.symbol-copy::before { content: "⧉"; }
.symbol-spotify::before { content: "♪"; }
.symbol-amz::before { content: "♫"; }
a.like { display: inline-flex; align-items: center; gap: .5em; color: var(--c-gold-200); }
.liketxt { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.songbuttons, .songbuttonsleft { display: flex; gap: .4rem; }
.daumen { color: var(--c-gold-300); float: right;}
.musikueberschrift { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; text-align: center; }

/* DJ ansicht (dj.php, kept functionally unchanged from frontend1) —
   plain action links need a visible affordance against the dark table. */
.djbtns a { color: var(--c-gold-200); text-decoration: underline; text-underline-offset: 3px; margin-right: 1rem; font-size: .85rem; }
.djbtns a.delete { color: #e7a08f; }

/* -------------------------------------------------------------------------
   21. Gallery / Bildergalerie
   ------------------------------------------------------------------------- */
#bilder { background: var(--c-ivory-100); }
.bildhochladen { display: flex; justify-content: center; margin-top: 1rem; }
.showimgdetails { max-width: 420px; margin: 1.4rem auto 0; text-align: center; }
#previewImage { max-width: 260px; border-radius: var(--radius-md); margin: 1rem auto; box-shadow: var(--shadow-card); }
.dschutzinfo { width: 26px; height: 26px; padding: 0; border-radius: 50%; font-size: .75rem; margin-left: .3em; }
.pictures { margin-top: 2.4rem; }
.bilderbox { padding: .5rem; }
.bilderbox .bild {
    border-radius: var(--radius-md);
    aspect-ratio: 1/1;
    object-fit: cover;
    box-shadow: var(--shadow-card);
    transition: transform var(--dur-fast) var(--ease-silk);
    border: none !important;
    padding: 0 !important;
}
.bilderbox a:hover .bild { transform: scale(1.03); }
#uploadStatus { font-size: .85rem; color: var(--c-ink-soft); text-align: center; }

/* -------------------------------------------------------------------------
   22. Footer
   ------------------------------------------------------------------------- */
footer {
    background: var(--c-walnut-900);
    color: rgba(250, 243, 230, .75);
    padding: clamp(3rem, 7vh, 4.5rem) 0 0;
    position: relative;
}
footer a { color: var(--c-gold-200); }
footer a:hover { text-decoration: underline; }
.footer-inhalt { padding-bottom: 2.5rem; border-bottom: 1px solid rgba(220, 180, 108, .18); gap: 2rem 0; }
/* img ist im Reset display:block — ohne auto-Ränder bliebe das Logo trotz
   text-center linksbündig. */
.footer-inhalt img { max-width: 240px; margin: 0 auto .8rem; filter: brightness(0) invert(1) opacity(.85); }
.footer-inhalt .col-lg-2 { list-style: none; padding-left: 12px; padding-right: 12px; margin: 0; }
.footer-inhalt .col-lg-2 li { list-style: none; margin-bottom: .5rem; font-size: .88rem; }
.footer-names {
    text-align: center;
    font-family: var(--font-script);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    color: var(--c-gold-200);
    padding: 2rem 0 .5rem;
}
/* .hintergrund1 ist ein .row — die negativen Ränder von .row und die
   Shrink-to-fit-Breite des Flex-Kindes haben den Abschlusstext vorher aus
   der Mitte gezogen. */
.hintergrund1 { width: 100%; margin: 0; justify-content: center; }
.footer-ende {
    flex: 1 1 100%;
    text-align: center;
    font-size: .78rem;
    letter-spacing: .04em;
    padding: 1.2rem 1rem 2rem;
    color: rgba(250, 243, 230, .55);
}

/* Mobil steht der komplette Footer mittig: Texte, Links und Logos. */
@media (max-width: 991.98px) {
    footer .container { text-align: center; }
    .footer-inhalt { text-align: center; justify-content: center; }
    .footer-inhalt .col-lg-2 { text-align: center; }
}

/* -------------------------------------------------------------------------
   23. Utility
   ------------------------------------------------------------------------- */
.hide { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: var(--c-gold-300); color: var(--c-walnut-900); }

/* Alert override for Yii flash messages */
.alert.alert-success {
    background: var(--c-sage-300);
    color: var(--c-walnut-900);
    border: none;
    border-radius: var(--radius-md);
}

/* Bootstrap grid safety net (theme ships bootstrap.bundle.min.js for JS-only
   behaviour — components below assume a minimal row/col fallback) */
/* Mobile first und in aufsteigender Breakpoint-Reihenfolge notiert.
   Das ist hier keine Kosmetik: vorher stand der 576er-Block NACH dem 992er,
   dadurch gewann `.col-6` (50 %) auf dem Desktop gegen `.col-lg-3` (25 %) —
   die Galerie zeigte deshalb auch am großen Bildschirm nur zwei Bilder
   pro Reihe. Reihenfolge bitte beibehalten. */
.row { display: flex; flex-wrap: wrap; margin-left: -12px; margin-right: -12px; }
.row > * { padding-left: 12px; padding-right: 12px; }
[class^="col"] { width: 100%; }
.px-4 { padding-left: 1.5rem; padding-right: 1.5rem; }
.gx-4 { --bs-gutter-x: 1.5rem; }
.justify-content-center { justify-content: center; }
.align-items-center { align-items: center; }
.text-end { text-align: right; }

/* Spalten ohne Breakpoint-Kürzel gelten ab 0 px (Bootstrap-Verhalten) */
.col-2  { width: 16.6667%; }
.col-3  { width: 25%; }
.col-4  { width: 33.3333%; }
.col-6  { width: 50%; }
.col-8  { width: 66.6667%; }
.col-12 { width: 100%; }

@media (min-width: 576px) {
    .col-sm-5 { width: 41.6667%; }
    .col-sm-7 { width: 58.3333%; }
    .col-sm-12 { width: 100%; }
}
@media (min-width: 768px) {
    /* "-md-" heißt ab 768 px. Vorher galt die Regel ab 0 px und hat auf dem
       Handy überstehende Inhalte nach links aus dem Bild geschoben. */
    .justify-content-md-center { justify-content: center; }
}
@media (min-width: 992px) {
    .col-lg-2 { width: 16.6667%; }
    .col-lg-3 { width: 25%; }
    .col-lg-4 { width: 33.3333%; }
    .col-lg-5 { width: 41.6667%; }
    .col-lg-6 { width: 50%; }
    .col-lg-8 { width: 66.6667%; }
    .col-lg-9 { width: 75%; }
    .col-lg-12 { width: 100%; }
    .text-lg-end { text-align: right; }
    .text-lg-start { text-align: left; }
    .text-lg-center { text-align: center; }
}
@media (min-width: 1200px) {
    .col-xl, .col-xl-3, .col-xl-12 { flex: 1; }
    .col-xl-3 { width: 25%; flex: none; }
    .col-xl-12 { width: 100%; flex: none; }
}

/* -------------------------------------------------------------------------
   24. Responsive base tweaks
   ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .section { padding: 3.2rem 0; }
    .countdown-grid { gap: .8rem; }
    .countdown-cell { min-width: 80px; padding: 1rem .6rem; }
    /* #vorstellung .imagepass skaliert bereits per clamp() — keine feste Größe. */
    #trauzeugen .imagepass { width: 170px; height: 170px; }
}