@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Great+Vibes&display=swap'); /* Lädt die verwendeten Schriftarten. */
:root { /* Definiert zentrale Designwerte. */
  --paper: #f8f6f0; /* Speichert eine Designfarbe. */
  --surface: #fffdf8; /* Speichert eine Designfarbe. */
  --surface-soft: #f0eee5; /* Speichert eine Designfarbe. */
  --ink: #303c34; /* Speichert eine Designfarbe. */
  --muted: #6e776e; /* Speichert eine Designfarbe. */
  --sage: #829681; /* Speichert eine Designfarbe. */
  --sage-dark: #536b57; /* Speichert eine Designfarbe. */
  --sage-light: #e1e8dc; /* Speichert eine Designfarbe. */
  --clay: #b87560; /* Speichert eine Designfarbe. */
  --clay-light: #f1dfd5; /* Speichert eine Designfarbe. */
  --line: #dfe3d8; /* Speichert eine Designfarbe. */
  --serif: 'Playfair Display', Georgia, serif; /* Speichert eine Schriftfamilie. */
  --sans: 'DM Sans', Arial, sans-serif; /* Speichert eine Schriftfamilie. */
  --script: 'Great Vibes', cursive; /* Speichert eine Schriftfamilie. */
  --shadow: 0 18px 55px rgba(48, 60, 52, .08); /* Speichert den Schattenstil. */
} /* Beendet den Regelblock. */
* { box-sizing: border-box; } /* Berechnet Elementgrößen einheitlich. */
html { scroll-behavior: smooth; scroll-padding-top: 88px; } /* Scrollt weich mit Navigationsabstand. */
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.75; -webkit-font-smoothing: antialiased; } /* Legt globale Grundgestaltung fest. */
a { color: inherit; text-decoration: none; } /* Entfernt Linkunterstreichungen. */
button, input, select, textarea { font: inherit; } /* Übernimmt die Seitenschrift. */
.topbar { min-height: 78px; padding: 12px clamp(22px, 5.5vw, 88px); display: flex; align-items: center; justify-content: space-between; gap: 28px; position: sticky; top: 0; z-index: 20; background: rgba(255,253,248,.92); border-bottom: 1px solid rgba(223,227,216,.8); backdrop-filter: blur(18px); } /* Gestaltet die obere Navigationsleiste. */
.brand { font: 2.15rem/1 var(--script); color: var(--sage-dark); white-space: nowrap; } /* Gestaltet das Markenlogo. */
.brand span { color: var(--clay); padding: 0 2px; } /* Färbt das Marken-Trennzeichen. */
nav { display: flex; align-items: center; gap: clamp(12px, 1.7vw, 25px); color: #536057; font-size: .79rem; letter-spacing: .015em; } /* Ordnet die Navigationslinks. */
nav a { position: relative; padding: 8px 0; transition: color .2s ease; } /* Gestaltet Navigationslinks. */
nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 2px; height: 1px; background: var(--clay); transition: right .25s ease; } /* Zeichnet die Linkunterstreichung. */
nav a:hover { color: var(--clay); } /* Hebt aktive Navigationslinks hervor. */
nav a:hover::after { right: 0; } /* Animiert die Linkunterstreichung. */
.menu-toggle { display: none; background: transparent; border: 1px solid var(--line); border-radius: 50%; width: 42px; height: 42px; color: var(--ink); font-size: 1.25rem; cursor: pointer; } /* Gestaltet den Menüknopf. */
.hero { min-height: 640px; padding: 76px clamp(24px, 9vw, 140px) 88px; display: grid; grid-template-columns: 1.05fr .85fr; align-items: center; gap: clamp(35px, 7vw, 110px); position: relative; overflow: hidden; background: var(--surface); } /* Gestaltet den Titelbereich. */
.hero::before { content: ''; position: absolute; width: 600px; height: 600px; left: -250px; top: -290px; border: 1px solid #e4e7db; border-radius: 50%; box-shadow: 0 0 0 35px rgba(225,232,220,.25), 0 0 0 75px rgba(225,232,220,.15); } /* Erzeugt den linken Dekokreis. */
.hero-copy { position: relative; z-index: 1; text-align: center; } /* Positioniert den Titeltext. */
.eyebrow { margin: 0 0 14px; color: var(--sage-dark); font-size: .68rem; font-weight: 700; letter-spacing: .23em; text-transform: uppercase; } /* Gestaltet kleine Abschnittsüberschriften. */
.hero h1 { margin: 18px 0 15px; font: clamp(4.6rem, 8vw, 7.8rem)/.83 var(--script); font-weight: 400; color: var(--sage-dark); } /* Gestaltet die Hauptüberschrift. */
.hero h1 span { color: var(--clay); font-size: .72em; padding: 0 .08em; } /* Hebt den Namensteil hervor. */
.date { margin: 28px 0 0; font: 1.05rem var(--serif); letter-spacing: .22em; color: var(--clay); text-transform: uppercase; } /* Gestaltet das Hochzeitsdatum. */
.heart-rule { display: flex; align-items: center; justify-content: center; gap: 13px; margin: 23px auto 16px; color: var(--clay); font-size: 1.15rem; } /* Gestaltet die Herz-Trennlinie. */
.heart-rule::before, .heart-rule::after { content: ''; width: 42px; height: 1px; background: #d9b7a8; } /* Zeichnet Linien neben dem Herz. */
.hero-subtitle { color: var(--muted); font: italic 1.1rem var(--serif); margin: 0 0 28px; } /* Gestaltet den Titeluntertext. */
.hero-subtitle { text-align: justify; } /* Setzt den Bibeltext in Blocksatz. */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 13px 24px; border: 1px solid var(--sage-dark); border-radius: 3px; background: var(--sage-dark); color: white; font-size: .83rem; font-weight: 600; letter-spacing: .035em; cursor: pointer; transition: transform .2s, background .2s, box-shadow .2s; } /* Gestaltet die Schaltfläche. */
.button:hover { transform: translateY(-2px); background: #435947; box-shadow: 0 8px 20px rgba(83,107,87,.18); } /* Hebt den Button hervor. */
.hero-photo { width: min(100%, 420px); justify-self: center; padding: 11px 11px 44px; position: relative; z-index: 1; background: #fff; box-shadow: var(--shadow); transform: rotate(2deg); } /* Gestaltet den Foto-Rahmen. */
.hero-photo img { display: block; width: 100%; aspect-ratio: 4 / 4.7; object-fit: cover; background: linear-gradient(145deg, #e4e9df, #f3ded2 55%, #d9e2d7); color: transparent; } /* Gestaltet das Foto. */
.hero-flower { position: absolute; z-index: 0; height: auto; pointer-events: none; user-select: none; }
.hero-flower-top { top: 0; left: 0; width: clamp(140px, 20vw, 255px); opacity: .58; }
.hero-flower-bottom { right: 1.5vw; bottom: 12px; width: clamp(150px, 18vw, 235px); opacity: .78; transform: rotate(10deg); }
.section { padding: clamp(62px, 8vw, 112px) clamp(22px, 8vw, 125px); position: relative; } /* Gestaltet allgemeine Seitenabschnitte. */
.countdown { text-align: center; background: var(--sage-light); } /* Gestaltet den Countdown-Bereich. */
.countdown h2, .section-heading h2, .welcome h2 { margin: 0 0 16px; font: clamp(2.1rem, 4vw, 3.35rem)/1.18 var(--serif); font-weight: 400; letter-spacing: -.025em; } /* Gestaltet Abschnittsüberschriften. */
.countdown .eyebrow { color: var(--sage-dark); } /* Gestaltet kleine Abschnittsüberschriften. */
.count-grid { display: flex; justify-content: center; gap: 13px; margin: 31px auto 0; } /* Ordnet die Countdown-Felder. */
.count-grid div { width: 118px; padding: 20px 10px 17px; border: 1px solid rgba(83,107,87,.17); background: rgba(255,253,248,.72); } /* Gestaltet einzelne Countdown-Felder. */
.count-grid strong { display: block; font: 2.45rem/1.15 var(--serif); color: var(--sage-dark); font-weight: 400; } /* Gestaltet Countdown-Zahlen. */
.count-grid span { display: block; margin-top: 7px; color: var(--muted); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; } /* Gestaltet Countdown-Beschriftungen. */
.welcome { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(35px, 9vw, 135px); align-items: center; background: var(--surface); } /* Ordnet den Begrüßungsbereich. */
.welcome-text { max-width: 620px; } /* Begrenzt den Begrüßungstext. */
.welcome-text p:not(.eyebrow) { color: var(--muted); } /* Gestaltet den Begrüßungstext. */
.text-link { display: inline-block; margin-top: 12px; padding-bottom: 3px; border-bottom: 1px solid #c18a76; color: var(--clay); font-size: .85rem; font-weight: 700; } /* Gestaltet den Textlink. */
.text-link span { margin-left: 7px; } /* Gestaltet den Textlink. */
.quote-card { min-height: 290px; padding: 44px 28px; border: 1px solid #d7dfd2; outline: 1px solid #d7dfd2; outline-offset: 8px; text-align: center; background: linear-gradient(145deg, #f3eee4, #e8eee4); display: flex; flex-direction: column; align-items: center; justify-content: center; } /* Gestaltet die Zitatkarte. */
.quote-heart { color: var(--clay); font-size: 2rem; } /* Färbt das Zitat-Herz. */
.quote-card p { font: italic 1.55rem/1.55 var(--serif); } /* Gestaltet den Zitattext. */
.quote-card small { color: var(--sage-dark); font-size: .65rem; font-weight: 700; letter-spacing: .24em; } /* Gestaltet die Zitatquelle. */
.section-heading { max-width: 700px; margin: 0 auto 46px; text-align: center; } /* Gestaltet allgemeine Seitenabschnitte. */
.section-heading > p:last-child { max-width: 620px; margin: 0 auto; color: var(--muted); } /* Gestaltet den Abschnittsuntertitel. */
#ablauf { background: var(--paper); } /* Gestaltet den Ablaufbereich. */
.timeline { max-width: 800px; margin: auto; } /* Begrenzt den Zeitplan. */
.timeline article { display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line); } /* Ordnet einzelne Zeitplanpunkte. */
.timeline article:first-child { border-top: 1px solid var(--line); } /* Rahmt den ersten Zeitplanpunkt. */
.time { color: var(--clay); font-size: .85rem; font-weight: 700; } /* Gestaltet die Uhrzeitangabe. */
.timeline h3, .location-grid h3, .gift-cards h3 { margin: 0 0 5px; font: 1.4rem var(--serif); font-weight: 400; } /* Gestaltet Kartenüberschriften. */
.timeline p, .location-grid p, .gift-cards p { margin: 0; color: var(--muted); font-size: .92rem; } /* Gestaltet Beschreibungstexte. */
.rsvp { background: #e8ede4; } /* Gestaltet den Antwortbereich. */
.rsvp > .section-heading, .rsvp > #rsvp-form { position: relative; z-index: 1; }
.rsvp form { max-width: 740px; margin: auto; padding: clamp(22px, 4vw, 42px); background: var(--surface); border: 1px solid #d8e0d3; box-shadow: var(--shadow); } /* Gestaltet das Antwortformular. */
.guest-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 18px; margin-bottom: 16px; padding: 16px; border: 1px solid var(--line); background: #fffefa; }
.guest-fields .guest-name { margin: 0; }
.guest-fields .guest-name input { margin-bottom: 0; }
.attendance-toggle { display: inline-flex; min-width: 188px; min-height: 52px; align-items: center; gap: 10px; margin-bottom: 0; padding: 9px 13px; border: 1px solid transparent; border-radius: 3px; color: #fff; font: 600 .78rem var(--sans); letter-spacing: .04em; cursor: pointer; transition: background .2s, transform .2s, box-shadow .2s; }
.attendance-toggle:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(38,55,46,.13); }
.attendance-toggle.is-coming { background: var(--sage-dark); }
.attendance-toggle.is-not-coming { background: var(--clay); }
.attendance-switch { position: relative; flex: 0 0 42px; width: 42px; height: 24px; border: 1px solid rgba(255,255,255,.55); border-radius: 20px; background: rgba(32,45,36,.28); transition: background .2s; }
.attendance-switch > span { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.24); transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.attendance-toggle.is-coming .attendance-switch { background: rgba(255,255,255,.3); }
.attendance-toggle.is-coming .attendance-switch > span { transform: translateX(18px); }
.attendance-state { min-width: 66px; text-align: left; }
.attendance-hint { margin-left: auto; color: rgba(255,255,255,.76); font-size: .64rem; font-weight: 400; letter-spacing: .02em; }
.attendance-toggle:focus-visible { outline: 3px solid rgba(113,134,111,.35); outline-offset: 3px; }
.rsvp label, .rsvp legend { display: block; margin-bottom: 17px; color: #465248; font-size: .82rem; font-weight: 600; } /* Gestaltet Formularbeschriftungen. */
.rsvp input:not([type=radio]), .rsvp select, .rsvp textarea { display: block; width: 100%; margin-top: 7px; padding: 13px 14px; border: 1px solid #dce1d8; border-radius: 2px; background: #fffefa; color: var(--ink); font-size: .9rem; transition: border .2s, box-shadow .2s; } /* Gestaltet Formularfelder. */
.rsvp input[type="hidden"] { display: none; }
.rsvp input:focus, .rsvp select:focus, .rsvp textarea:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px rgba(130,150,129,.16); } /* Hebt aktive Felder hervor. */
.rsvp textarea { resize: vertical; } /* Gestaltet das Textfeld. */
.two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; } /* Ordnet zwei Formularfelder. */
.rsvp fieldset { margin: 0 0 16px; padding: 0; border: 0; } /* Gestaltet Formular-Auswahlgruppen. */
.rsvp .choice { display: inline-flex; align-items: center; gap: 9px; margin: 0 22px 8px 0; font-weight: 400; } /* Ordnet Auswahlmöglichkeiten. */
.rsvp .choice input { accent-color: var(--sage-dark); } /* Färbt Auswahlfelder. */
.form-note { margin: 17px 0 0; color: var(--muted); font-size: .76rem; } /* Gestaltet den Formularhinweis. */
#form-status { color: var(--sage-dark); font-size: .85rem; } /* Gestaltet die Formularmeldung. */
.gifts { background: var(--surface); } /* Gestaltet den Geschenkbereich. */
.dresscode { background: #fffdf8; } /* Gestaltet den Dresscode-Bereich. */
.dresscode-palette { display: block; width: min(100%, 580px); height: auto; margin: 34px auto 0; background: transparent; }
.gift-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1050px; margin: auto; } /* Ordnet die Geschenkekarten. */
#geschenke .gift-cards { grid-template-columns: minmax(0, 360px); justify-content: center; }
.gift-cards article { padding: 16px 20px 28px; border: 1px solid var(--line); background: #fffefa; text-align: center; transition: transform .25s, box-shadow .25s; } /* Gestaltet einzelne Geschenkekarten. */
.gift-cards article:hover { transform: translateY(-4px); box-shadow: var(--shadow); } /* Hebt die Geschenkekarte hervor. */
.gift-card-link { display: block; height: 100%; color: inherit; }
.gift-card-link:focus-visible { outline: 2px solid var(--sage-dark); outline-offset: 4px; }
.whatsapp-card { position: relative; }
.whatsapp-card .gift-card-link::after { position: absolute; inset: 0; content: ""; }
.whatsapp-icon, .gift-icon { display: block; width: 76px; height: 76px; object-fit: contain; }
.gift-art { height: 150px; display: grid; place-items: center; margin-bottom: 22px; font-size: 3.3rem; } /* Gestaltet die Kartenillustration. */
.gift-art.blue { background: #e5ebe5; color: var(--sage-dark); } /* Färbt die blaue Illustration. */
.gift-art.pink { background: #f2e2d9; color: var(--clay); } /* Färbt die rosafarbene Illustration. */
.experiences { background: #e3e9df; text-align: center; }
.experiences-camera { display: block; width: min(100%, 150px); height: auto; margin: 0 auto 24px; }
.experiences .section-heading { margin-bottom: 0; }
.photo-album-link { color: var(--sage-dark); text-decoration: underline; text-underline-offset: 3px; }
.photo-album-link:hover { color: var(--clay); }
.photo-album-link:focus-visible { outline: 2px solid var(--sage-dark); outline-offset: 4px; }
.memories { background: linear-gradient(125deg, #f3e7df 0%, #f8f2e9 55%, #e9eadf 100%); text-align: center; }
.memories-photo { display: block; width: clamp(140px, 19vw, 220px); height: auto; margin: 0 auto 24px; filter: drop-shadow(0 10px 12px rgba(38,55,46,.12)); }
.memories .section-heading { max-width: 760px; margin: 0 auto; }
.memories-link { color: var(--sage-dark); text-decoration: underline; text-underline-offset: 3px; }
.memories-link:hover { color: var(--clay); }
.memories-link:focus-visible { outline: 2px solid var(--sage-dark); outline-offset: 4px; }
.locations { background: #f1eee6; } /* Gestaltet den Ortsbereich. */
.location-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 900px; margin: auto; } /* Ordnet die Ortskarten. */
.location-grid article { padding: 32px; border: 1px solid #e0e1d6; background: var(--surface); } /* Gestaltet einzelne Ortskarten. */
.location-icon { display: grid; place-items: center; width: 47px; height: 47px; margin-bottom: 17px; border-radius: 50%; background: var(--sage-light); color: var(--sage-dark); font-size: 1.35rem; } /* Gestaltet das Ortssymbol. */
.location-grid p { margin: 12px 0; } /* Gibt Ortsbeschreibungen Abstand. */
.faq { background: var(--paper); } /* Gestaltet den FAQ-Bereich. */
.faq-list { max-width: 820px; margin: auto; } /* Begrenzt die FAQ-Liste. */
.faq-list details { margin: 10px 0; padding: 0 21px; border: 1px solid var(--line); background: var(--surface); } /* Gestaltet FAQ-Einträge. */
.faq-list summary { display: flex; justify-content: space-between; gap: 20px; padding: 17px 0; cursor: pointer; list-style: none; font-size: .92rem; font-weight: 600; } /* Gestaltet FAQ-Fragen. */
.faq-list summary::-webkit-details-marker { display: none; } /* Entfernt das Browser-Aufklappsymbol. */
.faq-list summary::after { content: '+'; color: var(--clay); font-size: 1.2rem; font-weight: 400; } /* Zeigt ein FAQ-Pluszeichen. */
.faq-list details[open] summary::after { content: '−'; } /* Ändert das offene FAQ-Symbol. */
.faq-list details p { margin: 0; padding: 0 0 19px; color: var(--muted); font-size: .9rem; } /* Gestaltet FAQ-Einträge. */
footer { padding: 48px 20px 38px; text-align: center; background: #dfe7dc; } /* Gestaltet den Seitenfuß. */
footer .brand { font-size: 2.35rem; } /* Vergrößert das Fußbereichslogo. */
.back-top { color: var(--sage-dark); font-size: .82rem; font-weight: 600; } /* Gestaltet den Zurück-nach-oben-Link. */
@media (max-width: 1050px) { /* Aktiviert die Tablet-Navigation. */
  .topbar { padding-inline: 4vw; } /* Gestaltet die obere Navigationsleiste. */
  .menu-toggle { display: block; } /* Gestaltet den Menüknopf. */
  nav { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 18px 6vw 24px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 15px 25px rgba(48,60,52,.08); flex-direction: column; align-items: flex-start; gap: 8px; } /* Ordnet die Navigationslinks. */
  nav.open { display: flex; } /* Zeigt das geöffnete Menü. */
  nav a { width: 100%; padding: 7px 0; } /* Gestaltet Navigationslinks. */
  .hero { padding-inline: 7vw; gap: 5vw; } /* Gestaltet den Titelbereich. */
} /* Beendet den Regelblock. */
@media (max-width: 720px) { /* Stapelt Layout auf Mobilgeräten. */
  .hero { grid-template-columns: 1fr; padding: 56px 7vw 70px; gap: 42px; } /* Gestaltet den Titelbereich. */
  .hero h1 { font-size: clamp(4.7rem, 17vw, 6.5rem); } /* Gestaltet die Hauptüberschrift. */
  .hero-photo { width: min(78%, 350px); } /* Gestaltet den Foto-Rahmen. */
  .section { padding: 62px 6vw; } /* Gestaltet allgemeine Seitenabschnitte. */
  .welcome { grid-template-columns: 1fr; gap: 38px; } /* Ordnet den Begrüßungsbereich. */
  .quote-card { min-height: 230px; } /* Gestaltet die Zitatkarte. */
  .gift-cards { gap: 14px; } /* Ordnet die Geschenkekarten. */
  .gift-cards article { padding: 12px 12px 22px; } /* Gestaltet einzelne Geschenkekarten. */
} /* Beendet den Regelblock. */
@media (max-width: 540px) { /* Optimiert Layout für Smartphones. */
  .topbar { min-height: 68px; } /* Gestaltet die obere Navigationsleiste. */
  .brand { font-size: 1.9rem; } /* Gestaltet das Markenlogo. */
  .hero { padding-top: 45px; } /* Gestaltet den Titelbereich. */
  .hero-photo { width: 82%; } /* Gestaltet den Foto-Rahmen. */
  .count-grid { gap: 6px; } /* Ordnet die Countdown-Felder. */
  .count-grid div { width: calc(25% - 4px); padding: 15px 3px 13px; } /* Gestaltet einzelne Countdown-Felder. */
  .count-grid strong { font-size: 1.65rem; } /* Ordnet die Countdown-Felder. */
  .count-grid span { font-size: .62rem; letter-spacing: .04em; } /* Ordnet die Countdown-Felder. */
  .timeline article { grid-template-columns: 83px 1fr; gap: 10px; padding: 19px 0; } /* Ordnet einzelne Zeitplanpunkte. */
  .time { font-size: .76rem; } /* Gestaltet die Uhrzeitangabe. */
  .timeline h3 { font-size: 1.2rem; } /* Begrenzt den Zeitplan. */
  .timeline p { font-size: .83rem; } /* Begrenzt den Zeitplan. */
  .two-fields, .location-grid, .gift-cards { grid-template-columns: 1fr; } /* Ordnet zwei Formularfelder. */
  .two-fields { gap: 0; } /* Ordnet zwei Formularfelder. */
  .gift-art { height: 95px; margin-bottom: 15px; } /* Gestaltet die Kartenillustration. */
  .rsvp form { padding: 22px 17px; } /* Gestaltet das Antwortformular. */
  .rsvp .choice { display: flex; } /* Ordnet Auswahlmöglichkeiten. */
  .guest-fields { grid-template-columns: 1fr; gap: 0; }
  .attendance-toggle { width: 100%; }
  .location-grid article { padding: 25px; } /* Gestaltet einzelne Ortskarten. */
} /* Beendet den Regelblock. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* Reduziert Bewegung auf Wunsch. */


/* Aktualisiertes Design beginnt hier. */
:root { /* Definiert zentrale Designwerte. */
  --paper: #f3f0e8; /* Speichert eine Designfarbe. */
  --surface: #fffdf8; /* Speichert eine Designfarbe. */
  --surface-soft: #e8e8dc; /* Speichert eine Designfarbe. */
  --ink: #26372e; /* Speichert eine Designfarbe. */
  --muted: #68746a; /* Speichert eine Designfarbe. */
  --sage: #71866f; /* Speichert eine Designfarbe. */
  --sage-dark: #344d3d; /* Speichert eine Designfarbe. */
  --sage-light: #e1e7dc; /* Speichert eine Designfarbe. */
  --clay: #b77962; /* Speichert eine Designfarbe. */
  --clay-light: #f0dfd4; /* Speichert eine Designfarbe. */
  --line: #d9ded2; /* Speichert eine Designfarbe. */
  --serif: 'Playfair Display', Georgia, serif; /* Speichert eine Schriftfamilie. */
  --sans: 'DM Sans', Arial, sans-serif; /* Speichert eine Schriftfamilie. */
  --script: 'Great Vibes', cursive; /* Speichert eine Schriftfamilie. */
  --shadow: 0 24px 65px rgba(38, 55, 46, .12); /* Speichert den Schattenstil. */
} /* Beendet den Regelblock. */
body { background: var(--paper); color: var(--ink); letter-spacing: .005em; } /* Legt globale Grundgestaltung fest. */
.topbar { /* Gestaltet die obere Navigationsleiste. */
  min-height: 86px; /* Legt die Mindesthöhe fest. */
  padding: 12px clamp(24px, 7vw, 110px); /* Legt Innenabstände fest. */
  background: rgba(255,253,248,.96); /* Legt den Hintergrund fest. */
  box-shadow: 0 4px 24px rgba(38,55,46,.035); /* Erzeugt einen Schatten. */
} /* Beendet den Regelblock. */
.brand { font-size: 2.45rem; color: var(--sage-dark); } /* Gestaltet das Markenlogo. */
nav { gap: clamp(14px, 2vw, 29px); font-size: .78rem; letter-spacing: .045em; } /* Ordnet die Navigationslinks. */
.hero { /* Gestaltet den Titelbereich. */
  min-height: 690px; /* Legt die Mindesthöhe fest. */
  padding: 90px clamp(28px, 9vw, 140px) 100px; /* Legt Innenabstände fest. */
  grid-template-columns: 1fr .9fr; /* Definiert die Spaltenaufteilung. */
  gap: clamp(40px, 8vw, 125px); /* Legt Elementabstände fest. */
  background: /* Legt den Hintergrund fest. */
    radial-gradient(ellipse at 12% 5%, #e8ecdf 0, transparent 34%), /* Erzeugt einen radialen Farbverlauf. */
    linear-gradient(115deg, #fffdf8 0%, #f7f3eb 100%); /* Erzeugt einen linearen Farbverlauf. */
} /* Beendet den Regelblock. */
.hero-copy { text-align: left; max-width: 600px; } /* Positioniert den Titeltext. */
.hero .eyebrow { letter-spacing: .27em; } /* Verfeinert die Titelzeile. */
.hero h1 { /* Gestaltet die Hauptüberschrift. */
  font-size: clamp(5rem, 8.2vw, 8.5rem); /* Legt die Schriftgröße fest. */
  line-height: .9; /* Legt den Zeilenabstand fest. */
  letter-spacing: -.045em; /* Legt den Zeichenabstand fest. */
} /* Beendet den Regelblock. */
.date { letter-spacing: .3em; } /* Gestaltet das Hochzeitsdatum. */
.heart-rule { justify-content: flex-start; margin-left: 0; } /* Gestaltet die Herz-Trennlinie. */
.heart-rule::before { width: 56px; } /* Gestaltet die Herz-Trennlinie. */
.hero-subtitle { max-width: 340px; font-size: 1.2rem; } /* Gestaltet den Titeluntertext. */
.button { /* Gestaltet die Schaltfläche. */
  padding: 15px 27px; /* Legt Innenabstände fest. */
  border-radius: 2px; /* Rundet die Ecken ab. */
  text-transform: uppercase; /* Ändert die Großschreibung. */
  letter-spacing: .1em; /* Legt den Zeichenabstand fest. */
  font-size: .72rem; /* Legt die Schriftgröße fest. */
} /* Beendet den Regelblock. */
.hero-photo { /* Gestaltet den Foto-Rahmen. */
  width: min(100%, 450px); /* Legt die Breite fest. */
  padding: 12px 12px 48px; /* Legt Innenabstände fest. */
  transform: rotate(1.5deg); /* Verändert Position oder Drehung. */
  box-shadow: 0 28px 70px rgba(38,55,46,.16); /* Erzeugt einen Schatten. */
} /* Beendet den Regelblock. */
.hero-photo-main { transform: rotate(-1.5deg); } /* Neigt das Startseitenfoto. */
.hero-photo img { aspect-ratio: 4 / 4.8; } /* Gestaltet das Foto. */
.section { padding-block: clamp(76px, 9vw, 130px); } /* Gestaltet allgemeine Seitenabschnitte. */
.countdown { background: #e5e9df; } /* Gestaltet den Countdown-Bereich. */
.countdown h2, .section-heading h2, .welcome h2 { /* Gestaltet Abschnittsüberschriften. */
  font-size: clamp(2.4rem, 4.2vw, 3.8rem); /* Legt die Schriftgröße fest. */
} /* Beendet den Regelblock. */
.countdown h2 { font-size: clamp(2.2rem, 3.8vw, 3.4rem); } /* Gestaltet die Countdown-Überschrift. */
.welcome h2 { font-size: clamp(1.5rem, 2.4vw, 2.2rem); } /* Gestaltet die Begrüßungsüberschrift. */
.count-grid { gap: 16px; } /* Ordnet die Countdown-Felder. */
.count-grid div { /* Gestaltet einzelne Countdown-Felder. */
  width: 130px; /* Legt die Breite fest. */
  padding: 24px 12px 20px; /* Legt Innenabstände fest. */
  background: rgba(255,253,248,.86); /* Legt den Hintergrund fest. */
  border-color: #cfd8ca; /* Legt die Rahmenfarbe fest. */
  box-shadow: 0 8px 24px rgba(38,55,46,.04); /* Erzeugt einen Schatten. */
} /* Beendet den Regelblock. */
.count-grid strong { font-size: 2.8rem; } /* Vergrößert die Countdown-Zahlen. */
.welcome { grid-template-columns: 1.1fr .8fr; } /* Ordnet den Begrüßungsbereich. */
.welcome-text { max-width: 650px; } /* Begrenzt den Begrüßungstext. */
.welcome-text p:not(.eyebrow) { font-size: 1rem; line-height: 1.95; } /* Gestaltet den Begrüßungstext. */
.welcome-text .story-title, .welcome-text h3 { margin: 1.6em 0 .45em; padding-left: 12px; border-left: 2px solid var(--clay); color: var(--sage-dark); font: 500 1.3rem/1.4 var(--serif); } /* Hebt gemeinsame Themen hervor. */
.welcome-side { display: grid; align-content: start; gap: 28px; } /* Ordnet Fotos und Zitat. */
.story-photo-stack { display: grid; gap: 24px; } /* Stapelt die Paarfotos. */
.story-photo-stack figure { position: relative; margin: 0; padding: 10px 10px 42px; background: var(--surface); box-shadow: var(--shadow); } /* Rahmt die Paarfotos. */
.story-photo-stack img { display: block; width: 100%; object-fit: cover; } /* Füllt die Fotorahmen. */
.story-photo-stack figure:first-child img { aspect-ratio: 4 / 4.8; } /* Zeigt das Hochformatfoto. */
.story-photo-stack figure:last-child img { aspect-ratio: 4 / 2.8; } /* Zeigt das Querformatfoto. */
.story-photo-stack figcaption { position: absolute; right: 0; bottom: 5px; left: 0; color: var(--sage-dark); text-align: center; font: 1.6rem var(--script); } /* Beschriftet die Paarfotos. */
.quote-card { /* Gestaltet die Zitatkarte. */
  min-height: 340px; /* Legt die Mindesthöhe fest. */
  padding: 48px 34px; /* Legt Innenabstände fest. */
  outline-offset: 10px; /* Verschiebt die Außenlinie. */
  background: linear-gradient(145deg, #f5eee3, #e4eadd); /* Legt den Hintergrund fest. */
} /* Beendet den Regelblock. */
.quote-card p { font-size: 1.8rem; } /* Gestaltet den Zitattext. */
#ablauf { background: #f3f0e8; } /* Gestaltet den Ablaufbereich. */
.section-heading { margin-bottom: 58px; } /* Gestaltet allgemeine Seitenabschnitte. */
.timeline { max-width: 850px; } /* Begrenzt den Zeitplan. */
.timeline article { /* Ordnet einzelne Zeitplanpunkte. */
  grid-template-columns: 130px 1fr 48px; /* Definiert die Spaltenaufteilung. */
  padding: 29px 0; /* Legt Innenabstände fest. */
} /* Beendet den Regelblock. */
.timeline h3, .location-grid h3, .gift-cards h3 { font-size: 1.55rem; } /* Gestaltet Kartenüberschriften. */
.timeline-icon, .location-icon { background: #e1e7dc; } /* Begrenzt den Zeitplan. */
.rsvp { background: #e3e9df; } /* Gestaltet den Antwortbereich. */
.rsvp form { /* Gestaltet das Antwortformular. */
  padding: clamp(28px, 5vw, 52px); /* Legt Innenabstände fest. */
  border: 0; /* Gestaltet den Rahmen. */
  box-shadow: 0 24px 65px rgba(38,55,46,.09); /* Erzeugt einen Schatten. */
} /* Beendet den Regelblock. */
.rsvp input:not([type=radio]), .rsvp select, .rsvp textarea { /* Gestaltet Formularfelder. */
  padding: 15px; /* Legt Innenabstände fest. */
  border-radius: 0; /* Rundet die Ecken ab. */
} /* Beendet den Regelblock. */
.gift-cards { gap: 24px; } /* Ordnet die Geschenkekarten. */
.gift-cards article { /* Gestaltet einzelne Geschenkekarten. */
  padding: 18px 22px 32px; /* Legt Innenabstände fest. */
  border-color: #e0e1d7; /* Legt die Rahmenfarbe fest. */
  background: #fffdf8; /* Legt den Hintergrund fest. */
} /* Beendet den Regelblock. */
.gift-art { height: 170px; font-size: 3.8rem; } /* Gestaltet die Kartenillustration. */
.locations { background: #eeece3; } /* Gestaltet den Ortsbereich. */
.location-grid article { /* Gestaltet einzelne Ortskarten. */
  padding: 38px; /* Legt Innenabstände fest. */
  border-color: #e0e1d7; /* Legt die Rahmenfarbe fest. */
  box-shadow: 0 10px 30px rgba(38,55,46,.035); /* Erzeugt einen Schatten. */
} /* Beendet den Regelblock. */
.location-grid article.location-ceremony, .location-grid article.location-venue { position: relative; isolation: isolate; overflow: hidden; background-position: center; background-size: cover; } /* Bereitet die Ortsbilder vor. */
.location-grid article.location-ceremony { background-image: linear-gradient(rgba(255,253,248,.78), rgba(255,253,248,.78)), url("images/martin-luther-kirche.png"); } /* Zeigt das aufgehellte Kirchenfoto. */
.location-grid article.location-venue { background-image: linear-gradient(rgba(255,253,248,.78), rgba(255,253,248,.78)), url("images/gut-boeckel.png"); } /* Zeigt das aufgehellte Gut-Böckel-Foto. */
.location-grid article.location-ceremony, .location-grid article.location-venue { text-align: left; } /* Richtet Ortskartentext linksbündig aus. */
.location-grid article.location-ceremony h3, .location-grid article.location-venue h3 { color: #263b2d; } /* Dunkelt die Ortsüberschriften ab. */
.location-grid article.location-ceremony p, .location-grid article.location-venue p { color: #34483a; } /* Verbessert die Textlesbarkeit. */
.location-grid article.location-ceremony .text-link, .location-grid article.location-venue .text-link { color: #704431; } /* Dunkelt die Routenlinks ab. */
.faq-list details { padding-inline: 24px; } /* Gestaltet FAQ-Einträge. */
.faq-list summary { padding-block: 21px; } /* Gestaltet FAQ-Fragen. */
footer { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-block: 58px 45px; background: #dce4d7; } /* Ordnet die Fußbereichslinks untereinander. */

@media (max-width: 720px) { /* Passt das Layout mobil an. */
  .hero { grid-template-columns: 1fr; padding: 62px 7vw 78px; gap: 42px; } /* Gestaltet den Titelbereich. */
  .hero-copy { text-align: center; margin-inline: auto; } /* Positioniert den Titeltext. */
  .hero h1 { font-size: clamp(4.7rem, 17vw, 6.5rem); } /* Gestaltet die Hauptüberschrift. */
  .heart-rule { justify-content: center; margin-inline: auto; } /* Gestaltet die Herz-Trennlinie. */
  .hero-subtitle { margin-inline: auto; } /* Gestaltet den Titeluntertext. */
  .hero-photo { width: min(82%, 350px); } /* Gestaltet den Foto-Rahmen. */
  .welcome { grid-template-columns: 1fr; } /* Ordnet den Begrüßungsbereich. */
} /* Beendet den Regelblock. */
@media (max-width: 540px) { /* Passt das Layout mobil an. */
  .topbar { padding-inline: 5vw; } /* Gestaltet die obere Navigationsleiste. */
  .brand { font-size: 2rem; } /* Gestaltet das Markenlogo. */
  .count-grid { gap: 5px; } /* Ordnet die Countdown-Felder. */
  .count-grid div { width: calc(25% - 4px); padding: 15px 2px 13px; } /* Gestaltet einzelne Countdown-Felder. */
  .count-grid strong { font-size: 1.55rem; } /* Ordnet die Countdown-Felder. */
  .section-heading { margin-bottom: 38px; } /* Gestaltet allgemeine Seitenabschnitte. */
} /* Beendet den Regelblock. */

body:not(.authenticated) > :not(#password-gate) { display: none !important; }
.authenticated #password-gate { display: none; }
body:not(.authenticated)::before {
  position: fixed;
  z-index: 0;
  inset: .8cm;
  background:
    linear-gradient(rgba(185, 154, 98, .48), rgba(185, 154, 98, .48)) right 0 top 0 / calc(100% - clamp(140px, 22vw, 280px)) 1px no-repeat,
    linear-gradient(rgba(185, 154, 98, .48), rgba(185, 154, 98, .48)) left 0 bottom 0 / 1px calc(100% - clamp(220px, 42vw, 520px)) no-repeat,
    linear-gradient(rgba(185, 154, 98, .48), rgba(185, 154, 98, .48)) left 0 bottom 0 / calc(100% - clamp(150px, 22vw, 280px)) 1px no-repeat,
    linear-gradient(rgba(185, 154, 98, .48), rgba(185, 154, 98, .48)) right 0 top 0 / 1px calc(100% - clamp(150px, 24vw, 300px)) no-repeat;
  content: "";
  pointer-events: none;
}
#password-gate {
  position: relative;
  z-index: 1;
  width: min(100% - 40px, 520px);
  margin: clamp(72px, 15vh, 150px) auto;
  padding: clamp(30px, 6vw, 52px);
  border: 1px solid rgba(83, 107, 87, .18);
  background: rgba(255, 253, 248, .94);
  box-shadow: 0 24px 70px rgba(38, 55, 46, .14), 0 5px 16px rgba(38, 55, 46, .06);
  animation: password-gate-arrive .7s cubic-bezier(.2, .75, .25, 1) both;
}
#password-gate::before {
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(183, 121, 98, .18);
  content: "";
  pointer-events: none;
}
#password-gate h1, #password-gate form { position: relative; z-index: 1; }
#password-gate h1 {
  margin: 0 0 28px;
  color: var(--sage-dark);
  font: 400 clamp(2.2rem, 7vw, 3.2rem)/1.15 var(--serif);
  letter-spacing: -.035em;
  text-align: center;
}
#password-gate h1::after {
  display: block;
  width: 48px;
  height: 1px;
  margin: 17px auto 0;
  background: var(--clay);
  content: "";
}
#password-gate .password-gate-flower { position: fixed; z-index: 2; width: clamp(140px, 20vw, 255px); height: auto; pointer-events: none; user-select: none; }
#password-gate .password-gate-flower-top { top: 0; left: 0; opacity: 1; }
#password-gate .password-gate-flower-bottom { right: 1.5vw; bottom: 12px; width: clamp(150px, 18vw, 235px); opacity: 1; transform: rotate(10deg); }
#password-gate label {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 500;
  text-align: center;
}
#password-gate input {
  display: block;
  width: 100%;
  min-height: 52px;
  margin-bottom: 18px;
  padding: 12px 15px;
  border: 1px solid #d9ded2;
  border-radius: 2px;
  background: #fffefa;
  color: var(--ink);
  font: 1rem var(--sans);
  letter-spacing: .12em;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
#password-gate input:focus {
  outline: none;
  border-color: var(--sage);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(113, 134, 111, .14);
}
#password-gate button {
  display: block;
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--sage-dark);
  border-radius: 2px;
  background: var(--sage-dark);
  color: var(--surface);
  font: 600 .78rem var(--sans);
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s, background .2s, box-shadow .2s;
}
#password-gate button:hover:not(:disabled) {
  transform: translateY(-2px);
  background: #435d4b;
  box-shadow: 0 8px 18px rgba(52, 77, 61, .2);
}
#password-gate button:disabled { cursor: wait; opacity: .75; }
#password-status {
  min-height: 1.5em;
  margin: 15px 0 0;
  color: var(--sage-dark);
  font-size: .85rem;
  line-height: 1.5;
  text-align: center;
}
@keyframes password-gate-arrive {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 540px) {
  #password-gate { margin-block: 12vh; }
  #password-gate .password-gate-flower-top { width: 125px; }
  #password-gate .password-gate-flower-bottom { width: 145px; }
}
@media (prefers-reduced-motion: reduce) {
  #password-gate { animation: none; }
}
.admin-rsvp-note { max-width: 740px; margin: auto; padding: 20px; border: 1px solid #d8e0d3; background: var(--surface); color: var(--muted); text-align: center; }