/* =====================================================================
   kopf.css — Marken-Bühne „Die Blindprägung" (CSS, Demo, GESETZ Kap. 16.4)
   Rechtsanwalt Christian Korn · Schritt 4 @hero-engineer · 28.09.2026
   ERZEUGT von _arbeit/kopf-bauen.mjs — nicht von Hand ändern, dort ändern.
   Bauteil: <header class="kopf" data-marken-buehne="css" data-kopf="<slug>">
   Muster: _arbeit/partials/kopf.html · Prüfseite: _arbeit/kopf-probe.html
   Animiert werden NUR transform + opacity (Compositor), keine Filter,
   keine Custom-Property-Animation. Reduced-Motion: Bühne läuft weiter,
   halb so schnell, halbe Schatten-Amplitude (GESETZ Kap. 5, Bauleiter).
   ===================================================================== */

.kopf[data-marken-buehne="css"] {
  /* Layout + Bewegung */
  --k-rand: 5vw;
  --k-ease: cubic-bezier(0.33, 0.72, 0.18, 1); /* „Die Feder" */
  --k-display: "Newsreader", "Sitka Display", Georgia, serif;
  --k-sans: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --tempo: 1;
  --zyklus: 10s;
  --k-verz: -2s;
  --zeile-lag: 1.2s;
  /* Themenfest HELL (Kap. 11): Papier-Bühne, dunkle Schrift aus --dunkel-fest */
  --k-text: var(--dunkel-fest, #0f1420);
  --k-akzent: #a62a21;
  --k-cta-grund: #243a73;
  --k-cta-text: var(--kalk-fest, #f6f3ec);
  --k-buehne: #e7e0d2;
  --k-grund-mobil: #f6f3ec;
  --rh: 255 253 247;
  --rs: 74 56 28;
  --rh-a: 1;
  --rs-a: 1;
  --deckel: 0 0 0 transparent; /* hell: Lichtkopie = beleuchtete Papierfläche */
  --g-rh-a: 0.72;
  --g-rs-a: 0.22;
  --la: 1;
  --k-faser-a: 0.32;
  --k-vignette: rgb(74 56 28 / 0.16);
  --k-daemmer: rgb(74 56 28 / 0.17);
  --k-pfosten: rgb(74 56 28 / 0.24);
  /* Text-Tokens auf der Bühne umdefinieren (Kap. 11) — nie color je Selektor */
  --tinte: var(--k-text);
  --meta: var(--k-text);
  --akzent: var(--k-akzent);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 78svh;
  min-height: 640px;
  color: var(--k-text);
  background: var(--k-buehne);
}
.kopf[data-marken-buehne="css"][data-kopf="index"] {
  height: calc(100svh - 32px - 76px); /* Top-Hinweis 32 + Kontaktleiste 76 → Leiste im ersten Bild */
  min-height: 640px;
}

/* ---------- Themenfest DUNKEL: „Lampe auf Tintenkarton" ---------- */
:root[data-thema="dunkel"] .kopf[data-marken-buehne="css"] {
  --k-text: var(--kalk-fest, #f6f3ec);
  --k-akzent: #f08a7e;
  --k-cta-grund: #ede9e0;
  --k-cta-text: #141b2b;
  --k-buehne: #182033;
  --k-grund-mobil: #0f1420;
  --rh: 255 236 205;
  --rs: 0 0 0;
  --rh-a: 0.62;
  --rs-a: 1.6;
  --deckel: 0 0 0 #182033; /* dunkel: Kartonfarbe deckt die Lichtkopie ab → nur die helle Kante bleibt */
  --g-rh-a: 0.58; /* Grund-Kante hell genug, dass das Wort auch ohne Licht steht */
  --g-rs-a: 0.6;
  --la: 0.24; /* screen ≈ 0,2 (bau-brief §5) */
  --licht: 255 214 160;
  --amber: 255 170 110;
  --k-faser-a: 0.18;
  --k-vignette: rgb(0 0 0 / 0.38);
  --k-daemmer: rgb(0 0 0 / 0.3);
  --k-pfosten: rgb(0 0 0 / 0.5);
}

/* ---------- Bühne ---------- */
.kopf .praegebuehne {
  --fs: min(15rem, 17vw, calc(150vw / var(--zeichen, 6)));
  --wort-top: clamp(7.5rem, 14%, 9.5rem);
  --dauer: calc(var(--zyklus) * var(--tempo));
  --verz: calc(var(--k-verz) * var(--tempo));
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--k-buehne);
  pointer-events: none;
}
.kopf[data-kopf="index"] .praegebuehne {
  --fs: min(21rem, 23vw, calc(150vw / var(--zeichen, 4)));
}
/* Büttenfaser: statisches Relief, einmal gerastert */
.kopf .praegebuehne::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: var(--k-faser-a);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='360'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feDiffuseLighting lighting-color='%23ffffff' surfaceScale='1.1'><feDistantLight azimuth='210' elevation='58'/></feDiffuseLighting></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
  background-size: 360px 360px;
}
/* Vignette */
.kopf .praegebuehne::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  background: radial-gradient(130% 110% at 45% 35%, transparent 55%, var(--k-vignette) 100%);
}
.kopf .pb-daemmer {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--k-daemmer);
  opacity: var(--daemmer-ruhe, 0);
}
.kopf .pb-grund {
  position: absolute;
  inset: 0;
  z-index: 3;
}
.kopf .pb-licht {
  position: absolute;
  inset: 0;
  z-index: 4;
  mix-blend-mode: screen;
}
.kopf .pb-licht::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
}
.kopf .pb-fenster {
  position: absolute;
  inset: 0;
  z-index: 5;
  -webkit-mask-image: linear-gradient(var(--winkel), transparent calc(50% - var(--rand-b)), #000 calc(50% - var(--kern)), #000 calc(50% + var(--kern)), transparent calc(50% + var(--rand-b)));
  mask-image: linear-gradient(var(--winkel), transparent calc(50% - var(--rand-b)), #000 calc(50% - var(--kern)), #000 calc(50% + var(--kern)), transparent calc(50% + var(--rand-b)));
}
.kopf .pb-gegen {
  position: absolute;
  inset: 0;
}
.kopf .pb-pfosten {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: none;
  mix-blend-mode: multiply;
  background: linear-gradient(var(--winkel), transparent 49.1%, var(--k-pfosten) 49.5%, var(--k-pfosten) 50.5%, transparent 50.9%);
}

/* Das Wort: Buchstabenfläche IST Papier (color transparent), sichtbar nur durch Relief */
.kopf .pb-wort,
.kopf .pb-zeile {
  --rk: 1;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  color: transparent;
  white-space: nowrap;
  user-select: none;
  text-align: right;
}
.kopf .pb-wort {
  top: var(--wort-top);
  padding-right: var(--k-rand);
  font: 600 var(--fs-fit, var(--fs)) / 0.82 var(--k-display); /* --fs-fit: kopf.js schrumpft, falls Wort und Text sich berühren */
  letter-spacing: -0.04em;
}
.kopf .pb-zeile {
  --rk: 0.55;
  top: calc(var(--wort-top) + 0.82 * var(--fs-fit, var(--fs)) + 1.3rem);
  padding-right: calc(var(--k-rand) - 0.26em);
  font: 700 clamp(0.72rem, calc(var(--fs-fit, var(--fs)) * 0.072), 1.3rem) / 1 var(--k-sans); /* wächst/schrumpft mit dem Wort */
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.kopf .pb-g {
  text-shadow:
    var(--deckel),
    0 calc(-1px * var(--rk)) 0 rgb(var(--rh) / var(--g-rh-a)),
    0 calc(1.5px * var(--rk)) calc(1px * var(--rk)) rgb(var(--rs) / var(--g-rs-a));
}

/* ---------- Text-Zone unten links (Kap. 5) ---------- */
.kopf .kopf__leiste {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  height: 96px;
}
.kopf .kopf__text {
  position: absolute;
  z-index: 10;
  left: var(--k-rand);
  bottom: clamp(2.6rem, 6.5vh, 4.6rem);
  max-width: min(44rem, 56vw);
}
.kopf .kopf__eyebrow {
  display: flex;
  align-items: center;
  margin: 0 0 1.1rem;
  font: 600 0.8125rem / 1.2 var(--k-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--k-text);
}
.kopf .kopf__strich {
  display: inline-block;
  flex: none;
  width: 3px;
  height: 1.05em;
  margin-right: 0.75em;
  background: var(--k-akzent);
  transform-origin: 50% 100%;
}
.kopf .kopf__h1 {
  margin: 0;
  font-weight: inherit;
  color: var(--k-text);
}
.kopf .kopf__zeile {
  display: block;
  margin-bottom: 0.8rem;
  font: 600 1.15rem / 1.3 var(--k-sans);
  letter-spacing: 0.005em;
}
.kopf .kopf__pointe {
  display: block;
  font: 500 clamp(2.4rem, 1.2rem + 3.3vw, 3.4rem) / 1.04 var(--k-display);
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.kopf .kopf__pointe .akzent {
  color: var(--k-akzent);
}
.kopf .kopf__beweis {
  max-width: 34rem;
  margin: 1.25rem 0 1.9rem;
  font: 400 1.08rem / 1.55 var(--k-sans);
  color: var(--k-text);
}
.kopf .kopf__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  height: 52px;
  padding: 0 1.6rem;
  border-radius: 2px;
  background: var(--k-cta-grund);
  color: var(--k-cta-text);
  font: 600 1rem / 1 var(--k-sans);
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 200ms var(--k-ease), box-shadow 200ms var(--k-ease);
}
.kopf .kopf__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -14px rgb(20 27 43 / 0.7);
}
.kopf .kopf__cta:focus-visible {
  outline: 2px solid var(--k-text);
  outline-offset: 3px;
}
.kopf .kopf__cta svg {
  width: 18px;
  height: 18px;
}

/* ---------- Kontaktleiste: 0 px an der Kopf-Unterkante, eine Zeile je Zelle ---------- */
.kontaktleiste {
  --kl-grund: #141b2b;
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  height: 76px;
  margin: 0;
  background: var(--kl-grund);
  color: var(--kalk-fest, #f6f3ec);
}
:root[data-thema="dunkel"] .kontaktleiste {
  --kl-grund: #0a0e17;
  box-shadow: inset 0 1px 0 rgb(246 243 236 / 0.08);
}
.kontaktleiste > * {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 0 1.5rem 0 var(--k-rand, 5vw);
  border-right: 1px solid rgb(246 243 236 / 0.14);
  color: inherit;
  text-decoration: none;
}
.kontaktleiste > :last-child {
  border-right: 0;
}
.kontaktleiste__label {
  margin-bottom: 0.45rem;
  font: 600 0.72rem / 1 var(--k-sans, "Schibsted Grotesk", system-ui, sans-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--meta-fest, #c9cdd8);
}
.kontaktleiste__wert {
  font: 600 1.05rem / 1.2 var(--k-sans, "Schibsted Grotesk", system-ui, sans-serif);
  white-space: nowrap;
}
.kontaktleiste a:hover .kontaktleiste__wert {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kontaktleiste a:focus-visible {
  outline: 2px solid var(--kalk-fest, #f6f3ec);
  outline-offset: -4px;
}
@media (min-width: 900px) and (max-width: 1279px) {
  /* Tablet quer / kleine Laptops: Platz für Wort ÜBER dem Text (sonst berühren sich die Zonen) */
  .kopf[data-marken-buehne="css"],
  .kopf[data-marken-buehne="css"][data-kopf="index"] {
    min-height: 680px;
  }
}
@media (min-width: 1280px) {
  /* Duell-Befund d: rechte Zelle hält 7 rem frei für den festen Anruf-Knopf */
  .kontaktleiste > :last-child {
    padding-right: 7rem;
  }
}

/* Duell-Befund d: der feste Anruf-Knopf erscheint erst, wenn die Kontaktleiste
   oben aus dem Bild ist (kopf.js setzt html[data-anruf]). Ohne JS: sichtbar. */
html.js-kopf:not([data-anruf="an"]) .anruf {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
}
html.js-kopf .anruf {
  transition: opacity 280ms var(--k-ease, ease), transform 280ms var(--k-ease, ease), visibility 0s linear 0s;
}
html.js-kopf:not([data-anruf="an"]) .anruf {
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
}

/* ---------- Choreografie 0–3 s (nur mit Bewegung; Text endet immer sichtbar) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .kopf .kopf__strich { animation: k-strich 520ms var(--k-ease) 100ms backwards; }
  .kopf .kopf__eyebrow-text { animation: k-auf 620ms var(--k-ease) 200ms backwards; }
  .kopf .kopf__zeile { animation: k-auf 700ms var(--k-ease) 340ms backwards; }
  .kopf .kopf__pointe {
    -webkit-mask-image: linear-gradient(102deg, #000 40%, transparent 60%);
    mask-image: linear-gradient(102deg, #000 40%, transparent 60%);
    -webkit-mask-size: 250% 100%;
    mask-size: 250% 100%;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    animation: k-lichtzug 1150ms var(--k-ease) 480ms backwards;
  }
  .kopf .kopf__beweis { animation: k-auf 700ms var(--k-ease) 1080ms backwards; }
  .kopf .kopf__cta { animation: k-auf 700ms var(--k-ease) 1320ms backwards; }
}
@keyframes k-auf { from { opacity: 0; } }
@keyframes k-strich { from { transform: scaleY(0); } }
@keyframes k-lichtzug {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; opacity: 0; }
  25% { opacity: 1; }
  to { -webkit-mask-position: 0 0; mask-position: 0 0; opacity: 1; }
}

/* ---------- Reduced-Motion: Bühne läuft WEITER (Kap. 5), nur ruhiger ---------- */
@media (prefers-reduced-motion: reduce) {
  .kopf[data-marken-buehne="css"] {
    --tempo: 2;
    --g-rh-a: 0.85;
    --g-rs-a: 0.3;
  }
  :root[data-thema="dunkel"] .kopf[data-marken-buehne="css"] {
    --g-rh-a: 0.68;
    --g-rs-a: 0.7;
  }
  .kopf .pb-fenster { opacity: 0.5; }
}

/* ---------- Außerhalb des Bildes: anhalten (kopf.js setzt data-ruht) ---------- */
.kopf[data-ruht] .praegebuehne *,
.kopf[data-ruht] .praegebuehne *::after {
  animation-play-state: paused !important;
}

/* ===== index · „Korn" · 15 s · Form pfosten ===== */
.kopf[data-kopf="index"] {
  --zeichen: 4;
  --zyklus: 15s;
  --k-verz: -3.5s;
  --winkel: 102deg;
  --kern: 14%;
  --rand-b: 30%;
  --licht: 255 246 226;
}
@media (max-width: 899px) { .kopf[data-kopf="index"] { --zyklus: 18s; } }
.kopf[data-kopf="index"] .pb-licht { background: linear-gradient(var(--winkel), rgb(var(--licht) / calc(var(--la) * 0)) 16%, rgb(var(--licht) / calc(var(--la) * 0.78)) 30%, rgb(var(--licht) / calc(var(--la) * 0.82)) 47%, rgb(var(--licht) / calc(var(--la) * 0.26)) 49%, rgb(var(--licht) / calc(var(--la) * 0.26)) 51%, rgb(var(--licht) / calc(var(--la) * 0.82)) 53%, rgb(var(--licht) / calc(var(--la) * 0.74)) 69%, rgb(var(--licht) / calc(var(--la) * 0)) 83%); }
@keyframes pb-index-zug {
  0% { transform: translateX(-85%); }
  40% { transform: translateX(12%); }
  60% { transform: translateX(30%); }
  80% { transform: translateX(54%); }
  100% { transform: translateX(90%); }
}
@keyframes pb-index-gegen {
  0% { transform: translateX(85%); }
  40% { transform: translateX(-12%); }
  60% { transform: translateX(-30%); }
  80% { transform: translateX(-54%); }
  100% { transform: translateX(-90%); }
}
.kopf[data-kopf="index"] .pb-licht { animation: pb-index-zug var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="index"] .pb-fenster { animation: pb-index-zug var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="index"] .pb-gegen { animation: pb-index-gegen var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="index"] .pb-a { text-shadow: var(--deckel), calc(-2.4px * var(--rk)) calc(-1.8px * var(--rk)) 0 rgb(var(--rh) / calc(0.95 * var(--rh-a))), calc(3.4px * var(--rk)) calc(2.8px * var(--rk)) calc(3px * var(--rk)) rgb(var(--rs) / calc(0.4 * var(--rs-a))), calc(1.3px * var(--rk)) calc(1.1px * var(--rk)) calc(0px * var(--rk)) rgb(var(--rs) / calc(0.26 * var(--rs-a))); }
@keyframes pb-index-a {
  0% { opacity: 1; }
  40% { opacity: 0.85; }
  60% { opacity: 0.35; }
  80% { opacity: 0; }
  100% { opacity: 0; }
}
.kopf[data-kopf="index"] .pb-a { animation: pb-index-a var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="index"] .pb-b { text-shadow: var(--deckel), calc(2.4px * var(--rk)) calc(-1.8px * var(--rk)) 0 rgb(var(--rh) / calc(0.95 * var(--rh-a))), calc(-3.4px * var(--rk)) calc(2.8px * var(--rk)) calc(3px * var(--rk)) rgb(var(--rs) / calc(0.4 * var(--rs-a))), calc(-1.3px * var(--rk)) calc(1.1px * var(--rk)) calc(0px * var(--rk)) rgb(var(--rs) / calc(0.26 * var(--rs-a))); }
@keyframes pb-index-b {
  0% { opacity: 0; }
  40% { opacity: 0.08; }
  60% { opacity: 0.35; }
  80% { opacity: 0.95; }
  100% { opacity: 1; }
}
.kopf[data-kopf="index"] .pb-b { animation: pb-index-b var(--dauer) linear var(--verz) infinite; }
@keyframes pb-index-daemmer {
  0% { opacity: 0.55; }
  25% { opacity: 0; }
  85% { opacity: 0; }
  100% { opacity: 0.55; }
}
.kopf[data-kopf="index"] .pb-daemmer { animation: pb-index-daemmer var(--dauer) linear var(--verz) infinite; }

/* ===== rechtsgebiete · „Sechs" · 10 s · Form pfosten ===== */
.kopf[data-kopf="rechtsgebiete"] {
  --zeichen: 5;
  --zyklus: 10s;
  --k-verz: -2s;
  --winkel: 102deg;
  --kern: 14%;
  --rand-b: 30%;
  --licht: 255 250 238;
}
.kopf[data-kopf="rechtsgebiete"] .pb-licht { background: linear-gradient(var(--winkel), rgb(var(--licht) / calc(var(--la) * 0)) 16%, rgb(var(--licht) / calc(var(--la) * 0.78)) 30%, rgb(var(--licht) / calc(var(--la) * 0.82)) 47%, rgb(var(--licht) / calc(var(--la) * 0.26)) 49%, rgb(var(--licht) / calc(var(--la) * 0.26)) 51%, rgb(var(--licht) / calc(var(--la) * 0.82)) 53%, rgb(var(--licht) / calc(var(--la) * 0.74)) 69%, rgb(var(--licht) / calc(var(--la) * 0)) 83%); }
@keyframes pb-rechtsgebiete-zug {
  0% { transform: translateX(-85%); }
  30% { transform: translateX(-20%); }
  50% { transform: translateX(19%); }
  65% { transform: translateX(35%); }
  100% { transform: translateX(90%); }
}
@keyframes pb-rechtsgebiete-gegen {
  0% { transform: translateX(85%); }
  30% { transform: translateX(20%); }
  50% { transform: translateX(-19%); }
  65% { transform: translateX(-35%); }
  100% { transform: translateX(-90%); }
}
.kopf[data-kopf="rechtsgebiete"] .pb-licht { animation: pb-rechtsgebiete-zug var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="rechtsgebiete"] .pb-fenster { animation: pb-rechtsgebiete-zug var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="rechtsgebiete"] .pb-gegen { animation: pb-rechtsgebiete-gegen var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="rechtsgebiete"] .pb-a { text-shadow: var(--deckel), calc(-2.4px * var(--rk)) calc(-1.8px * var(--rk)) 0 rgb(var(--rh) / calc(0.95 * var(--rh-a))), calc(3.4px * var(--rk)) calc(2.8px * var(--rk)) calc(3px * var(--rk)) rgb(var(--rs) / calc(0.4 * var(--rs-a))), calc(1.3px * var(--rk)) calc(1.1px * var(--rk)) calc(0px * var(--rk)) rgb(var(--rs) / calc(0.26 * var(--rs-a))); }
@keyframes pb-rechtsgebiete-a {
  0% { opacity: 0.7; }
  50% { opacity: 0.62; }
  100% { opacity: 0.45; }
}
.kopf[data-kopf="rechtsgebiete"] .pb-a { animation: pb-rechtsgebiete-a var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="rechtsgebiete"] .pb-b { text-shadow: var(--deckel), calc(2.4px * var(--rk)) calc(-1.8px * var(--rk)) 0 rgb(var(--rh) / calc(0.95 * var(--rh-a))), calc(-3.4px * var(--rk)) calc(2.8px * var(--rk)) calc(3px * var(--rk)) rgb(var(--rs) / calc(0.4 * var(--rs-a))), calc(-1.3px * var(--rk)) calc(1.1px * var(--rk)) calc(0px * var(--rk)) rgb(var(--rs) / calc(0.26 * var(--rs-a))); }
@keyframes pb-rechtsgebiete-b {
  0% { opacity: 0; }
  50% { opacity: 0.08; }
  100% { opacity: 0.25; }
}
.kopf[data-kopf="rechtsgebiete"] .pb-b { animation: pb-rechtsgebiete-b var(--dauer) linear var(--verz) infinite; }

/* ===== existenzgruenderrecht · „Gründung" · 10 s · Form pfosten ===== */
.kopf[data-kopf="existenzgruenderrecht"] {
  --zeichen: 8;
  --zyklus: 10s;
  --k-verz: -2s;
  --winkel: 104deg;
  --kern: 14%;
  --rand-b: 30%;
  --licht: 255 232 188;
}
.kopf[data-kopf="existenzgruenderrecht"] .pb-licht { background: linear-gradient(var(--winkel), rgb(var(--licht) / calc(var(--la) * 0)) 16%, rgb(var(--licht) / calc(var(--la) * 0.78)) 30%, rgb(var(--licht) / calc(var(--la) * 0.82)) 47%, rgb(var(--licht) / calc(var(--la) * 0.26)) 49%, rgb(var(--licht) / calc(var(--la) * 0.26)) 51%, rgb(var(--licht) / calc(var(--la) * 0.82)) 53%, rgb(var(--licht) / calc(var(--la) * 0.74)) 69%, rgb(var(--licht) / calc(var(--la) * 0)) 83%); }
@keyframes pb-existenzgruenderrecht-zug {
  0% { transform: translateX(-85%); }
  30% { transform: translateX(-20%); }
  50% { transform: translateX(6%); }
  65% { transform: translateX(22%); }
  100% { transform: translateX(90%); }
}
@keyframes pb-existenzgruenderrecht-gegen {
  0% { transform: translateX(85%); }
  30% { transform: translateX(20%); }
  50% { transform: translateX(-6%); }
  65% { transform: translateX(-22%); }
  100% { transform: translateX(-90%); }
}
.kopf[data-kopf="existenzgruenderrecht"] .pb-licht { animation: pb-existenzgruenderrecht-zug var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="existenzgruenderrecht"] .pb-fenster { animation: pb-existenzgruenderrecht-zug var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="existenzgruenderrecht"] .pb-gegen { animation: pb-existenzgruenderrecht-gegen var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="existenzgruenderrecht"] .pb-a { text-shadow: var(--deckel), calc(-2.6px * var(--rk)) calc(-1.4px * var(--rk)) 0 rgb(var(--rh) / calc(0.95 * var(--rh-a))), calc(7px * var(--rk)) calc(3.2px * var(--rk)) calc(5px * var(--rk)) rgb(var(--rs) / calc(0.36 * var(--rs-a))), calc(2.6px * var(--rk)) calc(1.3px * var(--rk)) calc(0px * var(--rk)) rgb(var(--rs) / calc(0.28 * var(--rs-a))); }
@keyframes pb-existenzgruenderrecht-a {
  0% { opacity: 0.75; }
  50% { opacity: 0.68; }
  100% { opacity: 0.12; }
}
.kopf[data-kopf="existenzgruenderrecht"] .pb-a { animation: pb-existenzgruenderrecht-a var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="existenzgruenderrecht"] .pb-b { text-shadow: var(--deckel), calc(-2.4px * var(--rk)) calc(-1.8px * var(--rk)) 0 rgb(var(--rh) / calc(0.95 * var(--rh-a))), calc(3.4px * var(--rk)) calc(2.8px * var(--rk)) calc(3px * var(--rk)) rgb(var(--rs) / calc(0.4 * var(--rs-a))), calc(1.3px * var(--rk)) calc(1.1px * var(--rk)) calc(0px * var(--rk)) rgb(var(--rs) / calc(0.26 * var(--rs-a))); }
@keyframes pb-existenzgruenderrecht-b {
  0% { opacity: 0; }
  50% { opacity: 0.12; }
  100% { opacity: 0.55; }
}
.kopf[data-kopf="existenzgruenderrecht"] .pb-b { animation: pb-existenzgruenderrecht-b var(--dauer) linear var(--verz) infinite; }
@keyframes pb-existenzgruenderrecht-daemmer {
  0% { opacity: 0.85; }
  35% { opacity: 0.1; }
  45% { opacity: 0; }
  85% { opacity: 0; }
  100% { opacity: 0.85; }
}
.kopf[data-kopf="existenzgruenderrecht"] .pb-daemmer { animation: pb-existenzgruenderrecht-daemmer var(--dauer) linear var(--verz) infinite; }

/* ===== strafrecht · „Verteidigung" · 10 s · Form streif ===== */
.kopf[data-kopf="strafrecht"] {
  --zeichen: 12;
  --zyklus: 10s;
  --k-verz: -1.5s;
  --winkel: 78deg;
  --kern: 6%;
  --rand-b: 12%;
  --licht: 236 244 255;
  --daemmer-ruhe: 0.38;
}
.kopf[data-kopf="strafrecht"] .pb-licht { background: linear-gradient(var(--winkel), rgb(var(--licht) / calc(var(--la) * 0)) 41%, rgb(var(--licht) / calc(var(--la) * 0.86)) 44.5%, rgb(var(--licht) / calc(var(--la) * 0.9)) 55.5%, rgb(var(--licht) / calc(var(--la) * 0)) 59%); }
@keyframes pb-strafrecht-zug {
  0% { transform: translateX(90%); }
  30% { transform: translateX(28%); }
  50% { transform: translateX(16%); }
  65% { transform: translateX(0%); }
  100% { transform: translateX(-85%); }
}
@keyframes pb-strafrecht-gegen {
  0% { transform: translateX(-90%); }
  30% { transform: translateX(-28%); }
  50% { transform: translateX(-16%); }
  65% { transform: translateX(0%); }
  100% { transform: translateX(85%); }
}
.kopf[data-kopf="strafrecht"] .pb-licht { animation: pb-strafrecht-zug var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="strafrecht"] .pb-fenster { animation: pb-strafrecht-zug var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="strafrecht"] .pb-gegen { animation: pb-strafrecht-gegen var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="strafrecht"] .pb-a { text-shadow: var(--deckel), calc(2.4px * var(--rk)) calc(-1.8px * var(--rk)) 0 rgb(var(--rh) / calc(0.95 * var(--rh-a))), calc(-3.4px * var(--rk)) calc(2.8px * var(--rk)) calc(3px * var(--rk)) rgb(var(--rs) / calc(0.4 * var(--rs-a))), calc(-1.3px * var(--rk)) calc(1.1px * var(--rk)) calc(0px * var(--rk)) rgb(var(--rs) / calc(0.26 * var(--rs-a))); }
@keyframes pb-strafrecht-a {
  0% { opacity: 0.75; }
  50% { opacity: 0.66; }
  100% { opacity: 0.45; }
}
.kopf[data-kopf="strafrecht"] .pb-a { animation: pb-strafrecht-a var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="strafrecht"] .pb-b { text-shadow: var(--deckel), calc(-2.4px * var(--rk)) calc(-1.8px * var(--rk)) 0 rgb(var(--rh) / calc(0.95 * var(--rh-a))), calc(3.4px * var(--rk)) calc(2.8px * var(--rk)) calc(3px * var(--rk)) rgb(var(--rs) / calc(0.4 * var(--rs-a))), calc(1.3px * var(--rk)) calc(1.1px * var(--rk)) calc(0px * var(--rk)) rgb(var(--rs) / calc(0.26 * var(--rs-a))); }
@keyframes pb-strafrecht-b {
  0% { opacity: 0; }
  50% { opacity: 0.08; }
  100% { opacity: 0.22; }
}
.kopf[data-kopf="strafrecht"] .pb-b { animation: pb-strafrecht-b var(--dauer) linear var(--verz) infinite; }

/* ===== handels-steuerrecht · „Grenze" · 10 s · Form mittag ===== */
.kopf[data-kopf="handels-steuerrecht"] {
  --zeichen: 6;
  --zyklus: 10s;
  --k-verz: -2s;
  --winkel: 96deg;
  --kern: 34%;
  --rand-b: 48%;
  --licht: 255 250 240;
}
.kopf[data-kopf="handels-steuerrecht"] .pb-licht { background: linear-gradient(var(--winkel), rgb(var(--licht) / calc(var(--la) * 0)) 2%, rgb(var(--licht) / calc(var(--la) * 0.66)) 18%, rgb(var(--licht) / calc(var(--la) * 0.72)) 48.4%, rgb(var(--licht) / calc(var(--la) * 0.06)) 49.3%, rgb(var(--licht) / calc(var(--la) * 0.06)) 50.7%, rgb(var(--licht) / calc(var(--la) * 0.72)) 51.6%, rgb(var(--licht) / calc(var(--la) * 0.66)) 82%, rgb(var(--licht) / calc(var(--la) * 0)) 98%); }
@keyframes pb-handelssteuerrecht-zug {
  0% { transform: translateX(-102%); }
  25% { transform: translateX(-32%); }
  50% { transform: translateX(-6%); }
  75% { transform: translateX(30%); }
  100% { transform: translateX(102%); }
}
@keyframes pb-handelssteuerrecht-gegen {
  0% { transform: translateX(102%); }
  25% { transform: translateX(32%); }
  50% { transform: translateX(6%); }
  75% { transform: translateX(-30%); }
  100% { transform: translateX(-102%); }
}
.kopf[data-kopf="handels-steuerrecht"] .pb-licht { animation: pb-handelssteuerrecht-zug var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="handels-steuerrecht"] .pb-fenster { animation: pb-handelssteuerrecht-zug var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="handels-steuerrecht"] .pb-gegen { animation: pb-handelssteuerrecht-gegen var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="handels-steuerrecht"] .pb-a { text-shadow: var(--deckel), calc(0px * var(--rk)) calc(-1.9px * var(--rk)) 0 rgb(var(--rh) / calc(0.9 * var(--rh-a))), calc(0px * var(--rk)) calc(2.8px * var(--rk)) calc(3px * var(--rk)) rgb(var(--rs) / calc(0.34 * var(--rs-a))), calc(0px * var(--rk)) calc(1.1px * var(--rk)) calc(0px * var(--rk)) rgb(var(--rs) / calc(0.24 * var(--rs-a))); }
.kopf[data-kopf="handels-steuerrecht"] .pb-a { opacity: 0.72; }
.kopf[data-kopf="handels-steuerrecht"] .pb-b { display: none; }
.kopf[data-kopf="handels-steuerrecht"] .pb-pfosten { display: block; animation: pb-handelssteuerrecht-zug var(--dauer) linear var(--verz) infinite; }

/* ===== miet-immobilienrecht · „Wohnung" · 10 s · Form kreuz ===== */
.kopf[data-kopf="miet-immobilienrecht"] {
  --zeichen: 7;
  --zyklus: 10s;
  --k-verz: -1.5s;
  --winkel: 78deg;
  --kern: 14%;
  --rand-b: 30%;
  --licht: 255 230 200;
}
.kopf[data-kopf="miet-immobilienrecht"] .pb-licht { background: linear-gradient(var(--winkel), rgb(var(--licht) / calc(var(--la) * 0)) 16%, rgb(var(--licht) / calc(var(--la) * 0.78)) 30%, rgb(var(--licht) / calc(var(--la) * 0.82)) 47%, rgb(var(--licht) / calc(var(--la) * 0.22)) 49%, rgb(var(--licht) / calc(var(--la) * 0.22)) 51%, rgb(var(--licht) / calc(var(--la) * 0.82)) 53%, rgb(var(--licht) / calc(var(--la) * 0.74)) 69%, rgb(var(--licht) / calc(var(--la) * 0)) 83%); }
.kopf[data-kopf="miet-immobilienrecht"] .pb-licht {
  /* Sprossenfenster: waagerechte Sprosse unter dem Wort */
  -webkit-mask-image: linear-gradient(180deg, #000 0 55%, transparent 56.5% 60%, #000 61.5%);
  mask-image: linear-gradient(180deg, #000 0 55%, transparent 56.5% 60%, #000 61.5%);
}
@keyframes pb-mietimmobilienrecht-zug {
  0% { transform: translateX(90%); }
  30% { transform: translateX(31%); }
  50% { transform: translateX(19%); }
  65% { transform: translateX(3%); }
  100% { transform: translateX(-85%); }
}
@keyframes pb-mietimmobilienrecht-gegen {
  0% { transform: translateX(-90%); }
  30% { transform: translateX(-31%); }
  50% { transform: translateX(-19%); }
  65% { transform: translateX(-3%); }
  100% { transform: translateX(85%); }
}
.kopf[data-kopf="miet-immobilienrecht"] .pb-licht { animation: pb-mietimmobilienrecht-zug var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="miet-immobilienrecht"] .pb-fenster { animation: pb-mietimmobilienrecht-zug var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="miet-immobilienrecht"] .pb-gegen { animation: pb-mietimmobilienrecht-gegen var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="miet-immobilienrecht"] .pb-a { text-shadow: var(--deckel), calc(2.4px * var(--rk)) calc(-1.8px * var(--rk)) 0 rgb(var(--rh) / calc(0.95 * var(--rh-a))), calc(-3.4px * var(--rk)) calc(2.8px * var(--rk)) calc(3px * var(--rk)) rgb(var(--rs) / calc(0.4 * var(--rs-a))), calc(-1.3px * var(--rk)) calc(1.1px * var(--rk)) calc(0px * var(--rk)) rgb(var(--rs) / calc(0.26 * var(--rs-a))); }
@keyframes pb-mietimmobilienrecht-a {
  0% { opacity: 0.7; }
  50% { opacity: 0.62; }
  100% { opacity: 0.45; }
}
.kopf[data-kopf="miet-immobilienrecht"] .pb-a { animation: pb-mietimmobilienrecht-a var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="miet-immobilienrecht"] .pb-b { text-shadow: var(--deckel), calc(-2.4px * var(--rk)) calc(-1.8px * var(--rk)) 0 rgb(var(--rh) / calc(0.95 * var(--rh-a))), calc(3.4px * var(--rk)) calc(2.8px * var(--rk)) calc(3px * var(--rk)) rgb(var(--rs) / calc(0.4 * var(--rs-a))), calc(1.3px * var(--rk)) calc(1.1px * var(--rk)) calc(0px * var(--rk)) rgb(var(--rs) / calc(0.26 * var(--rs-a))); }
@keyframes pb-mietimmobilienrecht-b {
  0% { opacity: 0; }
  50% { opacity: 0.08; }
  100% { opacity: 0.25; }
}
.kopf[data-kopf="miet-immobilienrecht"] .pb-b { animation: pb-mietimmobilienrecht-b var(--dauer) linear var(--verz) infinite; }

/* ===== versicherungsrecht · „Police" · 10 s · Form weich ===== */
.kopf[data-kopf="versicherungsrecht"] {
  --zeichen: 6;
  --zyklus: 10s;
  --k-verz: -2s;
  --winkel: 102deg;
  --kern: 18%;
  --rand-b: 38%;
  --licht: 244 248 255;
}
.kopf[data-kopf="versicherungsrecht"] .pb-licht { background: radial-gradient(34% 78% at 50% 40%, rgb(var(--licht) / calc(var(--la) * 0.85)) 0%, rgb(var(--licht) / calc(var(--la) * 0.55)) 45%, rgb(var(--licht) / calc(var(--la) * 0)) 100%); }
@keyframes pb-versicherungsrecht-zug {
  0% { transform: translateX(-85%); }
  30% { transform: translateX(-20%); }
  50% { transform: translateX(18%); }
  65% { transform: translateX(34%); }
  100% { transform: translateX(90%); }
}
@keyframes pb-versicherungsrecht-gegen {
  0% { transform: translateX(85%); }
  30% { transform: translateX(20%); }
  50% { transform: translateX(-18%); }
  65% { transform: translateX(-34%); }
  100% { transform: translateX(-90%); }
}
.kopf[data-kopf="versicherungsrecht"] .pb-licht { animation: pb-versicherungsrecht-zug var(--dauer) linear var(--verz) infinite, pb-versicherungsrecht-lop var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="versicherungsrecht"] .pb-fenster { animation: pb-versicherungsrecht-zug var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="versicherungsrecht"] .pb-gegen { animation: pb-versicherungsrecht-gegen var(--dauer) linear var(--verz) infinite; }
@keyframes pb-versicherungsrecht-lop {
  0% { opacity: 0.35; }
  50% { opacity: 0.85; }
  100% { opacity: 0.35; }
}
.kopf[data-kopf="versicherungsrecht"] .pb-a { text-shadow: var(--deckel), calc(-2.4px * var(--rk)) calc(-1.8px * var(--rk)) 0 rgb(var(--rh) / calc(0.95 * var(--rh-a))), calc(3.4px * var(--rk)) calc(2.8px * var(--rk)) calc(3px * var(--rk)) rgb(var(--rs) / calc(0.4 * var(--rs-a))), calc(1.3px * var(--rk)) calc(1.1px * var(--rk)) calc(0px * var(--rk)) rgb(var(--rs) / calc(0.26 * var(--rs-a))); }
@keyframes pb-versicherungsrecht-a {
  0% { opacity: 0.3; }
  50% { opacity: 0.62; }
  100% { opacity: 0.3; }
}
.kopf[data-kopf="versicherungsrecht"] .pb-a { animation: pb-versicherungsrecht-a var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="versicherungsrecht"] .pb-b { text-shadow: var(--deckel), calc(2.4px * var(--rk)) calc(-1.8px * var(--rk)) 0 rgb(var(--rh) / calc(0.95 * var(--rh-a))), calc(-3.4px * var(--rk)) calc(2.8px * var(--rk)) calc(3px * var(--rk)) rgb(var(--rs) / calc(0.4 * var(--rs-a))), calc(-1.3px * var(--rk)) calc(1.1px * var(--rk)) calc(0px * var(--rk)) rgb(var(--rs) / calc(0.26 * var(--rs-a))); }
@keyframes pb-versicherungsrecht-b {
  0% { opacity: 0; }
  50% { opacity: 0.1; }
  100% { opacity: 0.2; }
}
.kopf[data-kopf="versicherungsrecht"] .pb-b { animation: pb-versicherungsrecht-b var(--dauer) linear var(--verz) infinite; }
@keyframes pb-versicherungsrecht-daemmer {
  0% { opacity: 0.6; }
  50% { opacity: 0; }
  100% { opacity: 0.6; }
}
.kopf[data-kopf="versicherungsrecht"] .pb-daemmer { animation: pb-versicherungsrecht-daemmer var(--dauer) linear var(--verz) infinite; }

/* ===== insolvenzrecht · „Zeit" · 10 s · Form streifen ===== */
.kopf[data-kopf="insolvenzrecht"] {
  --zeichen: 4;
  --zyklus: 10s;
  --k-verz: -1.5s;
  --winkel: 100deg;
  --kern: 12%;
  --rand-b: 20%;
  --licht: 255 222 182;
  --amber: 255 176 110;
}
.kopf[data-kopf="insolvenzrecht"] .pb-licht { background: linear-gradient(var(--winkel), rgb(var(--licht) / calc(var(--la) * 0)) 33%, rgb(var(--licht) / calc(var(--la) * 0.8)) 41%, rgb(var(--licht) / calc(var(--la) * 0.86)) 59%, rgb(var(--licht) / calc(var(--la) * 0)) 67%); }
.kopf[data-kopf="insolvenzrecht"] .pb-licht::after { background: linear-gradient(var(--winkel), rgb(var(--amber) / calc(var(--la) * 0)) 33%, rgb(var(--amber) / calc(var(--la) * 0.85)) 41%, rgb(var(--amber) / calc(var(--la) * 0.9)) 59%, rgb(var(--amber) / calc(var(--la) * 0)) 67%); }
@keyframes pb-insolvenzrecht-licht {
  0% { transform: translateX(-80%) scaleX(1); }
  15% { transform: translateX(19%) scaleX(1.03); }
  50% { transform: translateX(35%) scaleX(1.1); }
  100% { transform: translateX(95%) scaleX(1.55); }
}
.kopf[data-kopf="insolvenzrecht"] .pb-licht { animation: pb-insolvenzrecht-licht var(--dauer) linear var(--verz) infinite; }
@keyframes pb-insolvenzrecht-zug {
  0% { transform: translateX(-80%); }
  15% { transform: translateX(19%); }
  50% { transform: translateX(35%); }
  100% { transform: translateX(95%); }
}
@keyframes pb-insolvenzrecht-gegen {
  0% { transform: translateX(80%); }
  15% { transform: translateX(-19%); }
  50% { transform: translateX(-35%); }
  100% { transform: translateX(-95%); }
}
.kopf[data-kopf="insolvenzrecht"] .pb-fenster { animation: pb-insolvenzrecht-zug var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="insolvenzrecht"] .pb-gegen { animation: pb-insolvenzrecht-gegen var(--dauer) linear var(--verz) infinite; }
@keyframes pb-insolvenzrecht-amber {
  0% { opacity: 0; }
  40% { opacity: 0.15; }
  100% { opacity: 0.95; }
}
.kopf[data-kopf="insolvenzrecht"] .pb-licht::after { animation: pb-insolvenzrecht-amber var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="insolvenzrecht"] .pb-a { text-shadow: var(--deckel), calc(-2.6px * var(--rk)) calc(-1.4px * var(--rk)) 0 rgb(var(--rh) / calc(0.95 * var(--rh-a))), calc(7px * var(--rk)) calc(3.2px * var(--rk)) calc(5px * var(--rk)) rgb(var(--rs) / calc(0.36 * var(--rs-a))), calc(2.6px * var(--rk)) calc(1.3px * var(--rk)) calc(0px * var(--rk)) rgb(var(--rs) / calc(0.28 * var(--rs-a))); }
@keyframes pb-insolvenzrecht-a {
  0% { opacity: 0.8; }
  50% { opacity: 0.72; }
  100% { opacity: 0.5; }
}
.kopf[data-kopf="insolvenzrecht"] .pb-a { animation: pb-insolvenzrecht-a var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="insolvenzrecht"] .pb-b { display: none; }

/* ===== kanzlei · „CK" + „Rechtsanwalt · Berlin-Charlottenburg" · 10 s · Form pfosten ===== */
.kopf[data-kopf="kanzlei"] {
  --zeichen: 2;
  --zyklus: 10s;
  --k-verz: -2s;
  --winkel: 102deg;
  --kern: 14%;
  --rand-b: 30%;
  --licht: 255 246 226;
  --zeile-lag: 1.2s;
}
.kopf[data-kopf="kanzlei"] .pb-licht { background: linear-gradient(var(--winkel), rgb(var(--licht) / calc(var(--la) * 0)) 16%, rgb(var(--licht) / calc(var(--la) * 0.78)) 30%, rgb(var(--licht) / calc(var(--la) * 0.82)) 47%, rgb(var(--licht) / calc(var(--la) * 0.26)) 49%, rgb(var(--licht) / calc(var(--la) * 0.26)) 51%, rgb(var(--licht) / calc(var(--la) * 0.82)) 53%, rgb(var(--licht) / calc(var(--la) * 0.74)) 69%, rgb(var(--licht) / calc(var(--la) * 0)) 83%); }
@keyframes pb-kanzlei-zug {
  0% { transform: translateX(-85%); }
  30% { transform: translateX(-20%); }
  50% { transform: translateX(27%); }
  65% { transform: translateX(43%); }
  100% { transform: translateX(90%); }
}
@keyframes pb-kanzlei-gegen {
  0% { transform: translateX(85%); }
  30% { transform: translateX(20%); }
  50% { transform: translateX(-27%); }
  65% { transform: translateX(-43%); }
  100% { transform: translateX(-90%); }
}
.kopf[data-kopf="kanzlei"] .pb-licht { animation: pb-kanzlei-zug var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="kanzlei"] .pb-fenster { animation: pb-kanzlei-zug var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="kanzlei"] .pb-gegen { animation: pb-kanzlei-gegen var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="kanzlei"] .pb-fenster--zeile { animation: pb-kanzlei-zug var(--dauer) linear calc(var(--verz) + var(--zeile-lag)) infinite; }
.kopf[data-kopf="kanzlei"] .pb-fenster--zeile .pb-gegen { animation: pb-kanzlei-gegen var(--dauer) linear calc(var(--verz) + var(--zeile-lag)) infinite; }
.kopf[data-kopf="kanzlei"] .pb-a { text-shadow: var(--deckel), calc(-2.4px * var(--rk)) calc(-1.8px * var(--rk)) 0 rgb(var(--rh) / calc(0.95 * var(--rh-a))), calc(3.4px * var(--rk)) calc(2.8px * var(--rk)) calc(3px * var(--rk)) rgb(var(--rs) / calc(0.4 * var(--rs-a))), calc(1.3px * var(--rk)) calc(1.1px * var(--rk)) calc(0px * var(--rk)) rgb(var(--rs) / calc(0.26 * var(--rs-a))); }
@keyframes pb-kanzlei-a {
  0% { opacity: 0.7; }
  50% { opacity: 0.62; }
  100% { opacity: 0.45; }
}
.kopf[data-kopf="kanzlei"] .pb-a { animation: pb-kanzlei-a var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="kanzlei"] .pb-fenster--zeile .pb-a { animation: pb-kanzlei-a var(--dauer) linear calc(var(--verz) + var(--zeile-lag)) infinite; }
.kopf[data-kopf="kanzlei"] .pb-b { text-shadow: var(--deckel), calc(2.4px * var(--rk)) calc(-1.8px * var(--rk)) 0 rgb(var(--rh) / calc(0.95 * var(--rh-a))), calc(-3.4px * var(--rk)) calc(2.8px * var(--rk)) calc(3px * var(--rk)) rgb(var(--rs) / calc(0.4 * var(--rs-a))), calc(-1.3px * var(--rk)) calc(1.1px * var(--rk)) calc(0px * var(--rk)) rgb(var(--rs) / calc(0.26 * var(--rs-a))); }
@keyframes pb-kanzlei-b {
  0% { opacity: 0; }
  50% { opacity: 0.08; }
  100% { opacity: 0.25; }
}
.kopf[data-kopf="kanzlei"] .pb-b { animation: pb-kanzlei-b var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="kanzlei"] .pb-fenster--zeile .pb-b { animation: pb-kanzlei-b var(--dauer) linear calc(var(--verz) + var(--zeile-lag)) infinite; }

/* ===== kontakt · „Termin" + „Marburger Straße 15 · 10789 Berlin" · 10 s · Form pfosten ===== */
.kopf[data-kopf="kontakt"] {
  --zeichen: 6;
  --zyklus: 10s;
  --k-verz: -1.5s;
  --winkel: 78deg;
  --kern: 14%;
  --rand-b: 30%;
  --licht: 255 212 168;
  --zeile-lag: 1.2s;
}
.kopf[data-kopf="kontakt"] .pb-licht { background: linear-gradient(var(--winkel), rgb(var(--licht) / calc(var(--la) * 0)) 16%, rgb(var(--licht) / calc(var(--la) * 0.78)) 30%, rgb(var(--licht) / calc(var(--la) * 0.82)) 47%, rgb(var(--licht) / calc(var(--la) * 0.26)) 49%, rgb(var(--licht) / calc(var(--la) * 0.26)) 51%, rgb(var(--licht) / calc(var(--la) * 0.82)) 53%, rgb(var(--licht) / calc(var(--la) * 0.74)) 69%, rgb(var(--licht) / calc(var(--la) * 0)) 83%); }
@keyframes pb-kontakt-zug {
  0% { transform: translateX(90%); }
  30% { transform: translateX(38%); }
  50% { transform: translateX(26%); }
  65% { transform: translateX(10%); }
  100% { transform: translateX(-85%); }
}
@keyframes pb-kontakt-gegen {
  0% { transform: translateX(-90%); }
  30% { transform: translateX(-38%); }
  50% { transform: translateX(-26%); }
  65% { transform: translateX(-10%); }
  100% { transform: translateX(85%); }
}
.kopf[data-kopf="kontakt"] .pb-licht { animation: pb-kontakt-zug var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="kontakt"] .pb-fenster { animation: pb-kontakt-zug var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="kontakt"] .pb-gegen { animation: pb-kontakt-gegen var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="kontakt"] .pb-fenster--zeile { animation: pb-kontakt-zug var(--dauer) linear calc(var(--verz) + var(--zeile-lag)) infinite; }
.kopf[data-kopf="kontakt"] .pb-fenster--zeile .pb-gegen { animation: pb-kontakt-gegen var(--dauer) linear calc(var(--verz) + var(--zeile-lag)) infinite; }
.kopf[data-kopf="kontakt"] .pb-a { text-shadow: var(--deckel), calc(2.6px * var(--rk)) calc(-1.4px * var(--rk)) 0 rgb(var(--rh) / calc(0.95 * var(--rh-a))), calc(-7px * var(--rk)) calc(3.2px * var(--rk)) calc(5px * var(--rk)) rgb(var(--rs) / calc(0.36 * var(--rs-a))), calc(-2.6px * var(--rk)) calc(1.3px * var(--rk)) calc(0px * var(--rk)) rgb(var(--rs) / calc(0.28 * var(--rs-a))); }
@keyframes pb-kontakt-a {
  0% { opacity: 0.7; }
  50% { opacity: 0.62; }
  100% { opacity: 0.45; }
}
.kopf[data-kopf="kontakt"] .pb-a { animation: pb-kontakt-a var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="kontakt"] .pb-fenster--zeile .pb-a { animation: pb-kontakt-a var(--dauer) linear calc(var(--verz) + var(--zeile-lag)) infinite; }
.kopf[data-kopf="kontakt"] .pb-b { text-shadow: var(--deckel), calc(-2.4px * var(--rk)) calc(-1.8px * var(--rk)) 0 rgb(var(--rh) / calc(0.95 * var(--rh-a))), calc(3.4px * var(--rk)) calc(2.8px * var(--rk)) calc(3px * var(--rk)) rgb(var(--rs) / calc(0.4 * var(--rs-a))), calc(1.3px * var(--rk)) calc(1.1px * var(--rk)) calc(0px * var(--rk)) rgb(var(--rs) / calc(0.26 * var(--rs-a))); }
@keyframes pb-kontakt-b {
  0% { opacity: 0; }
  50% { opacity: 0.08; }
  100% { opacity: 0.25; }
}
.kopf[data-kopf="kontakt"] .pb-b { animation: pb-kontakt-b var(--dauer) linear var(--verz) infinite; }
.kopf[data-kopf="kontakt"] .pb-fenster--zeile .pb-b { animation: pb-kontakt-b var(--dauer) linear calc(var(--verz) + var(--zeile-lag)) infinite; }

@media (max-width: 899px) {
  .kopf[data-marken-buehne="css"],
  .kopf[data-marken-buehne="css"][data-kopf="index"] {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    background: var(--k-grund-mobil);
  }
  .kopf .praegebuehne {
    --fs: min(9rem, calc(150vw / var(--zeichen, 6)));
    --wort-top: calc(52% - 0.41 * var(--fs));
    position: relative;
    inset: auto;
    flex: none;
    height: 50svh;
    min-height: 330px;
  }
  .kopf[data-kopf="index"] .praegebuehne {
    --fs: min(9rem, calc(150vw / var(--zeichen, 4)));
    height: 62svh;
    min-height: 380px;
  }
  .kopf[data-kopf="kanzlei"] .praegebuehne,
  .kopf[data-kopf="kontakt"] .praegebuehne {
    --wort-top: calc(46% - 0.41 * var(--fs));
  }
  .kopf .praegebuehne::before {
    background-size: 240px 240px;
  }
  .kopf .pb-wort,
  .kopf .pb-zeile {
    --rk: 0.75;
    text-align: center;
    padding-inline: var(--k-rand);
  }
  .kopf .pb-zeile {
    --rk: 0.5;
    padding-inline: calc(var(--k-rand) + 0.14em) var(--k-rand);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
  }
  .kopf .kopf__leiste {
    height: 72px;
  }
  .kopf .kopf__text {
    position: static;
    max-width: none;
    padding: 1.9rem var(--k-rand) 2.3rem;
    text-align: center;
  }
  .kopf .kopf__eyebrow {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.07em;
    text-wrap: balance;
  }
  .kopf .kopf__strich {
    vertical-align: -0.16em;
    margin-right: 0.6em;
  }
  .kopf .kopf__pointe {
    font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.35rem);
  }
  .kopf .kopf__beweis {
    margin-inline: auto;
    font-size: 1rem;
  }
  .kontaktleiste {
    grid-template-columns: 1fr 1fr;
    height: auto;
  }
  .kontaktleiste > * {
    padding: 0.95rem var(--k-rand, 5vw);
    min-height: 64px;
  }
  .kontaktleiste > :nth-child(2) {
    border-right: 0;
  }
  .kontaktleiste > :last-child {
    grid-column: 1 / -1;
    border-top: 1px solid rgb(246 243 236 / 0.14);
  }
  .kontaktleiste__wert {
    font-size: 0.98rem;
  }
}