/* ==========================================================================
   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;
}

/* 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;
}

.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;
}

/* --- 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: 3rem;
}

.travel__item {
    text-align: center;
}

.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);
}

.timeline__item:hover::before {
    background-image: 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");
    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");
}

.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;
}

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

.rsvp-form__attending[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;
}

.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 {
        top: 0.65rem;
    }

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

    .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__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;
    }
}