/* ════════════════════════════════════════════════════════════════
   CHRISTIENCO STUDIO — Cinematic Dark
   Konzept: konzept/07-REDESIGN.md
   Tiefes Kino-Dunkel, warmes Scheinwerferlicht, große Bilder,
   weiche Bewegung. Archivo (Display) + Instrument Sans (Body).
   ════════════════════════════════════════════════════════════════ */

/* ── Fonts (selbst gehostet, DSGVO) ─────────────────────────────── */
@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/Archivo-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../assets/fonts/InstrumentSans-wght.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../assets/fonts/InstrumentSerif-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────────────────── */
:root {
  /* Browser-Eigenteile (Scrollbalken, Caret, Formular-Innereien) folgen dem
     dunklen Entwurf. Absicherung für die Checkbox weiter unten (.dsgvo input). */
  color-scheme: dark;

  --nacht: #0B0B0E;          /* Grundfläche */
  --buehne: #131318;          /* Karten / Flächen */
  --buehne-hell: #1B1B22;     /* gehobene Flächen */
  --licht: #F4F2ED;           /* Text, warmweiß */
  --licht-gedimmt: #A6A2AC;   /* Sekundärtext */
  --gold: #F0A83D;            /* Akzent: Scheinwerfer */
  --gold-tief: #E8722A;
  --verlauf: linear-gradient(115deg, #F5C34F 0%, #F0A83D 45%, #E8722A 100%);
  --linie: rgba(244, 242, 237, 0.09);

  --radius: 22px;
  --radius-klein: 14px;
  --schatten: 0 24px 60px -24px rgba(0, 0, 0, 0.65);

  --ease: cubic-bezier(0.22, 0.8, 0.3, 1);
  --shell-max: 1200px;
  --shell-pad: clamp(1.1rem, 4vw, 2.5rem);
}

/* ── Reset & Basis ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  background:
    radial-gradient(900px 500px at 85% -5%, rgba(240, 168, 61, 0.10), transparent 65%),
    radial-gradient(1100px 700px at -10% 108%, rgba(90, 70, 160, 0.10), transparent 60%),
    var(--nacht);
  color: var(--licht);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
section { scroll-margin-top: 5.5rem; }
/* Ankerziele sind nicht nur <section> (leistungen.html springt auf <article id="…">).
   scroll-margin wirkt ausschließlich beim Scrollen, nie auf das Layout. */
[id] { scroll-margin-top: 5.5rem; }
/* WCAG 2.2 SC 2.4.11: die fixierte Nav darf den Tastaturfokus nicht verdecken,
   wenn der Browser ein fokussiertes Element ins Bild scrollt. */
a, button, input, select, textarea, summary, [tabindex] { scroll-margin-top: 5.5rem; }
::selection { background: var(--gold); color: var(--nacht); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.shell { max-width: var(--shell-max); margin-inline: auto; padding-inline: var(--shell-pad); }

/* ── Zugänglichkeit: nur für Screenreader / nur bei Tastaturfokus ──
   Für Maus- und Touch-Nutzer bleiben diese Elemente dauerhaft unsichtbar. */
.visuell-versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Skip-Link: erscheint erst, wenn er den Tastaturfokus bekommt — im Gold-Button-Stil */
.visuell-versteckt:focus,
.visuell-versteckt:focus-visible {
  position: fixed;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 300;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.75em 1.5em;
  overflow: visible;
  clip-path: none;
  border-radius: 999px;
  background: var(--verlauf);
  color: #17120A;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 10px 30px -12px rgba(240, 168, 61, 0.55);
}

/* Filmkorn — hauchzart, gibt dem Dunkel Textur */
.korn {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 200; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Typo-Rollen ────────────────────────────────────────────────── */
.kicker {
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.titel {
  font-family: "Archivo", sans-serif;
  font-weight: 750;
  font-size: clamp(1.9rem, 4.2vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: clamp(1.5rem, 4vh, 2.8rem);
  text-wrap: balance;
}
.glanz {
  background: var(--verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 0.75em 1.5em;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease),
              background-color 250ms var(--ease), border-color 250ms var(--ease);
}
.btn--voll {
  background: var(--verlauf);
  color: #17120A;
  box-shadow: 0 10px 30px -12px rgba(240, 168, 61, 0.55);
}
.btn--voll:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgba(240, 168, 61, 0.7); }
.btn--geist {
  border-color: rgba(244, 242, 237, 0.25);
  color: var(--licht);
  background: rgba(244, 242, 237, 0.03);
}
.btn--geist:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.btn--gross { padding: 0.95em 1.9em; font-size: 1rem; }
/* Aufklapp-Schalter der Mobil-Kurzfassung (wird per JS eingehängt).
   Grundzustand ausgeblendet: Er existiert im Markup auf allen Breiten,
   sichtbar wird er ausschließlich im Mobil-Block unterhalb 961 px.
   Die Regel betrifft nur dieses neue Element, die Desktop-Darstellung
   der bestehenden Inhalte bleibt davon unberührt. */
.mobil-mehr { display: none; }
/* YouTube-Marke in Buttons: einfarbig in der Buttonschriftfarbe (currentColor),
   die Aussparung nimmt den hellen Goldton auf. Skaliert ueber em mit der
   Schriftgroesse, damit sie in .btn und .btn--gross gleich sitzt.
   Die width/height-Attribute am SVG sichern die Groesse, falls CSS fehlt. */
.btn-yt { width: 1.35em; height: auto; flex-shrink: 0; }

/* ── Navigation ─────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.nav.fest {
  background: rgba(11, 11, 14, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--linie);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: 0.9rem;
}
.nav__marke {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
}
.nav__marke em { font-style: normal; color: var(--gold); }
.nav__links {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-left: auto;
}
.nav__links a {
  text-decoration: none;
  font-size: 0.95rem;
  color: var(--licht-gedimmt);
  transition: color 200ms var(--ease);
}
.nav__links a:hover { color: var(--licht); }
.nav__burger { display: none; }
.mobilmenue { display: none; }

/* ── Hero ───────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero__medien { position: absolute; inset: 0; }
.hero__medien img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 16% 32%;
  filter: saturate(1.05) contrast(1.04) brightness(0.92);
  animation: kenburns 24s var(--ease) infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1) translateX(0); }
  to   { transform: scale(1.09) translateX(-1.5%); }
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--nacht) 4%, rgba(11, 11, 14, 0.72) 32%, rgba(11, 11, 14, 0.25) 60%, rgba(11, 11, 14, 0.45) 100%),
    radial-gradient(120% 90% at 50% 100%, transparent 55%, rgba(11, 11, 14, 0.5) 100%);
}
.hero__inhalt {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(6rem, 14vh, 9rem) clamp(3.5rem, 9vh, 6rem);
}
.hero__titel {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: 1.4rem;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.45);
}
.hero__sub {
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: rgba(244, 242, 237, 0.88);
  margin-bottom: 2rem;
}
.hero__aktionen { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.hero__blende {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--linie);
}

/* ── Logo-Marquee ───────────────────────────────────────────────── */
.marken { padding-block: clamp(2.5rem, 6vh, 4rem) clamp(1.5rem, 4vh, 2.5rem); }
.marken__label {
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--licht-gedimmt);
  margin-bottom: 1.4rem;
}
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee__spur {
  display: flex;
  gap: 1rem;
  width: max-content;
  padding-block: 0.2rem;
  animation: lauf 46s linear infinite;
}
.marquee:hover .marquee__spur { animation-play-state: paused; }
@keyframes lauf { to { transform: translateX(-50%); } }
.marke-chip {
  display: grid;
  place-items: center;
  width: 148px;
  height: 76px;
  padding: 1rem 1.3rem;
  background: #F6F4EF;
  border-radius: var(--radius-klein);
  flex-shrink: 0;
}
.marke-chip { position: relative; }
.marke-chip img { position: absolute; inset: 1rem 1.3rem; width: calc(100% - 2.6rem); height: calc(100% - 2rem); object-fit: contain; }
.marken__hinweis {
  font-size: 0.82rem;
  color: var(--licht-gedimmt);
  margin-top: 1.4rem;
}
/* Pause-Schalter für die Logo-Laufschrift: visuell versteckt, erscheint NUR bei
   Tastaturfokus. Fixiert positioniert, damit ihn das overflow:hidden der
   Laufschrift nicht abschneidet und nichts im Layout verrutscht. */
.marquee__pause {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  background: none;
  color: inherit;
}
.marquee__pause:focus-visible {
  position: fixed;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 300;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.6em 1.3em;
  overflow: visible;
  clip-path: none;
  border-radius: 999px;
  background: var(--verlauf);
  color: #17120A;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 10px 30px -12px rgba(240, 168, 61, 0.55);
}

/* ── Leistungen ─────────────────────────────────────────────────── */
.leistungen { padding-block: clamp(4rem, 10vh, 7rem); }
.leistungen__raster {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.1rem;
}
.leistung {
  position: relative;
  grid-column: span 2;
  min-height: 300px;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  background: var(--buehne);
  box-shadow: var(--schatten);
  transition: transform 350ms var(--ease), box-shadow 350ms var(--ease);
}
.leistung:nth-child(1), .leistung:nth-child(2) { grid-column: span 3; min-height: 340px; }
.leistung:hover { transform: translateY(-6px); box-shadow: 0 34px 70px -28px rgba(0, 0, 0, 0.8); }
.leistung__bild {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.04) contrast(1.03);
  transition: transform 600ms var(--ease);
}
.leistung:hover .leistung__bild { transform: scale(1.05); }
.leistung::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 8, 11, 0.94) 14%, rgba(8, 8, 11, 0.42) 52%, rgba(8, 8, 11, 0.12));
}
.leistung__inhalt { position: relative; z-index: 2; padding: clamp(1.2rem, 3vw, 1.8rem); }
.leistung h3 {
  font-family: "Archivo", sans-serif;
  font-weight: 750;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  margin-bottom: 0.4rem;
}
.leistung p {
  font-size: 0.95rem;
  color: rgba(244, 242, 237, 0.82);
  max-width: 34ch;
  margin-bottom: 0.8rem;
}
.leistung__pfeil {
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--gold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.leistung:hover .leistung__pfeil { text-decoration: underline; text-underline-offset: 4px; }

/* ── Arbeiten / Galerie ─────────────────────────────────────────── */
.arbeiten { padding-block: clamp(3rem, 8vh, 5.5rem); }
.galerie {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}
.werk {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten);
  aspect-ratio: 4 / 3;
}
.werk--breit { grid-column: span 2; aspect-ratio: 16 / 9; }
/* füllt neben .werk--breit die volle Zeilenhöhe (Bild wird beschnitten statt Lücke).
   img absolut, damit hohe Porträtbilder die Grid-Zeile nicht aufblähen */
.werk--voll { aspect-ratio: auto; }
.werk--voll img { position: absolute; inset: 0; width: 100%; height: 100%; }
.werk img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.04) contrast(1.03);
  transition: transform 600ms var(--ease);
}
.werk:hover img { transform: scale(1.05); }
.werk figcaption { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; }
/* Porträtbilder in 4:3-Zellen: Köpfe statt Bildmitte zeigen */
.werk--kopf img { object-position: 50% 22%; }

/* Hover-Info (Arbeiten-Galerie): kurzer Situationstext blendet weich ein */
.galerie--details .werk::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11, 11, 14, 0.92) 28%, rgba(11, 11, 14, 0.3) 62%, transparent);
  opacity: 0;
  transition: opacity 300ms var(--ease);
  pointer-events: none;
}
.galerie--details .werk:hover::after { opacity: 1; }
.werk__info {
  position: absolute; left: 1rem; right: 1rem; bottom: 3.5rem;
  z-index: 2;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--licht);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
  pointer-events: none;
}
.galerie--details .werk:hover .werk__info { opacity: 1; transform: none; }
/* Touch-Geräte kennen kein Hover. Statt die Situationstexte dort ganz zu
   verbergen (zwölf Sätze Inhalt, die auf dem Handy sonst fehlen), stehen
   sie dauerhaft — Abdunkelung und Text ohne Übergang direkt sichtbar.
   Etwas kleiner gesetzt, damit sie im schmalen Bild nicht dominieren. */
@media (hover: none) {
  .galerie--details .werk::after { opacity: 1; transition: none; }
  .galerie--details .werk__info {
    opacity: 1;
    transform: none;
    transition: none;
    font-size: 0.84rem;
    line-height: 1.45;
  }
}
.chip {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.45em 0.95em;
  border-radius: 999px;
  color: var(--licht);
  background: rgba(11, 11, 14, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(244, 242, 237, 0.14);
}
.werk--mehr {
  grid-column: 1 / -1;
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  text-align: left;
  text-decoration: none;
  padding: clamp(1.2rem, 3vh, 1.8rem);
  background: var(--buehne);
  border: 1px solid var(--linie);
  transition: border-color 300ms var(--ease), background-color 300ms var(--ease), transform 300ms var(--ease);
}
/* YouTube-Wortbildmarke: unverändert in Originalfarbe, so verlangen es die
   Markenrichtlinien. Die Größe orientiert sich am vorherigen Goldkreis. */
.werk--mehr .yt-marke {
  flex-shrink: 0;
  display: block;
  width: 3.4rem;
  height: auto;
}
.werk--mehr p { font-weight: 600; line-height: 1.45; }
.werk--mehr:hover { border-color: var(--gold); background: var(--buehne-hell); transform: translateY(-4px); }

/* ── Zahlen ─────────────────────────────────────────────────────── */
.zahlen { padding-block: clamp(2.5rem, 7vh, 4.5rem); }
/* Gleicher Abstandswert als Klasse statt als Inline-Style (ueber.html),
   damit die Mobil-Regel ihn überhaupt überschreiben kann. */
.abschnitt { padding-block: clamp(2.5rem, 7vh, 4.5rem); }
.zahlen__reihe {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  text-align: center;
  border-block: 1px solid var(--linie);
  padding-block: clamp(1.8rem, 5vh, 3rem);
}
.zahl strong {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 1;
  display: block;
  background: var(--verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.zahl span {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.92rem;
  color: var(--licht-gedimmt);
  line-height: 1.5;
}
/* Landung: kurzer Scheinwerfer-Moment, wenn der Zähler sein Ziel erreicht */
.zahl strong.gelandet { animation: zahl-landung 850ms var(--ease); }
@keyframes zahl-landung {
  0%   { transform: scale(1);    filter: brightness(1)    drop-shadow(0 0 0 rgba(240, 168, 61, 0)); }
  30%  { transform: scale(1.09); filter: brightness(1.35) drop-shadow(0 8px 26px rgba(240, 168, 61, 0.55)); }
  100% { transform: scale(1);    filter: brightness(1)    drop-shadow(0 0 0 rgba(240, 168, 61, 0)); }
}
@media (prefers-reduced-motion: reduce) {
  .zahl strong.gelandet { animation: none; }
}

/* ── Referenzen ─────────────────────────────────────────────────── */
.referenzen { padding-block: clamp(3.5rem, 9vh, 6rem); }
.referenzen__raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}
.tv-karte {
  background: var(--buehne);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1.4rem;
  text-align: center;
  transition: transform 300ms var(--ease), border-color 300ms var(--ease);
}
.tv-karte:hover { transform: translateY(-4px); border-color: rgba(240, 168, 61, 0.4); }
.tv-karte__logo {
  display: grid;
  place-items: center;
  height: 110px;
  background: #F6F4EF;
  border-radius: var(--radius-klein);
  padding: 1rem 1.4rem;
  margin-bottom: 0.9rem;
}
.tv-karte__logo { position: relative; }
.tv-karte__logo img { position: absolute; inset: 1rem 1.4rem; width: calc(100% - 2.8rem); height: calc(100% - 2rem); object-fit: contain; }
.tv-karte p {
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--licht-gedimmt);
}
.yt-karte {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.2rem);
  background:
    radial-gradient(500px 200px at 8% 0%, rgba(240, 168, 61, 0.14), transparent 70%),
    var(--buehne);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 4vw, 2.4rem);
}
.yt-karte__logo { flex-shrink: 0; width: clamp(84px, 10vw, 120px); }
.yt-karte h3 {
  font-family: "Archivo", sans-serif;
  font-weight: 750;
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  margin-bottom: 0.5rem;
}
.yt-karte p { color: var(--licht-gedimmt); max-width: 62ch; margin-bottom: 1.1rem; }
.yt-karte p a { color: var(--licht); text-decoration-color: var(--gold); text-underline-offset: 3px; }
.yt-karte p a:hover { color: var(--gold); }

/* ── Über ───────────────────────────────────────────────────────── */
.ueber { padding-block: clamp(3.5rem, 9vh, 6rem); }
.ueber__raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.8rem, 5vw, 4rem);
  align-items: center;
}
.ueber__bild {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten);
  max-height: 640px;
}
.ueber__bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.04) contrast(1.03);
}
.ueber__text p { color: var(--licht-gedimmt); max-width: 58ch; margin-bottom: 1rem; }
.zitat {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.4;
  color: var(--licht);
  border-left: 3px solid var(--gold);
  padding-left: 1.2rem;
  margin-block: 1.6rem;
}
.ueber__socials { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }
.chip-link {
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.45em 1em;
  border-radius: 999px;
  border: 1px solid var(--linie);
  color: var(--licht-gedimmt);
  transition: color 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}
.chip-link:hover { color: var(--gold); border-color: var(--gold); transform: translateY(-2px); }

/* ── Ablauf ─────────────────────────────────────────────────────── */
.ablauf { padding-block: clamp(3.5rem, 9vh, 6rem); }
.ablauf__reihe {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
  counter-reset: schritt;
}
.schritt {
  background: var(--buehne);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: transform 300ms var(--ease), border-color 300ms var(--ease);
}
.schritt:hover { transform: translateY(-4px); border-color: rgba(240, 168, 61, 0.4); }
.schritt__nr {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 2rem;
  background: var(--verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
  margin-bottom: 0.6rem;
}
.schritt h3 { font-family: "Archivo", sans-serif; font-weight: 700; font-size: 1.1rem; margin-bottom: 0.4rem; }
.schritt p { font-size: 0.93rem; color: var(--licht-gedimmt); }

/* ── Partner-Grid ───────────────────────────────────────────────── */
.partner { padding-block: clamp(3rem, 8vh, 5rem); }
.partner__raster {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.9rem;
}
.partner-chip {
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 3;
  padding: 1rem 1.2rem;
  background: #F6F4EF;
  border-radius: var(--radius-klein);
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease);
}
.partner-chip:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.7); }
.partner-chip { position: relative; }
.partner-chip img { position: absolute; inset: 1rem 1.2rem; width: calc(100% - 2.4rem); height: calc(100% - 2rem); object-fit: contain; }
.partner-chip--dunkel { background: #17171D; border: 1px solid var(--linie); }
.partner-chip--text {
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #17120A;
  font-size: 0.95rem;
}

/* ── Kontakt ────────────────────────────────────────────────────── */
.kontakt { padding-block: clamp(3rem, 8vh, 6rem); }
.kontakt__karte {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 4rem);
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(240, 168, 61, 0.12), transparent 70%),
    var(--buehne);
  border: 1px solid var(--linie);
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(1.6rem, 5vw, 3.2rem);
  box-shadow: var(--schatten);
}
.kontakt__intro > p { color: var(--licht-gedimmt); max-width: 44ch; margin-bottom: 1.4rem; }
.kontakt__intro strong { color: var(--licht); }

.feld { margin-bottom: 1.1rem; }
.feld--halb {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}
.feld label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--licht-gedimmt);
  margin-bottom: 0.35rem;
}
.feld input, .feld textarea {
  width: 100%;
  background: var(--nacht);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  color: var(--licht);
  font: inherit;
  padding: 0.7em 0.9em;
  transition: border-color 200ms var(--ease);
}
.feld input:focus, .feld textarea:focus { outline: none; border-color: var(--gold); }
/* Das outline:none oben hat auch den globalen :focus-visible-Ring ausgehebelt.
   Bei Tastaturfokus kommt er hier zurück — gleicher Gold-Ring wie überall.
   Ohne Fokus ändert sich nichts. */
.feld input:focus-visible, .feld textarea:focus-visible, .feld select:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.feld ::placeholder { color: rgba(166, 162, 172, 0.6); }
.budget {
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  padding: 0.9rem 1rem 1rem;
  margin-bottom: 1.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.budget legend {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--licht-gedimmt);
  padding-inline: 0.4em;
}
.budget label { cursor: pointer; }
.budget input { position: absolute; opacity: 0; pointer-events: none; }
.budget span {
  display: inline-block;
  font-size: 0.87rem;
  font-weight: 600;
  padding: 0.45em 1em;
  border-radius: 999px;
  border: 1px solid var(--linie);
  color: var(--licht-gedimmt);
  transition: all 200ms var(--ease);
}
.budget input:checked + span {
  background: var(--verlauf);
  color: #17120A;
  border-color: transparent;
}
.budget input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.dsgvo { display: flex; align-items: baseline; gap: 0.7rem; margin-bottom: 1.3rem; }
/* color-scheme: light hält die Checkbox exakt so, wie sie bisher aussah — mit
   dem dunklen Schema würde der Browser das leere Kästchen dunkel füllen. */
.dsgvo input { accent-color: var(--gold); width: 16px; height: 16px; flex-shrink: 0; translate: 0 2px; color-scheme: light; }
.dsgvo label { font-size: 0.85rem; color: var(--licht-gedimmt); }
.dsgvo a { color: var(--licht); }
.formular__fehler { color: #FF7B6B; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.9rem; }
.formular__danke { color: var(--gold); font-size: 0.95rem; font-weight: 600; margin-bottom: 0.9rem; }
/* Der mailto-Hinweis ist kein Erfolg, sondern eine Handlungsaufforderung: Er
   traegt deshalb nicht das Gold der Danke-Meldung, sondern bleibt sachlich und
   nennt einen Ausweg, falls sich kein Mailprogramm oeffnet. Mehrzeilig, also
   mit Zeilenhoehe statt der einzeiligen Optik der beiden Meldungen darueber. */
.formular__hinweis {
  color: var(--licht);
  font-size: 0.9rem;
  line-height: 1.55;
  margin-bottom: 0.9rem;
  padding: 0.85rem 1rem;
  background: rgba(240, 168, 61, 0.06);
  border-left: 2px solid var(--gold);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
}
.formular__hinweis a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

/* ── Footer ─────────────────────────────────────────────────────── */
.fuss { border-top: 1px solid var(--linie); padding-block: clamp(2.2rem, 6vh, 3.5rem) 1.4rem; }
.fuss__raster {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.fuss__claim { color: var(--licht-gedimmt); margin-top: 0.8rem; font-size: 0.95rem; }
.fuss__links, .fuss__social { display: grid; gap: 0.5rem; justify-items: start; }
.fuss__links a, .fuss__social a {
  text-decoration: none;
  font-size: 0.95rem;
  color: var(--licht-gedimmt);
  transition: color 200ms var(--ease);
}
.fuss__links a:hover, .fuss__social a:hover { color: var(--gold); }
.fuss__credit {
  margin-top: clamp(1.8rem, 5vh, 2.8rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--linie);
  font-size: 0.82rem;
  color: var(--licht-gedimmt);
}
/* Urheberzeile: Der Link zur Agentur soll als Link erkennbar sein, ohne die
   dezente Fusszeile zu dominieren. Deshalb unterstrichen statt farbig — Gold
   erst beim Hover, wie bei den uebrigen Footer-Links. */
.fuss__urheber {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(244, 242, 237, 0.35);
  text-underline-offset: 3px;
  transition: color 250ms var(--ease), text-decoration-color 250ms var(--ease);
}
.fuss__urheber:hover,
.fuss__urheber:focus-visible {
  color: var(--gold);
  text-decoration-color: var(--gold);
}

/* ── Reveals: weiche Fades ──────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  transition-delay: var(--verz, 0ms);
}
.reveal.sichtbar { opacity: 1; transform: none; }

/* ════════════════════════════════ MOBILE ═══════════════════════ */
@media (max-width: 960px) {
  .leistungen__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .leistung, .leistung:nth-child(1), .leistung:nth-child(2) { grid-column: span 1; min-height: 260px; }
  .leistung:nth-child(5) { grid-column: span 2; }
  .galerie { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .werk--breit { grid-column: span 2; }
  /* BUGFIX: .werk--voll hat wegen aspect-ratio:auto und absolut gesetztem Bild
     keine eigene Höhe — auf Desktop stammt sie allein aus der Rasterzeile, die
     das danebenliegende .werk--breit aufspannt. Hier spannt .werk--breit über
     beide Spalten und liegt damit in einer eigenen Zeile; .werk--voll steht dann
     teils allein in seiner Zeile und fällt auf 0 px zusammen (Bild unsichtbar).
     Es bekommt darum dasselbe Seitenverhältnis wie seine Rastergeschwister.
     Gilt ausschließlich unterhalb 961 px, Desktop bleibt unberührt. */
  .werk--voll { aspect-ratio: 4 / 3; }
  .referenzen__raster { grid-template-columns: 1fr; }
  .yt-karte { flex-direction: column; align-items: flex-start; }
  .ueber__raster { grid-template-columns: 1fr; }
  .ueber__bild { max-width: 420px; }
  .ablauf__reihe { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .partner__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kontakt__karte { grid-template-columns: 1fr; }
  .fuss__raster { grid-template-columns: 1fr; }

  .nav__links { display: none; }

  /* CTA bleibt auf dem Handy sichtbar, statt zwei Taps im Burger-Menü zu
     verlangen. Kompakter gesetzt, damit Wortmarke, Button und Burger in
     eine 360-px-Zeile passen. Farbe, Verlauf und Radius unverändert. */
  /* Der Flex-Abstand der Navigationszeile ist am Desktop für fünf Menüpunkte
     gedacht. Auf dem Handy stehen dort nur Wortmarke, Button und Burger —
     16 px doppelter Abstand kosten dann genau den Seitenrand rechts. */
  .nav__inner { gap: 0.5rem; }

  /* Die Wortmarke braucht in voller Größe 206 px. Zusammen mit Button und
     Burger passt das unter 412 px nicht mehr in die Zeile: Flexbox schrumpft
     dann ihren Kasten, der Text läuft heraus und landet unter dem Button.
     Deshalb hier eine Spur kompakter — und flex-shrink aus, damit im
     Fehlerfall nichts mehr überlappen kann. */
  .nav__marke { font-size: 0.98rem; gap: 0.45rem; flex-shrink: 0; }
  .nav__marke img { width: 36px; height: auto; }
  .nav__cta {
    display: inline-flex;
    margin-left: auto;
    padding: 0.5em 0.7em;
    font-size: 0.65rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .nav { background: rgba(11, 11, 14, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .nav__burger {
    display: grid;
    gap: 6px;
    margin-left: 0.45rem;
    background: none;
    border: none;
    padding: 0.6rem 0.2rem;
  }
  .nav__burger span {
    width: 26px; height: 2px;
    background: var(--licht);
    border-radius: 2px;
    transition: transform 250ms var(--ease), opacity 250ms var(--ease);
  }
  .nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  /* Unter 375 px reicht die Zeile nicht für Wortmarke, Button und Burger.
     Dort bleibt der CTA im Menü, wie bisher. Betrifft nur sehr alte
     Geräte und schmale Android-Modelle. */
  @media (max-width: 374px) {
    .nav__cta { display: none; }
  }

  .mobilmenue {
    display: grid;
    gap: 0.4rem;
    padding: 0.8rem var(--shell-pad) 1.4rem;
    background: rgba(11, 11, 14, 0.96);
    border-bottom: 1px solid var(--linie);
  }
  .mobilmenue[hidden] { display: none; }
  .mobilmenue a {
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    padding-block: 0.55rem;
  }
  .mobilmenue .btn { justify-self: start; margin-top: 0.6rem; }

  /* ── Vertikaler Rhythmus ──────────────────────────────────────────
     Die Sektions-Innenabstände stammen aus clamp(min, Xvh, max). Der
     vh-Anteil ist auf dem Handy praktisch derselbe wie am Desktop
     (Bildschirmhöhe ist ähnlich, nur die Breite schrumpft) — dadurch
     standen auf 390 px dieselben 72 bis 90 px Luft wie auf 1440 px,
     zwischen zwei Sektionen also bis zu 162 px am Stück.
     Hier fest auf rund 62 bis 66 Prozent des Desktop-Werts gesetzt,
     die Abstufung der Sektionen zueinander bleibt erhalten.
     Wirkt ausschließlich unterhalb 961 px. */
  .marken     { padding-block: 2.25rem 1.5rem; }  /* 54/36 → 36/24 */
  .leistungen { padding-block: 3.5rem; }          /* 90 → 56 */
  .arbeiten   { padding-block: 2.875rem; }        /* 72 → 46 */
  .zahlen     { padding-block: 2.5rem; }          /* 63 → 40 */
  .referenzen { padding-block: 3.25rem; }         /* 81 → 52 */
  .ueber      { padding-block: 3.25rem; }         /* 81 → 52 */
  .ablauf     { padding-block: 3.25rem; }         /* 81 → 52 */
  .partner    { padding-block: 2.875rem; }        /* 72 → 46 */
  .kontakt    { padding-block: 2.875rem; }        /* 72 → 46 */

  /* Ablauf-Karten: auf dem Handy sehr viel Innenabstand für zwei Zeilen
     Text. Innenabstand und der Freiraum um die große Ziffer werden
     reduziert; Größe, Schnitt und Goldverlauf der Ziffer bleiben. */
  .schritt { padding: 1.2rem; }
  .schritt__nr { line-height: 1.3; margin-bottom: 0.4rem; }

  /* WCAG 2.2 SC 2.5.8 (Zielgröße, Minimum 24 × 24 px): der Link „X“ ist
     nur so breit wie sein einzelner Buchstabe (10,5 px). Die Zelle ist
     linksbündig (justify-items: start), der Link hat weder Rahmen noch
     Fläche noch Unterstreichung — eine Mindestbreite vergrößert daher
     allein die Trefferfläche nach rechts, der Text bleibt exakt an
     seiner Stelle. Höhe liegt mit 25,8 px bereits über dem Minimum. */
  .fuss__social a { min-width: 1.75rem; }
}
/* Zwischenbereich: schmaler als die volle Shell (1200 px), aber noch kein Mobil-
   Raster. Hier standen 6 Partner-Logos bzw. 4 Ablauf-Karten nebeneinander und
   wurden sehr klein bzw. sehr schmal. Angepasst wird ausschließlich die
   Spaltenzahl dieser beiden Raster; unter 961 px und über 1200 px greift nichts
   davon. */
@media (min-width: 961px) and (max-width: 1200px) {
  .partner__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ablauf__reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .leistungen__raster { grid-template-columns: 1fr; }
  .leistung, .leistung:nth-child(5) { grid-column: span 1; }
  .galerie { grid-template-columns: 1fr; }
  .werk--breit { grid-column: span 1; }
  .zahlen__reihe { grid-template-columns: 1fr; gap: 1.8rem; }
  .ablauf__reihe { grid-template-columns: 1fr; }
  .partner__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .feld--halb { grid-template-columns: 1fr; }
}

/* ═══════════════════════ REDUCED MOTION ════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__medien img { animation: none; }
  .marquee__spur { animation: none; flex-wrap: wrap; width: auto; }
  .marquee { mask-image: none; -webkit-mask-image: none; }
  *, *::before, *::after { transition-duration: 1ms !important; }
}

/* ════════════════════════ UNTERSEITEN ══════════════════════════ */
.seite { padding-block: clamp(7rem, 16vh, 10rem) clamp(3rem, 8vh, 5rem); }
.seite__intro {
  color: var(--licht-gedimmt);
  max-width: 58ch;
  font-size: clamp(1.05rem, 1.4vw, 1.15rem);
}
.mehr-zeile { margin-top: 1.8rem; }

/* Leistungs-Detailblöcke */
.leistung-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(2.5rem, 7vh, 4.5rem);
  border-top: 1px solid var(--linie);
}
.leistung-detail__bild {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten);
  aspect-ratio: 4 / 3;
}
.leistung-detail__bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.04) contrast(1.03);
}
.leistung-detail--flip .leistung-detail__bild { order: 2; }
.leistung-detail h2 {
  font-family: "Archivo", sans-serif;
  font-weight: 750;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  margin-bottom: 0.8rem;
}
.leistung-detail p { color: var(--licht-gedimmt); margin-bottom: 0.9rem; }
.leistung-detail ul {
  list-style: none;
  display: grid;
  gap: 0.45rem;
  margin-block: 1.1rem 1.5rem;
}
.leistung-detail li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.95rem;
  color: var(--licht-gedimmt);
}
.leistung-detail li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
}

/* FAQ */
.faq { max-width: 800px; }
.faq details {
  background: var(--buehne);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  margin-bottom: 0.8rem;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-weight: 600;
  padding: 1rem 1.3rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold); font-weight: 700; font-size: 1.2rem; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 1.3rem 1.2rem; color: var(--licht-gedimmt); font-size: 0.97rem; }

/* CTA-Band */
.cta-band {
  text-align: center;
  background:
    radial-gradient(500px 220px at 50% 0%, rgba(240, 168, 61, 0.12), transparent 70%),
    var(--buehne);
  border: 1px solid var(--linie);
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(2.2rem, 7vh, 4rem) clamp(1.4rem, 5vw, 3rem);
  margin-top: clamp(2.5rem, 7vh, 4.5rem);
}
.cta-band .titel { margin-bottom: 1rem; }
.cta-band p { color: var(--licht-gedimmt); max-width: 48ch; margin: 0 auto 1.6rem; }

@media (max-width: 960px) {
  .leistung-detail { grid-template-columns: 1fr; }
  .leistung-detail--flip .leistung-detail__bild { order: 0; }

  /* Vertikaler Rhythmus der Unterseiten — gleiche Ursache wie oben:
     padding-block: clamp(2.5rem, 7vh, 4.5rem) ergibt auf einem 844 px
     hohen Handy 59 px, also praktisch denselben Wert wie am Desktop.
     Diese Regeln stehen bewusst HIER und nicht im früheren Mobil-Block:
     die Basisdefinitionen der Unterseiten folgen erst danach im Dokument
     und würden ihn sonst bei gleicher Spezifität überschreiben. */
  .leistung-detail { padding-block: 2.4rem; }     /* 59 → 38 */
  .leistung-detail:first-of-type { margin-top: 2.1rem; }
  .cta-band        { padding-block: 2.4rem; margin-top: 2.4rem; }
  .faq             { margin-top: 2.75rem; }       /* 68 → 44 */
  .galerie         { margin-top: 2.1rem; }        /* 51 → 34 */
  .abschnitt       { padding-block: 2.4rem; }     /* 59 → 38 */
}

/* ── Rechtstexte (Impressum, Datenschutz) ──────────────────────────
   Bisher trugen diese Seiten nur einen Platzhaltersatz und kamen ohne
   eigene Regeln aus. Mit echten Inhalten brauchen sie eine lesbare
   Textspalte, Zwischenüberschriften und einen Abstand zur fixierten
   Navigation. Bewusst schmal gesetzt: Rechtstexte werden gelesen,
   nicht überflogen. */
.rechtstext {
  padding-block: clamp(6.5rem, 14vh, 9rem) clamp(3rem, 8vh, 5rem);
  max-width: 60ch;
  min-height: 70vh;
}
.rechtstext h2 {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-top: 3.2rem;
  margin-bottom: 0.7rem;
  text-wrap: balance;
}
/* Die Datenschutzerklaerung laeuft ueber 2.000 Woerter: ohne sichtbare Zaesur
   verschwimmen die Hauptabschnitte mit ihren Unterpunkten. Die Haarlinie
   markiert den Kapitelwechsel — beim ersten h2 waere sie doppelt gemoppelt,
   dort trennt schon die Seitenueberschrift. */
.rechtstext h2:not(:first-of-type) {
  padding-top: 2.2rem;
  border-top: 1px solid var(--linie);
}
.rechtstext p {
  color: var(--licht-gedimmt);
  margin-bottom: 1rem;
}
.rechtstext a:not(.btn) {
  color: var(--licht);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.rechtstext a:not(.btn):hover { color: var(--gold); }
.rechtstext__zurueck { margin-top: 3rem; }

/* Die Datenschutzerklärung schachtelt vier Ebenen tief. Damit die Gliederung
   ohne Nummerierung lesbar bleibt, trägt jede Ebene einen eigenen Abstand:
   der Sprung nach oben ist stets größer als der nach unten, so klebt eine
   Überschrift sichtbar an ihrem Absatz statt zwischen zwei Blöcken zu schweben. */
.rechtstext h3 {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  margin-top: 2rem;
  margin-bottom: 0.55rem;
  text-wrap: balance;
}
.rechtstext h4 {
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--gold);
  margin-top: 1.5rem;
  margin-bottom: 0.4rem;
  text-wrap: balance;
}
.rechtstext ul {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.rechtstext li {
  position: relative;
  color: var(--licht-gedimmt);
  padding-left: 1.1rem;
  margin-bottom: 0.6rem;
}
.rechtstext li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

/* Art. 21 Abs. 4 DSGVO verlangt für den Widerspruchshinweis eine hervorgehobene,
   von den übrigen Informationen getrennte Darstellung. Der Kasten leistet das
   ohne Versalien, die den Fließtext unlesbar machen. */
.rechtstext__hervor {
  margin: 1.2rem 0 1rem;
  padding: 1.2rem 1.3rem 0.4rem;
  background: rgba(240, 168, 61, 0.05);
  border-left: 2px solid var(--gold);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
}
.rechtstext__hervor p { color: var(--licht); }

/* Rechtstexte werden erfahrungsgemaess ausgedruckt oder als PDF abgelegt —
   dann darf keine Ueberschrift allein am Seitenfuss zurueckbleiben. */
.rechtstext h2,
.rechtstext h3,
.rechtstext h4 { break-after: avoid; }

/* ── Mobil-Kurzfassung ──────────────────────────────────────────────
   Auf dem Handy stapeln Bilder einspaltig; die Startseite kam so auf
   14 Bildschirmhöhen bei nur 479 Wörtern. Statt Inhalte zu löschen wird
   der Überhang eingeklappt und per Knopf nachgeladen: Alles bleibt im
   Markup, also auch für die mobil-first arbeitende Indexierung sichtbar.
   Dieser Block steht bewusst am Dateiende, damit er die Basisregeln der
   Raster bei gleicher Spezifität sicher überschreibt. */
@media (max-width: 960px) {
  [data-mobil-zeigen="2"]:not(.offen) > *:nth-child(n + 3),
  [data-mobil-zeigen="3"]:not(.offen) > *:nth-child(n + 4),
  [data-mobil-zeigen="4"]:not(.offen) > *:nth-child(n + 5),
  [data-mobil-zeigen="6"]:not(.offen) > *:nth-child(n + 7) {
    display: none;
  }
  /* Die YouTube-Kachel steht als letztes Kind der Startseiten-Galerie und
     ist ein eigenständiger Abschluss — sie bleibt auch eingeklappt stehen. */
  .mobil-kurz:not(.offen) > .werk--mehr { display: flex; }

  .mobil-mehr {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin-top: 1.1rem;
    padding: 0.7em 1.5em;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--licht);
    background: rgba(244, 242, 237, 0.03);
    border: 1px solid rgba(244, 242, 237, 0.25);
    border-radius: 999px;
    transition: border-color 250ms var(--ease), color 250ms var(--ease);
  }
  .mobil-mehr:hover,
  .mobil-mehr:focus-visible { border-color: var(--gold); color: var(--gold); }

  /* Flacheres Format spart rund 30 px je Kachel. .werk--breit (16/9) und
     .werk--voll (eigene Höhenlogik samt Mobil-Bugfix) bleiben ausgenommen. */
  .werk:not(.werk--breit):not(.werk--voll) { aspect-ratio: 3 / 2; }
}

/* ════════════════════════════ DRUCK ════════════════════════════
   Ohne diesen Block bleiben Ausdrucke fast leer: die Reveal-Elemente stehen
   bis zum Einblenden auf opacity: 0, und die Verlaufsschriften (.glanz,
   .zahl strong, .schritt__nr) sind auf color: transparent gesetzt.
   Betrifft ausschließlich den Ausdruck, nie die Bildschirmdarstellung. */
@media print {
  @page { margin: 1.5cm; }

  /* Alles zeigen, nichts bewegen, keine Flächen und Schatten */
  *, *::before, *::after {
    background: transparent !important;
    color: #000 !important;
    border-color: #999 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
    -webkit-text-fill-color: currentColor;
  }
  html, body { background: #fff !important; color: #000 !important; }
  body { font-size: 11pt; line-height: 1.5; overflow: visible; }
  .reveal { opacity: 1 !important; transform: none !important; }

  /* Deko und Bedienelemente, die auf Papier nichts verloren haben */
  .korn,
  .nav,
  .mobilmenue,
  .marken,
  .marquee,
  .marquee__pause,
  .visuell-versteckt,
  .hero__medien,
  .hero__blende,
  .hero::after,
  .leistung::after,
  .galerie--details .werk::after,
  .werk__info,
  .werk--mehr .yt-marke,
  .fuss__links,
  .fuss__social {
    display: none !important;
  }

  /* Hero und Unterseiten ohne die Freiräume für die fixierte Navigation */
  .hero { min-height: 0; display: block; }
  .hero__inhalt { padding-block: 0 1.5rem; }
  .seite { padding-block: 0 1.5rem; }
  section, .leistungen, .arbeiten, .zahlen, .referenzen,
  .ueber, .ablauf, .partner, .kontakt { padding-block: 0.8rem; }

  /* Bilder in natürlicher Höhe, Bildunterschriften darunter statt darüber */
  .werk, .leistung, .ueber__bild, .leistung-detail__bild { aspect-ratio: auto !important; }
  .werk img, .werk--voll img, .leistung__bild {
    position: static !important;
    width: 100% !important;
    height: auto !important;
  }
  .werk figcaption { position: static !important; padding-top: 0.4rem; }
  .chip { border: 1px solid #999; }
  .leistung { display: block; min-height: 0; }

  /* Umbrüche: Karten und Bilder nicht über zwei Seiten zerreißen */
  .werk, .leistung, .schritt, .tv-karte, .faq details,
  .leistung-detail, .zahl, .cta-band { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }

  /* Externe Links mit Ziel-URL ausgeben */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }
  .faq details { border: 1px solid #999; }
  /* geschlossene FAQ-Antworten mitdrucken, soweit der Browser das unterstützt */
  .faq details::details-content { content-visibility: visible; }
}