/* =====================================================================
   site.css — Haut A „Briefbogen" · Rechtsanwalt Christian Korn
   Schritt 6 · @web-designer · 28.09.2026
   Tokens + Statik aus bau-brief.md §3/§6/§7, Sektionen aus _arbeit/_duell/haut-a.html
   (Duell-Sieger), Duell-Befunde §16 (a-e) hier behoben. Themenfest-Tokens
   werden auch von assets/css/kopf.css gelesen (fallback-Werte dort) — hier
   ist die eine Quelle.
   ===================================================================== */

:root {
  --papier: #f6f3ec;
  --flaeche: #ece7dc;
  --kante: #d9d2c3;
  --tinte: #141b2b;
  --meta: #5a6072;
  --marke: #243a73;
  --marke-hell: #9db4f0;
  --akzent: #a62a21;
  --akzent-hell: #f08a7e;
  --kalk-fest: #f6f3ec;
  --meta-fest: #c9cdd8;
  --dunkel-fest: #0f1420;
  --karte-fest: #182033;
  --buehne: #e7e0d2;
  --schatten: 74 56 28;
  --relief-hell: 255 253 247;
  --display: "Newsreader", "Sitka Display", "Sitka Banner", Georgia, serif;
  --text: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --gew-display: 500;
  --gew-praegung: 600;
  --ease: cubic-bezier(0.33, 0.72, 0.18, 1);
  --rand: 5vw;
  --radius: 2px;
  --knopf-text: #f6f3ec; /* Schrift auf --marke-Flächen, folgt dem Thema */
  /* Haken für den Manager (EINBAU § 3j): dies ist das Logo für den HELLEN Grund,
     die helle Fassung tauscht site.css im Dunkelmodus selbst (content:url). */
  --logo-hell: url("../logo/korn-logo.svg");
}

/* ---------- DUNKEL per Schalter: „Lampe auf Tintenkarton" (bau-brief §3) ---------- */
:root[data-thema="dunkel"] {
  --papier: #0f1420;
  --flaeche: #182033;
  --kante: #2a3348;
  --tinte: #ede9e0;
  --meta: #a3a9b8;
  --marke: #9db4f0;
  --marke-hell: #ede9e0;
  --akzent: #f08a7e;
  --akzent-hell: #f08a7e;
  --buehne: #182033;
  --schatten: 0 0 0;
  --relief-hell: 255 236 205;
  --knopf-text: #0f1420;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  background: var(--papier);
  color: var(--tinte);
  font: 400 1.0625rem/1.62 var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  scroll-behavior: smooth;
  transition:
    background 240ms var(--ease),
    color 240ms var(--ease);
}
body {
  overflow-x: clip;
  background: var(--papier);
  color: var(--tinte);
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  appearance: none;
  background: none;
  border: 0;
}
:focus-visible {
  outline: 2px solid var(--marke);
  outline-offset: 3px;
}

.huelle {
  width: min(1280px, calc(100vw - 2 * var(--rand)));
  margin-inline: auto;
}
.eyebrow {
  font: 600 0.8125rem/1.2 var(--text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--meta);
}
.akzent {
  color: var(--akzent);
}
.strich {
  display: inline-block;
  flex: none;
  width: 3px;
  height: 1.05em;
  background: var(--akzent);
  vertical-align: -0.16em;
  margin-right: 0.75em;
}
.h2 {
  font: var(--gew-display) clamp(1.9rem, 1.3rem + 2vw, 2.9rem)/1.08
    var(--display);
  letter-spacing: -0.015em;
}
.lead {
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.55;
  color: var(--meta);
  max-width: 36rem;
}
.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  height: 52px;
  padding: 0 1.6rem;
  background: var(--marke);
  color: var(--knopf-text);
  font: 600 1rem/1 var(--text);
  border-radius: var(--radius);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    transform 200ms var(--ease),
    box-shadow 200ms var(--ease);
}
.knopf:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -14px rgb(20 27 43 / 0.55);
}
.knopf:active {
  transform: scale(0.98);
}
.knopf svg {
  width: 18px;
  height: 18px;
}
.knopf--rand {
  background: transparent;
  color: var(--tinte);
  border: 1.5px solid var(--tinte);
  height: 46px;
}
.knopf--breit {
  width: 100%;
  justify-content: center;
  background: var(--marke-hell);
  color: var(--dunkel-fest);
}
.textlink {
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity 160ms ease;
}
.textlink:hover {
  opacity: 0.7;
}

/* ---------- Top-Hinweis ---------- */
.hinweis {
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--dunkel-fest);
  color: var(--kalk-fest);
  font: 600 0.8125rem/1 var(--text);
  letter-spacing: 0.04em;
  text-align: center;
}

/* ---------- Nav-Leiste (im Kopf) ---------- */
.leiste__logo {
  display: flex;
  align-items: center;
}
.leiste__logo img {
  height: 60px;
  width: auto;
}
.leiste__nav {
  display: flex;
  align-items: center;
  gap: 2.1rem;
  font: 500 0.98rem/1 var(--text);
  position: relative;
}
.leiste__nav > a {
  padding: 0.4rem 0;
}
.leiste__nav .pfeil {
  font-size: 0.7em;
  margin-left: 0.3em;
  vertical-align: 0.1em;
  transition: transform 200ms var(--ease);
}
[data-klapp-offen="true"] .pfeil {
  transform: rotate(180deg);
}
.schalter {
  width: 40px;
  height: 40px;
  border: 1px solid rgb(var(--schatten) / 0.35);
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 160ms var(--ease);
}
.schalter:active {
  transform: scale(0.94);
}
.schalter span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--tinte) 50%, transparent 50%);
  border: 1.5px solid var(--tinte);
}

/* ---------- Klappmenü „Rechtsgebiete" (schwebende Karte 2x3) ---------- */
.klappmenue {
  position: absolute;
  top: calc(100% + 0.7rem);
  right: 0;
  transform: translateY(4px);
  width: min(44rem, 90vw);
  background: var(--papier);
  border-radius: 4px;
  box-shadow: 0 24px 60px -20px rgb(20 27 43 / 0.35);
  padding: 1.25rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.2rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 200ms var(--ease),
    transform 200ms var(--ease),
    visibility 0s linear 200ms;
  z-index: 40;
}
.klappmenue[data-offen="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity 200ms var(--ease),
    transform 200ms var(--ease),
    visibility 0s linear 0s;
}
.klappmenue a {
  display: block;
  padding: 0.85rem 0.9rem;
  border-radius: 2px;
  transition:
    background 160ms ease,
    transform 160ms var(--ease);
}
.klappmenue a:hover,
.klappmenue a:focus-visible {
  background: var(--flaeche);
}
.klappmenue a .knr {
  display: block;
  font: 400 1rem/1 var(--display);
  color: var(--meta);
  margin-bottom: 0.35rem;
}
.klappmenue a .knm {
  display: block;
  font: var(--gew-display) 1.15rem/1.2 var(--display);
  margin-bottom: 0.3rem;
}
.klappmenue a .kpr {
  display: block;
  font-size: 0.8125rem;
  color: var(--meta);
  line-height: 1.4;
}
@media (max-width: 899px) {
  .klappmenue {
    grid-template-columns: 1fr;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    transform: translateY(-4px);
    width: auto;
    max-height: calc(100svh - 72px);
    overflow-y: auto;
    border-radius: 0;
    box-shadow: 0 24px 40px -20px rgb(20 27 43 / 0.35);
  }
  .klappmenue[data-offen="true"] {
    transform: translateY(0);
  }
}

/* ---------- Fakten-Leiste ---------- */
.fakten {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--kante);
}
.fakt {
  padding: 2.4rem 2.2rem 2.2rem;
  border-right: 1px solid var(--kante);
}
.fakt:first-child {
  padding-left: var(--rand);
}
.fakt:last-child {
  border-right: 0;
}
.fakt__wert {
  font: var(--gew-display) clamp(2.8rem, 2rem + 3vw, 4.4rem)/1 var(--display);
  letter-spacing: -0.02em;
}
.fakt__label {
  margin-top: 0.7rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--meta);
  max-width: 15rem;
}

/* ---------- Manifest (Bruch 1: Foto über linke Kante) ---------- */
.manifest {
  overflow-x: clip;
  display: grid;
  grid-template-columns: 46vw 1fr;
  gap: 5vw;
  align-items: end;
  margin-top: 7rem;
  padding-right: var(--rand);
}
.manifest__bild {
  margin-left: -4vw;
}
.manifest__bild img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.manifest__satz {
  font: var(--gew-display) clamp(2rem, 1.2rem + 2.2vw, 3.1rem)/1.12
    var(--display);
  letter-spacing: -0.015em;
  max-width: 34rem;
}
.manifest__folge {
  margin-top: 1.4rem;
  font-size: 1.18rem;
  line-height: 1.55;
  max-width: 32rem;
  color: var(--meta);
}
.manifest__zeichen {
  margin-top: 1.8rem;
  font: 600 0.95rem/1.3 var(--text);
}

/* ---------- Register + Blatt (Bruch 2: Blatt über rechte Kante) ---------- */
.register {
  overflow-x: clip;
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr) 34vw;
  gap: 3.5rem;
  margin-top: 3rem;
  padding-left: var(--rand);
  align-items: start;
}
.register__meta {
  padding-top: 1.4rem;
}
.register__meta .h2 {
  font-size: 2.2rem;
  margin: 0.9rem 0 1.2rem;
}
.register__meta p {
  color: var(--meta);
  font-size: 0.98rem;
  margin-bottom: 1.4rem;
}
.zeile-rg {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) 1.6rem;
  gap: 1.2rem;
  padding: 1.3rem 0 1.35rem;
  border-top: 1px solid var(--kante);
  position: relative;
  transition: transform 160ms var(--ease);
}
.zeile-rg:last-child {
  border-bottom: 1px solid var(--kante);
}
.zeile-rg:hover,
.zeile-rg:focus-visible {
  transform: translateX(4px);
}
.zeile-rg__nr {
  font: 400 1.45rem/1.2 var(--display);
  color: var(--meta);
}
.zeile-rg__titel {
  display: block;
  font: var(--gew-display) 1.55rem/1.15 var(--display);
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
  hyphens: auto;
}
@media (max-width: 430px) {
  .zeile-rg__titel {
    font-size: 1.28rem;
  }
}
.zeile-rg__text {
  display: block;
  margin-top: 0.35rem;
  color: var(--meta);
  font-size: 1rem;
  line-height: 1.5;
}
.zeile-rg__pfeil {
  align-self: center;
  font-size: 1.3rem;
}
.zeile-rg[aria-current]::before {
  content: "";
  position: absolute;
  left: -1.4rem;
  top: 1.45rem;
  width: 3px;
  height: 1.6rem;
  background: var(--akzent);
}
.blatt {
  position: relative;
  height: 36rem;
  margin-right: -4vw;
  /* Hamada 29.09.2026, 22:37: „DER HINTERGRUND VON DEN BILDER IST GENAU SO HELL WIE DIE SCHRIFT“ — Blatt dunkel, Schrift hell */
  background: var(--dunkel-fest);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgb(var(--schatten) / 0.08),
    0 40px 70px -40px rgb(var(--schatten) / 0.55);
  transition: box-shadow 480ms var(--ease);
}
.blatt__wort {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 2.2rem;
  text-align: left;
  justify-content: start;
}
.blatt__wort span {
  font: var(--gew-praegung) clamp(3.6rem, 5.8vw, 6rem)/0.9 var(--display);
  color: var(--kalk-fest);
  letter-spacing: -0.03em;
}
.blatt__kopf,
.blatt__fuss {
  position: absolute;
  z-index: 6;
  left: 2.2rem;
  right: 2.2rem;
  font: 600 0.8125rem/1.3 var(--text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.blatt__kopf {
  top: 2rem;
  color: var(--meta-fest);
}
.blatt__fuss {
  bottom: 2rem;
  color: var(--kalk-fest);
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 1rem;
}

/* ---------- Ablauf + Mitbringliste ---------- */
.mandat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 6vw;
  margin-top: 8rem;
}
.mandat__kopf {
  margin-bottom: 2.6rem;
}
.mandat__kopf .h2 {
  margin: 0.8rem 0 1rem;
}
.schritt {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr);
  padding: 2rem 0;
  border-top: 1px solid var(--kante);
}
.schritt__nr {
  font: var(--gew-display) 3rem/1 var(--display);
  color: var(--marke);
}
.schritt--nummeriert .schritt__nr {
  counter-increment: schrittnr;
}
.schritt--nummeriert .schritt__nr::before {
  content: counter(schrittnr);
}
.schritt h3 {
  font: 600 1.25rem/1.3 var(--text);
  margin-bottom: 0.45rem;
}
.schritt p {
  color: var(--meta);
}
.liste {
  position: sticky;
  top: 6rem;
  background: var(--papier);
  padding: 2.6rem 2.6rem 2.2rem;
  box-shadow:
    0 1px 0 rgb(var(--schatten) / 0.08),
    0 36px 60px -36px rgb(var(--schatten) / 0.5);
  border: 1px solid var(--kante);
}
.liste h3 {
  font: var(--gew-display) 1.9rem/1.12 var(--display);
  letter-spacing: -0.01em;
  margin-bottom: 1.3rem;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.6rem;
}
.chip {
  height: 36px;
  padding: 0 0.95rem;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--kante);
  font: 500 0.9rem/1 var(--text);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  transition:
    transform 160ms var(--ease),
    background 160ms ease,
    color 160ms ease,
    border-color 160ms ease;
}
.chip:active {
  transform: scale(0.97);
}
.chip[aria-pressed="true"] {
  background: var(--marke);
  border-color: var(--marke);
  color: var(--knopf-text);
}
.haken {
  list-style: none;
  display: grid;
  gap: 0.85rem;
  margin-bottom: 1.6rem;
  min-height: var(--haken-min-h, auto);
}
.haken li {
  display: grid;
  grid-template-columns: 1.35rem 1fr;
  gap: 0.8rem;
  line-height: 1.45;
}
.haken li::before {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  border: 1.5px solid var(--tinte);
  margin-top: 0.18rem;
  border-radius: 1px;
}
.liste__notiz {
  font-size: 0.88rem;
  color: var(--meta);
  padding-top: 1.1rem;
  border-top: 1px solid var(--kante);
  margin-bottom: 1.3rem;
}
.liste__knoepfe {
  display: flex;
  gap: 1.6rem;
  align-items: center;
  flex-wrap: wrap;
}
noscript .haken-alle li {
  margin-bottom: 0.4rem;
}

/* ---------- Statement + Fach-Hinweis ---------- */
.aussage {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 5vw;
  align-items: center;
  margin-top: 4.5rem;
}
.aussage__wort {
  font: var(--gew-display) clamp(6rem, 3rem + 9vw, 11.5rem)/0.86 var(--display);
  letter-spacing: -0.04em;
}
.hinweiskarte {
  margin-top: 2.4rem;
  max-width: 36rem;
  padding: 1.6rem 1.8rem 1.7rem;
  background: var(--flaeche);
  border-left: 3px solid var(--akzent);
}
.hinweiskarte b {
  display: block;
  font: 600 1.12rem/1.35 var(--text);
  margin-bottom: 0.5rem;
}
.aussage__bild img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

/* ---------- Kanzlei-Teaser (Bruch 3: Tafel überlappt Foto) ---------- */
.kanzlei-teaser {
  overflow-x: clip;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  margin-top: 6rem;
}
.kanzlei-teaser__text {
  padding: 0 7rem 0 var(--rand);
}
.kanzlei-teaser__text .h2 {
  margin-bottom: 1.1rem;
}
.kanzlei-teaser__text p {
  color: var(--meta);
  max-width: 30rem;
  margin-bottom: 1.6rem;
  font-size: 1.12rem;
}
.kanzlei-teaser__bild {
  position: relative;
}
.kanzlei-teaser__bild img {
  width: 100%;
  aspect-ratio: 16/11;
  object-fit: cover;
}
.tafel {
  position: absolute;
  left: -7rem;
  bottom: 2.6rem;
  width: 15rem;
  height: 15rem;
  background: var(--buehne);
  display: grid;
  place-items: center;
  box-shadow:
    0 1px 0 rgb(var(--schatten) / 0.08),
    0 30px 50px -28px rgb(var(--schatten) / 0.55);
}
.tafel span.wort {
  font: var(--gew-praegung) 8.4rem/1 var(--display);
  color: var(--tinte);
  letter-spacing: -0.02em;
}
.tafel__name {
  position: absolute;
  z-index: 6;
  left: 1.1rem;
  bottom: 0.9rem;
  font: 600 0.72rem/1.2 var(--text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--meta);
}
@media (max-width: 900px) {
  .tafel {
    position: static;
    width: 9rem;
    height: 9rem;
    margin-top: 1.5rem;
  }
  .tafel span.wort {
    font-size: 5rem;
  }
}

/* ---------- Bewertungen: Kopfzeile + Laufband nach rechts (bewertungs-widget, GESETZ Kap. 9) ---------- */
.stimmen {
  margin-top: 8rem;
}
.stimmen__kopf {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  flex-wrap: wrap;
}
.stimmen__schnitt {
  font: var(--gew-display) 3.2rem/1 var(--display);
  letter-spacing: -0.02em;
}
.stimmen__sterne {
  color: var(--akzent);
  font-size: 1.5rem;
  letter-spacing: 0.12em;
}
.stimmen__zahl {
  font: 500 1.1rem/1.3 var(--text);
  color: var(--meta);
}
.band {
  margin-top: 2.2rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 6%,
    #000 94%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 6%,
    #000 94%,
    transparent
  );
}
.spur {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: lauf 40s linear infinite reverse; /* GESETZ Kap. 9: zieht nach rechts, zügig */
}
.band:hover .spur,
.band:focus-within .spur,
.band.pausiert .spur {
  animation-play-state: paused;
}
@keyframes lauf {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(-50% - 0.75rem), 0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .spur {
    animation: none;
  }
  .band {
    overflow-x: auto;
  }
}
.stimme {
  width: 25rem;
  flex: 0 0 auto;
  padding: 2rem 2rem 1.6rem;
  background: var(--flaeche);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.4rem;
}
.stimme p {
  font: 400 1.18rem/1.45 var(--display);
  white-space: pre-line;
}
.stimme footer {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.9rem;
  color: var(--meta);
}
.ini {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--papier);
  display: grid;
  place-items: center;
  font: 600 0.8rem/1 var(--text);
  color: var(--tinte);
  border: 1px solid var(--kante);
  flex: none;
}

/* ---------- Bewerten-Aufruf (die EINE dunkle Fläche, Kap. 9) ---------- */
[data-bewerten-cta] {
  position: relative;
  margin-top: 2.5rem;
  padding: 6.5rem 0;
  overflow: hidden;
  background: var(--dunkel-fest);
  isolation: isolate;
}
[data-bewerten-cta] .praegebuehne {
  position: absolute;
  inset: 0;
  background: var(--dunkel-fest);
  overflow: hidden;
  pointer-events: none;
}
[data-bewerten-cta] .pb-grund {
  position: absolute;
  inset: 0;
  /* unsichtbare Praegung (1,06:1) — Hamada 29.09.2026, 22:37: keine Schrift, die so hell/dunkel ist wie ihr Grund */
  display: none;
  place-items: center;
}
[data-bewerten-cta] .pb-wort {
  font: var(--gew-praegung) clamp(6rem, 5rem + 8vw, 12rem)/1 var(--display);
  letter-spacing: -0.03em;
  color: transparent;
  text-shadow:
    0 -1px 0 rgb(255 236 205 / 0.16),
    0 2px 2px rgb(0 0 0 / 0.55);
}
.bewerten-cta__karte {
  position: relative;
  z-index: 6;
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
  padding: 3.2rem 3rem;
  background: var(--karte-fest);
  color: var(--kalk-fest);
  border: 1px solid rgb(246 243 236/0.14);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px -30px rgb(0 0 0/0.7);
}
.bewerten-cta__karte .eyebrow {
  color: var(--meta-fest);
}
.bewerten-cta__karte h2 {
  font: 600 1.35rem/1.3 var(--text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 0.6rem;
}
.sterne-reihe {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin: 1.5rem 0 1.9rem;
}
.sterne-reihe svg {
  width: 2.3rem;
  height: 2.3rem;
  fill: var(--akzent-hell);
}

/* ---------- Terminanfrage + Karte ---------- */
.anfrage {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 5vw;
  margin-top: 7rem;
}
.anfrage__kopf .h2 {
  margin: 0.8rem 0 1rem;
}
.person {
  display: grid;
  grid-template-columns: 5.2rem 1fr;
  gap: 1.2rem;
  align-items: center;
  margin: 2.2rem 0 1.6rem;
  padding: 1.3rem 0;
  border-block: 1px solid var(--kante);
}
.person__ini {
  width: 5.2rem;
  height: 5.2rem;
  background: var(--buehne);
  display: grid;
  place-items: center;
  font: var(--gew-praegung) 2.5rem/1 var(--display);
  color: var(--tinte);
}
.person b {
  display: block;
  font: 600 1.1rem/1.3 var(--text);
}
.person span {
  color: var(--meta);
  font-size: 0.95rem;
}
.kontaktzeilen {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 2rem;
}
.karte-rahmen {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--flaeche);
  overflow: hidden;
}
.karte-rahmen iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.karte-route {
  display: inline-block;
  margin-top: 0.9rem;
}

.formular {
  background: var(--papier);
  border: 1px solid var(--kante);
  padding: 2.4rem;
}
.formular--kurz {
  padding: 2rem;
}
.vertraulich {
  display: grid;
  grid-template-columns: 3px 1fr;
  gap: 1rem;
  margin-bottom: 1.8rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--meta);
}
.vertraulich::before {
  content: "";
  background: var(--akzent);
}
.felder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem 1.2rem;
}
.feld {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}
.feld--voll {
  grid-column: 1/-1;
}
.feld label {
  font: 600 0.85rem/1.2 var(--text);
}
.feld input,
.feld select,
.feld textarea {
  height: 48px;
  border: 1px solid var(--kante);
  background: color-mix(in srgb, var(--papier) 92%, var(--tinte) 4%);
  padding: 0 0.9rem;
  font-size: 0.95rem;
  border-radius: var(--radius);
  width: 100%;
  min-width: 0;
  transition: border-color 160ms ease;
}
.feld input:focus-visible,
.feld select:focus-visible,
.feld textarea:focus-visible {
  border-color: var(--marke);
}
.feld textarea {
  height: 104px;
  padding-top: 0.8rem;
  resize: vertical;
}
.einwilligung {
  display: grid;
  grid-template-columns: 1.3rem 1fr;
  gap: 0.7rem;
  align-items: start;
  margin: 1.5rem 0 1.4rem;
  font-size: 0.9rem;
  color: var(--meta);
}
.einwilligung input {
  width: 1.1rem;
  height: 1.1rem;
  border: 1.5px solid var(--tinte);
  margin-top: 0.15rem;
  accent-color: var(--marke);
}
.antwort {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  color: var(--meta);
}
.hp-feld {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.formular[data-gesendet="true"] .felder,
.formular[data-gesendet="true"] .einwilligung,
.formular[data-gesendet="true"] .vertraulich,
.formular[data-gesendet="true"] .antwort,
.formular[data-gesendet="true"] .knopf {
  display: none;
}
.formular__danke {
  display: none;
  font: var(--gew-display) 1.3rem/1.4 var(--display);
}
.formular[data-gesendet="true"] .formular__danke {
  display: block;
}
.formular__fehler {
  margin-top: 0.9rem;
  color: var(--akzent);
  font-weight: 600;
}

/* ---------- Footer ---------- */
.fuss {
  margin-top: 5rem;
  background: var(--flaeche);
  padding: 4rem 0 2.4rem;
}
.fuss__raster {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 3rem;
}
.fuss h4 {
  font: 600 0.78rem/1.2 var(--text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--meta);
  margin-bottom: 1rem;
}
.fuss li {
  list-style: none;
  margin-bottom: 0.45rem;
  font-size: 0.97rem;
}
.fuss li a:hover {
  text-decoration: underline;
}
.fuss__logo img {
  height: 38px;
  width: auto;
  margin-bottom: 1.2rem;
}
.fuss__adresse {
  color: var(--meta);
  font-size: 0.92rem;
  margin-top: 0.6rem;
}
.fuss__unten {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--kante);
  font-size: 0.85rem;
  color: var(--meta);
}

/* ---------- Anruf-Knopf fest (WEB-CREW Schritt 6, Duell-Befund d in kopf-css gelöst) ---------- */
.anruf {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 30;
  height: 54px;
  padding: 0 1.35rem 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--tinte);
  color: var(--papier);
  font: 600 1rem/1 var(--text);
  border-radius: 27px;
  box-shadow: 0 14px 34px -12px rgb(20 27 43/0.55);
}
.anruf svg {
  width: 20px;
  height: 20px;
}

/* ---------- Innenseiten: Sub-Kopf-Hülle, Unterseiten-Rhythmus ---------- */
.sub {
  max-width: 44rem;
  margin: 5rem auto 0;
  padding-inline: var(--rand);
}
.sub p + p {
  margin-top: 1rem;
}
.sub h1 {
  font: var(--gew-display) clamp(2rem, 1.4rem + 2vw, 3rem)/1.1 var(--display);
  margin-bottom: 1.2rem;
}
.sub .lead {
  max-width: none;
}

/* ---------- Reveal (Lichtzug-Reveal, emil-design-eng: nur transform/opacity) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 760ms var(--ease),
    transform 760ms var(--ease);
}
[data-reveal].sichtbar {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- 404 ---------- */
.f404 {
  text-align: center;
  padding: 7rem var(--rand) 5rem;
}
.f404__zahl {
  font: var(--gew-praegung) clamp(6rem, 5rem + 6vw, 11rem)/0.9 var(--display);
  color: var(--akzent);
}
.f404__register {
  max-width: 32rem;
  margin: 2.5rem auto 0;
  text-align: left;
}

@media (max-width: 900px) {
  .register,
  .mandat,
  .aussage,
  .kanzlei-teaser,
  .anfrage,
  .manifest {
    grid-template-columns: 1fr;
  }
  .register {
    padding-inline: var(--rand);
  }
  .manifest {
    padding-inline: var(--rand);
  }
  .manifest__bild {
    margin-left: 0;
  }
  .register .blatt {
    margin-right: 0;
    height: 22rem;
  }
  .fakten {
    grid-template-columns: 1fr 1fr;
  }
  .fuss__raster {
    grid-template-columns: 1fr 1fr;
    gap: 2.2rem;
  }
  .nur-desktop {
    display: none;
  }
  .leiste__logo img {
    height: 26px;
  }
  .leiste__nav {
    gap: 1rem;
    font-size: 0.86rem;
  }
  .schalter {
    width: 32px;
    height: 32px;
  }
  .kanzlei-teaser__text {
    padding-inline: var(--rand);
  }
  .felder {
    grid-template-columns: 1fr;
  }
  .anfrage {
    margin-top: 4rem;
  }
  .mandat,
  .manifest,
  .register,
  .aussage,
  .kanzlei-teaser {
    margin-top: 4rem;
  }
}

/* ---------- Print (print-styles) ---------- */
@media print {
  .anruf,
  .hinweis,
  [data-bewerten-cta],
  .band,
  .kopf .kopf__leiste,
  .schalter,
  .praegebuehne {
    display: none !important;
  }
  a[href]::after {
    content: none;
  }
  body {
    background: #fff;
    color: #000;
  }
  .liste {
    position: static;
    box-shadow: none;
    border: 1px solid #999;
  }
}

/* Nur für Screenreader (Bewertungs-Kopfzeile: die sichtbare Zahl zählt hoch) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Handy-Menü (< 900 px) — Knopf + Blatt kommen aus site.js ---------- */
.menue-knopf {
  display: none;
}
.mobil-menue {
  display: none;
}
@media (max-width: 899px) {
  .leiste__nav > a {
    display: none;
  }
  .leiste__nav {
    gap: 0.6rem;
  }
  .leiste-einfach {
    gap: 0.6rem;
  }
  .leiste-einfach .leiste__logo {
    margin-right: auto;
  }
  .menue-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 36px;
    padding: 0 0.9rem 0 0.75rem;
    border: 1px solid rgb(var(--schatten) / 0.35);
    border-radius: 18px;
    background: transparent;
    color: inherit;
    font: 600 0.85rem/1 var(--text);
    cursor: pointer;
  }
  .menue-knopf__striche {
    display: grid;
    gap: 4px;
    width: 14px;
  }
  .menue-knopf__striche i {
    display: block;
    height: 1.5px;
    background: currentColor;
    transition: transform 200ms var(--ease);
  }
  .menue-knopf[aria-expanded="true"] .menue-knopf__striche i:first-child {
    transform: translateY(2.75px) rotate(45deg);
  }
  .menue-knopf[aria-expanded="true"] .menue-knopf__striche i:last-child {
    transform: translateY(-2.75px) rotate(-45deg);
  }
  .menue-knopf:focus-visible,
  .mobil-menue a:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 3px;
  }

  /* Leiste bleibt oben, sobald der Kopf aus dem Bild ist */
  html[data-leiste-fest] .kopf {
    z-index: 40;
  }
  html[data-leiste-fest] .kopf .kopf__leiste {
    position: fixed;
    height: 60px;
    background: var(--k-grund-mobil);
    box-shadow: 0 10px 24px -18px rgb(20 27 43 / 0.45);
  }
  html[data-leiste-fest] .kopf .leiste__logo img {
    height: 22px;
  }
  .leiste-einfach {
    position: sticky;
    top: 0;
    z-index: 40;
  }

  .mobil-menue {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 60px;
    z-index: 45;
    overflow-y: auto;
    background: var(--papier);
    color: var(--tinte);
    border-top: 1px solid var(--kante);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      opacity 200ms var(--ease),
      transform 200ms var(--ease),
      visibility 0s linear 200ms;
  }
  .mobil-menue[data-offen="true"] {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity 220ms var(--ease),
      transform 220ms var(--ease);
  }
  .mobil-menue__liste {
    display: flex;
    flex-direction: column;
    padding: 1.2rem var(--rand, 5vw) 3rem;
  }
  .mobil-menue__liste a {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--kante);
    font: 500 1.5rem/1.2 var(--display);
    color: var(--tinte);
  }
  .mobil-menue__liste a.mobil-menue__unter {
    padding: 0.6rem 0 0.6rem 1.1rem;
    font: 500 1rem/1.3 var(--text);
    color: var(--meta);
  }
  .mobil-menue__liste a[aria-current="page"] {
    color: var(--akzent);
  }
  .mobil-menue__liste a.mobil-menue__tel {
    margin-top: 1.6rem;
    padding: 1rem 1.2rem;
    border: 0;
    border-radius: 999px;
    background: var(--tinte);
    color: var(--papier);
    font: 600 1rem/1 var(--text);
    text-align: center;
  }
  html[data-menue-offen] .anruf {
    opacity: 0;
    visibility: hidden;
  }
}

/* Fakten am Handy: lange Wörter („Rechtsanwaltskammer") trennen statt anschneiden */
@media (max-width: 899px) {
  .fakten > * {
    min-width: 0;
  }
  .fakt {
    padding: 1.8rem 1.1rem 1.6rem;
  }
  .fakt__label {
    hyphens: auto;
    overflow-wrap: break-word;
  }
}

/* Dunkelmodus: helle Wortmarke statt der schwarzen (eigene Datei, kein Filter) */
:root[data-thema="dunkel"] .leiste__logo img[src$="korn-logo.svg"],
:root[data-thema="dunkel"] .fuss__logo img[src$="korn-logo.svg"] {
  content: url("../logo/korn-logo-hell.svg");
}

/* Dunkle Kopfleiste (bewerten.html): Schalter + Menü-Knopf mit heller Schrift, themenfest */
.leiste-dunkel {
  --tinte: var(--kalk-fest);
  --schatten: 246 243 236;
  color: var(--kalk-fest);
}

/* Lange Knopf-Texte am Handy: Höhe wächst mit, Zeilen atmen */
@media (max-width: 899px) {
  .knopf {
    height: auto;
    min-height: 52px;
    padding-block: 0.85rem;
    line-height: 1.3;
    text-align: center;
    justify-content: center;
  }
}

/* Kanzlei-Einleitung am Handy: Monogramm-Tafel über dem Text statt daneben */
@media (max-width: 899px) {
  .kanzlei-intro {
    grid-template-columns: 1fr !important;
    gap: 1.6rem;
  }
  .kanzlei-intro .tafel {
    width: 9rem !important;
    height: 9rem !important;
  }
  .kanzlei-intro .tafel .wort > span {
    font-size: 4.8rem !important;
  }
}

/* ---------- Häufige Fragen (Rechtsgebiet-Seiten; deckt sich mit dem FAQ-Schema) ---------- */
.fragen {
  max-width: 44rem;
  margin: 4.5rem auto 0;
  padding-inline: var(--rand);
}
.fragen__liste {
  margin-top: 1rem;
  border-top: 1px solid var(--kante);
}
.frage {
  border-bottom: 1px solid var(--kante);
}
.frage summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.15rem 0;
  font: var(--gew-display) 1.25rem/1.3 var(--display);
  color: var(--tinte);
}
.frage summary::-webkit-details-marker {
  display: none;
}
.frage summary::after {
  content: "+";
  flex: none;
  font: 400 1.4rem/1 var(--text);
  color: var(--akzent);
  transition: transform 200ms var(--ease);
}
.frage[open] summary::after {
  transform: rotate(45deg);
}
.frage summary:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
}
.frage:not([open]) p {
  display: none; /* geschlossene Antwort ohne Layout-Box (Chrome legt sie sonst unsichtbar über die Folgesektion) */
}
.frage p {
  padding: 0 0 1.3rem;
  color: var(--meta);
  line-height: 1.6;
}

/* Sprungmarken (#anfrage, #kurzanfrage …) landen nicht unter der festen Handy-Leiste */
[id] {
  scroll-margin-top: 1.5rem;
}
@media (max-width: 899px) {
  [id] {
    scroll-margin-top: 5.5rem;
  }
}

/* Anruf-Knopf tritt zurück, solange ein Formular oder der Fuß im Bild ist (verdeckt nie Felder/Links) */
html[data-anruf-weg] .anruf {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Kopf: Luft zwischen Überschrift und Handlungsknopf */
.kopf .kopf__cta {
  margin-top: 1.5rem;
}

/* Fuß-Logo als zweites <img> (Startseite): hell nur im Dunkelmodus */
.fuss__logo .nur-dunkel {
  display: none;
}
:root[data-thema="dunkel"] .fuss__logo .nur-dunkel {
  display: inline;
}
:root[data-thema="dunkel"] .fuss__logo:has(.nur-dunkel) img:not(.nur-dunkel) {
  display: none;
}

/* Einfache Seiten: Hauptpunkte am PC in der Kopfleiste */
.leiste-einfach {
  gap: 2rem;
}
.leiste-einfach .leiste__logo {
  margin-right: auto;
}
.leiste-links {
  display: flex;
  gap: 2.1rem;
  font: 500 0.98rem/1 var(--text);
}
.leiste-links a {
  padding: 0.4rem 0;
}
@media (max-width: 899px) {
  .leiste-links {
    display: none;
  }
}

/* ---------- Sektionsbilder (Korrektur 29.09.2026, Hamada: „da fehlen auch Bilder“) ----------
   Bildpaar = Foto im Anschnitt an der linken Viewport-Kante + Text (Bruch 1 „Der Anschnitt“, §6).
   Bildband = breites Foto, links randabfallend, rechts bündig mit der Hülle (rechtsgebiete.html).
   Keine Umrandung, kein Text auf dem Bild; die Sektion clippt selbst (Duell-Befund §16a). */
.bildpaar {
  overflow-x: clip;
  display: grid;
  grid-template-columns: 56vw minmax(0, 1fr);
  gap: 5vw;
  align-items: center;
  margin-top: 6rem;
  padding-right: max(var(--rand), calc((100vw - 1280px) / 2));
}
/* height:auto, sonst gewinnt das height-Attribut (900) gegen aspect-ratio */
.aussage__bild img,
.kanzlei-teaser__bild img,
.bildpaar__bild img,
.bildband img {
  height: auto;
}
.bildpaar__bild img,
.bildband img {
  width: 100%;
  object-fit: cover;
  background: var(--flaeche);
}
.bildpaar__bild img {
  aspect-ratio: 3 / 2;
}
.bildpaar__text {
  max-width: 32rem;
}
.bildpaar__text .hinweiskarte {
  max-width: none;
}
.bildband {
  overflow-x: clip;
  margin-top: 3.5rem;
  padding-right: max(var(--rand), calc((100vw - 1280px) / 2));
}
.bildband img {
  aspect-ratio: 21 / 9;
}
@media (max-width: 900px) {
  .bildpaar {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 4rem;
    padding-inline: var(--rand);
  }
  .bildpaar__bild {
    margin-inline: calc(-1 * var(--rand));
  }
  .bildpaar__bild img {
    aspect-ratio: 4 / 3;
  }
  .bildband {
    margin-top: 2.5rem;
    padding-right: 0;
  }
  .bildband img {
    aspect-ratio: 4 / 3;
  }
}

/* kanzlei.html: Einleitungssatz trägt neben dem Stimmungsbild als Satz, nicht als Fußnote */
.kanzlei-intro-bild .lead {
  font: var(--gew-display) clamp(1.45rem, 1.05rem + 1.05vw, 2.05rem)/1.3
    var(--display);
  letter-spacing: -0.01em;
  color: var(--tinte);
}

:root[data-thema="dunkel"] .blatt {
  background: var(--karte-fest);
}

/* Porträt Christian Korn (Hamada 29.09.2026, 23:29 „einbauen“) — Hochformat statt 16:11 */
.kanzlei-teaser--portraet {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}
.kanzlei-teaser--portraet .kanzlei-teaser__bild {
  max-width: 34rem;
}
.kanzlei-teaser--portraet .kanzlei-teaser__bild img {
  aspect-ratio: 4 / 5;
  object-position: 50% 30%;
}
@media (max-width: 899px) {
  .kanzlei-teaser--portraet {
    grid-template-columns: 1fr;
  }
  .kanzlei-teaser--portraet .kanzlei-teaser__bild {
    max-width: none;
  }
}