/* ══════════════════════════════════════════════════════════════════════════════
   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)   */

*, *::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;
}



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

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

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

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

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

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

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

.hw-intro__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-s, 1rem);
    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;
}

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

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

.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;
    align-self: flex-start;
}
.hw-btn:hover { opacity: 0.85; }

.hw-btn--primary {
    background-color: var(--primary);
    color: var(--light, #fff);
}
.hw-btn--sm {
    padding: 0.4em 1em;
    font-size: var(--text-xs);
    gap: var(--space-3xs);
}

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

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

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

.hw-section--accommodation {
    padding: 0;
    overflow: hidden;
}
.hw-accommodation {
    min-height: 40dvh;
}
.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-s);
    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);
}

.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__name {
    font-family: var(--font-heading, Georgia, serif);
}

.hw-footer__link {
    color: inherit;
    text-decoration: none;
}

.hw-footer__link:hover {
    text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════════════════════
   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(--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: 1.5rem; 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;
}