/* haus-verkaufen-duesseldorf.de — Motiv „Das Übergabeprotokoll“.
   Blaugrauer Schreibtisch (Grund), weißes Protokollblatt mit Positionen, Kästchen mit Haken in Signalorange,
   am Ende die Schlüsselübergabe. Schriften lokal (SIL OFL 1.1), keine Abrufe bei Dritten.
   Eine Hintergrundfarbe für die ganze Seite (iPhone-Safari friert Ränder sonst in falscher Farbe ein). */

@font-face { font-family: "Schibsted"; src: url("/assets/fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Schibsted"; src: url("/assets/fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Schibsted"; src: url("/assets/fonts/schibsted-grotesk-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-600-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --grund: #EDF1F4;        /* Schreibtisch, Seitenhintergrund = THEMA_FARBE */
  --blatt: #FFFFFF;        /* Protokollblatt */
  --tinte: #17283A;
  --tinte-2: #46576A;      /* 6,5:1 auf Grund */
  --linie: #CCD5DE;
  --linie-zart: #E4E9EE;
  --feldrand: #7A8C9E;     /* Formularfelder, 3,5:1 auf Weiß */
  --akzent: #D9822B;       /* Haken, Schlüssel, Hauptknopf (Tinte darauf 5,1:1) */
  --akzent-tief: #9A5210;  /* Akzent als Schrift, 5,2:1 auf Grund */
  --akzent-hell: #F7E6D3;
  --marker: #FFE16B;
  --schatten: 0 1px 0 rgba(23, 40, 58, .05), 0 26px 50px -32px rgba(23, 40, 58, .55);
  --kopf-h: 4.25rem;
  --rand-spalte: 7.25rem;
  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sans: "Schibsted", "Helvetica Neue", Arial, sans-serif;
  --rand: clamp(1rem, 4vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 1rem); background: var(--grund); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--grund); color: var(--tinte); font: 400 1.0625rem/1.65 var(--sans); font-kerning: normal; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--tinte); text-decoration-color: var(--akzent); text-decoration-thickness: .1em; text-underline-offset: .2em; }
a:hover { color: var(--akzent-tief); }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--akzent-hell); color: var(--tinte); }

h1, h2, h3 { font-weight: 700; line-height: 1.1; letter-spacing: -.022em; margin: 0 0 .6em; text-wrap: balance; }
h1, h2, .ue-titel { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 14 6 6; overflow-wrap: break-word; }
.seitenkopf-text { min-width: 0; }
h1 { font-size: clamp(2.35rem, 5.4vw, 4.3rem); letter-spacing: -.04em; line-height: 1.02; }
h2 { font-size: clamp(1.5rem, 2.7vw, 2.1rem); }
h3 { font-size: 1.2rem; letter-spacing: -.01em; margin-top: 1.6em; }
p, ul, ol { margin: 0 0 1em; }
li { margin-bottom: .45em; }
strong { font-weight: 700; }
.huelle { max-width: 75rem; margin: 0 auto; padding: 0 var(--rand); }
.lesen { max-width: 44rem; }
.leise { color: var(--tinte-2); font-size: .95rem; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kicker { font: 500 .9rem/1.4 var(--mono); color: var(--akzent-tief); margin: 0 0 .8rem; }
.offen { background: var(--marker); padding: .05em .3em; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; font-size: .95em; }
.platzhalter { color: var(--tinte-2); border-left: 3px dashed var(--linie); padding-left: 1rem; }

.sprung { position: absolute; left: -999px; top: .5rem; background: var(--tinte); color: var(--blatt); padding: .6rem 1rem; z-index: 100; }
.sprung:focus { left: 1rem; }
.entwurf { background: var(--marker); color: var(--tinte); font: 500 .875rem/1.4 var(--mono); text-align: center; padding: .45rem var(--rand); }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 50; background: var(--grund); border-bottom: 1px solid var(--linie); }
.kopf .huelle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--kopf-h); }
.marke { display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; text-decoration: none; font: 500 .95rem/1.1 var(--sans); color: var(--tinte); }
.marke:hover { color: var(--tinte); }
.marke b { display: block; font-weight: 700; font-size: 1.14rem; letter-spacing: -.015em; }
/* Zeichen: Kästchen mit Haken */
.marke-zeichen { position: relative; flex: none; width: 1.75rem; height: 1.75rem; border: 2px solid var(--tinte); border-radius: 4px; background: var(--blatt); }
.marke-zeichen::after { content: ""; position: absolute; left: .5rem; top: .12rem; width: .45rem; height: .9rem; border: solid var(--akzent); border-width: 0 .22rem .22rem 0; transform: rotate(42deg); }
.menue { display: flex; align-items: center; gap: .25rem 1.4rem; }
.menue a { text-decoration: none; font-weight: 500; font-size: 1rem; padding: .35rem 0; white-space: nowrap; }
.menue a:hover { color: var(--akzent-tief); }
.menue a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--akzent); text-decoration-thickness: 2px; text-underline-offset: .4em; }
.menue-schalter { display: none; }
.fortschritt { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--akzent) 0 calc(var(--fortschritt, 0) * 100%), transparent 0); }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .7rem 1.35rem; border-radius: 6px;
  background: var(--akzent); color: var(--tinte); font-weight: 700; text-decoration: none; border: 2px solid var(--akzent);
  transition: background .2s, color .2s, border-color .2s; }
.knopf:hover { background: var(--tinte); border-color: var(--tinte); color: var(--blatt); }
.knopf.hell { background: transparent; color: var(--tinte); border-color: var(--tinte); }
.knopf.hell:hover { background: var(--tinte); color: var(--blatt); }
.knopf.klein { min-height: 2.6rem; padding: .45rem 1rem; font-size: .95rem; }
.menue .knopf.klein, .menue .knopf.klein:hover { color: var(--tinte); }
.menue .knopf.klein:hover { background: var(--blatt); border-color: var(--tinte); }
.knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: .7rem; }
.aufruf { margin: 1.8rem 0 0; }
.aufruf .leise a { font-weight: 700; white-space: nowrap; }

/* ---------- Seitenkopf mit Protokoll ---------- */
.seitenkopf { padding: clamp(1.6rem, 4vw, 3rem) 0 clamp(2.4rem, 5vw, 4rem); }
.seitenkopf .huelle { display: grid; gap: 2.5rem; }
@media (min-width: 960px) {
  .seitenkopf .huelle:has(> .motiv), .seitenkopf .huelle:has(> .ansprech) { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: start; gap: clamp(2.5rem, 5vw, 5rem); }
}
.seitenkopf h1 { max-width: 17ch; font-size: clamp(2.2rem, 4.4vw, 3.5rem); }
.seitenkopf.start h1 { max-width: 13ch; font-size: clamp(2.5rem, 6vw, 4.6rem); }
.pfad { font: 500 .9rem/1.4 var(--mono); color: var(--tinte-2); margin-bottom: 1.4rem; }
.pfad a { color: var(--tinte-2); }
.unterzeile { font-size: clamp(1.1rem, 1.6vw, 1.27rem); color: var(--tinte-2); max-width: 40rem; }
/* „Kurz gesagt“ als Formularfeld mit Beschriftung auf der Linie */
.kurz { position: relative; max-width: 44rem; margin: 1.8rem 0 .9rem; padding: 1.35rem 1.35rem 1.15rem; background: var(--blatt); border: 2px solid var(--tinte); border-radius: 6px; }
.kurz p { margin: 0; font-size: 1.07rem; }
.kurz .kurz-marke { position: absolute; top: -.8rem; left: 1rem; padding: 0 .5rem; font: 600 .9rem/1.5 var(--mono); color: var(--tinte);
  background: linear-gradient(var(--grund) 0 50%, var(--blatt) 50% 100%); }
.stand { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; font: 400 .875rem/1.45 var(--mono); color: var(--tinte-2); margin: 0; }

/* Protokoll auf dem Klemmbrett */
.protokoll { position: relative; margin: 1.4rem 0 0; background: var(--blatt); border: 1px solid var(--linie); border-radius: 8px; box-shadow: var(--schatten);
  padding: 2.6rem clamp(1.1rem, 3vw, 2rem) 1.6rem; }
.protokoll::before { content: ""; position: absolute; inset: .55rem; border: 1px solid var(--linie-zart); border-radius: 4px; pointer-events: none; }
.pk-klammer { position: absolute; top: -1.35rem; left: 50%; width: 7.5rem; height: 2.5rem; transform: translateX(-50%); }
.k-buegel { fill: none; stroke: var(--tinte); stroke-width: 5; }
.k-platte { fill: var(--tinte); }
.k-schlitz { fill: var(--grund); }
.pk-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: .7rem; border-bottom: 2px solid var(--tinte); }
.pk-titel { margin: 0; font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.5rem); letter-spacing: -.025em; }
.pk-ort { margin: 0; font: 500 .9rem/1 var(--mono); color: var(--tinte-2); }
.pk-felder { margin: 0 0 .4rem; }
.pk-feld { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: .8rem; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid var(--linie-zart); }
.pk-feld dt { font-size: .9rem; color: var(--tinte-2); }
.pk-feld dd { margin: 0; font: 500 .95rem/1.4 var(--mono); }
.pk-zeilen { list-style: none; padding: 0; margin: .3rem 0 0; }
.pk-zeile { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .62rem 0; margin: 0; border-bottom: 1px solid var(--linie-zart); }
.pk-nr { font: 500 .9rem/1 var(--mono); color: var(--tinte-2); }
.pk-text { line-height: 1.35; }
.pk-text a { text-decoration: none; }
.pk-text a:hover { text-decoration: underline; text-decoration-color: var(--akzent); color: var(--tinte); }
.pk-zeile.abgehakt .pk-text { color: var(--tinte-2); }
.pk-schluessel { border-bottom: 2px solid var(--tinte); }
.pk-schluessel .pk-text { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .7rem; font-weight: 700; }
.schluessel.klein { width: 3.1rem; height: auto; }
.pk-unterschrift { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.4rem; }
.pk-unterschrift span { display: block; border-top: 1px solid var(--tinte); padding-top: .4rem; font-size: .9rem; color: var(--tinte-2); }

/* Kästchen und Haken (SVG) */
.haken { width: 1.6rem; height: 1.6rem; flex: none; overflow: visible; }
.haken-rahmen { fill: var(--blatt); stroke: var(--tinte); stroke-width: 1.8; }
.haken-strich { fill: none; stroke: var(--akzent); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
/* Schlüssel */
.s-reide { fill: var(--akzent); }
.s-halm { fill: var(--tinte); }
.s-ring { fill: none; stroke: var(--blatt); stroke-width: 1.4; opacity: .55; }

/* ---------- Protokollbogen: Positionen ---------- */
.bogen { max-width: 75rem; margin: 0 auto; padding: 0 var(--rand); }
.bogen-blatt { position: relative; background: var(--blatt); border: 1px solid var(--linie); border-radius: 8px; box-shadow: var(--schatten);
  background-image: linear-gradient(var(--linie), var(--linie)); background-size: 1px 100%; background-position: var(--rand-spalte) 0; background-repeat: no-repeat; }
.pos { display: grid; grid-template-columns: var(--rand-spalte) minmax(0, 1fr); border-top: 1px solid var(--linie); }
.bogen-blatt > .pos:first-child { border-top: 0; }
.pos-rand { padding: 2.6rem 0 2rem; }
.pos-marke { position: sticky; top: calc(var(--kopf-h) + 1.6rem); display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.pos-marke .haken { width: 2.5rem; height: 2.5rem; }
.pos-nr { font: 500 .9rem/1 var(--mono); color: var(--tinte-2); white-space: nowrap; }
.pos.abgehakt .pos-nr, .uebergabe.uebergeben .pos-nr { color: var(--akzent-tief); }
.pos-text { min-width: 0; padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.1rem, 4vw, 3.2rem) clamp(1.6rem, 4vw, 2.4rem); }
.pos-text > h2 { max-width: 32ch; }
.pos-text > p, .pos-text > ul, .pos-text > ol, .pos-text > .hinweis, .pos-text > .kurzliste { max-width: 44rem; }
.pos-text .aufruf { margin-top: 1.6rem; }

/* Fragenblock und Übergabe innerhalb des Bogens */
.bogen .fragen-bereich { position: relative; padding: clamp(1.6rem, 4vw, 2.6rem) 0; border-top: 1px solid var(--linie); }
.bogen .fragen-bereich .huelle { max-width: none; margin: 0; padding: 0 clamp(1.1rem, 4vw, 3.2rem) 0 calc(var(--rand-spalte) + clamp(1.1rem, 4vw, 3.2rem)); }
.bogen .fragen-bereich::before { content: "Fragen"; position: absolute; left: 0; top: clamp(1.9rem, 4vw, 2.9rem); width: var(--rand-spalte); text-align: center; font: 500 .9rem/1 var(--mono); color: var(--tinte-2); }
.bogen .fragen-bereich h2 { max-width: 32ch; }

/* ---------- Schlüsselübergabe ---------- */
.ue-titel { font-weight: 700; font-size: clamp(1.5rem, 2.7vw, 2.1rem); letter-spacing: -.022em; line-height: 1.1; margin: 0 0 1.2rem; }
.ue-buehne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; gap: clamp(.6rem, 2vw, 1.6rem); max-width: 46rem; margin: .4rem 0 1.6rem; }
.ue-seite { display: flex; flex-direction: column; gap: .2rem; }
.ue-seite span { border-top: 1px solid var(--tinte); padding-top: .4rem; font-size: .9rem; color: var(--tinte-2); }
.ue-zug { width: 100%; height: auto; }
.ue-zug path { fill: none; stroke: var(--tinte); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ue-weg { position: relative; display: flex; justify-content: flex-end; align-items: center; height: 4.2rem; margin-bottom: 1.4rem; }
.ue-spur { position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed var(--linie); }
.ue-schluessel { position: relative; width: clamp(3.6rem, 9vw, 6.2rem); height: auto; transform-origin: 18% 50%; will-change: transform; }

/* ---------- Abschnitte allgemein ---------- */
.abschnitt { padding: clamp(2rem, 5vw, 3.6rem) 0; }
.zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2.2rem); }
.drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.zwei, .drei { margin: 1.4rem 0 1.6rem; }
.kachel { border: 1px solid var(--linie); border-top: 3px solid var(--tinte); border-radius: 4px; padding: 1.1rem 1.2rem 1rem; background: var(--blatt); }
.kachel h3 { margin: 0 0 .4em; font-size: 1.1rem; }
.kachel p { font-size: 1rem; }
.kachel p:last-child { margin-bottom: 0; }
.zahl-gross { display: block; font: 600 clamp(1.7rem, 3.6vw, 2.4rem)/1 var(--mono); color: var(--tinte); letter-spacing: -.04em; margin-bottom: .5rem; }
.merk { padding-left: 1.25rem; }
.merk li::marker { color: var(--akzent-tief); }
/* Abhakliste im Text: Kästchen statt Punkte */
.kurzliste { list-style: none; padding: 0; margin: 1.2rem 0 1.4rem; }
.kurzliste li { position: relative; padding: .55rem 0 .55rem 2.2rem; margin: 0; border-bottom: 1px solid var(--linie-zart); }
.kurzliste li::before { content: ""; position: absolute; left: 0; top: .78rem; width: 1.15rem; height: 1.15rem; border: 2px solid var(--tinte); border-radius: 3px; }
.kurzliste li::after { content: ""; position: absolute; left: .4rem; top: .74rem; width: .32rem; height: .68rem; border: solid var(--akzent); border-width: 0 .17rem .17rem 0; transform: rotate(42deg); }
.hinweis { background: var(--akzent-hell); border-radius: 4px; padding: 1rem 1.2rem; margin: 1.4rem 0; border-left: 4px solid var(--akzent); }
.hinweis p:last-child { margin: 0; }
.zitat { margin: 1.4rem 0; padding: .2rem 0 .2rem 1.2rem; border-left: 3px solid var(--tinte); font-size: 1.05rem; max-width: 44rem; }
.zitat footer { font: 400 .875rem/1.4 var(--mono); color: var(--tinte-2); margin-top: .4rem; }

/* ---------- Tabellen im Formularstil ---------- */
.tabelle-huelle { overflow-x: auto; margin: 1.4rem 0; }
.tabelle { width: 100%; border-collapse: collapse; background: var(--blatt); font-size: 1rem; border: 1px solid var(--linie); }
.tabelle caption { caption-side: bottom; text-align: left; padding: .7rem .2rem 0; font-size: .9rem; color: var(--tinte-2); }
.tabelle th, .tabelle td { text-align: left; vertical-align: top; padding: .75rem 1rem; border-bottom: 1px solid var(--linie-zart); }
.tabelle thead th { font: 600 .9rem/1.3 var(--mono); background: var(--tinte); color: var(--blatt); border-bottom: 0; }
.tabelle tbody th { font-weight: 700; }
.tabelle tr:last-child th, .tabelle tr:last-child td { border-bottom: 0; }

/* ---------- Fragen: aufklappen = abhaken ---------- */
.fragen { margin: 1.2rem 0; border-top: 1px solid var(--linie); max-width: 50rem; }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary { -webkit-tap-highlight-color: transparent; cursor: pointer; list-style: none; position: relative; padding: 1rem .5rem 1rem 2.6rem; font-weight: 700; line-height: 1.4; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: 1.25rem; height: 1.25rem; border: 2px solid var(--tinte); border-radius: 3px; background: var(--blatt); }
.fragen summary::after { content: ""; position: absolute; left: .43rem; top: 1.02rem; width: .36rem; height: .75rem; border: solid var(--akzent); border-width: 0 .2rem .2rem 0; transform: rotate(42deg) scale(0); transform-origin: 50% 100%; transition: transform .25s cubic-bezier(.3, 1.5, .5, 1); }
.fragen details[open] summary::after { transform: rotate(42deg) scale(1); }
.fragen summary:hover { color: var(--akzent-tief); }
.fragen .antwort { padding: 0 .5rem 1.15rem 2.6rem; }
.fragen .antwort p { margin: 0; }

/* FAQ-Seite: jede Gruppe ein Blatt */
.faq-verzeichnis { font-size: 1rem; }
.faq-gruppe { padding: clamp(1.2rem, 3vw, 2rem) 0; }
.faq-gruppe .huelle { position: relative; }
.faq-gruppe .lesen { max-width: 52rem; background: var(--blatt); border: 1px solid var(--linie); border-radius: 8px; padding: .4rem clamp(1rem, 3vw, 1.8rem); box-shadow: var(--schatten); }
.faq-gruppe .lesen .fragen { border-top: 0; margin: 0; }
.faq-gruppe .lesen .fragen details:last-child { border-bottom: 0; }
.faq-gruppe .kicker + h2 { margin-bottom: 1rem; }
.faq-gruppe .huelle > p.lesen { background: none; border: 0; box-shadow: none; padding: 0; margin-top: 1rem; }

/* ---------- Weiterlesen als Anlagen ---------- */
.weiter-liste { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: .9rem; counter-reset: anlage; }
.weiter-liste li { counter-increment: anlage; position: relative; background: var(--blatt); border: 1px solid var(--linie); border-top: 3px solid var(--tinte); border-radius: 4px; padding: 1rem 1.15rem 1.05rem; margin: 0; display: grid; gap: .3rem; }
.weiter-liste li::before { content: "Anlage " counter(anlage, upper-alpha); font: 500 .875rem/1 var(--mono); color: var(--tinte-2); margin-bottom: .3rem; }
.weiter-liste a { font-weight: 700; font-size: 1.08rem; }
.weiter-liste span { color: var(--tinte-2); font-size: .97rem; }
.quellen { font-size: .92rem; color: var(--tinte-2); border-top: 1px solid var(--linie); padding-top: 1rem; margin-top: 2rem; max-width: 44rem; }

/* ---------- Ansprechpartner ---------- */
.ansprech { display: grid; grid-template-columns: 96px 1fr; gap: 1.1rem; align-items: start; padding: 1.25rem; background: var(--blatt); border: 1px solid var(--linie); border-left: 4px solid var(--akzent); border-radius: 6px; max-width: 40rem; margin: 1.6rem 0; }
.ansprech img { width: 96px; height: 96px; border-radius: 6px; object-fit: cover; }
.ansprech p { margin: 0 0 .35rem; font-size: 1rem; }
.ansprech-name { font-weight: 700; font-size: 1.125rem; }
.ansprech-rolle { color: var(--tinte-2); }
.ansprech-tel { font-weight: 700; }
.querlinks ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }

/* ---------- Anfrageformular als Protokollblatt ---------- */
.anfrage-karte { background: var(--blatt); border: 1px solid var(--linie); border-top: 4px solid var(--tinte); border-radius: 8px; box-shadow: var(--schatten);
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.2rem, 4vw, 3.2rem); padding: clamp(1.3rem, 4vw, 2.8rem); }
.anfrage-kopf h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.danach { list-style: none; padding: 0; margin: 1.5rem 0 0; counter-reset: d; display: grid; gap: 1rem; }
.danach li { counter-increment: d; display: grid; grid-template-columns: 2.2rem 1fr; gap: .15rem .85rem; margin: 0; }
.danach li::before { content: counter(d); grid-row: span 2; font: 600 .95rem/2rem var(--mono); text-align: center; width: 2.1rem; height: 2.1rem; border: 2px solid var(--tinte); border-radius: 4px; }
.danach b { display: block; }
.danach span { color: var(--tinte-2); font-size: .97rem; }
.anfrage .feld { margin: 0 0 1rem; }
.anfrage label, .anfrage legend { display: block; font-weight: 700; margin-bottom: .35rem; }
.anfrage fieldset { border: 0; padding: 0; margin: 0 0 1.1rem; }
.wahl { display: flex; flex-wrap: wrap; gap: .55rem; }
.wahl label, .anfrage .wahl label { -webkit-tap-highlight-color: transparent; display: inline-flex; align-items: center; gap: .55rem; min-height: 2.9rem; padding: .4rem 1rem; margin: 0; border: 2px solid var(--linie); border-radius: 6px; cursor: pointer; font-weight: 500; background: var(--blatt); }
.wahl input { width: 1.15rem; height: 1.15rem; accent-color: var(--akzent-tief); margin: 0; }
.wahl label:has(input:checked) { border-color: var(--tinte); background: var(--akzent-hell); }
.anfrage input[type=text], .anfrage input[type=tel], .anfrage input[type=email], .anfrage textarea, .anfrage select {
  width: 100%; font: 400 1rem/1.4 var(--sans); color: var(--tinte); background: var(--blatt); border: 2px solid var(--feldrand); border-radius: 4px; padding: .7rem .85rem; min-height: 3rem; }
.anfrage select { appearance: auto; }
.anfrage input:focus, .anfrage textarea:focus, .anfrage select:focus { border-color: var(--tinte); outline: none; box-shadow: 0 0 0 3px var(--akzent-hell); }
.anfrage .feld-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.anfrage .einwilligung label { font-weight: 400; display: grid; grid-template-columns: 1.3rem 1fr; gap: .7rem; align-items: start; font-size: .95rem; }
.anfrage .einwilligung input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: var(--akzent-tief); }
.anfrage button.knopf { cursor: pointer; font-size: 1.05rem; font-family: var(--sans); }
.anfrage .versteckt { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status[data-stand="fehler"] { color: #9b1c1c; font-weight: 600; }

/* ---------- Fuß ---------- */
.fuss { border-top: 3px solid var(--tinte); padding: 3rem 0 2.5rem; margin-top: 2.5rem; font-size: .97rem; }
.fuss .spalten { display: grid; grid-template-columns: 1.4fr 1fr 1fr .9fr; gap: 2rem; }
.fuss h2 { font-size: 1rem; letter-spacing: 0; margin-bottom: .7rem; }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin-bottom: .4rem; }
.fuss .klein { margin-top: 2rem; font-size: .9rem; color: var(--tinte-2); max-width: 60rem; }

/* ---------- Bewegung: nur mit html.bewegt (kern.js), Endzustand ohne JavaScript ---------- */
/* Startseite: Protokoll hakt sich beim Laden Zeile für Zeile ab, die Schlüsselzeile bleibt bis zur Übergabe offen */
html.bewegt [data-protokoll] .pk-zeile .haken-strich { stroke-dashoffset: 1; }
html.bewegt [data-protokoll="ablauf"].da .pk-zeile:not(.pk-schluessel) .haken-strich { stroke-dashoffset: 0; transition: stroke-dashoffset .34s cubic-bezier(.65, 0, .25, 1); }
html.bewegt [data-protokoll="ablauf"].da .pk-zeile:nth-child(2) .haken-strich { transition-delay: .3s; }
html.bewegt [data-protokoll="ablauf"].da .pk-zeile:nth-child(3) .haken-strich { transition-delay: .6s; }
html.bewegt [data-protokoll="ablauf"].da .pk-zeile:nth-child(4) .haken-strich { transition-delay: .9s; }
html.bewegt [data-protokoll="ablauf"].da .pk-zeile:nth-child(5) .haken-strich { transition-delay: 1.2s; }
html.bewegt [data-protokoll="ablauf"].da .pk-zeile:nth-child(6) .haken-strich { transition-delay: 1.5s; }
html.bewegt [data-protokoll="ablauf"].da .pk-zeile:nth-child(7) .haken-strich { transition-delay: 1.8s; }
html.bewegt [data-protokoll] .pk-schluessel.abgehakt .haken-strich { stroke-dashoffset: 0; transition: stroke-dashoffset .5s ease-out; }
html.bewegt [data-protokoll="ablauf"] .pk-schluessel .schluessel { transform: translateX(-.35rem) rotate(-8deg); transition: transform .6s cubic-bezier(.3, 1.4, .5, 1) 2.2s; }
html.bewegt [data-protokoll="ablauf"].da .pk-schluessel .schluessel { transform: none; }
/* Positionen: Haken folgt dem Lesen (site.js setzt stroke-dashoffset) */
html.bewegt .pos[data-pos] .pos-rand .haken-strich { stroke-dashoffset: 1; }
html.bewegt .uebergabe .pos-rand .haken-strich { stroke-dashoffset: 1; }
html.bewegt .uebergabe.uebergeben .pos-rand .haken-strich { stroke-dashoffset: 0; transition: stroke-dashoffset .5s ease-out .15s; }
html.bewegt .ue-zug path { stroke-dashoffset: 1; }
html.bewegt .uebergabe.uebergeben .ue-schluessel { transition: transform .4s ease-out; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .haken-strich, .ue-zug path { stroke-dashoffset: 0 !important; }
  .ue-schluessel, .schluessel { transform: none !important; }
}

/* ---------- Aufrufleiste am Handy ---------- */
.leiste-unten { display: none; }
@media (max-width: 980px) {
  .leiste-unten { display: flex; gap: .6rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: .6rem var(--rand) calc(.6rem + env(safe-area-inset-bottom));
    background: var(--grund); border-top: 1px solid var(--linie); box-shadow: 0 -10px 24px -18px rgba(23, 40, 58, .5); transform: translateY(110%); transition: transform .3s ease; }
  .leiste-unten .knopf { flex: 1; min-height: 2.9rem; padding: .5rem .8rem; }
  .leiste-unten .knopf.hell { flex: 0 0 auto; }
  html.leiste-da .leiste-unten { transform: none; }
  html.leiste-da body { padding-bottom: 4.6rem; }
}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 1100px) {
  .menue { gap: .25rem 1rem; }
}
@media (max-width: 1020px) {
  .fuss .spalten { grid-template-columns: 1fr 1fr; }
  .drei { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
  :root { --kopf-h: 3.75rem; }
  .menue-schalter { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .4rem 1rem; border: 2px solid var(--tinte); border-radius: 6px; background: transparent; color: var(--tinte); font: 600 1rem/1 var(--sans); cursor: pointer; }
  .menue { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--grund); border-bottom: 1px solid var(--linie); flex-direction: column; align-items: stretch; padding: .5rem var(--rand) 1.2rem; gap: 0; }
  .menue.offen-menue { display: flex; }
  .menue a { padding: .8rem 0; border-bottom: 1px solid var(--linie); font-size: 1.08rem; }
  .menue .knopf.klein { margin-top: .9rem; border-bottom: 2px solid var(--akzent); }
  .zwei { grid-template-columns: 1fr; }
  .anfrage-karte { grid-template-columns: 1fr; }
  .protokoll { max-width: 34rem; }
}
@media (max-width: 760px) {
  :root { --rand-spalte: 0rem; }
  .bogen { padding: 0 .6rem; }
  .bogen-blatt { background-image: none; }
  .pos { grid-template-columns: 1fr; }
  .pos-rand { padding: 1.3rem clamp(1.1rem, 4vw, 3.2rem) 0; }
  .pos-marke { position: static; flex-direction: row; justify-content: flex-start; gap: .7rem; }
  .pos-marke .haken { width: 2rem; height: 2rem; order: -1; }
  .pos-text { padding-top: .9rem; }
  .bogen .fragen-bereich::before { position: static; display: block; width: auto; text-align: left; padding: 0 clamp(1.1rem, 4vw, 3.2rem) .8rem; }
  .bogen .fragen-bereich .huelle { padding-left: clamp(1.1rem, 4vw, 3.2rem); }
  .anfrage .feld-zeile { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 1.0625rem; }
  .drei { grid-template-columns: 1fr; }
  .fuss .spalten { grid-template-columns: 1fr; }
  .marke { font-size: .875rem; }
  .marke b { font-size: 1.02rem; }
  .knoepfe .knopf { width: 100%; }
  .pk-feld { grid-template-columns: 4.4rem minmax(0, 1fr); gap: .6rem; }
  .pk-unterschrift { margin-top: 1.8rem; }
  .ue-buehne { grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, .9fr); }
  .tabelle.stapel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabelle.stapel, .tabelle.stapel tbody, .tabelle.stapel tr, .tabelle.stapel th, .tabelle.stapel td { display: block; width: 100%; }
  .tabelle.stapel { display: flex !important; flex-direction: column; border: 1px solid var(--linie); }
  .tabelle.stapel tr { border-bottom: 2px solid var(--linie); padding: .4rem 0; }
  .tabelle.stapel tbody th { padding-bottom: .2rem; border: 0; }
  .tabelle.stapel td { border: 0; padding-top: .25rem; padding-bottom: .5rem; }
  .tabelle.stapel caption { display: block; width: 100%; padding: .7rem 1rem .4rem; order: 2; }
  .tabelle.stapel td::before { content: attr(data-spalte); display: block; font: 600 .875rem/1.3 var(--mono); color: var(--tinte-2); margin-bottom: .1rem; }
  .ansprech { grid-template-columns: 72px 1fr; }
  .ansprech img { width: 72px; height: 72px; }
}

/* === Cover-Foto (Startseite, 14.11.2026) === */
.cover-foto { position: relative; margin: 0; }
.cover-foto img { display: block; width: 100%; height: clamp(190px, 34vw, 470px); object-fit: cover; object-position: center; }
.cover-foto figcaption { position: absolute; right: .5rem; bottom: .4rem; max-width: calc(100% - 1rem); padding: .15rem .5rem; border-radius: 3px;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: .875rem; line-height: 1.4; }
.cover-foto figcaption a { color: #fff; text-decoration-color: rgba(255, 255, 255, .6); }
@media (max-width: 640px) { .cover-foto figcaption { position: static; max-width: none; padding: .3rem 1rem 0; border-radius: 0; background: none; color: inherit; text-align: right; } .cover-foto figcaption a { color: inherit; text-decoration-color: currentColor; } }
/* === Ende Cover-Foto === */