/* beelitz.info — Design „Dunkel & edel" */

/* ---------- Schrift ----------
   Playfair Display, selbst gehostet (SIL Open Font License, Lizenztext liegt
   unter assets/fonts/OFL.txt). Bewusst KEIN Google-Fonts-Aufruf: die Dateien
   liegen auf dem eigenen Webspace, beim Seitenaufruf geht keine Anfrage an
   Dritte – das haelt die Datenschutzerklaerung richtig, die ausdruecklich
   „nur System-Schriften, keine externen Ressourcen" zusagt.

   Vorher stand in der Schriftliste Didot, das es fast nur auf Apple-Geraeten
   gibt; auf Windows landete die Seite bei Times New Roman, auf Android bei
   Noto Serif – der hohe Didone-Kontrast des Entwurfs fehlte dort ganz.
   font-display: swap zeigt sofort die Ersatzschrift und tauscht dann; bei
   22 KB je Schnitt ist der Umbruchsprung kaum wahrnehmbar. */
@font-face {
  font-family: "Playfair Display";
  src: url("/assets/fonts/playfair-display-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("/assets/fonts/playfair-display-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #0d0c0a;
  --surface: #15130f;
  --line: #292520;
  --gold: #c9a25c;
  /* Nur für Linien und Rahmen: als Textfarbe kommt dieser Ton auf 4.1:1 und
     bleibt damit unter der Lesbarkeitsschwelle von 4.5:1. */
  --gold-dim: #8a6f3e;
  /* Dieselbe Familie, eine Spur heller – für die kleinen Kapitälchen-Labels
     (eyebrow, Fußzeilen-Titel). 4.9:1 auf dem Grund, 4.6:1 auf den Karten. */
  --gold-label: #967b4a;
  --champagne: #efe3c8;
  --text: #d6cfc2;
  --muted: #8d8577;
  --maxw: 1240px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Platz fuer die Bildlaufleiste dauerhaft freihalten: sonst springt das
     Layout waagerecht, sobald die Lightbox das Scrollen sperrt. */
  scrollbar-gutter: stable;
}
/* Setzt site.js, solange die Lightbox offen ist. */
body.modal-offen { overflow: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Deutsche Bandwurmwoerter ("Verbraucherschlichtungsstelle") ragten auf
     320px breiten Bildschirmen aus ihrem Absatz heraus. Sichtbar war das
     dank overflow-x: hidden nicht, gemessen aber schon. */
  overflow-wrap: break-word;
}
/* Silbentrennung nur auf schmalen Bildschirmen. In den breiten Textspalten am
   Desktop bricht der Fliesstext von selbst sauber um; Trennstriche wirken dort
   nur unruhig ("Perspek-tive", "Elms-horn"). Eng wird es erst auf Tablet und
   Handy – dort verhindert die Trennung Loecher in der Zeile und abgeschnittene
   Bandwurmwoerter. Greift, weil das html-Element lang="de" traegt. */
@media (max-width: 820px) {
  .prosa p, .prosa li, .split .text p, section.intro .text p, .einleitung, .leise {
    hyphens: auto;
  }
}
/* Ueberschriften erst ganz zum Schluss trennen – dort ordnet sonst
   text-wrap: balance die Zeilen. Ohne Trennung zerlegt der harte Umbruch ein
   Wort wie „Datenschutzerklaerung" wortlos in „Datenschutzerk | laerung". */
@media (max-width: 480px) {
  h1, h2, h3 { hyphens: auto; }
}
/* Feines Bildkorn über der ganzen Seite */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none;
  opacity: 0.05;
  /* Eigener Compositor-Layer: sonst muss dieses bildschirmfuellende Korn bei
     jedem Repaint darunter (z. B. den aufklappenden Spalten) mitgezeichnet werden. */
  will-change: opacity;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)'/%3E%3C/svg%3E");
}
/* Playfair steht jetzt vorn: Didot zuerst zu nennen hiesse, dass Apple-Geraete
   weiter Didot zeigen und alle anderen Playfair – genau die Uneinheitlichkeit,
   die der Einbau beseitigen soll. Die alten Namen bleiben als Notnagel. */
.serif { font-family: "Playfair Display", Didot, "Bodoni MT", "Times New Roman", serif; font-weight: 400; }
.eyebrow {
  display: block;
  text-transform: uppercase; letter-spacing: 0.3em;
  font-size: 0.7rem; color: var(--gold);
}
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Sicherheitsnetz fuer Linkfarben: ohne eine allgemeine Regel faellt jeder Link,
   der in keinem eigens gestalteten Behaelter sitzt, auf die Browser-Vorgabe
   zurueck - blau bzw. lila nach dem Besuch (aufgefallen bei den
   "Mehr erfahren"-Links in den Paketen auf /preise-und-leistungen/).
   Autoren-Regeln schlagen die Browser-Vorgabe unabhaengig von der Spezifitaet,
   ein eigenes :visited-Gegenstueck waere also wirkungslos-ueberfluessig und
   wuerde nur mit spezifischeren Regeln wie .btn kollidieren. Spaeter folgende
   Regeln (.fuss a, nav.main a, ...) ueberschreiben diese hier wie gehabt. */
a { color: var(--gold); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gold); color: var(--bg); padding: 10px 18px; text-decoration: none;
}
.skip:focus { left: 0; }

/* ---------- Header ---------- */
header.site {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
header.site .inner {
  max-width: var(--maxw); margin: 0 auto; padding: 18px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.logo { font-size: 1rem; color: var(--champagne); letter-spacing: 0.05em; text-decoration: none; white-space: nowrap; }
.logo em { color: var(--gold); }
nav.main { display: flex; gap: 24px; flex-wrap: wrap; }
nav.main a {
  color: var(--muted); text-decoration: none; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.16em;
}
nav.main a:hover { color: var(--champagne); }
nav.main a[aria-current="page"] { color: var(--champagne); border-bottom: 1px solid var(--gold); padding-bottom: 3px; }
nav.main a.cta { color: var(--gold); }
.menue-knopf {
  display: none;
  background: none; border: 1px solid var(--line); color: var(--muted);
  font: inherit; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.16em;
  padding: 8px 14px; cursor: pointer;
  align-items: center; gap: 10px;
}
.menue-icon {
  display: inline-block; width: 16px; height: 2px; background: var(--gold); position: relative;
}
.menue-icon::before, .menue-icon::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: var(--gold);
}
.menue-icon::before { top: -5px; }
.menue-icon::after { top: 5px; }

@media (max-width: 960px) {
  .menue-knopf { display: inline-flex; }
  nav.main {
    display: none;
    flex-basis: 100%; flex-direction: column; gap: 16px; padding: 12px 0 8px;
    border-top: 1px solid var(--line);
  }
  header.site.offen nav.main { display: flex; }

  /* Ohne JavaScript kann der Knopf nichts aufklappen – dann waere die Seite
     auf dem Handy ueberhaupt nicht navigierbar. Also: Knopf weg, Navigation
     dauerhaft sichtbar. Die Klasse js setzt ein Skript im Seitenkopf, noch
     bevor gezeichnet wird. */
  html:not(.js) .menue-knopf { display: none; }
  html:not(.js) nav.main { display: flex; }
}

/* ---------- Bilder ---------- */
figure.bild { border: 1px solid var(--line); overflow: hidden; background: var(--surface); }
figure.bild img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Vollbild-Hero (Startseite) ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero .foto {
  position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(160deg, #1d1810 0%, #131009 60%, #0d0c0a 100%);
}
.hero .foto img, section.cta .foto img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.hero .foto img { object-position: 70% center; }
.hero .foto::after {
  /* Dunkler Verlauf für Lesbarkeit: unten und links am stärksten.
     Reicht bis 80% hoch: die h1 braucht auf schmalen Fenstern bis zu vier
     Zeilen, dadurch sitzt die Eyebrow-Zeile darueber weit oben. Endete der
     Verlauf wie zuvor bei 62%, lag sie genau auf der hellen Goldflaeche des
     Fotos und war nicht mehr zu lesen. */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top,
      var(--bg) 0%,
      color-mix(in srgb, var(--bg) 68%, transparent) 34%,
      color-mix(in srgb, var(--bg) 50%, transparent) 58%,
      transparent 80%),
    linear-gradient(to right, color-mix(in srgb, var(--bg) 72%, transparent) 0%, transparent 55%);
}
.hero .inhalt {
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: 0 28px 70px; position: relative;
}
/* Lesbarkeit im Hero: Der abdunkelnde Verlauf auf .foto::after rechnet vom
   Fensterrand, der Textblock ist aber auf --maxw begrenzt und zentriert. Auf
   breiten Monitoren beginnt er dadurch erst weit innen, wo der Verlauf schon
   fast durchsichtig ist - und liegt dann ungeschuetzt auf dem hellen Gold des
   Hero-Fotos. Ein eigener Schatten je Textelement wirkt unabhaengig von
   Fensterbreite und -hoehe; die h1 hat ihn laengst, die kleineren Zeilen
   bekommen ihn hier. */
.hero .eyebrow,
.hero .motto,
.hero .scrollhinweis,
.hero .seite {
  text-shadow:
    0 0 4px rgba(13, 12, 10, 0.95),
    0 0 12px rgba(13, 12, 10, 0.9),
    0 0 26px rgba(13, 12, 10, 0.7);
}
/* Im Hero nicht in Gold: die Zeile liegt auf dem goldenen Foto, da fehlt jeder
   Farbkontrast. Champagner ist deutlich heller als der Bildgrund. Etwas
   groesser als die 0.7rem der Unterseiten, weil gesperrte Versalien auf einem
   unruhigen Foto sonst zerfallen. */
.hero .eyebrow { color: var(--champagne); font-size: 0.76rem; }
.hero .seite {
  position: absolute; left: -8px; bottom: 90px;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 0.65rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold-label);
}
.hero h1 {
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  line-height: 1.02; color: var(--champagne);
  text-wrap: balance; margin-top: 26px; letter-spacing: 0.01em;
  max-width: 16ch;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.55);
}
.hero h1 em, h1 em, h2 em { color: var(--gold); }
.hero .motto {
  margin-top: 30px; display: flex; gap: 14px 26px; flex-wrap: wrap;
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--text);
}
.hero .motto span { border-left: 1px solid var(--gold-dim); padding-left: 14px; }
.hero .scrollhinweis {
  margin-top: 44px; display: flex; align-items: center; gap: 18px;
  color: var(--muted); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
}
.hero .scrollhinweis::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- Unterseiten-Hero ---------- */
.seiten-hero {
  position: relative;
  padding: 170px 0 70px;
  background:
    radial-gradient(60% 70% at 80% 10%, color-mix(in srgb, var(--gold) 7%, transparent) 0%, transparent 70%);
  border-bottom: 1px solid var(--line);
}
.seiten-hero .inner { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.seiten-hero h1 {
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  line-height: 1.08; color: var(--champagne);
  text-wrap: balance; margin-top: 20px; max-width: 22ch;
}
.seiten-hero .einleitung { max-width: 62ch; margin-top: 26px; color: var(--text); }

/* ---------- Allgemeine Abschnitte ---------- */
.abschnitt { max-width: var(--maxw); margin: 0 auto; padding: 90px 28px; }
.abschnitt.schmal { max-width: 860px; }
.abschnitt h2 {
  font-size: clamp(1.7rem, 3.8vw, 2.6rem); color: var(--champagne);
  line-height: 1.15; text-wrap: balance;
}
.abschnitt h2 + p, .abschnitt .eyebrow + h2 { margin-top: 14px; }
.prosa { max-width: 68ch; }
.prosa p + p { margin-top: 18px; }
.prosa h2 { margin-top: 54px; }
.prosa h2:first-child { margin-top: 0; }
.prosa h2 + p { margin-top: 16px; }
/* :not(.btn) ist noetig, nicht kosmetisch: Ohne den Ausschluss uebersteuert
   die Hover-Farbe dieser Regel (0,2,1) die des Knopfes (0,2,0) — der gefuellte
   Knopf bekaeme champagnefarbene Schrift auf champagnefarbenem Grund und waere
   unsichtbar (Kontrast 1,0). Aufgefallen 2026-08-03 auf /danke/, der ersten
   Seite mit einem .btn innerhalb von .prosa. */
.prosa a:not(.btn) { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-dim); }
.prosa a:not(.btn):hover { color: var(--champagne); border-bottom-color: var(--champagne); }
.prosa ul { margin-top: 16px; padding-left: 22px; }
/* Ein Absatz nach einer Liste hatte bisher keine Regel und klebte an ihr. */
.prosa ul + p { margin-top: 18px; }
.prosa li + li { margin-top: 8px; }
.prosa li::marker { color: var(--gold); }
.leise { color: var(--muted); }

/* Goldakzent im Fliesstext. Bewusst als eigene Klasse und nicht ueber em
   allein: em kommt auch in Ueberschriften vor, wo es bereits gold ist – hier
   soll die Auszeichnung ausdruecklich gesetzt sein, nicht beilaeufig. */
.gold { color: var(--gold); }

/* Schlusssatz eines Textabschnitts, der fuer sich stehen soll. Serifen,
   groesser, gold – dieselben drei Mittel wie in den Ueberschriften, damit es
   wie ein Teil des Designs wirkt und nicht wie ein hervorgehobener Absatz.
   text-wrap: balance haelt die drei Woerter beim Umbruch zusammen. */
.merksatz {
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  color: var(--gold); line-height: 1.35; letter-spacing: 0.01em;
  text-wrap: balance;
}
.prosa .merksatz { margin-top: 30px; }
.prosa .merksatz + p { margin-top: 10px; }

/* Breites Platzhalter-/Fotoband */
.band { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.band.oben { padding-top: 70px; }
.band figure.bild { aspect-ratio: 21 / 9; }

/* Text/Bild im Wechsel */
.split {
  max-width: var(--maxw); margin: 0 auto; padding: 45px 28px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px; align-items: center;
}
.split figure.bild { aspect-ratio: 4 / 5; }
.split.bild-rechts .medien { order: 2; }
.split h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); color: var(--champagne); text-wrap: balance; }
.split .text p { margin-top: 16px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: 15px 38px;
  border: 1px solid var(--gold);
  color: var(--champagne); text-decoration: none;
  text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.76rem;
  transition: background 0.25s, color 0.25s;
  background: none; cursor: pointer; font-family: inherit;
}
.btn:hover, .btn:focus-visible { background: var(--gold); color: var(--bg); }
.btn.voll { background: var(--gold); color: var(--bg); }
.btn.voll:hover { background: var(--champagne); border-color: var(--champagne); }

/* ---------- Startseite: Intro ---------- */
section.intro {
  position: relative;
  background:
    radial-gradient(55% 60% at 82% 20%, color-mix(in srgb, var(--gold) 7%, transparent) 0%, transparent 70%),
    radial-gradient(45% 55% at 8% 85%, color-mix(in srgb, var(--gold) 4%, transparent) 0%, transparent 70%);
}
section.intro .inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 120px 28px;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px;
}
section.intro .kopf h2 {
  font-size: clamp(2rem, 4.5vw, 3.2rem); color: var(--champagne);
  line-height: 1.12; text-wrap: balance; margin-top: 18px;
}
section.intro .text p + p { margin-top: 20px; }
section.intro .text .btn { margin-top: 34px; }

/* ---------- Startseite: Shootings ---------- */
section.shootings {
  border-top: 1px solid var(--line); padding: 110px 0 60px;
  background: radial-gradient(60% 40% at 50% 0%, color-mix(in srgb, var(--gold) 5%, transparent) 0%, transparent 70%);
}
.shootings .kopf {
  max-width: var(--maxw); margin: 0 auto 70px; padding: 0 28px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.shootings h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); color: var(--champagne); }
/* 34ch quetschten den Satz in sechs kurze Zeilen — das wirkte wie ein Kasten
   neben der Überschrift. Mehr Breite, und er läuft in drei ruhigen Zeilen aus. */
.shootings .kopf p { max-width: 54ch; color: var(--muted); font-size: 0.92rem; }
/* Desktop: aufklappende Bildspalten — Mobil (s. u.): breite Panels */
.spalten {
  max-width: var(--maxw); margin: 0 auto; padding: 0 28px;
  display: flex; gap: 14px; height: min(78vh, 640px);
}
.spalte {
  position: relative; flex: 1; border: 1px solid var(--line);
  overflow: hidden; display: flex; align-items: flex-end;
  text-decoration: none;
  /* Nur flex-grow animieren: das ist der einzige Wert, der sich aendert.
     Das Shorthand "flex" haette flex-basis mitanimiert - unnoetige Arbeit. */
  transition: flex-grow 0.45s ease;
  /* Grenzt Layout und Paint auf die Spalte ein, damit die Breitenaenderung
     nicht die ganze Zeile neu berechnen laesst. */
  contain: layout paint;
}
.spalte img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
}

/* Ausschnitt der Portrait-Kachel am Desktop: Die Nase der Taenzerin liegt bei
   x = 905 von 2048 Bildpunkten (44,2 %), am Raster nachgemessen. In der
   eingeklappten Spalte sind 608 Bildpunkte sichtbar; damit die Nase dort
   waagerecht mittig steht, muss der Ausschnitt bei 41,7 % ansetzen.
   Aufgeklappt (1128 sichtbare Punkte) waeren 37,1 % richtig — ein Wert kann
   nur einen Zustand treffen, und der Ruhezustand ist der haeufigere; beim
   Aufklappen wandert die Nase rund 21 px aus der Mitte.
   Der Y-Wert steht nur der Vollstaendigkeit halber da: Das Bild fuellt die
   Rahmenhoehe exakt aus (1365 von 1365), senkrecht ist nichts zu verschieben —
   nachgeprueft, ein anderer Y-Wert liefert einen byteidentischen Screenshot. */
@media (min-width: 821px) {
  .spalte-portrait img { object-position: 41.7% 22%; }
}
.spalte::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13, 12, 10, 0.94) 8%, rgba(13, 12, 10, 0.25) 45%, transparent 70%);
}
.spalte .text { position: relative; z-index: 1; padding: 28px; }
/* Der Text darf sich waehrend des Aufklappens NICHT neu umbrechen, sonst
   springen die Zeilen bei jedem Frame (und mit ihnen der ganze Block, weil er
   unten ausgerichtet ist). Ueberschrift einzeilig halten, Absatz auf eine
   feste Breite legen: min() rechnet nur mit dem Viewport, nicht mit der
   Spaltenbreite - waehrend der Animation bleibt der Wert also konstant. */
.spalte h3 {
  /* Untergrenze 1.05rem statt 1.2rem: knapp oberhalb des Umbruchs auf einspaltig
     (821px) bleiben je Spalte nur rund 120px, „Ausdrucksstarke Portraits" ging
     dort sonst über drei Zeilen. */
  color: var(--champagne); font-size: clamp(1.05rem, 2vw, 1.5rem);
  /* Alle vier Titel sind nach dem Muster „Adjektiv + Substantiv" gebaut; das
     Adjektiv bekommt eine eigene Zeile, damit die Spalten gleich aufgebaut
     wirken statt je nach Wortlaenge mal ein- und mal zweizeilig. */
  /* Frueher white-space: nowrap — das hielt den Titel zwar einzeilig, schnitt
     aber jeden laengeren ab: im Ruhezustand sind nur rund 230 px sichtbar,
     „Ausdrucksstarke Portraits" braucht 284 px. Stattdessen umbrechen lassen
     und dabei eine feste Breite geben, die die Spaltenbreite aus dem Viewport
     nachrechnet (maxw bzw. Fensterbreite, minus Aussenpolster und drei
     Zwischenraeume, geteilt durch vier Spalten, minus Innenpolster). Weil nur
     der Viewport eingeht und nicht die aktuelle Spaltenbreite, bleibt der Wert
     waehrend des Aufklappens konstant — der Titel bricht immer gleich um und
     springt nicht.
     Die 17px sind die Bildlaufleiste, die dank scrollbar-gutter immer Platz
     belegt: 100vw schliesst sie mit ein, der Inhalt ist also schmaler. Ohne
     den Abzug ragte die Box unter 1240px Fensterbreite wieder heraus. */
  width: calc((min(var(--maxw), 100vw - 17px) - 56px - 42px) / 4 - 56px);
}
.spalte h3 .erstes-wort { display: block; }
.spalte p {
  color: var(--text); font-size: 0.88rem; margin-top: 8px;
  width: min(330px, 38vw);
  opacity: 0; transition: opacity 0.35s ease 0.15s;
}
.spalte .mehr {
  display: inline-block; margin-top: 12px; color: var(--gold);
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.18em;
  opacity: 0; transition: opacity 0.35s ease 0.2s;
}
.spalte:hover, .spalte:focus-visible { flex: 2.6; }
.spalte:hover h3, .spalte:focus-visible h3 { color: var(--gold); }
.spalte:hover p, .spalte:hover .mehr,
.spalte:focus-visible p, .spalte:focus-visible .mehr { opacity: 1; }
@media (hover: none) {
  .spalte p, .spalte .mehr { opacity: 1; }
}

/* ---------- Kundenstimmen ---------- */
/* Statt einer flaechigen Hintergrundfarbe liegt hier ein Foto ueber die volle
   Seitenbreite — dieselbe Bauweise wie beim CTA-Block. Die Farbe bleibt als
   Rueckfall stehen, falls das Bild noch nicht geladen ist. */
section.stimmen {
  position: relative; overflow: hidden;
  background: var(--surface);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 100px 0;
}
section.stimmen .foto { position: absolute; inset: 0; z-index: 0; }
section.stimmen .foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; }
/* Abdunkeln, damit Ueberschrift und Zitate lesbar bleiben: senkrecht in die
   angrenzenden Abschnitte ueberblenden, dazu eine gleichmaessige Daempfung
   ueber die ganze Flaeche. Ohne den zweiten Verlauf saessen die hellen
   Goldpartien direkt unter der Ueberschrift. */
section.stimmen .foto::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, var(--bg) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 22%, color-mix(in srgb, var(--bg) 55%, transparent) 78%, var(--bg) 100%),
    color-mix(in srgb, var(--bg) 45%, transparent);
}
/* Inhalt ueber das Bild heben — ohne die Stapelung lägen Kopf und Schiene
   hinter der Grafik. */
section.stimmen > :not(.foto) { position: relative; z-index: 1; }
.stimmen .kopf {
  max-width: var(--maxw); margin: 0 auto 54px; padding: 0 28px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 28px;
}
.stimmen h2 { font-size: clamp(2rem, 4.5vw, 3rem); color: var(--champagne); margin-top: 14px; }

/* Blaetterknoepfe der Kundenstimmen. Nur fuer Maus/Stift: auf Touch waeren sie
   ueberfluessig, dort wischt man. Sichtbar erst, wenn site.js das hidden-Attribut
   entfernt – ohne JavaScript gaebe es sonst zwei tote Knoepfe. */
.schiene-steuerung { display: none; gap: 10px; flex-shrink: 0; padding-bottom: 6px; }
@media (hover: hover) and (pointer: fine) {
  /* Die eigene display-Regel wuerde das hidden-Attribut aushebeln, deshalb hier
     ausdruecklich wieder ausblenden. */
  .schiene-steuerung { display: flex; }
  .schiene-steuerung[hidden] { display: none; }
}
.schiene-pfeil {
  width: 46px; height: 46px; line-height: 1; font-size: 1.5rem;
  background: none; border: 1px solid var(--line); color: var(--champagne);
  cursor: pointer; font-family: inherit;
  transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.schiene-pfeil:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.schiene-pfeil:disabled { opacity: 0.3; cursor: default; }
.schiene {
  display: flex; gap: 28px;
  /* Ohne flex-start zieht der Standardwert stretch alle Kaesteln auf die Hoehe
     des laengsten Zitats - eine Zweiwortrezension staende dann in einem fast
     leeren Kasten. */
  align-items: flex-start;
  overflow-x: auto; scroll-snap-type: x mandatory;
  /* Bleibt im Raster der uebrigen Inhalte: gescrollt wird innerhalb dieser
     Breite, die Karten enden buendig statt aus dem Fenster zu laufen.
     (Vorher schob ein berechnetes Randpolster die Reihe ueber die volle
     Fensterbreite.) */
  max-width: var(--maxw); margin: 0 auto;
  padding: 4px 28px 28px;
  scrollbar-color: var(--gold-dim) transparent;
}
.schiene blockquote {
  /* 350px: bei 1184px Innenbreite passen genau drei ganze Karten ins Bild,
     plus 50px Anschnitt der vierten als Hinweis, dass die Reihe weitergeht. */
  flex: 0 0 min(350px, 82vw); scroll-snap-align: start;
  border: 1px solid var(--line);
  /* Halb durchsichtig, damit das Foto dahinter durchscheint. Der Weichzeichner
     ist dabei kein Effekt um seiner selbst willen: ohne ihn laufen die hellen
     Goldpartien des Bildes direkt hinter dem Zitattext durch und fressen den
     Kontrast. */
  background: color-mix(in srgb, var(--bg) 50%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 34px; font-size: 1rem; font-style: italic;
}
.schiene blockquote::before {
  content: "„"; display: block; font-size: 3.2rem; line-height: 0.6;
  color: var(--gold); font-style: normal; margin-bottom: 20px;
  font-family: Didot, "Bodoni MT", Georgia, serif;
}
.schiene cite {
  display: block; font-style: normal; color: var(--gold);
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.22em;
}
.schiene .wer { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
/* Herkunft der Rezension. Bewusst als Sterne + Wortmarke statt Google-Logo:
   das vierfarbige "G" bricht die Palette und darf laut Markenrichtlinien
   nicht umgefaerbt werden. */
/* Ersatz fuer fehlende Portraits: Monogramm im Kreis, gleiche Masse wie .avatar,
   damit die Reihe einheitlich bleibt, auch wenn nur ein Teil ein Foto hat. */
.schiene .wer .avatar-mono {
  width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid var(--gold-dim); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-style: normal; font-size: 1.15rem;
  letter-spacing: 0.04em; line-height: 1;
  font-family: Didot, "Bodoni MT", "Playfair Display", "Times New Roman", serif;
}
.schiene .wer-text { min-width: 0; }
.schiene .quelle {
  display: flex; align-items: center; gap: 8px; margin-top: 5px;
  font-style: normal; font-size: 0.72rem; color: var(--muted);
  letter-spacing: 0.06em;
}
.schiene .sterne {
  color: var(--gold); letter-spacing: 0.08em; font-size: 0.78rem;
  line-height: 1; white-space: nowrap;
}

.stimmen-quelle {
  max-width: var(--maxw); margin: 26px auto 0; padding: 0 28px;
  font-size: 0.82rem; text-align: right;
}
.stimmen-quelle a {
  color: var(--gold); text-decoration: none;
  border-bottom: 1px solid var(--gold-dim);
}
.stimmen-quelle a:hover { color: var(--champagne); border-bottom-color: var(--champagne); }

/* ---------- CTA mit abgedunkeltem Foto-Hintergrund ---------- */
section.cta { position: relative; overflow: hidden; }
section.cta .foto {
  position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(200deg, #191510 0%, #0f0d0a 70%);
}
section.cta .foto::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, color-mix(in srgb, var(--bg) 88%, transparent) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 60%, color-mix(in srgb, var(--bg) 35%, transparent) 100%),
    linear-gradient(to bottom, var(--bg) 0%, transparent 20%, transparent 80%, var(--bg) 100%);
}
section.cta .inner { max-width: var(--maxw); margin: 0 auto; padding: 150px 28px; }
section.cta h2 {
  font-size: clamp(2.4rem, 6.5vw, 4.6rem); color: var(--champagne);
  line-height: 1.05; text-wrap: balance; max-width: 16ch;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.55);
}
section.cta .zeile {
  margin-top: 44px; display: flex; align-items: center; gap: 36px; flex-wrap: wrap;
}
section.cta .zeile p { max-width: 46ch; color: var(--text); }
section.cta .zeile a:not(.btn) { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-dim); }
section.cta .zeile a:not(.btn):hover { color: var(--champagne); }

/* ---------- Preise ---------- */
.pakete {
  max-width: var(--maxw); margin: 0 auto; padding: 70px 28px 90px;
  /* min(300px, 100%) statt schlicht 300px: Auf einem 320px breiten Bildschirm
     bleiben nach den Innenabstaenden nur 264px uebrig – eine starre
     Mindestbreite von 300px schob die Karten dann aus dem Fenster. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 28px;
  align-items: stretch;
}
.paket {
  border: 1px solid var(--line); background: var(--surface);
  display: flex; flex-direction: column;
  /* Kein Innenabstand mehr auf der Karte selbst: das Bild sitzt randlos oben,
     der Abstand liegt jetzt auf .paket-inhalt. */
  padding: 0; overflow: hidden;
}
.paket-bild { margin: 0; border-bottom: 1px solid var(--line); background: var(--bg); }
.paket-bild img {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform 0.6s ease, opacity 0.3s ease;
}
.paket:hover .paket-bild img { transform: scale(1.03); opacity: 0.94; }
/* Das breite Paket laeuft ueber die ganze Zeile - dort waere 3:2 viel zu hoch. */
.paket.breit .paket-bild img { aspect-ratio: 21 / 9; }
.paket-inhalt {
  padding: 32px 34px 38px; display: flex; flex-direction: column; flex: 1;
}
.paket .eyebrow { color: var(--gold-label); }
.paket h2 { font-size: 1.55rem; color: var(--champagne); margin-top: 10px; }
.paket .unterzeile { color: var(--muted); font-size: 0.92rem; margin-top: 6px; font-style: italic; }
/* Aufklappbare Leistungsliste. Auf schmalen Bildschirmen waere die Seite sonst
   ueber elf Bildschirme lang – die Listen machen gut die Haelfte jeder Karte aus.
   Bild, Titel, Preis und Knopf bleiben immer sichtbar: die Preise sind der Grund,
   warum jemand die Seite ueberhaupt oeffnet. */
.paket-details { flex: 1; margin-top: 22px; }
.paket-details > ul { margin-top: 18px; }
.paket-details > summary {
  cursor: pointer; list-style: none; position: relative;
  color: var(--gold-label); font-size: 0.76rem;
  text-transform: uppercase; letter-spacing: 0.16em;
  padding: 9px 30px 9px 0; min-height: 24px;
}
/* Das Dreieck von Safari/Chrome passt nicht zur Typografie – eigenes Zeichen. */
.paket-details > summary::-webkit-details-marker { display: none; }
.paket-details > summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%); color: var(--gold); font-size: 1.15rem; line-height: 1;
}
.paket-details[open] > summary::after { content: "–"; }
.paket-details > summary:hover { color: var(--champagne); }
.paket-details > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Ab der Breite stehen die Karten nebeneinander, dort ist Platz genug: site.js
   klappt beim Laden auf, und die Zusammenfassung waere dann nur noch Ballast.
   Nur unter html.js – ohne JavaScript bleibt sie sichtbar und bedienbar. */
@media (min-width: 821px) {
  html.js .paket-details[open] > summary { display: none; }
  html.js .paket-details[open] > ul { margin-top: 0; }
}

.paket ul { list-style: none; flex: 1; }
.paket li { padding-left: 24px; position: relative; font-size: 0.92rem; }
.paket li + li { margin-top: 12px; }
.paket li::before { content: "—"; position: absolute; left: 0; color: var(--gold); }
.paket li strong { color: var(--champagne); font-weight: 500; }
.paket .preis {
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.paket .preis .betrag { font-size: 1.5rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.paket .preis a { color: var(--champagne); text-decoration: none; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.16em; border-bottom: 1px solid var(--gold); padding-bottom: 3px; }
.paket .preis a:hover { color: var(--gold); }
.paket ul a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-dim); }
.paket ul a:hover { color: var(--champagne); border-bottom-color: var(--champagne); }
.paket.breit { grid-column: 1 / -1; }

/* ---------- FAQ ---------- */
/* Abgesetzte Flaeche, damit sich der Fragenteil sichtbar vom Formular darueber
   loest — vorher trennte die beiden nur Abstand, und sie liefen ineinander. */
.faq-flaeche {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-top: 90px;
}
.faq { max-width: 860px; margin: 0 auto; padding: 0 28px 90px; }
.faq h2 { font-size: clamp(1.7rem, 3.8vw, 2.4rem); color: var(--champagne); margin-bottom: 34px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 22px 36px 22px 0; position: relative;
  color: var(--champagne); font-size: 1.05rem; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  color: var(--gold); font-size: 1.4rem; font-weight: 300;
}
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 24px; color: var(--muted); max-width: 62ch; }

/* ---------- Kontakt ---------- */
/* Portrait als Hintergrund hinter den Kontaktangaben — dieselbe Bauweise wie
   bei den Kundenstimmen. Die Grundfarbe bleibt als Rueckfall stehen, falls das
   Bild noch nicht geladen ist. */
.kontakt-flaeche {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.kontakt-flaeche .foto { position: absolute; inset: 0; z-index: 0; }
.kontakt-flaeche .foto img {
  width: 100%; height: 100%; object-fit: cover;
  /* Das Gesicht sitzt im oberen Drittel; ohne die Verschiebung schneidet der
     Ausschnitt es bei breiten Fenstern an. */
  object-position: center 28%;
  display: block;
}
/* Kraeftiger abdunkeln als bei den Kundenstimmen: hier stehen Fliesstext und
   eine Liste mit Links darauf, nicht nur eine Ueberschrift und Karten. */
.kontakt-flaeche .foto::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, var(--bg) 0%, color-mix(in srgb, var(--bg) 78%, transparent) 20%, color-mix(in srgb, var(--bg) 78%, transparent) 80%, var(--bg) 100%),
    color-mix(in srgb, var(--bg) 62%, transparent);
}
.kontakt-flaeche > :not(.foto) { position: relative; z-index: 1; }

.kontakt-raster {
  max-width: var(--maxw); margin: 0 auto; padding: 90px 28px;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px;
}
.kontakt-raster h2 { font-size: clamp(1.7rem, 3.8vw, 2.4rem); color: var(--champagne); }
.kontakt-wege { list-style: none; margin-top: 30px; }
.kontakt-wege li {
  display: flex; gap: 20px; align-items: baseline; flex-wrap: wrap;
  padding: 18px 0; border-top: 1px solid var(--line);
}
.kontakt-wege li:last-child { border-bottom: 1px solid var(--line); }
.kontakt-wege .weg {
  flex: 0 0 110px; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--gold-label);
}
.kontakt-wege a { color: var(--champagne); text-decoration: none; border-bottom: 1px solid var(--gold-dim); }
.kontakt-wege a:hover { color: var(--gold); }

/* ---------- Kontaktformular ---------- */
.formular { margin-top: 38px; display: grid; gap: 22px; }
.feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.feld { display: flex; flex-direction: column; gap: 8px; }
.feld label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--gold-label);
}
.feld input, .feld select, .feld textarea {
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  padding: 13px 16px; font: inherit; font-size: 0.95rem; border-radius: 0;
}
.feld select { appearance: none; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none; border-color: var(--gold);
}
.feld textarea { min-height: 170px; resize: vertical; }
.hp { position: absolute; left: -9999px; top: auto; }
.zustimmung { display: flex; gap: 12px; align-items: flex-start; font-size: 0.88rem; color: var(--muted); cursor: pointer; }
.zustimmung input { accent-color: var(--gold); margin-top: 5px; flex: 0 0 auto; }
.zustimmung a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-dim); }
.zustimmung a:hover { color: var(--champagne); }
.meldung { border: 1px solid var(--line); background: var(--surface); padding: 18px 22px; font-size: 0.95rem; }
.meldung.ok { border-color: var(--gold); color: var(--champagne); }
.meldung.fehler { border-color: #8a4a3e; color: #dfb0a5; }
/* site.js setzt den Fokus hierher; ohne eigene Regel zeichnet der Browser
   seinen weissen Standardrahmen, der im dunklen Layout fremd wirkt. */
.meldung.fehler:focus { outline: 2px solid var(--gold); outline-offset: 3px; }
.meldung.fehler p { margin-bottom: 10px; }
.meldung ul { padding-left: 20px; }
.meldung li + li { margin-top: 6px; }

/* ---------- Footer ---------- */
footer.site { border-top: 1px solid var(--line); padding: 60px 0 40px; }
.fuss {
  max-width: var(--maxw); margin: 0 auto; padding: 0 28px 24px;
  display: flex; flex-wrap: wrap; gap: 44px; justify-content: space-between;
}
.fuss nav { display: flex; flex-direction: column; gap: 10px; }
.fuss .titel { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.24em; color: var(--gold-label); margin-bottom: 6px; }
/* Die Fusszeilen-Links waren nur 23px hoch. Fuer Finger ist das zu wenig
   (Richtwert 24x24), und dicht untereinander trifft man leicht daneben.
   inline-block, damit die Polsterung ueberhaupt zaehlt – bei reinen
   Inline-Elementen vergroessert senkrechtes Padding die Trefferflaeche nicht. */
.fuss a {
  color: var(--muted); text-decoration: none; font-size: 0.86rem;
  display: inline-block; padding: 3px 0; min-height: 24px;
}
.fuss a:hover { color: var(--champagne); }
.stimmen-quelle a { display: inline-block; padding: 3px 0; min-height: 24px; }
.fuss .claim { max-width: 320px; color: var(--muted); font-size: 0.86rem; }
.fuss .claim strong { color: var(--champagne); font-weight: 500; }
/* Gleiche Schreibweise wie das Logo im Seitenkopf: „Fotografie" kursiv in Gold. */
.fuss .claim strong em { color: var(--gold); }

/* ---------- Scroll-Reveal (nur mit JS aktiv) ---------- */
html.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
html.js .reveal.sichtbar { opacity: 1; transform: none; }

/* ---------- Making-of: Ablauf in drei Schritten ---------- */
/* Eigene Sektion statt Galerie-Raster: die Bilder erzaehlen eine Reihenfolge,
   der mehrspaltige Fluss der Galerie wuerde sie umsortieren. */
section.making { padding: 100px 0; border-top: 1px solid var(--line); }
section.making .inner { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
section.making h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); color: var(--champagne); margin-top: 10px; }
section.making .leise { color: var(--muted); font-size: 0.9rem; margin-top: 10px; max-width: 62ch; }

/* Kopf des Making-of: Ueberschrift links, Blaetterknoepfe rechts – wie bei den
   Kundenstimmen. */
section.making .kopf {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 28px;
}

/* Die Schritte laufen als waagerechte Schiene (Klasse .schiene liefert die
   Mechanik: Flex, scroll-snap, Innenpolster). Hier steht nur, was die Reihe
   vom Kundenstimmen-Pendant unterscheidet.
   margin statt margin-top, weil .schiene mit "margin: 0 auto" zentriert. */
.making-schritte { margin: 44px auto 0; }
.making-schritte figure {
  margin: 0;
  /* 380px: bei 1184px Innenbreite stehen drei Schritte im Bild, der vierte
     ragt angeschnitten herein und zeigt, dass die Reihe weitergeht. */
  flex: 0 0 min(380px, 82vw);
  scroll-snap-align: start;
}
/* height: auto ist hier Pflicht, nicht Kosmetik: die img-Tags tragen width- und
   height-Attribute (gegen Layout-Sprünge beim Laden). Die wirken als
   Praesentationshinweise wie feste Masse – dann gelten beide Dimensionen als
   gesetzt und aspect-ratio wird stillschweigend ignoriert. Vorher lieferte der
   Wrapper .galerie-bild img dieses height: auto mit; seit die Schritte ohne
   Lightbox auskommen, fehlte es. */
.making-schritte img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 8 / 5; object-fit: cover;
}
.making-schritte figcaption {
  margin-top: 16px; color: var(--muted); font-size: 0.88rem; line-height: 1.6;
}
.making-schritte .schritt {
  display: block; color: var(--gold); font-size: 0.7rem;
  letter-spacing: 0.24em; margin-bottom: 8px; font-variant-numeric: tabular-nums;
}

/* ---------- Galerie-Raster auf den Shooting-Seiten ---------- */
/* Mehrspaltiger Fluss statt festem Raster: die Bilder wechseln zwischen Hoch-
   und Querformat, ein starres Seitenverhaeltnis wuerde sie beschneiden. */
section.galerie { padding: 100px 0; border-top: 1px solid var(--line); }
section.galerie .inner { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
section.galerie h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); color: var(--champagne); margin-top: 10px; }
section.galerie .leise { color: var(--muted); font-size: 0.9rem; margin-top: 10px; }

.galerie-raster { columns: 4 260px; column-gap: 16px; margin-top: 40px; }
/* inline-block + vertical-align: top ist kein Schoenheitsfehler, sondern der
   Grund, warum die Spalten oben auf einer Linie stehen: Safari schob den
   Inhalt einzelner Spalten sonst um rund 15 px nach unten (auf /portrait/ die
   dritte, von Marcus am 2026-08-02 gemeldet). Chromium war nie betroffen, der
   Versatz ist dort nicht messbar - beim Aendern also in Safari gegenpruefen.
   Das width: 100% ist dabei Pflicht, sonst schrumpft die Kachel auf die
   Bildbreite. */
.galerie-raster figure {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  display: inline-block; width: 100%; vertical-align: top;
  margin: 0 0 16px;
}
/* Die Kacheln sind Links auf die Bilddatei (ohne JavaScript oeffnet der Klick
   also das Foto), sehen aber aus wie Flaechen – daher kein Unterstrich. */
.galerie-bild {
  display: block; width: 100%; padding: 0; border: 1px solid var(--line);
  background: var(--surface); cursor: zoom-in; overflow: hidden;
  transition: border-color 0.25s ease;
  text-decoration: none; font: inherit; color: inherit;
}
.galerie-bild img { display: block; width: 100%; height: auto; transition: transform 0.5s ease, opacity 0.25s ease; }
.galerie-bild:hover { border-color: var(--gold); }
.galerie-bild:hover img { transform: scale(1.03); opacity: 0.92; }

/* ---------- Lightbox (Markup wird von site.js erzeugt) ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(6, 5, 4, 0.94);
  display: flex; align-items: center; justify-content: center; padding: 5vh 4vw;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 90vh; object-fit: contain; border: 1px solid var(--line); }
.lightbox-bildunterschrift {
  position: absolute; left: 0; right: 0; bottom: 18px; text-align: center;
  color: var(--muted); font-size: 0.82rem; padding: 0 4vw;
}
.lightbox-bildunterschrift .bild-zaehler {
  color: var(--muted); font-size: 0.76rem;
  letter-spacing: 0.14em; font-variant-numeric: tabular-nums;
}
.lightbox button {
  position: absolute; background: none; border: 1px solid var(--line);
  color: var(--champagne); cursor: pointer; line-height: 1;
  width: 46px; height: 46px; font-size: 1.5rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.lightbox button:hover { border-color: var(--gold); color: var(--gold); }
.lightbox .zu { top: 18px; right: 18px; }
.lightbox .zurueck { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox .vor { right: 18px; top: 50%; transform: translateY(-50%); }

/* ---------- Responsiv ---------- */
@media (max-width: 820px) {
  section.galerie { padding: 70px 0; }
  section.making { padding: 70px 0; }
  /* Kein Spaltenwechsel mehr noetig – die Schiene bleibt eine Reihe und wird
     auf Touch gewischt; die Knoepfe blendet das CSS dort ohnehin aus. */
  .making-schritte { margin-top: 32px; }
  .galerie-raster { columns: 2 150px; column-gap: 10px; }
  .galerie-raster figure { margin-bottom: 10px; }
  .lightbox { padding: 2vh 2vw; }
  .lightbox .zurueck, .lightbox .vor { top: auto; bottom: 60px; transform: none; }
  /* Einspaltig braucht der Block deutlich weniger Luft: 120 px oben und unten
     kosteten auf dem Handy zusammen fast ein Drittel eines Bildschirms, bevor
     ueberhaupt Inhalt kam. */
  section.intro .inner { padding: 56px 28px; gap: 28px; grid-template-columns: 1fr; }
  .kontakt-raster { grid-template-columns: 1fr; gap: 44px; }
  .feld-reihe { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split.bild-rechts .medien { order: 0; }
  .hero .seite { display: none; }
  /* Der weit hochgezogene Verlauf von oben ist fuer breite, flache Fenster
     gedacht. Auf einem hohen, schmalen Display deckt er fast das ganze Foto ab
     und nimmt ihm die Wirkung - hier reicht die kuerzere Fassung, weil der
     Textblock ohnehin tiefer im bereits dunklen Bereich sitzt. Champagner-
     Farbe und Schatten der Eyebrow-Zeile bleiben und tragen den Rest. */
  .hero .foto::after {
    background:
      linear-gradient(to top,
        var(--bg) 0%,
        color-mix(in srgb, var(--bg) 55%, transparent) 34%,
        transparent 62%),
      linear-gradient(to right, color-mix(in srgb, var(--bg) 72%, transparent) 0%, transparent 55%);
  }
    /* Mobil: Shooting-Bereiche als breite Panels mit Text links */
  .spalten { flex-direction: column; height: auto; gap: 16px; }
  .spalte { flex: none; min-height: 280px; }
  .spalte:hover, .spalte:focus-visible { flex: none; }
  .spalte::after {
    background: linear-gradient(to right, rgba(13, 12, 10, 0.92) 15%, rgba(13, 12, 10, 0.45) 55%, rgba(13, 12, 10, 0.15) 100%);
  }
  .spalte .text { max-width: 520px; padding: 26px; }
  /* Mobil klappt nichts auf, also darf der Text wieder frei umbrechen -
     die feste Breite von oben waere hier viel zu schmal. */
  /* width MUSS hier zurueck: die Formel oben rechnet die Breite fuer vier
     nebeneinanderliegende Spalten aus und liefert auf einem 390px-Bildschirm
     rund 13px — der Titel wurde dann buchstabenweise umbrochen. Mobil liegen
     die Panels untereinander und haben Platz. */
  /* Schrift wieder groesser: die Untergrenze im clamp oben existiert nur wegen
     der engen Vierspalten-Ansicht kurz vor diesem Umbruch. Hier liegen die
     Panels breit untereinander und vertragen eine kraeftige Ueberschrift. */
  .spalte h3 { white-space: normal; width: auto; max-width: 36ch; font-size: 1.45rem; }
  /* Mobil ist Platz — dort darf der Titel wieder als ein Satz laufen. */
  .spalte h3 .erstes-wort { display: inline; }
  .spalte p { width: auto; max-width: 36ch; }
  .spalte p, .spalte .mehr { opacity: 1; }
  section.cta .inner { padding: 110px 28px; }
  .seiten-hero { padding-top: 140px; }
  .abschnitt { padding: 64px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .galerie-bild img { transition: none; }
  .galerie-bild:hover img { transform: none; }
  html { scroll-behavior: auto; }
  .btn, .spalte, .spalte p, .spalte .mehr { transition: none; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Dankeseite fuer die Testrunde ----------
   Eigener Baustein statt .split: Dort erzwingt figure.bild ein 4:5-Format mit
   Beschnitt — hier soll das quadratische Portrait vollstaendig sichtbar
   bleiben. Zweispaltig ab 700px, darunter untereinander und mittig. */
.danke {
  display: grid; grid-template-columns: 260px minmax(0, 1fr);
  gap: 46px; align-items: center;
}
.danke-bild { margin: 0; }
.danke-bild img {
  width: 100%; height: auto; display: block; border-radius: 50%;
  border: 1px solid var(--gold-dim);
}
.danke-text p + p { margin-top: 16px; }

/* Die Grussformel traegt die Handschrift der Seite: Serifenschrift, der Name
   in Gold und kursiv wie die Hervorhebungen in den Ueberschriften. */
.danke .gruss { margin-top: 30px; font-size: 1.15rem; line-height: 1.5; color: var(--champagne); }
.danke .gruss span { color: var(--gold); font-style: italic; font-size: 1.5rem; }

.danke-knoepfe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

@media (max-width: 700px) {
  .danke { grid-template-columns: 1fr; gap: 30px; justify-items: center; text-align: center; }
  .danke-bild { max-width: 200px; }
  .danke-knoepfe { justify-content: center; }
}

/* Hinweis auf die selbsttaetige Weiterleitung. Zurueckhaltend gesetzt: Er ist
   eine Nebenauskunft, kein Aufruf — die beiden Knoepfe darueber tragen die
   Handlung. */
.danke-weiter { margin-top: 22px; color: var(--muted); font-size: 0.85rem; }
.danke-weiter[hidden] { display: none; }
.danke-weiter #weiter-zahl { color: var(--gold); font-variant-numeric: tabular-nums; }

/* Als Knopf ausgezeichnet (er tut etwas auf dieser Seite, er fuehrt nirgendwo
   hin), sieht aber aus wie ein Link — ein dritter Kasten neben den beiden
   Knoepfen waere zu viel Gewicht fuer ein Abbrechen. */
.danke-stopp {
  background: none; border: 0; padding: 4px 2px; margin-left: 6px;
  color: var(--champagne); font: inherit; font-size: inherit;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.danke-stopp:hover { color: var(--gold); }
.danke-stopp:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Seiten ohne Kopf- und Fusszeile fuellen die Fensterhoehe, damit der Inhalt
   nicht oben klebt und darunter eine leere Flaeche stehen bleibt. Der Hero
   behaelt seinen Platz oben, der Block darunter setzt sich mittig in den Rest.
   100dvh statt 100vh: Auf dem Handy zaehlt vh die eingeklappte Adressleiste
   mit, die Seite waere dort um deren Hoehe zu lang. */
.rahmenlos { min-height: 100dvh; display: flex; flex-direction: column; }
.rahmenlos .danke { flex: 1; align-content: center; }

/* ---------- Druck ----------
   Browser drucken Hintergrundfarben standardmaessig nicht. Ohne diese Regeln
   landet der helle Fliesstext (#d6cfc2) auf weissem Papier und ist kaum zu
   lesen – besonders aergerlich bei Impressum, Datenschutz und Preisliste,
   also genau den Seiten, die man ausdruckt. */
@media print {
  html, body { background: #fff; color: #000; }
  body::after { display: none; }            /* das Bildkorn */
  html { scroll-behavior: auto; }

  /* Wichtigste Regel hier: Die Scroll-Reveals stehen auf opacity: 0, bis man
     im Fenster zu ihnen gescrollt ist. Ohne diese Zeile druckt der Browser
     alles, was der Besucher noch nicht gesehen hat, als leere Flaeche –
     bei der Preisliste blieb so das ganze erste Blatt weiss. */
  html.js .reveal { opacity: 1 !important; transform: none !important; }

  /* Bedienelemente und Deko haben auf Papier nichts verloren. Die Bilder in
     den Preispaketen ebenfalls nicht: Wer die Preisliste ausdruckt, will die
     Konditionen – mit Fotos schob sich das erste Paket auf Blatt zwei und
     Blatt eins blieb fast leer. */
  /* !important, weil Regeln wie `.hero .scrollhinweis { display: flex }`
     spezifischer sind als diese Liste. */
  header.site, .menue-knopf, .schiene-steuerung, .lightbox, .skip,
  section.cta, .hero .foto, .scrollhinweis,
  .paket-bild { display: none !important; }

  /* Der Hero fuellt am Bildschirm absichtlich das ganze Fenster – auf Papier
     waere das ein fast leeres erstes Blatt. */
  .hero { min-height: 0; }
  .hero .inhalt { padding-bottom: 0; }
  /* Die Schatten sichern am Bildschirm die Lesbarkeit ueber dem Hero-Foto.
     Ohne Foto lassen sie die Buchstaben auf Papier nur ausgefranst wirken. */
  * { text-shadow: none !important; box-shadow: none !important; }

  main#inhalt { padding-top: 0; }
  .seiten-hero, section.stimmen, section.galerie, section.making,
  .abschnitt, .band, .split { padding: 0 0 18pt; border: 0; background: none; }

  /* Alles auf Schwarz, danach die Nebentexte wieder abstufen. Der Holzhammer
     ist hier der richtige Weg: das Stylesheet setzt Farben an Dutzenden
     spezifischeren Stellen (.seiten-hero h1, .paket .preis, .paket ul a …),
     die sonst blass aufs Papier kaemen – und neue kaemen laufend dazu. */
  body * { color: #000 !important; }
  .eyebrow, .leise, .quelle, .unterzeile { color: #444 !important; }
  h1 em, h2 em, h3 em { font-style: italic; }
  h1 { font-size: 20pt; }
  h2 { font-size: 15pt; }
  /* Ohne feste Groesse rechnet clamp(…, 3vw, …) hier gegen die Papierbreite
     und der Merksatz kaeme groesser aufs Blatt als die Ueberschrift darueber. */
  .merksatz { font-size: 14pt; }
  h3 { font-size: 12pt; }
  body { font-size: 10.5pt; line-height: 1.5; }
  /* Am Bildschirm trennen grosse Abstaende die Abschnitte – auf Papier
     kosten sie nur Blaetter. */
  .prosa h2 { margin-top: 16pt; }
  .prosa p + p { margin-top: 6pt; }

  /* Ueberschriften nicht allein am Seitenfuss zuruecklassen. */
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  figure, blockquote, .paket, .making-schritte figure { break-inside: avoid; page-break-inside: avoid; }

  /* Raster im Druck aufloesen: Chrome kann Grid-Zeilen nicht ueber einen
     Seitenumbruch fuehren – zusammen mit break-inside: avoid rutschte die
     erste Paketreihe komplett auf Blatt zwei und Blatt eins blieb leer.
     Untereinander gesetzt liest sich eine Preisliste ohnehin besser. */
  .pakete, .feld-reihe, .making-schritte { display: block; }
  .paket { margin-bottom: 14pt; }

  /* Fliesstext-Links: die Adresse mitdrucken, sonst geht sie auf Papier
     verloren. Bei mailto/tel steht sie schon im sichtbaren Text. */
  .prosa a:not(.btn), .fuss a { color: #000; text-decoration: underline; border: 0; }
  .prosa a:not(.btn)[href^="http"]::after,
  .prosa a:not(.btn)[href^="/"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }

  /* Bilder klein halten: Fotos fressen sonst ganze Seiten und Tinte. */
  img { max-width: 100%; max-height: 9cm; object-fit: contain; }
  .galerie-raster { columns: 3; }

  .fuss { border-top: 1pt solid #999; padding-top: 10pt; font-size: 9pt; }
  .fuss nav { display: none; }              /* die Menuespalten der Fusszeile */

  /* Dieselbe Falle wie bei den Reveals: was zugeklappt ist, fehlte sonst auf
     dem Papier. Auf schmalen Bildschirmen sind die Leistungslisten
     standardmaessig zu – gedruckt gehoeren sie vollstaendig aufs Blatt. */
  .paket-details > ul { display: block !important; }
  .paket-details > summary { display: none !important; }
}