/* =============================================================================
   edelwelt.online · Kapitel I–VIII, Footer, Bausteine
   Nachtgrün + Gold als Rahmen, helle Inseln (Papier, Weiß-Gold, Creme) als Atem.
   ============================================================================= */
:root {
  --depth: radial-gradient(120% 80% at 50% 110%, var(--night-3) 0%, transparent 60%);
  --depth-top: radial-gradient(90% 60% at 20% -10%, rgba(46, 84, 67, 0.55) 0%, transparent 65%);
  --glow-core: var(--gold-pale);
  --glow-warm: rgba(247, 231, 176, 0.35);
  --glow-ground: rgba(201, 164, 90, 0.22);
  --dim: rgba(15, 14, 12, 0.62);
  --veil: linear-gradient(180deg, rgba(19, 40, 31, 0.05) 30%, rgba(19, 40, 31, 0.86) 100%);
  --scrim: rgba(15, 14, 12, 0.92);
  --brand-name: clamp(1.25rem, 1rem + 1.1vw, 2rem);
  --jahr: clamp(2.4rem, 1.2rem + 4.2vw, 4.6rem);
  --zitat: clamp(1.5rem, 1.1rem + 1.8vw, 2.6rem);
  --nummer: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem);
  --kern: clamp(2rem, 1.2rem + 3.4vw, 4rem);
  --dur-reveal: 1.3s;
  --dur-state: 0.6s;
  --header-h: 72px;
  --col-gap: clamp(16px, 2vw, 32px);
}
body { font-variant-numeric: oldstyle-nums; }
.grid12 { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); row-gap: clamp(1.5rem, 4vh, 3rem); }
@media (max-width: 1023px) { .grid12 { grid-template-columns: repeat(6, 1fr); } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Typo-Rollen ---------- */
.marke { font-family: var(--font-serif); font-weight: 500; font-size: var(--brand-name); letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.1; }
.vorspann { font-size: var(--lead); line-height: 1.5; font-style: italic; max-width: 48ch; }
.fakten { list-style: none; margin: 0; padding: 0; font-weight: 500; font-size: 1.08rem; font-variant-numeric: lining-nums; }
.fakten li { position: relative; padding-left: 1.3rem; margin-bottom: 0.55rem; line-height: 1.45; }
.fakten li::before { content: ''; position: absolute; left: 0; top: 0.68em; width: 4px; height: 4px; background: var(--gold); }
.s-paper .fakten li::before, .s-creme .fakten li::before, .s-white .fakten li::before { background: var(--gold-ink); }
.zahl { color: var(--gold); font-variant-numeric: lining-nums tabular-nums; }
.s-paper .zahl, .s-creme .zahl, .s-white .zahl { color: var(--gold-ink); }
.jahr { font-family: var(--font-serif); font-weight: 300; font-size: var(--jahr); letter-spacing: 0.01em; line-height: 1; font-variant-numeric: lining-nums; }
.zitat { font-family: var(--font-serif); font-weight: 300; font-style: italic; font-size: var(--zitat); line-height: 1.3; text-wrap: balance; }
.nummer { font-family: var(--font-serif); font-weight: 300; font-size: var(--nummer); line-height: 1; color: var(--gold-deep); font-variant-numeric: lining-nums tabular-nums; }
.kern { font-family: var(--font-serif); font-weight: 400; font-size: var(--kern); line-height: 1.02; letter-spacing: -0.005em; }
.kapitel-kopf { max-width: 760px; margin-bottom: clamp(2.5rem, 6vh, 4.5rem); }
.kapitel-kopf .lead { margin-top: 1.4rem; }
.hairline { height: 1px; background: var(--line-gold); border: 0; margin: 0; }
.s-paper .hairline, .s-creme .hairline, .s-white .hairline { background: var(--line-paper); }
.wash { position: relative; isolation: isolate; }
.wash::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 50% at 85% 10%, rgba(247, 231, 176, 0.5) 0%, transparent 70%), radial-gradient(50% 40% at 10% 90%, rgba(247, 231, 176, 0.35) 0%, transparent 70%); }

/* ---------- Fenster: die eine Bildkomponente ---------- */
.fenster-fig { margin: 0; }
.rahmen { padding: var(--passe); border: 1px solid var(--line-gold); position: relative; isolation: isolate; display: block; }
.s-paper .rahmen, .s-creme .rahmen, .s-white .rahmen { border-color: var(--line-paper); }
.img, .fenster { display: block; }
.fenster { aspect-ratio: var(--ar, 3 / 2); background: var(--night-3); overflow: hidden; }
.s-paper .fenster, .s-creme .fenster, .s-white .fenster { background: #EFE6D6; }
.fenster img { width: 100%; height: 100%; object-fit: cover; }
.fenster-fig .caption { margin-top: 0.8rem; }
.abzug { padding: var(--passe); background: var(--creme); rotate: -1.5deg; box-shadow: 0 1px 0 var(--line-gold), 0 18px 40px rgba(15, 14, 12, 0.3); }
.abzug .fenster { background: #E9DFCC; }
.label-visual { position: absolute; right: var(--passe); bottom: var(--passe); padding: 0.35rem 0.6rem; background: var(--scrim); color: var(--gold); font-family: var(--font-caps); font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; }
.anschnitt-rechts { margin-right: calc(-1 * var(--gutter)); }
.anschnitt-links { margin-left: calc(-1 * var(--gutter)); }
@media (max-width: 1023px) { .anschnitt-rechts, .anschnitt-links { margin-inline: 0; } }

/* ---------- Szenen (sticky, Scroll-gebunden) ---------- */
.szene { position: relative; height: 150svh; z-index: 1; }
.szene__sticky { position: sticky; top: 0; height: 100svh; overflow: clip; background: var(--night); }
.szene__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.szene__dim { position: absolute; inset: 0; background: var(--dim); opacity: 0.1; }
.szene__sticky::after { content: ''; position: absolute; inset: 0; background: var(--veil); pointer-events: none; }
.lichter { position: absolute; pointer-events: none; }
.glow { position: absolute; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, var(--glow-core) 0%, var(--glow-warm) 35%, transparent 70%); mix-blend-mode: screen; opacity: 1; }
.glow--gruen { background: radial-gradient(closest-side, var(--fir-2) 0%, rgba(58, 106, 84, 0.35) 40%, transparent 70%); }
.glow--boden { background: radial-gradient(closest-side, var(--glow-ground) 0%, transparent 70%); }
.szene__text { position: absolute; left: 0; right: 0; bottom: clamp(3rem, 10vh, 7rem); z-index: 2; text-align: center; }
.werte { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1rem; margin: 0 0 1rem; }
.werte span { color: var(--gold-light); font-size: 0.8rem; letter-spacing: 0.32em; }
.werte b { color: var(--gold); font-weight: 400; }
.szene + .kapitel, .kapitel--deckt { position: relative; z-index: 2; margin-top: 0; border-top: 1px solid var(--line-gold); box-shadow: 0 -24px 48px rgba(15, 14, 12, 0.25); }
@media (max-width: 1023px) { .szene { height: 140svh; } .glow--boden { display: none; } }
@media (prefers-reduced-motion: reduce) { .szene { height: 100svh; } }

/* Szene Schleier: Weiß-Gold, das Hochzeitskapitel öffnet sich durch einen hellen Schleier */
.szene--schleier .szene__sticky { background: var(--white); }
.szene--schleier .szene__sticky::after { background: linear-gradient(180deg, rgba(255, 253, 249, 0) 55%, rgba(255, 253, 249, 0.92) 100%); }
.schleier { position: absolute; inset: 0; background: var(--white); opacity: 0.06; }
.szene__karte { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(2.5rem, 8vh, 6rem); z-index: 2; max-width: 720px; color: var(--ink); padding: clamp(1.2rem, 3vw, 2.2rem) clamp(1.2rem, 3vw, 2.4rem); background: rgba(255, 253, 249, 0.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line-paper); box-shadow: 0 24px 60px rgba(19, 40, 31, 0.12); }
.szene__karte .h2 { margin-top: 0.4rem; }
.szene__karte .h2 em { font-style: italic; color: var(--gold-ink); }
.szene__karte .trust { margin-top: 1.4rem; color: var(--gold-ink); font-size: 0.66rem; }
.szene__karte .btn { border-color: var(--gold-ink); color: var(--gold-ink); }
.szene__karte .btn::after { background: var(--gold-ink); }
.szene__karte .btn:hover { color: var(--paper); }
.szene__karte .btn-solid { background: var(--gold-ink); color: var(--paper); }
.szene__karte .btn-solid::after { background: var(--gold-deep); }
.schmiede .hero-cta { margin-top: 2rem; }

/* ---------- Kapitel I · Manifest (Papier) ---------- */
.manifest-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.manifest-text .lead { margin-top: 1.2rem; }
.unterschrift { margin-top: 1.6rem; display: flex; align-items: center; gap: 1.4rem; }
.unterschrift .script { font-size: 1.9rem; }
.manifest-werte { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--col-gap); margin-top: clamp(2.5rem, 6vh, 4rem); }
.manifest-werte div { border-top: 1px solid var(--line-paper); padding-top: 1rem; }
.manifest-werte h3 { font-family: var(--font-caps); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 0.8rem; }
.manifest-werte p { font-size: 1.02rem; line-height: 1.55; color: var(--ink-2); }
.manifest-bild { display: grid; gap: 1.4rem; }
.manifest-klein { width: 54%; margin-left: 8%; }
.zier-wrap { margin: clamp(2.5rem, 6vh, 4rem) 0 0; }
@media (max-width: 1023px) {
  .manifest-grid { grid-template-columns: 1fr; }
  .manifest-bild { order: -1; }
  .manifest-klein { display: none; }
  .manifest-werte { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .manifest-werte { grid-template-columns: 1fr; } }

/* Jahresringe: das Siegel des Teams – von Weitem ein Ornament, von Nahem die Namen */
.ringe-wrap { display: flex; align-items: center; gap: 1.8rem; margin-top: clamp(1.6rem, 4vh, 2.6rem); }
.ringe { width: clamp(150px, 16vw, 220px); aspect-ratio: 1; flex: none; color: var(--gold-ink); opacity: 0.6; transition: opacity 1.2s var(--ease-out); cursor: default; }
.ringe svg { width: 100%; height: 100%; overflow: visible; display: block; animation: ringe-drehen 240s linear infinite; animation-play-state: paused; }
.ringe .ring-linie { fill: none; stroke: currentColor; stroke-width: 0.45; opacity: 0.55; }
.ringe .ring-text { font-family: var(--font-caps); font-size: 5.1px; letter-spacing: 0.9px; fill: currentColor; }
.ringe .ring-herz { fill: currentColor; opacity: 0.75; }
.ringe:hover, .ringe:focus-visible { opacity: 1; }
.ringe:hover svg, .ringe:focus-visible svg { animation-play-state: running; }
.ringe-text { max-width: 24ch; color: var(--ink-2); font-size: 0.98rem; line-height: 1.5; }
.ringe-text .caption { margin-bottom: 0.5rem; opacity: 0.8; }
.ringe-text p:last-child { margin-bottom: 0; }
@keyframes ringe-drehen { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ringe svg { animation: none; } }

/* ---------- Kapitel II · Welten ---------- */
.welten-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.welten-liste { list-style: none; margin: 0; padding: 0; }
.welt { border-top: 1px solid var(--line-gold); position: relative; }
.welt:last-child { border-bottom: 1px solid var(--line-gold); }
.welt__linie { position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.welt > a { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 0 1.2rem; padding: clamp(1.4rem, 3vh, 2.2rem) 0; color: inherit; transition: transform 0.5s var(--ease-out); align-items: start; }
.welt .nummer { padding-top: 0.5rem; transition: color var(--dur-state); }
.welt__kopf { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem 1rem; }
.welt__kopf .kern { color: var(--creme); }
.welt__zuordnung { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; margin-top: 0.6rem; }
.welt__zuordnung img { width: 34px; height: 34px; object-fit: contain; }
.welt__zuordnung .marke { font-size: 1.05rem; letter-spacing: 0.2em; color: var(--gold-light); }
.welt__zuordnung .caps { font-size: 0.6rem; opacity: 0.85; }
.welt__essenz { margin: 0.9rem 0 0.6rem; max-width: 52ch; }
.welt__fakten { font-size: 0.62rem; opacity: 0.8; display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; margin-bottom: 0.9rem; }
.welt__fakten b { font-weight: 400; color: var(--gold); }
@media (hover: hover) and (pointer: fine) {
  .welt > a:hover { transform: translateX(8px); }
  .welt > a:hover .nummer { color: var(--gold); }
}
.welt.is-aktiv .nummer { color: var(--gold); }
.welten-fenster { position: sticky; top: calc(var(--header-h) + 4vh); }
.welten-fenster .fenster { position: relative; aspect-ratio: 4 / 5; }
.welten-fenster .fenster > * { position: absolute; inset: 0; }
.welten-fenster .fenster img { width: 100%; height: 100%; object-fit: cover; transform: none; }
.js .welten-fenster .fenster > [data-welt]:not(.is-aktiv) { opacity: 0; visibility: hidden; }
.no-js .welten-fenster .fenster > [data-welt]:not(:first-child) { display: none; }
.welten-fenster .caption { min-height: 1.4em; }
.fenster--signet { display: grid; place-items: center; background: var(--night-3); background-image: var(--depth); }
.fenster--signet img { width: 46%; height: auto; object-fit: contain; transform: none !important; }
.welt__mobilbild { display: none; }
@media (max-width: 1023px) {
  .welten-grid { grid-template-columns: 1fr; }
  .welten-fenster { display: none; }
  .welt > a { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .welt__mobilbild { display: block; grid-column: 2; margin-top: 1rem; }
  .welt__mobilbild .fenster { aspect-ratio: 3 / 2; }
}

/* ---------- Kapitel III · Hochzeiten (Weiß-Gold) ---------- */
.hz-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.hz-text .vorspann { margin-bottom: 1.2rem; }
.orte { margin: 2rem 0 0; }
.orte .caps { color: var(--gold-ink); font-size: 0.66rem; margin-bottom: 0.8rem; display: block; }
.orte ul { list-style: none; margin: 0; padding: 0; }
.orte li { display: flex; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--line-paper); padding: 0.55rem 0; font-size: 1.25rem; }
.orte li small { font-family: var(--font-caps); font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-ink); margin-left: auto; opacity: 0.85; }
.hz-fakten { margin-top: 2rem; columns: 2; column-gap: 2rem; }
.hz-fakten li { break-inside: avoid; }
.hz-cta { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; }
.hz-bilder { position: relative; }
.hz-bilder .abzug { position: absolute; width: 42%; left: -8%; bottom: -10%; }
.hz-bilder .abzug .fenster { aspect-ratio: 1; }
.hz-reihe { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--col-gap); margin-top: clamp(3rem, 8vh, 6rem); }
.hz-reihe .fenster { aspect-ratio: 4 / 5; }
.steckbrief { margin-top: clamp(3rem, 8vh, 6rem); border-top: 1px solid var(--line-paper); padding-top: 2rem; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.s-night .steckbrief, .s-night-2 .steckbrief, .s-fir .steckbrief { border-top-color: var(--line-gold); }
.steckbrief .marke { display: block; margin-bottom: 0.3rem; }
.steckbrief .caps { font-size: 0.62rem; }
.steckbrief .h3 { margin-top: 1rem; max-width: 36ch; }
.steckbrief .link { margin-top: 1.4rem; }
@media (max-width: 1023px) {
  .hz-grid { grid-template-columns: 1fr; }
  .hz-bilder { order: -1; margin-bottom: 5rem; }
  .hz-bilder .abzug { width: 44%; left: auto; right: -4%; bottom: -14%; }
  .hz-fakten { columns: 1; }
  .hz-reihe { grid-template-columns: 1fr 1fr; gap: 10px; }
  .steckbrief { grid-template-columns: 1fr; }
}


/* ---------- Kapitel IV · Hotel (Creme) ---------- */
.hotel-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.hotel-bilder { display: grid; gap: clamp(1.5rem, 4vh, 3rem); }
.hotel-bilder .klein { width: 70%; margin-left: 12%; }
.hotel-text .klein { width: 72%; margin-top: clamp(2rem, 5vh, 3.5rem); }
.hotel-text .display { margin: 0.4rem 0 1.4rem; }
.tarif { margin: 2.2rem 0 0; }
.tarif .caps { color: var(--gold-ink); font-size: 0.66rem; display: block; margin-bottom: 0.6rem; }
.tarif dl { margin: 0; }
.tarif .zeile { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.5rem 0; font-size: 1.15rem; }
.tarif .zeile dt { flex: none; margin: 0; }
.tarif .zeile i { flex: 1; border-bottom: 1px dotted var(--line-ink); transform: translateY(-0.35em); transform-origin: left; }
.tarif .zeile dd { margin: 0; flex: none; }
.hotel-caps { margin-top: 1.6rem; font-size: 0.62rem; line-height: 2; opacity: 0.85; }
.hotel-cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; }
.hotel-cta .tel { font-size: 1.05rem; }
@media (max-width: 1023px) { .hotel-grid { grid-template-columns: 1fr; } .hotel-bilder .klein { width: 70%; margin-left: 0; } }

/* ---------- Kapitel V · Schmiede-Szene + Veranstaltungen ---------- */
.schmiede { position: relative; min-height: 78svh; display: grid; place-items: center; text-align: center; background-image: var(--depth); overflow: clip; padding: clamp(5rem, 12vh, 9rem) var(--gutter); }
.schmiede__signet { position: relative; width: min(34vw, 440px); margin: 0 auto clamp(2rem, 5vh, 3.5rem); isolation: isolate; overflow: hidden; }
.schmiede__signet img { width: 100%; height: auto; }
.lichtstreifen { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 40%, rgba(247, 231, 176, 0.35) 50%, transparent 60%); mix-blend-mode: screen; pointer-events: none; opacity: 0; }
.diamant { position: absolute; left: 50%; top: 12%; width: 16vmin; height: 16vmin; opacity: 0; }
.schmiede .caps { margin-top: 1.4rem; opacity: 0.85; line-height: 2; }
@media (max-width: 1023px) { .schmiede__signet { width: 60vw; } }
.events-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.leistungen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); margin-top: 2rem; }
.leistungen h3 { font-family: var(--font-caps); font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.9rem; }
@media (max-width: 1023px) { .events-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .leistungen { grid-template-columns: 1fr; } }

/* ---------- Kapitel V · Edelwerk ---------- */
.edelwerk-grid { display: grid; grid-template-columns: 72px minmax(0, 7fr) minmax(0, 3fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.edelwerk-grid .signet { width: 72px; height: 72px; object-fit: contain; }
.edelwerk-grid .h3 { margin-top: 0.8rem; max-width: 40ch; }
.edelwerk-grid .caps { font-size: 0.62rem; line-height: 2; opacity: 0.85; margin-top: 0.8rem; }
@media (max-width: 1023px) { .edelwerk-grid { grid-template-columns: 56px 1fr; } .edelwerk-grid .fenster-fig { display: none; } }

/* ---------- Kapitel VI · Galerie ---------- */
.galerie-raster { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--col-gap); row-gap: clamp(1.5rem, 4vh, 3rem); align-items: start; }
.galerie-raster figure { margin: 0; }
.galerie-raster a { display: block; color: inherit; }
.g-1 { grid-column: 1 / 8; --ar: 3 / 2; }
.g-2 { grid-column: 8 / 13; --ar: 4 / 5; margin-top: 6vh; }
.g-3 { grid-column: 1 / 5; --ar: 1 / 1; }
.g-4 { grid-column: 5 / 10; --ar: 3 / 2; }
.g-5 { grid-column: 10 / 13; --ar: 1 / 1; margin-top: 4vh; }
.g-6 { grid-column: 1 / 6; --ar: 4 / 5; }
.g-7 { grid-column: 6 / 13; --ar: 21 / 9; }
.g-8 { grid-column: 1 / 4; --ar: 1 / 1; }
.g-9 { grid-column: 4 / 9; --ar: 3 / 2; }
.g-10 { grid-column: 9 / 13; --ar: 4 / 5; margin-top: -6vh; }
.g-11 { grid-column: 1 / 7; --ar: 3 / 2; }
.g-12 { grid-column: 7 / 13; --ar: 3 / 2; }
@media (max-width: 1023px) {
  .galerie-raster { grid-template-columns: repeat(6, 1fr); row-gap: 16px; }
  .galerie-raster figure { grid-column: span 3 !important; margin-top: 0 !important; }
  .g-7 { --ar: 3 / 2; }
}
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100svh; width: 100vw; height: 100svh; margin: 0; color: var(--creme); }
.lightbox::backdrop { background: var(--scrim); }
.lightbox figure { margin: 0; height: 100%; display: grid; place-items: center; align-content: center; gap: 1rem; padding: 4rem var(--gutter) 3rem; }
.lightbox img { max-width: 92vw; max-height: 80svh; object-fit: contain; outline: 1px solid var(--line-gold); outline-offset: var(--passe); }
.lightbox button { position: absolute; width: 44px; height: 44px; border: 1px solid var(--gold); color: var(--gold); font-family: var(--font-serif); font-size: 1.6rem; line-height: 1; display: grid; place-items: center; background: rgba(15, 14, 12, 0.5); }
.lightbox__close { top: 1.2rem; right: 1.2rem; }
.lightbox__prev { left: 1.2rem; top: 50%; translate: 0 -50%; }
.lightbox__next { right: 1.2rem; top: 50%; translate: 0 -50%; }
@media (max-width: 640px) { .lightbox__prev, .lightbox__next { top: auto; bottom: 1.2rem; translate: none; } }

/* ---------- Kapitel VI · Stimmen ---------- */
.stimmen { display: grid; gap: clamp(2.5rem, 7vh, 5rem); max-width: 880px; margin: 0 auto; text-align: center; }
.stimme .caps { display: block; margin-top: 1.2rem; color: var(--gold-ink); font-size: 0.62rem; }
.stimmen-fuss { text-align: center; margin-top: clamp(2.5rem, 6vh, 4rem); font-size: 0.62rem; color: var(--ink-2); }

/* ---------- Kapitel VII · Chronik ---------- */
.chronik-liste { --cg: clamp(1.2rem, 3vw, 3rem); position: relative; list-style: none; margin: 0; padding: 0; }
.chronik-spur, .chronik-linie { position: absolute; top: 0; bottom: 0; width: 2px; height: 100%; left: calc((100% - 2px - 2 * var(--cg)) * 3 / 11 + var(--cg)); }
.chronik-spur { background: var(--line-gold-soft); }
.chronik-linie path { stroke: var(--gold); stroke-width: 1.5; fill: none; }
.station { display: grid; grid-template-columns: minmax(0, 3fr) 2px minmax(0, 8fr); column-gap: var(--cg); position: relative; }
.station .jahr { text-align: right; color: var(--gold-deep); transition: color var(--dur-state); padding-bottom: clamp(2rem, 5vh, 3.5rem); }
.station .punkt { position: relative; width: 2px; }
.station .punkt i { position: absolute; left: 50%; top: 0.45em; width: 7px; height: 7px; translate: -50% 0; background: var(--gold); border-radius: 50%; transform: scale(0.6); transition: transform 0.8s var(--ease-out); }
.station .punkt .laterne { position: absolute; left: 50%; top: 0.45em; width: 56px; height: 56px; translate: -50% -50%; opacity: 0; }
.station .text { max-width: 44ch; padding-top: 0.55em; padding-bottom: clamp(2rem, 5vh, 3.5rem); }
.station .text p { font-size: 1.15rem; }
.station.is-lit .jahr { color: var(--gold-light); }
.station.is-lit .punkt i { transform: scale(1); }
.station--herz .punkt img { position: absolute; left: 50%; top: 0.35em; width: 30px; height: auto; translate: -50% 0; transform: scale(0); transition: transform 0.7s var(--ease-out); }
.station--herz.is-lit .punkt img { transform: scale(1); }
.station--herz .punkt i { display: none; }
.station .abzug { margin-top: 1.4rem; width: min(100%, 360px); rotate: 1.5deg; }
.station:nth-child(odd) .abzug { rotate: -1.5deg; }
.station .abzug .fenster { aspect-ratio: 3 / 2; }
.station .abzug .caption { color: var(--ink-2); opacity: 0.85; margin-top: 0.5rem; }
.no-js .station .punkt i, .no-js .station--herz .punkt img { transform: scale(1); }
@media (max-width: 1023px) {
  .chronik-liste { --cg: 1.4rem; }
  .chronik-spur, .chronik-linie { left: 0; }
  .station { grid-template-columns: 2px minmax(0, 1fr); }
  .station .jahr { grid-column: 2; grid-row: 1; text-align: left; font-size: clamp(1.8rem, 8vw, 2.6rem); padding-bottom: 0.2rem; }
  .station .punkt { grid-column: 1; grid-row: 1 / 3; }
  .station .text { grid-column: 2; grid-row: 2; padding-top: 0; }
  .station .abzug { width: 70%; }
}

/* ---------- Kapitel VII · Aktuell ---------- */
.karte { position: relative; padding: var(--passe); border: 1px solid var(--line-paper); max-width: 980px; margin: 0 auto; }
.karte__innen { border: 1px solid rgba(128, 97, 31, 0.18); padding: clamp(2rem, 5vw, 4rem); }
.karte__innen .h3 { margin: 0.3rem 0 1.2rem; }
.karte__innen p { max-width: 60ch; }
.karte__cta { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; }

/* ---------- Kapitel VIII · Kontakt ---------- */
.kontakt { background-image: var(--depth); }
.kontakt-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.personen { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap); margin-top: clamp(2.5rem, 6vh, 4rem); }
.person { border-top: 1px solid var(--line-gold); padding-top: 1rem; }
.person .h3 { font-size: 1.3rem; }
.person .rolle { font-size: 0.98rem; opacity: 0.78; margin: 0.3rem 0 0.9rem; min-height: 2.8em; }
.person a { display: block; font-size: 1.05rem; line-height: 1.5; }
.person a:hover { color: var(--gold-light); }
.adresse { margin-top: clamp(2.5rem, 6vh, 4rem); border-top: 1px solid var(--line-gold); padding-top: 1.4rem; display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); font-size: 1.05rem; }
.adresse p { opacity: 0.85; }
.kontakt-fenster { position: relative; }
.kontakt-fenster .glow { left: 50%; top: 55%; width: 18vmin; height: 18vmin; }
@media (max-width: 1023px) { .kontakt-grid { grid-template-columns: 1fr; } .personen { grid-template-columns: 1fr; } .person .rolle { min-height: 0; } .adresse { grid-template-columns: 1fr; } .kontakt-fenster { max-width: 420px; } }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line-gold); background: var(--night); color: var(--creme); padding: clamp(3.5rem, 8vh, 6rem) var(--gutter) 2rem; text-align: center; }
.site-footer .relief { width: min(280px, 70vw); height: auto; margin: 0 auto 1.6rem; }
.site-footer .script { font-size: 2rem; display: block; }
.site-footer .werte-zeile { margin-top: 1rem; font-size: 0.66rem; opacity: 0.85; }
.site-footer .sterne { width: 96px; height: auto; margin: 0.2rem auto 2rem; opacity: 0.9; }
.footer-zeile { font-size: 1rem; opacity: 0.8; }
.footer-meta { margin-top: 1.6rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.6rem; font-size: 0.66rem; opacity: 0.75; }
.footer-meta a:hover { color: var(--gold-light); }

/* ---------- Fortschritt mobil ---------- */
.fortschritt { position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0); z-index: 51; pointer-events: none; }
@media (min-width: 1024px) { .fortschritt { display: none; } }

/* ---------- Druck ---------- */
@media print {
  .site-header, .nav-panel, .hero-canvas, .hero-scroll, .fortschritt, .lightbox { display: none !important; }
  .szene { height: auto; } .szene__sticky { position: static; height: 60vh; }
  .szene + .kapitel, .kapitel--deckt { margin-top: 0; }
  body { background: #fff; color: #000; }
}

/* Zierlinie zeichnet sich von der Mitte aus */
.zier-zeichnet::before { transform: scaleX(var(--zier-scale, 1)); transform-origin: right; }
.zier-zeichnet::after { transform: scaleX(var(--zier-scale, 1)); transform-origin: left; }
.zier svg { transform-origin: center; }

/* =============================================================================
   Unterseiten: feste Kopfleiste, Seitenköpfe, Welten-Karten, Kontaktleiste
   ============================================================================= */
.unterseite .site-header { background: rgba(19, 40, 31, 0.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding-block: 12px; border-bottom: 1px solid var(--line-gold-soft); }
.nav-primary a[aria-current="page"] { opacity: 1; color: var(--gold-light); }
.nav-primary a[aria-current="page"]::after { right: 0; }
.nav-panel nav a[aria-current="page"] { color: var(--gold-light); }
.seitenkopf { padding: calc(var(--header-h) + clamp(3rem, 8vh, 6rem)) 0 clamp(2.5rem, 6vh, 4rem); }
.seitenkopf .h2, .seitenkopf .display { margin-top: 0.3rem; }
.seitenkopf .lead { margin-top: 1.2rem; }
.seitenkopf--bild { position: relative; min-height: 62svh; display: flex; align-items: flex-end; overflow: clip; padding-bottom: clamp(2.5rem, 6vh, 4rem); }
.seitenkopf--bild .szene__bild { z-index: 0; }
.seitenkopf--bild::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19, 40, 31, 0.35) 0%, rgba(19, 40, 31, 0.1) 40%, rgba(19, 40, 31, 0.9) 100%); z-index: 0; }
.seitenkopf--bild .wrap { position: relative; z-index: 1; }
.unterseite .section.erste { padding-top: calc(var(--header-h) + clamp(3rem, 8vh, 6rem)); }

/* Welten-Karten auf der Startseite */
.welt-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap); }
.welt-karte { display: block; color: inherit; }
.welt-karte .fenster { aspect-ratio: 4 / 5; }
.welt-karte__text { padding-top: 1.2rem; }
.welt-karte .nummer { font-size: 1.1rem; color: var(--gold-deep); margin-right: 0.6rem; }
.welt-karte .kern { font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem); display: block; margin: 0.2rem 0 0.5rem; }
.welt-karte .marke { display: block; margin: 0.3rem 0 0.2rem; }
.welt-karte .bereich { display: block; color: var(--gold); font-size: 0.66rem; margin-bottom: 0.9rem; }
.welt-karte .bereich img { display: inline-block; width: 22px; height: 22px; vertical-align: middle; margin-right: 0.5rem; }
.welt-karte .welt__zuordnung { margin: 0 0 0.8rem; }
.welt-karte p { max-width: 36ch; opacity: 0.88; margin-bottom: 0.9rem; }
.welt-karte .link { pointer-events: none; }
.welt-zeile { margin-top: clamp(2rem, 5vh, 3.5rem); border-top: 1px solid var(--line-gold); border-bottom: 1px solid var(--line-gold); padding: 1.2rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.6rem; }
.welt-zeile .welt__zuordnung { margin: 0; }
.welt-zeile p { margin: 0; flex: 1 1 24ch; opacity: 0.88; }
@media (max-width: 1023px) { .welt-karten { grid-template-columns: 1fr; gap: 2.5rem; } .welt-karte .fenster { aspect-ratio: 3 / 2; } }

/* Kurzer Manifest-Block auf der Startseite */
.kastanie-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.kastanie-grid .lead { margin-top: 1.2rem; }
.kastanie-grid .ringe-wrap + .link { margin-top: 1.6rem; }
@media (max-width: 1023px) { .kastanie-grid { grid-template-columns: 1fr; } .kastanie-grid .fenster-fig { order: -1; } }

/* Kontaktleiste */
.kontaktleiste { border-top: 1px solid var(--line-gold-soft); }
.kontaktleiste__innen { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.kontaktleiste .eyebrow { margin-bottom: 0.6rem; }
.kontaktleiste .h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); max-width: 26ch; }
.kontaktleiste__wege { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); }
.kontaktleiste__wege p { margin: 0; display: grid; gap: 0.15rem; font-size: 1.02rem; }
.kontaktleiste__wege .caps { font-size: 0.58rem; opacity: 0.8; margin-bottom: 0.3rem; }
.kontaktleiste__wege a:hover { color: var(--gold-light); }
@media (max-width: 1023px) { .kontaktleiste__innen { grid-template-columns: 1fr; } .kontaktleiste__wege { grid-template-columns: 1fr; } }

/* Orte in einer Zeile, kompakte Chronik, Footer-Navigation */
.orte-inline { display: flex; flex-wrap: wrap; gap: 0.5rem 0; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.orte-inline li { font-size: 1.15rem; }
.orte-inline li + li::before { content: '·'; color: var(--gold-ink); margin: 0 0.7rem; }
.chronik--kompakt .station .jahr { font-size: clamp(1.9rem, 1rem + 3vw, 3.2rem); padding-bottom: clamp(1.4rem, 3vh, 2.2rem); }
.chronik--kompakt .station .text { padding-bottom: clamp(1.4rem, 3vh, 2.2rem); }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.6rem; margin: 0 0 1.6rem; font-size: 0.66rem; }
.footer-nav a:hover { color: var(--gold-light); }
.hotel-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap); margin-top: clamp(3rem, 8vh, 5rem); }
.hotel-strip .fenster { aspect-ratio: 4 / 3; }
@media (max-width: 640px) { .hotel-strip { grid-template-columns: 1fr 1fr; } .hotel-strip figure:last-child { display: none; } }

/* Zwei Orte (Hochzeiten/Veranstaltungen) */
.orte-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); margin-top: clamp(2.5rem, 6vh, 4rem); border-top: 1px solid var(--line-gold); padding-top: 2rem; }
.s-white .orte-2, .s-paper .orte-2, .s-creme .orte-2 { border-top-color: var(--line-paper); }
.orte-2 .marke { display: block; }
.orte-2 .caps { display: block; margin: 0.3rem 0 1rem; font-size: 0.62rem; }
.orte-2 .fenster { margin-bottom: 1rem; }
.orte-2 .fakten { margin-top: 0.4rem; }
@media (max-width: 760px) { .orte-2 { grid-template-columns: 1fr; } }
.szene--hof .werte { gap: 0.4rem 1.4rem; }
.szene--hof .werte span { white-space: nowrap; }

/* =============================================================================
   Leistungen, CTA-Block, mobile CTA-Leiste
   ============================================================================= */
.welt-karten--4 { grid-template-columns: repeat(4, 1fr); }
.welt-karten--4 .welt-karte .fenster { aspect-ratio: 3 / 4; }
.welt-karte .btn { margin-top: 0.2rem; }
.welt-karte .btn-small { padding: 0.8rem 1.3rem; }
@media (hover: hover) and (pointer: fine) {
  .welt-karte:hover .btn::after { transform: scaleX(1); }
  .welt-karte:hover .btn { color: var(--night); }
}
@media (max-width: 1279px) and (min-width: 700px) { .welt-karten--4 { grid-template-columns: 1fr 1fr; } .welt-karten--4 .welt-karte .fenster { aspect-ratio: 3 / 2; } }
@media (max-width: 699px) { .welt-karten--4 { grid-template-columns: 1fr; } .welt-karten--4 .welt-karte .fenster { aspect-ratio: 3 / 2; } }

.cta-block { text-align: center; color: var(--creme); background: linear-gradient(180deg, var(--night-2) 0%, var(--night) 100%); border-top: 1px solid var(--line-gold); position: relative; isolation: isolate; }
.cta-block::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 50% 100%, rgba(201, 164, 90, 0.16) 0%, transparent 70%); }
.cta-block .eyebrow { color: var(--gold-light); }
.cta-block .h2 { max-width: 20ch; margin-inline: auto; color: var(--creme); }
.tel-gross { display: inline-block; margin-top: 1.6rem; font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.3rem, 1rem + 5.2vw, 5.2rem); line-height: 1; color: var(--gold-light); letter-spacing: 0.02em; font-variant-numeric: lining-nums tabular-nums; border-bottom: 1px solid var(--line-gold); padding-bottom: 0.25rem; transition: color var(--dur-state), border-color var(--dur-state); }
.tel-gross:hover { color: var(--gold-pale); border-color: var(--gold); }
.cta-block__sub { margin-top: 1.2rem; opacity: 0.88; font-size: 1.08rem; }
.cta-block__sub a { border-bottom: 1px solid var(--line-gold); }
.cta-block__sub a:hover { color: var(--gold-light); }
.cta-block__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; margin-top: 2.2rem; }
.cta-block__hotel { margin-top: 1.8rem; opacity: 0.85; font-size: 0.66rem; }
.cta-block__hotel a:hover { color: var(--gold-light); }
.cta-block + .site-footer { border-top: 0; }
@media (max-width: 640px) { .cta-block__btns .btn { width: 100%; justify-content: center; } }

.cta-mobil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 39; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-gold); border-top: 1px solid var(--line-gold); padding-bottom: env(safe-area-inset-bottom); }
.cta-mobil a { display: flex; align-items: center; justify-content: center; min-height: 56px; background: var(--night); color: var(--gold-light); font-family: var(--font-caps); font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; }
.cta-mobil a.solid { background: var(--gold); color: var(--night); }
@media (min-width: 1024px) { .cta-mobil { display: none; } }
@media (max-width: 1023px) { body { padding-bottom: 56px; } }
@media print { .cta-mobil { display: none; } }

.hero-cta .btn-solid { padding-inline: 2.4rem; }
.aktuell-kopf { margin-top: 0; }
.leistung-cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.9rem 1.4rem; align-items: center; }

/* =============================================================================
   Weiß-Gold: heller Hero (Herz) und helle Kopfleiste
   ============================================================================= */
.hero--hell { background: radial-gradient(ellipse 70% 55% at 50% 42%, #FFFDF9 0%, #FBF6EC 55%, #F3E9D8 100%); color: var(--ink); }
.hero--hell .hero-text .h2 { color: var(--ink); font-size: clamp(2.2rem, 5.2vw, 4.4rem); }
.hero--hell .hero-text .h2 em { font-style: italic; color: var(--gold-ink); }
.hero--hell .hero-claim { color: var(--gold-ink); margin-top: 1.2rem; }
.hero--hell .hero-sub { color: var(--ink-2); opacity: 1; }
.hero--hell .hero-scroll { color: var(--gold-ink); }
.hero--hell .hero-scroll i { background: linear-gradient(var(--gold-ink), transparent); }
.hero--hell .hero-fallback { width: min(50vw, 320px); }
.hero--herz .hero-stage { width: min(38svh, 70vw, 420px); aspect-ratio: 160 / 150; margin-top: clamp(6rem, 12svh, 9rem); }
.hero--herz .hero-baumbox { left: 0; top: 0; width: 100%; height: 100%; }
@media (max-height: 700px) { .hero--herz .hero-stage { width: min(32svh, 60vw); } }

.hell .site-header, .hell .site-header.is-scrolled { background: rgba(255, 253, 249, 0.9); border-bottom: 1px solid var(--line-paper); }
.hell .nav-primary a { color: var(--ink); opacity: 0.9; }
.hell .nav-primary a::after { background: var(--gold-ink); }
.hell .nav-primary a[aria-current="page"] { color: var(--gold-ink); }
.hell .folio { color: var(--gold-ink); }
.hell .header-cta { background: var(--gold-ink); color: var(--paper); border-color: var(--gold-ink); }
.hell .header-cta::after { background: var(--gold-deep); }
.hell .header-cta:hover { color: var(--paper); }
.hell .nav-toggle span { background: var(--gold-ink); }
.hell .fortschritt { background: var(--gold-ink); }

/* =============================================================================
   Zwei Kerngebiete: Veranstaltungen und Hotel
   ============================================================================= */
/* Hero: Auswahl Veranstaltung / Zimmer */
.hero-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; width: min(680px, 100%); margin: 2rem auto 0; }
.wahl { display: flex; flex-direction: column; align-items: stretch; gap: 0.7rem; padding: 1.1rem 1.2rem 1.2rem; border: 1px solid var(--line-gold); background: rgba(19, 40, 31, 0.72); text-align: center; }
.wahl .caps { font-size: 0.6rem; color: var(--gold-light); opacity: 0.95; }
.wahl small { font-size: 0.98rem; opacity: 0.85; font-style: italic; }
.wahl .btn { justify-content: center; }
.hero--hell .wahl { background: rgba(255, 253, 249, 0.75); border-color: var(--line-paper); }
@media (max-width: 560px) { .hero-wahl { grid-template-columns: 1fr; } }

.nav-panel-btns { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 1rem; }

/* Zahlenleiste */
.zahlen { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: var(--col-gap); border-top: 1px solid var(--line-gold); border-bottom: 1px solid var(--line-gold); padding: 1.4rem 0; margin: 0 0 clamp(2.5rem, 6vh, 4rem); }
.s-white .zahlen, .s-paper .zahlen, .s-creme .zahlen { border-color: var(--line-paper); }
.zahl-box b { display: block; font-family: var(--font-serif); font-weight: 300; font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.4rem); line-height: 1; color: var(--gold-light); font-variant-numeric: lining-nums; }
.s-white .zahl-box b, .s-paper .zahl-box b, .s-creme .zahl-box b { color: var(--gold-ink); }
.zahl-box span { display: block; margin-top: 0.5rem; font-family: var(--font-caps); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.85; }
@media (max-width: 760px) { .zahlen { grid-template-columns: 1fr 1fr; row-gap: 1.4rem; } }

/* Kopf eines Kerngebiets */
.gebiet-kopf { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; margin-bottom: clamp(2rem, 5vh, 3rem); }
.gebiet-kopf .lead { margin: 0; }
.gebiet-kopf .btns { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: flex-end; }
@media (max-width: 1023px) { .gebiet-kopf { grid-template-columns: 1fr; align-items: start; } .gebiet-kopf .btns { justify-content: flex-start; } }

/* Hochzeiten-Highlight (weiß-gold Karte) */
.hz-highlight { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); background: var(--white); color: var(--ink); border: 1px solid var(--line-gold); position: relative; isolation: isolate; overflow: hidden; }
.hz-highlight::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 100% 0%, rgba(247, 231, 176, 0.55), transparent 70%); }
.hz-highlight__bild { position: relative; min-height: 420px; }
.hz-highlight__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hz-highlight__text { padding: clamp(1.8rem, 4vw, 3.4rem); display: flex; flex-direction: column; justify-content: center; }
.hz-highlight__text .eyebrow { color: var(--gold-ink); }
.hz-highlight__text .h2 em { font-style: italic; color: var(--gold-ink); }
.hz-highlight__text .fakten { margin: 1.4rem 0 1.8rem; }
.hz-highlight__text .fakten li::before { background: var(--gold-ink); }
.hz-highlight .btns { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.hz-highlight .btn { border-color: var(--gold-ink); color: var(--gold-ink); }
.hz-highlight .btn::after { background: var(--gold-ink); }
.hz-highlight .btn:hover { color: var(--paper); }
.hz-highlight .btn-solid { background: var(--gold-ink); color: var(--paper); }
.hz-highlight .btn-solid::after { background: var(--gold-deep); }
.hz-highlight__herz { position: absolute; right: 1.4rem; top: 1.2rem; width: 26px; opacity: 0.8; }
@media (max-width: 1023px) { .hz-highlight { grid-template-columns: 1fr; } .hz-highlight__bild { min-height: 0; aspect-ratio: 3 / 2; } }

/* Anlass-Karten */
.anlass-karten { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: var(--col-gap); margin-top: var(--col-gap); }
.anlass { display: flex; flex-direction: column; border: 1px solid var(--line-gold); padding: var(--passe); }
.s-white .anlass, .s-paper .anlass, .s-creme .anlass { border-color: var(--line-paper); }
.anlass .fenster { aspect-ratio: 3 / 2; }
.anlass__text { padding: 1.3rem 0.6rem 0.6rem; display: flex; flex-direction: column; flex: 1; }
.anlass__text .h3 { margin-bottom: 0.4rem; }
.anlass__text .caps { font-size: 0.6rem; color: var(--gold); margin-bottom: 1rem; }
.s-white .anlass__text .caps, .s-paper .anlass__text .caps, .s-creme .anlass__text .caps { color: var(--gold-ink); }
.anlass__text .fakten { font-size: 1.02rem; margin-bottom: 1.2rem; }
.anlass__text .btns { margin-top: auto; display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; align-items: center; }
@media (max-width: 1023px) { .anlass-karten { grid-template-columns: 1fr; } }
@media (min-width: 700px) and (max-width: 1023px) { .anlass-karten { grid-template-columns: 1fr 1fr; } }

/* Zimmer-Kurzkarten (Startseite) */
.zimmer-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap); }
.zimmer-mini a { display: block; color: inherit; }
.zimmer-mini .fenster { aspect-ratio: 4 / 3; position: relative; }
.zimmer-mini .preis { position: absolute; right: 0.8rem; top: 0.8rem; background: rgba(255, 253, 249, 0.92); color: var(--gold-ink); font-family: var(--font-caps); font-size: 0.62rem; letter-spacing: 0.18em; padding: 0.45rem 0.7rem; }
.zimmer-mini h3 { margin-top: 1rem; font-size: var(--h3); }
.zimmer-mini p { margin-top: 0.3rem; opacity: 0.85; font-size: 1.02rem; }
@media (max-width: 860px) { .zimmer-mini { grid-template-columns: 1fr; } }

/* Ausstattung */
.ausstattung { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 1.4rem var(--col-gap); margin-top: clamp(2.5rem, 6vh, 4rem); }
.ausstattung div { border-top: 1px solid var(--line-paper); padding-top: 0.9rem; }
.s-night .ausstattung div, .s-night-2 .ausstattung div { border-top-color: var(--line-gold); }
.ausstattung h3 { font-family: var(--font-caps); font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 0.45rem; }
.s-night .ausstattung h3, .s-night-2 .ausstattung h3 { color: var(--gold); }
.ausstattung p { font-size: 1.02rem; opacity: 0.88; margin: 0; }
@media (max-width: 1023px) { .ausstattung { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ausstattung { grid-template-columns: 1fr; } }

/* Räume / Locations */
.raeume { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap); }
.raum { border: 1px solid var(--line-gold); padding: 1.6rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.raum .kap { font-family: var(--font-serif); font-weight: 300; font-size: 2.4rem; line-height: 1; color: var(--gold-light); font-variant-numeric: lining-nums; }
.raum .kap small { font-family: var(--font-caps); font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-left: 0.4rem; vertical-align: middle; }
.raum .marke { font-size: 1.1rem; }
.raum .caps { font-size: 0.58rem; color: var(--gold); }
.raum p { margin: 0.4rem 0 0; font-size: 1rem; opacity: 0.88; }
@media (max-width: 1023px) { .raeume { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .raeume { grid-template-columns: 1fr; } }

/* Ablauf */
.ablauf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--col-gap); counter-reset: schritt; }
.ablauf li { counter-increment: schritt; border-top: 1px solid var(--line-gold); padding-top: 1.1rem; }
.s-white .ablauf li, .s-paper .ablauf li, .s-creme .ablauf li { border-top-color: var(--line-paper); }
.ablauf li::before { content: counter(schritt, decimal-leading-zero); display: block; font-family: var(--font-serif); font-weight: 300; font-size: 2.2rem; line-height: 1; color: var(--gold); margin-bottom: 0.6rem; font-variant-numeric: lining-nums; }
.s-white .ablauf li::before, .s-paper .ablauf li::before, .s-creme .ablauf li::before { color: var(--gold-ink); }
.ablauf h3 { font-size: 1.3rem; margin-bottom: 0.4rem; }
.ablauf p { font-size: 1.02rem; opacity: 0.88; margin: 0; }
@media (max-width: 1023px) { .ablauf { grid-template-columns: 1fr 1fr; row-gap: 1.6rem; } }
@media (max-width: 560px) { .ablauf { grid-template-columns: 1fr; } }

/* Tagesablauf Hochzeit (Bild + Text, vertikal) */
.tag { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--col-gap); }
.tag li { display: flex; flex-direction: column; }
.tag .fenster { aspect-ratio: 3 / 4; margin-bottom: 1rem; }
.tag .zeit { font-family: var(--font-caps); font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-ink); }
.tag h3 { font-size: 1.35rem; margin: 0.3rem 0 0.4rem; }
.tag p { font-size: 1rem; margin: 0; color: var(--ink-2); }
@media (max-width: 1023px) { .tag { grid-template-columns: 1fr 1fr; row-gap: 2rem; } }
@media (max-width: 560px) { .tag { grid-template-columns: 1fr; } .tag .fenster { aspect-ratio: 3 / 2; } }

/* Fragen */
.faq { border-top: 1px solid var(--line-gold); max-width: 900px; }
.s-white .faq, .s-paper .faq, .s-creme .faq { border-top-color: var(--line-paper); }
.faq details { border-bottom: 1px solid var(--line-gold); }
.s-white .faq details, .s-paper .faq details, .s-creme .faq details { border-bottom-color: var(--line-paper); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.1rem 0; font-size: 1.25rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--font-serif); font-size: 1.6rem; line-height: 1; color: var(--gold); transition: transform 0.4s var(--ease-out); }
.s-white .faq summary::after, .s-paper .faq summary::after, .s-creme .faq summary::after { color: var(--gold-ink); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 1.2rem; max-width: 70ch; opacity: 0.9; }

/* Hotel: Zimmerkategorien als große Reihen mit Bildstrecke */
.zimmer-reihe { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(2.5rem, 6vh, 4.5rem); border-top: 1px solid var(--line-paper); }
.zimmer-reihe:first-of-type { border-top: 0; padding-top: 0; }
.zimmer-reihe:nth-of-type(even) .slider { order: 2; }
.zimmer-reihe .eyebrow { margin-bottom: 0.6rem; }
.zimmer-reihe .h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem); }
.zimmer-reihe .tagline { font-style: italic; font-size: var(--lead); margin: 0.6rem 0 1.2rem; color: var(--ink-2); }
.zimmer-reihe .fakten { margin: 1.2rem 0 1.4rem; }
.preis-boxen { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-paper); border: 1px solid var(--line-paper); margin-bottom: 1.4rem; }
.preis-boxen div { background: var(--creme); padding: 0.9rem 1rem; }
.preis-boxen span { display: block; font-family: var(--font-caps); font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); }
.preis-boxen b { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 1.9rem; color: var(--gold-ink); line-height: 1.2; font-variant-numeric: lining-nums; }
.preis-boxen small { font-size: 0.9rem; color: var(--ink-2); }
.zimmer-reihe .btns { display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; align-items: center; }
@media (max-width: 1023px) { .zimmer-reihe { grid-template-columns: 1fr; } .zimmer-reihe:nth-of-type(even) .slider { order: 0; } }

.slider { position: relative; border: 1px solid var(--line-paper); padding: var(--passe); background: var(--paper); }
.slider__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.slider__track::-webkit-scrollbar { display: none; }
.slider__track > a { flex: 0 0 100%; scroll-snap-align: start; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #EFE6D6; }
.slider__track img { width: 100%; height: 100%; object-fit: cover; }
.slider__nav { position: absolute; left: calc(var(--passe) + 0.8rem); right: calc(var(--passe) + 0.8rem); bottom: calc(var(--passe) + 0.8rem); display: flex; align-items: center; gap: 0.6rem; pointer-events: none; }
.slider__nav button { pointer-events: auto; width: 44px; height: 44px; display: grid; place-items: center; background: rgba(255, 253, 249, 0.92); color: var(--gold-ink); border: 1px solid var(--line-paper); font-family: var(--font-serif); font-size: 1.5rem; line-height: 1; transition: background 0.3s; }
.slider__nav button:hover { background: var(--white); }
.slider__zahl { pointer-events: none; margin-left: auto; background: rgba(255, 253, 249, 0.92); color: var(--gold-ink); font-family: var(--font-caps); font-size: 0.62rem; letter-spacing: 0.2em; padding: 0.55rem 0.75rem; }
.slider__cap { margin-top: 0.8rem; font-family: var(--font-caps); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); min-height: 1.2em; }

/* Hotel-Kopf mit Bild */
.hotel-kopf { position: relative; min-height: min(86svh, 820px); display: flex; align-items: flex-end; overflow: clip; color: var(--creme); }
.hotel-kopf > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hotel-kopf::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19, 40, 31, 0.15) 0%, rgba(19, 40, 31, 0.05) 35%, rgba(19, 40, 31, 0.88) 100%); }
.hotel-kopf .wrap { position: relative; z-index: 1; padding-bottom: clamp(2.5rem, 7vh, 5rem); padding-top: calc(var(--header-h) + 3rem); }
.hotel-kopf .eyebrow { color: var(--gold-light); }
.hotel-kopf .lead { max-width: 52ch; margin-top: 1rem; }
.hotel-kopf .hero-cta { justify-content: flex-start; }
.hotel-kopf .zahlen { margin: 2.2rem 0 0; border-color: rgba(227, 201, 142, 0.35); }

/* Extras und Regeln */
.extras { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); }
.extra { border: 1px solid var(--line-paper); padding: 1.6rem 1.6rem 1.4rem; background: var(--paper); }
.extra .kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.extra h3 { font-size: 1.5rem; }
.extra .zahl { font-family: var(--font-caps); font-size: 0.66rem; letter-spacing: 0.2em; }
.extra p { margin: 0.7rem 0 0; color: var(--ink-2); }
@media (max-width: 760px) { .extras { grid-template-columns: 1fr; } }
.regeln { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap); margin-top: clamp(2.5rem, 6vh, 4rem); }
.regel { border-top: 1px solid var(--line-paper); padding-top: 1rem; }
.regel h3 { font-family: var(--font-caps); font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 0.8rem; }
.regel dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; font-size: 1.02rem; }
.regel dt { color: var(--ink-2); }
.regel dd { margin: 0; text-align: right; font-variant-numeric: lining-nums; }
.regel p { font-size: 1rem; color: var(--ink-2); margin: 0.6rem 0 0; }
@media (max-width: 1023px) { .regeln { grid-template-columns: 1fr; } }

/* Das Haus: Bildreihe */
.haus-reihe { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--col-gap); }
.haus-reihe a { display: block; color: inherit; }
.haus-reihe .fenster { aspect-ratio: 4 / 5; }
.haus-reihe figure:nth-child(even) { margin-top: 3rem; }
@media (max-width: 860px) { .haus-reihe { grid-template-columns: 1fr 1fr; } .haus-reihe figure:nth-child(even) { margin-top: 1.5rem; } }

/* Anfrage-Block geteilt */
.cta-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.cta-split__teil { padding: 0 clamp(1rem, 3vw, 3rem); text-align: center; }
.cta-split__teil + .cta-split__teil { border-left: 1px solid var(--line-gold); }
.cta-split .h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); max-width: 18ch; margin-inline: auto; }
.cta-split .tel-gross { font-size: clamp(2rem, 1rem + 3vw, 3.6rem); }
.cta-split .cta-block__btns { margin-top: 1.6rem; }
@media (max-width: 900px) { .cta-split { grid-template-columns: 1fr; row-gap: 3rem; } .cta-split__teil + .cta-split__teil { border-left: 0; border-top: 1px solid var(--line-gold); padding-top: 3rem; } }

.cta-mobil { grid-template-columns: 1fr 1fr; }
.hell .header-cta { background: var(--gold-ink); }
.kapitel-kopf--mitte { margin-inline: auto; text-align: center; }
.kapitel-kopf--mitte .lead { margin-inline: auto; }
.mt-gross { margin-top: clamp(3rem, 8vh, 6rem); }

/* Räume auf heller Fläche */
.raeume--hell .raum { border-color: var(--line-paper); background: rgba(255, 253, 249, 0.6); padding: 1.1rem 1.2rem; }
.raeume--hell .raum .caps { color: var(--gold-ink); }
.raeume--hell .raum .marke { color: var(--ink); }
.raeume--hell .raum p { color: var(--ink-2); }
@media (max-width: 560px) { .raeume--hell { grid-template-columns: 1fr !important; } }
.hero-wahl .btn-solid { width: 100%; }
.kontakt-fenster .fenster { --ar: 4 / 5; }

/* Korrekturen 09.10. */
.hotel-kopf::after { background: linear-gradient(90deg, rgba(19, 40, 31, 0.86) 0%, rgba(19, 40, 31, 0.55) 45%, rgba(19, 40, 31, 0.08) 75%), linear-gradient(180deg, rgba(19, 40, 31, 0.35) 0%, transparent 30%, rgba(19, 40, 31, 0.9) 100%); }
.zimmer-mini .fenster { aspect-ratio: 3 / 2; }
.slider { margin-bottom: 2.4rem; }
.slider__cap { position: absolute; left: 0; right: 0; top: calc(100% + 0.7rem); margin: 0; }
.wahl .btn { padding-inline: 1rem; letter-spacing: 0.2em; white-space: nowrap; }
@media (max-width: 400px) { .wahl .btn { white-space: normal; } }
/* Zimmerfotos sind 16:10 – Format übernehmen, damit „Feel at Home.“ ganz sichtbar bleibt */
.slider__track > a { aspect-ratio: 16 / 10; }
.zimmer-mini .fenster { aspect-ratio: 16 / 10; }
/* Zähler oben rechts, damit der Schriftzug unten rechts frei bleibt */
.slider__zahl { position: absolute; right: calc(var(--passe) + 0.8rem); top: calc(var(--passe) + 0.8rem); margin-left: 0; }

.cta-adresse { margin-top: clamp(2.5rem, 6vh, 4rem); padding-top: 1.6rem; border-top: 1px solid var(--line-gold); display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem 3rem; text-align: center; font-size: 1.02rem; opacity: 0.9; }
.cta-adresse p { margin: 0; }
.cta-adresse .caps { display: block; font-size: 0.58rem; color: var(--gold-light); margin-bottom: 0.3rem; }
.cta-adresse a { border-bottom: 1px solid var(--line-gold); }
.cta-adresse a:hover { color: var(--gold-light); }
.cta-split .h2, p.h2, p.h3 { line-height: 1.12; }

/* Abschluss-Block mit einem Ziel */
.cta-einzeln { text-align: center; }
.cta-einzeln .h2 { max-width: 22ch; margin: 0 auto; }
.cta-block__text { max-width: 52ch; margin: 1.2rem auto 0; font-size: var(--lead); opacity: 0.9; }
.cta-einzeln .cta-block__btns { margin-top: 2rem; }
.cta-einzeln .cta-block__btns .btn { padding: 1.2rem 2.6rem; font-size: 0.78rem; }
.cta-block__oder { margin: 2.2rem 0 0; font-family: var(--font-caps); font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase; opacity: 0.7; }
.cta-einzeln .tel-gross { margin-top: 0.6rem; font-size: clamp(2rem, 1rem + 3.4vw, 3.8rem); }
/* hell (Hochzeiten) */
.cta-block--hell { background: linear-gradient(180deg, var(--white) 0%, #FBF3E2 100%); color: var(--ink); border-top: 1px solid var(--line-paper); }
.cta-block--hell::before { background: radial-gradient(60% 70% at 50% 100%, rgba(201, 164, 90, 0.22) 0%, transparent 70%); }
.cta-block--hell .eyebrow { color: var(--gold-ink); }
.cta-block--hell .h2 { color: var(--ink); }
.cta-block--hell .tel-gross { color: var(--gold-ink); border-bottom-color: var(--line-paper); }
.cta-block--hell .tel-gross:hover { color: var(--gold-deep); }
.cta-block--hell .cta-block__sub a, .cta-block--hell .cta-adresse a { border-bottom-color: var(--line-paper); }
.cta-block--hell .btn-solid { background: var(--gold-ink); color: var(--paper); border-color: var(--gold-ink); }
.cta-block--hell .btn-solid::after { background: var(--gold-deep); }
.cta-block--hell .btn-solid:hover { color: var(--paper); }
.cta-block--hell .cta-adresse { border-top-color: var(--line-paper); }
.cta-block--hell .cta-adresse .caps { color: var(--gold-ink); }
.cta-block--hell + .site-footer { border-top: 1px solid var(--line-gold); }
/* Team-Abschnitt Hochzeiten */
.team-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.team-grid .vorspann { margin-top: 1.2rem; max-width: 56ch; }
.team-listen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); margin-top: 1.8rem; }
.team-listen h3 { font-family: var(--font-caps); font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 0.9rem; }
.team-listen .fakten li::before { background: var(--gold-ink); }
@media (max-width: 1023px) { .team-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .team-listen { grid-template-columns: 1fr; } }
/* mobile Leiste: Beschriftung in einer Zeile, hell auf der Hochzeiten-Seite */
.cta-mobil a { letter-spacing: 0.14em; font-size: 0.62rem; padding: 0 0.6rem; white-space: nowrap; text-align: center; }
.hell .cta-mobil { background: var(--line-paper); border-top-color: var(--line-paper); }
.hell .cta-mobil a { background: var(--white); color: var(--gold-ink); }
.hell .cta-mobil a.solid { background: var(--gold-ink); color: var(--paper); }
@media (max-width: 360px) { .cta-mobil a { letter-spacing: 0.08em; font-size: 0.58rem; } }

/* Kopf-Logo: Kastanie + Wortmarke */
.brand-mark { height: 42px; width: auto; }
.site-header.is-scrolled .brand-mark, .unterseite .brand-mark { height: 38px; }
@media (max-width: 640px) { .brand-mark, .unterseite .brand-mark { height: 32px; } }

/* Die Edelkastanie: Rubrik mit goldenem Kastanienblatt */
.eyebrow--blatt { display: flex; align-items: center; gap: 0.8rem; font-weight: 400; line-height: 1; }
.eyebrow--blatt img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.lead--gross { font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem); line-height: 1.5; max-width: 40ch; margin-top: 0.4rem; }
.kastanie-orte { color: var(--gold-ink); font-size: 0.66rem; margin-top: 1.4rem; }
.kastanie-grid .ringe-wrap { margin-top: clamp(0.4rem, 1.2vh, 0.9rem); }
/* Zeilenmasken der Text-Animation: Platz für Unter- und Oberlängen (g, j, ß, Umlaute) */
.split-mask-line-mask, .split-line-mask { padding: 0.08em 0 0.22em; margin: -0.08em 0 -0.22em; }

/* Bilder sanft einblenden, sobald sie geladen sind (kein Vorhang, kein Zoom) */
img.bild-fade { opacity: 0; transition: opacity 0.7s ease; }
img.bild-fade.is-geladen { opacity: 1; }
@media (prefers-reduced-motion: reduce) { img.bild-fade { opacity: 1; transition: none; } }
/* Mobil: Kopfleiste nur mit Logo und Menü-Button – Button bündig am rechten Rand */
@media (max-width: 1023px) {
  .header-inner { grid-template-columns: 1fr auto; gap: 1rem; }
  .nav-toggle { margin-right: -10px; }   /* Striche (26 px) in der 44-px-Tippfläche optisch an den Rand */
}
/* Mobil: kompaktere Abstände zwischen und in den Abschnitten */
@media (max-width: 640px) {
  .section { padding-block: clamp(3rem, 7vh, 4rem); }
  .section-tight { padding-block: 2.5rem; }
  .kapitel-kopf, .gebiet-kopf { margin-bottom: 1.8rem; }
  .hz-bilder { margin-bottom: 3.2rem; }
  .hz-bilder .abzug { right: 0; bottom: -10%; }
  .hz-reihe, .steckbrief, .orte-2, .hotel-strip, .mt-gross { margin-top: 2.2rem; }
  .zimmer-reihe { padding-block: 2.2rem; }
  .ausstattung, .regeln, .zier-wrap { margin-top: 2rem; }
  .cta-block__oder { margin-top: 1.6rem; }
  .hotel-kopf .wrap { padding-top: calc(var(--header-h) + 1.5rem); }
}
/* iPhone quer: Kopfleiste und Inhalte nicht unter die Kamera-Aussparung */
@supports (padding: max(0px)) {
  .site-header { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
}
/* Menü auf der Hochzeiten-Seite in Weiß-Gold */
.hell .nav-panel { background: linear-gradient(180deg, var(--white) 0%, #FBF3E2 100%); color: var(--ink); }
.hell .nav-panel .eyebrow, .hell .nav-panel nav a small { color: var(--gold-ink); }
.hell .nav-panel nav a { border-bottom-color: var(--line-paper); }
.hell .nav-panel nav a[aria-current="page"] { color: var(--gold-ink); }
.hell .nav-panel-foot a:not(.btn) { color: var(--ink-2); }
.hell .nav-panel .btn-solid { background: var(--gold-ink); color: var(--paper); border-color: var(--gold-ink); }
.hell .nav-panel .btn-solid::after { background: var(--gold-deep); }