:root {
    --paper: #f6f3ee;
    --paper-soft: #f9f7f3;
    --ink: #16130f;
    --copy: #3b352c;
    --muted: #5c5347;
    --gold: #8a7355;
    --night: #12100e;
    --night-copy: #b9b0a3;
    --night-white: #f0ebe3;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Jost', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--gold); }
input, textarea, select, button { font: inherit; }
button { cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary { list-style: none; }
.container { width: min(1240px, calc(100% - 80px)); margin: 0 auto; }
.section-pad { padding-top: 130px; padding-bottom: 130px; }
.eyebrow { margin: 0 0 22px; font-size: 11px; letter-spacing: .38em; text-transform: uppercase; color: var(--gold); }
.center { text-align: center; }
.pill { display: inline-block; padding: 15px 30px; border-radius: 999px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.pill.dark { background: var(--ink); color: var(--paper); }

.site-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 18px 40px; background: rgba(246,243,238,.92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(22,19,15,.08); }
.brand { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.brand-name { font-family: 'Cormorant Garamond', serif; font-size: 20px; letter-spacing: .22em; text-transform: uppercase; }
.brand-tagline { font-size: 9px; letter-spacing: .42em; text-transform: uppercase; color: var(--gold); }
.main-nav { display: flex; align-items: center; gap: 34px; font-size: 13px; letter-spacing: .06em; }
.nav-cta { padding: 10px 20px; background: var(--ink); color: var(--paper); border-radius: 999px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.nav-cta:hover { color: var(--paper); opacity: .82; }

/* Die Schraffur ist der Zustand „Bilddatei fehlt noch“: Jeder Slot verweist über
   config/content.php auf eine Datei in public/images (siehe public/images/README.md). */
.image-slot { position: relative; overflow: hidden; background-color: #e4ddd2; background-image: repeating-linear-gradient(45deg,#e4ddd2 0 14px,#ded6ca 14px 28px); background-position: center; background-size: cover; }
.image-slot.has-image { background-repeat: no-repeat; background-size: cover; background-position: center; }

.hero { min-height: 620px; height: 88vh; display: flex; align-items: flex-end; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(246,243,238,.9) 0%, rgba(246,243,238,.45) 48%, rgba(246,243,238,0) 78%); pointer-events: none; opacity: 0; }
.hero.has-image::after { opacity: 1; }
.hero-content { position: relative; z-index: 2; padding: 0 40px 70px; max-width: 900px; }
.hero-eyebrow { color: var(--muted); }
.hero h1 { margin: 0 0 24px; font-family: 'Cormorant Garamond', serif; font-size: clamp(54px, 6vw, 76px); font-weight: 300; line-height: 1.02; text-wrap: pretty; }
.hero h1 em { font-style: italic; }
.hero-copy { max-width: 540px; margin: 0 0 34px; color: var(--copy); font-size: 17px; line-height: 1.7; }

.portfolio h2, .process h2, .faq h2, .legal-page h1 { margin: 0 0 38px; font-family: 'Cormorant Garamond', serif; font-size: 52px; font-weight: 300; line-height: 1.1; }

/* Kurzer Strich unter der Überschrift. Erbt die Textfarbe und passt damit ohne zweite
   Fassung in den hellen wie in den dunklen Bereich. */
.hairline { display: block; width: 58px; height: 1px; margin: 0 0 32px; background: currentColor; opacity: .3; }

/* Über mich: Text im Raster der Seite, Portrait über der rechten Fensterhälfte.
   Das Bild liegt absolut — so nimmt es die volle Höhe des Abschnitts ein, ohne dass der
   Textspalte dafür eine Höhe vorgegeben werden müsste. */
/* Die Höhe wächst mit der Fensterbreite, damit die Bildfläche rechts ihr Hochformat behält:
   bei 1440 px sind das 720 × 860, also etwa 5:6. Ohne die Kopplung wäre der Ausschnitt auf
   breiten Schirmen ein flacher Streifen. Nach oben gedeckelt, sonst schöbe ein 27-Zoll-Monitor
   den folgenden Abschnitt aus dem Bild. */
.about { position: relative; display: grid; align-content: center; overflow: hidden; min-height: clamp(560px, 60vw, 860px); }
.about-inner { width: min(1240px, calc(100% - 80px)); margin: 0 auto; }
/* Der Prozentwert hält den Text auch zwischen 980 px und 1240 px links der Bildkante:
   Ein fester Wert von 480 px liefe dort unter das Portrait. */
.about-intro { max-width: min(500px, 44%); padding: 132px 0; }
/* Die Beschriftungen dieses Bereichs stehen im Anthrazit des Fließtexts, nicht im Gold der
   übrigen Abschnitte — so steht die Überschrift allein im Bild. */
.about .eyebrow, .philosophy-outro .eyebrow { color: var(--muted); }
.about h2 { margin: 0 0 40px; font-family: 'Cormorant Garamond', serif; font-size: clamp(48px, 5vw, 76px); font-weight: 300; line-height: 1.03; }
.about-roles { margin: 0 0 28px; font-size: 12px; letter-spacing: .26em; line-height: 2.05; text-transform: uppercase; }
.about-claim { margin: 0; color: var(--muted); font-family: 'Cormorant Garamond', serif; font-size: 22px; font-style: italic; }
.about-portrait { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; }
/* Das Portrait deckt seine Fläche vollständig; der Ausschnitt sitzt im oberen Bilddrittel,
   damit Gesicht und Oberkörper im Bild bleiben und nicht Tisch und Beine. Ein Hochformat aus
   dem Telefon lässt sich nicht zugleich vollständig zeigen und formatfüllend einsetzen — hier
   gewinnt die gefüllte Fläche. Die 15 % sind die Stellschraube für den Ausschnitt.
   Zwei Klassen im Selektor, sonst gewinnt `.image-slot.has-image` mit `center`. */
.about-portrait.has-image { background-position: 50% 15%; }

.dark-section { background: var(--night); color: var(--night-white); }
.philosophy { padding: 122px 0; }
/* Die Spalten stehen weit auseinander und der Text bricht früh um — beides zusammen ergibt
   die kurzen Zeilen des Entwurfs. Die Breite steuert deshalb `max-width` am Absatz, nicht
   die Spalte. */
.philosophy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(60px, 10vw, 150px); align-items: start; }
.philosophy .eyebrow { color: var(--night-copy); }
.philosophy h2 { margin: 0 0 32px; font-family: 'Cormorant Garamond', serif; font-size: clamp(44px, 4.4vw, 64px); font-weight: 300; line-height: 1.07; }
.philosophy-intro p { max-width: 330px; margin: 0 0 22px; color: var(--night-copy); font-size: 15px; line-height: 1.95; }
.philosophy-intro p:last-child { margin-bottom: 0; }

/* Die vier Merkmale: Symbol, Überschrift, zwei Zeilen. Die Trennlinie liegt an der
   Textspalte, nicht am Listenpunkt — sie beginnt dadurch neben dem Symbol, nicht darunter. */
/* Die Liste steht rechtsbündig in ihrer Spalte und ist in der Breite gedeckelt: Dadurch
   enden Trennlinie und Textzeile gemeinsam an der Kante des Seitenrasters, wie im Entwurf. */
.philosophy-pillars { justify-self: end; max-width: 430px; margin: 0; padding: 0; list-style: none; }
.pillar { display: grid; grid-template-columns: 54px 1fr; gap: 36px; align-items: center; padding-top: 28px; }
.pillar:first-child { padding-top: 0; }
.pillar-text { padding-bottom: 28px; border-bottom: 1px solid rgba(240,235,227,.13); }
.pillar:last-child .pillar-text { padding-bottom: 0; border-bottom: 0; }
.pillar-icon { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid rgba(240,235,227,.26); border-radius: 50%; }
.pillar-icon svg { width: 21px; height: 21px; }
.pillar h3 { margin: 0 0 12px; font-size: 11px; font-weight: 400; letter-spacing: .28em; text-transform: uppercase; }
.pillar p { margin: 0; color: var(--night-copy); font-size: 14px; line-height: 1.85; }

/* Heller Abschluss des Philosophie-Bereichs: drei schmale Bilder links, Zitat rechts,
   darunter die Schlagwortzeile. */
.outro-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(50px, 7vw, 110px); align-items: center; }
.outro-images { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.outro-image { aspect-ratio: 5/8; }
/* Das Anführungszeichen hängt links neben der ersten Zeile, statt über ihr zu stehen —
   dadurch bleibt der Blocksatz des Zitats an der Spaltenkante. */
.outro-quote { position: relative; margin: 0; }
.outro-quote-mark { position: absolute; top: -6px; left: -26px; font-family: 'Cormorant Garamond', serif; font-size: 46px; font-style: italic; line-height: 1; }
.outro-quote blockquote { max-width: 390px; margin: 0 0 34px; font-family: 'Cormorant Garamond', serif; font-size: clamp(30px, 3.1vw, 44px); font-weight: 300; line-height: 1.22; }
.outro-quote .hairline { margin-bottom: 24px; }
/* Für die Unterschrift lädt die Seite keine dritte Schriftdatei (siehe PROJECT_NOTES.md).
   Sie nimmt eine Schreibschrift, wenn das Gerät eine mitbringt, und fällt sonst auf das
   kursive Cormorant zurück. */
.outro-signature { color: var(--muted); font-family: 'Snell Roundhand', 'Segoe Script', 'Brush Script MT', 'Cormorant Garamond', cursive; font-size: 32px; font-style: italic; letter-spacing: .06em; }
.outro-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; margin-top: 46px; padding-top: 26px; border-top: 1px solid rgba(22,19,15,.14); }
.outro-keywords { display: flex; flex-wrap: wrap; gap: 12px 64px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; }
.outro-cta { display: inline-flex; align-items: center; gap: 20px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; }
.outro-cta-arrow { display: block; width: 38px; height: 8px; transition: transform .3s ease; }
.outro-cta:hover .outro-cta-arrow { transform: translateX(7px); }

/* Nur noch die Bogenbilder des Anfrageformulars: dieselbe Schraffur wie `.image-slot`,
   aber in Nachtfarben. */
.dark-image { background-color: #26221d; background-image: repeating-linear-gradient(45deg,#26221d 0 14px,#2d2823 14px 28px); }

.section-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 50px; }
.section-heading-row h2 { margin-bottom: 0; }
.section-heading-row > p { max-width: 370px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
/* Die Galerie hat keine feste Länge mehr (siehe portfolio_images): Die Spaltenzahl steht, die
   Zeilenzahl ergibt sich aus dem Bestand.

   Seit jedes Bild hoch oder quer stehen darf, ist eine Rasterzeile halb so hoch wie eine
   Hochformat-Kachel: Ein Hochformat belegt zwei Zeilen, ein Querformat eine. Zwei Querformate
   übereinander messen `2R + Abstand` — genau so viel wie ein Hochformat daneben, das zwei
   Zeilen und den Abstand dazwischen überspannt. Gemischte Formate stehen damit auf denselben
   Kanten.

   Die Zeilenhöhe muss dafür die Spaltenbreite kennen, die keine feste Zahl ist. `100cqw` ist
   die Innenbreite des Abschnitts (siehe container-type unten) und damit die Breite des
   Rasters; davon ab die Abstände, geteilt durch die Spalten, mal 2/3 für das 3:2 des
   Querformats. */
.portfolio { container-type: inline-size; }
.gallery-grid {
    --gallery-columns: 3;
    --gallery-gap: 20px;
    --gallery-row: calc((100cqw - (var(--gallery-columns) - 1) * var(--gallery-gap)) / var(--gallery-columns) * 2 / 3);
    display: grid;
    grid-template-columns: repeat(var(--gallery-columns), 1fr);
    grid-auto-rows: var(--gallery-row);
    /* `dense` füllt die Lücke, die ein Hochformat neben einem Querformat aufreißt, mit dem
       nächsten passenden Bild. Ohne das stünden bei gemischten Formaten leere Flächen im
       Raster — die Reihenfolge des Editors bleibt dabei bis auf dieses Nachrücken erhalten. */
    grid-auto-flow: row dense;
    gap: var(--gallery-gap);
}
.gallery-item { display: block; width: 100%; padding: 0; border: 0; grid-row: span 2; cursor: zoom-in; }
.gallery-item--horizontal { grid-row: span 1; }
/* Ohne Container-Queries gibt es keine Spaltenbreite, an der sich die Zeilenhöhe ausrichten
   könnte. Dann trägt jede Kachel ihr Seitenverhältnis selbst; die Zeilen richten sich nach der
   höchsten Kachel, ein Querformat steht oben in seiner Zeile. */
@supports not (container-type: inline-size) {
    .gallery-grid { grid-auto-rows: auto; align-items: start; }
    .gallery-item { grid-row: auto; aspect-ratio: 3/4; }
    .gallery-item--horizontal { aspect-ratio: 3/2; }
}
/* Noch nicht freigegebene Kacheln tragen ihr Bild in data-gallery-bg und haben deshalb nichts
   zu zeigen — sie bleiben aus dem Fluss, bis „Weitere Bilder“ sie einblendet. */
.gallery-item.is-folded { display: none; }
.gallery-item::after { content: ''; position: absolute; inset: 0; background: rgba(18,16,14,.16); opacity: 0; transition: opacity .35s ease; }
.gallery-item:hover::after { opacity: 1; }
.gallery-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.gallery-empty { margin: 0; padding: 40px 0; color: var(--muted); font-family: 'Cormorant Garamond', serif; font-size: 22px; font-style: italic; text-align: center; }

.gallery-more { display: flex; justify-content: center; margin-top: 34px; }
.gallery-more-btn { display: inline-flex; align-items: center; gap: 14px; padding: 15px 30px; border: 1px solid rgba(22,19,15,.24); border-radius: 999px; color: var(--ink); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; transition: border-color .3s ease, background .3s ease, color .3s ease; }
.gallery-more-btn:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.gallery-more-count { display: grid; min-width: 26px; height: 26px; place-items: center; padding: 0 7px; border-radius: 999px; background: rgba(22,19,15,.08); font-size: 10px; letter-spacing: .06em; }
/* Im Adminmodus nur Beleg dafür, wie der Knopf aussieht — die Galerie liegt dort offen. */
.gallery-more-btn.is-preview { opacity: .55; }
.gallery-more-btn:hover .gallery-more-count { background: rgba(246,243,238,.16); }

/* Adminmodus: Zugang zur Galerieverwaltung, auch wenn noch kein Bild da ist, das man
   anklicken könnte. */
.gallery-admin-bar { margin-bottom: 18px; }
.gallery-admin-btn { padding: 10px 18px; border: 1px dashed rgba(138,115,85,.7); border-radius: 999px; background: rgba(138,115,85,.08); color: var(--gold); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.gallery-admin-btn:hover { background: rgba(138,115,85,.16); }
/* Ein Bild, das im Editor hängt, aber noch nicht veröffentlicht ist. */
.cms-admin-mode .gallery-item.is-pending { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Großansicht. `hidden` allein genügt nicht, weil der Block `display: grid` trägt. */
.lightbox[hidden] { display: none; }
.lightbox { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(10,9,7,.95); }
.lightbox-inner { position: relative; display: grid; width: min(1500px, 100%); height: 100%; grid-template-columns: 84px minmax(0, 1fr) 84px; grid-template-rows: 1fr auto; align-items: center; padding: 24px 16px 18px; }
.lightbox-figure { grid-column: 2; margin: 0; display: grid; place-items: center; min-height: 0; height: 100%; }
/* Zwei Deklarationen mit Absicht: `dvh` rechnet die Adressleiste des Telefons mit, ältere
   Browser verwerfen die Zeile und behalten die erste. */
.lightbox-image { max-width: 100%; max-height: calc(100vh - 130px); max-height: calc(100dvh - 130px); object-fit: contain; opacity: 0; cursor: pointer; transition: opacity .35s ease; }
.lightbox-image.is-ready { opacity: 1; }
.lightbox-arrow { grid-row: 1; display: grid; width: 58px; height: 58px; place-items: center; justify-self: center; border: 1px solid rgba(240,235,227,.34); border-radius: 50%; background: transparent; color: var(--night-white); font-family: 'Cormorant Garamond', serif; font-size: 34px; line-height: 1; transition: background .3s ease, color .3s ease, border-color .3s ease; }
.lightbox-arrow--prev { grid-column: 1; }
.lightbox-arrow--next { grid-column: 3; }
.lightbox-arrow:hover { border-color: var(--night-white); background: var(--night-white); color: #14110d; }
.lightbox-close { position: absolute; top: 18px; right: 18px; z-index: 2; width: 44px; height: 44px; border: 1px solid rgba(240,235,227,.24); border-radius: 50%; background: rgba(12,10,8,.6); color: var(--night-white); font-size: 24px; line-height: 1; }
.lightbox-close:hover { border-color: var(--night-white); }
.lightbox-meta { grid-row: 2; grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 18px; margin: 14px 0 0; color: var(--night-copy); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; }
.lightbox-counter { color: var(--night-white); }
/* Der Hinweis gilt dem Finger, nicht der Maus. */
.lightbox-hint { display: none; }
@media (hover: none) { .lightbox-hint { display: inline; } }
body.has-lightbox { overflow: hidden; }

.process-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; }
.process h2 { margin-bottom: 24px; font-size: 48px; }
.process-intro { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
.steps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 38px 44px; }
.step { border-top: 1px solid rgba(22,19,15,.16); padding-top: 18px; }
.step-no { margin-bottom: 10px; color: var(--gold); font-family: ui-monospace, monospace; font-size: 11px; }
.step-title { margin-bottom: 10px; font-family: 'Cormorant Garamond', serif; font-size: 26px; }
.step p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }

/* Google-Bewertungen, gerendert aus partials/google-reviews.blade.php. */
.reviews { padding: 120px 0; }
.reviews-inner { max-width: 1100px; }
.reviews-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; margin-bottom: 44px; }
.reviews-head .eyebrow { margin: 0; }

/* Sternleiste: Die goldene Ebene liegt deckungsgleich über der matten und wird
   auf den Bewertungsanteil beschnitten — so lassen sich auch halbe Sterne zeigen. */
.stars { position: relative; display: inline-block; color: rgba(240,235,227,.24); font-size: 13px; letter-spacing: .16em; line-height: 1; }
.stars::before { content: '★★★★★'; }
.stars-on { position: absolute; top: 0; left: 0; width: var(--stars-fill, 100%); overflow: hidden; color: var(--gold); white-space: nowrap; }
.stars.is-full { --stars-fill: 100%; }

.reviews-score { display: inline-flex; align-items: center; gap: 12px; }
.reviews-value { font-family: 'Cormorant Garamond', serif; font-size: 22px; line-height: 1; }
.reviews-count { color: var(--night-copy); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; transition: color .2s; }
.reviews-score:hover .reviews-count { color: var(--gold); }

.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 24px; align-items: stretch; }
.review-card { display: flex; min-height: 250px; flex-direction: column; gap: 18px; padding: 32px; border: 1px solid rgba(240,235,227,.14); }
.review-card .stars { align-self: flex-start; }
.quote { margin: 0; font-family: 'Cormorant Garamond', serif; font-size: 19px; font-style: italic; line-height: 1.6; }
/* Sicherheitsventil gegen eine ungewöhnlich lange Rezension; der volle Text steht auf Google. */
.review-card .quote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 14; line-clamp: 14; overflow: hidden; }
.review-by { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.review-avatar { width: 36px; height: 36px; flex: none; border-radius: 50%; object-fit: cover; }
.review-avatar.is-initial { display: grid; place-items: center; background: rgba(240,235,227,.1); color: var(--gold); font-family: 'Cormorant Garamond', serif; font-size: 17px; }
.review-meta { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.who { color: var(--gold); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.review-when { color: var(--night-copy); font-size: 11px; letter-spacing: .04em; }
.review-source { margin-left: auto; flex: none; color: var(--night-copy); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; }

.reviews-all { display: inline-block; margin-top: 40px; padding-bottom: 5px; border-bottom: 1px solid rgba(240,235,227,.28); color: var(--gold); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.reviews-hint { margin: 0; color: var(--night-copy); font-size: 13px; line-height: 1.8; }
.reviews-hint code { color: var(--night-white); font-family: ui-monospace, monospace; font-size: 12px; }

.faq-inner { width: min(900px, calc(100% - 80px)); margin: 0 auto; }
.faq h2 { margin-bottom: 46px; font-size: 48px; }
.faq details { border-bottom: 1px solid rgba(22,19,15,.14); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 4px; cursor: pointer; font-size: 17px; }
.faq .plus { color: var(--gold); font-size: 18px; transition: transform .2s ease; }
.faq details[open] .plus { transform: rotate(45deg); }
.faq details > p { max-width: 720px; margin: 0; padding: 0 4px 24px; color: var(--muted); font-size: 15px; line-height: 1.8; }

.form-errors, .login-error { margin-bottom: 24px; padding: 12px 14px; border: 1px solid #a86161; background: #fff7f7; color: #763737; font-size: 13px; line-height: 1.5; }

/* ---------- Geführtes Anfrageformular ("Story") ---------- */
.story-section { position: relative; padding: 0; background-color: #0c0a08; background-image: none; color: var(--night-white); }
.story-section::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,10,8,.92) 0%, rgba(12,10,8,.96) 55%, rgba(12,10,8,.98) 100%); pointer-events: none; opacity: 0; }
.story-section.has-image::before { opacity: 1; }
/* Auf der Eingangs- und der Dankesseite bleibt das Hintergrundfoto sichtbar; im Ablauf tritt es
   hinter den Text zurück. `is-cover` setzt story.js (Intro) bzw. die Blade-Vorlage (Bestätigung) —
   ohne JavaScript gilt direkt die dunkle Variante. */
.story-section.is-cover.has-image::before { background: linear-gradient(180deg, rgba(12,10,8,.55) 0%, rgba(12,10,8,.72) 60%, rgba(12,10,8,.88) 100%); }
.story-shell { position: relative; z-index: 1; width: min(1220px, calc(100% - 80px)); margin: 0 auto; padding: 108px 0 92px; }
.story-section.is-cover .story-shell { display: grid; min-height: 76vh; align-content: center; padding: 90px 0; }

.story-eyebrow { margin: 0 0 22px; color: var(--gold); font-size: 10px; letter-spacing: .38em; text-transform: uppercase; }
.story-headline { margin: 0 0 26px; font-family: 'Cormorant Garamond', serif; font-size: clamp(42px, 5.2vw, 72px); font-weight: 300; line-height: 1.06; text-wrap: balance; }

/* Intro (Schritt 00) — ohne JavaScript bleibt die Überschrift stehen, nur der BEGIN-Knopf entfällt. */
.story-intro { padding: 26px 0 34px; text-align: center; }
.story-shell.is-enhanced.is-started .story-intro { display: none; }
.story-lede { margin: 0 0 52px; color: var(--night-copy); font-size: 11px; letter-spacing: .3em; line-height: 2.6; text-transform: uppercase; }
.story-begin { display: none; width: 132px; height: 132px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(240,235,227,.38); border-radius: 50%; background: transparent; color: var(--night-white); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; transition: background .35s ease, color .35s ease, border-color .35s ease; }
.story-shell.is-enhanced .story-begin { display: inline-flex; }
.story-begin:hover { border-color: var(--night-white); background: var(--night-white); color: #14110d; }
.story-begin-arrow { font-size: 15px; }

/* Rahmen des Ablaufs */
.story-shell.is-enhanced .story-form { display: none; }
.story-shell.is-enhanced.is-started .story-form { display: block; animation: story-fade .6s ease both; }
.story-topbar { display: none; align-items: center; justify-content: space-between; gap: 24px; color: var(--night-copy); font-size: 10px; letter-spacing: .34em; text-transform: uppercase; }
.story-shell.is-enhanced .story-topbar { display: flex; }
.story-counter em { color: var(--night-white); font-style: normal; }
.story-progress { display: none; margin-top: 16px; height: 1px; background: rgba(240,235,227,.14); }
.story-shell.is-enhanced .story-progress { display: block; }
.story-progress > span { display: block; width: 16.6%; height: 100%; background: var(--gold); transition: width .55s cubic-bezier(.4,0,.2,1); }
.story-form-errors { margin-top: 28px; }

.story-body { display: grid; grid-template-columns: minmax(0,.6fr) minmax(0,1fr); gap: 74px; align-items: start; padding: 56px 0 48px; }

/* Bogenbild + Mitschrift */
.story-arch { position: relative; aspect-ratio: 3/4.3; overflow: hidden; border-radius: 999px 999px 4px 4px; }
.story-arch-img { position: absolute; inset: 0; height: auto; opacity: 0; transition: opacity .8s ease; }
.story-arch-img.is-active { opacity: 1; }
.story-ledger { display: grid; gap: 16px; margin: 30px 0 0; }
.story-ledger-row { display: none; }
.story-ledger-row.is-visible { display: block; animation: story-fade .6s ease both; }
.story-ledger dt { margin-bottom: 5px; color: var(--gold); font-size: 9px; letter-spacing: .3em; text-transform: uppercase; }
.story-ledger dd { margin: 0; font-family: 'Cormorant Garamond', serif; font-size: 20px; line-height: 1.35; }

/* Schritte */
.story-shell.is-enhanced .story-step { display: none; }
.story-shell.is-enhanced .story-step.is-active { display: block; animation: story-rise .55s cubic-bezier(.2,.7,.2,1) both; }
.story-step + .story-step { margin-top: 60px; }
.story-shell.is-enhanced .story-step + .story-step { margin-top: 0; }
.story-question { margin: 0 0 42px; font-family: 'Cormorant Garamond', serif; font-size: clamp(32px, 3.3vw, 48px); font-weight: 300; line-height: 1.14; }
.story-salutation { display: none; }
.story-salutation.is-visible { display: block; margin-bottom: 10px; color: var(--gold); font-size: .56em; font-style: italic; }
.story-hint { margin: 22px 0 0; color: var(--night-copy); font-family: 'Cormorant Garamond', serif; font-size: 17px; font-style: italic; }
.story-error { margin: 14px 0 0; color: #e7a6a6; font-size: 12px; letter-spacing: .06em; }

/* Eingaben */
.story-input { width: 100%; max-width: 560px; padding: 8px 2px 14px; border: 0; border-bottom: 1px solid rgba(240,235,227,.3); outline: 0; background: transparent; color: var(--night-white); font-family: 'Cormorant Garamond', serif; font-size: clamp(24px, 2.4vw, 32px); transition: border-color .3s ease; }
.story-input::placeholder { color: rgba(240,235,227,.24); }
.story-input:focus { border-bottom-color: var(--gold); }
.story-date { display: flex; align-items: flex-end; gap: 16px; }
.story-date-input { width: 108px; padding: 6px 0 12px; border: 0; border-bottom: 1px solid rgba(240,235,227,.3); outline: 0; background: transparent; color: var(--night-white); font-family: 'Cormorant Garamond', serif; font-size: 32px; text-align: center; transition: border-color .3s ease, opacity .3s ease; }
.story-date-input:focus { border-bottom-color: var(--gold); }
.story-date-input:disabled { opacity: .3; }
.story-date-year { width: 142px; }
.story-date-sep { padding-bottom: 12px; color: rgba(240,235,227,.28); font-family: 'Cormorant Garamond', serif; font-size: 24px; }
.story-names { display: flex; align-items: flex-end; gap: 20px; max-width: 640px; }
.story-names .story-input { max-width: none; }
.story-amp { padding-bottom: 12px; color: rgba(240,235,227,.3); font-family: 'Cormorant Garamond', serif; font-size: 26px; }
.story-textarea { width: 100%; min-height: 190px; padding: 20px 22px; border: 1px solid rgba(240,235,227,.18); outline: 0; background: rgba(240,235,227,.03); color: var(--night-white); font-size: 16px; line-height: 1.85; resize: vertical; transition: border-color .3s ease; }
.story-textarea::placeholder { color: rgba(240,235,227,.28); }
.story-textarea:focus { border-color: rgba(240,235,227,.45); }

/* Gefühls-Chips */
.story-chips { display: flex; max-width: 620px; flex-wrap: wrap; gap: 12px; }
.story-chip { display: inline-flex; }
.story-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.story-chip > span { display: inline-block; padding: 13px 25px; border: 1px solid rgba(240,235,227,.24); border-radius: 999px; color: var(--night-copy); cursor: pointer; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; transition: border-color .3s ease, background .3s ease, color .3s ease, opacity .3s ease; }
.story-chip > span:hover { border-color: rgba(240,235,227,.55); color: var(--night-white); }
.story-chip input:checked + span { border-color: var(--gold); background: var(--gold); color: #14110d; }
.story-chip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
.story-chip.is-locked > span { opacity: .3; cursor: not-allowed; }
.story-chip.is-locked > span:hover { border-color: rgba(240,235,227,.24); color: var(--night-copy); }

/* Kontrollkästchen (kein Datum / Datenschutz) */
.story-skip, .story-privacy { display: inline-flex; align-items: flex-start; gap: 12px; margin-top: 26px; cursor: pointer; }
.story-privacy { display: flex; max-width: 560px; color: var(--night-copy); font-size: 13px; line-height: 1.65; }
.story-skip input, .story-privacy input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.story-skip-box { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 3px; border: 1px solid rgba(240,235,227,.4); transition: background .25s ease, border-color .25s ease; }
.story-skip input:checked ~ .story-skip-box, .story-privacy input:checked ~ .story-skip-box { border-color: var(--gold); background: var(--gold); }
.story-skip input:focus-visible ~ .story-skip-box, .story-privacy input:focus-visible ~ .story-skip-box { outline: 2px solid var(--gold); outline-offset: 3px; }
.story-skip .story-hint { margin: 0; }
.story-skip input:checked ~ .story-hint { color: var(--night-white); }
.story-privacy a { text-decoration: underline; }

/* Navigation */
.story-nav { display: flex; align-items: center; gap: 24px; margin-top: 46px; }
.story-back { align-items: center; gap: 10px; padding: 6px 0; border: 0; background: none; color: var(--night-copy); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; transition: color .3s ease; }
.story-back:hover { color: var(--night-white); }
.story-next { display: inline-flex; align-items: center; gap: 20px; margin-left: auto; padding: 0; border: 0; background: none; color: var(--night-white); font-size: 11px; letter-spacing: .28em; text-transform: uppercase; }
.story-arrow { display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid rgba(240,235,227,.4); border-radius: 50%; font-size: 15px; transition: background .3s ease, color .3s ease, border-color .3s ease; }
/* Weiter/Zurück gibt es nur im geführten Ablauf; ohne JavaScript trägt der Absenden-Button aus Schritt 06. */
.story-nav-btn { display: none; }
.story-shell.is-enhanced .story-nav-btn { display: inline-flex; }
.story-next:hover .story-arrow { border-color: var(--night-white); background: var(--night-white); color: #14110d; }
.story-send .story-arrow { border-color: var(--gold); }
.story-send:hover .story-arrow { border-color: var(--gold); background: var(--gold); color: #14110d; }

/* Zitatzeile */
.story-foot { padding-top: 28px; border-top: 1px solid rgba(240,235,227,.12); }
.story-quote { display: none; margin: 0; }
.story-quote.is-active { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 26px; animation: story-fade .7s ease both; }
.story-quote-text { color: rgba(240,235,227,.72); font-family: 'Cormorant Garamond', serif; font-size: 17px; font-style: italic; }
.story-quote-author { color: var(--night-copy); font-size: 10px; font-style: normal; letter-spacing: .26em; text-transform: uppercase; }

/* Bestätigung */
.story-success { padding: 40px 0 30px; text-align: center; }
.story-success-body { max-width: 520px; margin: 0 auto; color: var(--night-copy); font-size: 15px; line-height: 1.85; }

/* Zusammenfassung und persönliche Notiz. Die linke Spalte trägt die Angaben des Paares, die
   rechte das Wort von Sascha — deshalb ist sie schmaler und optisch abgesetzt. */
.success-panel { display: grid; grid-template-columns: 1.25fr 1fr; gap: 26px; margin: 52px 0 0; text-align: left; }
.success-summary, .success-note { padding: 32px 34px; border: 1px solid rgba(240,235,227,.14); background: rgba(240,235,227,.03); }
.success-summary-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid rgba(240,235,227,.12); }
.success-summary-head h3, .success-note h3 { margin: 0; font-family: 'Cormorant Garamond', serif; font-size: 25px; font-weight: 400; }
.success-reference { color: var(--gold); font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; }
.success-list { display: grid; gap: 16px; margin: 0; }
.success-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px 20px; align-items: baseline; }
.success-row dt { color: var(--gold); font-size: 9px; letter-spacing: .3em; text-transform: uppercase; }
.success-row dd { margin: 0; font-family: 'Cormorant Garamond', serif; font-size: 20px; line-height: 1.4; overflow-wrap: anywhere; }
.success-row--wide { grid-template-columns: 1fr; padding-top: 6px; }
/* Die Geschichte kommt so zurück, wie sie getippt wurde — Absätze inklusive. */
.success-row dd.success-story { white-space: pre-line; color: var(--night-copy); font-family: 'Jost', system-ui, sans-serif; font-size: 15px; line-height: 1.85; }
.success-hint { margin: 26px 0 0; color: var(--night-copy); font-family: 'Cormorant Garamond', serif; font-size: 16px; font-style: italic; }

.success-note { display: flex; flex-direction: column; }
.success-note-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.success-portrait { flex: none; width: 58px; height: 58px; border-radius: 50%; }
.success-note-body { margin: 0 0 24px; color: var(--night-copy); font-size: 14px; line-height: 1.85; }
.success-steps { display: grid; gap: 14px; margin: 0 0 26px; padding: 0; list-style: none; counter-reset: none; }
.success-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: baseline; color: var(--night-copy); font-size: 14px; line-height: 1.6; }
.success-step-no { color: var(--gold); font-family: ui-monospace, monospace; font-size: 11px; }
.success-signature { margin-top: auto; color: var(--night-white); font-family: 'Snell Roundhand', 'Segoe Script', 'Brush Script MT', 'Cormorant Garamond', cursive; font-size: 30px; font-style: italic; letter-spacing: .06em; }

.success-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 22px; margin-top: 34px; }
.success-actions-label { color: var(--night-copy); font-size: 12px; letter-spacing: .04em; }
.success-action { padding: 11px 22px; border: 1px solid rgba(240,235,227,.28); border-radius: 999px; color: var(--night-white); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; transition: border-color .3s ease, background .3s ease, color .3s ease; }
.success-action:hover { border-color: var(--gold); background: var(--gold); color: #14110d; }
.success-back { display: inline-block; margin-top: 40px; padding-bottom: 5px; border-bottom: 1px solid rgba(240,235,227,.28); color: var(--gold); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }

/* Adminmodus: `cms.css` setzt jedes bearbeitbare Element auf `position: relative`, damit die
   Beschriftung „Bild bearbeiten“ daran hängen kann. Für das absolut liegende Portrait hieße
   das Höhe 0 — der Slot wäre unsichtbar und nicht mehr anklickbar. Die Regel hier ist
   spezifischer als die aus cms.css und stellt die Lage wieder her. */
body.cms-admin-mode .about-portrait { position: absolute; }

/* Adminmodus: Der Ablauf bleibt ungefaltet (siehe story.js). Übereinandergelegte Bilder und
   Zitate werden aufgefächert, damit jedes einzelne anklickbar und damit editierbar ist. */
body.cms-admin-mode .story-arch { position: static; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; aspect-ratio: auto; border-radius: 0; }
body.cms-admin-mode .story-arch-img { position: relative; inset: auto; height: 190px; opacity: 1; }
body.cms-admin-mode .story-quote { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 26px; }
body.cms-admin-mode .story-foot { display: grid; gap: 14px; }

@keyframes story-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes story-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .story-shell.is-enhanced .story-step.is-active, .story-quote.is-active, .story-ledger-row.is-visible, .story-shell.is-enhanced.is-started .story-form { animation: none; }
    .story-progress > span, .story-arch-img, .outro-cta-arrow { transition: none; }
}

.site-footer { padding: 80px 0 40px; background: var(--night); color: var(--night-copy); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 60px; padding-bottom: 50px; border-bottom: 1px solid rgba(240,235,227,.14); }
.footer-brand { margin-bottom: 8px; color: var(--night-white); font-family: 'Cormorant Garamond', serif; font-size: 22px; letter-spacing: .22em; text-transform: uppercase; }
.footer-tagline { margin-bottom: 24px; color: var(--gold); font-size: 10px; letter-spacing: .42em; text-transform: uppercase; }
.footer-copy { max-width: 340px; margin: 0; font-size: 14px; line-height: 1.8; }
.footer-col { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.footer-col a { color: var(--night-copy); }
.footer-heading { margin-bottom: 6px; color: var(--gold); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-top: 28px; flex-wrap: wrap; }
.copyright { color: #7d7466; font-size: 12px; }
.socials { display: flex; align-items: center; gap: 14px; }
.socials a { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(240,235,227,.2); border-radius: 50%; color: var(--night-copy); }
.socials a:hover { border-color: var(--gold); color: var(--night-white); }

.legal-page { min-height: 70vh; padding: 70px 40px 120px; }
.legal-inner { max-width: 820px; margin: 0 auto; }
.legal-back { display: inline-block; margin-bottom: 40px; color: var(--gold); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; }
.legal-page h1 { margin-bottom: 40px; }
.legal-block { margin-bottom: 34px; }
.legal-block h2 { margin: 0 0 12px; font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 400; }
.legal-block p { margin: 0; white-space: pre-line; color: var(--copy); font-size: 15px; line-height: 1.85; }

.login-page { min-height: 100vh; background: var(--paper); }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; }
.login-brand { position: absolute; top: 30px; left: 40px; display: flex; flex-direction: column; }
.login-brand > span { font-family: 'Cormorant Garamond', serif; font-size: 18px; letter-spacing: .2em; text-transform: uppercase; }
.login-brand small { color: var(--gold); font-size: 9px; letter-spacing: .35em; text-transform: uppercase; }
.login-card { width: min(440px, 100%); padding: 42px; border: 1px solid rgba(22,19,15,.1); background: var(--paper-soft); box-shadow: 0 24px 80px rgba(22,19,15,.06); }
.login-card h1 { margin: 0 0 12px; font-family: 'Cormorant Garamond', serif; font-size: 46px; font-weight: 300; }
.login-intro { margin: 0 0 28px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.login-card > label:not(.remember) { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; color: var(--gold); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.login-card input[type=email], .login-card input[type=password] { border: 0; border-bottom: 1px solid rgba(22,19,15,.25); outline: 0; background: transparent; padding: 11px 2px; color: var(--ink); font-size: 16px; }
.remember { display: flex; align-items: center; gap: 9px; margin: 4px 0 24px; color: var(--muted); font-size: 13px; }
.login-card button[type=submit] { width: 100%; padding: 15px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }

@media (max-width: 980px) {
    .site-header { padding: 16px 24px; }
    .main-nav { gap: 18px; }
    .main-nav a:not(.nav-cta) { display: none; }
    .container { width: min(100% - 48px, 1240px); }
    .section-pad { padding-top: 90px; padding-bottom: 90px; }
    .philosophy-grid, .process-grid, .outro-grid { grid-template-columns: 1fr; gap: 55px; }
    /* Das Portrait rückt aus der rechten Hälfte heraus und stellt sich unter den Text. */
    .about { min-height: 0; }
    .about-inner { width: min(100% - 48px, 1240px); }
    .about-intro { max-width: none; padding: 90px 0 48px; }
    /* Gestapelt bekommt das Bild ein Hochformat statt einer festen Höhe. 4:5 statt einer
       breiteren Fläche, weil von einem 9:16-Foto sonst nur ein schmales Band übrig bliebe —
       auf einem Tablet wurde daraus eine Großaufnahme des Kopfes. Über 480 px steht es
       deshalb mittig statt randlos: lieber Papier daneben als ein zu enger Ausschnitt. */
    .about-portrait { position: static; width: min(100%, 480px); height: auto; margin-inline: auto; aspect-ratio: 4/5; }
    /* Gestapelt bliebe für ein hängendes Anführungszeichen kein Rand — es rückt über den Text. */
    .outro-quote-mark { position: static; display: block; margin-bottom: -12px; }
    .philosophy-pillars { justify-self: stretch; max-width: none; }
    /* Einspaltig gibt es keine Nachbarspalte mehr, die die Zeile begrenzt. Ohne Deckel liefe
       der Fließtext auf einem Tablet über die volle Breite — rund hundert Zeichen je Zeile. */
    .philosophy-intro p, .pillar p { max-width: 62ch; }
    .outro-quote blockquote { max-width: 18em; }
    .section-heading-row { align-items: flex-start; flex-direction: column; }
    /* Spalten und Abstand stehen als Variablen, weil die Zeilenhöhe mit ihnen rechnet. */
    .gallery-grid { --gallery-columns: 2; }
    .success-panel { grid-template-columns: 1fr; }
    .reviews-grid { grid-template-columns: 1fr; }
    .review-card { min-height: 0; }
    .story-shell { width: min(100% - 48px, 1220px); padding: 84px 0 72px; }
    .story-body { grid-template-columns: 1fr; gap: 48px; }
    .story-aside { display: grid; grid-template-columns: 150px 1fr; gap: 30px; order: 2; align-items: start; }
    .story-arch { aspect-ratio: 3/4; }
    .story-ledger { margin: 0; }
    .story-panels { order: 1; }
}

@media (max-width: 640px) {
    .site-header { padding: 14px 18px; }
    .brand-name { font-size: 16px; }
    .brand-tagline { letter-spacing: .28em; }
    .nav-cta { padding: 9px 13px; font-size: 10px; }
    .hero { min-height: 620px; height: 82vh; }
    /* Auf dem Telefon steht der Text nicht mehr neben dem Bild, sondern darauf: Die Spalte ist
       so breit wie das Foto. Der Verlauf von links deckt ihn dort nur noch am Rand — die
       dunkle Schrift stünde je nach Motiv auf hellem Kleid oder dunklem Wald.
       Deshalb hier von unten nach oben und deutlich mehr Papier: Die obere Bildhälfte bleibt
       frei, unter der Schrift steht die Seitenfarbe fast deckend. */
    .hero.has-image::after { background: linear-gradient(180deg, rgba(246,243,238,0) 0%, rgba(246,243,238,.22) 26%, rgba(246,243,238,.72) 48%, rgba(246,243,238,.94) 66%, var(--paper) 100%); }
    .hero-content { padding: 0 22px 52px; }
    .hero h1 { font-size: 49px; }
    .hero-eyebrow { color: var(--copy); }
    .hero-copy { font-size: 15px; color: var(--ink); }
    .container, .faq-inner { width: calc(100% - 36px); }
    .portfolio h2, .process h2, .faq h2, .legal-page h1 { font-size: 41px; }
    .about-inner { width: calc(100% - 36px); }
    .about-intro { padding: 74px 0 40px; }
    .about h2 { font-size: 42px; }
    .about-portrait { aspect-ratio: 1/1; }
    .philosophy { padding: 82px 0; }
    .pillar { grid-template-columns: 44px 1fr; gap: 20px; padding-top: 24px; }
    .pillar-text { padding-bottom: 24px; }
    .pillar-icon { width: 44px; height: 44px; }
    .pillar-icon svg { width: 18px; height: 18px; }
    /* Auf einer Spalte gibt die Spaltenbreite das Maß vor, nicht mehr die Zeilenlänge. */
    .philosophy-intro p, .pillar p { max-width: none; }
    .outro-images { gap: 8px; }
    .outro-foot { margin-top: 38px; }
    .outro-keywords { gap: 10px 26px; letter-spacing: .22em; }
    /* Zwei Spalten statt einer: Die Galerie ist jetzt beliebig lang, einspaltig wäre der
       Abschnitt eine endlose Rolle. */
    .gallery-grid { --gallery-columns: 2; --gallery-gap: 12px; }
    .gallery-more-btn { padding: 14px 22px; letter-spacing: .2em; }
    .lightbox-inner { grid-template-columns: 46px minmax(0, 1fr) 46px; padding: 20px 8px 14px; }
    .lightbox-arrow { width: 40px; height: 40px; font-size: 26px; }
    .lightbox-close { top: 12px; right: 12px; width: 38px; height: 38px; font-size: 21px; }
    .lightbox-meta { gap: 12px; letter-spacing: .22em; }
    .success-panel { margin-top: 40px; gap: 14px; }
    .success-summary, .success-note { padding: 24px 20px; }
    /* Zwei Spalten wären hier 130 px Beschriftung neben 40 px Antwort. */
    .success-row { grid-template-columns: 1fr; gap: 4px; }
    .success-actions { gap: 10px 14px; }
    .steps-grid { grid-template-columns: 1fr; }
    .reviews { padding: 82px 0; }
    .story-shell { width: calc(100% - 36px); padding: 66px 0 58px; }
    .story-intro { padding: 10px 0 20px; }
    .story-lede { margin-bottom: 40px; letter-spacing: .24em; line-height: 2.4; }
    .story-begin { width: 112px; height: 112px; font-size: 10px; }
    .story-body { padding: 40px 0 36px; }
    .story-aside { grid-template-columns: 116px 1fr; gap: 20px; }
    .story-date { gap: 10px; }
    .story-date-input { width: 74px; font-size: 26px; }
    .story-date-year { width: 96px; }
    .story-names { flex-direction: column; align-items: stretch; gap: 10px; }
    .story-amp { display: none; }
    .story-chips { gap: 9px; }
    .story-chip > span { padding: 11px 18px; letter-spacing: .18em; }
    .story-nav { margin-top: 36px; gap: 14px; }
    .story-next { gap: 14px; font-size: 10px; letter-spacing: .2em; }
    .story-arrow { width: 48px; height: 48px; }
    .story-quote.is-active { gap: 8px 16px; }
    .footer-grid { grid-template-columns: 1fr; gap: 40px; }
    .site-footer { padding-top: 60px; }
    .legal-page { padding: 55px 18px 90px; }
    .login-brand { position: static; margin-bottom: 30px; }
    .login-shell { display: flex; flex-direction: column; justify-content: center; }
    .login-card { padding: 32px 24px; }
}