/* ==========================================================================
   Schrift — lokal ausgeliefert, kein Google Fonts.
   Eine einzige variable Datei je Zeichensatz statt sechs statischer: sie
   trägt alle Strichstärken von 100 bis 900 UND die Achse `opsz`. Die sorgt
   dafür, dass eine 88-px-Überschrift enger und schmaler gezeichnet wird als
   ein 16-px-Absatz — dasselbe Prinzip, mit dem Apple SF Pro Display von
   SF Pro Text trennt. Ohne sie wirken große Überschriften luftig und weich.
   unicode-range trennt Latin von Latin-Extended: die zweite Datei lädt der
   Browser nur, wenn ein Zeichen daraus wirklich vorkommt.
   ========================================================================== */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-variable.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ============================================================
   Darius Christ — Immobilienvideo
   Design system: editorial premium, ink on paper, one accent.
   No framework. No build step.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Colour */
  /* Blau statt Terrakotta, kühles statt warmes Weiß. Der Farbton 210° ist aus
     der Referenzgrafik gemessen (Median der Blauflächen), die Helligkeiten
     sind so gewählt, dass jede Text-Grund-Kombination WCAG AA erreicht.
     „Tinte" ist jetzt kein Schwarz mehr, sondern ein sehr dunkles Marineblau —
     damit ist auch der dunkle Teil der Seite blau und nicht neutral. */
  --ink:        #10243B;
  --ink-soft:   #17324F;
  --ink-line:   #23446A;
  --paper:      #FBFCFE;
  --paper-2:    #EDF3FA;
  --paper-3:    #DCE8F5;
  --muted:      #566A7E;
  --muted-dark: #9BB4CC;
  --accent:     #2E6DB4;
  --accent-lit: #8FBBE6;
  --line:       rgba(16, 36, 59, 0.14);
  --line-dark:  rgba(251, 252, 254, 0.16);

  /* Der helle Auftakt: ein Verlauf von Blau nach Weiß, aus der Referenz. */
  --sky-1:      #C4DAF1;
  --sky-2:      #E4EFFA;

  /* Type
     Eine Familie, alle Stärken aus der variablen Datei. Große Grade werden
     enger gesetzt als kleine — Überschriften sollen als Form wirken, nicht
     als aneinandergereihte Buchstaben. */
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.8rem, 6.6vw, 5.4rem);
  --fs-h2:      clamp(2.05rem, 4.6vw, 3.5rem);
  --fs-h3:      clamp(1.18rem, 1.75vw, 1.45rem);
  --fs-lead:    clamp(1.12rem, 1.85vw, 1.45rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9rem;
  --fs-eyebrow: 0.75rem;

  /* Laufweite. Je größer der Grad, desto enger — sonst fallen große Zeilen
     auseinander. Die Werte sind auf Inter abgestimmt, das breiter läuft als
     die Systemschrift von Apple. */
  --track-display: -0.035em;
  --track-h2:      -0.028em;
  --track-h3:      -0.016em;

  /* Space */
  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(5rem, 12.5vh, 10rem);
  --max: 1200px;
  --max-text: 60ch;

  /* Radien. Apple rundet großzügig und verzichtet dafür fast ganz auf
     Rahmenlinien — Form statt Kontur. */
  --radius:    12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --pill: 980px;

  /* Schatten statt Rahmen. Sehr flach, sonst wirkt es nach Bootstrap. */
  --shadow-card: 0 1px 2px rgba(16,36,59,0.05), 0 8px 24px -12px rgba(16,36,59,0.12);
  --shadow-lift: 0 2px 6px rgba(16,36,59,0.06), 0 22px 48px -20px rgba(16,36,59,0.22);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* Muss vor allen Layout-Regeln stehen: eigene display-Werte (z. B. .field { display:grid })
   schlagen sonst das display:none des Browsers für [hidden] und ausgeblendete Blöcke
   werden trotzdem sichtbar. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }

/* Überschriften stehen halbfett. Apples Grade wirken nicht deshalb kräftig,
   weil sie groß sind, sondern weil Größe, Stärke und enge Laufweite
   zusammenkommen — eines davon allein reicht nicht. */
h1, h2, h3, h4 {
  margin: 0; font-weight: 600; letter-spacing: -0.018em;
  /* „Datenschutzerklärung" ist auf einem 320-px-Gerät breiter als die Spalte.
     Deutsch baut solche Wörter ständig, also darf jede Überschrift trennen. */
  overflow-wrap: break-word;
  hyphens: auto;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}
.on-dark :focus-visible { outline-color: var(--accent-lit); }

::selection { background: var(--accent); color: var(--paper); }

/* ---------- 3. Layout primitives ---------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 7vh, 5rem); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.on-dark .rule { background: var(--line-dark); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--paper);
  padding: 0.85rem 1.25rem; font-size: var(--fs-small);
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- 4. Type utilities ---------- */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: 1.045;
  letter-spacing: var(--track-display);
  /* Der Browser darf die optische Größe selbst setzen. Die variable Schrift
     zeichnet daraufhin engere Punzen und schmalere Abstände — der Grund,
     warum große Zeilen bei Apple kompakt wirken statt aufgeblasen. */
  font-optical-sizing: auto;
  text-wrap: balance;
}
.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: var(--track-h2);
  font-optical-sizing: auto;
  text-wrap: balance;
}
.h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: var(--track-h3);
}
.lead {
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.011em;
  color: var(--muted);
  max-width: var(--max-text);
  text-wrap: pretty;
}
.on-dark .lead { color: var(--muted-dark); }

/* Kein gesperrtes Versalband mehr. Apple setzt die Zeile über der Überschrift
   in derselben Schrift, nur kleiner, halbfett und farbig — sie gehört zum
   Titel, statt als eigenes Etikett darüberzuschweben. */
.eyebrow {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.085em;
  font-weight: 600;
  color: var(--accent);
}
.on-dark .eyebrow { color: var(--accent-lit); }

.small { font-size: var(--fs-small); color: var(--muted); }
.on-dark .small { color: var(--muted-dark); }
.mono-num { font-variant-numeric: tabular-nums; }

/* ---------- 5. Header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 100;
  /* Kräftiger weichzeichnen als üblich: die Kopfzeile soll nicht als Balken
     über dem Inhalt liegen, sondern wie Milchglas darauf. */
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.site-head.is-stuck { border-bottom-color: var(--line); }
/* Ohne Weichzeichner wäre die Kopfzeile bei 72 % Deckung durchscheinend und
   der Text darunter läge im Weg. Dann lieber deckend. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-head.is-stuck { background: var(--paper); }
}

.head-inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 56px;
  max-width: var(--max); margin-inline: auto;
  padding-inline: var(--gut);
}

.brand {
  font-family: var(--font-display);
  font-size: 1.0rem;
  font-weight: 600;
  letter-spacing: -0.022em;
  white-space: nowrap;
  margin-right: auto;
}
.brand span { color: var(--muted); }

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--muted);
  position: relative;
  padding-block: 0.25rem;
  transition: color 0.2s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--ink);
  transition: right 0.32s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { right: 0; }

.head-tools { display: flex; align-items: center; gap: 0.6rem; }

.lang {
  display: inline-flex; align-items: center;
  border: 0;
  background: rgba(16,36,59,0.07);
  border-radius: var(--pill);
  padding: 2px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.lang a {
  padding: 0.3rem 0.62rem;
  border-radius: 999px;
  color: var(--muted);
  line-height: 1;
}
.lang a[aria-current="true"] { background: var(--ink); color: var(--paper); }

.burger {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 0;
  border-radius: var(--pill);
  cursor: pointer;
  align-items: center; justify-content: center;
  transition: background 0.2s var(--ease);
}
.burger:hover { background: rgba(16,36,59,0.07); }
.burger i { display: block; width: 17px; height: 1px; background: var(--ink); position: relative; }
.burger i::before, .burger i::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1px; background: var(--ink);
  transition: transform 0.28s var(--ease);
}
.burger i::before { top: -5px; }
.burger i::after { top: 5px; }
.burger[aria-expanded="true"] i { background: transparent; }
.burger[aria-expanded="true"] i::before { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] i::after { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 860px) {
  .burger { display: inline-flex; }
  .nav {
    position: fixed; inset: 56px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gut) 1.5rem;
    transform: translateY(-8px);
    opacity: 0; visibility: hidden;
    transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0.24s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav a { font-size: 1.05rem; padding-block: 0.85rem; border-bottom: 1px solid var(--line); color: var(--ink); }
  .nav a::after { display: none; }
}

/* ---------- 6. Buttons ---------- */
/* Pillenform, keine Kontur, kein Versatz beim Überfahren. Apple lässt Knöpfe
   nur heller oder dunkler werden — Bewegung wäre hier Unruhe. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 48px;
  padding: 0.78rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--pill);
  background: var(--ink); color: var(--paper);
  font-size: 0.945rem; font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-align: center;
  transition: background 0.22s var(--ease), color 0.22s var(--ease),
              border-color 0.22s var(--ease), opacity 0.22s var(--ease);
}
.btn:hover { background: var(--accent); border-color: var(--accent); }
.btn:active { opacity: 0.72; }

.btn--ghost {
  background: transparent; color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 26%, transparent);
}
.btn--ghost:hover { background: rgba(16,36,59,0.07); color: var(--ink); border-color: color-mix(in srgb, var(--ink) 40%, transparent); }

.on-dark .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.on-dark .btn:hover { background: var(--accent-lit); border-color: var(--accent-lit); color: var(--ink); }
.on-dark .btn--ghost { background: transparent; color: var(--paper); border-color: rgba(251,252,254,0.30); }
.on-dark .btn--ghost:hover { background: rgba(251,252,254,0.13); color: var(--paper); border-color: rgba(251,252,254,0.45); }

.btn--block { width: 100%; }

.arrow { transition: transform 0.24s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- 7. Hero ---------- */
.hero {
  padding-top: clamp(3rem, 7vh, 5.5rem);
  padding-bottom: clamp(2.5rem, 5vh, 4rem);
}
/* Der Hero steht gestapelt statt zweispaltig: Überschrift oben über die volle
   Breite, das Bildmotiv darunter über die ganze Spalte. Zweispaltig musste die
   Zeile in eine 590-px-Spalte passen und brach fünfmal um — bei 92 px sieht
   das nach Restplatz aus. Über die volle Breite sind es drei Zeilen, und das
   Bild bekommt die Fläche, die es als eigentliches Produkt verdient. */
.hero-copy { max-width: 100%; }
.hero-stage { margin-top: clamp(2rem, 3.6vw, 3rem); }

.hero .display { margin-block: 1.15rem 1.6rem; max-width: 24ch; }
/* Kein Kursiv: die variable Schrift bringt keinen echten kursiven Schnitt mit,
   der Browser würde den aufrechten schräg stellen. Bei 92 px sieht man das
   sofort. Die Farbe allein setzt das Wort deutlich genug ab. */
.hero .display em {
  font-style: normal;
  color: var(--accent);
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.75rem; }

/* Die drei Zahlen sind das erste Versprechen der Seite. Sie standen als
   Fußnote unter dem Hero; jetzt stehen sie als Zahlen da. */
.factbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, max-content));
  gap: 1.5rem 3rem;
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.factbar li { display: grid; gap: 0.15rem; font-size: var(--fs-small); }
.factbar b {
  display: block;
  color: var(--ink); font-weight: 600;
  font-size: 1.6rem; line-height: 1.1;
  letter-spacing: -0.028em;
  font-variant-numeric: tabular-nums;
  font-optical-sizing: auto;
}

/* ---------- 8. Video slot ---------- */
.slot {
  position: relative;
  background: var(--ink-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
}
.slot--16x9 { aspect-ratio: 16 / 9; }
.slot--9x16 { aspect-ratio: 9 / 16; }
.slot--1x1  { aspect-ratio: 1 / 1; }

.slot video { width: 100%; height: 100%; object-fit: cover; background: var(--ink); }

/* placeholder state */
.slot__ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(0.9rem, 2vw, 1.4rem);
  color: var(--paper);
  background:
    linear-gradient(135deg, rgba(143,187,230,0.10), transparent 55%),
    repeating-linear-gradient(45deg, rgba(251,252,254,0.05) 0 1px, transparent 1px 9px),
    var(--ink-soft);
}
.slot__ph::before {
  content: "";
  position: absolute; inset: clamp(0.7rem, 1.6vw, 1.1rem);
  border: 1px dashed rgba(251, 252, 254, 0.24);
  border-radius: var(--radius);
  pointer-events: none;
}
.slot__tag {
  position: relative;
  align-self: flex-start;
  font-size: 0.62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--accent-lit);
  border: 1px solid rgba(143,187,230,0.45);
  border-radius: 999px;
  padding: 0.28rem 0.65rem;
  background: rgba(16,36,59,0.5);
}
.slot__meta { position: relative; }
.slot__meta strong { display: block; font-weight: 500; font-size: 0.98rem; letter-spacing: -0.005em; }
.slot__meta span { display: block; font-size: 0.78rem; color: var(--muted-dark); margin-top: 0.15rem; }

.slot__play {
  position: absolute; top: 50%; left: 50%;
  width: 58px; height: 58px; margin: -29px 0 0 -29px;
  border-radius: 50%;
  border: 1px solid rgba(251,252,254,0.32);
  display: grid; place-items: center;
  color: var(--paper);
}
.slot__play svg { width: 15px; height: 15px; margin-left: 2px; }

/* ---------- 9. Work grid ---------- */
.work-grid { display: grid; gap: clamp(0.75rem, 1.6vw, 1.15rem); margin-top: 2.75rem; }
.work-grid--verticals { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .work-grid--verticals { grid-template-columns: repeat(4, 1fr); } }
.work-grid--wide { grid-template-columns: 1fr; }
@media (min-width: 720px) { .work-grid--wide { grid-template-columns: repeat(2, 1fr); } }

.notice {
  display: flex; gap: 0.85rem; align-items: flex-start;
  margin-top: 2.25rem;
  padding: 1.2rem 1.45rem;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  font-size: var(--fs-small);
  max-width: 68ch;
}
.notice svg, .notice > :first-child:not(p) { color: var(--accent); }

/* Dieselbe Zurückhaltung für die Kennzeichnung unter der Vergleichsstrecke:
   keine Fläche, kein Symbol, nur eine gedämpfte Zeile. */
.notice--quiet {
  /* .notice ist ein Flexcontainer für Symbol + Text. Ohne diese Zeile wird
     jedes <em> im Fließtext zu einem eigenen Flexelement und reisst Lücken
     in die Zeile. */
  display: block;
  background: none;
  padding: 0;
  margin-top: 1.6rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 80ch;
}
.notice--quiet b { font-weight: 500; color: var(--muted); }
.on-dark .notice--quiet { background: none; color: var(--muted-dark); }
.on-dark .notice { background: rgba(251,252,254,0.07); }
.notice b { font-weight: 600; }

/* ---------- 10. Dark band ---------- */
.band {
  background: var(--ink);
  color: var(--paper);
}
.band .h2, .band .display { color: var(--paper); }

/* ---------- 11. Cards / lists ---------- */
.cards { display: grid; gap: clamp(1rem, 2.2vw, 1.4rem); margin-top: clamp(2.5rem, 4.5vw, 3.5rem); }
@media (min-width: 760px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px) { .cards--2 { grid-template-columns: repeat(2, 1fr); } }

/* Kachel statt Kasten: keine Kontur, eine ruhige Fläche, großzügig gerundet.
   Der Rahmen war der auffälligste Rest von „Website-Baukasten" auf der Seite. */
.card {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 0;
  border-radius: var(--radius-xl);
  background: var(--paper-2);
  display: flex; flex-direction: column; gap: 0.7rem;
  transition: background 0.3s var(--ease), box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.card:hover {
  background: color-mix(in srgb, var(--paper-2) 55%, var(--paper));
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
}
.on-dark .card { background: rgba(251,252,254,0.06); }
.on-dark .card:hover { background: rgba(251,252,254,0.10); box-shadow: none; }
.card p { color: var(--muted); font-size: 0.945rem; }
.on-dark .card p { color: var(--muted-dark); }

.card__num {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  line-height: 1;
}
.on-dark .card__num { color: var(--accent-lit); }

/* checklist */
.checks { display: grid; gap: 1.35rem; margin-top: 2.5rem; }
@media (min-width: 760px) { .checks { grid-template-columns: repeat(2, 1fr); column-gap: 3rem; } }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 0.9rem; align-items: start; }
.checks svg { width: 16px; height: 16px; margin-top: 6px; color: var(--accent-lit); flex: none; }
.checks strong { display: block; font-weight: 500; margin-bottom: 0.2rem; }
.checks p { font-size: 0.92rem; color: var(--muted-dark); }

/* ---------- 12. Split (about) ---------- */
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 0.85fr 1.15fr; } }

.portrait {
  /* Deckel auf der Breite: ein Porträt auf einer Personal Site soll ein
     Porträt bleiben und nicht die halbe Seite einnehmen. */
  max-width: 340px;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, var(--paper-3), var(--paper-2));
  border: 0;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: grid; place-items: center;
  text-align: center;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait:not(:has(img)) { padding: 1.5rem; }
.portrait span { font-size: 0.8rem; color: var(--muted); letter-spacing: 0.04em; }

.prose > * + * { margin-top: 1.15rem; }
.prose p { color: var(--muted); max-width: var(--max-text); }
.on-dark .prose p { color: var(--muted-dark); }
.prose .ph { color: var(--accent); }

/* Arbeitsnotizen an mich selbst. Sie stehen absichtlich sichtbar auf der Seite,
   damit sie vor dem Livegang nicht vergessen werden. `python3 pruefen.py` meldet
   jede einzelne. Zum Livegang werden die Absätze im HTML gelöscht. */
.ph-note { color: var(--accent-lit); }
.ph-note::before { content: "\26A0\FE0E\00A0"; }

/* ---------- 13. Pricing ---------- */
.price-grid { display: grid; gap: clamp(1rem, 2vw, 1.25rem); margin-top: clamp(2.5rem, 4.5vw, 3.5rem); }
@media (min-width: 820px) { .price-grid { grid-template-columns: repeat(3, 1fr); } }

.price {
  border: 0;
  border-radius: var(--radius-xl);
  padding: clamp(1.7rem, 3vw, 2.4rem);
  display: flex; flex-direction: column;
  background: rgba(251,252,254,0.06);
  transition: background 0.3s var(--ease);
}
.price:hover { background: rgba(251,252,254,0.09); }
/* Die hervorgehobene Karte trägt eine Kontur statt einer Farbfläche — sonst
   konkurrieren zwei Flächen um dieselbe Aufmerksamkeit. */
.price--lead { box-shadow: inset 0 0 0 1px var(--accent-lit); background: rgba(143,187,230,0.08); }
.price--lead:hover { background: rgba(143,187,230,0.12); }
.price__label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.085em; color: var(--muted-dark); font-weight: 600; }
.price__fig {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.6vw, 3.5rem);
  font-weight: 600;
  letter-spacing: var(--track-h2);
  font-optical-sizing: auto;
  line-height: 1; margin-top: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.price__fig sub { font-family: var(--font-body); font-size: 0.42em; vertical-align: baseline; color: var(--muted-dark); font-weight: 400; letter-spacing: 0; }
.price ul { margin-top: 1.4rem; display: grid; gap: 0.55rem; font-size: 0.9rem; color: var(--muted-dark); }
.price ul li { display: grid; grid-template-columns: 14px 1fr; gap: 0.6rem; }
.price ul svg { width: 11px; height: 11px; margin-top: 7px; color: var(--accent-lit); }
.price .btn { margin-top: auto; }
.price__spacer { margin-top: 1.75rem; }

/* ---------- 14. FAQ ---------- */
.faq { margin-top: 2.5rem; border-top: 1px solid var(--line); max-width: 76ch; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding: 1.4rem 0;
  font-size: 1.08rem; font-weight: 500;
  letter-spacing: -0.016em;
  transition: color 0.2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 300; line-height: 1;
  color: var(--accent);
  flex: none;
  transition: transform 0.3s var(--ease);
}
.faq summary:hover { color: var(--accent); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding-bottom: 1.4rem; color: var(--muted); font-size: 0.95rem; max-width: 62ch; }
.faq .a > * + * { margin-top: 0.75rem; }

/* ---------- 15. Form ---------- */
.contact-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 940px) { .contact-grid { grid-template-columns: 0.9fr 1.1fr; } }

.form { display: grid; gap: 1.05rem; }
.field { display: grid; gap: 0.4rem; }
.field > label { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.02em; }
.field .req { color: var(--accent-lit); }
/* Gefüllte Felder ohne Kontur. Der Rahmen kommt erst beim Hineinklicken —
   dann als klarer Ring, nicht als zaghafte Linie. */
.field input, .field textarea {
  width: 100%;
  background: rgba(251,252,254,0.08);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  min-height: 50px;
  color: var(--paper);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea { min-height: 116px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(154,149,140,0.75); }
.field input:hover, .field textarea:hover { background: rgba(251,252,254,0.12); }
.field input:focus, .field textarea:focus {
  background: rgba(251,252,254,0.12);
  border-color: var(--accent-lit);
  box-shadow: 0 0 0 3px rgba(143,187,230,0.18);
  outline: none;
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--accent-lit); }
.field .err { font-size: 0.78rem; color: var(--accent-lit); min-height: 0; }

.row2 { display: grid; gap: 1.05rem; }
@media (min-width: 560px) { .row2 { grid-template-columns: 1fr 1fr; } }

.consent { display: grid; grid-template-columns: 20px 1fr; gap: 0.75rem; align-items: start; }
.consent input { width: 18px; height: 18px; min-height: 0; margin-top: 4px; accent-color: var(--accent); }
.consent label { font-size: 0.82rem; color: var(--muted-dark); line-height: 1.5; }
.consent a { color: var(--paper); text-decoration: underline; text-underline-offset: 2px; }

.form-status {
  font-size: 0.88rem;
  padding: 0.9rem 1.15rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: rgba(251,252,254,0.09);
}
.form-status[hidden] { display: none; }
.form-status.is-ok { border-color: var(--accent-lit); }

.contact-direct { display: grid; gap: 1.5rem; align-content: start; }
.contact-direct dl { display: grid; gap: 1.1rem; }
.contact-direct dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted-dark); font-weight: 600; }
.contact-direct dd { margin: 0.3rem 0 0; font-size: 1.05rem; }
.contact-direct dd a { border-bottom: 1px solid rgba(251,252,254,0.28); padding-bottom: 1px; }
.contact-direct dd a:hover { border-bottom-color: var(--accent-lit); color: var(--accent-lit); }

/* ---------- 16. Footer ---------- */
.site-foot {
  border-top: 1px solid var(--line);
  padding-block: 2.5rem 3rem;
  font-size: var(--fs-small);
  color: var(--muted);
}
.foot-inner { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
.foot-inner nav { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-left: auto; }
.foot-inner a { border-bottom: 1px solid transparent; }
.foot-inner a:hover { border-bottom-color: var(--muted); color: var(--ink); }

/* ---------- 17. Legal pages ---------- */
.legal { padding-block: clamp(3rem, 8vh, 5.5rem); max-width: 74ch; }
.legal h1 {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 6vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: var(--track-h2);
  font-optical-sizing: auto;
}
.legal h2 { font-size: 1.2rem; font-weight: 600; margin-top: 2.75rem; letter-spacing: -0.016em; }
.legal h3 { font-size: 1.02rem; font-weight: 600; margin-top: 1.7rem; letter-spacing: -0.01em; }
.legal p, .legal li { color: var(--muted); font-size: 0.975rem; }
.legal p + p, .legal h2 + p, .legal h3 + p { margin-top: 0.7rem; }
.legal ul { list-style: disc; padding-left: 1.25rem; margin-top: 0.7rem; display: grid; gap: 0.4rem; }
.legal address { font-style: normal; margin-top: 0.7rem; color: var(--ink); }
.legal a { color: var(--ink); border-bottom: 1px solid var(--line); }
.legal a:hover { border-bottom-color: var(--accent); color: var(--accent); }
.legal .ph { color: var(--accent); }
.legal-back { display: inline-flex; gap: 0.5rem; margin-bottom: 2rem; font-size: 0.85rem; color: var(--muted); }

/* ---------- 18. Reveal animation ---------- */
/* Länger und weiter als üblich. Ein kurzer Sprung wirkt nervös; erst ab etwa
   einer Dreiviertelsekunde liest sich die Bewegung als Ankommen. */
.js .reveal { opacity: 0; transform: translateY(28px); }
/* Ohne .js — also ohne JavaScript oder wenn site.js nicht lädt — greift die
   Regel oben nicht und der Inhalt steht sofort da, statt unsichtbar zu bleiben. */
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
/* Nebeneinanderliegende Karten kommen nacheinander statt im Block. */
.cards > .reveal:nth-child(2), .price-grid > .reveal:nth-child(2) { transition-delay: 0.08s; }
.cards > .reveal:nth-child(3), .price-grid > .reveal:nth-child(3) { transition-delay: 0.16s; }
.cards > .reveal:nth-child(4), .price-grid > .reveal:nth-child(4) { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .btn, .card, .nav a::after { transition: none; }
}

/* ---------- 19. Sticky mobile CTA ----------
   Mobile is where the conversion gap sits. One thumb-reachable
   action, always available, hidden once the form is on screen. */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none;
  gap: 0.55rem;
  padding: 0.6rem var(--gut) calc(0.6rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 93%, transparent);
  backdrop-filter: blur(14px) saturate(130%);
  border-top: 1px solid var(--line);
  transform: translateY(105%);
  transition: transform 0.3s var(--ease);
}
.mobile-cta.is-shown { transform: none; }
.mobile-cta .btn { flex: 1 1 auto; min-height: 46px; padding-inline: 0.9rem; font-size: 0.85rem; }
.mobile-cta .btn--call { flex: 0 0 auto; width: 52px; padding-inline: 0; }
.mobile-cta .btn--call svg { width: 17px; height: 17px; }

@media (max-width: 760px) {
  .mobile-cta { display: flex; }
  body { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-cta { transition: none; }
}

/* ---------- 20. Optional form fields ---------- */
.more-fields { border: 0; padding: 0; margin: 0; }
.more-fields > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--muted-dark);
  padding: 0.5rem 0;
  min-height: 40px;
}
.more-fields > summary::-webkit-details-marker { display: none; }
.more-fields > summary::before {
  content: "+";
  display: grid; place-items: center;
  width: 18px; height: 18px;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  font-size: 0.8rem; line-height: 1;
  transition: transform 0.25s var(--ease);
}
.more-fields[open] > summary::before { content: "–"; }
.more-fields > summary:hover { color: var(--paper); }
.more-fields__body { display: grid; gap: 1.05rem; padding-top: 0.9rem; }

/* ---------- 21. Price sub-line and legal notes ---------- */
.price__vat {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--muted-dark);
  line-height: 1.45;
}
.b2b-note {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border: 0;
  background: rgba(251,252,254,0.06);
  border-radius: var(--radius-lg);
  font-size: 0.82rem;
  color: var(--muted-dark);
  max-width: 70ch;
}
.on-dark .b2b-note strong { color: var(--paper); }

/* response-time promise under a CTA */
.cta-note {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: 0.9rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.on-dark .cta-note { color: var(--muted-dark); }
.cta-note .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.on-dark .cta-note .dot { background: var(--accent-lit); }

/* ---------- 22. Print ---------- */
@media print {
  .site-head, .hero-cta, .form, .burger { display: none; }
  body { background: #fff; color: #000; }
}

/* ---------- 23. Vier Leistungen: Raster, Leistungskarten, Auswahlfeld ---------- */

/* Anker landen nicht mehr unter der klebenden Kopfzeile.
   Wichtig, seit jede Leistung ihre eigene Sprungmarke hat (#social-media …). */
[id] { scroll-margin-top: 76px; }

/* Vier gleichwertige Karten: 2 × 2 ab Tablet, 4 nebeneinander ab Desktop */
@media (min-width: 620px) { .cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards--4 { grid-template-columns: repeat(4, 1fr); } }

/* Leistungskarte: Aufzählung plus Preiszeile, die unten bündig sitzt */
.card--service { gap: 0.55rem; }
.card--service .h3 { margin-top: 0.15rem; }

.card__list {
  margin-top: 0.35rem;
  display: grid;
  gap: 0.42rem;
  font-size: 0.885rem;
  color: var(--muted);
}
/* Punkt absolut setzen statt als Rasterzelle: sonst wird jedes Element im
   Listenpunkt (z. B. ein <b> plus nachfolgender Text) zu einer eigenen Zelle
   und der Text bricht nach jedem Wort um. */
.card__list li { position: relative; padding-left: 0.95rem; }
.card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.52em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.on-dark .card__list { color: var(--muted-dark); }
.on-dark .card__list li::before { background: var(--accent-lit); }

.card__price {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
}
.card--service .card__price { color: var(--muted); }

/* Zweite Liste in derselben Karte: das Werkzeug, nicht das Ergebnis. Durch
   die Trennlinie und den kleineren Grad liest sie sich als Fußnote zur
   Leistung, nicht als weitere Leistung. */
.card__list--tools {
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
}
.card__list--tools li::before { background: var(--muted); width: 4px; height: 4px; }
.on-dark .card__list--tools { border-top-color: var(--line-dark); }
.on-dark .card__list--tools li::before { background: var(--muted-dark); }
.card__price b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.on-dark .card__price { border-top-color: var(--line-dark); }
.on-dark .card__price b { color: var(--paper); }

/* Vier Preiskarten: 2 × 2. Vier nebeneinander würde die Aufzählungen zerdrücken. */
@media (min-width: 760px) { .price-grid--4 { grid-template-columns: repeat(2, 1fr); } }

/* Auswahlfeld im Kontaktformular — gleiche Optik wie die Eingabefelder */
.field select {
  width: 100%;
  background: rgba(251,252,254,0.08);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.8rem 2.4rem 0.8rem 0.9rem;
  min-height: 48px;
  color: var(--paper);
  font: inherit;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%239BB4CC' stroke-width='1.4'%3E%3Cpath d='M1 1.5L6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  background-size: 11px 8px;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.field select:hover { background-color: rgba(251,252,254,0.12); }
.field select:focus {
  background-color: rgba(251,252,254,0.12);
  border-color: var(--accent-lit);
  box-shadow: 0 0 0 3px rgba(143,187,230,0.18);
  outline: none;
}
.field select[aria-invalid="true"] { border-color: var(--accent-lit); }
/* Das Aufklappmenü erbt die Systemfarben, sonst ist der Text weiß auf weiß. */
.field select option { color: #10243B; background: #FBFCFE; }

/* „optional“-Kennzeichnung an einem Feldnamen */
.field .opt {
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-dark);
  margin-left: 0.35rem;
}

/* Kopfzeile: der Markenname ist mit drei Leistungen länger geworden.
   Er darf Navigation und Sprachwahl nicht aus der Zeile drücken. */
.brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1060px) { .brand span { display: none; } }
@media (min-width: 861px) and (max-width: 1010px) {
  .nav { gap: 1.05rem; }
  .nav a { font-size: 0.83rem; }
}

/* ---------- 24. Breite Leistungskarte (Bild, Video und Visualisierung) ----------
   Die visuelle Leistung bündelt neun Positionen. Als normale Karte im
   Zweierraster wäre sie doppelt so hoch wie ihre Nachbarin; über die volle
   Breite passt die Liste in zwei Spalten und das Raster bleibt ruhig. */
.card--wide { margin-top: 2.75rem; }
@media (min-width: 760px) {
  .card--wide .card__list {
    grid-template-columns: 1fr 1fr;
    column-gap: 2.4rem;
  }
}
.card--wide .card__list b { color: var(--ink); font-weight: 600; }

/* ---------- 25. Hero-Karte statt Showreel ----------
   Solange es keine eigenen Arbeiten zu zeigen gibt, steht rechts im Hero
   keine leere Videofläche, sondern das, was ein Auftrag konkret bedeutet. */
.hero-card {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  display: grid;
  gap: 1.4rem;
  align-content: start;
}
.hero-card__label {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--accent-lit);
}
.hero-card__list { display: grid; gap: 1.15rem; }
.hero-card__list > div { display: grid; gap: 0.3rem; }
.hero-card__list dt {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.15;
  color: var(--paper);
}
.hero-card__list dd { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--muted-dark); }
.hero-card__note {
  margin: 0;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line-dark);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--accent-lit);
}

/* ---------- 26. Kontaktformular ---------- */

/* Fehlerübersicht: erscheint erst beim Absenden, führt per Klick zum Feld.
   Ohne sie muss man auf dem Handy die Fehler suchen. */
.form-summary {
  padding: 1rem 1.15rem;
  border: 1px solid var(--accent-lit);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: rgba(143,187,230,0.09);
  font-size: 0.88rem;
}
.form-summary[hidden] { display: none; }
.form-summary strong { display: block; margin-bottom: 0.5rem; font-weight: 600; }
.form-summary ul { display: grid; gap: 0.3rem; }
.form-summary a { color: var(--accent-lit); text-decoration: underline; text-underline-offset: 2px; }
.form-summary:focus-visible { outline: 2px solid var(--accent-lit); outline-offset: 3px; }

.field__hint { font-size: 0.79rem; line-height: 1.5; color: var(--muted-dark); margin-top: 0.1rem; }
.field__hint a { color: var(--paper); text-decoration: underline; text-underline-offset: 2px; }

/* Dateiauswahl: die native Eingabe liegt unsichtbar über der ganzen Fläche,
   damit Klick und Ziehen beide funktionieren und die Tastatur trotzdem greift. */
.dropzone {
  position: relative;
  display: grid;
  gap: 0.3rem;
  place-items: center;
  text-align: center;
  padding: 1.5rem 1rem;
  border: 1px dashed var(--line-dark);
  border-radius: var(--radius);
  background: rgba(251,252,254,0.04);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.dropzone input[type="file"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.dropzone__text { font-size: 0.9rem; color: var(--paper); }
.dropzone__text b { font-weight: 600; border-bottom: 1px solid var(--accent-lit); }
.dropzone__hint { font-size: 0.76rem; color: var(--muted-dark); }
.dropzone:hover, .dropzone.is-over { border-color: var(--accent-lit); background: rgba(143,187,230,0.07); }
.dropzone input[type="file"]:focus-visible + .dropzone__text { outline: 2px solid var(--accent-lit); outline-offset: 4px; }

.filelist { display: grid; gap: 0.4rem; margin-top: 0.65rem; }
.filelist:empty { margin-top: 0; }
.filelist li {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  font-size: 0.82rem;
  background: rgba(251,252,254,0.05);
}
.filelist__name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filelist__size { flex: none; color: var(--muted-dark); font-variant-numeric: tabular-nums; }
.filelist__drop {
  flex: none;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--muted-dark);
  font-size: 1rem; line-height: 1; cursor: pointer;
}
.filelist__drop:hover { background: rgba(251,252,254,0.11); color: var(--paper); }

/* Spamfalle — für Menschen und Screenreader unsichtbar, für Bots ein Feld. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Bestätigung nach dem Absenden */
.form-done {
  display: grid;
  gap: 1rem;
  justify-items: start;
  padding: clamp(1.8rem, 3.2vw, 2.6rem);
  border: 0;
  border-radius: var(--radius-xl);
  background: rgba(251,252,254,0.08);
}
.form-done[hidden] { display: none; }
.form-done__mark {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
}
.form-done__mark svg { width: 20px; height: 20px; }
.form-done h3 { color: var(--paper); }
.form-done p { color: var(--muted-dark); font-size: 0.95rem; max-width: 46ch; }
.form-done a { color: var(--paper); text-decoration: underline; text-underline-offset: 2px; }
.form-done:focus-visible { outline: 2px solid var(--accent-lit); outline-offset: 4px; }

.btn[disabled] { opacity: 0.55; pointer-events: none; }

/* ---------- 27. Vorher/Nachher-Vergleich ----------
   Ein Bild liegt über dem anderen und wird beschnitten. Der Regler dafür ist
   ein echtes <input type="range">, unsichtbar über die ganze Fläche gelegt:
   Ziehen mit Maus und Finger funktioniert, Pfeiltasten ebenfalls, und
   Screenreader bekommen ein bedienbares Element statt einer Attrappe. */
.ba { margin: 0; }
.ba + .ba-grid { margin-top: clamp(1rem, 2vw, 1.4rem); }

.ba__stage {
  --pos: 50%;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 0;
  background: var(--paper-2);
  margin-top: 2.75rem;
}
.ba-grid .ba__stage { margin-top: 0; }

.ba__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
/* Beschnitt statt Breitenrechnerei — das Bild darunter bleibt unverzerrt. */
.ba__clip {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.ba__line {
  position: absolute; top: 0; bottom: 0;
  left: var(--pos);
  width: 2px;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(16,36,59,0.24);
  pointer-events: none;
}
.ba__grip {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(16,36,59,0.16);
}
.ba__grip svg { width: 20px; height: 14px; }

.ba__tag {
  position: absolute; top: 0.85rem;
  z-index: 2;
  padding: 0.28rem 0.6rem;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(16,36,59,0.74);
  color: var(--paper);
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.ba__tag--a { left: 0.85rem; }
.ba__tag--b { right: 0.85rem; background: var(--accent); }

.ba__range {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none; appearance: none;
  background: transparent;
  z-index: 3;
}
.ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; }
.ba__range::-moz-range-thumb { width: 44px; height: 100%; border: 0; opacity: 0; }
.ba__stage:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }

.ba__cap {
  margin-top: 0.9rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
}
.ba__cap b { color: var(--ink); font-weight: 600; }

.ba-grid { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); margin-top: 2.5rem; }
@media (min-width: 820px) { .ba-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 820px) { .ba-grid .ba__cap { max-width: none; } }

@media (prefers-reduced-motion: reduce) { .ba__line { transition: none; } }

/* Das führende Beispiel liegt flacher als die beiden kleinen darunter:
   4:3 über die volle Breite wäre auf dem Desktop fast einen Bildschirm hoch. */
@media (min-width: 820px) { .ba--lead .ba__stage { aspect-ratio: 16 / 10; } }

/* ---------- 28. Heller Auftakt ----------
   Der Auftakt war bis 03.09.2026 ein dunkler Tinteblock. Jetzt trägt er einen
   Verlauf von Blau nach Weiß nach dem Vorbild der Referenzgrafik: oben satt,
   unten geht er ins Papier der Seite über, sodass keine Kante entsteht.
   Die Klasse `on-dark` ist deshalb aus dem Markup des Auftakts entfernt — sie
   steht nur noch auf den Preisen und dem Kontakt, die dunkel bleiben. */
.opening {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(177deg,
              var(--sky-1) 0%,
              var(--sky-2) 32%,
              var(--paper) 66%);
  color: var(--ink);
}
/* Zusätzliches Licht hinter dem Bildmotiv, damit die Mitte nicht flach wird. */
.opening::before {
  content: "";
  position: absolute;
  top: -18%; left: 50%; transform: translateX(-50%);
  width: min(1500px, 130%); height: 120%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.55), rgba(255,255,255,0));
  pointer-events: none;
  z-index: 0;
}
/* Feines Korn. Auf Hell darf es nur ein Zehntel so kräftig sein wie auf
   Dunkel, sonst sieht die Fläche schmutzig statt lebendig aus. */
.opening::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}
.opening > * { position: relative; z-index: 1; }
.opening__end { display: block; height: 1px; }
.opening .hero { padding-top: clamp(2.6rem, 5.5vh, 4.25rem); }

/* Das Bildmotiv steht jetzt auf Hell: ein schwarzer Schlagschatten wirkte dort
   schmutzig, also ein kühler und deutlich flacherer. */
.opening .hero-media {
  background: var(--paper-2);
  box-shadow: 0 1px 3px rgba(16,36,59,0.10), 0 26px 60px -24px rgba(16,36,59,0.34);
}
.opening .hero-media__foot { background: var(--paper-2); border-top-color: var(--line); }
.opening .hero-media__foot p { color: var(--muted); }
.opening .hero-media__foot b { color: var(--ink); }

/* Überschriften und Zahlen auf dunklem Grund */
.on-dark .display, .on-dark .h2, .on-dark .h3 { color: var(--paper); }
.on-dark .display em { color: var(--accent-lit); }
/* Auf Tinte braucht die Beschriftung das hellere Grau — mit --muted käme sie
   auf 3,3:1 und fiele unter die Lesbarkeitsschwelle. */
.on-dark .factbar { border-top-color: var(--line-dark); color: var(--muted-dark); }
.on-dark .factbar b { color: var(--paper); }

/* ---------- 29. Bildmotiv im Hero ---------- */
.hero-media {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 0;
  background: var(--ink-soft);
  /* Zwei Schatten: ein kurzer für die Kante, ein sehr weiter für die Tiefe.
     Ein einzelner Schatten sieht immer nach aufgeklebt aus. */
  box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 40px 90px -20px rgba(0,0,0,0.65);
}
.hero-media .ba { margin: 0; }
.hero-media .ba__stage { margin-top: 0; border: 0; border-radius: 0; }
/* Über die volle Breite wäre 4:3 fast 900 px hoch — das Bild schöbe alles
   andere aus dem ersten Bildschirm. Breiter beschneiden, und dabei etwas
   Kopfhöhe behalten: der Stuck läuft über die Nahtstelle hinweg weiter und
   beweist damit, dass links und rechts wirklich dasselbe Zimmer ist. Weiter
   unten beschnitten wäre mehr Sofa zu sehen, aber der Beweis wäre weg. */
@media (min-width: 700px) {
  .hero-media .ba__stage { aspect-ratio: 16 / 9; }
  .hero-media .ba__img { object-position: 50% 45%; }
}

.hero-media__foot {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 0.85rem;
  border-top: 1px solid var(--line);
}
.hero-media__me {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  /* Der Kreis zeigt 80 % der Bildhöhe. Bei 8 % sitzt die Gesichtsmitte
     (40,9 % der Bildhöhe) genau in der Mitte des Kreises. */
  object-fit: cover; object-position: 50% 8%;
}
/* Bewusst zurückgenommen: eine Bildunterschrift, keine Ansage. Sie muss
   wahrnehmbar bleiben — Artikel 50 KI-VO und § 5 UWG verlangen das —, aber
   wahrnehmbar heißt lesbar, nicht laut. 12 px, gedämpft, direkt unter dem
   Bild, wohin eine Bildunterschrift gehört. Kontrast bleibt über 4,5:1. */
.hero-media__foot p {
  margin: 0;
  font-size: 0.75rem; line-height: 1.45;
  color: var(--muted);
}
.hero-media__foot b { color: var(--muted); font-weight: 500; }

/* Der Vergleich steht jetzt auch auf dunklem Grund */
.on-dark .ba__stage { border-color: var(--line-dark); background: var(--ink-soft); }
.on-dark .ba__cap { color: var(--muted-dark); }
.on-dark .ba__cap b { color: var(--paper); }

/* ---------- 30. Kopfzeile ----------
   Seit der Auftakt hell ist, gibt es nur noch zwei Zustände: oben transparent
   über dem Verlauf, ab dem ersten Scrollen Milchglas. Die frühere dritte
   Variante für dunklen Grund ist samt der Messung in site.js entfallen. */
.site-head:not(.is-stuck) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}