/* =========================================================================
   EDITORIAL — das LIVE-Design (seit dem Kundenentscheid für den Vogue-Look).
   Liegt als Overlay ÜBER styles.css und überschreibt nur das, was die
   Richtung ausmacht; styles.css bleibt die Basis. index.html lädt beide.
   (Ursprünglich als /editorial.html-Vorschau gebaut, dann zu index befördert.)

   Belegt an drei Referenzen (Nov. 2026):
     stefanoroscetti.com   Bone #f6f6f2, Text #4c4c4c, Raleway 200 Versalien
     angeliqueblaise.com   Cormorant Garamond 400 @86px, Triptychon-Hero
     jeremie-hkb.com       Cormorant/EB Garamond, Versalien mit 2,8px Sperrung

   Gemeinsame DNA, die hier umgesetzt wird:
     1. Serif-Display (Cormorant Garamond), leichte Schnitte, große Grade
     2. Winzige Versalien-Labels mit weiter Sperrung statt Overlines
     3. Bone statt Creme, Grau statt Braun
     4. KEINE Akzentfarbe – die Fotos tragen die Farbe allein
     5. Scharfe Kanten statt Radien, Outline-Buttons statt Pills
     6. Drei-Bild-Triptychon im Hero
   ========================================================================= */

:root {
  /* --- Flächen: reinweiß (Kundenwunsch "noch weißer"). Stefano nutzt Bone
         #f6f6f2, Angélique/Jérémie reinweiß – hier jetzt reinweiß.
         Die Sekundärflächen bleiben BEWUSST minimal grau: --gray für Karten/
         Footer, --greige fürs Statement-Band und die Ablauf-Sektion. Ohne
         diesen Hauch Grau verschwänden die Bänder auf dem Weiß und die Seite
         würde flach – die Tiefe der Referenzen kommt genau aus diesen zarten
         Stufen, nicht aus Weiß-in-Weiß. --- */
  --cream: #ffffff; /* Grundfläche – reinweiß */
  --gray: #f6f6f4; /* Karten/Footer – gerade eben vom Weiß abgesetzt */
  --greige: #efeeea; /* Band (Statement, Ablauf) – zarter Grauton */
  --white: #ffffff;
  --gray-2: #e6e5e0;
  --black: #12100f;

  /* --- Text: Grau statt Markenbraun --- */
  --ink: #2b2b2b;
  --ink-2: #4c4c4c; /* stefanoroscetti.com */
  /* --muted trägt auch 10px-Versalien-Labels (Trust, Datum, Formular-Notiz).
     #8a8a86 sah editorial aus, kam aber nur auf 3,2:1 – gemessen auf #6a6a67
     sind es 4,9:1 auf Bone, immer noch klar sekundär gegen Ink (13:1). */
  --muted: #6a6a67;

  /* --- Keine Akzentfarbe. Die Gold-Token zeigen auf Ink, damit kein
         einziger Selektor umbenannt werden muss – Gold verschwindet
         dadurch überall auf einmal (Buttons, Häkchen, Sterne, Links). --- */
  --gold: #2b2b2b;
  --gold-soft: rgba(255, 255, 255, 0.8);
  --gold-deep: #2b2b2b;
  --gold-deep-hover: #000000;

  --line: rgba(43, 43, 43, 0.15);
  --line-dark: rgba(255, 255, 255, 0.2);

  /* --- Typo: Cormorant trägt die Stimme, Raleway die Labels.
         Beide Familien laufen ohnehin schon – kein zusätzlicher Request. --- */
  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Raleway", -apple-system, "Helvetica Neue", sans-serif;

  /* Cormorant ist eine Renaissance-Antiqua: sie verträgt (und braucht)
     deutlich größere Grade als Raleway, um zu wirken. */
  --text-hero: clamp(2.8rem, 1rem + 7.6vw, 7rem);
  --text-h2: clamp(2.4rem, 1.4rem + 3.6vw, 4.25rem);
  --text-h3: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem);
  --text-lead: clamp(1.25rem, 1.05rem + 0.7vw, 1.7rem);
  --track-hero: -0.012em;
  --track-h2: -0.008em;

  /* Editorial ist kantig: keine Radien, keine Pillen. */
  --radius: 0;
  --radius-lg: 0;
  --pill: 0;
}

/* ---------- Typo ---------- */
h1,
h2 {
  font-weight: 400; /* Cormorant 300 wird bei großen Graden fadenscheinig */
}
h1 {
  font-weight: 300;
}
h3 {
  font-weight: 500;
}
/* Kursive Serife als Akzent – bei Jérémie das Erkennungsmerkmal */
.hero h1 em,
.split__body h2 em {
  font-style: italic;
  font-weight: 300;
}

/* ---------- Label statt Overline ----------
   Die Referenzen setzen hier winzige, weit gesperrte Versalien
   („ELEGANT & EDITORIAL", „TIMELESS IMAGERY. EDITORIALLY FRAMED.") –
   nicht die 21px-Zeile in Akzentfarbe, die Apple benutzt. */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.1rem;
}

/* ---------- Buttons: Outline, kantig, gesperrt ---------- */
.btn,
.btn--gold {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 1.15rem 2.5rem;
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
}
.btn:hover,
.btn--gold:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}
.btn--lg {
  padding: 1.25rem 3rem;
}
.btn--light {
  border-color: var(--white);
  background: transparent;
  color: var(--white);
}
.btn--light:hover {
  background: var(--white);
  color: var(--ink);
}
.section--dark .btn,
.hero .btn {
  border-color: rgba(255, 255, 255, 0.85);
  color: #fff;
}
.section--dark .btn:hover,
.hero .btn:hover {
  background: #fff;
  color: var(--ink);
}
.link-arrow {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ---------- Header ---------- */
.header::before {
  background: rgba(18, 16, 15, 0.45);
}
.header.is-scrolled::before {
  background: rgba(246, 246, 242, 0.85);
}
.nav a {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
/* Nav-CTA "Jetzt anfragen": als EINZIGER Button gefüllt (dunkel), nicht
   Outline. Grund: styles.css erzwingt weiße Schrift in allen Header-Zuständen
   (mobil mit !important). Als transparenter Outline-Button war die weiße
   Schrift über dem hellen (gescrollten) Header und im hellen Mobil-Menü
   unsichtbar. Ein eigener dunkler Grund trägt Weiß in JEDEM Zustand – und
   die Haupt-Aktion darf ruhig herausstechen. */
.nav .btn {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  border-width: 1px;
  letter-spacing: 0.16em;
}
.nav .btn:hover {
  background: #000;
  border-color: #000;
  color: #fff;
}

/* ---------- Hero: Triptychon ----------
   Angélique und Jérémie machen beide dasselbe: drei Bilder nebeneinander,
   außen entsättigt, Mitte in Farbe. Das ist nicht nur Optik – es kommt mit
   DREI starken Bildern aus statt mit einem perfekten. */
.hero {
  min-height: 100svh;
}
.hero__triptych {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 2px;
  background: var(--black);
}
.hero__panel {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  margin: 0; /* <figure> hat per Browser-Default 40px Seitenrand – im
                Desktop-Grid egal, im Mobil-Block-Fluss der weiße Rahmen */
}
.hero__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* picture nur Transporthülle (Mobil-Platzhalter fürs Seitenbild) – aus dem
   Layout nehmen, damit das img direktes Grid-/Flex-Kind bleibt. */
.hero__panel picture {
  display: contents;
}
/* Alle drei Panels in voller Farbe (Kundenwunsch: nicht ausgegraut). Das
   frühere Entsättigen der Seiten fiel weg; die Mitte trägt den Blick jetzt
   über ihre größere Spalte (1.25fr) und die Typo, nicht über Grau.
   Wichtig war der Bildtausch selbst: das linke Motiv war ein echtes S/W-Foto
   (matthew-jane-96, Sättigung 0) – kein Filter hätte es bunt gemacht. */
.hero__panel--side img {
  filter: contrast(1.02);
}
.hero__panel--center::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(18, 16, 15, 0.08) 0%,
    rgba(18, 16, 15, 0.32) 100%
  );
}
/* Gesamt-Schleier deutlich aufgehellt – der Hero wirkt jetzt hell.
   Die weiße Typo bleibt lesbar, weil sie ihren eigenen Scrim hat
   (.hero__inner::before), unabhängig von diesem Gradient. */
.hero::after {
  background: linear-gradient(
    180deg,
    rgba(18, 16, 15, 0.22) 0%,
    rgba(18, 16, 15, 0.04) 42%,
    rgba(18, 16, 15, 0.3) 100%
  );
}
.hero__inner {
  max-width: 46rem;
  position: relative;
}
/* Scrim NUR hinter der Typo, nicht über dem ganzen Bild: Das Mittelbild ist
   hell (Marmor, weißes Kleid), dort fallen die 11px-Versalien auf 2,5:1 ab.
   Ein stärkeres Overlay über das ganze Panel würde die Farbe wegnehmen –
   und die ist der Punkt der ganzen Richtung.

   0.72 ist gemessen, nicht geschätzt (weiß auf dem hellsten Pixel dahinter):
     0.42 -> 4,11:1  durchgefallen
     0.55 -> 4,99:1  knapp bestanden
     0.72 -> 6,78:1  gewählt
   Die knappe 0.55 wäre fragil: ein helleres Hero-Bild reißt sie sofort.
   Beim Bildtausch neu messen (Skript: hinter der Typo abtasten, dabei NUR
   die Kinder von .hero__inner ausblenden – visibility auf .hero__inner
   nimmt dieses ::before mit und die Messung lügt). */
.hero__inner::before {
  content: "";
  position: absolute;
  inset: -14% -18%;
  z-index: -1;
  background: radial-gradient(
    ellipse at center,
    rgba(18, 16, 15, 0.6) 0%,
    rgba(18, 16, 15, 0.38) 46%,
    rgba(18, 16, 15, 0) 76%
  );
}
/* Weicher Textschatten: macht die weiße Typo über dem hellen Mittelbild
   lesbar, OHNE das Bild abzudunkeln – so bleibt der Hero hell (Kundenwunsch).
   Der Standard für Text auf Fotos; die reine Luminanz-Messung des Untergrunds
   sieht den Schatten nicht, deshalb hier per Auge geprüft. */
.hero .eyebrow,
.hero h1,
.hero__meta {
  text-shadow: 0 2px 22px rgba(12, 10, 9, 0.55), 0 1px 4px rgba(12, 10, 9, 0.5);
}
.hero__logo {
  width: clamp(150px, 15vw, 210px);
  margin-bottom: 2rem;
  /* Logo ist reinweiße Line-Art – dünner Schatten, damit es auf hellen
     Bildstellen nicht verschwindet. */
  filter: drop-shadow(0 2px 14px rgba(12, 10, 9, 0.5));
}
.hero h1 {
  font-weight: 300;
  line-height: 1.02;
  margin-bottom: 1.6rem;
}
.hero .eyebrow {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1.4rem;
}
/* Ortszeile – bei beiden Referenzen fester Bestandteil des Heros */
.hero__meta {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  line-height: 2;
  margin: 0 0 2.2rem;
}
.hero__rotator {
  display: none; /* Editorial arbeitet mit einer Aussage, nicht mit Rotation */
}

@media (min-width: 901px) {
  /* Panels fahren gestaffelt auf – ruhig, kein Bounce */
  @media (prefers-reduced-motion: no-preference) {
    .hero__panel {
      animation: panelIn 1.5s var(--ease-out) both;
    }
    .hero__panel:nth-child(1) {
      animation-delay: 0.1s;
    }
    .hero__panel:nth-child(2) {
      animation-delay: 0.25s;
    }
    .hero__panel:nth-child(3) {
      animation-delay: 0.4s;
    }
  }
}
@keyframes panelIn {
  from {
    opacity: 0;
    transform: scale(1.08);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Auf Schmal wird das Triptychon zum Einzelbild – drei Streifen à 130px
   zeigen nichts. Die Mitte trägt ohnehin die Aussage. */
/* Hero unter 900px: nur das Mittelbild, object-cover füllt den KOMPLETTEN
   Hero-Container randlos (edge-to-edge), der Text liegt als Overlay darüber
   (weiß, mit Scrim + Schatten wie am Desktop). Die Seitenpanels sind aus;
   damit sie keine leere Grid-Spalte hinterlassen, wird das Grid einspaltig.
   .hero__panel { margin: 0 } (oben) verhindert den <figure>-Standardrand. */
@media (max-width: 900px) {
  .hero__triptych {
    grid-template-columns: 1fr;
  }
  .hero__panel--side {
    display: none;
  }
  /* Bildausschnitt: etwas höher setzen, damit das Brautpaar (obere Bildhälfte)
     im hochformatigen Zuschnitt sichtbar bleibt. */
  .hero__panel--center img {
    object-position: 50% 30%;
  }
}

/* Intro-Collage (Schuhe + Ringe): editorial überlappend statt zwei Kacheln
   mit Lücke (Kundenwunsch). Der weiße Rahmen (outline) ist weg, das Schuhbild
   ist größer/mehr sichtbar, das Ringbild sitzt ~36px tiefer und überlappt. */
.figure--stack {
  min-height: clamp(22rem, 42vw, 40rem);
}
.figure--stack .stack-a {
  width: 74%; /* Schuhbild größer -> mehr davon sichtbar */
}
.figure--stack .stack-b {
  width: 58%;
  outline: none;
  transform: translateY(36px); /* Ringbild ~36px weiter nach unten */
}

/* ---------- Sektionen ---------- */
.section__head h2 {
  font-size: var(--text-h2);
}
.lead {
  font-family: var(--display);
  font-size: var(--text-lead);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-2);
}
.checklist li::before {
  background: var(--ink);
}
.step,
.review {
  border-radius: 0;
}
.step {
  border: 1px solid var(--line);
  background: transparent;
}
.step:hover {
  transform: none;
  background: var(--white);
}
.step__num {
  font-family: var(--display);
  font-size: 2.25rem;
  font-weight: 300;
  color: var(--muted);
}
.step h3,
.feature h3 {
  font-family: var(--display);
}
.feature__label,
.contact__lines .k,
.field label,
.review__date,
.form__note {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.feature__label {
  color: rgba(255, 255, 255, 0.6);
}
.review__stars {
  color: var(--ink);
}
.review__avatar {
  border-radius: 0;
  font-family: var(--display);
}
.review__name {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 500;
}
.review__text {
  font-family: var(--display);
  font-size: 1.15rem;
  line-height: 1.5;
}
.guarantee__seal {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
}
.faq__q {
  font-family: var(--display);
}
.philosophy blockquote {
  font-family: var(--display);
  font-weight: 300;
  font-style: italic;
  max-width: 20ch;
}
.philosophy__media {
  clip-path: inset(calc(27% * (1 - var(--zoom))) round 0);
}
.contact__lines .v {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0;
}
.contact__socials a {
  border-radius: 0;
  border: 1px solid var(--line);
  background: transparent;
}
.field input,
.field textarea {
  border-radius: 0;
  background: transparent;
  border-color: var(--line);
}
.field input:focus,
.field textarea:focus {
  border-color: var(--ink);
  box-shadow: none;
}
.gallery a,
.pimg,
.figure.pimg,
.figure--stack .pimg {
  border-radius: 0;
}
.figure--round.pimg {
  border-radius: 0; /* Editorial rundet nicht, auch keine Porträts */
  aspect-ratio: 4 / 5;
}
.figure--stack .stack-b {
  outline-width: 10px;
}
.footer__logo {
  width: 120px;
}

/* =========================================================================
   ZWEITE EBENE — tiefere Muster aus den Referenzen (nicht nur Oberfläche):
   zentrierte Kursiv-Intros, Statement-Band, Vertrauens-Zeile, mehr Luft.
   ========================================================================= */

/* --- Mehr Weißraum: die Referenzen sind 10–13k px hoch und atmen.
       Unsere Sektionen waren dichter gepackt. --- */
:root {
  --space: clamp(6rem, 4rem + 8vw, 13rem);
}

/* --- Zentrierte Sektions-Intros als KURSIVE SERIFE (nicht mehr Script).
       Eine klare Linie: nur zwei Schriftfamilien auf der ganzen Seite –
       Cormorant (Display + Akzent) und Raleway (Labels/Nav/Buttons/Body).
       Das frühere Script (The Nautigal) war die dritte Familie und der
       Ausreißer; die kursive Serife trägt dieselbe emotionale Rolle, bleibt
       aber im Cormorant-System. Angélique und Stefano machen es genauso –
       kursive Serife statt Kalligrafie, das ist der "Vogue"-Weg. --- */
.eyebrow--center,
.section__intro {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.9rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  margin-bottom: 0.6rem;
}
/* Der Script auf dem dunklen Sticky-Zoom muss weiß bleiben, sonst
   verschwindet er im Bild. */
.philosophy .eyebrow {
  color: rgba(255, 255, 255, 0.94);
}
.section__head--center .eyebrow::before {
  content: none;
}
.section__head--center h2 {
  margin-inline: auto;
}
/* Feine Trennlinie unter zentrierten Titeln – bei Angélique/Stefano das
   ruhige Gliederungselement statt Karten-Rahmen. */
.section__head--center h2::after {
  content: "";
  display: block;
  width: 42px;
  height: 1px;
  background: var(--line);
  margin: 1.6rem auto 0;
}

/* --- Statement-Band: großer Kursiv-Satz, viel Luft, keine Deko.
       Angéliques "quietly bold" Moment. --- */
.statement {
  background: var(--greige);
  padding-block: clamp(5rem, 3rem + 7vw, 11rem);
  text-align: center;
}
.statement__text {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.8rem, 1rem + 3.4vw, 4rem);
  line-height: 1.22;
  letter-spacing: var(--track-h2);
  color: var(--ink);
  max-width: 20ch;
  margin: 0 auto;
}
.statement__text em {
  font-style: italic;
}

/* --- Vertrauens-Zeile: vier Kennzahlen, dünne Trenner, gesperrte Labels.
       Struktur wie ein "Featured On"-Strip, Inhalt aber echt. --- */
.trust {
  background: var(--cream);
  border-block: 1px solid var(--line);
}
.trust__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  padding-block: clamp(2rem, 1.5rem + 1.5vw, 3.25rem);
}
.trust__item {
  text-align: center;
  padding-inline: 1rem;
}
.trust__item + .trust__item {
  border-left: 1px solid var(--line);
}
.trust__num {
  display: block;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  line-height: 1;
  color: var(--ink);
}
.trust__num em {
  font-style: normal;
  font-size: 0.5em;
  vertical-align: 0.35em;
  margin-left: 0.1em;
}
.trust__lbl {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 720px) {
  .trust__row {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.25rem 0;
  }
  /* Bei 2 Spalten stören die vertikalen Trenner an der falschen Stelle */
  .trust__item + .trust__item {
    border-left: 0;
  }
  .trust__item:nth-child(even) {
    border-left: 1px solid var(--line);
  }
}

/* --- Bewertungen kompakter: die echten Google-Texte sind lang ("sehr viel
   Text"). Der Ausschnitt von 9 auf 6 Zeilen – die Karten werden luftiger,
   mehr passen ins Bild, der Rest kommt über "Mehr lesen". Der Zähler steht
   in styles.css/main.js; hier nur die Zeilenzahl im Editorial-Overlay. --- */
.review.is-clampable .review__text {
  -webkit-line-clamp: 6;
}

/* --- Galerie ruhiger und größer: die Referenzen zeigen Bilder groß und
       mit Raum, nicht als enges Mosaik. Reihenhöhe hoch, Abstände weiter,
       Hover zieht dezent an (Stefano/Jérémie). --- */
.gallery {
  grid-auto-rows: 20rem;
  gap: 1rem;
  max-width: 1320px;
}
.gallery a.is-visible:hover img {
  transform: scale(1.03);
}
@media (min-width: 901px) {
  /* Editorial-Rhythmus: erstes Bild groß und hoch, setzt den Ton */
  .gallery a:first-child {
    grid-row: span 2;
  }
}

/* --- Galerie-Überschrift bekommt die Kursiv-Intro-Behandlung schon über
       .section__intro; hier nur der Abstand zur Bildzone. --- */
#galerie .section__head--center {
  margin-bottom: 1rem;
}

/* =========================================================================
   HELLE FLÄCHEN — Kundenwunsch: Hintergrund weiß, kein Schwarz.
   Die drei dunklen Flächen (Features, Footer, Philosophie-Umfeld) werden
   hell. Jeder weiße Text / jede weiße Linie / das weiße Footer-Logo dreht
   dabei mit auf dunkel, sonst verschwände es auf dem hellen Grund. Passt
   ohnehin zu den Referenzen, die nahezu durchgehend weiß sind.
   ========================================================================= */

/* --- Features-Sektion ("Lehnt Euch zurück…") --- */
.section--dark {
  background: var(--cream);
  color: var(--ink-2);
}
.section--dark h1,
.section--dark h2,
.section--dark h3 {
  color: var(--ink);
}
.section--dark p,
.section--dark .section__head p {
  color: var(--ink-2);
}
.section--dark .feature {
  border-top-color: var(--line);
}
.feature__label {
  color: var(--muted); /* war rgba weiß auf Schwarz */
}
.section--dark .btn {
  border-color: var(--ink);
  color: var(--ink);
}
.section--dark .btn:hover {
  background: var(--ink);
  color: var(--white);
}

/* --- Footer --- */
.footer {
  background: var(--gray);
  color: var(--ink-2);
  border-top: 1px solid var(--line);
}
/* Das Logo-PNG ist weiße Line-Art; brightness(0) macht sie schwarz und lässt
   die Transparenz unberührt – so trägt sie auf dem hellen Footer. */
.footer__logo {
  filter: brightness(0);
  opacity: 0.82;
}
.footer__links {
  border-block-color: var(--line);
}
.footer__links a:hover {
  color: var(--ink);
}
.footer__copy {
  color: var(--muted);
}

/* --- Philosophie: der Sticky-Zoom öffnet jetzt aus Hell statt aus Schwarz.
   Der Zitattext bleibt weiß – er blendet erst auf, wenn das Foto vollflächig
   ist, liegt also immer auf dem Bild (mit Scrim), nie auf dem hellen Grund. */
.philosophy {
  background: var(--cream);
}

/* --- Triptychon-Fugen: dünne helle Linien statt schwarzer --- */
.hero__triptych {
  background: var(--cream);
}

/* =========================================================================
   GALERIE-SEITE (galerie.html) — Portfolio mit optionalen Beschreibungen.
   Inhalte kommen aus galerie-inhalt.js, gerendert von galerie.js.
   ========================================================================= */
.galerie-page {
  padding-block: clamp(7rem, 5rem + 6vw, 11rem) var(--space);
  background: var(--cream);
}
.galerie-intro {
  max-width: 42rem;
  margin: 0 auto clamp(3rem, 2rem + 3vw, 5.5rem);
}
.galerie-intro h1 {
  font-size: var(--text-h2);
}
.galerie-intro .lead {
  margin-top: 1rem;
}
/* Masonry über Spaltenfluss: verträgt Hoch- und Querformate ohne Beschnitt. */
.galerie-grid {
  columns: 3;
  column-gap: 1.25rem;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
}
.galerie-item {
  break-inside: avoid;
  margin: 0 0 1.25rem;
}
.galerie-item img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--gray);
  cursor: zoom-in;
  transition: opacity 300ms var(--ease);
}
.galerie-item img:hover {
  opacity: 0.9;
}
.galerie-item figcaption {
  padding: 0.75rem 0.1rem 0;
}
.galerie-item__titel {
  font-family: var(--display);
  font-size: 1.25rem;
  color: var(--ink);
  line-height: 1.25;
}
.galerie-item__text {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-2);
  margin-top: 0.15rem;
}

/* ---- Tagesreportage: je Hochzeit ein Block (Kopf mit Ort/Titel/Text + Grid) ---- */
.reportage + .reportage {
  margin-top: clamp(3.5rem, 2.5rem + 4vw, 7rem);
}
.reportage__kopf {
  text-align: center;
  max-width: 46rem;
  margin: 0 auto clamp(1.75rem, 1rem + 2.5vw, 3.25rem);
  padding-inline: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
}
.reportage__ort {
  display: block;
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.7rem;
}
.reportage__titel {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--text-h2);
  line-height: 1.08;
  color: var(--ink);
  margin: 0;
}
.reportage__text {
  font-family: var(--display);
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--ink-2);
  margin: 1.1rem auto 0;
}
@media (max-width: 900px) {
  .galerie-grid {
    columns: 2;
  }
}
@media (max-width: 560px) {
  .galerie-grid {
    columns: 1;
  }
}

/* ---- Lightbox ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  padding: clamp(1rem, 0.5rem + 3vw, 4rem);
  background: rgba(18, 16, 15, 0.92);
  cursor: zoom-out;
}
.lightbox.is-open {
  display: grid;
}
.lightbox__img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}
.lightbox__cap {
  margin: 1rem 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--display);
  font-size: 1.1rem;
  text-align: center;
  max-width: 44rem;
}
.lightbox__close {
  position: absolute;
  top: 1.1rem;
  right: 1.4rem;
  background: none;
  border: 0;
  color: #fff;
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
}
.lightbox__close:hover {
  opacity: 1;
}

/* ---------- Cookie-/Consent-Banner (Meta-Pixel) ---------- */
.cookie-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 300;
  max-width: 640px;
  margin-inline: auto;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 20px 60px -24px rgba(18, 16, 15, 0.4);
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}
.cookie-banner__text {
  flex: 1 1 260px;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.cookie-banner__text a {
  color: var(--ink);
  text-decoration: underline;
}
.cookie-banner__actions {
  display: flex;
  gap: 0.6rem;
  flex: 0 0 auto;
}
.cookie-banner .btn {
  padding: 0.7rem 1.4rem;
}
@media (max-width: 480px) {
  .cookie-banner__actions {
    flex: 1 1 100%;
  }
  .cookie-banner__actions .btn {
    flex: 1;
  }
}

/* Rechtsseiten: schlichter Zurück-Link statt der mobilen .nav (die als
   Off-Canvas-Panel rechts überlief und die Seite horizontal aufschob).
   Zusätzlich Wortumbruch, damit lange URLs den Text nicht überlaufen lassen. */
.legal-nav {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.legal-nav:hover {
  color: var(--ink);
}
.legal {
  overflow-wrap: break-word;
}

/* ---------- Rechtsseiten: Lesbarkeit langer Texte ----------
   Datenschutz/AGB wurden strukturiert aus der alten Seite übernommen
   (Überschriften + Absätze). Klare Hierarchie + Abstände fürs Lesen. */
.legal h2 {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 400;
  margin: 2.75rem 0 0.9rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.legal h3 {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 500;
  margin: 2rem 0 0.6rem;
}
.legal h4 {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 1.4rem 0 0.4rem;
  color: var(--ink);
}
.legal p {
  margin: 0 0 1rem;
  max-width: 65ch;
  white-space: normal; /* das pre-wrap aus styles.css war für den alten Blob */
}
.legal ul,
.legal ol {
  margin: 0 0 1.2rem;
  padding-left: 1.3rem;
  max-width: 65ch;
}
.legal li {
  margin-bottom: 0.4rem;
  line-height: 1.6;
}
.legal a {
  color: var(--ink);
  text-decoration: underline;
  overflow-wrap: anywhere; /* lange URLs brechen um statt zu überlaufen */
}

/* ---------- Kontaktformular: Zustände (Erfolg/Fehler/Consent/Honeypot) ---------- */
.form__note.is-error {
  color: #9b2c1f; /* warmes Rot, ~6:1 auf Weiß */
  font-weight: 500;
}
.form__note.is-error a {
  text-decoration: underline;
}
/* Honeypot aus dem Bild schieben (nicht display:none – manche Bots meiden das) */
.form__honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.field--check {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.65rem;
}
.field--check input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: var(--ink);
}
.field--check label {
  font-size: var(--text-small);
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-2);
}
.field--check a {
  color: var(--ink);
  text-decoration: underline;
}
/* Erfolg ersetzt das Formular an Ort und Stelle – Besucher bleibt auf der Seite */
.form__done {
  background: var(--gray);
  padding: 2.5rem 2rem;
  text-align: center;
}
.form__done h3 {
  font-size: var(--text-h3);
  margin-bottom: 0.5rem;
}
.form__done p {
  margin: 0;
}

/* =========================================================================
   REFERENZ-AUSBAU (Muster: tetyanapirker.de) — neue Bänder & Grids.
   Alles auf bestehenden Tokens/Klassen; keine neue Schrift, keine Akzentfarbe.
   ========================================================================= */

/* --- B3: 3-Wort-Statement ("Echt. Nah. Zeitlos.") — der knappste Marken-Beat,
       große Serife auf Weiß, viel Luft. Eigene Klasse statt .statement__text,
       weil hier drei Wörter tragen, kein Satz. --- */
.statement--words {
  background: var(--cream);
}
.statement__words {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.4rem, 1rem + 6vw, 6rem);
  line-height: 1.05;
  letter-spacing: var(--track-h2);
  color: var(--ink);
  margin: 0;
}
.statement__words span {
  display: inline-block;
}

/* --- B4: Zitat-Band — echte, namentliche Google-Stimme. Nutzt .statement +
       .statement__text, ergänzt nur die Quellenzeile. --- */
.statement blockquote.statement__text {
  margin: 0 auto;
  quotes: none;
}
.statement__cite {
  display: block;
  margin-top: 2.2rem;
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- B5: "Passt das?"-CTA vor dem Footer — persönlicher Übergang zum Kontakt.
       Greige, damit es sich vom weißen Kontakt darunter absetzt. --- */
.passt {
  background: var(--greige);
  text-align: center;
  padding-block: var(--space);
}
.passt h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--text-h2);
  letter-spacing: var(--track-h2);
  margin: 0.3rem 0 1.2rem;
}
.passt p {
  max-width: 46ch;
  margin: 0 auto 2.4rem;
  font-family: var(--display);
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--ink-2);
}

/* --- B6: Instagram-Grid — quadratische Kacheln, dezenter Hover-Zoom.
       Verlinken alle aufs Profil (keine erfundenen Einzel-Post-Links). --- */
.insta__handle {
  display: inline-block;
  margin-top: 0.4rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.insta__handle:hover {
  text-decoration: underline;
}
.insta__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  max-width: 1320px;
  margin: clamp(2.5rem, 1.5rem + 3vw, 4rem) auto 0;
  padding-inline: clamp(0.6rem, 0.3rem + 2vw, 1.5rem);
}
.insta__tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--gray);
}
.insta__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--ease);
}
.insta__tile:hover img {
  transform: scale(1.05);
}
.insta__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(18, 16, 15, 0);
  transition: background 300ms var(--ease);
}
.insta__tile:hover::after {
  background: rgba(18, 16, 15, 0.12);
}
@media (max-width: 720px) {
  .insta__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Mobil straffen: die großzügige Editorial-Luft (Sektions-Padding ~96px,
   Statement-Bänder ~80px um eine einzige Zeile) summiert sich auf schmalen
   Screens zu übergroßen Leerflächen. Auf dem Handy nur die Extreme kappen –
   Typo, Farben und der Rhythmus bleiben, es wird nur weniger leer. --- */
@media (max-width: 640px) {
  :root {
    --space: clamp(4rem, 3rem + 4vw, 6rem);
  }
  .statement {
    padding-block: clamp(3.5rem, 2.5rem + 5vw, 5.5rem);
  }
}