/* ==========================================================================
   Hochzeitshomepage – Stylesheet
   --------------------------------------------------------------------------
   Aufbau:
    1. CSS Variables
    2. Reset / Base
    3. Typography
    4. Layout
    5. Navigation
    6. Hero
    7. Sections (Intro, Dresscode, Übernachtung, Anreise, Geschenke, Musik)
    8. Timeline
    9. Location
   10. Forms
   11. FAQ
   12. Footer
   13. Responsive Design
   14. Animations
   Mobile First: Basis-Styles gelten für Smartphones,
   größere Bildschirme werden per min-width ergänzt.
   ========================================================================== */


/* ==========================================================================
   1. CSS Variables
   Farben, Schriften & Abstände zentral anpassen.
   ========================================================================== */
:root {
    /* Farben */
    --color-background: #f8f5ef;   /* Off-White / Creme */
    --color-surface: #fffdf9;      /* Helle Fläche (Formularfelder) */
    --color-tint: #f0ebe1;         /* Dezentes Beige für abgesetzte Bereiche */
    --color-text: #2e2f2b;         /* Anthrazit */
    --color-muted: #75726a;        /* Warmes Grau */
    --color-line: #dcd4c5;         /* Linien & Rahmen */
    --color-accent: #c9a19a;       /* Altrosé */
    --color-accent-dark: #946058;  /* Altrosé dunkel – Buttons, Links */
    --color-on-dark: #fbf8f2;      /* Text auf dunklem Grund */
    --color-error: #a34a3c;

    /* Schriften */
    --font-display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
    --font-body: "Jost", "Avenir Next", "Helvetica Neue", Arial, sans-serif;

    /* Abstände & Maße */
    --container-width: 72rem;
    --container-narrow: 44rem;
    --container-form: 38rem;
    --gutter: 1.25rem;
    --section-space: clamp(4.5rem, 12vw, 9rem);
    --section-space-bottom: calc(var(--section-space) / 2);   /* Abstand unter dem letzten Element eines Abschnitts */
    --header-height: 4.25rem;
    --radius: 8px;

    /* Bewegung */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --duration: 0.35s;
}


/* ==========================================================================
   2. Reset / Base
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 300;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Scrollen sperren, solange das mobile Menü offen ist */
body.nav-open {
    overflow: hidden;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote {
    margin: 0;
}

ul[class],
ol[class] {
    list-style: none;
    padding: 0;
}

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

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

address {
    font-style: normal;
}

/* Sichtbarer Fokus für Tastaturnutzer */
:focus-visible {
    outline: 2px solid var(--color-accent-dark);
    outline-offset: 3px;
}

/* Abschnitte sind per JS fokussierbar (Barrierefreiheit), brauchen aber keinen Rahmen */
section[tabindex="-1"]:focus {
    outline: none;
}

/* Abstand beim Springen zu Ankern, damit die fixe Navigation nichts verdeckt */
[id] {
    scroll-margin-top: var(--header-height);
}

::selection {
    background: var(--color-accent-dark);
    color: #fff;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 200;
    padding: 0.6rem 1rem;
    background: var(--color-text);
    color: var(--color-on-dark);
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--duration) var(--ease);
}

.skip-link:focus {
    transform: translateY(0);
}


/* ==========================================================================
   3. Typography
   ========================================================================== */
.eyebrow {
    margin-bottom: 1rem;
    color: var(--color-accent-dark);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.section__title {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 7vw, 3.5rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.01em;
    overflow-wrap: break-word;
    hyphens: auto;
    text-wrap: balance;   /* wenn umbrochen werden muss: ausgewogene Zeilen */
}

.section__lead {
    max-width: 34rem;
    margin: 1.25rem auto 0;
    color: var(--color-muted);
}

.prose {
    margin-top: 1.5rem;
    color: var(--color-muted);
}

.prose p + p {
    margin-top: 1rem;
}

.prose--center {
    max-width: 34rem;
    margin-inline: auto;
}

.signature {
    margin-top: 2rem;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-style: italic;
}

.text-center {
    text-align: center;
}

.quote {
    margin: 2.5rem auto 0;
    max-width: 36rem;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4.5vw, 2.1rem);
    font-style: italic;
    line-height: 1.35;
}

/* Textlink mit kleinem Pfeil */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding-block: 0.5rem;
    color: var(--color-accent-dark);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
}

.link-arrow::after {
    content: "→";
    transition: transform var(--duration) var(--ease);
}

.link-arrow:hover::after {
    transform: translateX(4px);
}

/* Textlinks, die als <button> umgesetzt sind */
button.link-arrow {
    padding-inline: 0;
    border: 0;
    background: none;
    cursor: pointer;
}


/* ==========================================================================
   4. Layout
   ========================================================================== */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container--narrow {
    max-width: var(--container-narrow);
}

.container--form {
    max-width: var(--container-form);
}

.section {
    padding-block: var(--section-space) var(--section-space-bottom);
}

.section--tinted {
    background-color: var(--color-tint);
}

.section__header {
    margin-bottom: clamp(2.5rem, 7vw, 4.5rem);
    text-align: center;
}

/* Buttons */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    padding: 0.9rem 2rem;
    border: 1px solid var(--color-accent-dark);
    border-radius: var(--radius);
    background-color: var(--color-accent-dark);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--duration) var(--ease),
        color var(--duration) var(--ease),
        transform var(--duration) var(--ease),
        box-shadow var(--duration) var(--ease);
}

.button:hover {
    background-color: var(--color-text);
    border-color: var(--color-text);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -14px rgba(46, 47, 43, 0.6);
}

.button:active {
    transform: translateY(0);
}

.button--light {
    border-color: rgba(255, 255, 255, 0.7);
    background-color: transparent;
    color: var(--color-on-dark);
}

.button--light:hover {
    background-color: var(--color-on-dark);
    border-color: var(--color-on-dark);
    color: var(--color-text);
}

/* Dezente Variante: nur Rahmen */
.button--outline {
    background-color: transparent;
    color: var(--color-accent-dark);
}

.button--outline:hover {
    color: #fff;
}

.button--block {
    width: 100%;
}

.button[disabled] {
    opacity: 0.6;
    cursor: wait;
    transform: none;
}

/* Bild-Container inkl. Platzhalter, solange noch kein Foto hinterlegt ist */
.media {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.55), transparent 60%),
        linear-gradient(160deg, #e6dfd1, #d6cdbb);
}

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

.media--portrait {
    aspect-ratio: 4 / 5;
}

.media--landscape {
    aspect-ratio: 4 / 3;
}

/* Wird von script.js gesetzt, wenn die Bilddatei (noch) fehlt */
.media.is-missing img {
    display: none;
}

.media.is-missing::after {
    content: "Foto folgt · " attr(data-placeholder);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--color-muted);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}


/* ==========================================================================
   5. Navigation
   ========================================================================== */
.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    color: var(--color-on-dark);
    transition:
        background-color var(--duration) var(--ease),
        color var(--duration) var(--ease),
        box-shadow var(--duration) var(--ease);
}

/* Nach dem Scrollen: weiterhin komplett durchsichtig, nur dunkle Schrift */
.site-header.is-scrolled {
    background-color: transparent;
    color: var(--color-text);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
}

.brand {
    position: relative;
    z-index: 2;
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.brand__amp {
    font-style: italic;
    color: var(--color-accent);
}

/* Hamburger-Button */
.nav-toggle {
    position: relative;
    z-index: 2;
    display: grid;
    place-content: center;
    gap: 7px;
    width: 3rem;
    height: 3rem;
    margin-right: -0.75rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.nav-toggle__line {
    display: block;
    width: 26px;
    height: 1px;
    background-color: currentColor;
    transition: transform var(--duration) var(--ease);
}

.site-header.is-open .nav-toggle__line:first-child {
    transform: translateY(4px) rotate(45deg);
}

.site-header.is-open .nav-toggle__line:last-child {
    transform: translateY(-4px) rotate(-45deg);
}

/* Mobiles Menü: Vollflächiges Overlay */
.site-nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    padding-block: var(--header-height) 2rem;
    overflow-y: auto;   /* kleine Handys: Menü samt Untermenü scrollbar */
    background-color: var(--color-background);
    color: var(--color-text);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--duration) var(--ease),
        visibility 0s linear var(--duration);
}

/* backdrop-filter würde das fixe Overlay auf die Header-Höhe begrenzen – daher im offenen Zustand aus */
.site-header.is-open {
    color: var(--color-text);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.site-header.is-open .site-nav {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--duration) var(--ease), visibility 0s;
}

.site-nav__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
}

.site-nav__link {
    display: inline-block;
    padding: 0.35rem 1rem;
    font-family: var(--font-display);
    font-size: 2rem;
    text-decoration: none;
    transition: color var(--duration) var(--ease);
}

.site-nav__link:hover,
.site-nav__link.is-active {
    color: var(--color-accent-dark);
}

/* Untermenü „Infos“ – mobil eingerückt unter dem Menüpunkt */
.site-nav__sub {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.site-nav__sublink {
    display: inline-block;
    padding: 0.25rem 1rem;
    color: var(--color-muted);
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color var(--duration) var(--ease);
}

.site-nav__sublink:hover,
.site-nav__sublink:focus-visible {
    color: var(--color-accent-dark);
}


/* --- Abschnitts-Navigation am linken Rand (Pfeil hoch / runter) --- */
.section-jump {
    position: fixed;
    left: 1rem;
    bottom: 1.25rem;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;   /* nur die sichtbaren Buttons sind klickbar */
}

.section-jump__button {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--color-accent);
    border-radius: 50%;
    background-color: rgba(255, 253, 249, 0.92);
    color: var(--color-accent-dark);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.85);
    transition:
        opacity var(--duration) var(--ease),
        transform var(--duration) var(--ease),
        background-color var(--duration) var(--ease),
        color var(--duration) var(--ease),
        visibility 0s linear var(--duration);
}

.section-jump__button.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition:
        opacity var(--duration) var(--ease),
        transform var(--duration) var(--ease),
        background-color var(--duration) var(--ease),
        color var(--duration) var(--ease),
        visibility 0s;
}

.section-jump__button:hover,
.section-jump__button:focus-visible {
    background-color: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color: #fff;
}

.section-jump__button svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Offenes Handy-Menü: Buttons ausblenden */
body.nav-open .section-jump {
    display: none;
}

/* Desktop: vertikal mittig am linken Rand */
@media (min-width: 60em) {
    .section-jump {
        left: 1.5rem;
        bottom: auto;
        top: 50%;
        transform: translateY(-50%);
    }
}


/* ==========================================================================
   6. Hero
   ========================================================================== */
.hero {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100svh;
    padding-block: calc(var(--header-height) + 3rem) 6rem;
    overflow: hidden;
    color: var(--color-on-dark);
    text-align: center;
    /* Fallback, solange kein hero.jpg vorhanden ist */
    background:
        radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.18), transparent 65%),
        linear-gradient(170deg, #c4a29b 0%, #a98680 55%, #8c6d68 100%);
}

.hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
}

.hero__image.is-missing {
    display: none;
}

/* Abdunklung für gute Lesbarkeit auf dem Foto */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(30, 30, 26, 0.35) 0%, rgba(30, 30, 26, 0.2) 45%, rgba(30, 30, 26, 0.55) 100%);
    pointer-events: none;
}

/* Ohne Foto: nur leichte Abdunklung, damit der helle Verlauf hell bleibt */
.hero:has(.hero__image.is-missing)::after {
    background: linear-gradient(180deg, rgba(30, 30, 26, 0.12) 0%, rgba(30, 30, 26, 0.05) 45%, rgba(30, 30, 26, 0.25) 100%);
}

.hero__content {
    position: relative;
    z-index: 1;
}

.hero__eyebrow {
    margin-bottom: 1.75rem;
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.35em;
    text-transform: uppercase;
}

.hero__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 10vw, 6.25rem);
    font-weight: 400;
    line-height: 1;
    overflow-wrap: anywhere;
}

.hero__amp {
    margin-block: 0.15em;
    font-size: 0.6em;
    font-style: italic;
    opacity: 0.85;
}

.hero__date {
    display: inline-block;
    margin-top: 2rem;
    padding-block: 0.6rem;
    border-block: 1px solid rgba(255, 255, 255, 0.45);
    font-size: 0.875rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.hero__lead {
    max-width: 28rem;
    margin: 1.75rem auto 2.5rem;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 3.6vw, 1.5rem);
    font-style: italic;
    line-height: 1.45;
}

/* Uhrzeit & Ort unter dem Datum */
.hero__place {
    margin-top: 1rem;
    font-size: 0.8125rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.9;
}

/* Countdown bis zur Hochzeit */
.countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    margin: -0.5rem auto 2.5rem;
}

.countdown__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 4.5rem;
}

.countdown__value {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 8vw, 3.5rem);
    line-height: 1;
    font-variant-numeric: lining-nums tabular-nums;
}

.countdown__label {
    margin-top: 0.5rem;
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    opacity: 0.85;
}

/* Feines Herz zwischen Tagen und Stunden */
.countdown__divider {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    margin-bottom: 1.4rem;   /* optisch auf Höhe der Zahlen */
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 1.3;
    stroke-linejoin: round;
}

/* Füllung des Herzens (Animation per SVG <animate> in index.html) */
.countdown__fill {
    fill: var(--color-accent);
    stroke: none;
}

.countdown__done {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-style: italic;
}

/* Nach Ablauf: Zahlen ausblenden, nur den Text zeigen */
.countdown.is-done .countdown__unit,
.countdown.is-done .countdown__divider {
    display: none;
}

/* Kleiner Scroll-Hinweis am unteren Rand */
.hero__scroll {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    z-index: 1;
    display: block;
    width: 2.5rem;
    height: 3.5rem;
    transform: translateX(-50%);
}

.hero__scroll-line {
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.25);
}

.hero__scroll-line::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 40%;
    background-color: var(--color-on-dark);
    animation: scroll-hint 2.4s var(--ease) infinite;
}


/* ==========================================================================
   7. Sections
   ========================================================================== */

/* --- Unsere Hochzeit --- */
.intro {
    display: grid;
    gap: 3rem;
    align-items: center;
}

.intro__media {
    max-width: 26rem;
    width: 100%;
    margin-inline: auto;
}

.facts {
    display: grid;
    gap: 1.25rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-line);
}

.facts dt {
    color: var(--color-accent-dark);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.facts dd {
    font-family: var(--font-display);
    font-size: 1.3rem;
    line-height: 1.35;
    overflow-wrap: break-word;
}

/* Termin in den Kalender übernehmen (Apple/Outlook & Google) */
.calendar-links {
    margin-top: 2rem;
}

.calendar-links__label {
    margin-bottom: 0.75rem;
    color: var(--color-accent-dark);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.calendar-links__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.calendar-links__buttons .button {
    flex: 1 1 12rem;
}

/* In der RSVP-Erfolgsmeldung: mit Trennlinie abgesetzt und mittig */
.rsvp-success .calendar-links {
    max-width: 30rem;
    margin: 2.5rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid var(--color-line);
}

.rsvp-success .calendar-links__buttons {
    justify-content: center;
}

/* In den FAQ: Abstand zur Trennlinie darunter */
.faq__content .calendar-links__buttons {
    padding-bottom: 1.75rem;
}

/* --- Dresscode --- */
.dresscode {
    display: grid;
    gap: 2rem;
    margin-top: 3rem;
}

.dresscode__divider {
    width: 4rem;
    height: 1px;
    margin-inline: auto;
    background-color: var(--color-accent);
}

.dresscode__title {
    margin-bottom: 0.5rem;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 500;
}

.dresscode__item p {
    color: var(--color-muted);
}

/* --- Übernachtung: ein Hotel mit Zimmerkontingent --- */
.hotel {
    display: grid;
    gap: 2.5rem;
    max-width: 60rem;
    margin-inline: auto;
    padding-block: 2.5rem;
    border-block: 1px solid var(--color-line);
}

.hotel__name {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 5vw, 2.25rem);
    font-weight: 500;
    line-height: 1.15;
}

.hotel__address {
    margin-top: 0.5rem;
    color: var(--color-muted);
}

.hotel__facts {
    display: grid;
    gap: 0.35rem;
    margin: 1.25rem 0 2rem;
    color: var(--color-muted);
    font-size: 0.95rem;
}

/* Feine Linie vor jedem Punkt – wie bei den übrigen Aufzählungen */
.hotel__facts li::before {
    content: "";
    display: inline-block;
    width: 1.25rem;
    height: 1px;
    margin-right: 0.6rem;
    vertical-align: middle;
    background-color: var(--color-accent);
}

.hotel__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.75rem;
}

.hotel__label {
    color: var(--color-accent-dark);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

/* Codewort hervorgehoben */
.hotel__code {
    margin-top: 0.75rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius);
    background-color: var(--color-surface);
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 5vw, 2rem);
    letter-spacing: 0.12em;
    text-align: center;
    overflow-wrap: anywhere;
    user-select: all;
}

.hotel__copy {
    margin-top: 0.5rem;
}

/* Nummerierte Schritte mit Akzentziffern */
.hotel__steps {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.75rem;
    counter-reset: step;
    color: var(--color-muted);
    font-size: 0.95rem;
}

.hotel__steps li {
    position: relative;
    padding-left: 2rem;
    counter-increment: step;
}

.hotel__steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: -0.1rem;
    color: var(--color-accent-dark);
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-variant-numeric: lining-nums;
}

.hotel__steps strong {
    color: var(--color-text);
    font-weight: 500;
}

/* Hinweistext unter der unteren Linie des Hotel-Blocks */
.hotel__note {
    max-width: 60rem;
    margin: calc(var(--section-space) / 2) auto 0;
    padding: 1.75rem 1.5rem;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius);
    background-color: var(--color-surface);
    color: var(--color-text);
    text-align: center;
}

/* Croissant-Icon im gleichen Linienstil wie die Anreise-Icons */
.hotel__note-icon {
    display: block;
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto 1rem;
    fill: none;
    stroke: var(--color-accent-dark);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- Anreise --- */
.travel {
    display: grid;
    gap: 2rem;
}

.travel__item {
    text-align: center;
}

/* Handy: Trennstrich zwischen den Anreisewegen (wie beim Dresscode) */
.travel__item + .travel__item::before {
    content: '';
    display: block;
    width: 4rem;
    height: 1px;
    margin: 0 auto 2rem;
    background-color: var(--color-accent);
}

.travel__item a {
    color: var(--color-accent-dark);
    text-underline-offset: 3px;
}

.travel__item p {
    max-width: 22rem;
    margin-inline: auto;
    color: var(--color-muted);
}

/* Link-Buttons unter den Anreisewegen: Trennlinie + mittig */
.travel__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 1.5rem;
    margin-top: clamp(3rem, 7vw, 4.5rem);
    padding-top: clamp(2.5rem, 6vw, 3.5rem);
    border-top: 1px solid var(--color-line);
}

/* Gleiche Breite, damit die Buttons auch untereinander ruhig wirken */
.travel__links .button {
    min-width: 17rem;
}

.travel__icon {
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto 1.25rem;
    fill: none;
    stroke: var(--color-accent-dark);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.travel__title {
    margin-bottom: 0.5rem;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 500;
}

/* --- Geschenke --- */
.section--gifts .prose {
    margin-top: 2rem;
}

/* --- Musikwünsche --- */
.music__action {
    margin-top: 2.5rem;
}

.music__note {
    margin-top: 1.25rem;
    color: var(--color-muted);
    font-size: 0.95rem;
}

.music__note a {
    color: var(--color-accent-dark);
    text-underline-offset: 3px;
}

/* Spotify-Vorschau: erst Platzhalter, Player lädt nach Klick */
.playlist-embed {
    max-width: 34rem;
    margin: 3.5rem auto 0;
}

.playlist-embed__consent {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    padding: 2.25rem 1.5rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
}

.playlist-embed__icon {
    width: 2.25rem;
    height: 2.25rem;
    fill: none;
    stroke: var(--color-accent-dark);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.playlist-embed__text {
    max-width: 26rem;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.playlist-embed__hide {
    margin-top: 0.75rem;
}

.playlist-embed iframe {
    display: block;
    width: 100%;
    height: 352px;
    border: 0;
    border-radius: var(--radius);
}


/* ==========================================================================
   8. Timeline
   ========================================================================== */
.timeline {
    position: relative;
    max-width: 44rem;
    margin-inline: auto;
    --line-x: 0.3125rem;   /* Position der vertikalen Linie */
}

/* Vertikale Linie */
.timeline::before {
    content: "";
    position: absolute;
    top: 0.75rem;
    bottom: 0.75rem;
    left: var(--line-x);
    width: 1px;
    background-color: var(--color-line);
}

.timeline__item {
    position: relative;
    padding: 0 0 2.5rem 2.5rem;
}

.timeline__item:last-child {
    padding-bottom: 0;
}

/* Herz auf der Linie (Farben: Füllung --color-tint bzw. --color-accent, Rand --color-accent-dark) */
.timeline__item::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    left: calc(var(--line-x) - 8px);
    width: 17px;
    height: 17px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.5s-7.5-4.6-9.3-9.4C1.4 7.6 3.6 4 7.2 4c2.1 0 3.6 1.2 4.8 2.9C13.2 5.2 14.7 4 16.8 4c3.6 0 5.8 3.6 4.5 7.1-1.8 4.8-9.3 9.4-9.3 9.4z' fill='%23f0ebe1' stroke='%23946058' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform var(--duration) var(--ease);
}

/* Gefülltes Herz: liegt über dem leeren und wird beim Scrollen eingeblendet
   (Klasse .is-filled, gesetzt in js/script.js → initTimelineHearts) */
.timeline__item::after {
    content: "";
    position: absolute;
    top: 0.5rem;
    left: calc(var(--line-x) - 8px);
    width: 17px;
    height: 17px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.5s-7.5-4.6-9.3-9.4C1.4 7.6 3.6 4 7.2 4c2.1 0 3.6 1.2 4.8 2.9C13.2 5.2 14.7 4 16.8 4c3.6 0 5.8 3.6 4.5 7.1-1.8 4.8-9.3 9.4-9.3 9.4z' fill='%23c9a19a' stroke='%23946058' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.timeline__item.is-filled::after {
    opacity: 1;
    transform: scale(1);
}

.timeline__item:hover::before {
    transform: scale(1.15);
}

.timeline__item:hover::after {
    opacity: 1;
    transform: scale(1.15);
}

.timeline__time {
    display: block;
    color: var(--color-accent-dark);
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 500;
    font-variant-numeric: lining-nums tabular-nums;
}

.timeline__title {
    font-family: var(--font-display);
    font-size: 1.65rem;
    font-weight: 400;
    line-height: 1.25;
}

.timeline__text {
    margin-top: 0.25rem;
    color: var(--color-muted);
    font-size: 0.975rem;
}


/* ==========================================================================
   9. Location
   ========================================================================== */
.location {
    display: grid;
    gap: 3rem;
    align-items: center;
}

.location__address {
    margin: 2rem 0;
    padding-left: 1.25rem;
    border-left: 1px solid var(--color-accent);
    line-height: 1.8;
}

.location__address strong {
    font-weight: 500;
}


/* ==========================================================================
   10. Forms
   ========================================================================== */
.rsvp-form {
    display: grid;
    gap: 1.5rem;
}

.form-row {
    display: grid;
    gap: 1.5rem;
}

.field {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.field__label {
    padding: 0;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.field__optional {
    color: var(--color-muted);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: none;
}

.field__input {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background-color: var(--color-surface);
    font-size: 1rem;   /* mind. 16px verhindert Auto-Zoom auf iOS */
    font-weight: 400;
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.field__input::placeholder {
    color: #a9a497;
}

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

.field__input:focus {
    outline: none;
    border-color: var(--color-accent-dark);
    box-shadow: 0 0 0 3px rgba(201, 161, 154, 0.3);
}

.field__textarea {
    min-height: 8rem;
    resize: vertical;
}

.field__select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.75rem;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--color-muted) 50%),
        linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);
    background-position: calc(100% - 1.3rem) 50%, calc(100% - 1rem) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}

/* Fehlerzustand */
.field__error {
    min-height: 0;
    color: var(--color-error);
    font-size: 0.85rem;
    font-weight: 400;
}

.field__error:empty {
    display: none;
}

.field.has-error .field__input,
.field.has-error .choice__label {
    border-color: var(--color-error);
}

/* Ja/Nein-Auswahl als große, gut tippbare Flächen */
.choice-group {
    display: grid;
    gap: 0.75rem;
}

.choice {
    position: relative;
    cursor: pointer;
}

.choice input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.choice__label {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 3.25rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background-color: var(--color-surface);
    font-weight: 400;
    transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

/* Eigener Radio-Kreis */
.choice__label::before {
    content: "";
    flex-shrink: 0;
    width: 1.05rem;
    height: 1.05rem;
    border: 1px solid var(--color-muted);
    border-radius: 50%;
    transition: box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.choice:hover .choice__label {
    border-color: var(--color-accent);
}

.choice input:checked + .choice__label {
    border-color: var(--color-accent-dark);
    background-color: #f7ece8;
}

.choice input:checked + .choice__label::before {
    border-color: var(--color-accent-dark);
    box-shadow: inset 0 0 0 4px var(--color-surface), inset 0 0 0 10px var(--color-accent-dark);
}

/* Checkbox-Variante (z. B. Wohnmobil): eckiges Kästchen mit Häkchen */
.choice--check .choice__label {
    align-items: flex-start;
    line-height: 1.5;
}

.choice--check .choice__label::before {
    margin-top: 0.15rem;
    border-radius: var(--radius);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 75%;
}

.choice--check input:checked + .choice__label::before {
    box-shadow: none;
    background-color: var(--color-accent-dark);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Große Teilnahme-Buttons (gut mit dem Daumen erreichbar) */
.choice--big .choice__label {
    min-height: 4rem;
    padding: 1rem 1.15rem;
    font-size: 1.05rem;
}

.choice__text {
    flex: 1;
}

/* Herz am Ende der Teilnahme-Buttons */
.choice__heart {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    fill: transparent;
    stroke: var(--color-accent);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: fill var(--duration) var(--ease), stroke var(--duration) var(--ease);
}

.choice__heart-x {
    fill: none;
    opacity: 0;
    transition: opacity var(--duration) var(--ease);
}

/* „Ja“: Herz füllt sich rosé und pulsiert kurz */
.choice--yes input:checked + .choice__label .choice__heart {
    fill: var(--color-accent);
    stroke: var(--color-accent-dark);
    animation: heart-pop 0.45s var(--ease);
}

/* „Nein“: Herz hellgrau und durchgestrichen, Feld neutral statt rosé */
.choice--no input:checked + .choice__label {
    border-color: var(--color-muted);
    background-color: #f1efea;
}

.choice--no input:checked + .choice__label::before {
    border-color: var(--color-muted);
    box-shadow: inset 0 0 0 4px var(--color-surface), inset 0 0 0 10px var(--color-muted);
}

.choice--no input:checked + .choice__label .choice__heart {
    stroke: #c4bfb6;
}

.choice--no input:checked + .choice__label .choice__heart-x {
    opacity: 1;
}

@keyframes heart-pop {
    0%   { transform: scale(0.7); }
    60%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Symbol am Ende eines Auswahlfelds (z. B. Wohnmobil) */
.choice__icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin-left: auto;
    fill: none;
    stroke: var(--color-accent-dark);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Einklappbare Zusatzangaben (Musikwünsche, Nachricht) */
.rsvp-extras {
    display: grid;
    gap: 0.75rem;
}

.rsvp-extra {
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background-color: var(--color-surface);
    transition: border-color var(--duration) var(--ease);
}

.rsvp-extra[open] {
    border-color: var(--color-accent);
}

.rsvp-extra__summary {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 3.75rem;
    padding: 0.8rem 1.15rem;
    cursor: pointer;
    list-style: none;
    font-size: 1rem;
}

.rsvp-extra__summary::-webkit-details-marker {
    display: none;
}

.rsvp-extra__summary:focus-visible {
    outline: 2px solid var(--color-accent-dark);
    outline-offset: 3px;
    border-radius: var(--radius);
}

.rsvp-extra__icon {
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    fill: none;
    stroke: var(--color-accent-dark);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rsvp-extra__title {
    flex: 1;
}

/* Pfeil rechts, dreht sich beim Aufklappen */
.rsvp-extra__chevron {
    flex-shrink: 0;
    width: 0.6rem;
    height: 0.6rem;
    margin-right: 0.25rem;
    border-right: 1.5px solid var(--color-muted);
    border-bottom: 1.5px solid var(--color-muted);
    transform: translateY(-25%) rotate(45deg);
    transition: transform var(--duration) var(--ease);
}

.rsvp-extra[open] .rsvp-extra__chevron {
    transform: translateY(25%) rotate(-135deg);
}

.rsvp-extra__body {
    padding: 0 1.15rem 1.15rem;
}

/* Wohnmobil in Schritt 3: gleiche Höhe & Schrift wie die Kästen darüber/darunter */
.rsvp-step[data-step="3"] > .choice .choice__label {
    align-items: center;
    min-height: 3.75rem;
    padding: 0.8rem 1.15rem;
    font-size: 1rem;
}

.rsvp-step[data-step="3"] > .choice .choice__label::before {
    margin-top: 0;
}

/* Mehrere Elemente untereinander im Kasten (z. B. Essen: Brunch + Unverträglichkeiten) */
.rsvp-extra__body--stack {
    display: grid;
    gap: 1rem;
}

/* Hinweis bei Absage über den Musikwünschen */
.rsvp-extras .field__hint {
    margin-bottom: 0;
}

.choice__hint {
    display: block;
    color: var(--color-muted);
    font-size: 0.875rem;
    font-weight: 300;
}

.choice input:focus-visible + .choice__label {
    outline: 2px solid var(--color-accent-dark);
    outline-offset: 3px;
}

/* Musikwünsche: mehrere Songfelder untereinander */
.song-list {
    display: grid;
    gap: 0.6rem;
}

.song-list__row {
    display: flex;
    gap: 0.5rem;
}

.song-list__remove {
    flex-shrink: 0;
    width: 3.25rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background-color: var(--color-surface);
    color: var(--color-muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.song-list__remove:hover {
    border-color: var(--color-accent-dark);
    color: var(--color-accent-dark);
}

.song-list__add {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    padding: 0.5rem 0;
    border: 0;
    background: none;
    color: var(--color-accent-dark);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
}

.song-list__add span {
    font-size: 1.1rem;
    line-height: 1;
}

.song-list__add:hover {
    color: var(--color-text);
}

.song-list__add[hidden] {
    display: none;
}

/* RSVP in Schritten: jeweils eine zusammengehörige Gruppe */
.rsvp-step {
    display: grid;
    gap: 1.5rem;
}

.rsvp-step[hidden] {
    display: none;
}

.js .rsvp-step {
    animation: step-in 0.4s var(--ease) both;
}

.rsvp-step__title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 5vw, 2rem);
    font-weight: 400;
    line-height: 1.2;
}

.rsvp-step__title:focus {
    outline: none;
}

/* Schritt 3: alle einklappbaren Felder mit gleichem Abstand – wirkt wie eine Gruppe */
.rsvp-step[data-step="3"] {
    gap: 0.75rem;
}

.rsvp-step[data-step="3"] .rsvp-step__title {
    margin-bottom: 0.75rem;
}

@keyframes step-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* Fortschritt: „Schritt 1 von 3“ + feiner Balken */
.rsvp-progress[hidden] {
    display: none;
}

.rsvp-progress__label {
    margin-bottom: 0.6rem;
    color: var(--color-accent-dark);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.rsvp-progress__bar {
    height: 3px;
    border-radius: 3px;
    background-color: var(--color-line);
    overflow: hidden;
}

.rsvp-progress__bar span {
    display: block;
    width: 33%;
    height: 100%;
    border-radius: inherit;
    background-color: var(--color-accent-dark);
    transition: width 0.4s var(--ease);
}

/* Navigation: großer Button (Daumen), „Zurück“ dezent darunter */
.rsvp-nav {
    display: grid;
    gap: 0.5rem;
}

.rsvp-nav [hidden] {
    display: none;
}

.rsvp-nav__back {
    justify-self: center;
    min-height: 2.75rem;
    padding: 0.5rem 1.25rem;
    border: 0;
    background: none;
    color: var(--color-muted);
    font: inherit;
    font-size: 0.8125rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
}

.rsvp-nav__back::before {
    content: "‹ ";
}

.rsvp-nav__back:hover {
    color: var(--color-accent-dark);
}

/* Felder, die nur bei Zusage relevant sind */
.rsvp-form__attending {
    display: grid;
    gap: 1.5rem;
}

.rsvp-form__attending[hidden] {
    display: none;
}

/* Hinweistext unter einem Feld-Label (z. B. Songwunsch bei Absage) */
.field__hint {
    margin-bottom: 0.75rem;
    color: var(--color-accent-dark);
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-style: italic;
    line-height: 1.4;
}

.field__hint[hidden] {
    display: none;
}

/* Spam-Schutz-Feld: außerhalb des sichtbaren Bereichs */
.rsvp-form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-status {
    padding: 0.9rem 1rem;
    border-left: 2px solid var(--color-error);
    background-color: rgba(163, 74, 60, 0.06);
    color: var(--color-error);
    font-size: 0.95rem;
}

/* Erfolgsmeldung */
.rsvp-success {
    padding: 3rem 1.5rem;
    border-block: 1px solid var(--color-line);
    text-align: center;
}

.rsvp-success:focus {
    outline: none;
}

.rsvp-success__title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 5vw, 2.4rem);
    line-height: 1.25;
}

.rsvp-success__text {
    margin-top: 1rem;
    color: var(--color-muted);
}


/* ==========================================================================
   Foto-Upload
   ========================================================================== */
.photo-form {
    display: grid;
    gap: 1.5rem;
}

/* Große Auswahlfläche (Klick oder Drag & Drop) */
.photo-drop {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1.5rem;
    border: 1px dashed var(--color-accent);
    border-radius: var(--radius);
    background-color: var(--color-surface);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.photo-drop:hover,
.photo-drop.is-dragover {
    border-color: var(--color-accent-dark);
    background-color: #fff;
}

/* Tastaturfokus liegt auf dem versteckten Datei-Input */
.photo-drop:focus-within {
    border-color: var(--color-accent-dark);
    box-shadow: 0 0 0 3px rgba(201, 161, 154, 0.3);
}

.photo-drop__icon {
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.5rem;
    fill: none;
    stroke: var(--color-accent-dark);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.photo-drop__title {
    font-family: var(--font-display);
    font-size: 1.5rem;
}

.photo-drop__hint {
    color: var(--color-muted);
    font-size: 0.85rem;
}

/* Vorschau-Kacheln */
.photo-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: 0.75rem;
}

.photo-preview__item {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius);
    background-color: var(--color-line);
}

.photo-preview__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-preview__remove {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(46, 47, 43, 0.65);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.photo-preview__remove:hover,
.photo-preview__remove:focus-visible {
    background-color: var(--color-accent-dark);
}

/* Status je Bild während des Hochladens */
.photo-preview__item.is-uploading img {
    opacity: 0.5;
}

.photo-preview__item.is-done::after,
.photo-preview__item.is-failed::after {
    position: absolute;
    left: 0.35rem;
    bottom: 0.35rem;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    color: #fff;
    font-size: 0.8rem;
}

.photo-preview__item.is-done::after {
    content: "✓";
    background-color: var(--color-accent-dark);
}

.photo-preview__item.is-failed::after {
    content: "!";
    background-color: var(--color-error);
}

.photo-progress {
    color: var(--color-muted);
    font-size: 0.95rem;
    text-align: center;
}

/* Hinweis unter „Fotos hochladen“: rosé Ausrufezeichen + Text */
.photo-note {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: -0.5rem;
    color: var(--color-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.photo-note__icon {
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.1rem;
    fill: none;
    stroke: var(--color-accent-dark);
    stroke-width: 1.6;
    stroke-linecap: round;
}

.photo-note__dot {
    fill: var(--color-accent-dark);
}

.button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.photo-success__again {
    margin-top: 1.5rem;
}

/* display: grid würde das hidden-Attribut sonst aufheben */
.photo-form[hidden],
.photo-preview[hidden],
.rsvp-form[hidden] {
    display: none;
}


/* ==========================================================================
   11. FAQ
   ========================================================================== */
.faq {
    border-top: 1px solid var(--color-line);
}

.faq__item {
    border-bottom: 1px solid var(--color-line);
}

.faq__heading {
    font-size: inherit;
    font-weight: inherit;
}

.faq__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
    min-height: 3.5rem;
    padding: 1.35rem 0;
    border: 0;
    background: none;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 3.8vw, 1.5rem);
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: color var(--duration) var(--ease);
}

.faq__trigger:hover {
    color: var(--color-accent-dark);
}

/* Plus-Symbol, das sich beim Öffnen zum Minus dreht */
.faq__icon {
    position: relative;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.faq__icon::before,
.faq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transition: transform var(--duration) var(--ease);
}

.faq__icon::after {
    transform: rotate(90deg);
}

.faq__trigger[aria-expanded="true"] .faq__icon::after {
    transform: rotate(0deg);
}

/* Aufklappen per grid-template-rows (animiert die Höhe ohne feste Werte).
   Nur aktiv, wenn JavaScript läuft – ohne JS bleiben alle Antworten sichtbar. */
.js .faq__panel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition:
        grid-template-rows 0.4s var(--ease),
        visibility 0s linear 0.4s;
}

.js .faq__item.is-open .faq__panel {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 0.4s var(--ease), visibility 0s;
}

.faq__content {
    overflow: hidden;
    min-height: 0;
}

.faq__content p {
    padding: 0 2.5rem 1.5rem 0;
    color: var(--color-muted);
}

.faq__content a {
    color: var(--color-accent-dark);
    text-underline-offset: 3px;
}


/* ==========================================================================
   12. Footer
   ========================================================================== */
/* Gleicher Altrosé-Verlauf wie der Startbereich (Hero) */
.site-footer {
    padding-block: clamp(4rem, 10vw, 6rem);
    background:
        radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.18), transparent 65%),
        linear-gradient(170deg, #c4a29b 0%, #a98680 55%, #8c6d68 100%);
    color: var(--color-on-dark);
}

.site-footer__names {
    font-family: var(--font-display);
    font-size: clamp(2rem, 7vw, 3rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.site-footer__amp {
    font-style: italic;
    color: inherit;   /* Altrosé wäre auf dem Verlauf kaum sichtbar */
    opacity: 0.85;
}

.site-footer__date {
    margin-top: 1rem;
    font-size: 0.8125rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    opacity: 0.8;
}

.site-footer__note {
    margin-top: 2rem;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-style: italic;
    opacity: 0.9;
}

.site-footer__top {
    display: inline-block;
    margin-top: 2.5rem;
    padding: 0.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-decoration: none;
    opacity: 0.7;
    transition: opacity var(--duration) var(--ease);
}

.site-footer__top:hover {
    opacity: 1;
}


/* ==========================================================================
   13. Responsive Design
   ========================================================================== */

/* Ab großen Smartphones / kleinen Tablets */
@media (min-width: 40em) {   /* 640px */
    :root {
        --gutter: 2rem;
    }

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

    .choice-group {
        grid-template-columns: 1fr 1fr;
    }

    .facts {
        grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    }
}

/* Ab Tablets */
@media (min-width: 48em) {   /* 768px */
    /* Zeitplan: Uhrzeit links, Inhalt rechts, Linie dazwischen */
    .timeline {
        --time-col: 9rem;
        --line-x: calc(var(--time-col) + 2rem);
    }

    .timeline__item {
        display: grid;
        grid-template-columns: var(--time-col) 1fr;
        column-gap: 4rem;
        padding-left: 0;
        padding-bottom: 3rem;
    }

    .timeline__time {
        text-align: right;
        padding-top: 0.15rem;
    }

    .timeline__item::before,
    .timeline__item::after {
        top: 0.65rem;
    }

    .travel {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem 2.5rem;
    }

    /* Ab Tablet stehen die Wege nebeneinander – keine Trennstriche */
    .travel__item + .travel__item::before {
        display: none;
    }

    .dresscode {
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 3rem;
    }

    /* Senkrechte Linie über die volle Höhe der beiden Textblöcke */
    .dresscode__divider {
        width: 1px;
        height: auto;
        align-self: stretch;
    }

    /* Hotel: Infos links, Codewort & Schritte rechts */
    .hotel {
        grid-template-columns: 1fr 1fr;
        gap: 0;
        padding-block: 3rem;
    }

    .hotel__booking {
        padding-left: 3rem;
        border-left: 1px solid var(--color-line);
    }

    .hotel__info {
        padding-right: 3rem;
    }
}

/* Ab Laptop / Desktop: Navigation einzeilig, zweispaltige Layouts */
@media (min-width: 60em) {   /* 960px */
    :root {
        --header-height: 5rem;
        --gutter: 3rem;
    }

    .nav-toggle {
        display: none;
    }

    .site-nav {
        position: static;
        display: block;
        padding-block: 0;
        overflow: visible;   /* Dropdown nicht abschneiden */
        background: none;
        color: inherit;
        opacity: 1;
        visibility: visible;
        transition: none;
    }

    .site-nav__list {
        flex-direction: row;
        gap: 0.5rem;
    }

    .site-nav__link {
        position: relative;
        padding: 0.5rem 0.9rem;
        font-family: var(--font-body);
        font-size: 0.75rem;
        font-weight: 400;
        letter-spacing: 0.22em;
        text-transform: uppercase;
    }

    /* Feine Unterstreichung bei Hover / aktivem Abschnitt */
    .site-nav__link::after {
        content: "";
        position: absolute;
        left: 0.9rem;
        right: 0.9rem;
        bottom: 0.2rem;
        height: 1px;
        background-color: currentColor;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--duration) var(--ease);
    }

    .site-nav__link:hover,
    .site-nav__link.is-active {
        color: inherit;
    }

    .site-nav__link:hover::after,
    .site-nav__link.is-active::after {
        transform: scaleX(1);
    }

    .site-nav__link--cta {
        margin-left: 0.75rem;
        border: 1px solid currentColor;
        border-radius: var(--radius);
    }

    .site-nav__link--cta::after {
        display: none;
    }

    .site-nav__link--cta:hover {
        background-color: var(--color-accent-dark);
        border-color: var(--color-accent-dark);
        color: #fff;
    }

    /* Untermenü „Infos“ als Dropdown bei Mouseover / Tastaturfokus */
    .site-nav__item--has-sub {
        position: relative;
    }

    .site-nav__sub {
        position: absolute;
        top: calc(100% + 0.5rem);
        left: 50%;
        min-width: 12rem;
        margin-top: 0;
        padding: 0.6rem 0;
        align-items: stretch;
        gap: 0;
        border: 1px solid var(--color-line);
        border-radius: var(--radius);
        background-color: var(--color-background);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, 0.4rem);
        transition:
            opacity var(--duration) var(--ease),
            transform var(--duration) var(--ease),
            visibility 0s linear var(--duration);
    }

    /* Unsichtbare Brücke, damit das Menü beim Runterfahren mit der Maus offen bleibt */
    .site-nav__sub::before {
        content: "";
        position: absolute;
        inset: -0.6rem 0 auto;
        height: 0.6rem;
    }

    .site-nav__item--has-sub:hover .site-nav__sub,
    .site-nav__item--has-sub:focus-within .site-nav__sub {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
        transition:
            opacity var(--duration) var(--ease),
            transform var(--duration) var(--ease),
            visibility 0s;
    }

    .site-nav__sublink {
        display: block;
        padding: 0.55rem 1.25rem;
        font-size: 0.7rem;
        text-align: left;
        white-space: nowrap;
    }

    .site-nav__sublink:hover,
    .site-nav__sublink:focus-visible {
        background-color: var(--color-tint);
    }

    .intro {
        grid-template-columns: 5fr 6fr;
        gap: clamp(4rem, 8vw, 7rem);
    }

    .intro__media {
        max-width: none;
    }

    .location {
        grid-template-columns: 5fr 6fr;
        gap: clamp(4rem, 8vw, 7rem);
    }

    /* Anreise: alle vier Wege in einer Reihe */
    .travel {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
}


/* ==========================================================================
   14. Animations
   ========================================================================== */

/* Hero: sanftes Einblenden beim Laden */
.hero__content > * {
    animation: fade-up 1.1s var(--ease) both;
}

.hero__content > :nth-child(2) { animation-delay: 0.15s; }
.hero__content > :nth-child(3) { animation-delay: 0.3s; }
.hero__content > :nth-child(4) { animation-delay: 0.45s; }
.hero__content > :nth-child(5) { animation-delay: 0.6s; }
.hero__content > :nth-child(6) { animation-delay: 0.75s; }
.hero__content > :nth-child(7) { animation-delay: 0.9s; }
.hero__content > :nth-child(8) { animation-delay: 1.05s; }

.hero__image {
    animation: hero-zoom 14s var(--ease) both;
}

/* Scroll-Reveal: Elemente werden von script.js sichtbar geschaltet.
   Nur mit JS aktiv, damit ohne JS nichts unsichtbar bleibt. */
.js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.9s var(--ease),
        transform 0.9s var(--ease);
    transition-delay: var(--reveal-delay, 0s);
}

.js .reveal.is-visible {
    opacity: 1;
    transform: none;
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes hero-zoom {
    from { transform: scale(1.08); }
    to   { transform: scale(1); }
}

@keyframes scroll-hint {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(250%); }
}

/* Reduzierte Bewegung: Animationen weitgehend abschalten */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }

    .js .reveal {
        opacity: 1;
        transform: none;
    }

    .hero__scroll-line::after {
        display: none;
    }

    /* Countdown-Herz: keine wiederkehrende Füllung */
    .countdown__fill {
        display: none;
    }
}


/* ==========================================================================
   15. Mobile Schnellnavigation (fest am unteren Rand)
   Nur auf Handy & Tablet – ab 960px übernimmt die normale Navigation oben.
   ========================================================================== */
.quick-nav {
    position: fixed;
    inset: auto 0 0;
    z-index: 90;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--color-line);
    background-color: rgba(248, 245, 239, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.quick-nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 3.75rem;
    color: var(--color-muted);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color var(--duration) var(--ease);
}

.quick-nav__icon {
    width: 1.35rem;
    height: 1.35rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.quick-nav__link.is-active {
    color: var(--color-accent-dark);
}

/* Aktives Herz gefüllt */
.quick-nav__link.is-active .quick-nav__icon {
    fill: rgba(201, 161, 154, 0.35);
}

/* Platz schaffen, damit die Leiste nichts verdeckt */
.has-quick-nav {
    padding-bottom: calc(3.75rem + env(safe-area-inset-bottom));
}

/* Offenes Hamburger-Menü: Leiste ausblenden */
.nav-open .quick-nav {
    display: none;
}

@media (min-width: 60em) {
    .quick-nav {
        display: none;
    }

    .has-quick-nav {
        padding-bottom: 0;
    }
}