/* ══════════════════════════════════════════════════════════════════════════════
   frontend.css — Hochzeitswebseite öffentliches Frontend
   BEM-Präfix: hw-   |   Framework: core-framework.css
   ══════════════════════════════════════════════════════════════════════════════ */

   /*-- RESET ---*/

   /* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
*:not(dialog) {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Increase line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

/* ── Base ─────────────────────────────────────────────────────────────────────
   --font-heading / --font-body werden von PHP in :root gesetzt (design.json)   */
:root {
    --font-heading: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-body: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    font-family: var(--font-body, system-ui, sans-serif);
    background-color: var(--bg-body);
    font-size:var(--text-m, 1.8rem);
    color: var(--text-body);
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading, Georgia, serif);
    color: var(--text-title);
    margin: 0;
    line-height: 1.15;
}

[class*="container-"] {
    margin-left: auto;
    margin-right: auto;
    margin-inline:auto;
}

/* Scrollbar */
* {
  scrollbar-width: auto;
  scrollbar-color: var(--primary) #ffffff;
}
*::-webkit-scrollbar {
  width: 16px;
}
*::-webkit-scrollbar-track {
  background: #ffffff;
}
*::-webkit-scrollbar-thumb {
  background-color: var(--primary);
  border-radius: 10px;
  border: 3px solid #ffffff;
}

/* Glidebox -- lightbox */
.goverlay {
    backdrop-filter:blur(3px);
}
.glightbox-container button {
    padding:0;
}

/* ── hw-section ───────────────────────────────────────────────────────────────
   Basis-Wrapper jeder Section                                                  */

.hw-section {
    width: 100%;
    position:relative;
}

.hw-block {
    display:flex;
    flex-direction:column;
    width: 100%;
}

.hw-form-field {
    gap: var(--space-2xs);
}

.hw-form-field label {
    font-size: var(--text-s);
}

/* Globales Fallback-Padding für alle Sections (niedrige Spezifität → .padding-* überschreibt) */
:where(.hw-section) {
    padding: var(--space-2xl) var(--space-m);
}

/* ── Utility: CSS-Grid-Stacking ────────────────────────────────────────────────
   Alle direkten Kinder belegen dieselbe Grid-Zelle (übereinander gestapelt).   */

.hw-stack {
    display: grid;
}
.hw-stack > * {
    grid-area: 1 / 1;
}

/* ── Utility: absolutes Füll-Element ──────────────────────────────────────────
   Einsatz: Bilder und Overlays die ihren Positionierungskontext vollständig
   ausfüllen sollen (position:relative am Eltern-Element erforderlich).         */

.hw-abs-fill {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Utility: Overlay-Ebene (pointer-events aus, über Bild, unter Content)
   Kombination mit .hw-abs-fill: <div class="hw-overlay hw-abs-fill">           */

.hw-overlay {
    pointer-events: none;
    z-index: 1;
}

/* 
 ALLGEMEINE FORMATIERUNG 
 -- Absatz Abstände
*/
.hw-section div:not([class*="gap"]) > p + p {
    margin-top:1em;
}


/* ══════════════════════════════════════════════════════════════════════════════
   BIG-HEADER — Vollbild-Hero mit Overlay und frei positioniertem Content
   ══════════════════════════════════════════════════════════════════════════════ */

/* Positionierungskontext; display:flex damit .hw-hero__content (flex:1)
   die volle Höhe ausfüllt.                                                     */
.hw-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--primary-l-5, #f8f4ee);
}


/* Hintergrundbild + Overlay: nutzen .hw-abs-fill im Template.
   object-position kommt als inline style vom Vue-Template.                     */
.hw-hero__img {
    object-fit: cover;
    display: block;
    z-index: 0;
}

.hw-hero__overlay {
    pointer-events: none;
    z-index: 1;
}

/* Inhalt: flex: 1 damit er die volle Höhe von .hw-hero ausfüllt.
   z-index: 2 damit er über Bild und Overlay liegt.                           */
.hw-hero__content {
    flex: 1;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}


/* ── Positionierungs-Modifier (text_align-Feld) ─────────────────────────────── */

/* Vertikal: top / center / bottom */
.hw-hero__content--top-left,
.hw-hero__content--top-center,
.hw-hero__content--top-right    { justify-content: flex-start; }

.hw-hero__content--center,
.hw-hero__content--center-left,
.hw-hero__content--center-right { justify-content: center; }

.hw-hero__content--bottom-left,
.hw-hero__content--bottom-center,
.hw-hero__content--bottom-right { justify-content: flex-end; }

/* Horizontal: left / center / right */
.hw-hero__content--top-left,
.hw-hero__content--center-left,
.hw-hero__content--bottom-left  { align-items: flex-start; }

.hw-hero__content--top-center,
.hw-hero__content--center,
.hw-hero__content--bottom-center { align-items: center; text-align: center; }

.hw-hero__content--top-right,
.hw-hero__content--center-right,
.hw-hero__content--bottom-right { align-items: flex-end; text-align: right; }

.hw-hero__headline {
    margin: 0;
    line-height: 1.1;
}

.hw-hero__subline {
    margin: 0;
    line-height: 1.3;
    font-weight: 400;
}

.hw-hero__body {
    margin-top: var(--space-xs);
}

/* ── Größen-Skala: 5 Stufen (s/m/l/xl/2xl → h5/h4/h3/h2/h1) ──────────────────
   Gilt global für alle Sections; Farbe kommt per inline style.                 */

:where(.hw-hero__content, .hw-hero-split__content, .hw-intro) h1 { font-size: var(--text-4xl); }
:where(.hw-hero__content, .hw-hero-split__content, .hw-intro) h2 { font-size: var(--text-3xl); }
:where(.hw-hero__content, .hw-hero-split__content, .hw-intro) h3 { font-size: var(--text-2xl); }
:where(.hw-hero__content, .hw-hero-split__content, .hw-intro) h4 { font-size: var(--text-xl);  }
:where(.hw-hero__content, .hw-hero-split__content, .hw-intro) h5 { font-size: var(--text-l);   }

/* ══════════════════════════════════════════════════════════════════════════════
   HERO-SPLIT — 50:50-Aufteilung Bild / Content (hero-header)
   ══════════════════════════════════════════════════════════════════════════════ */

.hw-hero-split {
    min-height: 60vh;
}


/* Bild-Hälfte: position:relative als Kontext für .hw-abs-fill */
.hw-hero-split__media {
    position: relative;
    overflow: hidden;
    background-color: var(--primary-l-5, #f8f4ee);
}

/* .hw-abs-fill übernimmt Positionierung; hier nur object-fit */
.hw-hero-split__img {
    object-fit: cover;
    display: block;
}

/* Content-Hälfte: vertikal zentriert, padding via .padding-* (Core-Framework) */
.hw-hero-split__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--grid-gap);
}
:where(.hw-hero-split__content) {
    padding: var(--space-l);
}

/* Bildseite rechts: DOM-Reihenfolge per order umkehren */
.hw-hero-split--img-right .hw-hero-split__media   { order: 2; }
.hw-hero-split--img-right .hw-hero-split__content { order: 1; }

/* Responsive: Bild-Mindesthöhe im 1-Spalten-Layout */
@media (max-width: 768px) {
    .hw-hero-split__media {
        min-height: 50vw;
    }
    .hw-hero-split--img-right .hw-hero-split__media   { order: 0; }
    .hw-hero-split--img-right .hw-hero-split__content { order: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   BIG-HEADER — Vollbild-Hero mit Overlay und frei positioniertem Content
   ══════════════════════════════════════════════════════════════════════════════ */

/* Kein Section-Padding (Vollbild); flex damit hw-hero__content die Höhe ausfüllt.
   Bild und Overlay nutzen .hw-abs-fill relativ zur section (ignoriert padding). */
.hw-section--big-header {
    padding: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--primary-l-5, #f8f4ee);
}

/* ══════════════════════════════════════════════════════════════════════════════
   INTRO — Einleitungs-Section (Text + optionales Bild)
   ══════════════════════════════════════════════════════════════════════════════ */

:where(.hw-section--intro) {
    padding: var(--space-2xl, 4rem) var(--space-l, 2rem);
}

.hw-intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-m, 1.6rem);
}

.hw-intro__headline {
    margin-bottom: 0.5em;
    /* Farbe kommt per inline style */
}

/* Bild oben */
.hw-intro__img-top {
    width: 100%;
}

.hw-intro__img-top .hw-intro__img {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    border-radius: var(--radius-m, 8px);
    display: block;
}

.hw-intro__img-col {
    align-self: stretch;
    display: flex;
    align-items: center;
    position:relative;
    z-index:1;
}

.hw-intro__img-col .hw-intro__img {
    width: 100%;
    height: auto;
    aspect-ratio: 0.8;
    max-height: 550px;
    object-fit: cover;
    display: block;
    outline:12px solid white;
    box-shadow: 4px 9px 12px 11px hsla(0, 0%, 0%, 0.25);
    transform:rotate(-4deg);
}

.hw-intro__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs, 0.7rem);
    justify-content:center;
}

/* Body-Text: p-Tags aus renderBody() */
.hw-intro__body p {
    margin: 0 0 0.75em;
    line-height: 1.75;
}
.hw-intro__body p:last-child {
    margin-bottom: 0;
}

/* column-count kommt per inline style (body_cols) */
.hw-intro__body {
    line-height: 1.75;
}

/* Responsive: Body-Spalten auf Mobile aufheben */
@media (max-width: 640px) {
    .hw-intro__body {
        column-count: 1 !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   COUNTDOWN
   ══════════════════════════════════════════════════════════════════════════════ */

:where(.hw-section--countdown) {
    text-align: center;
}

.hw-countdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-m);
    width: fit-content;
    margin-inline: auto;
    position:relative;
    z-index:2;
}

:where(.hw-countdown) {
    padding: var(--space-l); /* Default = padding-l; überschreibbar per .padding-* */
}

.hw-countdown__headline {
    margin: 0;
}

.hw-countdown__timer {
    display: flex;
    align-items: flex-start;
    gap: var(--space-s);
}

.hw-countdown__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25em;
    min-width: 4rem;
}

.hw-countdown__value {
    font-size: var(--text-4xl);
    font-family: var(--font-heading, inherit);
    line-height: 1;
    font-weight: 700;
    color: var(--primary);
}

.hw-countdown__label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-body);
    opacity: 0.7;
}

.hw-countdown__sep {
    font-size: var(--text-4xl);
    line-height: 1;
    font-weight: 300;
    color: var(--primary);
    padding-top: 0.05em;
}

.hw-countdown__after {
    margin: 0;
    font-size: var(--text-m);
    color: var(--text-body);
}

/* ══════════════════════════════════════════════════════════════════════════════
   QUOTE
   ══════════════════════════════════════════════════════════════════════════════ */

:where(.hw-section--quote) {
    padding: var(--space-2xl) var(--space-l);
}

.hw-quote {
    max-width: 760px;
    margin: 0 auto;
}

.hw-quote__blockquote {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

.hw-quote__text {
    margin: 0;
    line-height: 1.5;
    font-family: var(--font-heading, inherit);
    font-style: italic;
}

:where(.hw-quote__author) {
    font-style: normal;
    font-size: var(--text-s);
    color: var(--text-body);
    opacity: 0.75;
}

/* ══════════════════════════════════════════════════════════════════════════════
   TEXT-IMAGE
   ══════════════════════════════════════════════════════════════════════════════ */

:where(.hw-section--text-image) {
    padding: var(--space-2xl) var(--space-l);
}

.hw-ti {
    max-width: 1100px;
    margin: 0 auto;
}

/* Seitenlayout: 2-spaltig */
.hw-ti--image-left,
.hw-ti--image-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-l);
    align-items: center;
}

/* image-right: Bild nach rechts, Content nach links */
.hw-ti--image-right .hw-ti__media   { order: 2; }
.hw-ti--image-right .hw-ti__content { order: 1; }

/* Vertikallayout: Block */
.hw-ti--image-top,
.hw-ti--image-bottom {
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
}

/* image-bottom: Bild nach unten */
.hw-ti--image-bottom .hw-ti__media   { order: 2; }
.hw-ti--image-bottom .hw-ti__content { order: 1; }

.hw-ti__img {
    width: 100%;
    height: 100%;
    max-height: 520px;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-m);
}

.hw-ti--image-top .hw-ti__img,
.hw-ti--image-bottom .hw-ti__img {
    max-height: 400px;
}

.hw-ti__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

.hw-ti__headline { margin: 0; }

.hw-ti__body p {
    margin: 0 0 0.75em;
    line-height: 1.75;
}
.hw-ti__body p:last-child { margin-bottom: 0; }

/* Button */
.hw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75em 1.75em;
    border-radius: var(--radius-ui);
    font-size: var(--text-s);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s, background 0.3s ease;
    align-self: flex-start;
}
.hw-btn:hover { opacity: 0.85; }

.hw-btn--primary {
    background-color: var(--primary);
    color: var(--light, #fff);
}

.hw-btn--primary:hover {
    background-color: color-mix(in srgb, var(--primary) 90%, black);
}

.hw-btn--secondary {
    background-color: var(--light-20);
    color: var(--primary);
    outline:2px solid var(--primary);
    outline-offset:-2px;
}
.hw-btn--secondary:hover {
    background-color: color-mix(in srgb, var(--primary) 20%, var(--light));
}


.hw-btn--primitive {
    padding:0;
    border:none;
    border-radius:0;
    color:var(--primary);
    filter: brightness(85%);
}




/* Responsive */
@media (max-width: 768px) {
    .hw-ti--image-left,
    .hw-ti--image-right {
        grid-template-columns: 1fr;
    }
    .hw-ti--image-right .hw-ti__media,
    .hw-ti--image-right .hw-ti__content { order: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   LOCATIONS
   ══════════════════════════════════════════════════════════════════════════════ */

.hw-section--locations {
    padding: var(--space-2xl) var(--space-l);
}

.hw-locations {
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
}

.hw-locations__grid {
    grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
    display:grid;
}

:where(.hw-locations__headline) {
    margin: 0;
    text-align: center;
}

:where(.hw-locations__intro) {
    margin: 0;
    text-align: center;
}


.hw-loc-card {
    border-radius: var(--radius-l, 12px);
    border:1px solid var(--border-primary);
    overflow: hidden;
    background: var(--bg-surface, #f5f2ee);
    display: flex;
    flex-direction: column;
}

.hw-loc-card__img-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.hw-loc-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.hw-loc-card:hover .hw-loc-card__img {
    transform: scale(1.03);
}

.hw-loc-card__body {
    padding: var(--space-m);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    flex: 1;
}

.hw-loc-card__name {
    margin: 0;
    font-size: var(--text-l);
    line-height: 1.3;
    color: var(--text-title);
}

.hw-loc-card__address {
    margin: 0;
    font-style: normal;
    font-size: var(--text-s);
    color: var(--text-body);
    opacity: 0.75;
    line-height: 1.5;
}

.hw-loc-card__desc {
    margin: 0;
    font-size: var(--text-s);
    color: var(--text-body);
    line-height: 1.6;
    flex: 1;
}

.hw-loc-card__btn {
    margin-top: var(--space-xs);
    align-self: flex-start;
}

.hw-locations__grid--image-left,
.hw-locations__grid--image-right {
    grid-template-columns: 1fr;
}

.hw-locations__grid--image-left .hw-loc-card,
.hw-locations__grid--image-right .hw-loc-card {
    flex-direction: row;
}

.hw-locations__grid--image-right .hw-loc-card {
    flex-direction: row-reverse;
}

.hw-locations__grid--image-left .hw-loc-card__img-wrap,
.hw-locations__grid--image-right .hw-loc-card__img-wrap {
    width: 38%;
    flex-shrink: 0;
    aspect-ratio: 4 / 3;
}

@media (max-width: 767px) {
    .hw-locations__grid--image-left .hw-loc-card,
    .hw-locations__grid--image-right .hw-loc-card {
        flex-direction: column;
    }
    .hw-locations__grid--image-left .hw-loc-card__img-wrap,
    .hw-locations__grid--image-right .hw-loc-card__img-wrap {
        width: 100%;
        aspect-ratio: 16 / 9;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ACCOMMODATION
   ══════════════════════════════════════════════════════════════════════════════ */

.hw-section--accommodation {
    padding: 0;
    overflow: hidden;
}
.hw-accommodation {
    min-height: 40dvh;
}
.hw-accommodation--image-right .hw-accommodation__media {
    order: 2;
}
.hw-accommodation__media {
    position: relative;
    min-height: 40dvh;
    overflow: hidden;
}
.hw-accommodation__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hw-accommodation__content {
    padding: var(--space-xl) var(--space-l);
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    justify-content: center;
}
.hw-accommodation__headline { margin: 0; }
.hw-accommodation__intro { font-size: var(--text-m); margin-bottom:var(--space-m)}
.hw-accommodation__items {
    display: grid;
    grid-template-columns: var(--grid-min-30);
    gap: var(--space-m);
}
.hw-unk-item {
    display: flex;
    gap: var(--space-s);
    align-items: flex-start;
}
.hw-unk-item__icon {
    font-size: var(--text-xl);
    line-height: 1.2;
    flex-shrink: 0;
}
.hw-unk-item__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}
.hw-unk-item__name {
    margin: 0;
    font-weight: 600;
    color: var(--text-title);
}
.hw-unk-item__address {
    margin: 0;
    font-style: normal;
    font-size: var(--text-s);
    color: var(--text-body);
    opacity: 0.75;
    line-height: 1.5;
}
.hw-unk-item__btn { margin-top: var(--space-3xs); }

/* ══════════════════════════════════════════════════════════════════════════════
   WITNESSES
   ══════════════════════════════════════════════════════════════════════════════ */

.hw-section--witnesses {
    padding: var(--space-2xl) var(--space-l);
}

.hw-witnesses {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
}

:where(.hw-witnesses__headline) {
    margin: 0;
    text-align: center;
}

.hw-witnesses__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-l);
}

.hw-witness-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-s);
}

.hw-witness-card__photo-wrap {
    width: 160px;
    height: 160px;
    border-radius: 50%; /* default: circular; overridden by inline style when photo_border_radius is set */
    overflow: hidden;
    flex-shrink: 0;
    box-sizing: border-box; /* keeps border inside the fixed dimensions */
}

.hw-witness-card__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hw-witness-card__photo--placeholder {
    background: var(--primary-l-5, #f0e8ee);
    width: 100%;
    height: 100%;
}

.hw-witness-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}

:where(.hw-witness-card__role) {
    margin: 0;
    font-size: var(--text-s);
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

:where(.hw-witness-card__name) {
    margin: 0;
    font-size: var(--text-l);
    color: var(--text-title);
}

:where(.hw-witness-card__desc) {
    margin: 0.25em 0 0;
    font-size: var(--text-m);
    color: var(--text-body);
    line-height: 1.65;
}

/* ── Witnesses layout: image-left + alternating ──────────────────────────────
   Items stacked vertically; each card is a horizontal flex row.               */

.hw-witnesses--image-left .hw-witnesses__grid,
.hw-witnesses--alternating .hw-witnesses__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.hw-witnesses--image-left .hw-witness-card,
.hw-witnesses--alternating .hw-witness-card {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: var(--space-l);
}

/* Even items flip in alternating layout */
.hw-witnesses--alternating .hw-witness-card:nth-child(even) {
    flex-direction: row-reverse;
    text-align: right;
}

.hw-witnesses--image-left .hw-witness-card__photo-wrap,
.hw-witnesses--alternating .hw-witness-card__photo-wrap {
    flex-shrink: 0;
}

/* ── Witnesses layout: image-top ─────────────────────────────────────────────
   Rectangular photo fills top of each card; items in auto-fit grid.           */

.hw-witnesses--image-top .hw-witnesses__grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    align-items: start;
}

.hw-witnesses--image-top .hw-witness-card__photo-wrap {
    width: 100%;
    height: 220px;
    border-radius: var(--radius-m); /* rectangular default; overridden by inline style */
}

/* ── Mobile: collapse horizontal layouts to column ───────────────────────────*/

@media (max-width: 640px) {
    .hw-witnesses--image-left .hw-witness-card,
    .hw-witnesses--alternating .hw-witness-card,
    .hw-witnesses--alternating .hw-witness-card:nth-child(even) {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   COUPLE
   ══════════════════════════════════════════════════════════════════════════════ */

.hw-section--couple {
    padding: var(--space-2xl) var(--space-l);
}

.hw-couple {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

:where(.hw-couple__headline) {
    margin: 0;
    text-align: center;
}

.hw-couple__intro {
    text-align: center;
    color: var(--text-body);
}

.hw-couple__grid {
    display: grid;
    grid-template-columns: var(--grid-2);
    gap: var(--space-xl);
    width: var(--container-m);
    max-width:100%;
}

.hw-couple-person {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-s);
}

.hw-couple-person__photo-wrap {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.hw-couple-person__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hw-couple-person__photo--placeholder {
    background: var(--primary-l-5, #f0e8ee);
    width: 100%;
    height: 100%;
}

.hw-couple-person__body {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}

.hw-couple-person__name {
    margin: 0;
    font-size: var(--text-xl);
    color: var(--text-title);
}

:where(.hw-couple-person__text) {
    font-size: var(--text-s);
    color: var(--text-body);
    line-height: 1.7;
}

.hw-couple-person__text p {
    margin: 0 0 0.6em;
}
.hw-couple-person__text p:last-child {
    margin-bottom: 0;
}

/* ── Couple layout: image-left + alternating ─────────────────────────────── */

.hw-couple--image-left .hw-couple__grid,
.hw-couple--alternating .hw-couple__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.hw-couple--image-left .hw-couple-person,
.hw-couple--alternating .hw-couple-person {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: var(--space-l);
}

.hw-couple--alternating .hw-couple-person:nth-child(even) {
    flex-direction: row-reverse;
    text-align: right;
}

.hw-couple--image-left .hw-couple-person__photo-wrap,
.hw-couple--alternating .hw-couple-person__photo-wrap {
    flex-shrink: 0;
}

/* ── Couple layout: image-top ─────────────────────────────────────────────── */

.hw-couple--image-top .hw-couple__grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    align-items: start;
}

.hw-couple--image-top .hw-couple-person__photo-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-m);
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .hw-couple__grid {
        grid-template-columns: 1fr;
        gap: var(--space-l);
    }

    .hw-couple--image-left .hw-couple-person,
    .hw-couple--alternating .hw-couple-person,
    .hw-couple--alternating .hw-couple-person:nth-child(even) {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .hw-witnesses__grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }

}

/* ══════════════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════════════ */

.hw-footer {
    padding: var(--space-m, 1.6rem) var(--space-l, 2rem);
    border-top: 1px solid var(--border-primary, rgba(0,0,0,0.1));
    background-color: var(--bg-surface, #f5f2ee);
}

.hw-footer__inner {
    width: var(--container-m);
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s, 1rem);
    flex-wrap: wrap;
    font-size: var(--text-s);
    color: var(--text-body);
    opacity: 0.7;
}


.hw-footer__links {
    display:flex;
    flex-direction: row;
    gap: var(--space-m);
}

.hw-footer__link {
    color: inherit;
    text-decoration: none;
    border-bottom:2px solid var(--primary-20);
    transition: border 0.4s ease;
}

.hw-footer__link:hover {
    border-color: var(--primary);
}

/* ══════════════════════════════════════════════════════════════════════════════
   SPLASH — Passwortschutz-Seite
   ══════════════════════════════════════════════════════════════════════════════ */

.hw-splash {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-color: var(--primary-l-5, #f8f4ee);
    padding: var(--space-l, 2rem);
}

.hw-splash__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 0;
}

.hw-splash__card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    padding: var(--space-xl, 3rem);
    text-align: center;
    background: var(--bg-body, #fff);
    border-radius: var(--radius-l, 12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.hw-splash__headline {
    font-family: var(--font-heading, Georgia, serif);
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    color: var(--text-title);
    margin: 0 0 var(--space-xs, 0.8rem);
}

.hw-splash__text {
    color: var(--text-body);
    margin: 0 0 var(--space-m, 1.6rem);
    line-height: 1.6;
}

.hw-splash__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs, 0.8rem);
}

.hw-splash__input {
    width: 100%;
    padding: 0.7em 1em;
    border: 1px solid var(--border-primary, rgba(0,0,0,0.2));
    border-radius: var(--radius, 6px);
    text-align: center;
    box-sizing: border-box;
}

.hw-splash__input--error {
    border-color: var(--error, #cc3333);
    outline-color: var(--error, #cc3333);
}

.hw-splash__error {
    color: var(--error, #cc3333);
    font-size: 0.875rem;
    margin: 0;
}

.hw-splash__btn {
    width: 100%;
    padding: 0.75em;
    margin-top: var(--space-2xs, 0.5rem);
}

/* ── program / tagesablauf ─────────────────────────────────────────────────── */
.hw-program {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    padding: var(--space-xl) var(--space-l);
    align-items: center;
}

.hw-program__headline { margin: 0; }
.hw-program__intro    { margin: 0; max-width: 60ch; }

.hw-program-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    position: relative;
    padding-left: calc(48px + 12px);
}

.hw-program-item__dot {
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--hw-timeline-color, var(--primary));
    background: var(--hw-emoji-bg-color, var(--bg-body, #fff));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    flex-shrink: 0;
}

.hw-program-item__connector {
    position: absolute;
    left: 23px;
    top: calc(48px + 12px);
    width: 2px;
    bottom: calc(-1 * var(--space-2xl) + 12px);
    background: color-mix(in srgb, var(--hw-timeline-color, var(--primary)) 30%, transparent);
}

.hw-program-item:last-child .hw-program-item__connector {
    display: none;
}

.hw-program-item__head {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}

.hw-program-item__time  { font-weight: 600; font-size: var(--text-s); opacity: 0.8; }
.hw-program-item__icon  { font-size: 2.2rem; line-height: 1; }
.hw-program-item__title { margin: 0; font-weight: 600; }
.hw-program-item__desc  { margin: 0; opacity: 0.75; }

.hw-program__items {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

@media (min-width: 768px) {
    .hw-program__items {
        flex-direction: row;
        overflow-x: auto;
        gap: 0;
        padding-bottom: var(--space-s);
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--primary) 30%, transparent) transparent;
    }

    .hw-program-item {
        flex: 0 0 clamp(160px, 20vw, 240px);
        padding-left: 0;
        padding-top: calc(48px + var(--space-s));
        padding-right: var(--space-m);
    }

    .hw-program-item__dot {
        top: 0;
        left: 0;
    }

    .hw-program-item__connector {
        top: 23px;
        left: calc(48px + 12px);
        right: 12px;
        width: auto;
        height: 2px;
        bottom: auto;
    }
}

/* ── Burger Navigation ───────────────────────────────────────────────────── */
.hw-nav {
    position: fixed;
    top: var(--space-m);
    left: var(--space-m);
    z-index: 100;
}

.hw-nav__burger {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-m);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
    transition: background .15s;
}

.hw-nav__burger:hover {
    background: var(--secondary);
}

.hw-nav__drawer {
    position: absolute;
    top: calc(44px + 8px);
    left: 0;
    background: var(--bg-body, #fff);
    border-radius: var(--radius-s);
    box-shadow: 0 6px 32px rgba(0, 0, 0, .15);
    min-width: 220px;
    border: 1px solid rgba(0, 0, 0, .06);
    overflow:clip;
}

.hw-nav__item {
    display: block;
    width: 100%;
    padding: var(--space-xs) var(--space-m);
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--text-s);
    font-family: var(--font-body);
    color: var(--text-body);
    white-space: nowrap;
    transition: color .1s;
}

.hw-nav__item:hover {
    color: var(--dark);
    background-color: var(--dark-10);
}

.hw-nav__divider {
    height: 1px;
    background: rgba(0, 0, 0, .08);
    margin: var(--space-xs) var(--space-m);
}

.hw-nav__item--lang-active {
    color: var(--primary);
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════════════
   NAVIGATION SECTION
   ══════════════════════════════════════════════════════════════════════════════ */

.hw-nav-section {
    position: relative;
}

.hw-nav-section__inner {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    flex-wrap: wrap;
}

.hw-nav-section__title {
    margin: 0;
    flex-shrink: 0;
}

.hw-nav-section__links {
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
}

.hw-nav-section__btn {
    font-size: var(--text-s);
    background: none;
    border: none;
    border-radius:unset;
    border-bottom: 2px solid transparent;
    color: var(--nav-link-color, var(--text-body));
    padding: var(--space-xs) var(--space-s);
    cursor: pointer;
    font-family: var(--font-body);
    transition: color .15s, border-color .15s;
}

.hw-nav-section__btn:hover {
    background: none;
    color: var(--nav-link-hover-color, var(--primary));
    border-bottom-color: currentColor;
}

.hw-nav-section__burger {
    display: none;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-m);
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: auto;
}

.hw-nav-section__drawer {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;
    background: var(--bg-body);
    border-radius: var(--radius-s);
    box-shadow: 0 6px 32px rgba(0,0,0,.15);
    min-width: 220px;
    border: 1px solid rgba(0,0,0,.06);
    overflow: clip;
}

.hw-nav-section__drawer-item {
    display: block;
    width: 100%;
    padding: var(--space-xs) var(--space-m);
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--text-s);
    font-family: var(--font-body);
    color: var(--text-body);
}

.hw-nav-section__drawer-item:hover {
    background: var(--dark-10);
}

@media (max-width: 680px) {
    .hw-nav-section__links { display: none; }
    .hw-nav-section__burger { display: flex; }
}

/* ── Lang Switcher ─────────────────────────────────────────────────────────── */

.hw-lang-switcher {
    position: fixed;
    top: var(--space-m);
    right: var(--space-m);
    z-index: 101;
}

.hw-lang-switcher__toggle {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: auto;
    height:auto;
    aspect-ratio:1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 2.7rem;
    padding: 0.2em;
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
}

.hw-lang-switcher__drawer {
    position: absolute;
    top: calc(44px + 8px);
    right: 0;
    background: var(--bg-body);
    border-radius: var(--radius-s);
    box-shadow: 0 6px 32px rgba(0,0,0,.15);
    min-width: 160px;
    border: 1px solid rgba(0,0,0,.06);
    overflow: clip;
}

.hw-lang-switcher__item {
    display: block;
    width: 100%;
    padding: var(--space-xs) var(--space-m);
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--text-s);
    font-family: var(--font-body);
    color: var(--text-body);
}

.hw-lang-switcher__item:hover { background: var(--dark-10); }

.hw-lang-switcher__item--active {
    color: var(--primary);
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ABENDPROGRAMM
   ══════════════════════════════════════════════════════════════════════════════ */

.hw-section--abendprogramm {
    position: relative;
    min-height: 40dvh;
    padding:0;
}

.hw-abend__bg-img {
    object-fit: cover;
    z-index: 0;
}

:where(.hw-abend__content) {
    position: relative;
    z-index: 2;
    padding: var(--space-2xl) var(--space-m);
    width: 50rem;
    max-width: 100%;
    margin-block: auto;
    margin-inline: auto;
    display:flex;
    flex-direction: column;;
    gap: var(--space-m);
    backdrop-filter:blur(2px);
}

/* center (default) — all auto margins keep it centred */
.hw-abend__content--center     { text-align: center; }

/* horizontal left/right */
.hw-abend__content--center-left  { margin-inline-end: auto; margin-inline-start: 0; text-align: left; }
.hw-abend__content--center-right { margin-inline-start: auto; margin-inline-end: 0; text-align: right; }

/* top row */
.hw-abend__content--top-left    { margin-block-end: auto; margin-block-start: 0; margin-inline-end: auto; margin-inline-start: 0; text-align: left; }
.hw-abend__content--top-center  { margin-block-end: auto; margin-block-start: 0; text-align: center; }
.hw-abend__content--top-right   { margin-block-end: auto; margin-block-start: 0; margin-inline-start: auto; margin-inline-end: 0; text-align: right; }

/* bottom row */
.hw-abend__content--bottom-left   { margin-block-start: auto; margin-block-end: 0; margin-inline-end: auto; margin-inline-start: 0; text-align: left; }
.hw-abend__content--bottom-center { margin-block-start: auto; margin-block-end: 0; text-align: center; }
.hw-abend__content--bottom-right  { margin-block-start: auto; margin-block-end: 0; margin-inline-start: auto; margin-inline-end: 0; text-align: right; }

/* ══════════════════════════════════════════════════════════════════════════════
   FAQ
   ══════════════════════════════════════════════════════════════════════════════ */

.hw-section--faq {
    padding:0;
}

.hw-faq {
    gap: 0;
}

.hw-faq__intro {
    position: relative;
    min-height: 300px;
}

.hw-faq__intro-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    width:100%;
    max-width: calc( var(--container-m) / 2 );
    margin-left:auto;
}

.hw-faq__accordion {
    width:100%;
    max-width: calc( var(--container-m) / 2 );
    margin-inline:auto;
    margin-block:auto;
    padding-inline:var(--space-m);
}

:where(.hw-faq__intro-content, .hw-faq__accordion) {
    padding: var(--space-xl) var(--space-l);
}

.hw-faq--acc-right .hw-faq__intro  { order: 1; }
.hw-faq--acc-right .hw-faq__accordion { order: 2; }
.hw-faq--acc-left  .hw-faq__intro  { order: 2; }
.hw-faq--acc-left  .hw-faq__accordion { order: 1; }

.hw-faq-item {
    border-bottom: 1px solid var(--border-primary, rgba(0,0,0,.1));
}

.hw-faq-item__q {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-s);
    cursor: pointer;
    padding: var(--space-s) 0;
    background: none;
    border: none;
    text-align: left;
    font-size: var(--text-m);
    font-family: var(--font-body);
    font-weight: 600;
    color: inherit;
}

.hw-faq-item__chevron {
    flex-shrink: 0;
    transition: transform .2s;
}

.hw-faq-item--open .hw-faq-item__chevron {
    transform: rotate(90deg);
}

.hw-faq-item__a {
    padding: 0 0 var(--space-s);
    line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════════════════════
   RSVP
   ══════════════════════════════════════════════════════════════════════════════ */

.hw-section--rsvp {
    overflow: hidden;
    padding:0;
}

.hw-rsvp__intro {
    min-height: 300px;
    position: relative;
    background-size: cover;
    background-position: center;
}

:where(.hw-rsvp__intro-content) {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width:65rem;
    padding: var(--space-xl);
}

:where(.hw-rsvp__form-col) {
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
}

.hw-rsvp__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    width:100%;
    max-width: 60rem;
}

.hw-rsvp__form .hw-form-field {
    display:flex;
    flex-direction:column;
}

.hw-rsvp__radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-m);
}

.hw-rsvp__radio {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    cursor: pointer;
}

.hw-rsvp__error {
    color: #c00;
    font-size: 0.875em;
    margin: 0;
}

.hw-rsvp__success,
.hw-rsvp__deadline {
    font-size: 1.1em;
    line-height: 1.6;
}

.hw-rsvp--form-left .hw-rsvp__intro    { order: 2; }
.hw-rsvp--form-left .hw-rsvp__form-col { order: 1; }

/* ══════════════════════════════════════════════════════════════════════════════
   HOCHZEITS-ABC
   ══════════════════════════════════════════════════════════════════════════════ */

.hw-abc__headline {
    margin-bottom: var(--space-l);
}

.hw-abc__grid {
    column-width: 370px; /* Mindestbreite für jede Spalte */ 
    column-count: 3; /* Maximale Anzahl der Spalten  */ 
    gap: var(--space-s);
}

.hw-abc__item {
    display: flex;
    align-items: baseline;
    gap: var(--space-s);
    padding: var(--space-xs) 0;
}

.hw-abc__letter {
    font-size: var(--text-3xl);
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    width: 2.5ch;
}

.hw-abc__desc {
    line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════════════════════
   SAVE THE DATE
   ══════════════════════════════════════════════════════════════════════════════ */

.hw-section--save-the-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-l);
}

.hw-std__headline {
    margin: 0;
}

.hw-std__photos {
    width: 100%;
    max-width: 900px;
    gap: var(--space-s);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.hw-std__photo-col {
    aspect-ratio: 2/3;
    border-radius: var(--radius-m);
    overflow: hidden;
    position: relative;
}

.hw-std__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hw-std__num {
    position: relative;
    z-index: 2;
    font-size: var(--text-4xl);
    font-weight: 900;
    text-align: center;
    align-self: end;
    line-height:1em;
}

.hw-std__text1 {
    font-weight: 700;
    text-align: center;
    margin: 0;
}

.hw-std__text2 {
    text-align: center;
    margin: 0;
}

@media (max-width: 480px) {
    .hw-std__photos { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   KUCHENLISTE
   ══════════════════════════════════════════════════════════════════════════════ */

.hw-section--kuchenliste {
    background-size: cover;
    background-position: center;
}

.hw-kuchen {
    gap: 0;
}

.hw-kuchen--list-left .hw-kuchen__form-col { order: 2; }
.hw-kuchen--list-left .hw-kuchen__list-col { order: 1; }

:where(.hw-kuchen__form-col) {
    padding: var(--space-l);
}

.hw-kuchen__form-col {
    margin-block:auto;
    margin-inline:auto;
}

:where(.hw-kuchen__contentwrapper) {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    width: 100%;
    max-width:50rem;
    padding: var(--space-l);
}

:where(.hw-kuchen__list-col) {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    padding: var(--space-l);
}

:where(.hw-kuchen__form) {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
}

.hw-kuchen__form .hw-form-field {
    display: flex;
    flex-direction: column;
}

.hw-kuchen__table {
    width: 100%;
    max-width:70rem;
    margin-inline:auto;
    border-collapse: collapse;
}

.hw-kuchen__row:not(:last-child) .hw-kuchen__cell {
    border-bottom: 1px solid var(--border-primary);
}

.hw-kuchen__cell {
    padding: var(--space-xs) 0;
    vertical-align: top;
}

.hw-kuchen__cell--name {
    width: 50%;
    font-weight: 600;
    padding-right: var(--space-s);
}

.hw-kuchen__error {
    color: var(--color-error, #c0392b);
    font-size: var(--text-s);
    margin: 0;
}

.hw-kuchen__success {
    padding: var(--space-m);
    background: rgba(0,128,0,.1);
    border-radius: var(--radius-s);
    color: var(--text-body);
}

/* ══════════════════════════════════════════════════════════════════════════════
   GESCHENKETISCH
   ══════════════════════════════════════════════════════════════════════════════ */

.hw-section--geschenketisch {
    padding:0;
}


.hw-geschenk {
    min-height: 40dvh;
}
.hw-geschenk--list-left .hw-geschenk__media  { order: 2; }
.hw-geschenk--list-left .hw-geschenk__content { order: 1; }
.hw-geschenk__media {
    position: relative;
    min-height: 40dvh;
    overflow: hidden;
}
.hw-geschenk__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
:where(.hw-geschenk__content) {
    padding: var(--space-xl) var(--space-l);
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    justify-content: center;
    width:100%;
    max-width:70rem;
    margin-inline:auto !important;
    padding-inline: var(--space-m) !important;
    max-width:calc( var(--container-m) / 2);
}
.hw-geschenk__intro { font-size: var(--text-m); }
.hw-geschenk__items {
    list-style: none;
    margin: var(--space-s) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}
.hw-geschenk-item {
    display: flex;
    gap: var(--space-s);
    align-items: flex-start;
}
.hw-geschenk-item__icon {
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-s);
    background: var(--light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-l);
    color: var(--primary);
    text-decoration: none;
    box-shadow: var(--shadow-m);
    transition: all 0.4s ease;
}
.hw-geschenk-item__icon:hover {
    background-color: color-mix(in oklch, var(--light) 80%, var(--primary) 20%);
}

.hw-geschenk-item__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    flex: 1;
}
.hw-geschenk-item__head {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}
:where(.hw-geschenk-item__title) {
    margin: 0;
    font-weight: 600;
    font-size: var(--text-m);
    color: var(--text-title);
}
.hw-geschenk-item__link {
    color: var(--primary);
    font-size: var(--text-m);
    line-height: 1;
}
:where(.hw-geschenk-item__note) {
    margin: 0;
    font-size: var(--text-s);
    color: var(--text-body);
    line-height: 1.5;
}
.hw-geschenk-item__action { margin-top: var(--space-3xs); }

.hw-geschenk-item__reserved {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-success, #27ae60);
    font-size: var(--text-s);
    font-weight: 600;
}
.hw-geschenk-item__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}
.hw-geschenk-item__btns {
    display: flex;
    gap: var(--space-xs);
}
.hw-geschenk-item__error {
    font-size: var(--text-s);
    color: var(--color-error, #c0392b);
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   GALLERY SECTION
   ══════════════════════════════════════════════════════════════════════════════ */

.hw-gallery__intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    padding: var(--space-l) 0;
}

.hw-section--gallery div[class*="grid-"] {
    align-items:start;
}

.hw-gallery__grid {
    display: grid;
    gap: var(--space-xs);
    margin-top: var(--space-l);
    align-items:start;
}

.hw-gallery__thumb {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-s);
    display: block;
    transition: opacity .15s;
}

.hw-gallery__thumb:hover {
    opacity: .9;
}

.hw-gallery__dl-btn {
    align-self: flex-start;
    gap: var(--space-xs);
}

.hw-gallery--gallery-left .hw-gallery__grid { order: -1; }

.hw-gallery-link {
  display: inline-block; /* oder block, je nach Layout */
  line-height: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   LEGAL PAGES — Impressum / Datenschutz
   ══════════════════════════════════════════════════════════════════════════════ */

.hw-legal-page {
    background-color: var(--bg-body, #fff);
    color: var(--text-body, #444);
    font-family: var(--font-body, Georgia, serif);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.hw-legal-page__header {
    padding: var(--space-s) var(--space-l);
    border-bottom: 1px solid var(--border-primary, rgba(0,0,0,0.1));
    background-color: var(--bg-surface, #f5f2ee);
}

.hw-legal-page__back {
    color: var(--text-body);
    text-decoration: none;
    font-size: var(--text-s);
    opacity: 0.7;
}

.hw-legal-page__back:hover {
    opacity: 1;
    text-decoration: underline;
}

.hw-legal-page__main {
    flex: 1;
    padding: var(--space-2xl) var(--space-l);
}

.hw-legal-page__content {
    max-width: 680px;
    margin: 0 auto;
}

.hw-legal-page__content h1 {
    font-family: var(--font-heading, Georgia, serif);
    font-size: var(--text-2xl);
    color: var(--text-heading, #1a1a1a);
    margin-bottom: var(--space-xl);
}

.hw-legal-page__content h2 {
    font-family: var(--font-heading, Georgia, serif);
    font-size: var(--text-l);
    color: var(--text-heading, #1a1a1a);
    margin-top: var(--space-l);
    margin-bottom: var(--space-xs);
}

.hw-legal-page__content h3 {
    font-size: var(--text-m);
    font-weight: 600;
    color: var(--text-heading, #1a1a1a);
    margin-top: var(--space-m);
    margin-bottom: var(--space-2xs);
}

.hw-legal-page__content h4 {
    font-size: var(--text-s);
    margin-bottom: 0.5em;
}

.hw-legal-page__content p {
    font-size: var(--text-s);
    line-height: 1.7;
    margin-bottom: var(--space-s);
}

.hw-legal-page__content ul {
    font-size: var(--text-s);
    line-height: 1.7;
    padding-left: var(--space-m);
    margin-bottom: var(--space-s);
}

.hw-legal-page__content a {
    color: var(--primary, #b8962e);
}

.hw-legal-page__date {
    margin-top: var(--space-xl);
    font-size: var(--text-xs);
    opacity: 0.6;
}