@import url("/schriften/schriften.css");

/* ==========================================================================
   IMMOBILIEN:WERK, Gestaltungssystem
   Salbeigruen aus der Bestandsmarke, fuer Textkontraste nachgeschaerft.
   Gliederungsmotiv ist der Doppelpunkt aus der Wortmarke.
   ========================================================================== */

:root {
  /* Flaechen */
  --papier: #f4f6f4;
  --karte: #ffffff;
  --flaeche: #e8ede9;
  --tief: #1b211e;
  --tief-2: #232b27;

  /* Schrift */
  --tinte: #1b211e;
  --tinte-2: #46534c;
  --tinte-3: #616d67;
  --tinte-auf-tief: #eef2ef;
  --tinte-2-auf-tief: #b3c0b8;

  /* Marke */
  --akzent: #47645a;
  --akzent-hell: #5b7d70;
  --akzent-tief: #34493f;
  --salbei: #8fa096;
  --salbei-blass: #c9d8d0;
  --messing: #9a7530;

  /* Linien */
  --linie: #d5ddd7;
  --linie-stark: #b7c3bb;
  --linie-auf-tief: #34403a;

  /* Rueckmeldungen */
  --fehler: #96382d;
  --fehler-flaeche: #f6e6e3;
  --gut: #37634a;
  --gut-flaeche: #dfeae2;

  /* Schriftfamilien */
  --schrift-anzeige: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --schrift-text: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --schrift-mono: "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  /* Abstaende */
  --r1: 4px;  --r2: 8px;  --r3: 12px; --r4: 16px;
  --r5: 24px; --r6: 32px; --r7: 48px; --r8: 64px; --r9: 96px;

  --ecke: 4px;
  --breite: 1200px;
  --lesespalte: 68ch;

  --schatten: 0 1px 2px rgba(27, 33, 30, .05), 0 12px 32px -22px rgba(27, 33, 30, .35);
  --tempo: 220ms;
  --kurve: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------- Grundlage */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;          /* 17px */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;            /* Sicherung gegen waagerechten Ueberlauf */
}

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

h1, h2, h3, h4 {
  font-family: var(--schrift-anzeige);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
  /* Keine Silbentrennung: ein Wort wird nie mit Trennstrich zerschnitten,
     sondern wandert vollständig in die nächste Zeile. break-word bleibt nur
     als letzte Rettung, falls ein Wort allein breiter als die Zeile ist. */
  hyphens: manual;
  overflow-wrap: break-word;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.45rem, 3.4vw, 2.35rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); font-weight: 600; letter-spacing: -.015em; }
h4 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }

p { margin: 0 0 var(--r4); max-width: var(--lesespalte); }
p:last-child { margin-bottom: 0; }

/* Lange E-Mail-Adressen und Verweise sprengen sonst schmale Bildschirme. */
p, li, dd, dt, td, th, summary, figcaption, .nachweise, .merkkasten {
  overflow-wrap: break-word;
}
a[href^="mailto:"], a[href^="tel:"], a[href^="http"], .nachweise a, code {
  overflow-wrap: break-word;
}

a { color: var(--akzent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--akzent-tief); }

ul, ol { margin: 0 0 var(--r4); padding-left: 1.25em; max-width: var(--lesespalte); }
li { margin-bottom: .4em; }
li::marker { color: var(--salbei); }

strong { font-weight: 600; }
abbr { text-decoration: none; }

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

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.sprungmarke {
  position: absolute; left: var(--r4); top: -100px; z-index: 200;
  background: var(--tief); color: var(--tinte-auf-tief);
  padding: var(--r3) var(--r5); border-radius: var(--ecke);
  font-family: var(--schrift-anzeige); font-weight: 600; text-decoration: none;
  transition: top var(--tempo) var(--kurve);
}
.sprungmarke:focus { top: var(--r4); color: var(--tinte-auf-tief); }

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

.bahn { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--r5); }

.abschnitt { padding-block: clamp(var(--r7), 8vw, var(--r9)); }
.abschnitt--eng { padding-block: clamp(var(--r6), 6vw, var(--r8)); }
.abschnitt--flaeche { background: var(--flaeche); }
.abschnitt--tief { background: var(--tief); color: var(--tinte-auf-tief); }
.abschnitt--tief h2, .abschnitt--tief h3 { color: var(--tinte-auf-tief); }
.abschnitt--tief p { color: var(--tinte-2-auf-tief); }
.abschnitt--tief a:not(.knopf) { color: var(--salbei-blass); }

.stapel { display: flex; flex-direction: column; gap: var(--r5); }
.stapel--eng { gap: var(--r3); }
.stapel--weit { gap: var(--r7); }

/* -------------------------------------------------- Rubrik mit Doppelpunkt */

.rubrik {
  display: flex; align-items: center; gap: var(--r3);
  font-family: var(--schrift-mono); font-size: .6875rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--akzent); margin: 0 0 var(--r4);
}
.rubrik::before { content: ":"; font-size: 1.25rem; line-height: 0; color: var(--salbei); }
.rubrik::after { content: ""; flex: 1; height: 1px; background: var(--linie); max-width: 140px; }
.abschnitt--tief .rubrik { color: var(--salbei-blass); }
.abschnitt--tief .rubrik::after { background: var(--linie-auf-tief); }

.kopfblock { max-width: 42rem; margin-bottom: var(--r6); }
.kopfblock p { color: var(--tinte-2); font-size: 1.1875rem; margin-top: var(--r3); }
.abschnitt--tief .kopfblock p { color: var(--tinte-2-auf-tief); }

/* ---------------------------------------------------------------- Kopfzeile */

.kopf {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--papier) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
  transition: box-shadow var(--tempo) var(--kurve);
}
.kopf[data-gescrollt="ja"] { box-shadow: 0 1px 16px -8px rgba(27, 33, 30, .3); }

/* Die Kopfleiste behaelt ihre Hoehe. Sie ist sticky und steht damit im Fluss:
   schrumpft sie beim Scrollen, wird das ganze Dokument kuerzer, der Browser
   ruckt die Scrollposition nach, und an der Schwelle schaukelt sich das zu
   einem sichtbaren Zittern auf. Die Rueckmeldung beim Scrollen macht allein
   der Schatten. Ausserdem stimmt so die Rechnung fuer .titel--voll immer. */
.kopf__leiste {
  display: flex; align-items: center; gap: var(--r4);
  min-height: 72px;
}

.wortmarke {
  font-family: var(--schrift-anzeige); font-weight: 700; font-size: 1.05rem;
  letter-spacing: -.01em; color: var(--tinte); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
  white-space: nowrap;
}
.wortmarke:hover { color: var(--tinte); }
.wortmarke b { font-weight: 700; }
.wortmarke i { font-style: normal; color: var(--salbei); padding-inline: .05em; }

.kopf__nav { display: none; margin-left: auto; }
.kopf__nav ul { display: flex; gap: var(--r2); list-style: none; margin: 0; padding: 0; max-width: none; }
.kopf__nav li { margin: 0; }
.kopf__nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding-inline: var(--r3);
  font-family: var(--schrift-anzeige); font-size: .95rem; font-weight: 600;
  color: var(--tinte-2); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.kopf__nav a:hover { color: var(--akzent); }
.kopf__nav a[aria-current="page"] { color: var(--tinte); border-bottom-color: var(--salbei); }

.kopf__tat { display: none; margin-left: var(--r3); }

.menue-schalter {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: var(--r2);
  min-height: 44px; min-width: 44px; padding-inline: var(--r3);
  background: none; border: 1px solid var(--linie-stark); border-radius: var(--ecke);
  font-family: var(--schrift-anzeige); font-size: .9rem; font-weight: 600;
  color: var(--tinte); cursor: pointer;
}
.menue-schalter__balken { display: block; width: 18px; height: 10px; position: relative; }
.menue-schalter__balken::before,
.menue-schalter__balken::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px;
  background: currentColor; transition: transform var(--tempo) var(--kurve);
}
.menue-schalter__balken::before { top: 0; }
.menue-schalter__balken::after { bottom: 0; }
.menue-schalter[aria-expanded="true"] .menue-schalter__balken::before { transform: translateY(4.25px) rotate(45deg); }
.menue-schalter[aria-expanded="true"] .menue-schalter__balken::after { transform: translateY(-4.25px) rotate(-45deg); }

.mobilmenue {
  position: fixed; inset: 0; z-index: 99;
  background: var(--papier);
  padding: 88px var(--r5) var(--r5);
  display: flex; flex-direction: column;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity var(--tempo) var(--kurve), visibility var(--tempo);
}
.mobilmenue[data-offen="ja"] { opacity: 1; visibility: visible; }
.mobilmenue ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.mobilmenue li { margin: 0; border-bottom: 1px solid var(--linie); }
.mobilmenue a:not(.knopf) {
  display: flex; align-items: center; min-height: 56px;
  font-family: var(--schrift-anzeige); font-size: 1.375rem; font-weight: 600;
  color: var(--tinte); text-decoration: none;
}
.mobilmenue a[aria-current="page"] { color: var(--akzent); }
.mobilmenue a[aria-current="page"]::before { content: ":"; color: var(--salbei); margin-right: .4em; }
.mobilmenue__fuss { margin-top: auto; padding-top: var(--r6); display: flex; gap: var(--r3); }
.mobilmenue__fuss .knopf { flex: 1; }

body[data-menue="offen"] { overflow: hidden; }

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

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--r2);
  min-height: 48px; padding: 0 var(--r5);
  font-family: var(--schrift-anzeige); font-size: 1rem; font-weight: 600;
  border-radius: var(--ecke); border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color var(--tempo) var(--kurve), border-color var(--tempo) var(--kurve);
}
.knopf--voll { background: var(--akzent); color: #fff; }
.knopf--voll:hover { background: var(--akzent-tief); color: #fff; }
.knopf--umriss { background: transparent; color: var(--tinte); border-color: var(--linie-stark); }
.knopf--umriss:hover { border-color: var(--akzent); color: var(--akzent); }
.knopf--hell { background: var(--salbei-blass); color: var(--akzent-tief); }
.knopf--hell:hover { background: #fff; color: var(--akzent-tief); }
.abschnitt--tief .knopf--umriss,
.titel .knopf--umriss { color: var(--tinte-auf-tief); border-color: rgba(255, 255, 255, .45); }
.abschnitt--tief .knopf--umriss:hover,
.titel .knopf--umriss:hover { border-color: var(--salbei); color: var(--salbei-blass); background: rgba(255, 255, 255, .06); }

.knopfreihe { display: flex; flex-wrap: wrap; gap: var(--r3); }

/* ------------------------------------------------------------------- Titel */

.titel { position: relative; background: var(--tief); color: var(--tinte-auf-tief); overflow: hidden; }
.titel__bild { position: absolute; inset: 0; }
.titel__bild img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.titel__schleier {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(27,33,30,.94) 0%, rgba(27,33,30,.78) 45%, rgba(27,33,30,.38) 100%);
}
.titel__inhalt { position: relative; padding-block: clamp(var(--r8), 13vw, 152px); max-width: 46rem; }
.titel h1 { color: #fff; }
.titel a:not(.knopf) { color: var(--salbei-blass); }
.titel__vor {
  font-family: var(--schrift-mono); font-size: .6875rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--salbei-blass);
  display: flex; align-items: center; gap: var(--r3); margin-bottom: var(--r4);
}
.titel__vor::before { content: ":"; font-size: 1.25rem; line-height: 0; }
.titel__text { font-size: clamp(1.0625rem, 2vw, 1.25rem); color: #d6e0da; margin-top: var(--r4); max-width: 38rem; }
.titel .knopfreihe { margin-top: var(--r6); }

.titel--schmal .titel__inhalt { padding-block: clamp(var(--r7), 9vw, 104px); }

/* Bildschirmfüllender Auftakt: Kopfleiste abgezogen (72px Höhe plus 1px
   Trennlinie), damit Kopf und Bild zusammen genau einen Bildschirm ergeben.
   svh statt vh wegen der ein- und ausfahrenden Adressleiste auf Mobilgeräten. */
.titel--voll { display: flex; align-items: center; min-height: calc(100vh - 73px); }
@supports (height: 100svh) {
  .titel--voll { min-height: calc(100svh - 73px); }
}
.titel--voll > .bahn { width: 100%; }
.titel--voll .titel__inhalt { padding-block: clamp(var(--r7), 8vw, 112px); }
.titel--voll .titel__bild img { opacity: .55; }

/* -------------------------------------------------------------- Vertrauen */

.vertrauen { background: var(--tief-2); border-top: 1px solid var(--linie-auf-tief); }
.vertrauen ul {
  list-style: none; margin: 0; padding: var(--r4) 0; max-width: none;
  display: grid; gap: var(--r3) var(--r5);
  grid-template-columns: 1fr;
}
.vertrauen li {
  margin: 0; display: flex; align-items: baseline; gap: var(--r2);
  font-size: .9375rem; color: var(--tinte-2-auf-tief);
}
.vertrauen li::before { content: ":"; color: var(--messing); font-family: var(--schrift-mono); font-weight: 700; }
.vertrauen b { color: var(--tinte-auf-tief); font-weight: 600; }

/* ------------------------------------------------------------------ Karten */

.karten { display: grid; gap: var(--r4); grid-template-columns: 1fr; }

.karte {
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--ecke);
  padding: var(--r5); box-shadow: var(--schatten);
  transition: border-color var(--tempo) var(--kurve);
}
.karte:hover { border-color: var(--linie-stark); }
.karte h3 { margin-bottom: var(--r2); }
.karte p { color: var(--tinte-2); font-size: .9875rem; }
.karte__zahl {
  font-family: var(--schrift-mono); font-size: .6875rem; letter-spacing: .12em;
  color: var(--akzent); display: block; margin-bottom: var(--r3);
}
.abschnitt--tief .karte { background: var(--tief-2); border-color: var(--linie-auf-tief); box-shadow: none; }
.abschnitt--tief .karte p { color: var(--tinte-2-auf-tief); }

/* ---------------------------------------------------------------- Ablauf */

.ablauf { list-style: none; margin: 0; padding: 0; max-width: none; position: relative; display: grid; gap: 0; }
.ablauf__schritt { margin: 0; position: relative; padding: 0 0 var(--r6) var(--r7); }
.ablauf__schritt::before {
  content: ""; position: absolute; left: 15px; top: 30px; bottom: -6px;
  width: 1px; background: var(--linie-stark);
}
.ablauf__schritt:last-child { padding-bottom: 0; }
.ablauf__schritt:last-child::before { display: none; }
.ablauf__punkt {
  position: absolute; left: 0; top: 2px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--karte); border: 1.5px solid var(--salbei);
  display: grid; place-items: center;
  font-family: var(--schrift-mono); font-size: .75rem; color: var(--akzent);
}
.ablauf h3 { margin-bottom: var(--r2); }
.ablauf p { color: var(--tinte-2); }
/* Auf dunklem Grund muss der hellere Grauwert gewinnen -- ohne diese Zeile
   erbt der Schritttext das Grau für helle Flächen. */
.abschnitt--tief .ablauf p { color: var(--tinte-2-auf-tief); }

/* --------------------------------------------------------------- Tabelle */

.tabellenrahmen {
  overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--ecke);
  background: var(--karte);
}
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: .9375rem; }
caption {
  caption-side: top; text-align: left; padding: var(--r4) var(--r4) 0;
  font-family: var(--schrift-mono); font-size: .6875rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinte-3);
}
/* Nur die Spaltenköpfe sind Beschriftungen. Zeilenköpfe sind Fließtext -- in
   Versalien wären sie deutlich schlechter lesbar. */
thead th {
  font-family: var(--schrift-anzeige); font-size: .6875rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--tinte-3);
  text-align: left; padding: var(--r3) var(--r4);
  background: var(--flaeche); border-bottom: 1px solid var(--linie-stark);
  white-space: nowrap;
}
tbody th {
  font-family: var(--schrift-text); font-size: .9375rem; font-weight: 600;
  text-align: left; padding: var(--r3) var(--r4);
  color: var(--tinte); border-bottom: 1px solid var(--linie);
}
td { padding: var(--r3) var(--r4); border-bottom: 1px solid var(--linie); color: var(--tinte-2); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td strong { color: var(--tinte); }
.ja { color: var(--gut); font-weight: 600; }
.extra { color: var(--tinte-3); }
.leer  { color: var(--tinte-3); font-style: italic; }
.scrollhinweis {
  font-family: var(--schrift-mono); font-size: .6875rem; color: var(--tinte-3);
  margin-top: var(--r2); letter-spacing: .04em;
}

/* --------------------------------------------------------------- Aufklapp */

.aufklapp {
  border: 1px solid var(--linie); border-radius: var(--ecke);
  background: var(--karte); overflow: hidden;
}
.aufklapp + .aufklapp { margin-top: var(--r2); }
.aufklapp > summary {
  display: flex; align-items: center; gap: var(--r3);
  padding: var(--r4) var(--r5); cursor: pointer; list-style: none;
  font-family: var(--schrift-anzeige); font-size: 1.0625rem; font-weight: 600;
  min-height: 56px;
}
.aufklapp > summary::-webkit-details-marker { display: none; }
.aufklapp > summary::before {
  content: "+"; font-family: var(--schrift-mono); color: var(--akzent);
  font-size: 1.1rem; flex: none; width: 1ch;
}
.aufklapp[open] > summary::before { content: "\2013"; }
.aufklapp > summary:hover { background: var(--flaeche); }
.aufklapp__inhalt { padding: 0 var(--r5) var(--r5); border-top: 1px solid var(--linie); }
.aufklapp__inhalt > *:first-child { margin-top: var(--r4); }

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

/* Raster statt Stapel: kurze Felder stehen ab 600 px paarweise nebeneinander
   (Haltepunkt weiter unten). So bleibt das Formular auf einen Blick erfassbar,
   statt sich ueber zwei Bildschirmhoehen zu ziehen. */
.formular {
  display: grid; grid-template-columns: 1fr; align-items: start;
  gap: var(--r3) var(--r4); max-width: 44rem;
}
.feld--breit { grid-column: 1 / -1; }
/* Die Ueberschrift steht sonst direkt auf der ersten Beschriftung. */
h2 + .formular { margin-top: var(--r5); }

/* Auf schmalen Bildschirmen stehen Ort und Einheiten nebeneinander. Ab dem
   Haltepunkt loest sich das Paar auf (display: contents), damit die Felder
   in den normalen Fluss des zweispaltigen Rasters zurueckfallen. */
.feldpaar {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--r3); align-items: start;
}

/* Rasterfelder duerfen kleiner werden als ihr Inhalt. Ohne das erzwingt allein
   die Grundbreite eines Zahlenfeldes eine Spalte von rund 180 px und die Seite
   laeuft auf schmalen Bildschirmen waagerecht ueber. */
.formular .feld, .feldpaar > .feld { min-width: 0; }
.formular input, .formular select, .formular textarea { min-width: 0; }
.feld { display: flex; flex-direction: column; gap: var(--r2); }
.feld > label {
  font-family: var(--schrift-anzeige); font-size: .9375rem; font-weight: 600; color: var(--tinte);
  padding: 0;
}
.feld__hinweis { font-size: .875rem; color: var(--tinte-3); }

.feld input[type="text"], .feld input[type="email"], .feld input[type="tel"],
.feld input[type="number"], .feld select, .feld textarea {
  font-family: var(--schrift-text);
  font-size: 1rem;                 /* nie unter 16px -- sonst zoomt iOS */
  line-height: 1.5;
  padding: var(--r3) var(--r4);
  min-height: 48px;
  color: var(--tinte); background: var(--karte);
  border: 1px solid var(--linie-stark); border-radius: var(--ecke);
  width: 100%;
  transition: border-color var(--tempo) var(--kurve);
}
.feld textarea { min-height: 86px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--akzent); }
.feld input[aria-invalid="true"], .feld select[aria-invalid="true"], .feld textarea[aria-invalid="true"] {
  border-color: var(--fehler); border-width: 1.5px;
}

.feld__fehler {
  font-size: .875rem; color: var(--fehler); font-weight: 600;
  display: flex; align-items: baseline; gap: .4em;
}
.feld__fehler::before { content: "!"; font-family: var(--schrift-mono); }
.feld__fehler:empty { display: none; }

.meldung { padding: var(--r4) var(--r5); border-radius: var(--ecke); border-left: 3px solid; }
.meldung--fehler { background: var(--fehler-flaeche); border-color: var(--fehler); color: #6d281f; }
.meldung--gut { background: var(--gut-flaeche); border-color: var(--gut); color: #23412f; }
.meldung h3 { font-size: 1.0625rem; margin-bottom: var(--r2); }
.meldung ul { margin-bottom: 0; }
.meldung[hidden] { display: none; }

.datenhinweis { font-size: .875rem; color: var(--tinte-3); max-width: 34rem; }

/* Freiwillige Felder. Ohne JavaScript steht der Aufklapper offen, seite.js
   klappt ihn nur auf schmalen Bildschirmen zu. */
.mehrfelder { border-top: 1px solid var(--linie); padding-top: var(--r3); }
.mehrfelder > summary {
  display: flex; align-items: center; gap: var(--r3);
  font-family: var(--schrift-anzeige); font-size: .9375rem; font-weight: 600;
  color: var(--tinte); cursor: pointer; list-style: none;
  min-height: 44px; padding-block: var(--r1);
}
.mehrfelder > summary::-webkit-details-marker { display: none; }
.mehrfelder > summary::before {
  content: "+"; font-family: var(--schrift-mono); font-size: 1.125rem;
  line-height: 1; color: var(--akzent); width: 1em; text-align: center;
}
.mehrfelder[open] > summary::before { content: "‘2"; }
.mehrfelder > summary span {
  font-family: var(--schrift-mono); font-size: .6875rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinte-3); font-weight: 400;
}
.mehrfelder > summary:hover { color: var(--akzent); }
.mehrfelder__raster {
  display: grid; grid-template-columns: 1fr; align-items: start;
  gap: var(--r4); padding-top: var(--r3);
}

/* Absendeknopf und Datenhinweis teilen sich eine Zeile, sobald Platz ist. */
.formular__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r4); }
.formular__fuss .knopf { flex: none; }
.formular__fuss .datenhinweis { flex: 1 1 18rem; margin: 0; }

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

.kartenplatz {
  border: 1px solid var(--linie); border-radius: var(--ecke); overflow: hidden;
  background: var(--flaeche);
}
.kartenplatz__vorschau { padding: var(--r6) var(--r5); text-align: center; }
.kartenplatz__vorschau p { margin-inline: auto; color: var(--tinte-2); font-size: .9375rem; }
.kartenplatz__vorschau .knopf { margin-top: var(--r4); }
.kartenplatz iframe { display: block; width: 100%; height: 380px; border: 0; }

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

.bildrahmen { border-radius: var(--ecke); overflow: hidden; background: var(--flaeche); }
.bildrahmen img { width: 100%; }

.bandbild { position: relative; }
.bandbild img { width: 100%; max-height: 340px; object-fit: cover; }

.paar { display: grid; gap: var(--r6); align-items: center; grid-template-columns: 1fr; }
/* Neben einem Formular wird nicht mittig ausgerichtet: das kurze Formular
   rutschte sonst in die Mitte der langen Kontaktspalte. */
.paar:has(.formular) { align-items: start; }
.paar--umgekehrt .paar__bild { order: -1; }

.zitat {
  border-left: 3px solid var(--salbei); padding-left: var(--r5);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem); line-height: 1.45;
  font-family: var(--schrift-anzeige); font-weight: 600; letter-spacing: -.015em;
  color: var(--tinte); max-width: 34rem;
}
.zitat cite {
  display: block; margin-top: var(--r4); font-style: normal;
  font-family: var(--schrift-mono); font-size: .75rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinte-3); font-weight: 400;
}
.abschnitt--tief .zitat { color: var(--tinte-auf-tief); }
.abschnitt--tief .zitat cite { color: var(--salbei); }

.merkkasten {
  border: 1px solid var(--linie); border-left: 3px solid var(--akzent);
  border-radius: 0 var(--ecke) var(--ecke) 0;
  background: var(--karte); padding: var(--r4) var(--r5);
}
.merkkasten__titel {
  font-family: var(--schrift-mono); font-size: .6875rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--akzent); display: block; margin-bottom: var(--r2);
}

.ortsliste { display: flex; flex-wrap: wrap; gap: var(--r2); list-style: none; padding: 0; max-width: none; }
.ortsliste li { margin: 0; }
.ortsliste span {
  display: inline-block; padding: var(--r2) var(--r4);
  border: 1px solid var(--linie-auf-tief); border-radius: 999px;
  font-size: .9375rem; color: var(--tinte-2-auf-tief);
}

.werte { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; gap: var(--r4); }
.werte li { margin: 0; padding-left: var(--r5); position: relative; color: var(--tinte-2); }
.werte li::before {
  content: ":"; position: absolute; left: 0; top: -.1em;
  font-family: var(--schrift-mono); font-size: 1.2rem; color: var(--salbei); font-weight: 700;
}
.werte b { color: var(--tinte); font-weight: 600; }
.abschnitt--tief .werte li { color: var(--tinte-2-auf-tief); }
.abschnitt--tief .werte b { color: var(--tinte-auf-tief); }

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

.fuss { background: var(--tief); color: var(--tinte-2-auf-tief); padding-block: var(--r8) var(--r6); }
.fuss__gitter { display: grid; gap: var(--r6); grid-template-columns: 1fr; }
.fuss h2, .fuss h3 {
  font-family: var(--schrift-mono); font-size: .6875rem; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: var(--salbei);
  margin-bottom: var(--r4);
}
.fuss ul { list-style: none; padding: 0; margin: 0; max-width: none; }
.fuss li { margin: 0; }
.fuss a:not(.knopf):not(.wortmarke) {
  display: flex; align-items: center; min-height: 44px;
  color: var(--tinte-2-auf-tief); text-decoration: none; font-size: .9375rem;
}
.fuss a:hover { color: #fff; text-decoration: underline; }
.fuss .wortmarke { color: var(--tinte-auf-tief); font-size: 1.1rem; }
.fuss__marke p { font-size: .9375rem; color: var(--tinte-2-auf-tief); margin-top: var(--r3); }
.fuss__unten {
  margin-top: var(--r7); padding-top: var(--r5);
  border-top: 1px solid var(--linie-auf-tief);
  display: flex; flex-wrap: wrap; gap: var(--r3) var(--r5);
  align-items: center; justify-content: space-between;
  font-size: .875rem;
}
.fuss__unten p { margin: 0; }

/* ------------------------------------------------------- Mobile Tatenleiste */

.tatenleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; gap: var(--r2);
  padding: var(--r2) var(--r3) calc(var(--r2) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--papier) 95%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--linie);
  transform: translateY(110%);
  transition: transform var(--tempo) var(--kurve);
}
.tatenleiste[data-sichtbar="ja"] { transform: translateY(0); }
.tatenleiste .knopf { flex: 1; min-height: 46px; font-size: .95rem; padding-inline: var(--r3); }

/* ------------------------------------------------------------- Fehlerseite */

.fehlerseite { display: grid; place-items: center; text-align: center; padding-block: var(--r9); }
.fehlerseite__zahl {
  font-family: var(--schrift-mono); font-size: clamp(3.5rem, 14vw, 6rem);
  color: #7e9286; line-height: 1; letter-spacing: -.04em;
}
.fehlerseite p { margin-inline: auto; }
.fehlerseite ul {
  list-style: none; padding: 0; margin: var(--r6) auto 0; max-width: none;
  display: flex; flex-wrap: wrap; gap: var(--r2); justify-content: center;
}
.fehlerseite li { margin: 0; }
.fehlerseite li a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--r4);
  border: 1px solid var(--linie-stark); border-radius: var(--ecke);
  text-decoration: none; font-family: var(--schrift-anzeige); font-weight: 600; font-size: .95rem;
}

/* --------------------------------------------------------------- Nachweise */

.nachweise { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; gap: var(--r4); }
.nachweise li { margin: 0; padding-bottom: var(--r4); border-bottom: 1px solid var(--linie); font-size: .9375rem; }
.nachweise li:last-child { border-bottom: 0; }
.nachweise b { display: block; color: var(--tinte); font-weight: 600; }
.nachweise span { color: var(--tinte-2); }
.nachweise .mono { font-family: var(--schrift-mono); font-size: .8125rem; color: var(--tinte-3); }

.rechtstext h2 { margin-top: var(--r7); margin-bottom: var(--r3); }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext h3 { margin-top: var(--r5); margin-bottom: var(--r2); }
.rechtstext dl { margin: 0 0 var(--r4); max-width: var(--lesespalte); }
.rechtstext dt {
  font-family: var(--schrift-mono); font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinte-3); margin-top: var(--r4);
}
.rechtstext dd { margin: var(--r1) 0 0; color: var(--tinte-2); }
.offen {
  background: var(--fehler-flaeche); color: #6d281f;
  font-family: var(--schrift-mono); font-size: .8125rem;
  padding: 2px 6px; border-radius: 3px;
}

/* ------------------------------------------------------------- Bewegungen */

/* Nur verstecken, wenn JavaScript laeuft -- sonst waere die Seite ohne
   JavaScript leer. Die Klasse setzt ein Inline-Schnipsel im <head>. */
.js [data-zeigen] { opacity: 0; transform: translateY(16px); }
.js [data-zeigen="sichtbar"] {
  opacity: 1; transform: none;
  transition: opacity 520ms var(--kurve), transform 520ms var(--kurve);
}

.titel__inhalt > * { animation: einblenden 620ms var(--kurve) backwards; }
.titel__inhalt > *:nth-child(1) { animation-delay: 60ms; }
.titel__inhalt > *:nth-child(2) { animation-delay: 140ms; }
.titel__inhalt > *:nth-child(3) { animation-delay: 220ms; }
.titel__inhalt > *:nth-child(4) { animation-delay: 300ms; }

@keyframes einblenden {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ Haltepunkte */

@media (min-width: 600px) {
  .karten--zwei { grid-template-columns: repeat(2, 1fr); }
  .karten--vier { grid-template-columns: repeat(2, 1fr); }
  .formular { grid-template-columns: repeat(2, 1fr); gap: var(--r4); }
  .feldpaar { display: contents; }
  .mehrfelder__raster { grid-template-columns: repeat(2, 1fr); }
  .vertrauen ul { grid-template-columns: repeat(2, 1fr); }
  .titel__inhalt { padding-block: clamp(var(--r9), 15vw, 176px); }
}

@media (min-width: 900px) {
  body { font-size: 1.09375rem; }
  .karten--drei { grid-template-columns: repeat(3, 1fr); }
  .karten--vier { grid-template-columns: repeat(4, 1fr); }
  .vertrauen ul { grid-template-columns: repeat(4, 1fr); padding-block: var(--r5); }
  .paar { grid-template-columns: 1fr 1fr; gap: var(--r8); }
  .paar--schmal { grid-template-columns: 1.15fr .85fr; }
  .fuss__gitter { grid-template-columns: 1.4fr 1fr 1fr 1fr; }

  .kopf__nav, .kopf__tat { display: block; }
  .menue-schalter, .mobilmenue, .tatenleiste { display: none; }

  .ablauf { grid-template-columns: repeat(5, 1fr); gap: var(--r5); }
  .ablauf__schritt { padding: var(--r7) 0 0; }
  .ablauf__schritt::before {
    left: 32px; right: -24px; top: 15px; bottom: auto;
    width: auto; height: 1px;
    transform: scaleX(0); transform-origin: left;
    transition: transform 700ms var(--kurve);
  }
  .ablauf[data-gezeichnet="ja"] .ablauf__schritt::before { transform: scaleX(1); }
  .ablauf[data-gezeichnet="ja"] .ablauf__schritt:nth-child(2)::before { transition-delay: 120ms; }
  .ablauf[data-gezeichnet="ja"] .ablauf__schritt:nth-child(3)::before { transition-delay: 240ms; }
  .ablauf[data-gezeichnet="ja"] .ablauf__schritt:nth-child(4)::before { transition-delay: 360ms; }
  .ablauf__schritt:last-child::before { display: none; }
}

@media (min-width: 1100px) {
  .bahn { padding-inline: var(--r6); }
}

/* ----------------------------------------------------- Weniger Bewegung */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js [data-zeigen] { opacity: 1; transform: none; }
  .ablauf__schritt::before { transform: scaleX(1) !important; }
}

/* ------------------------------------------------------------------ Druck */

@media print {
  .kopf, .fuss, .tatenleiste, .mobilmenue, .kartenplatz { display: none; }
  body { background: #fff; font-size: 11pt; }
  .titel { background: #fff; color: #000; }
  .titel--voll { min-height: 0; display: block; }
  .titel__bild, .titel__schleier { display: none; }
  .titel h1, .titel__text { color: #000; }
}