/* =========================================================
   Anna & Maik · 19.12.2026 · Baden-Baden
   ========================================================= */

/* =========================================================
   SCHRIFTEN – lokal eingebunden
   ---------------------------------------------------------
   Die Schriften liegen im Unterordner "fonts" und werden von
   dort geladen. Dadurch wird keine Besucher-IP mehr an Google
   uebertragen. Solange die Dateien fehlen, greifen automatisch
   die Systemschriften aus --serif und --sans.
   ========================================================= */
@font-face {
    font-family: 'Playfair Display';
    src: url('fonts/playfair-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Playfair Display';
    src: url('fonts/playfair-500.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat-300.woff2') format('woff2');
    font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/montserrat-500.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}

:root {
    --gold: #c5a059;
    --gold-dark: #a8874a;
    --ink: #2e2b28;
    --muted: #6b655e;
    --cream: #faf7f2;
    --line: #e6ded1;
    --serif: 'Playfair Display', Georgia, serif;
    --sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --nav-h: 72px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-h);
}

body {
    margin: 0;
    font-family: var(--sans);
    font-weight: 300;
    color: var(--ink);
    line-height: 1.7;
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: 0.01em; }

/* =========================================================
   INTRO: UMSCHLAG-ANIMATION
   ---------------------------------------------------------
   Das Siegel sitzt im Video etwa mittig (x 50 %, y 51 %) und
   hat rund 41 % der Videobreite. Da das Video mit object-fit:
   cover skaliert wird, ergibt sich die Ringgröße aus:
   41 % der gerenderten Breite = max(41vw, 32.8vh).
   Videoformat: 4:5 (hochkant).
   ========================================================= */
/* Scrollsperre. Auf dem iPhone reicht overflow:hidden nicht aus – erst
   position:fixed verhindert zuverlässig, dass die Seite unter dem Intro
   wegscrollt und dabei oben angeschnitten wirkt. */
body.intro-locked {
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: #efe9e1;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 1s ease;
}
#intro-overlay.fade-out { opacity: 0; pointer-events: none; }

#intro-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------------------------------------------------------
   Klickfläche direkt auf dem Siegel
   ---------------------------------------------------------
   Video: 720 × 1280 (9:16). Das Siegel darin sitzt bei
   55,5 % der Breite und genau auf halber Höhe, sein
   Durchmesser beträgt 62,5 % der Breite.

   Bei object-fit: cover ist die dargestellte Videobreite
   max(100vw, 56.25vh) und die Höhe max(177.78vw, 100vh).
   Daraus ergeben sich Größe und Versatz unten.

   ACHTUNG: Position und Größe werden per JavaScript gesetzt,
   siehe SIEGEL_X, SIEGEL_Y und SIEGEL_D in index.html. Die
   Werte hier sind nur ein Notbehelf, falls JavaScript
   ausfällt. Zum Justieren also nicht hier ändern.
   --------------------------------------------------------- */
#seal-button {
    position: absolute;
    top:  50%;
    left: 54%;
    transform: translate(-50%, -50%);
    width:  max(62.5vw, 35.2vh);
    height: max(62.5vw, 35.2vh);
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
#seal-button:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }

/* Pulsierender Ring als Hinweis */
.seal-ring {
    position: absolute;
    inset: -4%;
    border-radius: 50%;
    border: 2px solid rgba(197,160,89,0.85);
    box-shadow: 0 0 24px rgba(197,160,89,0.45);
    animation: sealPulse 2.4s ease-out infinite;
}
@keyframes sealPulse {
    0%   { transform: scale(0.94); opacity: 0.85; }
    70%  { transform: scale(1.12); opacity: 0; }
    100% { transform: scale(1.12); opacity: 0; }
}
#seal-button:hover .seal-ring { animation-duration: 1.4s; }

#intro-hint {
    position: absolute;
    bottom: 9%;
    left: 0;
    right: 0;
    text-align: center;
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #8a7b63;
    pointer-events: none;
    animation: hintFade 2.8s ease-in-out infinite;
}
@keyframes hintFade {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
}

#intro-skip {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: none;
    border: 0;
    color: #a3937a;
    font-family: var(--sans);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 10px;
}
#intro-skip:hover { color: var(--gold); }

/* Ring und Hinweis erscheinen erst, wenn das Siegelbild geladen ist */
#seal-button,
#intro-hint {
    opacity: 0;
    transition: opacity 0.6s ease;
}
#intro-overlay.bereit #seal-button,
#intro-overlay.bereit #intro-hint {
    opacity: 1;
}

/* Während das Video läuft: Ring und Hinweis wieder ausblenden */
#intro-overlay.playing #seal-button,
#intro-overlay.playing #intro-hint {
    opacity: 0;
    pointer-events: none;
}

/* Auf breiten Bildschirmen wird das hochkante Intro-Video sonst extrem
   herangezoomt. Dort zeigen wir es vollständig, der cremefarbene
   Hintergrund füllt die Ränder. Die Ringgeometrie kehrt sich dabei
   von max() auf min() um. */
@media (min-aspect-ratio: 10/16) {
    #intro-video { object-fit: contain; }

    #seal-button {
        width:  min(62.5vw, 35.2vh);
        height: min(62.5vw, 35.2vh);
    }
}

/* =========================================================
   NAVIGATION
   ========================================================= */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 32px;
    height: var(--nav-h);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: background 0.35s ease, box-shadow 0.35s ease;
}

.logo {
    font-family: var(--serif);
    font-size: 1.35rem;
    letter-spacing: 0.08em;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 1px 6px rgba(0,0,0,0.45);
    transition: color 0.35s ease, text-shadow 0.35s ease;
}

.desktop-nav { display: flex; align-items: center; gap: 28px; }

.desktop-nav a {
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow: 0 1px 6px rgba(0,0,0,0.45);
    transition: color 0.3s ease, opacity 0.3s ease;
}
.desktop-nav a:hover { opacity: 0.75; }

.btn-nav {
    border: 1px solid rgba(255,255,255,0.85);
    padding: 9px 22px;
    border-radius: 2px;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.btn-nav:hover { background: #fff; color: var(--ink) !important; opacity: 1 !important; text-shadow: none; }

/* Zustand nach dem Scrollen */
.navbar.scrolled {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
.navbar.scrolled .logo,
.navbar.scrolled .desktop-nav a { color: var(--ink); text-shadow: none; }
.navbar.scrolled .btn-nav { border-color: var(--gold); color: var(--gold); }
.navbar.scrolled .btn-nav:hover { background: var(--gold); color: #fff; }
.navbar.scrolled .burger span { background: var(--ink); box-shadow: none; }

/* Burger */
.burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.burger span {
    display: block;
    height: 2px;
    width: 100%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    transition: background 0.3s ease;
}

/* Mobile-Overlay */
.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(46,43,40,0.97);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 26px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}
.nav-overlay.active { opacity: 1; visibility: visible; }
.nav-overlay a {
    color: #fff;
    text-decoration: none;
    font-family: var(--serif);
    font-size: 1.7rem;
    letter-spacing: 0.05em;
}
.nav-overlay a:hover { color: var(--gold); }
.close-btn {
    position: absolute;
    top: 18px;
    right: 26px;
    background: none;
    border: 0;
    color: #fff;
    font-size: 2.6rem;
    line-height: 1;
    cursor: pointer;
}

/* =========================================================
   HERO MIT VIDEO
   ========================================================= */
.hero {
    position: relative;
    height: 100vh;
    min-height: 560px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;      /* Text im unteren Drittel – auf allen Geräten gleich */
    align-items: center;
    padding-bottom: 13vh;
    text-align: center;
    color: #fff;
    overflow: hidden;
    background: #241f1b;
}

/* ---------------------------------------------------------
   Hochformat-Video (9:16) in querformatiger Hero-Sektion
   ---------------------------------------------------------
   Standard (Tablet/Desktop): Video vollstaendig sichtbar
   (object-fit: contain), die Raender fuellt eine unscharfe,
   mitlaufende Kopie auf dem Canvas.
   Schmale Bildschirme (Hochkant-Handy): Video fuellt die
   Flaeche formatfuellend, da die Formate fast identisch sind.
   --------------------------------------------------------- */
.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #241f1b;
    pointer-events: none;
}

/* Ruhiger Hintergrund, bis das Video laeuft */
.hero-media::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, #3a322b 0%, #1c1815 100%);
}

/* Unscharfer, mitlaufender Hintergrund */
.hero-ambient {
    position: absolute;
    inset: -8%;
    width: 116%;
    height: 116%;
    object-fit: cover;
    filter: blur(42px) saturate(1.25) brightness(0.62);
    transform: scale(1.1);
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.hero-video.video-failed { display: none; }

/* Schmale/hochkante Bildschirme: formatfuellend statt eingepasst */
@media (max-aspect-ratio: 10/16) {
    .hero-video { object-fit: cover; }
    .hero-ambient, .hero-media::before { display: none; }

    /* Auf dem Handy füllt das Video die gesamte Fläche, der Text liegt also
       direkt auf der Szene. Deshalb hier ein kräftigerer Verlauf nach unten,
       damit die Schrift auf hellen Bildinhalten lesbar bleibt. Am Desktop
       liegt der Text auf dem unscharfen Rand und braucht das nicht. */
    .hero-overlay {
        background: linear-gradient(to bottom,
            rgba(0,0,0,0.40) 0%,
            rgba(0,0,0,0.14) 30%,
            rgba(0,0,0,0.45) 62%,
            rgba(0,0,0,0.82) 100%);
    }

    /* Datum in zwei bewusst gesetzten Zeilen statt mit Zufallsumbruch */
    .date span { display: block; }
    .date .date-punkt { display: none; }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.18) 40%, rgba(0,0,0,0.66) 100%);
}

.hero-content { position: relative; z-index: 2; padding: 0 20px; }

.eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    margin: 0 0 14px;
    opacity: 0.9;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.hero-content h1 {
    font-size: clamp(3rem, 9vw, 6rem);
    margin: 0;
    line-height: 1.05;
    text-shadow: 0 3px 18px rgba(0,0,0,0.55);
}

.date {
    font-size: clamp(0.95rem, 2.2vw, 1.2rem);
    font-weight: 300;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-top: 22px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}

/* Knopf zum erneuten Abspielen des Hero-Videos */
.hero-replay {
    position: absolute;
    right: 22px;
    bottom: 26px;
    z-index: 3;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 50%;
    background: rgba(0,0,0,0.22);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s ease, border-color 0.3s ease;
    padding: 0;
}
.hero-replay:hover { opacity: 1; border-color: var(--gold); }

@media (max-width: 860px) {
    .hero-replay { right: 16px; bottom: 18px; width: 36px; height: 36px; }
}

/* Scroll-Pfeil */
.scroll-hint {
    position: absolute;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 16px;
    height: 16px;
    border-right: 1px solid rgba(255,255,255,0.8);
    border-bottom: 1px solid rgba(255,255,255,0.8);
    transform: translateX(-50%) rotate(45deg);
    animation: bounce 2.2s infinite;
}
@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0)   rotate(45deg); opacity: 0.8; }
    50%      { transform: translateX(-50%) translateY(8px) rotate(45deg); opacity: 0.35; }
}

/* =========================================================
   ABSCHNITTE
   ========================================================= */
.content-section {
    padding: 100px 24px;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}
.content-section.alt {
    max-width: none;
    background: var(--cream);
}
.content-section.alt > * { max-width: 900px; margin-left: auto; margin-right: auto; }

.section-kicker {
    font-size: 0.7rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 10px;
}

.content-section h2, .cta-band h2 {
    font-size: clamp(1.9rem, 4.5vw, 2.8rem);
    margin: 0 0 28px;
}
.content-section h2::after {
    content: '';
    display: block;
    width: 54px;
    height: 1px;
    background: var(--gold);
    margin: 20px auto 0;
}

.lead { font-size: 1.05rem; color: var(--muted); max-width: 640px; margin: 0 auto 18px; }
.lead:last-of-type { margin-bottom: 0; }

/* Bildergalerie */
.galerie {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-top: 44px;
}
.galerie:empty { display: none; }
.galerie figure { margin: 0; overflow: hidden; border-radius: 2px; }
.galerie img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.galerie figure { cursor: zoom-in; }
.galerie figure:hover img { transform: scale(1.04); }

/* Bildvergrößerung */
#lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(20,17,15,0.94);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}
#lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 2px;
}
#lightbox-close {
    position: absolute;
    top: 14px;
    right: 22px;
    background: none;
    border: 0;
    color: #fff;
    font-size: 2.6rem;
    line-height: 1;
    cursor: pointer;
}
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    color: #fff;
    font-size: 3rem;
    line-height: 1;
    padding: 10px 18px;
    cursor: pointer;
    opacity: 0.7;
}
.lightbox-nav:hover { opacity: 1; }
#lightbox-prev { left: 4px; }
#lightbox-next { right: 4px; }
.note { font-size: 0.85rem; color: var(--muted); font-style: italic; margin-top: 34px; }

/* Sanftes Einblenden */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* =========================================================
   COUNTDOWN
   ========================================================= */
#countdown-section {
    padding: 80px 20px;
    background: #fff;
    text-align: center;
}
.countdown-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    max-width: 560px;
    margin: 0 auto 42px;
}
.timer-box {
    border: 1px solid var(--line);
    padding: 22px 6px;
    border-radius: 2px;
    background: var(--cream);
}
.number {
    font-family: var(--serif);
    font-size: clamp(1.7rem, 5vw, 2.6rem);
    color: var(--gold);
    display: block;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.label {
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
}

/* --- Zustand am Hochzeitstag / danach --- */
.day-headline {
    font-size: clamp(2.1rem, 6vw, 3.4rem);
    margin: 6px 0 10px;
    color: var(--ink);
}
.day-sub {
    color: var(--muted);
    max-width: 520px;
    margin: 0 auto 34px;
}
.day-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    max-width: 620px;
    margin: 0 auto 22px;
}
.day-fact {
    flex: 1 1 160px;
    border: 1px solid var(--line);
    background: var(--cream);
    border-radius: 2px;
    padding: 18px 12px;
}
.f-label {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}
.f-value {
    display: block;
    font-family: var(--serif);
    font-size: 1.3rem;
    color: var(--gold);
}
.day-address {
    font-size: 0.9rem;
    color: var(--muted);
    margin: 0 0 30px;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn-hero {
    display: inline-block;
    padding: 15px 42px;
    border: none;
    border-radius: 2px;
    background-color: var(--gold);
    color: #fff !important;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.8rem;
    font-family: var(--sans);
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}
.btn-hero:hover { background-color: var(--gold-dark); transform: translateY(-2px); }

.adresse {
    font-style: normal;
    font-family: var(--serif);
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--ink);
    margin: 0 0 12px;
}
.map-links { display: flex; flex-wrap: wrap; gap: 20px; }

.link-arrow {
    display: inline-block;
    margin-top: 12px;
    color: var(--gold);
    text-decoration: none;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--gold);
    padding-bottom: 2px;
}
.link-arrow:hover { color: var(--gold-dark); }

/* =========================================================
   TIMELINE (ABLAUF)
   ========================================================= */
.timeline {
    max-width: 620px;
    margin: 0 auto;
    text-align: left;
    position: relative;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 86px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: var(--line);
}
.timeline-item {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 32px;
    padding: 18px 0;
    position: relative;
}
.timeline-item::before {
    content: '';
    position: absolute;
    left: 82px;
    top: 30px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gold);
}
.time {
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--gold);
    text-align: right;
    padding-top: 2px;
}
.timeline-text { padding-left: 18px; }
.timeline-text h3 { margin: 0 0 4px; font-size: 1.15rem; }
.timeline-text p { margin: 0; color: var(--muted); font-size: 0.94rem; }

/* =========================================================
   KARTEN (ANREISE)
   ========================================================= */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    text-align: left;
    margin-top: 12px;
}
.card {
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 26px 24px;
    background: #fff;
}
.card h3 { margin: 0 0 10px; font-size: 1.15rem; color: var(--gold); }
.card p { margin: 0 0 12px; font-size: 0.93rem; color: var(--muted); }
.card p:last-child { margin-bottom: 0; }
.card strong { color: var(--ink); font-weight: 500; }

/* Wetter-Widget */
#wetter-widget {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.wetter-zeile { display: flex; align-items: center; gap: 14px; }
.wetter-icon { font-size: 2rem; line-height: 1; }
.wetter-temp {
    display: block;
    font-family: var(--serif);
    font-size: 1.5rem;
    color: var(--gold);
    line-height: 1.2;
}
.wetter-text { display: block; font-size: 0.85rem; color: var(--muted); }
.wetter-meta {
    margin: 10px 0 0 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.05em;
    color: #9a9187;
}

/* Hervorgehobene Karte (Shuttle) – nimmt zwei Spalten ein */
.card.featured {
    grid-column: 1 / -1;
    background: linear-gradient(180deg, #fffdf9 0%, var(--cream) 100%);
    border-color: var(--gold);
    border-left-width: 3px;
    padding: 32px 30px;
}
.card.featured h3 { font-size: 1.4rem; margin-bottom: 14px; }
.card.featured p { font-size: 0.97rem; }

.card-tag {
    display: inline-block;
    font-size: 0.62rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #fff;
    background: var(--gold);
    padding: 4px 12px;
    border-radius: 2px;
    margin-bottom: 14px;
}
.card-hint {
    margin-top: 18px !important;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 0.87rem !important;
    font-style: italic;
}

/* Auffälliger Hinweis-Kasten */
.notice {
    text-align: left;
    background: #fdf6ea;
    border: 1px solid #e8d5ae;
    border-left: 4px solid var(--gold);
    border-radius: 2px;
    padding: 28px 30px;
    margin: 0 0 26px;
}
.notice h3 {
    margin: 0 0 12px;
    font-size: 1.25rem;
    color: #8a6d2f;
}
.notice p {
    margin: 0 0 12px;
    font-size: 0.95rem;
    color: #6d5c40;
}
.notice p:last-child { margin-bottom: 0; }
.notice strong { color: #4d3f28; font-weight: 500; }

/* =========================================================
   FAQ
   ========================================================= */
.faq-list { max-width: 700px; margin: 0 auto; text-align: left; }

details {
    border-bottom: 1px solid var(--line);
    padding: 4px 0;
}
details summary {
    cursor: pointer;
    list-style: none;
    padding: 20px 40px 20px 0;
    font-family: var(--serif);
    font-size: 1.05rem;
    position: relative;
    color: var(--ink);
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
    content: '+';
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--sans);
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--gold);
    transition: transform 0.25s ease;
}
details[open] summary::after { content: '–'; }
details p {
    margin: 0 0 22px;
    padding-right: 30px;
    color: var(--muted);
    font-size: 0.95rem;
}

/* =========================================================
   CTA-BAND & FOOTER
   ========================================================= */
.cta-band {
    background: #2e2b28 url('hintergrund_ring.jpg') center/cover no-repeat;
    background-blend-mode: multiply;
    color: #fff;
    text-align: center;
    padding: 110px 24px;
}
.cta-band h2 { margin: 0 0 12px; }
.cta-band p { margin: 0 0 32px; color: rgba(255,255,255,0.85); }

.site-footer {
    background: #fff;
    text-align: center;
    padding: 50px 24px;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}
.footer-names {
    font-family: var(--serif);
    font-size: 1.5rem;
    text-transform: none;
    letter-spacing: 0.04em;
    color: var(--ink);
    margin: 0 0 6px;
}

/* =========================================================
   RSVP-FORMULAR
   ========================================================= */
.page-wrap { padding-top: var(--nav-h); }

.form-section {
    max-width: 620px;
    margin: 0 auto;
    padding: 70px 24px 100px;
}
.form-section h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    text-align: center;
    margin: 0 0 12px;
}
.form-intro { text-align: center; color: var(--muted); margin-bottom: 20px; }

.form-notice {
    background: #fdf6ea;
    border: 1px solid #e8d5ae;
    border-left: 4px solid var(--gold);
    border-radius: 2px;
    padding: 16px 18px;
    margin: 0 0 40px;
    font-size: 0.9rem;
    color: #6d5c40;
    text-align: left;
}
.form-notice strong { color: #4d3f28; }

.form-group { margin-bottom: 26px; text-align: left; }
.form-group label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 2px;
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--ink);
    background: #fff;
    transition: border-color 0.25s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--gold);
}
.form-group textarea { min-height: 110px; resize: vertical; }

.radio-row { display: flex; flex-wrap: wrap; gap: 12px; }
.radio-option {
    flex: 1 1 180px;
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 15px 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    transition: border-color 0.25s ease, background 0.25s ease;
}
.radio-option:hover { border-color: var(--gold); }
.radio-option input { accent-color: var(--gold); margin: 0; }
.radio-option:has(input:checked) { border-color: var(--gold); background: var(--cream); }

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

.datenschutz {
    font-size: 0.78rem;
    line-height: 1.7;
    color: #9a9187;
    text-align: left;
    border-top: 1px solid var(--line);
    padding-top: 20px;
    margin: 34px 0 0;
}
.form-actions { text-align: center; margin-top: 36px; }

.danke-box {
    text-align: center;
    border: 1px solid var(--line);
    background: var(--cream);
    border-radius: 2px;
    padding: 48px 30px;
}
.danke-box h2 {
    font-family: var(--serif);
    font-size: 2rem;
    margin: 0 0 12px;
}
.danke-box p { color: var(--muted); margin: 0 0 26px; }
.danke-box .form-hint { margin: 20px 0 0; }
.danke-box a { color: var(--gold); }

.simple-nav {
    text-align: center;
    padding: 24px;
    border-bottom: 1px solid var(--line);
}
.simple-nav a {
    color: var(--muted);
    text-decoration: none;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.simple-nav a:hover { color: var(--gold); }

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 860px) {
    :root { --nav-h: 62px; }
    .navbar { padding: 0 18px; }
    .desktop-nav { display: none; }
    .burger { display: flex; }

    .hero { height: 78vh; min-height: 460px; padding-bottom: 10vh; }
    .content-section { padding: 70px 20px; }
    #countdown-section { padding: 56px 16px; }
    .countdown-grid { gap: 8px; max-width: 420px; }
    .timer-box { padding: 16px 4px; }

    .timeline::before { left: 62px; }
    .timeline-item { grid-template-columns: 56px 1fr; gap: 18px; }
    .timeline-item::before { left: 58px; }
    .timeline-text { padding-left: 14px; }

    .cta-band { padding: 80px 20px; }
    .form-section { padding: 50px 20px 80px; }
    .notice { padding: 22px 20px; }
    .card { padding: 22px 20px; }
    .card.featured { padding: 26px 22px; }
}

@media (max-width: 420px) {
    .countdown-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .label { font-size: 0.55rem; letter-spacing: 0.12em; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .scroll-hint { animation: none; }
}