@import url("schrift.css");

/* ==========================================================================
   Kanzlei Kerk Behrens — Muenster
   Gestaltung: Bogen & Register.
   Dunkles Petrol als Grundton, Baumberger Sandstein als Schrift,
   Kupferpatina als einziger Akzent. Libre Caslon (Recht, Druck) trifft
   Archivo (Gegenwart). Bewusst eigenstaendig gegenueber allen
   anderen Kanzlei-Auftritten im Haus.
   ========================================================================== */

:root {
  /* Farbe ------------------------------------------------------------- */
  --ink:        #0c1311;   /* Petrolschwarz, Grundton der dunklen Baender */
  --ink-2:      #121b18;
  --ink-3:      #1a2622;
  --ink-4:      #24322d;

  --sand:       #e9e2d4;   /* Baumberger Sandstein — Schrift auf Dunkel   */
  --sand-2:     #c2b9a6;
  --sand-3:     #9b9587;   /* Nebenschrift auf Dunkel (AA auch auf ink-3) */

  --kalk:       #f4f3ef;   /* helle Flaeche, kuehl — kein Creme           */
  --kalk-2:     #eae9e3;
  --kalk-3:     #dcdad2;

  --patina:     #6fa894;   /* Kupferpatina — einziger Akzent              */
  --patina-2:   #3e6b5c;
  --patina-3:   #2f5b4c;

  /* Zwei Farben, die je nach Untergrund umschalten. Dunkle Baender setzen
     sie weiter unten neu — dadurch stimmt der Kontrast ueberall ohne
     doppelte Regeln.                                                     */
  --meta:       #6b6558;   /* Randvermerke, Beschriftungen               */
  --akzent:     var(--patina-2);

  --linie-d:    rgba(233, 226, 212, .16);
  --linie-d2:   rgba(233, 226, 212, .32);
  --linie-h:    rgba(12, 19, 17, .14);
  --linie-h2:   rgba(12, 19, 17, .28);

  /* Schrift ----------------------------------------------------------- */
  --display: "Libre Caslon Display", "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --serif:   "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --sans:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --t--2: clamp(.68rem, .66rem + .08vw, .74rem);
  --t--1: clamp(.79rem, .77rem + .1vw,  .86rem);
  --t-0:  clamp(1rem,   .97rem + .16vw, 1.09rem);
  --t-1:  clamp(1.16rem, 1.08rem + .4vw, 1.38rem);
  --t-2:  clamp(1.45rem, 1.25rem + .95vw, 2.05rem);
  --t-3:  clamp(1.95rem, 1.45rem + 2.3vw, 3.3rem);
  --t-4:  clamp(2.5rem, 1.55rem + 4.4vw, 5.2rem);
  --t-5:  clamp(3rem, 1.3rem + 7.2vw, 7.4rem);

  /* Mass -------------------------------------------------------------- */
  --breit:  1240px;
  --schmal: 820px;
  --text:   35rem;
  --rand:   clamp(1.25rem, 5vw, 4rem);
  --luft:   clamp(4rem, 9vw, 8.5rem);
}

/* Grundlagen ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  font-family: var(--sans);
  font-size: var(--t-0);
  font-weight: 400;
  line-height: 1.68;
  color: var(--ink);
  background: var(--kalk);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }

/* Auf dunklem Grund schalten Meta- und Akzentfarbe um. Alles, was
   var(--meta) oder var(--akzent) benutzt, zieht automatisch nach.        */
.band--dunkel, .band--tief, .kopf, .auftakt, .ruf, .fuss, .leiste {
  --meta: var(--sand-3);
  --akzent: var(--patina);
}

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

::selection { background: var(--patina); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--patina);
  outline-offset: 3px;
  border-radius: 2px;
}

.sprung {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--sand);
  padding: .9rem 1.4rem; font-size: var(--t--1);
}
.sprung:focus { left: 1rem; top: 1rem; }

/* Seitenuebergang (progressive Verbesserung) ---------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-raus .28s ease both; }
  ::view-transition-new(root) { animation: vt-rein .38s ease both; }
}
@keyframes vt-raus { to { opacity: 0; } }
@keyframes vt-rein { from { opacity: 0; transform: translateY(10px); } }

/* Typografie ------------------------------------------------------------ */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.012em;
  text-wrap: balance;
}
h1 { font-size: var(--t-4); }
h2 { font-size: var(--t-3); }
h3 { font-family: var(--serif); font-size: var(--t-1); line-height: 1.25; letter-spacing: 0; }
h4 { font-family: var(--sans); font-size: var(--t-0); font-weight: 600; letter-spacing: .01em; }

p { text-wrap: pretty; }
p + p { margin-top: 1.05em; }

strong, b { font-weight: 600; }
em, i { font-style: italic; }

.gross    { font-size: var(--t-5); }
.lead     { font-family: var(--serif); font-size: var(--t-1); line-height: 1.55; }
.klein    { font-size: var(--t--1); }
.leise    { color: var(--meta); }
.mass     { max-width: var(--text); }
.mass-w   { max-width: 46rem; }

/* Marke: kleine Versalzeile mit Sperrung — die Beschriftung des Hauses */
.marke {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--t--2);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--akzent);
}

.ziffer {
  font-family: var(--display);
  font-size: var(--t--1);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .06em;
}

/* Register — die Trennlinie mit Nummer und Titel ------------------------ */

.reg {
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 2.5rem);
  border-top: 1px solid var(--linie-h2);
  padding-top: .85rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.band--dunkel .reg { border-color: var(--linie-d2); }
.reg__nr {
  font-family: var(--display);
  font-size: var(--t--1);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--akzent);
  flex: none;
}
.reg__titel {
  font-family: var(--sans);
  font-size: var(--t--2);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.reg__zusatz {
  margin-left: auto;
  font-size: var(--t--2);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--meta);
  flex: none;
}
/* Der Randvermerk ist eine Zugabe. Auf schmalen Schirmen wuerde er die
   Registerzeile aus dem Bild schieben — dort faellt er weg.             */
@media (max-width: 640px) { .reg__zusatz { display: none; } }

/* Flaechen -------------------------------------------------------------- */

.hof { width: 100%; max-width: var(--breit); margin-inline: auto; padding-inline: var(--rand); }
.hof--schmal { max-width: var(--schmal); }

.band { padding-block: var(--luft); }
.band--eng { padding-block: clamp(2.5rem, 6vw, 5rem); }
.band--dunkel { background: var(--ink); color: var(--sand); }
.band--tief   { background: var(--ink-2); color: var(--sand); }
.band--stein  { background: var(--kalk-2); }
.band--dunkel h1, .band--dunkel h2, .band--dunkel h3,
.band--tief h1, .band--tief h2, .band--tief h3 { color: var(--sand); }

/* Kopf: Seiten-Auftakt --------------------------------------------------- */

.kopf {
  position: relative;
  background: var(--ink);
  color: var(--sand);
  isolation: isolate;
  overflow: hidden;
}
.kopf__bild {
  position: absolute; inset: 0; z-index: -2;
}
.kopf__bild img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.86) brightness(.92);
}
/* Links dunkel genug fuer die Schrift, rechts bleibt das Foto sichtbar —
   sonst versinken die hellen Innenaufnahmen im Grau.                     */
.kopf::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(12,19,17,.95) 0%, rgba(12,19,17,.90) 26%,
      rgba(12,19,17,.55) 58%, rgba(12,19,17,.28) 100%),
    linear-gradient(180deg,
      rgba(12,19,17,.62) 0%, rgba(12,19,17,.10) 34%, rgba(12,19,17,.78) 100%);
}
@media (max-width: 760px) {
  .kopf::after {
    background:
      linear-gradient(180deg, rgba(12,19,17,.70) 0%, rgba(12,19,17,.55) 30%, rgba(12,19,17,.92) 100%);
  }
}
.kopf__inhalt {
  padding-block: clamp(7rem, 16vw, 12rem) clamp(3.5rem, 8vw, 6rem);
}
.kopf h1 { color: var(--sand); }
.kopf__lead {
  margin-top: 1.6rem;
  max-width: 40rem;
  font-family: var(--serif);
  font-size: var(--t-1);
  line-height: 1.55;
  color: var(--sand-2);
}

/* Startseite: der grosse Auftakt ---------------------------------------- */

.auftakt {
  position: relative;
  min-height: min(94svh, 900px);
  display: grid;
  align-items: end;
  background: var(--ink);
  color: var(--sand);
  isolation: isolate;
  overflow: hidden;
}
.auftakt__bild { position: absolute; inset: 0; z-index: -2; }
.auftakt__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.auftakt::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(12,19,17,.86) 0%, rgba(12,19,17,.32) 38%, rgba(12,19,17,.93) 88%),
    radial-gradient(120% 80% at 20% 100%, rgba(12,19,17,.85) 0%, rgba(12,19,17,0) 70%);
}
.auftakt__inhalt { padding-block: clamp(9rem, 20vw, 13rem) clamp(3rem, 7vw, 5.5rem); }
.auftakt h1 {
  font-size: var(--t-5);
  line-height: .98;
  letter-spacing: -.02em;
  color: var(--sand);
  max-width: 15ch;
}
.auftakt h1 em { font-family: var(--serif); font-style: italic; }
.auftakt__lead {
  margin-top: 1.8rem; max-width: 38rem;
  font-family: var(--serif); font-size: var(--t-1); line-height: 1.55;
  color: var(--sand-2);
}
.auftakt__zeile {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem;
  align-items: center; margin-top: 2.6rem;
}

/* Fusszeile des Auftakts: harte Fakten auf einer Linie */
.fakten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.25rem, 5vw, 2.5rem);
}
.fakten > div {
  padding: 1.35rem 0 1.5rem;
  border-top: 1px solid var(--linie-d);
}
@media (min-width: 900px) {
  /* Vier feste Spalten — nur dann sitzt die Trennlinie zuverlaessig
     zwischen den Feldern und nie am Rand.                              */
  .fakten { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; }
  .fakten > div {
    padding: 1.5rem 2rem 1.6rem;
    border-left: 1px solid var(--linie-d);
  }
  .fakten > div:first-child { padding-left: 0; border-left: 0; }
}
.fakten dt {
  font-size: var(--t--2); letter-spacing: .18em; text-transform: uppercase;
  color: var(--meta); margin-bottom: .5rem;
}
.fakten dd { font-family: var(--display); font-size: var(--t-1); line-height: 1.2; }

/* Schalter -------------------------------------------------------------- */

.knopf {
  display: inline-flex; align-items: center; gap: .8rem;
  font-family: var(--sans); font-size: var(--t--1); font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  padding: 1.05rem 1.9rem;
  border: 1px solid currentColor;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.knopf::after { content: "→"; font-size: 1.1em; line-height: 1; transition: transform .25s ease; }
.knopf:hover::after { transform: translateX(4px); }

.knopf--voll { background: var(--ink); color: var(--kalk); border-color: var(--ink); }
.knopf--voll:hover { background: var(--patina-2); border-color: var(--patina-2); color: var(--kalk); }

.knopf--patina { background: var(--patina); color: var(--ink); border-color: var(--patina); }
.knopf--patina:hover { background: var(--sand); border-color: var(--sand); }

.knopf--leer { background: transparent; }
.band--dunkel .knopf--leer, .auftakt .knopf--leer, .kopf .knopf--leer { color: var(--sand); }
.knopf--leer:hover { background: currentColor; }
.band--dunkel .knopf--leer:hover, .auftakt .knopf--leer:hover, .kopf .knopf--leer:hover {
  background: var(--sand); color: var(--ink);
}

/* Textlink mit Unterstrich, der beim Hover laeuft */
.link {
  display: inline;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size .3s ease, color .2s ease;
}
.link:hover { color: var(--akzent); background-size: 0% 1px; }

/* Kopfleiste ------------------------------------------------------------ */

.leiste {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  color: var(--sand);
  border-bottom: 1px solid var(--linie-d);
}
.leiste__hof {
  max-width: var(--breit); margin-inline: auto; padding-inline: var(--rand);
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 5rem;
}

.logo { display: flex; align-items: center; gap: .95rem; flex: none; }
.logo__marke { width: auto; height: 2.15rem; color: var(--sand); flex: none; }
.logo__wort { display: flex; flex-direction: column; line-height: 1; }
.logo__name {
  font-family: var(--display); font-size: 1.12rem; letter-spacing: .01em; color: var(--sand);
}
.logo__rolle {
  margin-top: .34rem;
  font-size: .59rem; font-weight: 600; letter-spacing: .215em; text-transform: uppercase;
  color: var(--sand-3);
}

.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.1rem); }
.nav a {
  font-size: var(--t--1); font-weight: 500; letter-spacing: .02em;
  color: var(--sand-2);
  padding-block: .3rem;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.nav a:hover { color: var(--sand); border-color: var(--patina); }
.nav a[aria-current="page"] { color: var(--sand); border-color: var(--patina); }
.nav__ruf {
  font-family: var(--display) !important;
  font-size: 1.02rem !important;
  color: var(--patina) !important;
  letter-spacing: .02em;
  border-bottom-color: transparent !important;
}
.nav__ruf:hover { color: var(--sand) !important; }

.nav__schalter {
  display: none; margin-left: auto;
  background: none; border: 1px solid var(--linie-d2); color: var(--sand);
  font-family: var(--sans); font-size: var(--t--2); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .62rem 1rem; cursor: pointer;
}

/* Sehr schmale Geraete: die Kopfzeile muss auf 320 px noch aufgehen. */
@media (max-width: 420px) {
  .leiste__hof { padding-inline: 1rem; gap: .9rem; min-height: 4.5rem; }
  .logo { gap: .7rem; }
  .logo__marke { height: 1.75rem; }
  .logo__name { font-size: 1rem; }
  .logo__rolle { letter-spacing: .14em; font-size: .55rem; }
  .nav__schalter { padding: .55rem .75rem; letter-spacing: .12em; }
}

@media (max-width: 1080px) {
  .nav__schalter { display: block; }
  .nav {
    position: fixed; inset: 5rem 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink);
    border-bottom: 1px solid var(--linie-d);
    padding: .5rem var(--rand) 2rem;
    max-height: calc(100svh - 5rem); overflow-y: auto;
    margin-left: 0;
  }
  .nav[hidden] { display: none; }
  .nav a {
    padding: 1rem 0; border-bottom: 1px solid var(--linie-d);
    font-size: var(--t-0);
  }
  .nav a[aria-current="page"] { color: var(--patina); }
  .nav__ruf { padding-top: 1.5rem !important; border-bottom: 0 !important; }
}

/* Raster ---------------------------------------------------------------- */

.gitter { display: grid; gap: clamp(1.5rem, 3vw, 2.6rem); }
.gitter--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.gitter--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr)); }
.gitter--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); }

/* Zwei Spalten: links Ueberschrift, rechts Text */
.paar {
  display: grid;
  gap: clamp(1.6rem, 4vw, 4.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .paar { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; }
  .paar--gleich { grid-template-columns: 1fr 1fr; align-items: center; }
  .paar--eng { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); }
}

/* Karte ----------------------------------------------------------------- */

.karte {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--linie-h2);
  padding-top: 1.4rem;
  transition: border-color .3s ease;
}
.band--dunkel .karte, .band--tief .karte { border-color: var(--linie-d2); }
.karte__nr {
  font-family: var(--display); font-size: var(--t--1);
  color: var(--akzent); margin-bottom: .9rem;
  font-variant-numeric: lining-nums tabular-nums;
}
.karte h3 { margin-bottom: .7rem; }
.karte p { font-size: var(--t--1); line-height: 1.62; color: color-mix(in srgb, currentColor 78%, transparent); }
.karte__mehr {
  margin-top: 1.2rem; padding-top: .9rem;
  font-size: var(--t--2); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--akzent);
  display: inline-flex; align-items: center; gap: .5rem;
}
.karte__mehr::after { content: "→"; transition: transform .25s ease; }

a.karte:hover { border-color: var(--akzent); }
a.karte:hover .karte__mehr::after { transform: translateX(4px); }

/* Rechtsgebiets-Kachel mit Bild ----------------------------------------- */

.feld {
  position: relative; display: block; overflow: hidden;
  background: var(--ink-2); color: var(--sand);
  isolation: isolate;
  min-height: clamp(16rem, 26vw, 21rem);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
}
.feld img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  /* Der Schleier ist oben leicht und unten dicht: so bleibt das Bild
     lesbar und die Schrift trotzdem sicher.                            */
  filter: grayscale(.3) contrast(1.04) brightness(.86);
  transition: transform .8s cubic-bezier(.2, .7, .2, 1), filter .6s ease;
}
.feld::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(12,19,17,.20) 0%, rgba(12,19,17,.60) 52%, rgba(12,19,17,.94) 100%);
  transition: background .5s ease;
}
.feld:hover img { transform: scale(1.055); filter: grayscale(0) contrast(1.05) brightness(.95); }
.feld:hover::after {
  background: linear-gradient(180deg, rgba(12,19,17,.10) 0%, rgba(12,19,17,.50) 48%, rgba(12,19,17,.92) 100%);
}
.feld__nr {
  font-family: var(--display); font-size: var(--t--1); color: var(--patina);
  margin-bottom: auto;
  font-variant-numeric: lining-nums tabular-nums;
}
.feld h3 { font-family: var(--display); font-size: var(--t-2); color: var(--sand); margin-bottom: .55rem; }
.feld p { font-size: var(--t--1); color: var(--sand-2); line-height: 1.55; }
.feld__strich {
  margin-top: 1.1rem; height: 1px; background: var(--linie-d2);
  position: relative;
}
.feld__strich::after {
  content: ""; position: absolute; inset: 0 100% 0 0;
  background: var(--patina); transition: inset .5s cubic-bezier(.2,.7,.2,1);
}
.feld:hover .feld__strich::after { inset: 0 0 0 0; }

/* Bilder ---------------------------------------------------------------- */

.bild { position: relative; overflow: hidden; background: var(--ink-2); }
.bild img { width: 100%; height: 100%; object-fit: cover; }
.bild--bogen { border-radius: 50vw 50vw 0 0 / 26% 26% 0 0; }
.bild--hoch { aspect-ratio: 4 / 5; }
.bild--quer { aspect-ratio: 16 / 9; }
.bild--breit { aspect-ratio: 21 / 9; }
.bild--drei { aspect-ratio: 3 / 2; }
.bild--vier { aspect-ratio: 4 / 3; }

.bild__unter {
  margin-top: .75rem;
  font-size: var(--t--2); letter-spacing: .1em; text-transform: uppercase;
  color: var(--meta);
}

.vollbild { position: relative; }
.vollbild img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
@media (max-width: 700px) { .vollbild img { aspect-ratio: 4 / 3; } }

/* Zitat ----------------------------------------------------------------- */

.zitat {
  font-family: var(--display);
  font-size: var(--t-3);
  line-height: 1.16;
  letter-spacing: -.01em;
  text-wrap: balance;
  max-width: 22ch;
}
.zitat--breit { max-width: 30ch; font-size: var(--t-2); line-height: 1.28; }
.zitat__quelle {
  margin-top: 1.6rem;
  font-family: var(--sans); font-size: var(--t--2);
  letter-spacing: .18em; text-transform: uppercase; color: var(--meta);
}

/* Listen ---------------------------------------------------------------- */

.punkte { list-style: none; }
.punkte li {
  position: relative; padding-left: 1.6rem; padding-block: .38rem;
}
.punkte li::before {
  content: ""; position: absolute; left: 0; top: .95em;
  width: .6rem; height: 1px; background: var(--akzent);
}

/* Zweispaltig, aber erst wenn wirklich Platz ist — sonst laeuft die
   Liste auf dem Handy waagerecht aus dem Bild.                          */
.punkte.spalten { columns: 1; }
.punkte.spalten li { break-inside: avoid; }
@media (min-width: 620px) {
  .punkte.spalten { columns: 2; column-gap: clamp(1.5rem, 4vw, 2.5rem); }
}

.schritte { list-style: none; counter-reset: s; }
.schritte > li {
  counter-increment: s;
  display: grid; gap: .35rem 1.8rem;
  grid-template-columns: auto 1fr;
  border-top: 1px solid var(--linie-h);
  padding-block: 1.5rem;
}
.band--dunkel .schritte > li { border-color: var(--linie-d); }
.schritte > li::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--display); font-size: var(--t--1); color: var(--akzent);
  grid-row: span 2; padding-top: .35rem;
  font-variant-numeric: lining-nums tabular-nums;
}
.schritte h3 { margin-bottom: .3rem; }
.schritte p { font-size: var(--t--1); color: color-mix(in srgb, currentColor 78%, transparent); }

/* Tafel: Entfernungen, Honorare ---------------------------------------- */

.tafel { width: 100%; border-collapse: collapse; font-size: var(--t--1); }
.tafel th, .tafel td { text-align: left; padding: .95rem 1rem .95rem 0; border-bottom: 1px solid var(--linie-h); vertical-align: baseline; }
.band--dunkel .tafel th, .band--dunkel .tafel td,
.band--tief .tafel th, .band--tief .tafel td { border-color: var(--linie-d); }
.tafel th {
  font-family: var(--sans); font-weight: 600;
  font-size: var(--t--2); letter-spacing: .16em; text-transform: uppercase;
  color: var(--meta);
}
.tafel td:last-child, .tafel th:last-child { text-align: right; padding-right: 0; }
.tafel .wert {
  font-family: var(--display); font-size: var(--t-0);
  font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
}
.tafel tbody tr:hover td { color: var(--akzent); }

.tafel-hof { overflow-x: auto; }

/* Fragen ---------------------------------------------------------------- */

.frage {
  border-top: 1px solid var(--linie-h);
}
.band--dunkel .frage { border-color: var(--linie-d); }
.frage:last-of-type { border-bottom: 1px solid var(--linie-h); }
.band--dunkel .frage:last-of-type { border-color: var(--linie-d); }
.frage > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; gap: 1.2rem;
  padding-block: 1.35rem;
  font-family: var(--serif); font-size: var(--t-1); line-height: 1.32;
  transition: color .2s ease;
}
.frage > summary::-webkit-details-marker { display: none; }
.frage > summary::after {
  content: "+"; margin-left: auto; flex: none;
  font-family: var(--sans); font-weight: 400; font-size: 1.4rem; line-height: 1;
  color: var(--akzent); transition: transform .3s ease;
}
.frage[open] > summary::after { transform: rotate(45deg); }
.frage > summary:hover { color: var(--akzent); }
.frage__text { padding-bottom: 1.6rem; max-width: var(--text); }
.frage__text p { font-size: var(--t--1); }

/* Ruf zur Tat ----------------------------------------------------------- */

.ruf {
  background: var(--ink); color: var(--sand);
  position: relative; isolation: isolate; overflow: hidden;
}
.ruf__bild { position: absolute; inset: 0; z-index: -2; opacity: .3; }
.ruf__bild img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.5); }
.ruf::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--ink) 10%, rgba(12,19,17,.72) 100%);
}
.ruf h2 { color: var(--sand); }

/* Kontaktzeile ---------------------------------------------------------- */

.kontaktzeile {
  display: grid; gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.kontaktzeile dt {
  font-size: var(--t--2); letter-spacing: .18em; text-transform: uppercase;
  color: var(--meta); margin-bottom: .55rem;
}
.kontaktzeile dd { font-family: var(--display); font-size: var(--t-1); line-height: 1.35; }
.kontaktzeile dd a:hover { color: var(--patina); }

/* Fuss ------------------------------------------------------------------ */

.fuss {
  background: var(--ink); color: var(--sand-2);
  border-top: 1px solid var(--linie-d);
  padding-block: clamp(3.5rem, 7vw, 6rem) 2rem;
  font-size: var(--t--1);
}
/* Fuenf Bloecke: Marke und vier Spalten. Frei umbrechen lassen ergibt bei
   1440 px vier Spalten und einen Umbruch — also feste Stufen.            */
.fuss__oben {
  display: grid;
  gap: clamp(2rem, 4vw, 3.25rem);
  grid-template-columns: 1fr;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--linie-d);
}
@media (min-width: 620px)  { .fuss__oben { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .fuss__oben { grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); } }
.fuss__titel {
  font-size: var(--t--2); font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--meta); margin-bottom: 1.2rem;
}
.fuss ul { list-style: none; }
/* Tippziele: die Verweise selbst bekommen die Hoehe, nicht das <li> —
   sonst sind sie auf dem Handy nur 16 Pixel hoch.                      */
.fuss li > a { display: inline-block; padding-block: .62rem; }

/* In der Fusszeile keine Dauerunterstriche: zwanzig Stueck werden unruhig,
   und durch die Polsterung der Tippziele saesse die Linie ohnehin weit
   unter dem Text statt daran. Der Strich kommt erst beim Zeigen.        */
.fuss .link { background-image: none; padding-bottom: 0; }
.fuss a { transition: color .2s ease; }
.fuss a:hover {
  color: var(--akzent);
  text-decoration: underline;
  text-underline-offset: .26em;
  text-decoration-thickness: 1px;
}
.fuss__marke .logo__marke { height: 2.6rem; }
.fuss address .link { display: inline-block; padding-block: .34rem; }
.fuss__unten {
  padding-top: 1.8rem;
  display: flex; flex-wrap: wrap; gap: .8rem 2rem; align-items: baseline;
  font-size: var(--t--2); color: var(--meta); letter-spacing: .04em;
}
.fuss__unten nav { display: flex; flex-wrap: wrap; gap: .2rem 1.6rem; margin-left: auto; }
.fuss__unten nav a { display: inline-block; padding-block: .78rem; }

/* Formular -------------------------------------------------------------- */

.form { display: grid; gap: 1.4rem; }
.form__reihe { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.feldgruppe { display: flex; flex-direction: column; gap: .5rem; }
.feldgruppe label {
  font-size: var(--t--2); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--meta);
}
.feldgruppe input, .feldgruppe textarea, .feldgruppe select {
  font-family: var(--sans); font-size: var(--t-0); color: inherit;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--linie-h2);
  padding: .7rem 0;
  transition: border-color .25s ease;
}
.band--dunkel .feldgruppe input, .band--dunkel .feldgruppe textarea, .band--dunkel .feldgruppe select {
  border-color: var(--linie-d2);
}
.feldgruppe input:focus, .feldgruppe textarea:focus, .feldgruppe select:focus {
  outline: none; border-color: var(--patina);
}
.feldgruppe textarea { resize: vertical; min-height: 8rem; }
.feldgruppe input:user-invalid, .feldgruppe textarea:user-invalid { border-color: #b4593f; }

.pflicht { display: flex; gap: .8rem; align-items: flex-start; font-size: var(--t--1); }
.pflicht input { margin-top: .35rem; accent-color: var(--akzent); }
.pflicht label { text-transform: none; letter-spacing: 0; font-weight: 400; color: inherit; font-size: var(--t--1); }

/* Hinweiskasten --------------------------------------------------------- */

.hinweis {
  border-left: 2px solid var(--akzent);
  padding: .3rem 0 .3rem 1.5rem;
  font-size: var(--t--1);
}

.kasten {
  background: var(--kalk-2);
  padding: clamp(1.6rem, 3vw, 2.6rem);
}
.band--dunkel .kasten, .band--tief .kasten { background: var(--ink-3); }

/* Rechtstexte ----------------------------------------------------------- */

.recht { max-width: 44rem; }
.recht h2 { font-size: var(--t-2); margin-top: 3rem; margin-bottom: .9rem; }
.recht h2:first-child { margin-top: 0; }
.recht h3 { margin-top: 1.9rem; margin-bottom: .5rem; }
.recht p, .recht ul, .recht ol { font-size: var(--t--1); }
.recht p + p, .recht ul, .recht ol { margin-top: .9rem; }
.recht ul, .recht ol { padding-left: 1.3rem; }
.recht li { padding-block: .18rem; }
.recht a { text-decoration: underline; text-underline-offset: .18em; }
.recht a:hover { color: var(--akzent); }
.recht dl { margin-top: .9rem; font-size: var(--t--1); }
.recht dt { font-weight: 600; margin-top: .9rem; }

/* Hilfen ---------------------------------------------------------------- */

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .8rem; }
.mt-2 { margin-top: 1.6rem; }
.mt-3 { margin-top: 2.4rem; }
.mt-4 { margin-top: clamp(2.5rem, 5vw, 4rem); }
.mt-5 { margin-top: clamp(3.5rem, 7vw, 6rem); }
.zentriert { text-align: center; margin-inline: auto; }
.nur-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Einblenden beim Scrollen (fortschrittliche Verbesserung) --------------- */

@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes auf {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: none; }
    }
    .auf {
      animation: auf .01s linear backwards;
      animation-timeline: view();
      animation-range: entry 5% cover 22%;
    }
  }
}

/* Sanfter Parallax fuer den Auftakt ------------------------------------- */
@media (prefers-reduced-motion: no-preference) and (min-width: 800px) {
  @supports (animation-timeline: view()) {
    @keyframes schub { to { transform: translateY(8%) scale(1.06); } }
    .auftakt__bild img, .kopf__bild img {
      animation: schub linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}

/* Druck ----------------------------------------------------------------- */
@media print {
  .leiste, .nav, .ruf, .fuss__oben, .auftakt__bild, .kopf__bild { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .band { padding-block: 1rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}