/* ====== Design-Variablen ====== */
:root {
    --brand: #C3A769; /* Akzent (Gold) */
    --overlay1: rgba(8,10,14,0.33);
    --overlay2: rgba(8,10,14,0.58);
    --card-bg: rgba(12,14,20,0.72);
    --card-border: rgba(255,255,255,0.12);
    --text-on-dark: #fff;
    /* Form-Layout */
    --label-w: 160px; /* Labelspalten-Breite Desktop/Tablet */
    --grid-gap: 14px; /* Abstand Label ↔ Input */
}

/* ====== Basis ====== */
html, body {
    height: 100%;
}

body {
    background: #f8f9fb;
    color: #212529;
}

/* ====== Landing only ====== */
.landing-body {
    background: #0b0d12;
    margin: 0 !important;
    color: var(--text-on-dark);
    height: 100svh;
    overflow: hidden;
    overscroll-behavior: none;
}

.landing {
    position: relative;
    min-height: 100svh;
    height: 100svh;
    width: 100%;
    overflow: hidden;
    background: #0b0d12;
}

.landing__bg {
    position: absolute;
    inset: 0;
    background: center/cover no-repeat;
    /* Stabileres Skalieren bei sehr kleinen Viewports (ohne Verdunkelung) */
    background-position: center center;
    background-size: cover;
    transform: translateZ(0) scale(1.02);
    will-change: transform;
    filter: none;
    /* Fallback */
    background-image: url('/img/hero_mobile_iphone13_even_higher_try.png');
    /* Prefer WebP where supported (keeps PNG as fallback above) */
    background-image: -webkit-image-set( + url('/img/hero_mobile_iphone13_even_higher.webp') 1x, + url('/img/hero_mobile_iphone13_even_higher.png') 1x + );
    background-image: image-set( + url('/img/hero_mobile_iphone13_even_higher.webp') 1x, + url('/img/hero_mobile_iphone13_even_higher.png') 1x + );
}

}


.landing__overlay {
    position: absolute;
    inset: 0;
    /* Keine Verdunkelung über dem Hero-Bild */
    background: transparent;
}

.landing__content {
    position: relative;
    z-index: 2;
    min-height: 100svh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: clamp(16px,4vh,48px);
    padding-bottom: max(clamp(8px,2.5vh,24px), env(safe-area-inset-bottom));
    gap: 12px;
}

/* Mobile: Card etwas kleiner, damit das Hero-Bild sichtbar bleibt */
@media (max-width:575.98px) {
    .landing__content {
        justify-content: flex-end;
        padding: 12px;
        gap: 10px;
    }

    .landing .login-card {
        width: min(380px,92vw);
        margin-bottom: 0;
    }

    .landing .login-card .card-body {
        padding: .9rem 1rem .8rem !important;
    }

    .landing .login-card .form-control-lg {
        font-size: 1rem;
        padding: .55rem .9rem;
    }

    .landing .login-card .btn-primary {
        padding: .6rem 1rem;
    }
}


@media (min-width: 730px) {
    .landing .landing__bg {
        background-image: url('/img/hero.png');
    }
}



/* ====== Typo ====== */
.tagline-hero {
    color: #E8E5DB; /* warmes Elfenbein */
    font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    font-size: clamp(24px,2.7vw,34px);
    font-weight: 600;
    letter-spacing: .3px;
    text-shadow: 0 2px 10px rgba(0,0,0,.45);
    margin: 0 0 10px 0;
    opacity: .97;
}

.only-desktop {
    display: block;
}

.only-mobile {
    display: none;
}

@media (max-width:576px) {
    .only-desktop {
        display: none;
    }

    .only-mobile {
        display: block;
    }
}

/* ====== Card / Controls ====== */
.glass-dark {
    background: rgba(11, 13, 18, 0.32);
    border-color: rgba(255, 255, 255, 0.18);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--text-on-dark);
}

.login-card {
    width: min(420px,92vw);
    margin-bottom: clamp(24px,10svh,96px);
}

    .login-card .card-body {
        padding: 1.1rem 1.2rem .9rem !important;
    }

/* Landing: etwas breiter, damit Username/Passwort + Toggle nicht "zusammengedrückt" wirken */
.landing .login-card {
    width: min(460px, 92vw);
}

/* Mehr Platz für Passwortfeld + Toggle nebeneinander (ohne "schmaleres" Input) */
@media (min-width: 576px) {
    .landing .login-card {
        width: min(540px, 92vw);
    }
}

/* Inputs/Buttons */
.form-label {
    color: var(--text-on-dark);
}

.form-control {
    color: #fff;
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.18);
    border-radius: 12px;
}

    .form-control::placeholder {
        color: rgba(255,255,255,.55);
    }

    .form-control:focus {
        border-color: var(--brand);
        box-shadow: 0 0 0 .2rem rgba(195,167,105,.20);
    }

/* ====== Landing: Passwort anzeigen (Toggle NEBEN dem Feld) ====== */
.landing .pw-field {
    --pw-toggle-size: 46px;
    display: flex;
    align-items: stretch;
    gap: .6rem;
    width: 100%;
}

.landing .pw-field .form-control {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 1rem; /* Standard wiederherstellen */
}

.landing .pw-toggle {
    position: static;
    transform: none;
    flex: 0 0 auto;
    width: var(--pw-toggle-size);
    min-width: var(--pw-toggle-size);
    padding: 0;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.90);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 12px;
    cursor: pointer;
    user-select: none;
}

.landing .pw-toggle:hover {
    color: #fff;
    background: rgba(255,255,255,.10);
    border-color: rgba(195,167,105,.55);
}

/* Username-Spacer: gleiche Breite wie der Toggle (damit Inputs gleich breit wirken) */
.landing .pw-spacer {
    flex: 0 0 auto;
    width: var(--pw-toggle-size);
    min-width: var(--pw-toggle-size);
    pointer-events: none;
    display: block;
}

/* Icon-only Toggle */
.landing .pw-toggle .pw-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    display: block;
}

.landing .pw-toggle .pw-icon-eye-off {
    display: none;
}

.landing .pw-toggle[aria-pressed="true"] .pw-icon-eye {
    display: none;
}

.landing .pw-toggle[aria-pressed="true"] .pw-icon-eye-off {
    display: block;
}

.landing .pw-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(195,167,105,.20);
}

/* Passwort-Toggle Icon (PNG: 96px Source, im UI kompakt darstellen) */
.landing .pw-toggle-icon {
    width: 24px;
    height: 24px;
    display: block;
    object-fit: contain;
}



.form-check-input {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.25);
}

    .form-check-input:checked {
        background-color: var(--brand);
        border-color: var(--brand);
    }

.btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    border-radius: 10px;
}

    .btn-primary:hover {
        filter: brightness(.95);
    }

/* Microcopy in der Card (nur Mobile) */
.card-microcopy {
    margin: 0 0 .75rem 0;
    color: rgba(255,255,255,.88);
    font-size: clamp(14px,1.6vw,16px);
    font-weight: 500;
    letter-spacing: .2px;
    line-height: 1.35;
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* ====== Formular-Layout: Labels LINKS, Inputs daneben ====== */
/* Desktop/Tablet (>=576px): zwei Spalten */
@media (min-width:576px) {
    .form-grid {
        display: grid;
        grid-template-columns: var(--label-w) minmax(0,1fr);
        column-gap: var(--grid-gap);
        align-items: center;
    }

    .field-label {
        justify-self: start;
        text-align: left;
        margin: 0;
        padding-left: 2px;
        color: #eae7df;
        font-weight: 600;
        letter-spacing: .1px;
    }

    .form-grid .form-control {
        width: 100%;
    }
}

/* Mobile (<576px): Label über dem Feld */
@media (max-width:575.98px) {
    .form-grid {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: .35rem;
    }

    .field-label {
        justify-self: start;
        text-align: left;
        margin: 0 0 .25rem 2px;
        padding-left: 0;
        color: #eae7df;
        font-weight: 600;
    }
}

/* ====== Modal (Dark) ====== */
.modal-dark {
    background: rgba(20,22,28,.92);
    color: #fff;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

    .modal-dark .modal-header,
    .modal-dark .modal-footer {
        border-color: rgba(255,255,255,.12);
    }

.btn-close-white {
    filter: invert(1) grayscale(100%);
}

/* Fehlerliste im Modal: rot + sicherer Dash */
.modal-errors {
    margin: 0;
    padding-left: 0;
    list-style: none;
    color: #ff6b6b;
    font-weight: 500;
}

    .modal-errors li {
        position: relative;
        padding-left: 1.1rem;
        margin-bottom: .35rem;
    }

        .modal-errors li::before {
            content: "\2013"; /* en dash – (Unicode-escape, robuste Glyphen) */
            position: absolute;
            left: 0;
            top: 0;
            font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
            font-weight: 700;
        }

/* =========================
   APP THEME (authentifizierter Bereich)
   ========================= */

:root {
    --app-bg: #0e1218; /* edles, warmes Dark */
    --app-bg-2: #0b0f14;
    --app-card: rgba(18,22,30,.85);
    --app-card-border: rgba(255,255,255,.10);
    --app-text: #f3f3f1;
    --app-muted: #cfcfc9;
    /* Pastellgrün-Töne für die App-Navi */
    --app-mint: #CFE9D9; /* Hauptton Navbar (hell) */
    --app-mint-600: #A8D5BA; /* dunklerer Mint für Hover/Akzent */
    --app-accent: #C3A769; /* Gold-Akzent wie Landing (Buttons/Bullets) */
}

/* Hintergrund & Grundtypografie nur für die App */
.app-body {
    background: radial-gradient(1200px 800px at 20% 0%, var(--app-bg-2) 0%, var(--app-bg) 45%, #0a0e13 100%) fixed;
    color: var(--app-text);
}

    /* Navbar in hellem Pastellgrün, dunkle Schrift */
    .app-body .app-navbar {
        background: var(--app-mint);
        box-shadow: 0 4px 16px rgba(0,0,0,.25);
        border-bottom: 1px solid rgba(0,0,0,.08);
    }

        .app-body .app-navbar .navbar-brand,
        .app-body .app-navbar .nav-link {
            color: #1a1f24 !important;
            font-weight: 600;
            letter-spacing: .2px;
        }

            .app-body .app-navbar .nav-link:hover,
            .app-body .app-navbar .nav-link:focus {
                color: #0f1418 !important;
                text-decoration: none;
                background: rgba(0,0,0,.04);
                border-radius: 8px;
            }

    /* Cards dezentes „Glas“ wie Landing, aber etwas dichter */
    .app-body .card {
        background: var(--app-card);
        border: 1px solid var(--app-card-border);
        color: var(--app-text);
        border-radius: 16px;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

        .app-body .card .card-title {
            color: #fff;
        }

    /* Buttons akzentuiert (Gold) */
    .app-body .btn-primary {
        background: var(--app-accent);
        border-color: var(--app-accent);
        color: #1b1b1b;
        border-radius: 10px;
    }

        .app-body .btn-primary:hover {
            filter: brightness(.95);
        }

    /* Kleine Typo-Optimierung */
    .app-body .text-muted {
        color: var(--app-muted) !important;
    }

/* HERO zwischen Begrüßung & Inhalt */
.app-hero {
    position: relative;
    width: 100%;
    height: clamp(200px, 28vw, 360px);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(0,0,0,.45);
}

.app-hero__bg {
    position: absolute;
    inset: 0;
    background: center/cover no-repeat;
    transform: scale(1.02);
    filter: saturate(1.02) contrast(1.05) brightness(.9);
}

.app-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,.45) 100%), radial-gradient(1200px 600px at 70% 0%, rgba(195,167,105,.18) 0%, rgba(195,167,105,0) 60%);
    mix-blend-mode: normal;
}



/* Timeline-Bullets (Akkorde Goldpunkte) */
.app-body .card .rounded-circle {
    background: var(--app-accent) !important;
}

/* Formular in Cards: helle Felder behalten gute Lesbarkeit */
.app-body .form-control {
    color: #fff;
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.18);
}

    .app-body .form-control:focus {
        border-color: var(--app-accent);
        box-shadow: 0 0 0 .2rem rgba(195,167,105,.20);
    }

.app-body .form-check-input {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.25);
}

    .app-body .form-check-input:checked {
        background-color: var(--app-accent);
        border-color: var(--app-accent);
    }

/* Galerie-Karten */
.app-body .card-img-top {
    object-fit: cover;
    height: 180px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}
/* ===== Navbar – PLASTISCH (raised) ===== */

/* Einheitliche Typo/Hit-Targets */
.app-body .app-navbar .navbar-brand,
.app-body .app-navbar .nav-link,
.app-body .app-navbar .btn-as-link {
    font-size: 0.95rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: .2px;
    padding: .85rem .9rem; /* ~44px Hit-Target */
    display: flex;
    align-items: center;
    color: #1a1f24 !important;
}

/* Button-ähnlicher Logout */
.app-body .app-navbar .btn-as-link {
    background: transparent;
    border: 0;
    cursor: pointer;
}

/* Plastisch/raised Look */
.nav-equal.nav-raised .nav-link,
.nav-equal.nav-raised .btn-as-link {
    background: #EAF6F0; /* sehr helles Mint */
    border: 1px solid #A8D5BA;
    border-radius: 12px;
    margin: 0 .35rem;
    box-shadow: 0 2px 0 rgba(0,0,0,.12), 0 6px 18px rgba(0,0,0,.08);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

    .nav-equal.nav-raised .nav-link:hover,
    .nav-equal.nav-raised .btn-as-link:hover {
        transform: translateY(-1px);
        filter: brightness(.98);
        box-shadow: 0 3px 0 rgba(0,0,0,.12), 0 10px 26px rgba(0,0,0,.10);
    }

    .nav-equal.nav-raised .nav-link:active,
    .nav-equal.nav-raised .btn-as-link:active {
        transform: translateY(0);
        box-shadow: inset 0 2px 6px rgba(0,0,0,.12);
    }

/* Aktiver Link (subtil) */
.nav-equal .nav-link.active,
.nav-equal .btn-as-link.active {
    filter: brightness(.96);
    box-shadow: inset 0 2px 6px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06);
    border-radius: 12px;
}

/* Fokus sichtbar (A11y) */
.nav-equal .nav-link:focus,
.nav-equal .btn-as-link:focus {
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(0,0,0,.14);
    border-radius: 12px;
}

/* Brand: gleich groß wie Links wirken lassen */
.app-body .app-navbar .brand-text {
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: .3px;
}

/* Script-Wortmarke (elegant, gut lesbar) */
.brand-script .brand-swash {
    font-family: "Great Vibes", "Segoe Script", "Brush Script MT", cursive;
    font-size: clamp(26px, 2.2vw, 34px);
    line-height: 1;
    color: #1a1f24;
    letter-spacing: .2px;
    /* dezente Gold-Schattenkante für Tiefe */
    text-shadow: 0 1px 0 rgba(195,167,105,.35), 0 8px 24px rgba(0,0,0,.12);
    transform: translateY(1px); /* baseline-tuning */
}

@media (max-width: 576px) {
    .brand-script .brand-swash {
        font-size: 26px;
    }
}

/* Monogramm + Wortmarke (edel) */
.brand-mark .brand-badge {
    width: 32px;
    height: 32px;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,.08));
}

.brand-mark .brand-word {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .3px;
    color: #1a1f24;
    transform: translateY(1px); /* baseline-tuning */
}

/* ==== Brand: Monogramm + Script-Wortmarke ==== */

/* Logo-Badge (golden, subtiler Tiefeneffekt) */
.brand-combo .brand-badge {
    width: 32px;
    height: 32px;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,.08));
}

/* Geschwungene Wortmarke */
.brand-combo .brand-swash {
    font-family: "Great Vibes", "Segoe Script", "Brush Script MT", cursive;
    font-size: clamp(26px, 2.2vw, 34px);
    line-height: 1;
    letter-spacing: .2px;
    color: #0f3025; /* sehr dunkles Grün, passt auf Mint */
    text-shadow: 0 1px 0 rgba(195,167,105,.35), 0 8px 24px rgba(0,0,0,.10);
    transform: translateY(1px); /* Baseline-Tuning */
}

/* Damit die Brand nicht „größer“ wirkt als die Buttons: */
.app-body .app-navbar .navbar-brand {
    padding: .65rem .6rem; /* leicht kompakter als Links */
}

/* Mobile: bei sehr kleinem Platz nur das Monogramm zeigen */
@media (max-width: 420px) {
    .brand-combo .brand-swash {
        display: none;
    }
}

/* Optional: Wenn du die Wortmarke minimal prominenter willst */
@media (min-width: 992px) {
    .brand-combo .brand-swash {
        font-size: 32px;
    }
}

/* ===== Brand (Monogramm + Script) veredeln ===== */
.brand-combo .brand-badge {
    width: 32px;
    height: 32px;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,.08));
}

.brand-combo .brand-swash {
    font-family: "Great Vibes", "Segoe Script", "Brush Script MT", cursive;
    font-size: clamp(26px, 2.2vw, 34px);
    line-height: 1;
    letter-spacing: .2px;
    color: #0f3025; /* edles, dunkles Grün auf Mint */
    text-shadow: 0 1px 0 rgba(195,167,105,.35), 0 8px 24px rgba(0,0,0,.10);
    transform: translateY(1px); /* Baseline-Tuning */
}

@media (max-width: 420px) {
    .brand-combo .brand-swash {
        display: none;
    }
    /* sehr kleine Screens: nur Monogramm */
}

.app-body .app-navbar .navbar-brand {
    padding: .65rem .6rem; /* Brand optisch kohärent zu Links */
}

/* ===== Einheitliche Typo/Hit-Targets für alle Navbar-Items ===== */
.app-body .app-navbar .navbar-brand,
.app-body .app-navbar .nav-link,
.app-body .app-navbar .btn-as-link {
    font-size: 0.95rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: .2px;
    padding: .85rem .9rem;
    display: flex;
    align-items: center;
    color: #1a1f24 !important;
}

.app-body .app-navbar .btn-as-link {
    background: transparent;
    border: 0;
    cursor: pointer;
}

/* ===== Plastischer Look für die Menübuttons (raised) ===== */
.nav-equal.nav-raised .nav-link,
.nav-equal.nav-raised .btn-as-link {
    position: relative;
    background: #F1FBF6; /* sehr helles Mint */
    border: 1px solid #B9E1CC;
    border-radius: 12px;
    margin: 0 .35rem;
    box-shadow: 0 2px 0 rgba(0,0,0,.12), 0 6px 18px rgba(0,0,0,.08);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

    .nav-equal.nav-raised .nav-link:hover,
    .nav-equal.nav-raised .btn-as-link:hover {
        transform: translateY(-1px);
        filter: brightness(.98);
        box-shadow: 0 3px 0 rgba(0,0,0,.12), 0 10px 26px rgba(0,0,0,.10);
    }

.nav-equal .nav-link.active,
.nav-equal .btn-as-link.active {
    filter: brightness(.96);
    box-shadow: inset 0 2px 6px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06);
    border-radius: 12px;
}

/* ===== Goldener Unterstrich (aktiv + smooth) ===== */
.nav-anim .nav-link::after,
.nav-anim .btn-as-link::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 6px;
    height: 2px;
    background: linear-gradient(90deg, #C3A769, #B49451);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .18s ease;
    opacity: .95;
}

.nav-anim .nav-link.active::after,
.nav-anim .btn-as-link.active::after {
    transform: scaleX(1);
}

/* ===== Scroll-Shrink: Navbar wird minimal kompakter beim Scrollen ===== */
.app-body .app-navbar {
    transition: padding .18s ease, box-shadow .18s ease, background .18s ease;
    padding-top: .45rem;
    padding-bottom: .45rem;
}

    .app-body .app-navbar.nav-compact {
        padding-top: .25rem;
        padding-bottom: .25rem;
        box-shadow: 0 3px 10px rgba(0,0,0,.22);
    }

        .app-body .app-navbar.nav-compact .brand-combo .brand-swash {
            transform: translateY(0) scale(.96);
            transition: transform .18s ease;
        }

/* Fokus sichtbar (A11y) */
.nav-equal .nav-link:focus,
.nav-equal .btn-as-link:focus {
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(0,0,0,.14);
    border-radius: 12px;
}
/* === Optional: Feine Farbnuancen (nur App-Bereich) === */
.app-body {
    --app-mint: #CFE9D9; /* Navbar-Hintergrund (Mint) */
}

/* Plastische Buttons noch weicher/grünlicher */
.nav-equal.nav-raised .nav-link,
.nav-equal.nav-raised .btn-as-link {
    background: #F5FCF8;
    border-color: #BFE6D1;
}

/* === FIX: Container für Unterstrich positionieren (für alle Varianten) === */
.nav-equal .nav-link,
.nav-equal .btn-as-link {
    position: relative;
}

/* === FIX: goldener Unterstrich sicher sichtbar === */
.nav-equal.nav-anim .nav-link::after,
.nav-equal.nav-anim .btn-as-link::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 6px;
    height: 2px;
    background: linear-gradient(90deg, #C3A769, #B49451);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .18s ease;
    opacity: .95;
}

.nav-equal.nav-anim .nav-link.active::after,
.nav-equal.nav-anim .btn-as-link.active::after {
    transform: scaleX(1);
}

/* ==== ACTIVE = GOLD-FILL (statt Unterstrich) ==== */

/* Einheitliche Typo/Hit-Targets (falls nicht schon vorhanden) */
.app-body .app-navbar .navbar-brand,
.app-body .app-navbar .nav-link,
.app-body .app-navbar .btn-as-link {
    font-size: 0.95rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: .2px;
    padding: .85rem .9rem;
    display: flex;
    align-items: center;
    color: #1a1f24 !important;
}

.app-body .app-navbar .btn-as-link {
    background: transparent;
    border: 0;
    cursor: pointer;
}

/* Raised-Buttons (Basis) – ggf. schon in deiner Datei vorhanden */
.nav-equal.nav-raised .nav-link,
.nav-equal.nav-raised .btn-as-link {
    background: #F1FBF6;
    border: 1px solid #B9E1CC;
    border-radius: 12px;
    margin: 0 .35rem;
    box-shadow: 0 2px 0 rgba(0,0,0,.12), 0 6px 18px rgba(0,0,0,.08);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

    /* Hover */
    .nav-equal.nav-raised .nav-link:hover,
    .nav-equal.nav-raised .btn-as-link:hover {
        transform: translateY(-1px);
        filter: brightness(.98);
        box-shadow: 0 3px 0 rgba(0,0,0,.12), 0 10px 26px rgba(0,0,0,.10);
    }

    /* >>> ACTIVE: Gold-Hintergrund + dunkle Schrift */
    .nav-equal.nav-raised .nav-link.active,
    .nav-equal.nav-raised .btn-as-link.active {
        background: linear-gradient(180deg, #E8D5A6 0%, #C3A769 38%, #B49451 100%);
        border-color: #B49451;
        color: #1b1b1b !important;
        box-shadow: inset 0 2px 8px rgba(0,0,0,.18), 0 2px 0 rgba(0,0,0,.12), 0 10px 22px rgba(0,0,0,.12);
    }

/* Fokus sichtbar (A11y) */
.nav-equal .nav-link:focus,
.nav-equal .btn-as-link:focus {
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(0,0,0,.14);
    border-radius: 12px;
}

/* Optional: Unterstrich-Variante komplett neutralisieren (falls noch irgendwo definiert) */
.nav-equal.nav-anim .nav-link::after,
.nav-equal.nav-anim .btn-as-link::after {
    display: none !important;
}

/* =========================
   APP NAVBAR (plastisch + Gold)
   ========================= */

/* Theme-Farben für App-Bereich – hier feinjustieren */
.app-body {
    --app-mint: #CFE9D9; /* Navbar-Hintergrund (Mint) */
    --app-accent: #C3A769; /* Gold-Grundton */
}

    /* Navbar-Hintergrund + leichte Tiefe */
    .app-body .app-navbar {
        background: var(--app-mint);
        box-shadow: 0 4px 16px rgba(0,0,0,.25);
        border-bottom: 1px solid rgba(0,0,0,.08);
        transition: padding .18s ease, box-shadow .18s ease, background .18s ease;
        padding-top: .45rem;
        padding-bottom: .45rem;
    }

        .app-body .app-navbar.nav-compact {
            padding-top: .25rem;
            padding-bottom: .25rem;
            box-shadow: 0 3px 10px rgba(0,0,0,.22);
        }

/* Brand (Logo + Script) */
.brand-combo .brand-badge {
    width: 80px;
    height: 80px;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,.08));
}
.brand-badge {
    width: 80px;
    height: 80px;
    display: block;
    object-fit: contain; /* wichtig für PNG */
    filter: drop-shadow(0 4px 14px rgba(0,0,0,.08));
}

.brand-combo .brand-swash {
    font-family: "Great Vibes","Segoe Script","Brush Script MT",cursive;
    font-size: clamp(50px,2.2vw,70px);
    line-height: 1;
    letter-spacing: .2px;
    color: #0f3025;
    text-shadow: 0 1px 0 rgba(195,167,105,.35), 0 8px 24px rgba(0,0,0,.10);
    transform: translateY(1px);
}

@media (max-width:420px) {
    .brand-combo .brand-swash {
        display: none;
    }
}

.app-body .app-navbar .navbar-brand {
    padding: .65rem .6rem;
}

/* Einheitliche Typo/Hit-Targets */
.app-body .app-navbar .navbar-brand,
.app-body .app-navbar .nav-link,
.app-body .app-navbar .btn-as-link {
    font-size: .95rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: .2px;
    padding: .85rem .9rem;
    display: flex;
    align-items: center;
    color: #1a1f24 !important;
}

.app-body .app-navbar .btn-as-link {
    background: transparent;
    border: 0;
    cursor: pointer;
}

/* Plastischer Grundlook */
.nav-equal.nav-raised .nav-link,
.nav-equal.nav-raised .btn-as-link {
    position: relative;
    background: #F1FBF6;
    border: 1px solid #B9E1CC;
    border-radius: 12px;
    margin: 0 .35rem;
    box-shadow: 0 2px 0 rgba(0,0,0,.12), 0 6px 18px rgba(0,0,0,.08);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}

    /* HOVER = GOLD */
    .nav-equal.nav-raised .nav-link:hover,
    .nav-equal.nav-raised .btn-as-link:hover {
        transform: translateY(-1px);
        background: linear-gradient(180deg, #E8D5A6 0%, #C3A769 38%, #B49451 100%);
        border-color: #B49451;
        color: #1b1b1b !important;
        box-shadow: 0 3px 0 rgba(0,0,0,.12), 0 10px 26px rgba(0,0,0,.10);
    }

    /* ACTIVE = GOLD (ausgewählter Tab) */
    .nav-equal.nav-raised .nav-link.active,
    .nav-equal.nav-raised .btn-as-link.active {
        background: linear-gradient(180deg, #E8D5A6 0%, #C3A769 38%, #B49451 100%);
        border-color: #B49451;
        color: #1b1b1b !important;
        box-shadow: inset 0 2px 8px rgba(0,0,0,.18), 0 2px 0 rgba(0,0,0,.12), 0 10px 22px rgba(0,0,0,.12);
    }

/* Fokus (A11y) */
.nav-equal .nav-link:focus,
.nav-equal .btn-as-link:focus {
    outline: none;
    border-radius: 12px;
    box-shadow: 0 0 0 .2rem rgba(0,0,0,.14);
}

/* =========================
   EDEL / ORNAMENT-ÜBERSCHRIFTEN
   ========================= */
/* =========================
   SECTION TITLES – FINAL
   Goldlinien zentriert, vollflächig, ohne Überstand
   ========================= */

/* Basistypo der Überschrift unverändert lassen – nur saubere Ausrichtung & Zierlinien */
.section-title {
    /* Typo – gerne so lassen wie bisher */
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: clamp(20px, 2.2vw, 24px);
    color: #fff;
    /* NEU: Flex-Container für exakte Zentrierung von Text & Linien */
    display: flex;
    align-items: center; /* vertikal mittig zur Textzeile */
    gap: .75rem;
    margin: 0 0 1rem 0;
    /* Feintuning: minimaler optischer Shift für perfekte Mitte (bei fetter Serif oft nötig) */
    line-height: 1.15;
}

/* Goldpunkte zwischen den Linien (dezent & fix) */
.section-dot {
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #E8D5A6, #C3A769);
    box-shadow: 0 0 0 1px rgba(195,167,105,.35), 0 6px 14px rgba(0,0,0,.18);
}

/* Zierlinien links/rechts: wachsen dynamisch, aber laufen NICHT über die Card hinaus */
.section-title::before,
.section-title::after {
    content: "";
    height: 1px;
    align-self: center; /* exakt zur Textmitte */
    flex: 1 1 0; /* füllen den verfügbaren Raum */
    min-width: 150px; /* nie zu kurz */
    max-width: 9999px; /* kein künstliches Limit */
    /* Gold-Verlauf – gegenläufig links/rechts für schönen Schein */
    background: linear-gradient(90deg, rgba(195,167,105,0), rgba(195,167,105,.9));
    /* optische Justage (bei manchen Fonts wirkt 1px leicht oberhalb der Mitte) */
    transform: translateY(.03em);
}

.section-title::after {
    background: linear-gradient(270deg, rgba(195,167,105,0), rgba(195,167,105,.9));
}

/* Verhindert, dass Linien über runde Card-Ecken sichtbar „hinausmalen“ */
.card > .card-body {
    overflow: hidden;
}

/* Optional: in sehr schmalen Layouts die Linien automatisch kürzen */
@media (max-width: 576px) {
    .section-title::before,
    .section-title::after {
        min-width: 16px;
    }
}

/* Optional: in Cards mit sehr wenig Inhalt (z.B. Zeitplan rechts) die Linien etwas zurücknehmen,
   damit sie nie optisch bis ganz an den Cardrand „quetschen“. */
.card .section-title {
    /* Innenabstand, damit die Linien nicht am absoluten Rand anliegen */
    --title-rule-inset: .25rem;
}

    .card .section-title::before,
    .card .section-title::after {
        margin-inline: var(--title-rule-inset);
    }

/* 💡 Falls du NUR in der Zeitplan-Card die Linien kürzer haben willst:
   (Chrome/Edge/Safari unterstützen :has) */
@supports(selector(:has(*))) {
    #tab-infos .card:has(.v-tl) .section-title::before,
    #tab-infos .card:has(.v-tl) .section-title::after {
        min-width: 24px; /* kurz & edel */
        max-width: 120px;
    }
}


/* =========================
   GALLERY GRID + LIGHTBOX
   ========================= */
.gallery-grid {
    --col: 4;
    display: grid;
    grid-template-columns: repeat(var(--col), minmax(0,1fr));
    gap: 12px;
}

@media (max-width: 1200px) {
    .gallery-grid {
        --col: 3;
    }
}

@media (max-width: 768px) {
    .gallery-grid {
        --col: 2;
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        --col: 1;
    }
}

.gallery-item {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
    background: #0f1218;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

    .gallery-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 34px rgba(0,0,0,.34);
        filter: saturate(1.02);
    }

.gallery-img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    display: block;
}

.gallery-meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
    color: #fff;
    padding: 8px 10px;
    font-size: .85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gallery-actions .btn {
    padding: .15rem .45rem;
    border-radius: 10px;
}

/* Lightbox Modal (nur dunkler Rand) */
/* Lightbox Modal (fixed viewport + navigation, Bootstrap Modal+Carousel Pattern)
   Inspiriert von Bootstrap-5-Lightbox/Carousel-Ansätzen (Modal + Carousel) */
.modal-photo .modal-dialog {
    margin: 0;
}

.modal-photo .modal-content.photo-lightbox {
    background: #000;
    border: 0;
    border-radius: 0;
    height: 100vh; /* fixe Größe = Viewport */
}

.modal-photo .photo-lightbox__header {
    background: rgba(0,0,0,.88);
    border-bottom: 1px solid rgba(255,255,255,.10);
}

.modal-photo .modal-body {
    background: #000;
    flex: 1; /* füllt den Rest unterhalb des Headers */
    min-height: 0; /* wichtig: damit Children nicht den Modal sprengen */
}

.modal-photo .photo-lightbox__carousel {
    height: 100%;
    outline: none;
}

.modal-photo .photo-lightbox__grid {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: clamp(72px, 8vw, 120px) minmax(0, 1fr) clamp(72px, 8vw, 120px);
    background: #000;
}

.modal-photo .photo-lightbox__side {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000; /* schwarze Balken links/rechts */
}

.modal-photo .photo-lightbox__frame {
    min-width: 0;
    height: 100%;
    background: #000;
}

.modal-photo .carousel-inner,
.modal-photo .carousel-item {
    height: 100%;
}

.modal-photo .photo-lightbox__img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Bild skaliert innerhalb des festen Bereichs */
    display: block;
    background: #000;
}

/* Nav-Buttons (im Stil der Tab-Buttons: Glas + Goldrand nur bei Hover/Aktiv) */
.modal-photo .photo-lightbox__navbtn {
    width: min(96px, 80%);
    height: 56px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: #fff;
    font-size: 2.1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    transition: transform .12s ease, box-shadow .20s ease, border-color .20s ease, filter .20s ease;
}

    .modal-photo .photo-lightbox__navbtn:hover,
    .modal-photo .photo-lightbox__navbtn:focus-visible {
        border-color: rgba(232,213,166,.75);
        box-shadow: 0 0 0 1px rgba(232,213,166,.35), 0 0 18px rgba(232,213,166,.28), inset 0 1px 0 rgba(255,255,255,.08);
        transform: translateY(-1px);
        filter: saturate(1.05);
        outline: none;
    }

    .modal-photo .photo-lightbox__navbtn:active {
        transform: translateY(0);
    }


/* =========================
   CARDS & KLEINE POLISHES
   ========================= */
.card .card-subtle {
    color: var(--app-muted);
    font-size: .95rem;
}

.card .badge-outline {
    background: transparent;
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    border-radius: 999px;
    padding: .25rem .6rem;
}

/* === Fix: Section-Titel nicht umbrechen, Linien auf kleinen Cards ausblenden === */
.section-title {
    white-space: nowrap;
}

@media (max-width: 1200px) {
    /* in schmaleren Spalten die Zierlinien ausblenden, damit nichts umbrecht */
    .section-title::before,
    .section-title::after {
        display: none;
    }
}

/* =========================
   TIMELINE — FINAL (ein Pfeil, Linie endet sicher am Pfeil)
   ========================= */
.v-tl {
    /* Stellschrauben */
    --tl-x: 18px; /* Achse vom linken Rand */
    --tl-line: linear-gradient(#B49451,#C3A769);
    --tl-dot: #C3A769;
    --tl-dot-size: 9px; /* Punktdurchmesser */
    --tl-baseline: 0.90em; /* Mitte der 1. Textzeile (0.78–0.82em feinjustieren) */
    --tl-arrow-w: 12px; /* Pfeilbreite */
    --tl-arrow-h: 10px; /* Pfeilhöhe */
    --tl-mask-color: #0e1218; /* OPAKER Hintergrund zum Abdecken der Linie */
    position: relative;
    list-style: none;
    margin: .25rem 0 .5rem 0;
    padding-left: 0;
    overflow: hidden; /* schneidet alles drunter weg */
}

    /* ACHTUNG: Alte UL-Pfeile global deaktivieren */
    .v-tl::after {
        content: none !important;
        border: 0 !important;
    }

    /* Zentrale Achse – bis ganz unten (wird gleich unter der Spitze abgedeckt) */
    .v-tl::before {
        content: "";
        position: absolute;
        left: var(--tl-x);
        top: 8px;
        bottom: 0; /* volle Höhe */
        width: 2px;
        background: var(--tl-line);
        border-radius: 1px;
        transform: translateX(-50%);
        opacity: .9;
    }

    .v-tl li {
        position: relative;
        margin: 0 0 1rem 0;
        padding-left: calc(var(--tl-x) + 16px); /* Text rechts der Achse */
        line-height: 1.25;
    }

        /* Standard-Dot (voll Gold), exakt mittig zur ersten Zeile */
        .v-tl li::before {
            content: "";
            position: absolute;
            left: var(--tl-x);
            top: var(--tl-baseline);
            width: var(--tl-dot-size);
            height: var(--tl-dot-size);
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, #E8D5A6, var(--tl-dot));
            box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.18);
            z-index: 2;
        }

        /* Letzter Eintrag: statt Punkt eine Pfeilspitze, Spitze auf Zeilenmitte */
        .v-tl li:last-child::before {
            content: "";
            position: absolute;
            left: var(--tl-x);
            top: calc(var(--tl-baseline) - (var(--tl-arrow-h) / 2));
            width: 0;
            height: 0;
            transform: translate(-50%, 0);
            border-left: calc(var(--tl-arrow-w) / 2) solid transparent;
            border-right: calc(var(--tl-arrow-w) / 2) solid transparent;
            border-top: var(--tl-arrow-h) solid var(--tl-dot);
            z-index: 3;
        }

        /* HARTE Maske direkt unter der Pfeilspitze (OPAQUE) -> Linie endet garantiert am Pfeil */
        .v-tl li:last-child::after {
            content: "";
            position: absolute;
            left: var(--tl-x);
            top: calc(var(--tl-baseline) + (var(--tl-arrow-h) / 2));
            bottom: -200px; /* großzügig */
            width: 24px; /* deutlich breiter als 2px Linie */
            background: var(--tl-mask-color); /* OPAK -> keine Linie mehr sichtbar */
            transform: translateX(-50%);
            z-index: 3;
        }

    /* Zeit + Titel in einer Zeile, konsistente Typo (∞ sicher anzeigen) */
    .v-tl .tl-time,
    .v-tl .tl-title {
        display: inline-block;
        vertical-align: middle;
        white-space: nowrap;
        line-height: 1.25;
    }

    .v-tl .tl-time {
        font-weight: 700;
        color: #fff;
        font-family: system-ui, -apple-system, "Segoe UI", "Segoe UI Symbol", "Noto Sans", "Noto Sans Symbols", Arial, sans-serif;
        font-variant-numeric: tabular-nums;
    }

        .v-tl .tl-time::after {
            content: " \00B7 "; /* · */
            margin: 0 .3rem;
            color: #fff;
            opacity: .9;
        }

    .v-tl .tl-title {
        font-weight: 600;
        color: #fff;
    }

    /* Beschreibung darunter */
    .v-tl .tl-desc {
        display: block;
        margin-top: .22rem;
        color: var(--app-muted);
        font-size: .95rem;
    }

/* =========================
   SECTION TITLES – FIX: volle Breite, mittige Linien, keine Kürzung
   ========================= */

/* 1) Container muss die Card-Breite einnehmen */
.section-title {
    /* Block-Level Flex: nimmt 100% Breite des Card-Body ein */
    display: flex !important;
    width: 100% !important;
    align-items: center; /* Linie exakt mittig zur Textzeile */
    gap: .75rem;
    margin: 0 0 1rem 0;
    /* Typo wie bisher: edel & ruhig */
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: clamp(20px, 2.2vw, 24px);
    line-height: 1.15; /* Referenzlinie für die vertikale Mitte */
    color: #fff;
    flex-wrap: nowrap;
}

    /* 2) Zierlinien links/rechts: wachsen flexibel bis zum Card-Rand */
    .section-title::before,
    .section-title::after {
        content: "";
        display: block;
        /* Flexibel, keine Obergrenze */
        flex: 1 1 0% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 1px;
        align-self: center; /* wirklich mittig zur Textzeile */
        /* Gold-Verläufe: gegenläufig für feinen „Sheen“ */
        background: linear-gradient(90deg, rgba(195,167,105,0), rgba(195,167,105,.9));
        /* mini-Optik-Offset für fette Serif (je nach Geschmack .00–.05em) */
        transform: translateY(.02em);
    }
    /* Rechte Linie gegensinnig */
    .section-title::after {
        background: linear-gradient(270deg, rgba(195,167,105,0), rgba(195,167,105,.9));
    }

/* 3) Goldener Punkt zwischen den Linien (bleibt kompakt) */
.section-dot {
    flex: 0 0 6px !important;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #E8D5A6, #C3A769);
    box-shadow: 0 0 0 1px rgba(195,167,105,.35), 0 6px 14px rgba(0,0,0,.18);
}

/* 4) Verhindert sichtbaren Überstand an runden Card-Rändern */
.card > .card-body {
    overflow: hidden;
}

/* 5) Kill-Switch gegen frühere, limitierende Regeln (falls noch im CSS vorhanden) */
.section-title::before,
.section-title::after {
    /* falls irgendwo eine kurze max-width gesetzt wurde: neutralisieren */
    max-width: 100000px !important;
    margin-inline: 0 !important; /* wir wollen bis zum Card-Innenrand gehen */
}

/* 6) Optional: ganz schmal – Linien automatisch kürzen, damit es nicht „quetscht“ */
@media (max-width: 576px) {
    .section-title::before,
    .section-title::after {
        min-width: 18px !important;
    }
}

/* 7) BUGFIX: Früherer :has()-Block kann alle Cards ungewollt treffen.
      Wir setzen sicherheitshalber jede evtl. vorhandene Kappung zurück. */
#tab-infos .card .section-title::before,
#tab-infos .card .section-title::after {
    max-width: none !important;
    min-width: 0 !important;
}

/* === TIMELINE: Start exakt am 1. Punkt (Top-Maske) === */
.v-tl {
    /* Falls noch nicht gesetzt: opaker Card-Hintergrund fürs Abdecken */
    --tl-mask-color: #0e1218;
}

    /* Deckt die Achse oberhalb des ersten Dots ab → Linie startet am Punktzentrum */
    .v-tl li:first-child::after {
        content: "";
        position: absolute;
        left: var(--tl-x);
        /* weit nach oben ziehen; UL hat overflow:hidden → sicherer Cut */
        top: -1000px;
        /* endet exakt bei der Dot-Mitte der ersten Zeile */
        bottom: calc(100% - var(--tl-baseline) + (var(--tl-dot-size) / 2));
        width: 24px; /* breiter als die 2px-Achse */
        background: var(--tl-mask-color); /* OPAK! */
        transform: translateX(-50%);
        z-index: 3;
    }

/* Scroll-Offset für Ankerziele (falls Navbar oben Raum einnimmt) */
#section-wir, #section-ablauf, #section-rsvp, #section-gallery, #section-qa {
    scroll-margin-top: calc(var(--nav-offset, 90px) + 12px);
}

/* Subsections innerhalb "Wir heiraten" – elegante Trenner */
.subsection + .subsection {
    border-top: 1px solid rgba(255,255,255,.10);
    padding-top: 1rem;
    margin-top: 1rem;
}

/* Scroll-Offset für Ankerziele */
#section-wir, #section-ablauf, #tabs-card {
    scroll-margin-top: calc(var(--nav-offset, 90px) + 12px);
}

/*EVTL LÖSCHEN!!!!!!!!!!!!!!!!!!!!!!!!!!! AB HIER */
/* === Edler Gold-Glow für Essentials-Badges === */
.badge-goldglow {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid transparent;
    /* dunkler Innen-Background + Goldrand via border-box-Trick */
    background: linear-gradient(var(--app-card, #0e1218), var(--app-card, #0e1218)) padding-box, linear-gradient(135deg, #E8D5A6, #C3A769, #E8D5A6) border-box;
    color: #fff;
    letter-spacing: .2px;
    box-shadow: 0 0 0 1px rgba(195,167,105,.25), /* feine Kante */
    0 0 14px rgba(195,167,105,.30), /* weicher äußerer Glow */
    inset 0 1px 0 rgba(255,255,255,.05);
    text-shadow: 0 0 8px rgba(232,213,166,.25);
    transition: box-shadow .25s ease, transform .15s ease, filter .25s ease;
}

    .badge-goldglow:hover {
        box-shadow: 0 0 0 1px rgba(232,213,166,.55), 0 0 22px rgba(232,213,166,.45), inset 0 1px 0 rgba(255,255,255,.08);
        transform: translateY(-1px);
        filter: saturate(1.1);
    }

/* Wenn Bootstrap die Badge sehr klein macht: */
.badge.badge-goldglow {
    padding: .35rem .6rem;
    border-radius: 999px;
    font-weight: 600;
}

/*PULSIERENDES LEUCHTEN*/
/* === Optional: sanfte Gold-Puls-Animation für Badges === */
@keyframes goldPulse {
    0% {
        box-shadow: 0 0 0 1px rgba(232,213,166,.45), 0 0 14px rgba(232,213,166,.32), inset 0 1px 0 rgba(255,255,255,.06);
        filter: saturate(1.0);
        transform: translateY(0) scale(1);
    }

    50% {
        box-shadow: 0 0 0 1px rgba(232,213,166,.70), 0 0 24px rgba(232,213,166,.55), inset 0 1px 0 rgba(255,255,255,.08);
        filter: saturate(1.08);
        transform: translateY(-1px) scale(1.015);
    }

    100% {
        box-shadow: 0 0 0 1px rgba(232,213,166,.45), 0 0 14px rgba(232,213,166,.32), inset 0 1px 0 rgba(255,255,255,.06);
        filter: saturate(1.0);
        transform: translateY(0) scale(1);
    }
}

/* Zuschaltbar: einfach zusätzlich zu .badge-goldglow setzen */
.badge-goldpulse {
    animation: goldPulse 2.4s ease-in-out infinite;
}

/* Barrierefreiheit: Animationen respektieren */
@media (prefers-reduced-motion: reduce) {
    .badge-goldpulse {
        animation: none;
    }
}

/* kurzer, kräftiger Impuls + lange Ruhephase */
@keyframes goldPulseSparse {
    /* Baseline (Ruhe) */
    0%, 100% {
        box-shadow: 0 0 0 1px rgba(232,213,166,.45), 0 0 14px rgba(232,213,166,.32), inset 0 1px 0 rgba(255,255,255,.06);
        filter: saturate(1.0);
        transform: translateY(0) scale(1);
    }
    /* langsames Ansteigen */
    35% {
        box-shadow: 0 0 0 1px rgba(232,213,166,.70), 0 0 24px rgba(232,213,166,.55), inset 0 1px 0 rgba(255,255,255,.08);
        filter: saturate(1.08);
        transform: translateY(-1px) scale(1.015);
    }

    /* langsames Abklingen (nicht „snap back“) */
    70% {
        box-shadow: 0 0 0 1px rgba(232,213,166,.45), 0 0 14px rgba(232,213,166,.32), inset 0 1px 0 rgba(255,255,255,.06);
        filter: saturate(1.0);
        transform: translateY(0) scale(1);
    }
}

/* zuschaltbar; Periode via CSS-Variable steuerbar */
.badge-goldpulse-sparse {
    --pulse-period: 2s; /* Gesamtdauer (Impuls <1s, Rest Ruhe) */
    animation: goldPulseSparse var(--pulse-period) cubic-bezier(.45,0,.55,1) infinite;
}

/* Barrierefreiheit */
@media (prefers-reduced-motion: reduce) {
    .badge-goldpulse-sparse {
        animation: none;
    }
}

/* ====== Status-Badge im Badge-Look (farblich je Status) ====== */
.badge-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .65rem;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .2px;
    color: #fff;
    border: 1px solid transparent;
    background: linear-gradient(var(--app-card, #0e1218), var(--app-card, #0e1218)) padding-box, linear-gradient(135deg, var(--b1), var(--b2), var(--b1)) border-box;
    box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 0 14px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.05);
    text-shadow: 0 0 8px rgba(232,213,166,.18);
    transition: box-shadow .25s ease, transform .15s ease, filter .25s ease;
}

    .badge-status:hover {
        box-shadow: 0 0 0 1px var(--hover-outline, rgba(255,255,255,.28)), 0 0 22px var(--hover-glow, rgba(255,255,255,.18)), inset 0 1px 0 rgba(255,255,255,.08);
        transform: translateY(-1px);
        filter: saturate(1.06);
    }

/* Varianten */
.badge-status-yes {
    --b1: #cfe9d9;
    --b2: #49a772;
    --hover-outline: rgba(73,167,114,.65);
    --hover-glow: rgba(73,167,114,.45);
}

.badge-status-maybe {
    --b1: #E8D5A6;
    --b2: #C3A769;
    --hover-outline: rgba(195,167,105,.65);
    --hover-glow: rgba(195,167,105,.45);
}

.badge-status-no {
    --b1: #ffd2d2;
    --b2: #ff6e6e;
    --hover-outline: rgba(255,110,110,.65);
    --hover-glow: rgba(255,110,110,.45);
}

.badge-status-unset {
    --b1: #d6d6d6;
    --b2: #8b8b8b;
    --hover-outline: rgba(220,220,220,.65);
    --hover-glow: rgba(220,220,220,.45);
}

    /* Optional: kurzer Impuls für „Bitte antworten“ (du hast die Animation schon) */
    .badge-status-unset.badge-goldpulse-sparse { /* einfach Klasse zusätzlich setzen */
    }

.lead {
    font-weight: 600;
    color: #fff;
    letter-spacing: .2px;
}

/*
  Fixed Navbar Offset / Anchors
  - script in _Layout setzt --nav-offset dynamisch; fallback hier.
  - sorgt dafür, dass Hash/Anchors (z.B. #section-wir) nicht unter der Navbar landen.
*/
:root {
  /*    --nav-offset: 72px;*/
        --nav-offset:  0px;
}

html {
    scroll-padding-top: calc(var(--nav-offset) + 12px);
}

.app-body main#page-top {
    /* Bootstrap pt-3 ist vorhanden; wir addieren nur den Navbar-Offset */
    padding-top: calc(var(--nav-offset) + 12px) !important;
    padding-bottom: 2.5rem;
}

#section-wir,
#tabs-top,
#tabs-card {
    scroll-margin-top: calc(var(--nav-offset) + 12px);
}

/*
  Navbar: Dark + Gold (Override)
  - bewusst am Ende der Datei, damit es gegenüber älteren Definitionen gewinnt.
*/
.app-navbar {
    background: var(--app-mint);
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    transition: padding .18s ease, box-shadow .18s ease, background .18s ease;
    padding-top: .45rem;
    padding-bottom: .45rem;
    border-bottom: 1px solid rgba(195, 167, 105, .25);
    backdrop-filter: blur(10px);
    
}

.app-navbar .nav-link,
.app-navbar .btn-as-link {
    color: rgba(245, 245, 245, .86) !important;
}

.app-navbar .nav-link:hover,
.app-navbar .btn-as-link:hover,
.app-navbar .nav-link.active {
    color: #fff !important;
    background: rgba(195, 167, 105, .18) !important;
}

/*.app-navbar .brand-swash {
    color: #E8D5A6 !important;
}*/

.app-navbar .navbar-toggler {
    border-color: rgba(195, 167, 105, .35) !important;
}

/* Bootstrap toggler icon ist schwarz im SVG; invertieren für Dark Navbar */
    .app-navbar .navbar-toggler-icon {
        filter: none;
    }

/*.tabs-card .tab-content {
    min-height : 600px ;
    max-height : 600px ;
    overflow : hidden ;
}

.tabs-card .tab-pane {
    height : 100% ;
    overflow : auto ;
}
*/
/*tabs-card .card-body 
/*{
/*
/*}.tab-content .tab-pane*/

/* =========================================================
   GLASS TABS v3 (border-only gold via mask, inner stays 100% transparent)
   - Inner area: transparent -> exact background tone
   - Glass: subtle highlights only
   - Hover/Active: GOLD BORDER ONLY (no gold fill)
   ========================================================= */

/* ----- Tabs (Top + Attendee) ----- */
.tabs-card .glass-tabs,
.tabs-card .glass-subtabs {
    gap: .5rem;
}

    .tabs-card .glass-tabs .nav-link,
    .tabs-card .glass-subtabs .nav-link {
        background: none !important;
        background-color: transparent !important;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 12px;
        color: rgba(255,255,255,.92) !important;
        text-decoration: none !important;
        font-weight: 650;
        letter-spacing: .2px;
        position: relative;
        overflow: hidden;
        isolation: isolate; /* ensures negative z-index pseudos stay behind content */

        box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.35), 0 2px 0 rgba(0,0,0,.12), 0 10px 26px rgba(0,0,0,.12);
        transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
    }

        /* Gold gradient border (masked so it is BORDER ONLY) */
        .tabs-card .glass-tabs .nav-link::before,
        .tabs-card .glass-subtabs .nav-link::before {
            content: "";
            position: absolute;
            inset: 0;
            padding: 1px; /* border thickness */
            border-radius: inherit;
            background: linear-gradient(135deg, #E8D5A6, #C3A769, #E8D5A6);
            /* mask: cut out the center -> border only */
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: 0;
            pointer-events: none;
            z-index: -2;
        }

        /* Glass highlight (subtle, not a full overlay) */
        .tabs-card .glass-tabs .nav-link::after,
        .tabs-card .glass-subtabs .nav-link::after {
            content: "";
            position: absolute;
            left: 2%;
            right: 2%;
            top: 5%;
            height: 8%;
            background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
            opacity: .70;
            pointer-events: none;
            z-index: -1;
        }

        /* Hover/Active: enable gold border + glow, still NO fill */
        .tabs-card .glass-tabs .nav-link:hover,
        .tabs-card .glass-tabs .nav-link:focus,
        .tabs-card .glass-tabs .nav-link.active,
        .tabs-card .glass-subtabs .nav-link:hover,
        .tabs-card .glass-subtabs .nav-link:focus,
        .tabs-card .glass-subtabs .nav-link.active {
            transform: translateY(-1px);
            filter: saturate(1.04);
            /* fallback if masks unsupported */
            border-color: rgba(195,167,105,.70);
            box-shadow: 0 0 0 1px rgba(195,167,105,.22), 0 0 14px rgba(195,167,105,.28), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.35), 0 3px 0 rgba(0,0,0,.12), 0 12px 30px rgba(0,0,0,.14);
        }

            .tabs-card .glass-tabs .nav-link:hover::before,
            .tabs-card .glass-tabs .nav-link:focus::before,
            .tabs-card .glass-tabs .nav-link.active::before,
            .tabs-card .glass-subtabs .nav-link:hover::before,
            .tabs-card .glass-subtabs .nav-link:focus::before,
            .tabs-card .glass-subtabs .nav-link.active::before {
                opacity: 1;
            }

    /* Spacing */
    .tabs-card .glass-tabs .nav-link {
        padding: .85rem .95rem;
        margin: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }

    .tabs-card .glass-subtabs.nav-tabs {
        border-bottom: 0;
        gap: .35rem;
    }

    .tabs-card .glass-subtabs .nav-link {
        padding: .65rem .9rem;
        margin: 0;
    }


/* =========================================================
   Choice Slider v3
   - Track darker (50% black overlay)
   - Thumb = EXACT same style as active tab (transparent + glass + gold border only)
   ========================================================= */

.choice-slider {
    position: relative;
}

.choice-slider__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.choice-slider__track {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 52px;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(rgba(0,0,0,.50), rgba(0,0,0,.50)), rgba(241,251,246,.22);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 2px 0 rgba(0,0,0,.12), 0 8px 22px rgba(0,0,0,.10);
}

.choice-slider__option {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: .85rem .6rem;
    cursor: pointer;
    user-select: none;
    font-weight: 650;
    letter-spacing: .2px;
    color: rgba(245,245,245,.92);
    position: relative;
    z-index: 2;
    text-align: center;
}

.choice-slider__thumb {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.14);
    background: transparent;
    z-index: 1;
    isolation: isolate;
    transition: transform .18s ease, opacity .12s ease;
    opacity: 0;
    box-shadow: 0 0 0 1px rgba(195,167,105,.18), 0 0 12px rgba(195,167,105,.22), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.35), 0 10px 22px rgba(0,0,0,.12);
}

    /* Gold gradient border (masked, border-only) */
    .choice-slider__thumb::after {
        content: "";
        position: absolute;
        inset: 0;
        padding: 1px;
        border-radius: inherit;
        background: linear-gradient(135deg, #E8D5A6, #C3A769, #E8D5A6);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 1;
        pointer-events: none;
        z-index: -2;
    }

    /* Glass highlight strip */
    .choice-slider__thumb::before {
        content: "";
        position: absolute;
        left: 2%;
        right: 2%;
        top: 6%;
        height: 12%;
        background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
        opacity: .65;
        pointer-events: none;
        z-index: -1;
    }

/* Show thumb only when a choice is selected */
.choice-slider input:checked ~ .choice-slider__track .choice-slider__thumb {
    opacity: 1;
}

/* Thumb width depending on options */
.choice-slider--2 .choice-slider__thumb {
    width: calc((100% - 8px) / 2);
}

.choice-slider--3 .choice-slider__thumb {
    width: calc((100% - 8px) / 3);
}

/* Thumb position */
.choice-slider--2 input:nth-of-type(1):checked ~ .choice-slider__track .choice-slider__thumb {
    transform: translateX(0%);
}

.choice-slider--2 input:nth-of-type(2):checked ~ .choice-slider__track .choice-slider__thumb {
    transform: translateX(100%);
}

.choice-slider--3 input:nth-of-type(1):checked ~ .choice-slider__track .choice-slider__thumb {
    transform: translateX(0%);
}

.choice-slider--3 input:nth-of-type(2):checked ~ .choice-slider__track .choice-slider__thumb {
    transform: translateX(100%);
}

.choice-slider--3 input:nth-of-type(3):checked ~ .choice-slider__track .choice-slider__thumb {
    transform: translateX(200%);
}

/* =========================================================
   GroupBox für Personen-Tabs (nur Tab-Leiste)
   ========================================================= */

.tabs-card .groupbox-person-tabs {
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 14px;
    padding: .75rem .75rem .55rem;
    margin: .75rem 0 .9rem;
    background: transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 26px rgba(0,0,0,.10);
}

    /* Legend sauber (Bootstrap/Browser setzen teils komische Defaults) */
    .tabs-card .groupbox-person-tabs > legend {
        float: none;
        width: auto;
        padding: 0 .55rem;
        margin-bottom: .25rem;
        color: rgba(245,245,245,.78);
        font-weight: 600;
        letter-spacing: .2px;
        font-size: .95rem;
    }

    /* In der GroupBox: Tabs kompakt, ohne Extra-Margins */
    .tabs-card .groupbox-person-tabs #tabWidgetPreferences {
        margin: 0;
    }

/* =========================================================
   1) Personen-Tabs: Gold nur als Unterstreichung (bottom glow)
   ========================================================= */

/* Neutralisiere den "Gold-Rand" Hover/Active-Look für subtabs */
.tabs-card .glass-subtabs .nav-link:hover,
.tabs-card .glass-subtabs .nav-link:focus,
.tabs-card .glass-subtabs .nav-link.active {
    border-color: rgba(255,255,255,.18); /* bleibt neutral */
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.35), 0 2px 0 rgba(0,0,0,.12), 0 10px 26px rgba(0,0,0,.12); /* keine Gold-Glow-BoxShadow hier */
    transform: translateY(-1px);
    filter: saturate(1.04);
}

/* Ersetze den bisherigen ::before (Gold-Rand) für subtabs durch Underline */
.tabs-card .glass-subtabs .nav-link::before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 6px;
    height: 2px;
    border-radius: 999px;
    /* goldener Unterstrich mit weichem Verlauf */
    background: linear-gradient( 90deg, rgba(232,213,166,0) 0%, rgba(232,213,166,.95) 25%, rgba(195,167,105,.95) 50%, rgba(232,213,166,.95) 75%, rgba(232,213,166,0) 100% );
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}

/* Underline bei Hover/Active sichtbar + Glow */
.tabs-card .glass-subtabs .nav-link:hover::before,
.tabs-card .glass-subtabs .nav-link:focus::before,
.tabs-card .glass-subtabs .nav-link.active::before {
    opacity: 1;
    box-shadow: 0 0 10px rgba(195,167,105,.35), 0 0 18px rgba(195,167,105,.18);
}


/* =========================================================
   2) Slider: Hintergrundfarbe exakt auf RGB(45,57,72)
   ========================================================= */

:root {
    --slider-track-rgb: 30, 39, 53; /* H=144 S=67 B=39 */
}

.choice-slider__track {
    background: rgb(var(--slider-track-rgb)) !important;
    /* Tiefe ohne Farbton zu verändern */
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.35), 0 2px 0 rgba(0,0,0,.12), 0 8px 22px rgba(0,0,0,.10);
}

/* keep glass highlight, but ensure it doesn't become the underline */
.tabs-card .glass-subtabs .nav-link::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( 180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.05) 38%, rgba(255,255,255,0) 72% );
    opacity: .55;
    pointer-events: none;
    z-index: 0;
}

/* underline goes to ::after to avoid clashes */
.tabs-card .glass-subtabs .nav-link::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 6px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient( 90deg, rgba(232,213,166,0) 0%, rgba(232,213,166,.95) 25%, rgba(195,167,105,.95) 50%, rgba(232,213,166,.95) 75%, rgba(232,213,166,0) 100% );
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}

/* show underline on hover/active */
.tabs-card .glass-subtabs .nav-link:hover::after,
.tabs-card .glass-subtabs .nav-link:focus::after,
.tabs-card .glass-subtabs .nav-link.active::after {
    opacity: 1;
    box-shadow: 0 0 10px rgba(195,167,105,.35), 0 0 18px rgba(195,167,105,.18);
}

/* =========================================================
   FIX: Personen-Tabs (glass-subtabs) nur Bottom-Underline (gold)
   - deaktiviert Gold-Border-Pseudo für subtabs
   - Underline via background-image => garantiert unten
   ========================================================= */

/* 1) Gold-Border pseudo (aus Glass Tabs v3) für Personen-Tabs komplett aus */
.tabs-card .glass-subtabs .nav-link::before {
    opacity: 0 !important;
}

/* 2) Underline als Background am Button selbst (immer unten) */
.tabs-card .glass-subtabs .nav-link {
    background-image: linear-gradient( 90deg, rgba(232,213,166,0) 0%, rgba(232,213,166,.95) 25%, rgba(195,167,105,.95) 50%, rgba(232,213,166,.95) 75%, rgba(232,213,166,0) 100% );
    background-repeat: no-repeat;
    /* Start: unsichtbar */
    background-size: 0% 2px;
    /* Position: unten im Button */
    background-position: center calc(100% - 6px);
}

    /* 3) Hover/Active: Underline sichtbar + Bottom-Glow */
    .tabs-card .glass-subtabs .nav-link:hover,
    .tabs-card .glass-subtabs .nav-link:focus,
    .tabs-card .glass-subtabs .nav-link.active {
        background-size: calc(100% - 24px) 2px; /* links/rechts etwas inset */
        /* zusätzlicher Glow, der unten wirkt */
        box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.35), 0 2px 0 rgba(0,0,0,.12), 0 10px 26px rgba(0,0,0,.12), 0 18px 22px -18px rgba(195,167,105,.55);
    }

    /* =========================================================
   Personen-Tabs: Gold nur als Unterstreichung unten (robust)
   - Deaktiviert alle pseudo overlays für glass-subtabs
   - Glas + Underline werden als layered background-images gerendert
   ========================================================= */

    /* 1) Pseudos für Personen-Tabs komplett abschalten (verhindert "oben") */
    .tabs-card .glass-subtabs .nav-link::before,
    .tabs-card .glass-subtabs .nav-link::after {
        content: none !important;
        display: none !important;
    }

/* 2) Glas + Underline als Background (Underline garantiert unten) */
.tabs-card .glass-subtabs .nav-link {
    /* Wichtig: Shorthand mit !important, sonst gewinnt irgendein "background: none !important" */
    background: transparent !important;
    background-color: transparent !important;
    /* Layer 1 = Glas-Reflex (oben), Layer 2 = Underline (unten) */
    background-image: linear-gradient( 180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.05) 40%, rgba(255,255,255,0) 72% ), linear-gradient( 90deg, rgba(232,213,166,0) 0%, rgba(232,213,166,.95) 25%, rgba(195,167,105,.95) 50%, rgba(232,213,166,.95) 75%, rgba(232,213,166,0) 100% ) !important;
    background-repeat: no-repeat !important;
    /* Glas immer sichtbar; Underline default unsichtbar (0%) */
    background-size: 100% 72%, 0% 2px !important;
    /* Glas oben; Underline unten nahe am Rand */
    background-position: 0 0, 12px calc(100% - 2px) !important;
    background-clip: padding-box, border-box;
}

    /* 3) Hover/Active: Underline einblenden */
    .tabs-card .glass-subtabs .nav-link:hover,
    .tabs-card .glass-subtabs .nav-link:focus,
    .tabs-card .glass-subtabs .nav-link.active {
        background-size: 100% 72%, calc(100% - 24px) 2px !important;
        /* optional: zusätzlicher Bottom-Glow */
        box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.35), 0 2px 0 rgba(0,0,0,.12), 0 10px 26px rgba(0,0,0,.12), 0 18px 22px -18px rgba(195,167,105,.55);
    }

/* =========================================================
   Personen-Tabs: keine Umrandung im Normalzustand
   - nur Gold-Underline bei Hover/Active
   ========================================================= */

.tabs-card .glass-subtabs .nav-link {
    border: none !important;
    outline: none !important;
    /* Optional: Hintergrund wirklich "unsichtbar" halten */
    box-shadow: none !important;
}

    /* Beim Hover/Active weiterhin nur Unterstrich + (optional) minimaler Lift */
    .tabs-card .glass-subtabs .nav-link:hover,
    .tabs-card .glass-subtabs .nav-link:focus,
    .tabs-card .glass-subtabs .nav-link.active {
        border: none !important;
        /* Wenn du gar keinen "Lift" willst, entferne die nächste Zeile */
        transform: translateY(-1px);
        /* Wenn du keinen zusätzlichen Schatten willst, kannst du die Box-Shadow Zeile entfernen */
        box-shadow: 0 18px 22px -18px rgba(195,167,105,.55) !important;
    }

/* FAQ Accordion – passend zum dunklen/glasigen Look */
.tabs-card .faq-accordion .accordion-item {
    background: transparent;
    border: 1px solid var(--card-border, rgba(255,255,255,.12));
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: .75rem;
    box-shadow: 0 10px 26px rgba(0,0,0,.10);
}

.tabs-card .faq-accordion .accordion-button {
    background: transparent !important;
    color: var(--text-on-dark, #fff) !important;
    font-weight: 650;
    letter-spacing: .2px;
    padding: 1rem 1.1rem;
}

    .tabs-card .faq-accordion .accordion-button:not(.collapsed) {
        box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);
    }

    .tabs-card .faq-accordion .accordion-button::after {
        filter: invert(1);
        opacity: .75;
    }

.tabs-card .faq-accordion .accordion-body {
    color: rgba(255,255,255,.92);
}

    .tabs-card .faq-accordion .accordion-body .text-muted,
    .tabs-card .faq-accordion .accordion-body .form-text {
        color: rgba(255,255,255,.62) !important;
    }

/* =========================================================
   Action Buttons im Stil der Top-Tabs (Glass + Gold Border on hover)
   ========================================================= */

.tabs-card .glass-tab-action {
    background: transparent;
    background-color: transparent;

    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;

    color: rgba(255,255,255,.92);
    text-decoration: none;

    font-weight: 650;
    letter-spacing: .2px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;

    padding: .75rem 1rem;
    min-height: 44px;

    cursor: pointer;
    user-select: none;

    position: relative;
    overflow: hidden;
    isolation: isolate;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -1px 0 rgba(0,0,0,.35),
        0 2px 0 rgba(0,0,0,.12),
        0 10px 26px rgba(0,0,0,.12);

    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

/* Gold border (border-only) via mask */
.tabs-card .glass-tab-action::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;

    background: linear-gradient(135deg, #E8D5A6, #C3A769, #E8D5A6);

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: 0;
    pointer-events: none;
    z-index: -2;
}

/* Glass highlight */
.tabs-card .glass-tab-action::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,.10) 0%,
        rgba(255,255,255,.05) 38%,
        rgba(255,255,255,0) 72%
    );
    opacity: .55;
    pointer-events: none;
    z-index: -1;
}

.tabs-card .glass-tab-action:hover,
.tabs-card .glass-tab-action:focus {
    transform: translateY(-1px);
    filter: saturate(1.04);

    border-color: rgba(195,167,105,.70); /* fallback */
    box-shadow:
        0 0 0 1px rgba(195,167,105,.22),
        0 0 14px rgba(195,167,105,.28),
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -1px 0 rgba(0,0,0,.35),
        0 3px 0 rgba(0,0,0,.12),
        0 12px 30px rgba(0,0,0,.14);
}

.tabs-card .glass-tab-action:hover::before,
.tabs-card .glass-tab-action:focus::before {
    opacity: 1;
}

.tabs-card .glass-tab-action:focus-visible {
    outline: 2px solid rgba(232,213,166,.35);
    outline-offset: 2px;
}

/* Small variant */
.tabs-card .glass-tab-action--sm {
    padding: .45rem .75rem;
    min-height: 34px;
    border-radius: 10px;
    font-size: .9rem;
}


/* =========================================================
   FilePicker "Durchsuchen" Button im Stil des alten Google-Maps Buttons
   (Bootstrap Primary / small)
   ========================================================= */

.tabs-card .photo-file::file-selector-button {
    background: var(--bs-primary, #0d6efd);
    border: 1px solid var(--bs-primary, #0d6efd);
    color: #fff;

    padding: .35rem .65rem;
    border-radius: 10px;

    margin-right: .75rem;

    font-weight: 600;
    letter-spacing: .2px;

    cursor: pointer;
    transition: transform .12s ease, filter .12s ease;
}

.tabs-card .photo-file:hover::file-selector-button {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

/* Fallback (ältere WebKit-Implementierungen) */
.tabs-card .photo-file::-webkit-file-upload-button {
    background: var(--bs-primary, #0d6efd);
    border: 1px solid var(--bs-primary, #0d6efd);
    color: #fff;

    padding: .35rem .65rem;
    border-radius: 10px;

    margin-right: .75rem;

    font-weight: 600;
    letter-spacing: .2px;

    cursor: pointer;
    transition: transform .12s ease, filter .12s ease;
}

.tabs-card .photo-file:hover::-webkit-file-upload-button {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

/* =========================================================
   Global Action Buttons im Stil der Top-Tabs (Glass + Gold Border on hover)
   Gilt überall (auch oberhalb der .tabs-card)
   ========================================================= */

.glass-tab-action {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 12px;
    color: rgba(255,255,255,.92) !important;
    text-decoration: none !important;
    font-weight: 650;
    letter-spacing: .2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .75rem 1rem;
    min-height: 44px;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.35), 0 2px 0 rgba(0,0,0,.12), 0 10px 26px rgba(0,0,0,.12);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

    /* Gold border (border-only) via mask */
    .glass-tab-action::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 1px;
        border-radius: inherit;
        background: linear-gradient(135deg, #E8D5A6, #C3A769, #E8D5A6);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        pointer-events: none;
        z-index: -2;
    }

    /* Glass highlight */
    .glass-tab-action::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.05) 38%, rgba(255,255,255,0) 72% );
        opacity: .55;
        pointer-events: none;
        z-index: -1;
    }

    .glass-tab-action:hover,
    .glass-tab-action:focus {
        transform: translateY(-1px);
        filter: saturate(1.04);
        box-shadow: 0 0 0 1px rgba(195,167,105,.22), 0 0 14px rgba(195,167,105,.28), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.35), 0 3px 0 rgba(0,0,0,.12), 0 12px 30px rgba(0,0,0,.14);
    }

        .glass-tab-action:hover::before,
        .glass-tab-action:focus::before {
            opacity: 1;
        }

    .glass-tab-action:focus-visible {
        outline: 2px solid rgba(232,213,166,.35);
        outline-offset: 2px;
    }

/* Small variant */
.glass-tab-action--sm {
    padding: .45rem .75rem;
    min-height: 34px;
    border-radius: 10px;
    font-size: .9rem;
}


/* =========================================================
   FilePicker "Durchsuchen" im Stil von Bootstrap btn-primary btn-sm
   - nutzt Bootstrap Vars (Theme-freundlich), kein Hardcode-Blau
   ========================================================= */

:root {
    --file-primary-rgb: var(--bs-primary-rgb, 13,110,253);
}

.photo-file::file-selector-button {
    background: rgba(var(--file-primary-rgb), 1) !important;
    border: 1px solid rgba(var(--file-primary-rgb), 1) !important;
    color: #fff !important;
    padding: .25rem .5rem;
    border-radius: .375rem;
    margin-right: .75rem;
    font-weight: 600;
    font-size: .875rem;
    line-height: 1.5;
    cursor: pointer;
    transition: transform .12s ease, filter .12s ease;
}

.photo-file:hover::file-selector-button {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

/* WebKit fallback */
.photo-file::-webkit-file-upload-button {
    background: rgba(var(--file-primary-rgb), 1) !important;
    border: 1px solid rgba(var(--file-primary-rgb), 1) !important;
    color: #fff !important;
    padding: .25rem .5rem;
    border-radius: .375rem;
    margin-right: .75rem;
    font-weight: 600;
    font-size: .875rem;
    line-height: 1.5;
    cursor: pointer;
    transition: transform .12s ease, filter .12s ease;
}

.photo-file:hover::-webkit-file-upload-button {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

/* =========================================================
   Badge-Style als klickbarer Button (für <a> und <button>)
   ========================================================= */

.badge-action {
    cursor: pointer;
    user-select: none;
    /* Badge-Look beibehalten, aber als Button angenehm */
    padding: .45rem .75rem;
    border-radius: 999px;
    /* <button> Defaults neutralisieren */
    appearance: none;
    -webkit-appearance: none;
    /* Align */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    /* Text */
    text-decoration: none !important;
    /* Hover */
    transition: box-shadow .25s ease, transform .15s ease, filter .25s ease;
}

button.badge-action {
    background: none; /* badge-goldglow setzt background via background shorthand */
    border: none; /* badge-outline/badge-goldglow setzen border korrekt */
}

/* =========================================================
   FilePicker "Durchsuchen" – Gold Fill + schwarze Schrift
   ========================================================= */

.photo-file::file-selector-button {
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(135deg, #E8D5A6, #C3A769, #E8D5A6) !important;
    border: 1px solid #B49451 !important;
    color: #111 !important;
    padding: .25rem .55rem !important;
    border-radius: .5rem !important;
    margin-right: .75rem !important;
    font-weight: 700 !important;
    letter-spacing: .2px !important;
    cursor: pointer;
    transition: transform .12s ease, filter .12s ease, box-shadow .2s ease;
}

.photo-file:hover::file-selector-button {
    filter: brightness(1.03) saturate(1.05);
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(195,167,105,.35), 0 0 14px rgba(195,167,105,.22);
}

/* WebKit fallback */
.photo-file::-webkit-file-upload-button {
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(135deg, #E8D5A6, #C3A769, #E8D5A6) !important;
    border: 1px solid #B49451 !important;
    color: #111 !important;
    padding: .25rem .55rem !important;
    border-radius: .5rem !important;
    margin-right: .75rem !important;
    font-weight: 700 !important;
    letter-spacing: .2px !important;
    cursor: pointer;
    transition: transform .12s ease, filter .12s ease, box-shadow .2s ease;
}

.photo-file:hover::-webkit-file-upload-button {
    filter: brightness(1.03) saturate(1.05);
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(195,167,105,.35), 0 0 14px rgba(195,167,105,.22);
}

/* =========================================================
   Hochladen-Button: Badge-Look, aber Button-Größe wie vorher
   ========================================================= */
.badge-action--btn {
    padding: .65rem 1.05rem !important;
    min-height: 44px;
    border-radius: 12px !important;
    font-size: 1rem;
}

/* =========================================================
   FilePicker "Durchsuchen" – Gold + schwarze Schrift (erzwingend)
   (falls Klassen/Browser bisher etwas überschrieben haben)
   ========================================================= */
#tab-gallery input[type="file"]::file-selector-button {
    background: linear-gradient(135deg, #E8D5A6, #C3A769, #E8D5A6) !important;
    border: 1px solid #B49451 !important;
    color: #111 !important;

    padding: .25rem .55rem !important;
    border-radius: .5rem !important;
    margin-right: .75rem !important;

    font-weight: 700 !important;
    letter-spacing: .2px !important;

    cursor: pointer !important;
}

#tab-gallery input[type="file"]:hover::file-selector-button {
    filter: brightness(1.03) saturate(1.05);
    box-shadow: 0 0 0 1px rgba(195,167,105,.35), 0 0 14px rgba(195,167,105,.22);
    transform: translateY(-1px);
}

/* WebKit fallback */
#tab-gallery input[type="file"]::-webkit-file-upload-button {
    background: linear-gradient(135deg, #E8D5A6, #C3A769, #E8D5A6) !important;
    border: 1px solid #B49451 !important;
    color: #111 !important;

    padding: .25rem .55rem !important;
    border-radius: .5rem !important;
    margin-right: .75rem !important;

    font-weight: 700 !important;
    letter-spacing: .2px !important;

    cursor: pointer !important;
}

#tab-gallery input[type="file"]:hover::-webkit-file-upload-button {
    filter: brightness(1.03) saturate(1.05);
    box-shadow: 0 0 0 1px rgba(195,167,105,.35), 0 0 14px rgba(195,167,105,.22);
    transform: translateY(-1px);
}

/* =========================================================
   Photo Modal: Prev/Next Buttons (tap friendly)
   ========================================================= */
.photo-modal-body {
    position: relative;
}

.photo-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 14px;

    border: 1px solid rgba(255,255,255,.22);
    background: rgba(0,0,0,.35);
    color: #fff;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 28px;
    line-height: 1;

    cursor: pointer;
    user-select: none;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 10px 22px rgba(0,0,0,.20);

    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.photo-nav-btn:hover {
    transform: translateY(-50%) translateY(-1px);
    box-shadow:
        0 0 0 1px rgba(195,167,105,.25),
        0 0 14px rgba(195,167,105,.22),
        inset 0 1px 0 rgba(255,255,255,.08),
        0 12px 26px rgba(0,0,0,.22);
}

.photo-nav-prev { left: 12px; }
.photo-nav-next { right: 12px; }

/* =========================================================
   Hochladen-Button: Badge-Look, aber Button-Größe wie vorher
   ========================================================= */
.badge-action--btn {
    padding: .65rem 1.05rem !important;
    min-height: 44px;
    border-radius: 12px !important;
    font-size: 1rem;
}

/* =========================================================
   FilePicker "Durchsuchen" – Gold + schwarze Schrift (erzwingend)
   (falls Klassen/Browser bisher etwas überschrieben haben)
   ========================================================= */
#tab-gallery input[type="file"]::file-selector-button {
    background: linear-gradient(135deg, #E8D5A6, #C3A769, #E8D5A6) !important;
    border: 1px solid #B49451 !important;
    color: #111 !important;
    padding: .25rem .55rem !important;
    border-radius: .5rem !important;
    margin-right: .75rem !important;
    font-weight: 700 !important;
    letter-spacing: .2px !important;
    cursor: pointer !important;
}

#tab-gallery input[type="file"]:hover::file-selector-button {
    filter: brightness(1.03) saturate(1.05);
    box-shadow: 0 0 0 1px rgba(195,167,105,.35), 0 0 14px rgba(195,167,105,.22);
    transform: translateY(-1px);
}

/* WebKit fallback */
#tab-gallery input[type="file"]::-webkit-file-upload-button {
    background: linear-gradient(135deg, #E8D5A6, #C3A769, #E8D5A6) !important;
    border: 1px solid #B49451 !important;
    color: #111 !important;
    padding: .25rem .55rem !important;
    border-radius: .5rem !important;
    margin-right: .75rem !important;
    font-weight: 700 !important;
    letter-spacing: .2px !important;
    cursor: pointer !important;
}

#tab-gallery input[type="file"]:hover::-webkit-file-upload-button {
    filter: brightness(1.03) saturate(1.05);
    box-shadow: 0 0 0 1px rgba(195,167,105,.35), 0 0 14px rgba(195,167,105,.22);
    transform: translateY(-1px);
}

/* =========================================================
   Photo Modal: Prev/Next Buttons (tap friendly)
   ========================================================= */
.photo-modal-body {
    position: relative;
}

.photo-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(0,0,0,.35);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.20);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

    .photo-nav-btn:hover {
        transform: translateY(-50%) translateY(-1px);
        box-shadow: 0 0 0 1px rgba(195,167,105,.25), 0 0 14px rgba(195,167,105,.22), inset 0 1px 0 rgba(255,255,255,.08), 0 12px 26px rgba(0,0,0,.22);
    }

.photo-nav-prev {
    left: 12px;
}

.photo-nav-next {
    right: 12px;
}

/* =========================================================
   Photo Modal: fixe Größe, Bild skaliert (kein "Springen")
   ========================================================= */

/* Dialoggröße fixieren (Viewport-basiert) */
#photoModal .modal-dialog {
    width: min(1000px, 92vw);
    max-width: min(1000px, 92vw);
    margin: 1.25rem auto;
}

#photoModal .modal-content {
    height: min(78vh, 720px);
}

/* Body fix, zentriert, keine automatische Größenänderung */
#photoModal .modal-body.photo-modal-body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Bild skaliert innerhalb, ohne Layout zu ändern */
#photoModalImg {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Mobile: etwas mehr Höhe nutzen */
@media (max-width: 576px) {
    #photoModal .modal-dialog {
        width: 96vw;
        max-width: 96vw;
        margin: .75rem auto;
    }

    #photoModal .modal-content {
        height: 84vh;
    }
}

/* =========================================================
   Photo Modal: feste Größe (Viewport), Bild skaliert in Box (kein Springen)
   ========================================================= */

#photoModal {
    /* Bootstrap 5 nutzt diese Variable für die Dialogbreite */
    --bs-modal-width: 1000px;
}

    /* Breite via Bootstrap-Variable + Viewport-Limit */
    #photoModal .modal-dialog {
        max-width: min(var(--bs-modal-width), 92vw);
        width: min(var(--bs-modal-width), 92vw);
        /* Höhe fix: Dialog soll nicht vom Bild getrieben werden */
        height: 84vh;
        margin: 1rem auto;
    }

    /* Content füllt den Dialog in der Höhe */
    #photoModal .modal-content {
        height: 100%;
    }

    /* Body soll den verbleibenden Platz unter dem Header einnehmen */
    #photoModal .modal-body.photo-modal-body {
        flex: 1 1 auto;
        min-height: 0; /* sehr wichtig, sonst wächst der flex-child */
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }


/*
  Bild bekommt eine feste Box (100% x 100% der Body-Fläche),
  und skaliert in dieser Box via object-fit. Damit vergrößert es nie den Dialog.
*/
#photoModalImg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
}

/* Mobile: etwas mehr Höhe nutzen, etwas weniger Rand */
@media (max-width: 576px) {
    #photoModal {
        --bs-modal-width: 96vw;
    }

    #photoModal .modal-dialog {
        height: 88vh;
        margin: .5rem auto;
    }

}


/* =========================================================
   Photo Lightbox (Bootstrap Modal + Carousel) — stable sizing
   Inspiration: bs5-lightbox / modal+carousel patterns
   ========================================================= */

.modal-photo .modal-dialog {
    /* zentral + feste Größe im Viewport (nicht bildgetrieben) */
    width: min(1200px, 96vw);
    max-width: min(1200px, 96vw);
    height: min(82vh, 820px);
    max-height: min(82vh, 820px);
    margin: 0 auto;
}

.modal-photo .modal-content.photo-lightbox {
    height: 100%;
    background: #000;
    border: 0;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* verhindert Scroll im Modal */
}

.modal-photo .photo-lightbox__header {
    background: rgba(0,0,0,.92);
    border-bottom: 1px solid rgba(255,255,255,.10);
}

.modal-photo .modal-body {
    flex: 1 1 auto;
    min-height: 0; /* entscheidend: Body darf nicht Content treiben */
    overflow: hidden; /* keine Scrollbars */
    background: #000;
}

/* Grid: LeftBar | PhotoArea | RightBar */
.modal-photo .photo-lightbox__grid {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) 96px;
}

.modal-photo .photo-lightbox__side {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-photo .photo-lightbox__frame {
    min-width: 0;
    height: 100%;
    overflow: hidden;
    background: #000;
}

.modal-photo .photo-lightbox__carousel,
.modal-photo .carousel-inner,
.modal-photo .carousel-item {
    height: 100%;
}

.modal-photo .carousel-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bild: immer in festen Bereich skaliert */
.modal-photo .photo-lightbox__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    display: block;
}

/* Nav Buttons: Tab-Buttons Look (Glas + Goldrand nur Hover/Focus) */
.modal-photo .photo-lightbox__navbtn {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.95);
    font-size: 34px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    transition: transform .12s ease, box-shadow .20s ease, border-color .20s ease, filter .20s ease;
}

    .modal-photo .photo-lightbox__navbtn:hover,
    .modal-photo .photo-lightbox__navbtn:focus-visible {
        border-color: rgba(232,213,166,.78);
        box-shadow: 0 0 0 1px rgba(232,213,166,.35), 0 0 18px rgba(232,213,166,.28), inset 0 1px 0 rgba(255,255,255,.08);
        transform: translateY(-1px);
        filter: saturate(1.05);
        outline: none;
    }

    .modal-photo .photo-lightbox__navbtn:active {
        transform: translateY(0);
    }

/* Mobile: Fullscreen, Sidebars schmaler */
@media (max-width: 576px) {
    .modal-photo .modal-dialog {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        margin: 0;
    }

    .modal-photo .modal-content.photo-lightbox {
        border-radius: 0;
    }

    .modal-photo .photo-lightbox__grid {
        grid-template-columns: 72px minmax(0, 1fr) 72px;
    }

    .modal-photo .photo-lightbox__navbtn {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        font-size: 30px;
    }
}

/* =========================================================
   Bootstrap Carousel FIX:
   Niemals display:flex / d-flex auf .carousel-item erzwingen.
   Sonst sind mehrere Slides sichtbar -> "kurz anderes Bild, dann zurück".
   ========================================================= */

.modal-photo .carousel-item {
    display: none; /* Bootstrap Default-Logik wieder herstellen */
    height: 100%;
}

    .modal-photo .carousel-item.active,
    .modal-photo .carousel-item-next,
    .modal-photo .carousel-item-prev {
        display: block; /* während Transition sichtbar */
    }

/* Zentrierung NICHT auf carousel-item, sondern auf Wrapper im Slide */
.modal-photo .photo-lightbox__slide {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Bild skaliert sauber in den fixen Bereich */
.modal-photo .photo-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    background: #000;
}

/* Scroll-Puffer, damit scrollIntoView/start auch bei kurzen Seiten funktioniert */
main::after {
    content: "";
    display: block;
    height: 60vh; /* flexibel: 45% der Viewporthöhe */
}

html {
    scroll-padding-top: calc(var(--nav-offset, 90px) + 12px);
}

#tabs-card {
/*  scroll-margin-top: 72px; */
    scroll-margin-top: calc(var(--nav-offset, 40px) ); /* gleiche Höhe */
}

/* =========================================================
   BRAND (Navbar) – layout-stabil + responsive (FINAL OVERRIDE)
   Ziel:
   - Logo optisch skalierbar, ohne dass die Navbar-Höhe „mitwächst“
   - „Unsere Hochzeit“ bleibt auch auf Mobile sichtbar (wird skaliert + ellipsis)
   - Overrides sind bewusst am Dateiende platziert, um Duplikate zu überstimmen
   ========================================================= */
.app-body .app-navbar {
    --brand-badge-size: 80px;     /* Layout-Box (beeinflusst Höhe) */
    --brand-badge-scale: 1.6;    /* Optische Skalierung (beeinflusst NICHT die Layout-Höhe) */
}

.app-body .app-navbar .navbar-brand.brand-combo {
    padding: .45rem .60rem !important; /* getrennt von .nav-link Padding */
    min-width: 0; /* wichtig für ellipsis in Flex */
}

.app-body .app-navbar .brand-combo .brand-badge {
    width: var(--brand-badge-size) !important;
    height: var(--brand-badge-size) !important;
    flex: 0 0 var(--brand-badge-size);
    display: block;
    object-fit: contain;
    transform: scale(var(--brand-badge-scale));
    transform-origin: left center;
}

.app-body .app-navbar .brand-combo .brand-swash {
    display: inline-block !important; /* überstimmt mobile 'display:none' */
    min-width: 0;
    max-width: min(70vw, 320px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    /* lesbar + edel, ohne die Navbar zu sprengen */
    font-size: clamp(18px, 4.6vw, 28px) !important;
    line-height: 1;
}

@media (max-width: 420px) {
    .app-body .app-navbar .brand-combo .brand-swash {
        max-width: 60vw;
        font-size: clamp(16px, 5.6vw, 22px) !important;
    }
}

/* =========================================================
   NAVBAR BRAND (CANONICAL)
   - hält die Navbar-Höhe stabil (Logo wird visuell via transform skaliert)
   - verhindert Abschneiden der Script-Schrift
   - verhindert, dass "Unsere Hochzeit" auf Mobile verschwindet
   Tuning:
     --brand-badge-box   = Layout-Größe (beeinflusst Navbar-Höhe)
     --brand-badge-scale = visuelle Skalierung (beeinflusst Navbar-Höhe NICHT)
   ========================================================= */

.app-body .app-navbar .navbar-brand.brand-combo {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .25rem .55rem !important;
    line-height: 1.2 !important;
    overflow: visible;
    white-space: nowrap;
}

.app-body .app-navbar .navbar-brand.brand-combo .brand-badge {
    --brand-badge-box: 70px;
    --brand-badge-scale: 1.50;
    width: var(--brand-badge-box) !important;
    height: var(--brand-badge-box) !important;
    flex: 0 0 var(--brand-badge-box);
    display: block;
    object-fit: contain;
    transform: scale(var(--brand-badge-scale));
    transform-origin: center;
}

.app-body .app-navbar .navbar-brand.brand-combo .brand-swash {
    display: inline-block !important;
    font-family: "Great Vibes", "Segoe Script", "Brush Script MT", cursive;
    /* Layout bleibt kompakt; optische Größe wird per transform skaliert */
    --brand-swash-scale: 1.20;
    font-size: clamp(20px, 4.2vw, 32px); !important;
    line-height: 1.18 !important;
    padding-block: .08rem; /* gibt Ober-/Unterlängen Luft -> kein Clipping */
    transform: scale(var(--brand-swash-scale)) !important;
    transform-origin: left center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(70vw, 520px);
}

.app-body .app-navbar {
    --bs-navbar-padding-y: .60rem; /* größer = höherer Balken */
}
    .app-body .app-navbar .navbar-brand.brand-combo .brand-swash {
        display: inline-block !important;
        font-size: var(--brand-badge-box, 36px) !important;
        line-height: 1.05 !important;
        padding-block: .12rem;
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }


@media (max-width: 420px) {
    .app-body .app-navbar .navbar-brand.brand-combo .brand-swash {
        --brand-swash-scale: 1.05;
        font-size: clamp(16px, 5.0vw, 22px) !important;
        max-width: min(62vw, 240px);
    }
}

/* Erzwingt: Button bleibt immer in derselben Zeile wie H2 */
.welcome-head__row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between;
    gap: .85rem;
    min-width: 0;
}

/* Titel darf schrumpfen (sonst drückt er den Badge nach unten) */
.welcome-head__title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Badge darf NICHT schrumpfen und bleibt rechts */
.welcome-head__status.badge-status {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Größen-Tuning (damit es auf Mobile in einer Zeile bleibt) */
.welcome-head__title {
    font-size: clamp(18px, 4.4vw, 28px);
    line-height: 1.08;
}

.welcome-head__status.badge-status {
    font-size: clamp(14px, 3.4vw, 18px);
    padding: .42rem .80rem;
    line-height: 1;
}

/* Mehr Abstand zwischen (Titel+Button) und der Zierlinie */
.welcome-head__rule.section-title {
    margin-top: .75rem !important; /* vorher zu klein -> größer */
}

/* Extra-schmal: beide leicht reduzieren, damit garantiert 1 Zeile bleibt */
@media (max-width: 420px) {
    .welcome-head__title {
        font-size: clamp(17px, 4.8vw, 22px);
    }

    .welcome-head__status.badge-status {
        font-size: clamp(13px, 3.8vw, 16px);
        padding: .38rem .66rem;
    }
}


/* Login-Card auf Landing: etwas kleiner + weiter unten, ohne Scroll zu erzwingen */
.landing .login-card {
    margin-bottom: 0;
}

.landing .login-card .card-body {
    padding: 1rem 1rem .9rem !important;
}

.landing .login-card .form-control-lg {
    font-size: 1rem;
    padding: .55rem .9rem;
}

.landing .login-card .btn-primary {
    padding: .6rem 1rem;
}