/*
 * golnik.css – Designsystem der Website (neues Layout, body[data-layout]).
 *
 * Aufbau: 1 Schriften · 2 Tokens · 3 Grundlagen · 4 Rahmen (Kopf, Menü, Fuß, mobile Leiste, Einwilligung)
 *         5 Bausteine (Hero, Abschnitte, Antwortbox, Ablauf, FAQ, Kacheln, Kennzahlen, Abschlussband,
 *           Logo-Leiste, Abschnitt mit Bild, Preis, Preisrechner, Termin-Vorschau, Termin-Tool, Leistungsgruppen, Beiträge,
 *           Kontaktseite mit Standorten, Umlegungskarte für Beteiligte)
 *         6 Formulare (Felder, Fehler, Chips, Auswahlkarten) · 7 Hilfsklassen
 *         8 eAnfrage (Schritte, Leistungswahl, Karte zur Flurstückswahl, Unterlagen, Überblick, Bestätigung)
 * Bootstrap 5 (custom.css) liefert Raster und Hilfsklassen; alles Markenspezifische steht hier.
 * Farben nur über die Tokens in :root. Kontraste sind in tests/unit/FarbkontrastTest.php geprüft.
 */

/* 1 ─ Schriften ─────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-v24-latin-500.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-v24-latin-600.woff2") format("woff2");
}

/* Ersatzschrift mit angepassten Maßen: Beim Nachladen von Poppins springt der Text kaum */
@font-face {
  font-family: "Poppins Ersatz";
  src: local("Arial");
  size-adjust: 112%;
  ascent-override: 93%;
  descent-override: 31%;
  line-gap-override: 9%;
}

/* 2 ─ Tokens ─────────────────────────────────────────────────────────────────── */

:root {
  --golnik-rot: #d81330;
  --golnik-rot-dunkel: #b0102a;
  --golnik-rot-hell: #fcecee;
  --golnik-anthrazit: #2e343b;
  --golnik-text: #3b4148;
  --golnik-text-leise: #59616a;
  --golnik-text-inaktiv: #9aa1a9;
  --golnik-linie: #e2e4e7;
  --golnik-flaeche: #f5f5f3;
  --golnik-weiss: #ffffff;
  --golnik-fuss-text: #d0d4d9;
  --golnik-erfolg: #1f6f3c;
  --golnik-erfolg-hell: #eaf5ee;

  /* Nur Vorschau: Band über einem Entwurf aus dem Portal (.vorschau-band) */
  --entwurf-blau: #1d4ed8;

  /* Planfarben der Zeichnungen aus den WebGIS-Daten: ruhig und hell, Rot nur für Messpunkt und Handlungsbedarf */
  --plan-linie: #6b7280;
  --plan-grund: #eceef0;
  --plan-stellplaetze: #d3d8de;
  --plan-wege: #ebe2d0;
  --plan-pflanzen: #c5dcba;
  --plan-sonstige: #b6bcc3;
  --plan-gebaeude: #9ba2aa;
  --plan-offen: #b7791f;
  --plan-karte: #dfe2e5;

  /* Themen-Motive als Hintergrund (Kurzantwort, Abschlussband, Abschnitte mit Motiv) in verschiedenen Versionen; das Layout
     setzt sie je Seite am <body>: 1 = Version des Heros, 2 = Kurzantwort, 3 = Abschlussband */
  --golnik-motiv-2: url("/img/motive/flurkarte-2.svg");
  --golnik-motiv-3: url("/img/motive/flurkarte-3.svg");

  --golnik-schrift-titel: "Poppins", "Poppins Ersatz", system-ui, sans-serif;
  --golnik-schrift-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --golnik-radius: 12px;
  --golnik-radius-klein: 8px;
  --golnik-schatten: 0 1px 2px rgba(21, 24, 28, 0.05), 0 10px 30px rgba(21, 24, 28, 0.07);
  --golnik-schatten-hoch: 0 2px 4px rgba(21, 24, 28, 0.06), 0 18px 40px rgba(21, 24, 28, 0.12);
  --golnik-fokus: 0 0 0 3px rgba(216, 19, 48, 0.35);

  --golnik-abschnitt: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  --golnik-breite: 1240px;
  --golnik-rand: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --golnik-kopf-hoehe: 72px;
  --golnik-uebergang: 180ms ease;
}

/* 3 ─ Grundlagen ─────────────────────────────────────────────────────────────── */

body[data-layout] {
  margin: 0;
  font-family: var(--golnik-schrift-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--golnik-text);
  background: var(--golnik-weiss);
  text-align: left;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body[data-layout] h1,
body[data-layout] h2,
body[data-layout] h3,
body[data-layout] h4 {
  font-family: var(--golnik-schrift-titel);
  font-weight: 600;
  color: var(--golnik-anthrazit);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

body[data-layout] h3 {
  font-size: 1.2rem;
  font-weight: 500;
}

body[data-layout] p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

body[data-layout] a {
  color: var(--golnik-rot-dunkel);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

body[data-layout] a:hover {
  color: var(--golnik-rot);
}

body[data-layout] :focus-visible {
  outline: 3px solid var(--golnik-rot);
  outline-offset: 2px;
  border-radius: 2px;
}

body[data-layout] img {
  max-width: 100%;
  height: auto;
}

/* hidden gilt immer, auch wenn eine Komponente display setzt (z.B. .knopf, der erst mit JavaScript erscheint) */
body[data-layout] [hidden] {
  display: none !important;
}

/* Sprungziele (#termin, #baeume …) nicht unter dem festen Kopf verstecken; das Karussell springt das Skript selbst an */
body[data-layout] [id],
body[data-layout] .karussell {
  scroll-margin-top: calc(var(--golnik-kopf-hoehe) + 1rem);
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.25em;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 2000;
  padding: 0.75rem 1.25rem;
  background: var(--golnik-anthrazit);
  color: var(--golnik-weiss) !important;
  border-radius: var(--golnik-radius-klein);
}

.skip-link:focus {
  top: 1rem;
}

.behaelter {
  width: 100%;
  max-width: var(--golnik-breite);
  margin-inline: auto;
  padding-inline: var(--golnik-rand);
}

.behaelter--schmal {
  max-width: 880px;
}

/* Produktlogo über der Dachzeile im Hero (z.B. Wortmarke „WebGIS“ unter dem GOLNIK-Logo im Kopf) */
.held__marke {
  margin: 0 0 1.25rem !important;
}

body[data-layout] .held__marke img {
  display: block;
  width: auto;
  height: clamp(2rem, 1.6rem + 1.2vw, 2.75rem);
}

.dachzeile {
  margin: 0 0 1rem !important;
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--golnik-rot-dunkel);
}

/* Knöpfe */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.7rem 1.35rem;
  border: 1.5px solid transparent;
  border-radius: var(--golnik-radius-klein);
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color var(--golnik-uebergang), color var(--golnik-uebergang),
    border-color var(--golnik-uebergang), transform var(--golnik-uebergang);
}

.knopf .icon {
  transition: transform var(--golnik-uebergang);
}

.knopf:hover .icon {
  transform: translateX(3px);
}

.knopf--primaer,
body[data-layout] a.knopf--primaer {
  background: var(--golnik-rot);
  color: var(--golnik-weiss);
}

.knopf--primaer:hover,
body[data-layout] a.knopf--primaer:hover {
  background: var(--golnik-rot-dunkel);
  color: var(--golnik-weiss);
}

.knopf--zweit,
body[data-layout] a.knopf--zweit {
  background: transparent;
  color: var(--golnik-anthrazit);
  border-color: var(--golnik-anthrazit);
}

.knopf--zweit:hover,
body[data-layout] a.knopf--zweit:hover {
  background: var(--golnik-anthrazit);
  color: var(--golnik-weiss);
}

/* 4 ─ Rahmen ─────────────────────────────────────────────────────────────────── */

/* Kopf */
/* Kein backdrop-filter/transform am Kopf: Beides macht ihn zum Bezugsrahmen des festen Handy-Menüs,
   das dann nur so hoch wäre wie der Kopf selbst */
.kopf {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--golnik-weiss);
  border-bottom: 1px solid var(--golnik-linie);
}

.kopf__innen {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: var(--golnik-breite);
  min-height: var(--golnik-kopf-hoehe);
  margin-inline: auto;
  padding-inline: var(--golnik-rand);
}

.kopf__logo {
  display: block;
  flex-shrink: 0;
  margin-right: auto;
}

.kopf__logo img {
  display: block;
  width: clamp(220px, 22vw, 290px);
  height: auto;
}

.kopf__menueknopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: -0.5rem;
  border: 0;
  background: transparent;
  color: var(--golnik-anthrazit);
}

.kopf__menueknopf .icon {
  width: 28px;
  height: 28px;
}

.kopf__schliessicon,
.kopf__menueknopf[aria-expanded="true"] .kopf__menueicon {
  display: none;
}

.kopf__menueknopf[aria-expanded="true"] .kopf__schliessicon {
  display: block;
}

.kopf__telefon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  font-size: 0.95rem;
  white-space: nowrap;
  text-decoration: none !important;
  color: var(--golnik-anthrazit) !important;
}

.kopf__telefon .icon {
  color: var(--golnik-rot);
}

/* Sprachumschalter DE/EN: zum Gegenstück der Seite, sonst zur Startseite der anderen Sprache */
.kopf__sprache {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.6rem;
  border: 1px solid var(--golnik-linie);
  border-radius: var(--golnik-radius-klein);
  font-family: var(--golnik-schrift-titel);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-decoration: none !important;
  color: var(--golnik-anthrazit) !important;
  transition: border-color var(--golnik-uebergang), color var(--golnik-uebergang);
}

.kopf__sprache:hover {
  border-color: var(--golnik-rot);
  color: var(--golnik-rot) !important;
}

/* Landingpage: Umschalter neben der Aktion; schmal trägt die mobile Leiste die Aktion */
.kopf--landing .kopf__sprache {
  align-self: auto;
}

@media (max-width: 575.98px) {
  .kopf--landing .kopf__aktion {
    display: none;
  }
}

/* Hauptmenü: mobil als Tafel unter dem Kopf */
.hauptmenue {
  display: none;
}

.hauptmenue.is-offen {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: var(--golnik-kopf-hoehe) 0 0 0;
  padding: 1rem var(--golnik-rand) 2rem;
  overflow-y: auto;
  background: var(--golnik-weiss);
}

.hauptmenue__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hauptmenue__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.9rem 0;
  border: 0;
  border-bottom: 1px solid var(--golnik-linie);
  background: none;
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  font-size: 1.125rem;
  text-align: left;
  text-decoration: none !important;
  color: var(--golnik-anthrazit) !important;
}

.hauptmenue__pfeil {
  transition: transform var(--golnik-uebergang);
}

.hauptmenue__link[aria-expanded="true"] .hauptmenue__pfeil {
  transform: rotate(180deg);
}

.hauptmenue__aktion {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

.aufklapp {
  padding: 0.5rem 0 1rem;
}

.aufklapp__raster {
  display: grid;
  gap: 1.25rem;
}

.aufklapp__titel {
  margin: 0 0 0.35rem !important;
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--golnik-text-leise);
}

.aufklapp__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.aufklapp__link {
  display: block;
  padding: 0.4rem 0;
  text-decoration: none !important;
  color: var(--golnik-text) !important;
}

.aufklapp__link:hover,
.aufklapp__link[aria-current="page"] {
  color: var(--golnik-rot-dunkel) !important;
}

.aufklapp__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 2rem;
  margin: 1rem 0 0 !important;
  padding-top: 1rem;
  border-top: 1px solid var(--golnik-linie);
  font-size: 0.95rem;
  color: var(--golnik-text-leise);
}

/* Weg zur Leistungsübersicht: Der Menüpunkt „Leistungen“ selbst klappt nur auf, hier führt der Link hin */
body[data-layout] .aufklapp__uebersicht {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  color: var(--golnik-anthrazit);
  text-decoration: none;
}

body[data-layout] .aufklapp__uebersicht:hover {
  color: var(--golnik-rot-dunkel);
}

.aufklapp__uebersicht .icon {
  width: 1em;
  height: 1em;
  color: var(--golnik-rot);
  transition: transform var(--golnik-uebergang);
}

.aufklapp__uebersicht:hover .icon {
  transform: translateX(3px);
}

@media (min-width: 1140px) {
  .kopf__menueknopf {
    display: none;
  }

  .hauptmenue,
  .hauptmenue.is-offen {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.75rem;
    position: static;
    padding: 0;
    overflow: visible;
    background: none;
  }

  .hauptmenue__liste {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  /* Nie umbrechen: englische Punkte haben zwei Wörter („Development plans“), die sonst bei knapper Breite zweizeilig werden */
  .hauptmenue__link,
  .hauptmenue__aktion .knopf {
    white-space: nowrap;
  }

  .hauptmenue__link {
    position: relative;
    width: auto;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    border: 0;
    font-size: 0.975rem;
  }

  .kopf__innen {
    min-height: 88px;
  }

  .hauptmenue__link::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: -26px;
    height: 2px;
    background: var(--golnik-rot);
    transform: scaleX(0);
    transition: transform var(--golnik-uebergang);
  }

  .hauptmenue__link:hover::after,
  .hauptmenue__link.is-aktiv::after,
  .hauptmenue__link[aria-expanded="true"]::after {
    transform: scaleX(1);
  }

  .hauptmenue__aktion {
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
    margin: 0;
  }

  .kopf__sprache {
    align-self: auto;
    min-width: 2.25rem;
    min-height: 2.25rem;
  }

  /* Bis 1360 px passt die ausgeschriebene Nummer nicht neben das Menü – dann nur das Icon */
  .kopf__telefon span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .aufklapp {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 2rem max(var(--golnik-rand), calc((100vw - var(--golnik-breite)) / 2 + var(--golnik-rand)));
    background: var(--golnik-weiss);
    border-top: 1px solid var(--golnik-linie);
    box-shadow: var(--golnik-schatten-hoch);
  }

  .aufklapp__raster {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
}

@media (min-width: 1360px) {
  .kopf__telefon span {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }
}

/* Breadcrumb */
.brotkrumen {
  max-width: var(--golnik-breite);
  margin-inline: auto;
  padding: 1rem var(--golnik-rand) 0;
  font-size: 0.875rem;
}

.brotkrumen__liste {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--golnik-text-leise);
}

.brotkrumen__glied + .brotkrumen__glied::before {
  content: "/";
  padding-inline: 0.5rem;
  color: var(--golnik-linie);
}

.brotkrumen__glied a {
  color: var(--golnik-text-leise) !important;
  text-decoration: none;
}

.brotkrumen__glied a:hover {
  text-decoration: underline;
}

/* Fuß */
.fuss {
  position: relative;
  overflow: hidden;
  background: var(--golnik-anthrazit);
  color: var(--golnik-fuss-text);
  font-size: 0.95rem;
}

.fuss a {
  color: var(--golnik-weiss) !important;
  text-decoration: none;
}

.fuss a:hover {
  text-decoration: underline;
}

.fuss__innen {
  display: grid;
  gap: 2.5rem;
  max-width: var(--golnik-breite);
  margin-inline: auto;
  padding: clamp(3rem, 6vw, 4.5rem) var(--golnik-rand) 2.5rem;
}

@media (min-width: 768px) {
  .fuss__innen {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1140px) {
  .fuss__innen {
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
  }
}

.fuss__marke img {
  width: 230px;
  height: auto;
  margin-bottom: 1.25rem;
}

.fuss__text {
  max-width: 34ch;
}

.fuss__slogan {
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  color: var(--golnik-weiss);
}

body[data-layout] .fuss__titel {
  margin-bottom: 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--golnik-weiss);
}

.fuss__adresse {
  margin-bottom: 0.75rem;
  font-style: normal;
}

.fuss__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fuss__liste li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.45rem;
}

.fuss__liste a {
  display: inline-flex;
  gap: 0.6rem;
}

.fuss__liste .icon {
  margin-top: 0.2em;
  color: var(--golnik-fuss-text);
}

.fuss__leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2rem;
  max-width: var(--golnik-breite);
  margin-inline: auto;
  padding: 1.5rem var(--golnik-rand);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.875rem;
}

.fuss__leiste p {
  margin: 0 auto 0 0 !important;
}

.fuss__rechtliches,
.fuss__profile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fuss__profile {
  gap: 0.25rem;
}

.fuss__profil {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: background-color var(--golnik-uebergang);
}

.fuss__profil:hover {
  background: rgba(255, 255, 255, 0.1);
}

.fuss__profil .icon {
  width: 1.4rem;
  height: 1.4rem;
}

.fuss__knopf {
  padding: 0;
  border: 0;
  background: none;
  color: var(--golnik-weiss);
  font: inherit;
  cursor: pointer;
}

.fuss__knopf:hover {
  text-decoration: underline;
}

/* Mobile Aktionsleiste */
.mobil-leiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1020;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 0.5rem;
  padding: 0.5rem var(--golnik-rand) calc(0.5rem + env(safe-area-inset-bottom));
  background: var(--golnik-weiss);
  box-shadow: 0 -6px 20px rgba(21, 24, 28, 0.1);
}

.mobil-leiste__knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 48px;
  border: 1.5px solid var(--golnik-anthrazit);
  border-radius: var(--golnik-radius-klein);
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  text-decoration: none !important;
  color: var(--golnik-anthrazit) !important;
}

.mobil-leiste__knopf--primaer {
  border-color: var(--golnik-rot);
  background: var(--golnik-rot);
  color: var(--golnik-weiss) !important;
}

body[data-layout] {
  padding-bottom: 72px;
}

/* Seiten ohne Leiste (eAnfrage): kein Platz dafür, Knöpfe unten rechts und Einwilligung rücken nach unten */
body[data-layout][data-ohne-leiste] {
  padding-bottom: 0;
}

@media (max-width: 991.98px) {
  body[data-ohne-leiste] :is(.nach-oben, .einwilligung) {
    bottom: calc(1rem + env(safe-area-inset-bottom));
  }
}

@media (min-width: 992px) {
  .mobil-leiste {
    display: none;
  }

  body[data-layout] {
    padding-bottom: 0;
  }
}

/* Zum Seitenanfang (bausteine/nach-oben.php): unten rechts, auf schmalen Bildschirmen über der Aktionsleiste und auf
   Höhe des Einwilligungshinweises (der liegt darüber). Aussehen wie die runden Bedienknöpfe, siehe .video-buehne__knopf. */
.nach-oben {
  position: fixed;
  z-index: 1030;
  right: var(--golnik-rand);
  bottom: calc(80px + env(safe-area-inset-bottom));
  box-shadow: var(--golnik-schatten);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
}

.nach-oben.is-sichtbar {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Eigene Übergänge (die gemeinsame Knopf-Regel steht weiter unten): beim Ausblenden erst verblassen, dann verbergen */
body[data-layout] .nach-oben {
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s, color var(--golnik-uebergang), border-color var(--golnik-uebergang);
}

body[data-layout] .nach-oben.is-sichtbar {
  transition-delay: 0s;
}

.nach-oben:focus-visible {
  outline: none;
  box-shadow: var(--golnik-fokus), var(--golnik-schatten);
}

@media (min-width: 992px) {
  .nach-oben {
    bottom: 1.5rem;
  }
}

/* Einwilligung */
.einwilligung {
  position: fixed;
  left: var(--golnik-rand);
  right: var(--golnik-rand);
  bottom: calc(80px + env(safe-area-inset-bottom));
  z-index: 1040;
  max-width: 980px;
  margin-inline: auto;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--golnik-linie);
  border-radius: var(--golnik-radius);
  background: var(--golnik-weiss);
  box-shadow: var(--golnik-schatten-hoch);
}

@media (min-width: 992px) {
  .einwilligung {
    bottom: 1.5rem;
  }
}

.einwilligung__innen {
  display: grid;
  gap: 1rem;
  align-items: center;
}

@media (min-width: 768px) {
  .einwilligung__innen {
    grid-template-columns: 1fr auto;
    gap: 2rem;
  }
}

/* Titel ist ein <p> (keine Überschrift, siehe bausteine/einwilligung.php), sieht aber aus wie eine */
body[data-layout] .einwilligung__titel {
  margin: 0 0 0.35rem;
  font-family: var(--golnik-schrift-titel);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--golnik-anthrazit);
}

.einwilligung__text {
  margin: 0 !important;
  font-size: 0.925rem;
  color: var(--golnik-text-leise);
}

.einwilligung__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.einwilligung__knoepfe .knopf {
  flex: 1 1 auto;
}

/* 5 ─ Bausteine ─────────────────────────────────────────────────────────────── */

/* Hero */
.held {
  --held-abstand: clamp(2.5rem, 1.5rem + 5vw, 5.5rem);
  position: relative;
  overflow: hidden;
  padding-block: var(--held-abstand);
}

/* Themen-Motiv hinter dem Hero: oben kräftig, nach unten ausgeblendet */
.held__motiv {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 90%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.6) 45%, transparent 90%);
}

.held__motiv .motiv {
  width: 100%;
  height: 100%;
}

.motiv__linien,
.motiv__flaechen,
.motiv__texte,
.motiv__punkte {
  opacity: 0.4;
}

/* Motive außerhalb des Heros (z.B. Themen der Stilvorlage) zeichnen sich erst, wenn sie ins Bild scrollen */
.js [data-bewegung]:not(.is-sichtbar) .motiv {
  display: none;
}

/* Das Motiv zeichnet sich: Linien ziehen, Nebenelemente und Beschriftung erscheinen, Punkte werden gesetzt, Messpunkt pulsiert */
.motiv__linien path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: golnik-linie-ziehen 1.4s cubic-bezier(0.6, 0, 0.3, 1) forwards;
  animation-delay: calc(var(--i) * 70ms);
}

.motiv__flaechen > *,
.motiv__texte > * {
  opacity: 0;
  animation: golnik-einblenden 0.8s ease forwards 1.5s;
}

.motiv__punkte circle {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: golnik-punkt-setzen 0.35s ease-out forwards;
  animation-delay: calc(1.1s + var(--i) * 30ms);
}

.motiv__messpunkt {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: golnik-punkt-setzen 0.5s ease-out forwards 2.3s;
}

.motiv__puls {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: golnik-puls 2.6s ease-out infinite 2.8s;
}

@keyframes golnik-linie-ziehen {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes golnik-einblenden {
  to {
    opacity: 1;
  }
}

@keyframes golnik-punkt-setzen {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  70% {
    opacity: 1;
    transform: scale(1.4);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes golnik-puls {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(4);
  }
}

.held__innen {
  position: relative;
  display: grid;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
  max-width: var(--golnik-breite);
  margin-inline: auto;
  padding-inline: var(--golnik-rand);
}

@media (min-width: 992px) {
  .held__innen {
    grid-template-columns: 1.05fr 1fr;
  }

  .held--ohne-bild .held__innen,
  .held--video .held__innen {
    grid-template-columns: minmax(0, 820px);
  }
}

body[data-layout] .held__titel {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

.held__lead {
  max-width: 46ch;
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.55;
  color: var(--golnik-text-leise);
}

.held__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.held__hinweis {
  margin: 0.9rem 0 0 !important;
  font-size: 0.9rem;
  color: var(--golnik-text-leise);
}

/* „Direkt anfragen:“ mit Leistungen, die in der eAnfrage schon gewählt sind */
.held__schnellwahl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 1rem 0 0 !important;
  font-size: 0.95rem;
  color: var(--golnik-text-leise);
}

body[data-layout] .held__schnellwahl a {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--golnik-linie);
  border-radius: 999px;
  background: var(--golnik-weiss);
  color: var(--golnik-anthrazit);
  font-weight: 500;
  text-decoration: none;
  transition: border-color var(--golnik-uebergang), color var(--golnik-uebergang);
}

body[data-layout] .held__schnellwahl a:hover {
  border-color: var(--golnik-rot);
  color: var(--golnik-rot-dunkel);
}

.held__bild {
  position: relative;
}

.held__bild img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--golnik-radius);
  box-shadow: var(--golnik-schatten-hoch);
}

.fakten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--golnik-linie);
}

.fakten__eintrag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--golnik-anthrazit);
}

.fakten__eintrag .icon {
  color: var(--golnik-rot);
}

/* Abschnitte */
.abschnitt {
  padding-block: var(--golnik-abschnitt);
}

.abschnitt--eng {
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.abschnitt--flaeche {
  background: var(--golnik-flaeche);
}

.abschnitt__kopf {
  max-width: 720px;
  margin-bottom: clamp(2rem, 3vw, 3rem);
}

body[data-layout] .abschnitt__titel {
  font-size: clamp(1.65rem, 1.2rem + 1.7vw, 2.5rem);
}

/* Zweite Zeile einer Abschnittsüberschrift (z.B. Termin-Tool) */
.abschnitt__titel-zeile {
  display: block;
}

.abschnitt__einleitung {
  font-size: 1.125rem;
  color: var(--golnik-text-leise);
}

/* Das Wichtigste in Kürze: dunkle Tafel mit Flurkarte, Punkte als eigene Felder mit rotem Icon */
.kurzantwort {
  position: relative;
  overflow: hidden;
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  border-radius: var(--golnik-radius);
  background: var(--golnik-anthrazit);
  color: var(--golnik-fuss-text);
  box-shadow: var(--golnik-schatten-hoch);
}

.kurzantwort::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--golnik-motiv-2) no-repeat right -80px center / 70% auto;
  opacity: 0.12;
  filter: invert(1) hue-rotate(180deg);
  pointer-events: none;
}

.kurzantwort > * {
  position: relative;
}

.kurzantwort__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

body[data-layout] .kurzantwort__titel {
  margin: 0;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  color: var(--golnik-weiss);
}

.kurzantwort__stand {
  margin: 0 !important;
  font-size: 0.875rem;
}

.kurzantwort__raster {
  display: grid;
  gap: 1rem;
  margin: 0;
}

@media (min-width: 640px) {
  .kurzantwort__raster {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1140px) {
  .kurzantwort__raster--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .kurzantwort__raster--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.kurzantwort__punkt {
  padding: 1.25rem;
  border-radius: var(--golnik-radius-klein);
  background: rgba(255, 255, 255, 0.06);
  transition: background-color var(--golnik-uebergang), transform var(--golnik-uebergang);
}

.kurzantwort__punkt:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-3px);
}

.kurzantwort__icon {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.9rem;
  border-radius: 50%;
  background: var(--golnik-rot);
  color: var(--golnik-weiss);
}

.kurzantwort__icon .icon {
  width: 1.35rem;
  height: 1.35rem;
}

.kurzantwort__frage {
  margin-bottom: 0.35rem;
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--golnik-weiss);
}

.kurzantwort__antwort {
  margin: 0;
  font-size: 0.975rem;
  line-height: 1.55;
}

.kurzantwort__antwort a {
  color: var(--golnik-weiss) !important;
}

.kurzantwort__antwort a .icon {
  width: 1em;
  height: 1em;
  margin-left: 0.25em;
  vertical-align: -0.125em;
}

/* Ablauf */
.ablauf {
  display: grid;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: schritt;
}

@media (min-width: 768px) {
  .ablauf {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

.ablauf__schritt {
  position: relative;
  padding-top: 3.75rem;
  counter-increment: schritt;
}

.ablauf__schritt::before {
  content: counter(schritt);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid var(--golnik-rot);
  border-radius: 50%;
  background: var(--golnik-weiss);
  font-family: var(--golnik-schrift-titel);
  font-weight: 600;
  color: var(--golnik-rot-dunkel);
}

@media (min-width: 768px) {
  .ablauf__schritt::after {
    content: "";
    position: absolute;
    top: 1.375rem;
    left: 3.5rem;
    right: -1.25rem;
    border-top: 1px dashed var(--golnik-linie);
  }

  .ablauf__schritt:last-child::after {
    display: none;
  }
}

.ablauf__text {
  color: var(--golnik-text-leise);
}

/* Rechtstexte (Datenschutz, Impressum): lange Texte mit Gliederung, gut lesbare Zeilenlänge */
.rechtstext {
  max-width: 72ch;
}

.rechtstext h2 {
  margin: 2.5rem 0 0.75rem;
  font-size: 1.35rem;
}

.rechtstext h3 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1.1rem;
}

.rechtstext ul {
  padding-left: 1.25rem;
}

.rechtstext li + li {
  margin-top: 0.25rem;
}

.rechtstext__inhalt {
  columns: 2 16rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--golnik-radius);
  background: var(--golnik-flaeche);
  list-style: none;
}

/* Vorschau eines Entwurfs aus dem Portal (vorschau.php): festes Band oben, damit niemand sie für die echte Seite hält */
.vorschau-band {
  position: sticky;
  top: 0;
  z-index: 1000;
  margin: 0;
  padding: 0.5rem 1rem;
  background: var(--entwurf-blau);
  color: var(--golnik-weiss);
  font-weight: 600;
  text-align: center;
}

/* Beitrag aus Aktuelles (bausteine/beitrag-text.php): Bild rechts, Text fließt darum; darunter Galerie und Knopf */
.beitrag::after {
  content: "";
  display: table;
  clear: both;
}

.beitrag__bild {
  margin: 0 0 1.5rem;
}

.beitrag__bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--golnik-radius);
}

@media (min-width: 768px) {
  .beitrag__bild {
    float: right;
    width: 42%;
    margin: 0 0 1.5rem 2rem;
  }
}

.beitrag__text > p {
  max-width: 65ch;
}

/* Galerie aus dem Portal: festes Raster, jedes Foto im eigenen Format, mit Bildtitel darunter */
.beitrag__galerie {
  clear: both;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.beitrag__galerie figure {
  margin: 0;
}

.beitrag__galerie img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--golnik-radius);
}

.beitrag__galerie figcaption {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  color: var(--golnik-text-leise);
}

.beitrag__aufruf {
  clear: both;
  margin-top: 2rem;
}

/* Ablauf als senkrechte Zeitleiste (Historie): Marke statt Nummer, eine Spalte, Linie zwischen den Marken */
.ablauf.ablauf--zeitleiste {
  grid-template-columns: none;
  max-width: 48rem;
  gap: 1.75rem;
}

.ablauf--zeitleiste .ablauf__schritt {
  padding: 0.5rem 0 0 6.5rem;
  min-height: 2.75rem;
}

.ablauf--zeitleiste .ablauf__schritt::before {
  content: attr(data-marke);
  width: 5rem;
  border-radius: 1.375rem;
}

.ablauf--zeitleiste .ablauf__schritt::after {
  content: "";
  position: absolute;
  top: 2.75rem;
  bottom: -1.75rem;
  left: 2.5rem;
  right: auto;
  border-top: 0;
  border-left: 1px dashed var(--golnik-linie);
}

.ablauf--zeitleiste .ablauf__schritt:last-child::after {
  display: none;
}

/* FAQ; der Textteil der Bebauungspläne (.planinhalt-textteil__*, baugebiete/detail.php) klappt genauso auf, zählt
   aber nicht als Frage im FAQPage-Schema */
.faq,
.planinhalt-textteil__liste {
  border-top: 1px solid var(--golnik-linie);
}

.faq__eintrag,
.planinhalt-textteil__eintrag {
  border-bottom: 1px solid var(--golnik-linie);
}

/* Zwischenüberschrift, wenn eine Seite Fragen zu mehreren Themen hat */
body[data-layout] .faq__gruppe,
body[data-layout] .planinhalt-textteil__teil {
  margin: 2.5rem 0 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--golnik-text-leise);
}

body[data-layout] .faq__gruppe:first-of-type {
  margin-top: 0;
}

.faq__frage,
.planinhalt-textteil__frage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--golnik-anthrazit);
}

.faq__frage::-webkit-details-marker,
.planinhalt-textteil__frage::-webkit-details-marker {
  display: none;
}

.faq__frage:hover,
.planinhalt-textteil__frage:hover {
  color: var(--golnik-rot-dunkel);
}

.faq__icon,
.planinhalt-textteil__icon {
  color: var(--golnik-rot);
  transition: transform var(--golnik-uebergang);
}

.faq__eintrag[open] .faq__icon,
.planinhalt-textteil__eintrag[open] .planinhalt-textteil__icon {
  transform: rotate(45deg);
}

.faq__antwort,
.planinhalt-textteil__antwort {
  padding: 0 3rem 1.25rem 0;
}

/* Kacheln */
.kacheln {
  display: grid;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .kacheln {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .kacheln--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .kacheln--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.5rem 3.25rem;
  border: 1px solid var(--golnik-linie);
  border-radius: var(--golnik-radius);
  background: var(--golnik-weiss);
  transition: border-color var(--golnik-uebergang), box-shadow var(--golnik-uebergang),
    transform var(--golnik-uebergang);
}

.kachel:hover {
  border-color: rgba(216, 19, 48, 0.45);
  box-shadow: var(--golnik-schatten);
  transform: translateY(-2px);
}

.kachel:focus-within {
  box-shadow: var(--golnik-fokus);
}

.kachel__bild {
  margin: -1.5rem -1.5rem 1.25rem;
  overflow: hidden;
  border-radius: var(--golnik-radius) var(--golnik-radius) 0 0;
}

.kachel__bild img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.kachel__icon {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--golnik-rot-hell);
  color: var(--golnik-rot-dunkel);
}

.kachel__icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}

body[data-layout] .kachel__titel {
  font-size: 1.15rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

body[data-layout] .kachel__link {
  color: var(--golnik-anthrazit);
  text-decoration: none;
}

.kachel__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--golnik-radius);
}

body[data-layout] .kachel__link:focus-visible {
  outline: none;
}

.kachel__text {
  margin: 0 !important;
  font-size: 0.975rem;
  color: var(--golnik-text-leise);
}

.kachel__mehr {
  position: absolute;
  left: 1.5rem;
  bottom: 1.1rem;
  color: var(--golnik-rot);
  transition: transform var(--golnik-uebergang);
}

.kachel:hover .kachel__mehr {
  transform: translateX(4px);
}

/* Diese Leistung direkt anfragen (Option anfrage einer Kachel). Eigene Ebene, sonst fängt die Klickfläche
   der Karte (.kachel__link::after) den Klick ab und führt auf das Ziel der Karte statt in die eAnfrage. */
.kachel__anfrage {
  position: relative;
  z-index: 1;
  margin: 1rem 0 0 !important;
}

body[data-layout] .kachel__anfrage a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  font-size: 0.975rem;
  color: var(--golnik-rot-dunkel);
  text-decoration: none;
}

body[data-layout] .kachel__anfrage a:hover {
  text-decoration: underline;
}

.kachel__anfrage .icon {
  width: 1em;
  height: 1em;
  transition: transform var(--golnik-uebergang);
}

.kachel__anfrage a:hover .icon {
  transform: translateX(3px);
}

/* Kennzahlen */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Ab Desktop alle Zahlen in einer Reihe; die Zahl der Spalten setzt der Baustein (vertrauen.php), sonst vier */
@media (min-width: 992px) {
  .kennzahlen {
    grid-template-columns: repeat(var(--kennzahlen-spalten, 4), minmax(0, 1fr));
  }
}

.kennzahlen__wert {
  display: block;
  font-family: var(--golnik-schrift-titel);
  font-weight: 600;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem);
  line-height: 1.1;
  color: var(--golnik-anthrazit);
}

.kennzahlen__text {
  display: block;
  margin-top: 0.35rem;
  color: var(--golnik-text-leise);
}

.kennzahlen--hell .kennzahlen__wert {
  color: var(--golnik-weiss);
}

.kennzahlen--hell .kennzahlen__text {
  color: var(--golnik-fuss-text);
}

/* Themen-Übersicht (Stilvorlage): jedes Motiv in einer Karte, zeichnet sich beim Hineinscrollen */
.themen {
  display: grid;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .themen {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .themen {
    grid-template-columns: repeat(3, 1fr);
  }
}

.thema {
  overflow: hidden;
  border: 1px solid var(--golnik-linie);
  border-radius: var(--golnik-radius);
  background: var(--golnik-weiss);
}

.thema__motiv {
  position: relative;
  aspect-ratio: 4 / 3;
  border-bottom: 1px solid var(--golnik-linie);
}

.thema__motiv .motiv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.thema__motiv .motiv__linien,
.thema__motiv .motiv__flaechen,
.thema__motiv .motiv__texte,
.thema__motiv .motiv__punkte {
  opacity: 0.75;
}

.thema__text {
  padding: 1rem 1.25rem 1.25rem;
}

.thema__titel {
  margin-bottom: 0.25rem !important;
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--golnik-anthrazit);
}

.thema__bereiche {
  margin: 0 !important;
  font-size: 0.925rem;
  color: var(--golnik-text-leise);
}

/* Bildband: Foto füllt den Abschnitt, Text auf dunklem Verlauf (Kontrast unabhängig vom Bildinhalt) */
.bildband {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(420px, 55vw, 640px);
  padding-block: clamp(3.5rem, 2rem + 5vw, 6rem);
  background: var(--golnik-anthrazit);
  color: var(--golnik-fuss-text);
}

.bildband__bild {
  position: absolute;
  inset: 0;
  z-index: -2;
}

/* Spezifischer als body[data-layout] img (height: auto), sonst behält das Foto sein Format und darunter bleibt ein
   dunkler Streifen frei, sobald der Abschnitt höher ist als das Foto (Tablet) */
body[data-layout] .bildband__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--bildposition, 50% 50%);
  transform: scale(1.08);
  transition: transform 7s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.bildband.is-sichtbar .bildband__bild img {
  transform: scale(1);
}

.bildband::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(46, 52, 59, 0.94) 0%, rgba(46, 52, 59, 0.82) 40%, rgba(46, 52, 59, 0.2) 100%);
}

@media (max-width: 767px) {
  .bildband::after {
    background: rgba(46, 52, 59, 0.82);
  }
}

.bildband--zahlen::after {
  background: linear-gradient(180deg, rgba(46, 52, 59, 0.55) 0%, rgba(46, 52, 59, 0.92) 70%);
}

.bildband__innen {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

.bildband__text {
  max-width: 560px;
}

.dachzeile--hell {
  color: var(--golnik-weiss);
}

body[data-layout] .bildband__titel {
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.9rem);
  line-height: 1.12;
  color: var(--golnik-weiss);
}

.bildband__lead {
  margin-bottom: 1.75rem !important;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
}

/* Abschlussband */
.abschlussband {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
  background: var(--golnik-anthrazit);
  color: var(--golnik-fuss-text);
}

/* Themen-Motiv füllt die rechte Bildschirmhälfte und läuft nach links aus: Abschlussband und Abschnitte mit Motiv
   (Option motiv der Bausteine, die Version steht in --abschnitt-motiv). Auf hellem Grund grau und leise. */
.abschlussband,
.abschnitt--motiv {
  isolation: isolate;
}

.abschnitt--motiv {
  position: relative;
  overflow: hidden;
}

.abschlussband::before,
.abschnitt--motiv::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 0 auto;
  width: max(50%, 22rem);
  background: var(--abschnitt-motiv, var(--golnik-motiv-3)) no-repeat right center / cover;
  opacity: 0.3;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.6) 35%, #000 70%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.6) 35%, #000 70%);
  pointer-events: none;
}

/* Band direkt unter einem Abschnitt mit Motiv (Option motiv => false des Bausteins cta) */
.abschlussband--ohne-motiv::before {
  content: none;
}

/* Auf dunklem Grund hell gezeichnet */
.abschlussband::before,
.termin-vorschau::before,
.referenzen--dunkel::before,
.abschnitt--dunkel::before {
  opacity: 0.4;
  filter: invert(1) hue-rotate(180deg);
}

.abschlussband__innen {
  position: relative;
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 992px) {
  .abschlussband__innen {
    grid-template-columns: 1.4fr 1fr;
  }
}

body[data-layout] .abschlussband__titel {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
  color: var(--golnik-weiss);
}

.abschlussband__text {
  margin: 0 !important;
  font-size: 1.125rem;
}

.abschlussband__aktion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

@media (min-width: 992px) {
  .abschlussband__aktion {
    align-items: flex-end;
  }
}

/* Telefonnummer und E-Mail-Adresse, beide im selben Stil */
body[data-layout] .abschlussband__kontakt {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--golnik-weiss);
  text-decoration: none;
}

/* Kontakt als Handlung (bausteine/kontaktzeilen.php): Nummer und Adresse groß untereinander, im Abschlussband ohne
   Knopf hell, im Hero der Kontaktseite dunkel */
.kontaktzeilen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.held .kontaktzeilen {
  margin-top: 1.75rem;
}

body[data-layout] .kontakt-gross {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--golnik-schrift-titel);
  font-weight: 600;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  color: var(--golnik-anthrazit);
  text-decoration: none;
}

body[data-layout] .kontakt-gross .icon {
  width: 1.1em;
  height: 1.1em;
  color: var(--golnik-rot);
}

body[data-layout] .kontakt-gross:hover {
  color: var(--golnik-anthrazit);
  text-decoration: underline;
}

body[data-layout] .kontakt-gross--hell,
body[data-layout] .kontakt-gross--hell:hover {
  color: var(--golnik-weiss);
}

body[data-layout] .abschlussband__kontakt:hover {
  color: var(--golnik-weiss);
  text-decoration: underline;
}

/* Liste mit Icon je Punkt (Standard: Haken) */
.liste-haken {
  display: grid;
  gap: 0.6rem;
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
}

.liste-haken li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.liste-haken .icon {
  margin-top: 0.2em;
  color: var(--golnik-rot);
}

/* Kachel ohne Link (reine Info, z.B. Module): keine Hover-Bewegung, kein Pfeil, weniger Innenabstand unten */
.kachel--info {
  padding-bottom: 1.5rem;
}

.kachel--info:hover {
  border-color: var(--golnik-linie);
  box-shadow: none;
  transform: none;
}

/* Logo-Leiste: Kundenlogos groß und ruhig in einer Reihe. Jedes Logo wird in einen gleich großen Rahmen eingepasst,
   so wirken sehr breite und fast quadratische Logos ähnlich gewichtig */
.logo-leiste {
  border-bottom: 1px solid var(--golnik-linie);
}

.logo-leiste__innen {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
}

.logo-leiste__titel {
  margin: 0 !important;
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--golnik-text-leise);
}

.logo-leiste__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5rem clamp(2rem, 6vw, 5.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Spezifischer als body[data-layout] img (height: auto), sonst greift der feste Rahmen nicht */
body[data-layout] .logo-leiste__eintrag img {
  display: block;
  width: clamp(140px, 40vw, 250px);
  height: clamp(64px, 16vw, 104px);
  max-width: none;
  object-fit: contain;
}

/* Kleine Form für Verbände und Kammern (Mitgliedschaften): schließt ohne Linie an den Abschnitt davor an, Logos ruhig in
   Grau und beim Zeigen in Farbe */
.logo-leiste--klein {
  padding-top: 0;
  /* Abstand wie abschnitt--eng plus Platz für bis zu drei Zeilen Name unter dem vergrößerten Logo der letzten Reihe,
     sonst verdeckt ihn der Abschnitt danach */
  padding-bottom: calc(clamp(2rem, 1.5rem + 2vw, 3.5rem) + 4.5rem);
  border-bottom: 0;
}

.logo-leiste--klein .logo-leiste__liste {
  /* Zeilenabstand mit Platz für den Namen, der beim Zeigen unter dem Logo erscheint */
  gap: 3.5rem clamp(1.25rem, 3vw, 2.5rem);
}

body[data-layout] .logo-leiste--klein .logo-leiste__eintrag img {
  width: clamp(96px, 24vw, 132px);
  height: auto;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter var(--golnik-uebergang), opacity var(--golnik-uebergang), transform var(--golnik-uebergang);
}

/* Fokus nur per Tastatur (:focus-visible): nach einem Mausklick behält der Link den Fokus, mit :focus-within bliebe das
   Logo dann farbig und sein Name läge über dem nächsten, auf das man zeigt */
body[data-layout] .logo-leiste--klein .logo-leiste__eintrag:hover img,
body[data-layout] .logo-leiste--klein .logo-leiste__eintrag:has(:focus-visible) img {
  filter: none;
  opacity: 1;
  transform: scale(1.25);
}

/* Logo als Link auf die Seite des Verbands; beim Zeigen oder Fokussieren steht der Name unter dem Logo.
   display statt opacity: ein unsichtbarer Name am Rand würde sonst die Seite seitlich scrollbar machen */
.logo-leiste__eintrag {
  position: relative;
}

.logo-leiste__link {
  display: block;
  border-radius: var(--golnik-radius-klein);
}

.logo-leiste__link:focus-visible {
  outline: none;
  box-shadow: var(--golnik-fokus);
}

.logo-leiste__name {
  display: none;
  position: absolute;
  top: calc(100% + 1rem);
  left: 50%;
  width: max-content;
  max-width: min(14rem, 80vw);
  color: var(--golnik-anthrazit);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
  transform: translateX(-50%);
  animation: golnik-blenden var(--golnik-uebergang);
}

.logo-leiste__eintrag:has(:focus-visible) .logo-leiste__name {
  display: block;
}

/* Name per Hover nur mit Maus: auf Touch-Geräten führt das Antippen direkt auf die Seite des Verbands (Safari wertet
   einen Tipp, der etwas einblendet, sonst nur als Hover) */
@media (hover: hover) {
  .logo-leiste__eintrag:hover .logo-leiste__name {
    display: block;
  }
}

/* Äußere Logos: Name bündig an der Außenkante statt mittig, sonst ragt er aus dem Bild */
.logo-leiste__eintrag:first-child .logo-leiste__name {
  left: 0;
  text-align: left;
  transform: none;
}

.logo-leiste__eintrag:last-child .logo-leiste__name {
  left: auto;
  right: 0;
  text-align: right;
  transform: none;
}

/* Referenzkunden als Steckbriefe: Logo, Name, Kennzahl, eine Zeile */
.referenzen {
  border-bottom: 1px solid var(--golnik-linie);
}

/* Dunkle Fassung (wie Termine und Abschlussband): die Steckbriefe bleiben weiße Karten, damit die Logos wirken */
.referenzen--dunkel {
  border-bottom: 0;
}

/* Dunkle Fläche (Option dunkel der Bausteine): Anthrazit wie das Abschlussband, Karten darauf bleiben weiß */
.referenzen--dunkel,
.abschnitt--dunkel {
  background: var(--golnik-anthrazit);
}

.abschnitt--dunkel {
  color: var(--golnik-fuss-text);
}

body[data-layout] .abschnitt--dunkel .abschnitt__titel {
  color: var(--golnik-weiss);
}

.abschnitt--dunkel .abschnitt__einleitung {
  color: var(--golnik-fuss-text);
}

.abschnitt--dunkel .kachel {
  border-color: transparent;
  color: var(--golnik-text);
}

.referenzen--dunkel .referenzen__titel,
.referenzen--dunkel .referenzen__schluss {
  color: var(--golnik-fuss-text);
}

.referenzen__titel {
  margin: 0 0 clamp(1.25rem, 3vw, 2rem) !important;
  text-align: center;
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--golnik-text-leise);
}

.referenzen__schluss {
  max-width: 62ch;
  margin: clamp(1.25rem, 3vw, 1.75rem) auto 0 !important;
  font-size: 1.05rem;
  text-align: center;
  color: var(--golnik-text-leise);
}

.referenzen__liste {
  display: grid;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .referenzen__liste {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.referenz {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--golnik-linie);
  border-radius: var(--golnik-radius);
  background: var(--golnik-weiss);
  text-align: center;
  transition: border-color var(--golnik-uebergang), box-shadow var(--golnik-uebergang), transform var(--golnik-uebergang);
}

/* Die ganze Karte führt zur Homepage des Kunden (wie .kachel__link) */
.referenz:hover {
  border-color: rgba(216, 19, 48, 0.45);
  box-shadow: var(--golnik-schatten);
  transform: translateY(-2px);
}

.referenz:focus-within {
  box-shadow: var(--golnik-fokus);
}

body[data-layout] .referenz__link {
  color: var(--golnik-anthrazit);
  text-decoration: none;
}

.referenz__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--golnik-radius);
}

body[data-layout] .referenz__link:focus-visible {
  outline: none;
}

/* Jedes Logo füllt denselben Rahmen: breite stoßen an die Breite, hohe an die Höhe.
   Das WG-Warnow-PNG ist nur 235 px breit, der Rahmen daher nicht breiter als 240 px */
.referenz__logo {
  display: grid;
  place-items: center;
  width: 100%;
  height: 96px;
  margin-bottom: 0.75rem;
}

body[data-layout] .referenz__logo img {
  width: min(240px, 100%);
  height: 96px;
  object-fit: contain;
}

/* Vollständige Unternehmensnamen sind lang („Wohnungsgenossenschaft …“): trennen statt über die Karte hinauslaufen */
body[data-layout] .referenz__name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 500;
  hyphens: auto;
  overflow-wrap: anywhere;
}

.referenz__wert {
  margin: 0 !important;
  font-family: var(--golnik-schrift-titel);
  font-weight: 600;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  color: var(--golnik-anthrazit);
}

.referenz__zeile {
  margin: 0 !important;
  font-size: 0.925rem;
  color: var(--golnik-text-leise);
}

/* Abschnitt mit Text und Bild nebeneinander */
.abschnitt-bild {
  display: grid;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}

@media (min-width: 992px) {
  .abschnitt-bild {
    grid-template-columns: 1fr 1.1fr;
  }

  .abschnitt-bild--links .abschnitt-bild__medien {
    order: -1;
  }
}

.abschnitt-bild__text > p:not(.dachzeile) {
  max-width: 60ch;
}

.abschnitt-bild__medien img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--golnik-linie);
  border-radius: var(--golnik-radius);
  box-shadow: var(--golnik-schatten);
}

/*
 * Überblendung Vorher → Nachher (abschnitt-bild mit „ueberblendung“): beide Bilder liegen im selben Rasterfeld,
 * das Nachher-Bild blendet ständig ein und aus, sobald der Abschnitt im Blick ist (.is-sichtbar). Ohne Skript und bei
 * „Bewegung reduzieren“ stehen beide untereinander.
 */
.ueberblendung {
  position: relative;
  display: grid;
  gap: 1rem;
}

.ueberblendung__bild {
  position: relative;
  margin: 0;
}

.ueberblendung__marke {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.3rem 0.75rem;
  border-radius: 6px;
  background: var(--golnik-anthrazit);
  color: var(--golnik-weiss);
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  font-size: 0.8125rem;
}

.ueberblendung__knopf {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
}

@media (prefers-reduced-motion: no-preference) {
  .js .ueberblendung {
    gap: 0;
  }

  .js .ueberblendung__bild {
    grid-area: 1 / 1;
  }

  .js .ueberblendung__bild--nachher {
    opacity: 0;
  }

  .js .ueberblendung__bild--nachher img {
    box-shadow: none;
  }

  .js .is-sichtbar .ueberblendung__bild--nachher {
    animation: golnik-ueberblenden 3.5s ease-in-out infinite alternate;
  }

  .ueberblendung:hover .ueberblendung__bild--nachher,
  .ueberblendung:focus-within .ueberblendung__bild--nachher,
  .ueberblendung.is-angehalten .ueberblendung__bild--nachher {
    animation-play-state: paused;
  }
}

/* Blendet ständig hin und her (alternate), an den Enden nur kurz stehen: Es zeigt die Veränderung, nicht die Details */
@keyframes golnik-ueberblenden {
  0%,
  15% {
    opacity: 0;
  }

  85%,
  100% {
    opacity: 1;
  }
}

/* Kosten einer Leistung (bausteine/kosten.php): Antwort links, getönter Kasten mit den wichtigsten Punkten rechts */
.kosten {
  display: grid;
  gap: clamp(1.75rem, 3vw, 3.5rem);
  align-items: start;
}

@media (min-width: 992px) {
  .kosten {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
}

.kosten__text > p:not(.dachzeile) {
  max-width: 62ch;
}

.kosten__kasten {
  padding: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  border-radius: var(--golnik-radius);
  background: var(--golnik-flaeche);
}

.abschnitt--flaeche .kosten__kasten {
  background: var(--golnik-weiss);
}

body[data-layout] .kosten__kasten-titel {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1rem;
  font-family: var(--golnik-schrift-titel);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--golnik-anthrazit);
}

.kosten__kasten-titel .icon {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--golnik-rot);
}

.kosten__kasten .liste-haken {
  margin-bottom: 0;
}

/* „Gut zu wissen“ (bausteine/begriffe.php): amtlicher Fachbegriff samt Erklärung, ruhig abgesetzt vom Fließtext.
   Die Überschriften sprechen Kundensprache; am Kasten sieht der Leser sofort, dass er ihn überspringen kann. */
.begriffe {
  margin-top: 2rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: var(--golnik-radius);
  background: var(--golnik-flaeche);
}

/* Auf getönten und dunklen Flächen hebt sich der Kasten weiß ab */
.abschnitt--flaeche .begriffe,
.abschnitt--dunkel .begriffe {
  background: var(--golnik-weiss);
}

body[data-layout] .begriffe__titel {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1rem;
  font-family: var(--golnik-schrift-titel);
  font-weight: 600;
  font-size: 1rem;
  color: var(--golnik-anthrazit);
}

.begriffe__titel .icon {
  width: 1.3rem;
  height: 1.3rem;
  color: var(--golnik-rot);
}

.begriffe__liste {
  margin: 0;
}

/* Mehrere Begriffe in einem Kasten: dünne Linie statt eigener Kästen (kein Zierstreifen an der Seite) */
.begriffe__eintrag + .begriffe__eintrag {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--golnik-linie);
}

body[data-layout] .begriffe__begriff {
  margin: 0;
  font-weight: 600;
  color: var(--golnik-anthrazit);
}

.begriffe__auch {
  font-weight: 400;
  color: var(--golnik-text-leise);
}

/* dd bringt vom Browser einen linken Abstand mit, der hier stören würde */
body[data-layout] .begriffe__text {
  margin: 0.3rem 0 0;
  font-size: 0.975rem;
  line-height: 1.6;
}

body[data-layout] .begriffe__text p {
  margin: 0;
}

body[data-layout] .begriffe__text p + p {
  margin-top: 0.6rem;
}

body[data-layout] .begriffe__quelle {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--golnik-text-leise);
}

/* Anfrage zur gerade gelesenen Leistung (bausteine/anfrage-zeile.php): abgesetzte Zeile am Ende des Abschnitts.
   Zweitrangiger Knopf, damit der rote Hauptaufruf in Hero, Ablauf und Abschlussband seine Wirkung behält. */
.anfrage-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--golnik-linie);
}

body[data-layout] .anfrage-zeile__text {
  margin: 0;
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  color: var(--golnik-anthrazit);
}

.anfrage-zeile__knopf {
  flex-shrink: 0;
}

/* Der Kasten „Gut zu wissen“ bringt keinen Abstand nach unten mit: Ein Knopf darunter klebte sonst daran */
.begriffe + .knopf {
  margin-top: 1.5rem;
}

/* Glossar (bausteine/glossar.php): dieselben Begriffe wie in den Kästen, hier von A bis Z.
   Buchstabenleiste oben, darunter je Buchstabe eine Definitionsliste. */
.glossar__leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--golnik-linie);
}

body[data-layout] .glossar__leiste a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  border-radius: var(--golnik-radius-klein);
  background: var(--golnik-flaeche);
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  color: var(--golnik-anthrazit);
  text-decoration: none;
}

body[data-layout] .glossar__leiste a:hover {
  background: var(--golnik-anthrazit);
  color: var(--golnik-weiss);
}

body[data-layout] .glossar__buchstabe {
  margin: 2.5rem 0 1rem;
  font-size: 1.5rem;
  color: var(--golnik-rot);
}

.glossar {
  margin: 0;
}

.glossar__eintrag + .glossar__eintrag {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--golnik-linie);
}

body[data-layout] .glossar__begriff {
  margin: 0;
  font-family: var(--golnik-schrift-titel);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--golnik-anthrazit);
}

.glossar__auch {
  font-family: var(--golnik-schrift-text);
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--golnik-text-leise);
}

/* dd bringt vom Browser einen linken Abstand mit, der hier stören würde */
body[data-layout] .glossar__text {
  margin: 0.4rem 0 0;
}

body[data-layout] .glossar__text p {
  margin: 0;
}

body[data-layout] .glossar__text p + p {
  margin-top: 0.6rem;
}

body[data-layout] .glossar__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.5rem;
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--golnik-text-leise);
}

.glossar__fuss .icon {
  width: 1em;
  height: 1em;
  margin-left: 0.3em;
  vertical-align: -0.125em;
  transition: transform var(--golnik-uebergang);
}

.glossar__fuss a:hover .icon {
  transform: translateX(3px);
}

/* Preis: Text links, Karte mit Betrag rechts */
.preis {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 992px) {
  .preis {
    grid-template-columns: 1fr minmax(320px, 420px);
    gap: 4rem;
  }
}

.preis__karte {
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  border: 1px solid var(--golnik-linie);
  border-radius: var(--golnik-radius);
  background: var(--golnik-weiss);
  box-shadow: var(--golnik-schatten);
}

.preis__betrag {
  margin: 0 !important;
  font-family: var(--golnik-schrift-titel);
  font-weight: 600;
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem);
  line-height: 1.1;
  color: var(--golnik-anthrazit);
}

.preis__einheit {
  margin: 0.25rem 0 1.5rem !important;
  color: var(--golnik-text-leise);
}

/* Preisrechner: links Paket und Module, rechts das Ergebnis (auf breiten Schirmen mitlaufend) */
.preisrechner {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 992px) {
  .preisrechner {
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
    gap: 3rem;
  }

  .preisrechner__ergebnis {
    position: sticky;
    top: calc(var(--golnik-kopf-hoehe) + 1.5rem);
  }
}

.preisrechner__schritt,
.preisrechner__linie {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.preisrechner__schritt + .preisrechner__schritt {
  margin-top: 2.5rem;
}

.preisrechner__legende {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  font-family: var(--golnik-schrift-titel);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--golnik-anthrazit);
}

.preisrechner__stufe {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--golnik-rot);
  color: var(--golnik-weiss);
  font-size: 0.95rem;
}

.preisrechner__linien {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .preisrechner__linien {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.preisrechner__linie {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.preisrechner__linie-name {
  margin-bottom: 0.25rem;
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--golnik-anthrazit);
}

.preisrechner__linie-text {
  margin: 0 0 0.4rem !important;
  font-size: 0.95rem;
  color: var(--golnik-text-leise);
}

.preisrechner__enthalten {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--golnik-text-leise);
}

.preisrechner__enthalten .icon {
  margin-top: 0.2em;
  color: var(--golnik-erfolg);
}

.preisrechner__module {
  display: grid;
  gap: 0.6rem;
}

@media (min-width: 640px) {
  .preisrechner__module {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.preisrechner__rechnen {
  margin-top: 2rem;
}

/* Mit JavaScript rechnet der Rechner sofort, der Knopf ist nur der Weg ohne Skript */
.js .preisrechner__rechnen {
  display: none;
}

.preisrechner__ergebnis {
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  border: 1px solid var(--golnik-linie);
  border-radius: var(--golnik-radius);
  background: var(--golnik-weiss);
  box-shadow: var(--golnik-schatten);
}

.preisrechner__ergebnis-titel,
.preisrechner__untertitel {
  margin: 0 0 0.25rem !important;
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  color: var(--golnik-anthrazit);
}

.preisrechner__anfrage {
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
}

.preisrechner__posten {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--golnik-linie);
}

.preisrechner__posten li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--golnik-linie);
  font-size: 0.95rem;
}

.preisrechner__posten li > span:last-child {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  color: var(--golnik-anthrazit);
}

.preisrechner__leistungen {
  margin: 0.5rem 0 1rem;
  font-size: 0.95rem;
}

.preisrechner__leistungen dt {
  font-weight: 600;
  color: var(--golnik-anthrazit);
}

.preisrechner__leistungen dd {
  margin: 0 0 0.5rem;
  color: var(--golnik-text-leise);
}

.preisrechner__termin {
  width: 100%;
  margin-top: 1.5rem;
}

.preisrechner__termin-text {
  margin: 0.6rem 0 0 !important;
  font-size: 0.9rem;
  text-align: center;
  color: var(--golnik-text-leise);
}

/* Nächste freie Termine */
.termin-vorschau {
  background: var(--golnik-anthrazit);
  color: var(--golnik-fuss-text);
}

.termin-vorschau__innen {
  display: grid;
  gap: 1.25rem 3rem;
  align-items: center;
}

@media (min-width: 992px) {
  .termin-vorschau__innen {
    grid-template-columns: auto 1fr;
  }
}

body[data-layout] .termin-vorschau__titel {
  margin-bottom: 0.25rem;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  color: var(--golnik-weiss);
}

.termin-vorschau__text {
  margin: 0 !important;
}

.termin-vorschau__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 992px) {
  .termin-vorschau__liste {
    justify-content: flex-end;
  }
}

body[data-layout] .termin-vorschau__knopf,
body[data-layout] .termin-vorschau__weitere {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.6rem 1rem;
  border-radius: var(--golnik-radius-klein);
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--golnik-uebergang), color var(--golnik-uebergang);
}

body[data-layout] .termin-vorschau__knopf {
  background: var(--golnik-weiss);
  color: var(--golnik-anthrazit);
}

body[data-layout] .termin-vorschau__knopf:hover {
  background: var(--golnik-rot-hell);
  color: var(--golnik-anthrazit);
}

body[data-layout] .termin-vorschau__knopf .icon {
  color: var(--golnik-rot);
}

body[data-layout] .termin-vorschau__weitere {
  color: var(--golnik-weiss);
}

body[data-layout] .termin-vorschau__weitere:hover {
  color: var(--golnik-weiss);
  text-decoration: underline;
}

/* Termin-Tool: Text links, Werkzeug rechts */
.termin-raster {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

@media (min-width: 992px) {
  .termin-raster {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }

  .termin-raster__text {
    position: sticky;
    top: calc(var(--golnik-kopf-hoehe) + 2rem);
  }
}

.termin-raster__kontakt {
  color: var(--golnik-text-leise);
}

.termin-raster__tool,
.kontaktformular,
.formkarte {
  padding: clamp(1.25rem, 0.75rem + 2vw, 2.25rem);
  border: 1px solid var(--golnik-linie);
  border-radius: var(--golnik-radius);
  background: var(--golnik-weiss);
  box-shadow: var(--golnik-schatten);
}

.termin__schritt {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.termin__schritt + .termin__schritt {
  margin-top: 2rem;
}

.termin.is-gefuehrt .termin__schritt + .termin__schritt {
  margin-top: 0;
}

.termin__legende {
  display: block;
  margin-bottom: 1.25rem;
  font-family: var(--golnik-schrift-titel);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--golnik-anthrazit);
}

.termin__stufe {
  display: block;
  margin-bottom: 0.2rem;
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--golnik-rot-dunkel);
}

/* Kalender der nächsten Wochen, ein Monat auf einmal: freie Tage sind Knöpfe, andere Tage nur Zahl, Tage des
   Nachbarmonats leer. Die Pfeile blättern zwischen den Monaten. */
.termin-kalender {
  margin-bottom: 1.5rem;
}

.termin-kalender__navi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.termin-kalender__titel {
  margin: 0;
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  color: var(--golnik-anthrazit);
}

.termin-kalender__pfeil {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--golnik-linie);
  border-radius: 50%;
  background: var(--golnik-weiss);
  color: var(--golnik-anthrazit);
  cursor: pointer;
  transition: border-color var(--golnik-uebergang);
}

.termin-kalender__pfeil:hover:not(:disabled) {
  border-color: var(--golnik-anthrazit);
}

.termin-kalender__pfeil:disabled {
  border-style: dashed;
  background: transparent;
  color: var(--golnik-text-inaktiv);
  cursor: default;
}

.termin-kalender__kopf,
.termin-kalender__tage {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
}

.termin-kalender__kopf {
  margin-bottom: 0.35rem;
  font-size: 0.8125rem;
  text-align: center;
  color: var(--golnik-text-leise);
}

.termin-kalender__tag {
  display: grid;
  place-items: center;
  min-height: 48px;
  padding: 0.25rem 0;
  border: 1.5px solid var(--golnik-linie);
  border-radius: var(--golnik-radius-klein);
  background: var(--golnik-weiss);
  font: inherit;
  color: var(--golnik-anthrazit);
  cursor: pointer;
  transition: border-color var(--golnik-uebergang), background-color var(--golnik-uebergang), color var(--golnik-uebergang);
}

button.termin-kalender__tag {
  font-weight: 600;
}

button.termin-kalender__tag:hover {
  border-color: var(--golnik-anthrazit);
}

.termin-kalender__tag[aria-pressed="true"] {
  border-color: var(--golnik-anthrazit);
  background: var(--golnik-anthrazit);
  color: var(--golnik-weiss);
}

/* Tag mit Zeitfenster, aber ohne freie Zeit (alles vergeben oder gesperrt): wählbar, um die ausgegrauten Zeiten zu
   sehen, aber sichtbar zurückgenommen */
button.termin-kalender__tag.is-voll {
  border-style: dashed;
  background: transparent;
  font-weight: 400;
  color: var(--golnik-text-inaktiv);
}

.termin-kalender__tag.is-voll[aria-pressed="true"] {
  border-style: solid;
  border-color: var(--golnik-text-inaktiv);
  background: var(--golnik-text-inaktiv);
  color: var(--golnik-weiss);
}

.termin-kalender__tag.is-leer {
  border-color: transparent;
  background: transparent;
  color: var(--golnik-text-inaktiv);
  cursor: default;
}

.termin-kalender__zahl {
  line-height: 1;
}

.termin__tag + .termin__tag {
  margin-top: 1.25rem;
}

.termin__tagname {
  margin-bottom: 0.5rem !important;
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  color: var(--golnik-anthrazit);
}

.termin.is-gefuehrt .termin__tagname {
  font-size: 0.95rem;
  color: var(--golnik-text-leise);
}

.termin__uhrzeiten,
.termin__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.termin__weiter {
  margin-top: 1.5rem;
}

.termin__weiter[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.termin__auswahl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 0.85rem 1rem;
  border-radius: var(--golnik-radius-klein);
  background: var(--golnik-flaeche);
  font-weight: 600;
  color: var(--golnik-anthrazit);
}

.termin__auswahl .icon {
  color: var(--golnik-rot);
}

.termin__aendern {
  margin-left: auto;
  padding: 0.25rem 0.5rem;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 400;
  color: var(--golnik-rot-dunkel);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.termin__themen {
  min-width: 0;
  padding: 0;
  border: 0;
}

.termin-bestaetigung__datum {
  margin: 1.5rem 0 0 !important;
  font-family: var(--golnik-schrift-titel);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.2;
  color: var(--golnik-anthrazit);
}

.termin-bestaetigung__zeit {
  margin-bottom: 1.5rem !important;
  font-size: 1.15rem;
}

body[data-layout] .termin-bestaetigung__titel {
  margin-top: 2rem;
}

/* Zeichnungen aus den WebGIS-Daten (quellen/webgis/zeichnungen.php, eingebettet von bausteine/zeichnung.php).
   Einfache Klassen-Regeln ohne Verschachtelung: tools/svg-png.php liest sie für die Sichtprüfung mit. */
.zeichnung svg {
  display: block;
  width: 100%;
  height: auto;
}

.plan-grund { fill: var(--plan-grund); stroke: var(--golnik-weiss); stroke-width: 1; }
.plan-stellplaetze { fill: var(--plan-stellplaetze); stroke: var(--golnik-weiss); stroke-width: 1; }
.plan-wege { fill: var(--plan-wege); stroke: var(--golnik-weiss); stroke-width: 1; }
.plan-pflanzen { fill: var(--plan-pflanzen); stroke: var(--golnik-weiss); stroke-width: 1; }
.plan-sonstige { fill: var(--plan-sonstige); stroke: var(--golnik-weiss); stroke-width: 1; }
.plan-aussen { opacity: 0.45; }
.plan-gebaeude { fill: var(--plan-gebaeude); stroke: var(--golnik-anthrazit); stroke-width: 1.5; }
.plan-grenze { fill: none; stroke: var(--golnik-anthrazit); stroke-width: 2; }
.plan-umriss { fill: none; stroke: var(--plan-linie); stroke-width: 1; stroke-opacity: 0.5; }
.plan-einheit { fill: var(--golnik-rot-hell); stroke: none; }
.plan-karte { fill: var(--plan-karte); stroke: none; }
.plan-karte-gebaeude { fill: var(--plan-sonstige); stroke: none; }
.plan-kacheln { fill: none; stroke: var(--golnik-weiss); stroke-width: 1.5; }
.plan-winterdienst { fill: none; stroke: var(--golnik-anthrazit); stroke-width: 3; stroke-dasharray: 8 5; stroke-linecap: round; }
.plan-objekt { fill: var(--golnik-weiss); stroke: var(--golnik-anthrazit); stroke-width: 1.4; }
.plan-voll { fill: var(--golnik-anthrazit); stroke: none; }
.plan-baum--kontrolliert { color: var(--golnik-erfolg); }
.plan-baum--offen { color: var(--plan-offen); }
.plan-baum--handlung { color: var(--golnik-rot); }
.plan-krone { fill: currentColor; fill-opacity: 0.18; stroke: currentColor; stroke-width: 2.5; }
.plan-stamm { fill: currentColor; }
.plan-messpunkt { fill: var(--golnik-rot); }
.plan-tafel { fill: var(--golnik-weiss); fill-opacity: 0.94; stroke: var(--plan-linie); stroke-width: 1; }
.plan-fuehrung { fill: none; stroke: var(--plan-linie); stroke-width: 1; stroke-dasharray: 3 4; }
.plan-text { font-family: var(--golnik-schrift-titel); font-weight: 500; font-size: 22px; fill: var(--golnik-anthrazit); }
.plan-text--ebene { font-size: 25px; }
.plan-text--fett { font-weight: 600; font-size: 26px; }
.plan-text--status { fill: currentColor; }
.plan-info { fill: var(--golnik-weiss); stroke: var(--golnik-anthrazit); stroke-width: 1.5; }
.plan-status--kontrolliert { color: var(--golnik-erfolg); }
.plan-status--offen { color: var(--plan-offen); }
.plan-status--handlung { color: var(--golnik-rot); }

/* Erklärende Pläne der Leistungsseiten (quellen/leistungen/zeichnungen.php): Liegenschaftskarte mit Grenzpunkten,
   Neues in Rot wie im Fortführungsriss */
.plan-flurstueck { fill: var(--golnik-weiss); stroke: none; }
.plan-flurgrenze { fill: none; stroke: var(--plan-linie); stroke-width: 1.5; }
.plan-grenze--neu { stroke: var(--golnik-rot); stroke-width: 3; }
/* Lageplan zum Bauantrag: Geplantes rot wie im Fortführungsriss, die Abstandsfläche nur zart getönt darunter */
.plan-neubau { fill: var(--golnik-rot-hell); stroke: var(--golnik-rot); stroke-width: 2.5; }
.plan-abstandsflaeche { fill: var(--plan-grund); stroke: var(--golnik-rot); stroke-width: 1.5; stroke-dasharray: 7 5; }
.plan-zaun { fill: none; stroke: var(--golnik-anthrazit); stroke-width: 3; stroke-dasharray: 0.1 7; stroke-linecap: round; }
/* Solarpark: Grenze des Sondergebiets rot gestrichelt, Modulreihen grau, Kabeltrasse als Strich-Punkt-Linie */
.plan-baugrenze { fill: none; stroke: var(--golnik-rot); stroke-width: 2; stroke-dasharray: 10 6; }
.plan-modul { fill: var(--plan-sonstige); stroke: var(--golnik-anthrazit); stroke-width: 0.8; }
.plan-trasse { fill: none; stroke: var(--golnik-rot-dunkel); stroke-width: 2.5; stroke-dasharray: 12 5 2 5; }
.plan-mass { fill: none; stroke: var(--golnik-rot-dunkel); stroke-width: 1.5; }
.plan-bruch { fill: none; stroke: var(--golnik-anthrazit); stroke-width: 1.5; }
.plan-grenzpunkt { fill: var(--golnik-weiss); stroke: var(--golnik-anthrazit); stroke-width: 2.5; }
.plan-grenzpunkt--neu { fill: var(--golnik-rot); stroke: var(--golnik-weiss); }
.plan-hervorhebung { fill: none; stroke: var(--golnik-rot); stroke-width: 1.5; }
.plan-text--klein { font-size: 17px; }
.plan-text--leise { fill: var(--golnik-text-leise); }
.plan-text--rot { fill: var(--golnik-rot-dunkel); }

/* Plangebiet eines Bebauungsplans (Klasse Geltungsbereich): rot umrandet, mit Messpunkt */
.geltung-flaeche { fill: var(--golnik-rot-hell); }
.geltung-linie { fill: none; stroke: var(--golnik-rot); stroke-width: 2.5; stroke-linejoin: round; }

/* In den gekippten Ebenen bleiben Linien gleich stark */
.plan-ebene path,
.plan-ebene rect,
.plan-ebene circle {
  vector-effect: non-scaling-stroke;
}

/* Legende unter einer Zeichnung: Zeichen, Text, Wert */
.plan-legende {
  display: grid;
  gap: 0.45rem 1.5rem;
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  font-size: 0.95rem;
}

@media (min-width: 640px) {
  .plan-legende {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.plan-legende__eintrag {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-block: 0.3rem;
  border-bottom: 1px solid var(--golnik-linie);
}

.plan-legende__zeichen {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 4px;
}

.plan-legende__zeichen svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.plan-legende__zeichen--stellplaetze { background: var(--plan-stellplaetze); }
.plan-legende__zeichen--wege { background: var(--plan-wege); }
.plan-legende__zeichen--pflanzen { background: var(--plan-pflanzen); }
.plan-legende__zeichen--sonstige { background: var(--plan-sonstige); }
.plan-legende__zeichen--gebaeude { background: var(--plan-gebaeude); }

.plan-legende__zeichen--winterdienst {
  height: 0;
  border-top: 3px dashed var(--golnik-anthrazit);
  border-radius: 0;
}

.plan-legende__zeichen--kontrolliert,
.plan-legende__zeichen--offen,
.plan-legende__zeichen--handlung {
  border: 2.5px solid currentColor;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 18%, transparent);
}

.plan-legende__zeichen--kontrolliert { color: var(--golnik-erfolg); }
.plan-legende__zeichen--offen { color: var(--plan-offen); }
.plan-legende__zeichen--handlung { color: var(--golnik-rot); }

.plan-legende__wert {
  margin-left: auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--golnik-anthrazit);
  white-space: nowrap;
}

.plan-summe {
  margin: 0.75rem 0 0 !important;
  font-size: 0.9rem;
  color: var(--golnik-text-leise);
}

/* Zeichnung neben einem Text: auf weißer Karte wie ein Bild */
.abschnitt-bild__medien .zeichnung {
  padding: clamp(0.75rem, 2vw, 1.5rem);
  border: 1px solid var(--golnik-linie);
  border-radius: var(--golnik-radius);
  background: var(--golnik-weiss);
  box-shadow: var(--golnik-schatten);
}

/* Hero mit Zeichnung statt Foto: breitere Bildspalte, die Zeichnung darf bis an den Rand */
@media (min-width: 992px) {
  .held--zeichnung .held__innen {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 4vw, 4rem);
  }

  /* Der Ebenen-Stapel sitzt in der Zeichnung links, die Beschriftungen rechts: zusätzlicher Abstand zur Überschrift */
  .held__bild--zeichnung {
    padding-left: clamp(1rem, 3vw, 3rem);
  }
}

/* Hero mit Kurzfilm (bausteine/video.php): Der Text steht oben wie im Hero ohne Bild (mit Themen-Motiv), darunter
   Überschrift und Film. Der Film zeigt immer das ganze Bild und passt in der Höhe auf den Bildschirm; die Breite folgt
   daraus und ist höchstens so breit wie der Seiteninhalt, schmaler steht er mittig. Auf dem Handy von Rand zu Rand. */
.held--video {
  padding-block: 0;
}

/* Kopf mit Text und Themen-Motiv; das Motiv liegt nur hier, nicht hinter dem Film */
.held__kopf {
  position: relative;
  padding-block: var(--held-abstand) clamp(2rem, 4vw, 3.5rem);
}

.held__film {
  padding-bottom: var(--held-abstand);
}

.held__film-innen {
  position: relative;
  max-width: var(--golnik-breite);
  margin-inline: auto;
  padding-inline: var(--golnik-rand);
}

.held__film-kopf {
  margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
}

/* Breite aus der sichtbaren Höhe (ohne Seitenkopf und etwas Luft, schmal auch ohne Aktionsleiste), damit das ganze
   16:9-Bild auf den Bildschirm passt. Die Breite sitzt an der Bühne, nicht am Rahmen: so bleiben Marke und Knöpfe im Film. */
.held__film .video-buehne {
  --film-hoehe: calc(100vh - var(--golnik-kopf-hoehe) - 72px - 2rem);
  --film-hoehe: calc(100svh - var(--golnik-kopf-hoehe) - 72px - 2rem);
  width: min(100%, calc(var(--film-hoehe) * 16 / 9));
  margin-inline: auto;
}

@media (min-width: 992px) {
  .held__film .video-buehne {
    --film-hoehe: calc(100vh - var(--golnik-kopf-hoehe) - 3rem);
    --film-hoehe: calc(100svh - var(--golnik-kopf-hoehe) - 3rem);
  }
}

@media (min-width: 992px) {
  .held__film .video-buehne__marke {
    top: 1rem;
    right: 1rem;
  }

  .held__film .video-buehne__steuerung {
    right: 1rem;
    bottom: 1rem;
  }
}

@media (max-width: 575.98px) {
  .held__film-innen {
    padding-inline: 0;
  }


  /* Der Film geht hier bis an den Rand, die Überschrift nicht */
  .held__film-kopf {
    padding-inline: var(--golnik-rand);
  }

  .held__film .video-buehne__rahmen {
    border-radius: 0;
    box-shadow: none;
  }
}

/* Video-Bühne (bausteine/video.php): Film ohne Standard-Player. Das Standbild steht sofort, der Film blendet darüber
   ein; Weißblende beim ersten Start und an der Schleifennaht (golnik-neu.js, Abschnitt 9). */
.video-buehne {
  position: relative;
  margin: 0;
}

.video-buehne__rahmen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--golnik-radius);
  background: var(--golnik-flaeche);
  box-shadow: var(--golnik-schatten-hoch);
}

/* body[data-layout]: spezifischer als die Grundregel für Bilder (height: auto), sonst füllt das Standbild den Rahmen nicht */
body[data-layout] .video-buehne__rahmen > img,
.video-buehne__film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-buehne__film {
  opacity: 0;
  transition: opacity 0.2s linear;
}

.video-buehne.is-bereit .video-buehne__film {
  opacity: 1;
}

.video-buehne__blende {
  position: absolute;
  inset: 0;
  background: var(--golnik-weiss);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.video-buehne.is-blende .video-buehne__blende {
  opacity: 1;
}

/* Marke und Kapiteltitel: helle Schilder wie der Knopf der Ebenen-Zeichnung. Die allgemeine Absatzregel
   (body[data-layout] p) gäbe ihnen Abstand nach unten, dann säße das Kapitelschild höher als die Knöpfe. */
body[data-layout] .video-buehne__marke,
body[data-layout] .video-buehne__kapitel {
  margin: 0;
}

.video-buehne__marke,
.video-buehne__kapitel {
  border: 1px solid var(--golnik-linie);
  border-radius: 999px;
  background: color-mix(in srgb, var(--golnik-weiss) 92%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--golnik-anthrazit);
  font-family: var(--golnik-schrift-titel);
  line-height: 1;
  white-space: nowrap;
}

/* Produktlogo oben rechts am Film (z.B. „Golnik WebGIS“), auf derselben hellen Pille wie der Kapiteltitel */
.video-buehne__marke {
  position: absolute;
  z-index: 2;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  padding: 0.4rem 0.7rem;
  animation: golnik-einblenden 0.8s ease 0.5s backwards;
}

body[data-layout] .video-buehne__marke img {
  display: block;
  width: auto;
  height: 0.8rem;
}

.video-buehne__steuerung {
  position: absolute;
  z-index: 2;
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Kapitelschild: so hoch wie die Knöpfe daneben */
.video-buehne__kapitel {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.2rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.video-buehne__kapitel.is-neu {
  animation: video-kapitel 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes video-kapitel {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

/* Großer Abspielen-Knopf in der Mitte, solange der Film nicht von selbst startet (Bewegung reduzieren, Datensparen) */
.video-buehne__start {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  padding: 0;
  border: 1px solid var(--golnik-linie);
  border-radius: 50%;
  background: var(--golnik-weiss);
  color: var(--golnik-anthrazit);
  box-shadow: var(--golnik-schatten-hoch);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform var(--golnik-uebergang), opacity var(--golnik-uebergang);
}

.video-buehne__start .icon {
  width: 30px;
  height: 30px;
  margin-left: 4px;   /* Dreieck optisch mittig */
  fill: currentColor;
}

.video-buehne__start:hover {
  transform: translate(-50%, -50%) scale(1.05);
}

.video-buehne__start:focus-visible {
  outline: none;
  box-shadow: var(--golnik-fokus), var(--golnik-schatten-hoch);
}

.video-buehne__start.is-laedt {
  opacity: 0.5;
  pointer-events: none;
}

.video-buehne__knopf:focus-visible {
  outline: none;
  box-shadow: var(--golnik-fokus);
}

/* Vollbild: der ganze Film, ohne Beschnitt und ohne weiche Ränder */
.video-buehne:fullscreen {
  background: var(--golnik-anthrazit);
}

/* Höhe und Breite ausdrücklich: die Höhenbegrenzung im Hero (.held__film) darf hier nicht greifen */
.held__film .video-buehne:fullscreen .video-buehne__rahmen,
.video-buehne:fullscreen .video-buehne__rahmen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
  background: var(--golnik-anthrazit);
  -webkit-mask-image: none;
  mask-image: none;
}

.video-buehne:fullscreen .video-buehne__rahmen > img,
.video-buehne:fullscreen .video-buehne__film {
  object-fit: contain;
}

.held__film .video-buehne:fullscreen .video-buehne__marke,
.video-buehne:fullscreen .video-buehne__marke {
  top: 1.25rem;
  right: 1.25rem;
}

.held__film .video-buehne:fullscreen .video-buehne__steuerung,
.video-buehne:fullscreen .video-buehne__steuerung {
  right: 1.25rem;
  bottom: 1.25rem;
}


@media (max-width: 575.98px) {
  .video-buehne__kapitel {
    min-height: 40px;
    padding: 0 0.9rem;
    font-size: 0.82rem;
  }
}

/* Karussell: Spur mit großen Folien, die Nachbarn schauen hervor. Gescrollt wird nativ (Wischen, Tastatur, Pfeile),
   ohne JavaScript bleibt es ein Streifen zum Scrollen. */
.karussell {
  overflow: hidden;
  background: var(--golnik-flaeche);
}

.karussell__spur {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
  overscroll-behavior-x: contain;
  padding-inline: max(var(--golnik-rand), calc((100% - 1120px) / 2));
  padding-block: 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.karussell__spur::-webkit-scrollbar {
  display: none;
}

.js .karussell__spur {
  scroll-behavior: smooth;
}

.karussell__folie {
  flex: 0 0 min(88vw, 1120px);
  scroll-snap-align: center;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid var(--golnik-linie);
  border-radius: var(--golnik-radius);
  background: var(--golnik-weiss);
  transition: opacity var(--golnik-uebergang);
}

/* Die Nachbarfolien bleiben erkennbar, treten aber zurück */
.js .karussell__folie:not(.is-aktiv) {
  opacity: 0.55;
}

/* In der Folie sitzt die Zeichnung schon auf einer weißen Karte, ein zweiter Rahmen wäre zu viel */
.karussell__folie .abschnitt-bild__medien .zeichnung {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

/* Bedienung nur mit Skript, aber ab dem ersten Bild mit ihrem Platz (Klasse js steht schon im <head>) */
.karussell__steuerung {
  display: none;
}

.js .karussell__steuerung {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.karussell__pfeil,
.karussell__pause {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1.5px solid var(--golnik-linie);
  border-radius: 50%;
  background: var(--golnik-weiss);
  color: var(--golnik-anthrazit);
  cursor: pointer;
  transition: border-color var(--golnik-uebergang), background-color var(--golnik-uebergang);
}

.karussell__pfeil:hover,
.karussell__pause:hover {
  border-color: var(--golnik-anthrazit);
}

.karussell__pause {
  margin-left: 0.5rem;
  color: var(--golnik-text-leise);
}

.karussell__punkte {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.karussell__punkt {
  display: block;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.karussell__punkt::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin: auto;
  border-radius: 50%;
  background: var(--golnik-text-inaktiv);
  transition: background-color var(--golnik-uebergang), transform var(--golnik-uebergang);
}

.karussell__punkt[aria-current="true"]::before {
  background: var(--golnik-rot);
  transform: scale(1.4);
}

/* Zeichnung über einem Kachelraster (z.B. Ebenen über den Modulen): mittig und nicht zu breit */
.kacheln__zeichnung {
  max-width: 900px;
  margin: 0 auto clamp(2rem, 4vw, 3.5rem);
}

/* Baugebiete: Zeichnung des Plangebiets (Vorschau der Kartenbühne), die Umrandung zieht sich beim Laden */
.js .zeichnung--geltungsbereich .geltung-linie {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: golnik-linie-ziehen 1.6s cubic-bezier(0.6, 0, 0.3, 1) forwards 0.3s;
}

.js .zeichnung--geltungsbereich .geltung-flaeche {
  animation: golnik-blenden 0.8s ease backwards 1.2s;
}

/* Fachbegriff als Hinweis mit Überschrift */
.hinweis__titel {
  margin: 0 0 0.35rem !important;
  font-family: var(--golnik-schrift-titel);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--golnik-anthrazit);
}

.hinweis p:last-child {
  margin-bottom: 0;
}

.fachbegriffe {
  display: grid;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* Quellen und Stand der Daten (bausteine/quellen.php) */
body[data-layout] .quellen__titel {
  margin: 0 0 1rem;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
}

.quellen {
  display: grid;
  gap: 1rem 2rem;
  margin: 0 0 1.25rem;
}

@media (min-width: 768px) {
  .quellen {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

.quellen__eintrag dt {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.25rem;
  font-family: var(--golnik-schrift-titel);
  font-weight: 600;
  color: var(--golnik-anthrazit);
}

.quellen__eintrag dd {
  margin: 0;
  font-size: 0.95rem;
}

.quellen__eintrag dd .icon {
  width: 1em;
  height: 1em;
  margin-left: 0.25rem;
}

/* Frühere Fassungen unter einem Plan der Übersicht */
.gemeinde__fassungen {
  display: block;
  margin: 0 0 0.35rem 1.05rem;
  font-size: 0.85rem;
  color: var(--golnik-text-leise);
}

/* Liste von Bebauungsplänen (bausteine/plan-liste.php): ganze Karte klickbar */
.plan-liste {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .plan-liste--zwei {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.plan-liste__eintrag {
  position: relative;
  padding: 1rem 1.25rem;
  border: 1px solid var(--golnik-linie);
  border-radius: var(--golnik-radius-klein);
  background: var(--golnik-weiss);
  transition: border-color var(--golnik-uebergang), box-shadow var(--golnik-uebergang);
}

.plan-liste__eintrag:hover {
  border-color: var(--golnik-anthrazit);
  box-shadow: var(--golnik-schatten);
}

.plan-liste__eintrag.is-aktuell {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
}

.plan-liste__titel {
  margin: 0 0 0.2rem !important;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--golnik-text-leise);
}

.plan-liste__name {
  margin: 0 !important;
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  line-height: 1.35;
  color: var(--golnik-anthrazit);
}

body[data-layout] .plan-liste__link {
  color: var(--golnik-anthrazit);
  text-decoration: none;
}

.plan-liste__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.plan-liste__link:focus-visible {
  outline: none;
}

.plan-liste__eintrag:focus-within {
  box-shadow: var(--golnik-fokus);
}

.plan-liste__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.1rem;
  margin: 0.45rem 0 0 !important;
  font-size: 0.875rem;
  color: var(--golnik-text-leise);
}

.plan-marke {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.plan-marke::before {
  content: "";
  flex-shrink: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--golnik-linie);
}

.plan-marke--gueltig::before { background: var(--golnik-erfolg); }
.plan-marke--verfahren::before { background: var(--plan-offen); }
.plan-marke--ungueltig::before { background: var(--golnik-text-inaktiv); }
/* Verfahrenskarte: Verfahren der Art der Seite (vorn) und der anderen Art (neben) */
.plan-marke--vorn::before { background: var(--golnik-rot); }
.plan-marke--neben::before { background: var(--golnik-anthrazit); }

.plan-liste__mehr {
  margin: 1.5rem 0 0 !important;
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
}

/* Übersicht der Baugebiete: Suche mit Vorschlägen, Buchstaben, Gemeinden zum Aufklappen */
.baugebiete-suche {
  position: relative;
  max-width: 640px;
  margin-bottom: 1.25rem;
}

.baugebiete-suche__zeile {
  display: flex;
  gap: 0.5rem;
}

.baugebiete-suche__zeile .feld__eingabe {
  flex: 1;
  min-width: 0;
}

.baugebiete-suche__vorschlaege {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 50;
  max-height: 400px;
  margin-top: 0.25rem;
  overflow-y: auto;
  border: 1px solid var(--golnik-linie);
  border-radius: var(--golnik-radius-klein);
  background: var(--golnik-weiss);
  box-shadow: var(--golnik-schatten-hoch);
}

body[data-layout] .baugebiete-suche__vorschlag {
  display: block;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--golnik-linie);
  color: var(--golnik-anthrazit);
  text-decoration: none;
}

.baugebiete-suche__vorschlag:hover,
.baugebiete-suche__vorschlag:focus-visible {
  background: var(--golnik-flaeche);
}

.baugebiete-suche__vorschlag small {
  display: block;
  color: var(--golnik-text-leise);
}

.baugebiete-suche__leer {
  margin: 0 !important;
  padding: 0.75rem 0.9rem;
  color: var(--golnik-text-leise);
}

.buchstaben {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

body[data-layout] .buchstaben__link {
  display: grid;
  place-items: center;
  min-width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--golnik-linie);
  border-radius: var(--golnik-radius-klein);
  background: var(--golnik-weiss);
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  color: var(--golnik-anthrazit);
  text-decoration: none;
  transition: border-color var(--golnik-uebergang), background-color var(--golnik-uebergang);
}

body[data-layout] .buchstaben__link:hover {
  border-color: var(--golnik-anthrazit);
}

body[data-layout] .buchstaben__link[aria-current] {
  border-color: var(--golnik-anthrazit);
  background: var(--golnik-anthrazit);
  color: var(--golnik-weiss);
}

.baugebiete-treffer {
  margin: 0 0 1rem !important;
  font-size: 0.95rem;
  color: var(--golnik-text-leise);
}

.gemeinden {
  display: grid;
  gap: 0.5rem;
}

.gemeinde {
  border: 1px solid var(--golnik-linie);
  border-radius: var(--golnik-radius-klein);
  background: var(--golnik-weiss);
}

.gemeinde__kopf {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.1rem;
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  color: var(--golnik-anthrazit);
  list-style: none;
  cursor: pointer;
}

.gemeinde__kopf::-webkit-details-marker {
  display: none;
}

.gemeinde__anzahl {
  padding: 0.05rem 0.55rem;
  border-radius: 999px;
  background: var(--golnik-flaeche);
  font-size: 0.8125rem;
  color: var(--golnik-text-leise);
}

.gemeinde__icon {
  margin-left: auto;
  transition: transform var(--golnik-uebergang);
}

.gemeinde[open] .gemeinde__icon {
  transform: rotate(45deg);
}

.gemeinde__plaene {
  display: grid;
  gap: 0.15rem 2rem;
  margin: 0;
  padding: 0 1.1rem 1rem;
  list-style: none;
  font-size: 0.95rem;
}

@media (min-width: 992px) {
  .gemeinde__plaene {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.gemeinde__plaene a {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding-block: 0.25rem;
}

/* Leistungsgruppen: Karten mit Linkliste statt Text (bausteine/leistungen-raster.php) */
.kachel__links {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
}

.kachel__links li + li {
  border-top: 1px solid var(--golnik-linie);
}

body[data-layout] .kachel__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 0.6rem;
  color: var(--golnik-text);
  text-decoration: none;
}

body[data-layout] .kachel__links a:hover {
  color: var(--golnik-rot-dunkel);
}

.kachel__links .icon {
  color: var(--golnik-rot);
  transition: transform var(--golnik-uebergang);
}

.kachel__links a:hover .icon {
  transform: translateX(3px);
}

/* Übersichtsseite: ein Satz je Leistung unter dem Link. Der Link steht dann oben, nicht mehr mittig zur Zeile. */
.kachel__links--beschrieben li {
  padding-block: 0.5rem;
}

body[data-layout] .kachel__links--beschrieben a {
  align-items: flex-start;
  padding-block: 0;
  font-weight: 500;
  color: var(--golnik-anthrazit);
}

body[data-layout] .kachel__links--beschrieben .icon {
  margin-top: 0.2em;
  flex-shrink: 0;
}

body[data-layout] .kachel__links-text {
  margin: 0.25rem 0 0;
  font-size: 0.925rem;
  line-height: 1.5;
  color: var(--golnik-text-leise);
}

/* Themenzeichnung oben in einer Karte (Leistungsgruppen): randlos wie ein Kartenbild, Symbol rückt halb darauf */
.kachel__motiv {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: -1.5rem -1.5rem 0;
  overflow: hidden;
  border-bottom: 1px solid var(--golnik-linie);
  border-radius: var(--golnik-radius) var(--golnik-radius) 0 0;
  background: var(--golnik-flaeche);
}

.kachel__motiv .motiv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.kachel__motiv .motiv__linien,
.kachel__motiv .motiv__flaechen,
.kachel__motiv .motiv__texte,
.kachel__motiv .motiv__punkte {
  opacity: 0.7;
}

.kachel__motiv .motiv__puls {
  display: none;
}

.kachel__motiv + .kachel__icon {
  position: relative;
  margin-top: -1.5rem;
  border: 3px solid var(--golnik-weiss);
}

/* Grafiken (SVG, z.B. ein Logo als Beitragsbild) nie beschneiden */
.kachel__bild img[src*=".svg"] {
  object-fit: contain;
}

/* Datum über dem Titel einer Beitragskarte (bausteine/beitraege.php) */
.kachel__datum {
  margin: 0 0 0.35rem !important;
  font-size: 0.875rem;
  color: var(--golnik-text-leise);
}

/* Abschnittskopf mit Link daneben, z.B. „Alle Beiträge“ */
.abschnitt__kopf--mit-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  max-width: none;
}

.abschnitt__kopf--mit-link .abschnitt__titel {
  margin-bottom: 0;
}

body[data-layout] .abschnitt__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  text-decoration: none;
}

/* Knopf unter den Schritten des Ablaufs */
.ablauf__aktion {
  margin: 2.5rem 0 0 !important;
}

/* Eigene Grafik im Abschnitt mit Bild (Punktbild der Baugebiete): frei stehend, ohne Rahmen und Schatten */
.abschnitt-bild__medien .abschnitt-bild__grafik {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Wortmarke der eAnfrage (bausteine/eanfrage-marke.php): gespiegeltes Signet als „e“ in x-Höhe auf der Grundlinie */
.marke-eanfrage {
  display: flex;
  align-items: baseline;
  gap: 0.04em;
  margin: 0 0 1rem !important;
  font-family: var(--golnik-schrift-titel);
  font-weight: 600;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  line-height: 1;
  color: var(--golnik-anthrazit);
}

.marke-eanfrage--hell {
  color: var(--golnik-weiss);
}

/* „e“ der eAnfrage in Knöpfen (knopfText() in layout.php): dasselbe gespiegelte Signet als Maske in Schriftfarbe,
   also weiß auf rotem Knopf und dunkel auf hellem; .e-text hält „e“ und „Anfrage“ als ein Wort zusammen */
.e-text {
  white-space: nowrap;
}

.e-zeichen {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  margin-right: 0.03em;
  background: currentColor;
  -webkit-mask: url("../../img/logos/golnik-signet.svg") center / contain no-repeat;
  mask: url("../../img/logos/golnik-signet.svg") center / contain no-repeat;
  transform: scaleY(-1);
}

body[data-layout] .marke-eanfrage__e {
  width: 0.6em;
  height: 0.6em;
  transform: scaleY(-1);
}

/* Bewertungen als Laufleiste (bausteine/bewertungen.php): zwei Kopien der Liste laufen langsam um die halbe Breite
   plus einen halben Abstand, dann steht die zweite genau dort, wo die erste begann. Sie läuft auch bei „Bewegung
   reduzieren“ (Wunsch des Users; langsam, mit Anhalten-Knopf nach WCAG 2.2.2). Ohne JavaScript steht die Liste
   still, die Kopie ist weg und die Karten lassen sich seitlich scrollen */
.laufband {
  overflow-x: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.laufband__spur {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  margin: 0;
  padding: 0.5rem 2rem;
  list-style: none;
}

.bewertung[aria-hidden="true"] {
  display: none;
}

.js .laufband {
  overflow: hidden;
}

.js .laufband__spur {
  padding-inline: 0;
  animation: golnik-laufband var(--laufband-dauer, 60s) linear infinite;
}

.js .bewertung[aria-hidden="true"] {
  display: flex;
}

.laufband:hover .laufband__spur,
.laufband:focus-within .laufband__spur,
.laufband.is-angehalten .laufband__spur {
  animation-play-state: paused;
}

@keyframes golnik-laufband {
  to {
    transform: translateX(calc(-50% - 0.625rem));
  }
}

.bewertung {
  display: flex;
  flex-direction: column;
  width: min(80vw, 340px);
  padding: 1.5rem;
  border-radius: var(--golnik-radius);
  background: var(--golnik-weiss);
  color: var(--golnik-text);
}

.bewertung__sterne {
  display: flex;
  gap: 0.15rem;
  margin: 0 0 0.75rem !important;
  color: var(--golnik-rot);
}

.bewertung__sterne .icon {
  fill: currentColor;
  stroke: none;
}

.bewertung__sterne .bewertung__leer {
  color: var(--golnik-linie);
}

.bewertung__text {
  display: -webkit-box;
  margin: 0 0 1rem;
  overflow: hidden;
  font-size: 0.975rem;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
}

.bewertung__text p {
  margin: 0 !important;
}

.bewertung__name {
  margin: auto 0 0 !important;
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  color: var(--golnik-anthrazit);
}

.bewertung__quelle {
  font-family: var(--golnik-schrift-text);
  font-weight: 400;
  color: var(--golnik-text-leise);
}

.bewertungen__fuss {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.bewertungen__hinweis {
  margin: 0 !important;
  font-size: 0.875rem;
  color: var(--golnik-fuss-text);
}

body[data-layout] .abschnitt--dunkel .abschnitt__link {
  color: var(--golnik-weiss);
}

/* Kontaktformular (bausteine/kontaktformular.php): Karte mit Überschrift, auf der Kontaktseite allein in schmaler Breite */
body[data-layout] .kontaktformular__titel {
  margin-bottom: 1.25rem;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
}

/* Link „Route planen“ in den Karteikarten der Standortkarte (bausteine/standortkarte.php) */
body[data-layout] .standort__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  border: 0;
  background: none;
  font: 500 0.95rem/1.4 var(--golnik-schrift-titel);
  color: var(--golnik-rot-dunkel);
  text-decoration: none;
  cursor: pointer;
}

body[data-layout] .standort__link:hover {
  color: var(--golnik-rot);
  text-decoration: underline;
}

/* Anfahrt (bausteine/standorte-abschnitt.php): oben die Überschrift, darunter die Karte, die unten nahtlos in den Fuß
   übergeht. Die Karte ist 80 % der Fensterbreite breit, mindestens so breit wie der Inhalt, und steht mittig */
.anfahrt {
  padding-bottom: 0;
}

.anfahrt .standortkarte {
  width: max(100%, 80vw);
  margin-top: clamp(1.5rem, 1rem + 2vw, 3rem);
  margin-left: calc((100% - max(100%, 80vw)) / 2);
}

/* Einsatzgebiet (bausteine/einsatzgebiet.php): MV in Punkten, Kreise beim Zeigen rot, Schild mit Name und Zahl.
   Karte in Inhaltsbreite, höchstens so breit, dass sie auf einen Bildschirm passt; Gebiete darunter */
.einsatzkarte {
  position: relative;
  max-width: 60rem;
  margin-inline: auto;
}

body[data-layout] .einsatzkarte__bild,
.einsatzkarte__svg {
  display: block;
  width: 100%;
  height: auto;
}

.einsatzkarte__gebiet {
  cursor: pointer;
  outline: none;
}

.einsatzkarte__punkte {
  transition: fill var(--golnik-uebergang);
}

.einsatzkarte__gebiet.is-aktiv .einsatzkarte__punkte {
  fill: var(--golnik-rot);
}

.einsatzkarte__gebiet.is-aktiv .einsatzkarte__land {
  fill-opacity: 0.45;
}

.einsatzkarte__gebiet.is-aktiv .einsatzkarte__plaene {
  fill-opacity: 0.9;
}

.einsatzkarte__gebiet:focus-visible .einsatzkarte__flaeche {
  stroke: var(--golnik-rot);
  stroke-width: 2;
}

.einsatzkarte__schild {
  position: absolute;
  z-index: 2;
  top: var(--y);
  left: var(--x);
  margin: 0 !important;
  padding: 0.5rem 0.85rem;
  border-radius: var(--golnik-radius-klein);
  background: var(--golnik-anthrazit);
  color: var(--golnik-weiss);
  font-size: 0.875rem;
  line-height: 1.35;
  white-space: nowrap;
  box-shadow: var(--golnik-schatten-hoch);
  transform: translate(-50%, calc(-100% - 12px));
  pointer-events: none;
}

.einsatzkarte__schild strong {
  display: block;
  font-family: var(--golnik-schrift-titel);
  font-weight: 600;
}

/* Link im Schild nur für den per Tipp gewählten Kreis (Touch); sonst folgt das Schild der Maus und bleibt durchlässig */
.einsatzkarte__schild a {
  display: none;
}

.einsatzkarte__schild.is-gewaehlt {
  pointer-events: auto;
}

body[data-layout] .einsatzkarte__schild.is-gewaehlt a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
  padding-block: 0.25rem;
  color: var(--golnik-weiss);
  font-weight: 600;
  text-decoration: underline;
}

.einsatzkarte__fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin: 0.25rem 0 0 !important;
}

.einsatzkarte__quelle {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--golnik-text-leise);
  text-align: right;
}

/* Hinweis zum Antippen nur ohne Zeigen (Touch), am Desktop erklärt es die Maus */
.einsatzkarte__hinweis {
  display: none;
  font-size: 0.875rem;
  color: var(--golnik-text-leise);
}

@media (hover: none) {
  .einsatzkarte__hinweis {
    display: block;
  }
}

.einsatzgebiet__liste {
  margin: 1.25rem 0 1.5rem;
  padding: 0;
  list-style: none;
}

@media (min-width: 480px) {
  .einsatzgebiet__liste {
    columns: 2;
    column-gap: 1.5rem;
  }
}

@media (min-width: 992px) {
  .einsatzgebiet__liste {
    columns: 4;
    column-gap: 2rem;
  }
}

.einsatzgebiet__liste li {
  break-inside: avoid;
}

body[data-layout] .einsatzgebiet__liste a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  border-bottom: 1px solid var(--golnik-linie);
  color: var(--golnik-anthrazit);
  font-weight: 500;
  text-decoration: none;
}

.einsatzgebiet__liste a > span:first-child {
  flex: 1 1 auto;
}

.einsatzgebiet__liste .icon {
  color: var(--golnik-text-inaktiv);
  transition: transform var(--golnik-uebergang), color var(--golnik-uebergang);
}

body[data-layout] .einsatzgebiet__liste a:hover,
body[data-layout] .einsatzgebiet__liste a.is-aktiv {
  color: var(--golnik-rot-dunkel);
}

.einsatzgebiet__liste a:hover .icon,
.einsatzgebiet__liste a.is-aktiv .icon {
  color: var(--golnik-rot);
  transform: translateX(3px);
}

.einsatzgebiet__anzahl {
  font-size: 0.85rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--golnik-text-leise);
}

.einsatzgebiet__knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

body[data-layout] .einsatzgebiet__link {
  font-weight: 500;
  color: var(--golnik-rot-dunkel);
}

/* Standortkarte (bausteine/standortkarte.php): Norddeutschland als Fläche mit den Standorten als Messpunkte. Die
   Karteikarten dürfen über den Rand der Karte ragen und liegen dann über dem Fuß */
.standortkarte {
  position: relative;
  z-index: 2;
}

/* Punktbild: füllt die Breite der Karte */
.punktkarte {
  position: relative;
  width: 100%;
}

body[data-layout] .punktkarte__bild {
  display: block;
  width: 100%;
  height: auto;
}

.punktkarte__quelle {
  position: absolute;
  right: 0.5rem;
  bottom: 0.4rem;
  margin: 0 !important;
  font-size: 0.7rem;
  color: var(--golnik-fuss-text);
}

/* Ein Standort: Messpunkt mit Namen, darunter die Karteikarte */
.punktkarte__ort {
  position: absolute;
  z-index: 1;
  top: var(--y);
  left: var(--x);
}

/* Offen ist eine Karteikarte nach Antippen (.is-offen, golnik-neu.js), mit der Tastatur und mit der Maus darüber (s. u.).
   Nicht :focus-within: Ein angetippter Knopf behält den Fokus, die Karteikarte ginge beim zweiten Tippen nicht zu */
.punktkarte__ort:has(:focus-visible),
.punktkarte__ort.is-offen {
  z-index: 2;
}

.punktkarte__marke {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--golnik-anthrazit);
  font: 600 1rem/1.2 var(--golnik-schrift-titel);
  transform: translate(-11px, -50%);
  cursor: pointer;
}

.punktkarte__punkt {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border: 4px solid var(--golnik-weiss);
  border-radius: 50%;
  background: var(--golnik-rot);
  box-shadow: 0 0 0 1px rgba(216, 19, 48, 0.35), var(--golnik-schatten);
  transition: transform var(--golnik-uebergang);
}

/* Messsignal: ein Ring läuft ruhig vom Punkt weg */
.punktkarte__punkt::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid var(--golnik-rot);
  border-radius: 50%;
  animation: punktkarte-signal 2.6s ease-out infinite;
}

@keyframes punktkarte-signal {
  from {
    opacity: 0.7;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(3);
  }
}

.punktkarte__name {
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--golnik-weiss);
  box-shadow: var(--golnik-schatten);
  transition: color var(--golnik-uebergang), background-color var(--golnik-uebergang);
}

.punktkarte__ort:has(:focus-visible) .punktkarte__punkt,
.punktkarte__ort.is-offen .punktkarte__punkt {
  transform: scale(1.3);
}

.punktkarte__ort:has(:focus-visible) .punktkarte__name,
.punktkarte__ort.is-offen .punktkarte__name {
  background: var(--golnik-anthrazit);
  color: var(--golnik-weiss);
}

/* Links vom Messpunkt, wenn er in der rechten Hälfte steht (Rostock) */
.punktkarte__ort--links .punktkarte__marke {
  flex-direction: row-reverse;
  transform: translate(calc(-100% + 11px), -50%);
}

.punktkarte__karte {
  position: absolute;
  top: calc(50% + 0.5rem);
  left: -1rem;
  width: min(17rem, 70vw);
  padding: 1rem 1.1rem;
  border-radius: var(--golnik-radius-klein);
  background: var(--golnik-weiss);
  box-shadow: var(--golnik-schatten-hoch);
  font-size: 0.9rem;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--golnik-uebergang), transform var(--golnik-uebergang), visibility 0s 180ms;
}

.punktkarte__ort--links .punktkarte__karte {
  right: -1rem;
  left: auto;
}

/* In der unteren Hälfte des Bildes öffnet die Karteikarte über dem Messpunkt (Dersum). Der Punkt sitzt an der Oberkante
   des Standorts, die Marke ragt um ihre halbe Höhe darüber: Abstand von unten = ganze + halbe Höhe + Luft */
.punktkarte__ort--unten .punktkarte__karte {
  top: auto;
  bottom: calc(150% + 0.5rem);
}

.punktkarte__ort:has(:focus-visible) .punktkarte__karte,
.punktkarte__ort.is-offen .punktkarte__karte {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity var(--golnik-uebergang), transform var(--golnik-uebergang);
}

/* Maus darüber öffnet nur bei echter Maus; auf Touch bliebe :hover nach dem Tippen hängen */
@media (hover: hover) {
  .punktkarte__ort:hover {
    z-index: 2;
  }

  .punktkarte__ort:hover .punktkarte__punkt {
    transform: scale(1.3);
  }

  .punktkarte__ort:hover .punktkarte__name {
    background: var(--golnik-anthrazit);
    color: var(--golnik-weiss);
  }

  .punktkarte__ort:hover .punktkarte__karte {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity var(--golnik-uebergang), transform var(--golnik-uebergang);
  }
}

/* Smartphone: Die Karte ist zu niedrig für die Karteikarte am Punkt. Sie steht deshalb in voller Breite unter der Karte;
   dafür hängt sie an .punktkarte statt am Standort, der Messpunkt sitzt selbst an seiner Lage */
@media (max-width: 575.98px) {
  .punktkarte__ort {
    position: static;
  }

  .punktkarte__marke {
    position: absolute;
    z-index: 1;
    top: var(--y);
    left: var(--x);
  }

  .punktkarte__karte,
  .punktkarte__ort--links .punktkarte__karte,
  .punktkarte__ort--unten .punktkarte__karte {
    z-index: 3;
    top: calc(100% + 0.5rem);
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
  }
}

.punktkarte__titel {
  margin: 0 0 0.25rem !important;
  font-family: var(--golnik-schrift-titel);
  font-weight: 600;
  color: var(--golnik-anthrazit);
}

.punktkarte__adresse,
.punktkarte__kontakt {
  margin: 0 0 0.35rem !important;
}

/* Telefon und E-Mail: Symbol in Rot vor dem Link */
.punktkarte__kontakt {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.punktkarte__kontakt .icon {
  color: var(--golnik-rot);
}

.punktkarte__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin: 0.6rem 0 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .punktkarte__punkt::after {
    animation: none;
    opacity: 0;
  }
}

/* Umlegungskarte für Beteiligte (umlegung/karte.php, Skript umlegung/karte/Umlegungskarte.js): Kopf mit Abmelden, Karte mit
   Legende, daneben die eigenen Flurstücke; unter 992 px untereinander. Bedienknöpfe der Karte: baugebiete-map.css. */
body[data-layout] .umlegungskarte {
  --karte-ueberstand: 0px;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) 0;
}

body[data-layout] .umlegungskarte__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

body[data-layout] .umlegungskarte__titel {
  margin-bottom: 0.5rem;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
}

body[data-layout] .umlegungskarte__lead {
  max-width: 60ch;
  margin: 0;
  color: var(--golnik-text-leise);
}

body[data-layout] .umlegungskarte__raster {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.25rem;
}

@media (min-width: 992px) {
  body[data-layout] .umlegungskarte__raster {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
}

body[data-layout] .umlegungskarte__buehne {
  position: relative;
}

body[data-layout] .umlegungskarte__karte {
  height: clamp(360px, 65vh, 720px);
  border: 1px solid var(--golnik-linie);
  border-radius: var(--golnik-radius);
  overflow: hidden;
  background: var(--plan-karte);
}

body[data-layout] .umlegungskarte__bedienung {
  position: absolute;
  z-index: 8;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
}

body[data-layout] .umlegungskarte__legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--golnik-text-leise);
}

body[data-layout] .umlegungskarte__legende li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

body[data-layout] .umlegungskarte__zeichen {
  display: inline-block;
  width: 1.1rem;
  height: 0.8rem;
  border: 2px solid var(--plan-linie);
  border-radius: 2px;
}

body[data-layout] .umlegungskarte__zeichen--eigen {
  border-color: var(--golnik-rot);
  background: var(--golnik-rot-hell);
}

body[data-layout] .umlegungskarte__zeichen--fremd {
  border-width: 1px;
  background: var(--golnik-weiss);
}

body[data-layout] .umlegungskarte__zeichen--gebiet {
  border: 2px dashed var(--golnik-anthrazit);
}

body[data-layout] .umlegungskarte__liste {
  padding: 1.25rem;
  border: 1px solid var(--golnik-linie);
  border-radius: var(--golnik-radius);
  background: var(--golnik-weiss);
  box-shadow: var(--golnik-schatten);
}

@media (min-width: 992px) {
  body[data-layout] .umlegungskarte__liste {
    max-height: clamp(360px, 65vh, 720px);
    overflow-y: auto;
  }
}

body[data-layout] .umlegungskarte__liste h2 {
  font-size: 1.25rem;
}

/* Wahl der Ordnungsnummer (nur bei mehreren): Chips aus den Formularen, umbrechend */
body[data-layout] .umlegungskarte__wahl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  padding: 0;
  border: 0;
}

body[data-layout] .umlegungskarte__wahl legend {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

body[data-layout] .umlegungskarte__nummer {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 1rem 0 0.5rem;
  font-size: 1rem;
}

body[data-layout] .umlegungskarte__flurstuecke {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

body[data-layout] .umlegungskarte__flurstueck {
  display: grid;
  gap: 0.1rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--golnik-linie);
  border-radius: var(--golnik-radius-klein);
  background: var(--golnik-weiss);
  color: var(--golnik-text);
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--golnik-uebergang), background var(--golnik-uebergang);
}

body[data-layout] .umlegungskarte__flurstueck:hover,
body[data-layout] .umlegungskarte__flurstueck.is-aktiv {
  border-color: var(--golnik-rot);
  background: var(--golnik-rot-hell);
}

body[data-layout] .umlegungskarte__flurstueck:focus-visible {
  outline: none;
  box-shadow: var(--golnik-fokus);
}

body[data-layout] .umlegungskarte__unten {
  display: grid;
  gap: 2rem;
}

@media (min-width: 768px) {
  body[data-layout] .umlegungskarte__unten {
    grid-template-columns: 2fr 1fr;
  }
}

body[data-layout] .umlegungskarte__schritte {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

body[data-layout] .umlegungskarte__schritt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

body[data-layout] .umlegungskarte__schritt .icon {
  flex: none;
  color: var(--golnik-text-inaktiv);
}

body[data-layout] .umlegungskarte__schritt--abgeschlossen .icon {
  color: var(--golnik-erfolg);
}

body[data-layout] .umlegungskarte__schritt--in-arbeit .icon {
  color: var(--golnik-rot);
}

/* 6 ─ Formulare ─────────────────────────────────────────────────────────────── */

.feld {
  margin-bottom: 1.25rem;
}

/* Felder paarweise nebeneinander (Name und Unternehmen, Vor- und Nachname), schmal untereinander */
@media (min-width: 640px) {
  .felder {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
  }
}

.feld__eingabe--text {
  min-height: 9rem;
  resize: vertical;
}

.feld__label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--golnik-anthrazit);
}

.feld__pflicht {
  color: var(--golnik-rot-dunkel);
}

.feld__eingabe {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0.65rem 0.9rem;
  border: 1.5px solid #c4c9cf;
  border-radius: var(--golnik-radius-klein);
  background: var(--golnik-weiss);
  font: inherit;
  color: var(--golnik-text);
  transition: border-color var(--golnik-uebergang), box-shadow var(--golnik-uebergang);
}

.feld__eingabe:focus {
  border-color: var(--golnik-rot);
  box-shadow: var(--golnik-fokus);
  outline: none;
}

.feld__hilfe {
  margin: 0.35rem 0 0 !important;
  font-size: 0.875rem;
  color: var(--golnik-text-leise);
}

.feld__fehler {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  margin: 0.35rem 0 0 !important;
  font-size: 0.9rem;
  color: var(--golnik-rot-dunkel);
}

.feld__fehler .icon {
  margin-top: 0.15em;
}

.feld__eingabe[aria-invalid="true"],
.was-validated .feld__eingabe:invalid {
  border-color: var(--golnik-rot-dunkel);
}

/* Falle für Bots: für Menschen unsichtbar und nicht erreichbar */
.feld--falle {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Kontrollkästchen mit Text daneben (Datenschutz) */
.feld-haken {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  align-items: start;
}

.feld-haken__eingabe {
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.15rem;
  accent-color: var(--golnik-anthrazit);
}

.feld-haken__text {
  font-size: 0.95rem;
}

/* Hilfe und Fehler stehen unter dem Text, nicht in der schmalen Spalte des Kästchens (sonst bricht jedes Wort um) */
.feld-haken .feld__fehler,
.feld-haken .feld__hilfe {
  grid-column: 2;
}

.was-validated .feld-haken__eingabe:invalid + .feld-haken__text {
  color: var(--golnik-rot-dunkel);
}

/* Auswahl-Chip: Radiobutton oder Kontrollkästchen als antippbare Fläche (Uhrzeiten, Themen) */
.chip {
  position: relative;
  display: inline-flex;
}

.chip__eingabe {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.chip__text {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1.5px solid #c4c9cf;
  border-radius: 999px;
  background: var(--golnik-weiss);
  font-weight: 500;
  color: var(--golnik-anthrazit);
  cursor: pointer;
  transition: border-color var(--golnik-uebergang), background-color var(--golnik-uebergang), color var(--golnik-uebergang);
}

.chip:hover .chip__text {
  border-color: var(--golnik-anthrazit);
}

.chip__eingabe:checked + .chip__text {
  border-color: var(--golnik-anthrazit);
  background: var(--golnik-anthrazit);
  color: var(--golnik-weiss);
}

/* Nicht wählbar (vergebene oder gesperrte Uhrzeit): ausgegraut und durchgestrichen, ohne Hover */
.chip__eingabe:disabled + .chip__text,
.chip:hover .chip__eingabe:disabled + .chip__text {
  border-color: var(--golnik-linie);
  border-style: dashed;
  background: transparent;
  color: var(--golnik-text-inaktiv);
  text-decoration: line-through;
  cursor: not-allowed;
}

.chip__eingabe:focus-visible + .chip__text {
  outline: 3px solid var(--golnik-rot);
  outline-offset: 2px;
}

/* Auswahlkarte: Radiobutton oder Kontrollkästchen mit Titel, Text und Betrag als ganze Fläche (Preisrechner).
   Das Feld bleibt sichtbar und bedienbar, die Karte zeigt die Wahl nur zusätzlich an */
.wahl {
  position: relative;
  display: block;
}

.wahl[hidden] {
  display: none;
}

.wahl__eingabe {
  position: absolute;
  top: 1.05rem;
  left: 1rem;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
  accent-color: var(--golnik-rot);
  cursor: pointer;
}

.wahl__box {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 1rem;
  height: 100%;
  padding: 0.85rem 1rem 0.85rem 3rem;
  border: 1.5px solid var(--golnik-linie);
  border-radius: var(--golnik-radius-klein);
  background: var(--golnik-weiss);
  cursor: pointer;
  transition: border-color var(--golnik-uebergang), background-color var(--golnik-uebergang);
}

.wahl:hover .wahl__box {
  border-color: #c4c9cf;
}

.wahl__eingabe:checked + .wahl__box {
  border-color: var(--golnik-anthrazit);
  background: var(--golnik-flaeche);
}

.wahl__eingabe:focus-visible + .wahl__box {
  outline: 3px solid var(--golnik-rot);
  outline-offset: 2px;
}

.wahl__titel {
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  color: var(--golnik-anthrazit);
}

.wahl__preis {
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--golnik-anthrazit);
}

.wahl__text {
  grid-column: 1 / -1;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--golnik-text-leise);
}

/* Mit Text: Betrag unter den Text, damit Titel und Text die volle Breite haben */
.wahl--haken .wahl__box {
  grid-template-columns: 1fr;
}

.wahl--haken .wahl__preis {
  font-weight: 500;
  font-size: 0.9rem;
}

/* Hinweise: nur getönte Fläche und Icon, keine farbigen Randstreifen (gilt für die ganze Website) */
.hinweis {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: var(--golnik-radius-klein);
  background: var(--golnik-flaeche);
  color: var(--golnik-text);
}

.hinweis .icon {
  margin-top: 0.15em;
  color: var(--golnik-anthrazit);
}

.hinweis--erfolg {
  background: var(--golnik-erfolg-hell);
}

.hinweis--erfolg .icon {
  color: var(--golnik-erfolg);
}

.hinweis--fehler {
  background: var(--golnik-rot-hell);
}

.hinweis--fehler .icon {
  color: var(--golnik-rot-dunkel);
}

/* 7 ─ Hilfsklassen und Bewegung ────────────────────────────────────────────── */

.text-leise {
  color: var(--golnik-text-leise);
}

/*
 * Bewegung. Nur mit JavaScript (Klasse .js am <html>), sonst bleibt alles sichtbar.
 * golnik-neu.js setzt .is-sichtbar, sobald ein [data-bewegung] ins Bild scrollt:
 *   data-bewegung            Element taucht auf
 *   data-bewegung="gruppe"   Kinder tauchen nacheinander auf (Reihenfolge über --i)
 *   data-bewegung="bild"     nur Bildwirkung (Bildband zoomt heran)
 * Animationen mit fill-mode „backwards“: Nach dem Auftauchen gelten wieder die normalen Stile (z.B. Hover).
 */
.js [data-bewegung=""]:not(.is-sichtbar),
.js [data-bewegung="gruppe"]:not(.is-sichtbar) > * {
  opacity: 0;
}

.js [data-bewegung=""].is-sichtbar {
  animation: golnik-auftauchen 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.js [data-bewegung="gruppe"].is-sichtbar > * {
  animation: golnik-auftauchen 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  animation-delay: calc(var(--i, 0) * 110ms);
}

@keyframes golnik-auftauchen {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Hero: Text und Foto kommen beim Laden kurz nacheinander */
.held__text > * {
  animation: golnik-auftauchen 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

.held__text > :nth-child(2) { animation-delay: 80ms; }
.held__text > :nth-child(3) { animation-delay: 160ms; }
.held__text > :nth-child(4) { animation-delay: 240ms; }
.held__text > :nth-child(5) { animation-delay: 320ms; }
.held__text > :nth-child(6) { animation-delay: 400ms; }
.held__text > :nth-child(7) { animation-delay: 480ms; }

.held__bild img {
  animation: golnik-bild-ein 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

@keyframes golnik-bild-ein {
  from {
    transform: scale(1.06);
  }
}

/* Das Wichtigste in Kürze: Punkte nacheinander, danach setzt sich jedes Icon mit einem Signal-Puls */
.kurzantwort [data-bewegung="gruppe"].is-sichtbar > * {
  animation-delay: calc(250ms + var(--i, 0) * 150ms);
}

.kurzantwort__icon {
  position: relative;
}

.kurzantwort__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--golnik-rot);
  border-radius: 50%;
  opacity: 0;
}

.is-sichtbar > * > .kurzantwort__icon {
  animation: golnik-punkt-setzen 0.5s ease-out backwards;
  animation-delay: calc(550ms + var(--i, 0) * 150ms);
}

.is-sichtbar > * > .kurzantwort__icon::after {
  animation: golnik-puls 1.4s ease-out 2;
  animation-delay: calc(1s + var(--i, 0) * 150ms);
}

/* Ablauf: Verbindungslinie zieht sich zum nächsten Schritt */
.js .ablauf.is-sichtbar .ablauf__schritt::after {
  transform-origin: left center;
  animation: golnik-verbinden 0.7s ease-out backwards;
  animation-delay: calc(450ms + var(--i, 0) * 110ms);
}

@keyframes golnik-verbinden {
  from {
    transform: scaleX(0);
  }
}

/* Ebenen-Zeichnung folgt dem Scrollen: golnik-neu.js setzt .is-aus Ebene für Ebene von oben nach unten und nimmt es beim
   Zurückscrollen wieder weg; die unterste Ebene bleibt stehen. Ohne JavaScript steht alles fest. */
.js [data-ebenen-scroll] .plan-ebene {
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js [data-ebenen-scroll] .plan-ebene.is-aus {
  opacity: 0;
  transform: translateY(-90px);
}

/* Runder Bedienknopf auf Filmen (Anhalten, Vollbild), an Laufleisten, Überblendungen und zum Seitenanfang */
.video-buehne__knopf,
.laufband__knopf,
.ueberblendung__knopf,
.nach-oben {
  display: inline-grid;
  place-items: center;
  flex: none;   /* neben Text in einer Flexbox sonst gestaucht und dadurch oval */
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--golnik-linie);
  border-radius: 50%;
  background: var(--golnik-weiss);
  color: var(--golnik-text-leise);
  cursor: pointer;
  transition: color var(--golnik-uebergang), border-color var(--golnik-uebergang);
}

.video-buehne__knopf:hover,
.laufband__knopf:hover,
.ueberblendung__knopf:hover,
.nach-oben:hover {
  border-color: var(--golnik-anthrazit);
  color: var(--golnik-anthrazit);
}

/* Bäume setzen sich nacheinander in den Plan */
.zeichnung.is-sichtbar .plan-baum {
  transform-box: fill-box;
  transform-origin: center;
  animation: golnik-punkt-setzen 0.5s ease-out backwards;
  animation-delay: calc(400ms + var(--i, 0) * 120ms);
}

/* FAQ: Antwort gleitet beim Öffnen herein */
.faq__eintrag[open] .faq__antwort,
.planinhalt-textteil__eintrag[open] .planinhalt-textteil__antwort {
  animation: golnik-auftauchen 0.35s ease-out backwards;
}

@keyframes golnik-blenden {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*
 * „Bewegung reduzieren“ (Betriebssystem): Nichts verschiebt, zoomt oder pulsiert dauerhaft.
 * Einblenden, das Zeichnen der Linien und das Hochzählen bleiben, sie bewegen keine Flächen.
 */
@media (prefers-reduced-motion: reduce) {
  .js [data-bewegung=""].is-sichtbar,
  .js [data-bewegung="gruppe"].is-sichtbar > *,
  .held__text > *,
  .faq__eintrag[open] .faq__antwort,
  .planinhalt-textteil__eintrag[open] .planinhalt-textteil__antwort,
  .video-buehne__marke,
  .video-buehne__kapitel.is-neu {
    animation-name: golnik-blenden;
  }

  .held__bild img,
  .kurzantwort__icon::after,
  .ablauf__schritt::after,
  .zeichnung.is-sichtbar .plan-baum {
    animation: none !important;
  }

  .js .karussell__spur {
    scroll-behavior: auto;
  }

  .karussell__punkt[aria-current="true"]::before {
    transform: none;
  }

  /* Das Logo wächst trotzdem (nur beim Zeigen, auf Wunsch), aber ohne Animation */
  body[data-layout] .logo-leiste--klein .logo-leiste__eintrag img {
    transition-property: filter, opacity;
  }

  /* Ebenen blenden nur, sie fliegen nicht */
  .js [data-ebenen-scroll] .plan-ebene.is-aus {
    transform: none;
  }

  .motiv__puls {
    display: none;
  }

  body[data-layout] .bildband__bild img {
    transform: none;
    transition: none;
  }

  .kachel:hover,
  .referenz:hover,
  .kurzantwort__punkt:hover,
  .knopf:hover .icon {
    transform: none;
  }

  .video-buehne__start:hover {
    transform: translate(-50%, -50%);
  }

  .nach-oben {
    transform: none;
  }
}

/* 8 ─ eAnfrage ─────────────────────────────────────────────────────────────── */

/* Formular links, Überblick rechts mitlaufend (ab Desktop); schmal nur das Formular */
.eanfrage__rahmen {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 992px) {
  .eanfrage__rahmen {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}

.eanfrage__formular {
  padding: clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem);
  border-radius: var(--golnik-radius);
  background: var(--golnik-weiss);
  box-shadow: var(--golnik-schatten);
  scroll-margin-top: calc(var(--golnik-kopf-hoehe) + 1rem);
}

/* Mit Skript nur der aktuelle Schritt, ohne Skript alle untereinander */
.eanfrage__formular.is-schrittweise .eanfrage-schritt:not(.is-aktiv) {
  display: none;
}

.eanfrage-schritt + .eanfrage-schritt {
  margin-top: 2.5rem;
}

.eanfrage__formular.is-schrittweise .eanfrage-schritt + .eanfrage-schritt {
  margin-top: 0;
}

.eanfrage__formular.is-schrittweise .eanfrage-schritt.is-aktiv {
  animation: eanfrage-schritt 260ms ease;
}

@keyframes eanfrage-schritt {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* Fortschritt: Punkte mit Linie dazwischen; erledigte Schritte lassen sich wieder aufrufen */
.eanfrage-fortschritt {
  display: flex;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.eanfrage-fortschritt__schritt {
  position: relative;
  flex: 1 1 0;
  text-align: center;
}

.eanfrage-fortschritt__schritt + .eanfrage-fortschritt__schritt::before {
  content: "";
  position: absolute;
  top: 17px;
  right: calc(50% + 22px);
  left: calc(-50% + 22px);
  height: 2px;
  background: var(--golnik-linie);
  transition: background-color var(--golnik-uebergang);
}

.eanfrage-fortschritt__schritt.is-aktiv::before,
.eanfrage-fortschritt__schritt.is-erledigt::before {
  background: var(--golnik-anthrazit);
}

.eanfrage-fortschritt__knopf {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--golnik-text-leise);
  font-family: var(--golnik-schrift-titel);
  font-size: 0.875rem;
  font-weight: 500;
}

.eanfrage-fortschritt__knopf:disabled {
  cursor: default;
}

.eanfrage-fortschritt__punkt {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--golnik-linie);
  border-radius: 50%;
  background: var(--golnik-weiss);
  color: var(--golnik-text-leise);
  font-weight: 600;
  transition: background-color var(--golnik-uebergang), border-color var(--golnik-uebergang), color var(--golnik-uebergang);
}

.eanfrage-fortschritt__punkt .icon {
  display: none;
  width: 1.1rem;
  height: 1.1rem;
  stroke-width: 2.5;
}

.is-aktiv > .eanfrage-fortschritt__knopf {
  color: var(--golnik-anthrazit);
}

.is-aktiv .eanfrage-fortschritt__punkt {
  border-color: var(--golnik-rot);
  background: var(--golnik-rot);
  color: var(--golnik-weiss);
}

.is-erledigt .eanfrage-fortschritt__punkt {
  border-color: var(--golnik-anthrazit);
  background: var(--golnik-anthrazit);
  color: var(--golnik-weiss);
}

.is-erledigt .eanfrage-fortschritt__punkt [data-nummer] {
  display: none;
}

.is-erledigt .eanfrage-fortschritt__punkt .icon {
  display: block;
}

.is-erledigt > .eanfrage-fortschritt__knopf:not(:disabled):hover .eanfrage-fortschritt__name {
  text-decoration: underline;
}

@media (max-width: 479px) {
  .eanfrage-fortschritt__name {
    font-size: 0.75rem;
  }
}

/* Kopf eines Schritts */
.eanfrage-schritt__kopf {
  margin-bottom: 1.5rem;
}

.eanfrage-schritt__nummer {
  margin: 0 0 0.35rem !important;
  font-size: 0.875rem;
  color: var(--golnik-text-leise);
}

body[data-layout] .eanfrage-schritt__titel {
  margin: 0 0 0.5rem;
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
  outline: none;
}

.eanfrage-schritt__einleitung {
  max-width: 62ch;
  margin: 0 0 1.25rem !important;
  color: var(--golnik-text-leise);
}

.eanfrage-vorauswahl,
.eanfrage-uebernommen {
  margin-bottom: 1.5rem;
}

.eanfrage-uebernommen__text {
  flex: 1;
}

/* Knopf wie das × an den gewählten Flurstücken, bündig in der rechten oberen Ecke des Hinweises */
.eanfrage-uebernommen__entfernen {
  margin: -0.5rem -0.75rem -0.5rem 0;
}

.hinweis .eanfrage-uebernommen__entfernen .icon {
  margin-top: 0;
}

/* Schritt 1: Suche, Schnellwahl, Gruppen */
.eanfrage-suche {
  margin-bottom: 1.25rem;
}

.eanfrage-suche__zeile {
  position: relative;
}

.eanfrage-suche__zeile .feld__eingabe {
  padding-left: 2.75rem;
}

.eanfrage-suche__icon {
  position: absolute;
  top: 50%;
  left: 0.9rem;
  color: var(--golnik-text-leise);
  transform: translateY(-50%);
  pointer-events: none;
}

.eanfrage-beliebt {
  margin-bottom: 1.5rem;
}

.eanfrage-beliebt__titel {
  margin: 0 0 0.5rem !important;
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--golnik-anthrazit);
}

.eanfrage-beliebt__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eanfrage-beliebt__knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1.5px solid #c4c9cf;
  border-radius: 999px;
  background: var(--golnik-weiss);
  color: var(--golnik-anthrazit);
  font-weight: 500;
  text-align: left;
  transition: border-color var(--golnik-uebergang), background-color var(--golnik-uebergang), color var(--golnik-uebergang);
}

.eanfrage-beliebt__knopf:hover {
  border-color: var(--golnik-anthrazit);
}

.eanfrage-beliebt__knopf .icon:nth-of-type(2),
.eanfrage-beliebt__knopf[aria-pressed="true"] .icon:nth-of-type(1) {
  display: none;
}

.eanfrage-beliebt__knopf[aria-pressed="true"] {
  border-color: var(--golnik-anthrazit);
  background: var(--golnik-anthrazit);
  color: var(--golnik-weiss);
}

.eanfrage-beliebt__knopf[aria-pressed="true"] .icon:nth-of-type(2) {
  display: inline;
}

.eanfrage-gruppen {
  display: grid;
  gap: 0.75rem;
}

.eanfrage-gruppe {
  border: 1.5px solid var(--golnik-linie);
  border-radius: var(--golnik-radius-klein);
  background: var(--golnik-weiss);
  transition: border-color var(--golnik-uebergang);
}

.eanfrage-gruppe[open] {
  border-color: #c4c9cf;
}

.eanfrage-gruppe__kopf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  border-radius: var(--golnik-radius-klein);
  list-style: none;
  cursor: pointer;
}

.eanfrage-gruppe__kopf::-webkit-details-marker {
  display: none;
}

.eanfrage-gruppe__kopf:hover .eanfrage-gruppe__titel {
  text-decoration: underline;
}

.eanfrage-gruppe__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--golnik-flaeche);
  color: var(--golnik-rot);
}

.eanfrage-gruppe__text {
  display: flex;
  flex-direction: column;
}

.eanfrage-gruppe__titel {
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--golnik-anthrazit);
}

.eanfrage-gruppe__unterzeile {
  font-size: 0.9rem;
  color: var(--golnik-text-leise);
}

.eanfrage-gruppe__zahl {
  display: inline-grid;
  place-items: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: var(--golnik-rot);
  color: var(--golnik-weiss);
  font-weight: 600;
  font-size: 0.875rem;
}

.eanfrage-gruppe__pfeil {
  color: var(--golnik-text-leise);
  transition: transform var(--golnik-uebergang);
}

.eanfrage-gruppe[open] .eanfrage-gruppe__pfeil {
  transform: rotate(180deg);
}

.eanfrage-gruppe__liste {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0 1rem 1rem;
  border: 0;
}

@media (min-width: 640px) {
  .eanfrage-gruppe__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Lange Namen aus der Datenbank („Zerlegung/Sonderung/Teilung“) brechen statt überzustehen */
.eanfrage-gruppe .wahl__titel {
  overflow-wrap: anywhere;
  hyphens: auto;
}

.wahl--leise .wahl__titel {
  color: var(--golnik-text-leise);
}

/* Fieldsets sind im Browser mindestens so breit wie ihr Inhalt; lange Leistungsnamen würden am Handy überstehen */
.eanfrage__formular fieldset {
  min-width: 0;
}

/* Wahl des ÖbVI bei amtlichen Leistungen */
.eanfrage-oebvi {
  margin: 1.75rem 0 0;
  padding: 1.25rem;
  border: 0;
  border-radius: var(--golnik-radius-klein);
  background: var(--golnik-flaeche);
}

.eanfrage-oebvi__frage,
.eanfrage-frage__text {
  float: none;
  width: auto;
  margin: 0 0 0.35rem;
  padding: 0;
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--golnik-anthrazit);
}

.eanfrage-oebvi__wahl,
.eanfrage-frage__wahl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* Schritt 2: Karte zur Flurstückswahl (e-anfrage/karte/Flurstueckswahl.js) */
.flurstueckswahl {
  margin-bottom: 1.5rem;
}

.flurstueckswahl__suche {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.flurstueckswahl__feld {
  position: relative;
  flex: 1 1 260px;
}

.flurstueckswahl__feld .feld__eingabe {
  padding-left: 2.75rem;
}

.flurstueckswahl__lupe {
  position: absolute;
  top: 50%;
  left: 0.9rem;
  color: var(--golnik-text-leise);
  transform: translateY(-50%);
  pointer-events: none;
}

.flurstueckswahl__standort .icon {
  color: var(--golnik-rot);
}

.flurstueckswahl__treffer {
  margin: 0.5rem 0 0;
  padding: 0.35rem;
  border: 1.5px solid var(--golnik-linie);
  border-radius: var(--golnik-radius-klein);
  background: var(--golnik-weiss);
  list-style: none;
  box-shadow: var(--golnik-schatten);
}

.flurstueckswahl__treffer-knopf {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--golnik-text);
  text-align: left;
}

.flurstueckswahl__treffer-knopf:hover,
.flurstueckswahl__treffer-knopf:focus-visible {
  background: var(--golnik-flaeche);
}

.flurstueckswahl__meldung {
  min-height: 1.25rem;
  margin: 0.5rem 0 !important;
  font-size: 0.9rem;
  color: var(--golnik-text-leise);
}

.flurstueckswahl__buehne {
  position: relative;
  overflow: hidden;
  border: 1.5px solid var(--golnik-linie);
  border-radius: var(--golnik-radius-klein);
  background: var(--plan-grund);
}

.flurstueckswahl__karte {
  height: clamp(340px, 58vh, 580px);
}

.flurstueckswahl__fahne {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  z-index: 2;
  width: max-content;
  max-width: calc(100% - 1.5rem);
  margin: 0 !important;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: rgba(46, 52, 59, 0.92);
  color: var(--golnik-weiss);
  font-size: 0.9rem;
  line-height: 1.35;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.flurstueckswahl__ebenen {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  display: flex;
  overflow: hidden;
  border: 1.5px solid var(--golnik-anthrazit);
  border-radius: var(--golnik-radius-klein);
  box-shadow: var(--golnik-schatten);
}

.flurstueckswahl__ebenen button {
  min-height: 40px;
  padding: 0.4rem 0.85rem;
  border: 0;
  background: var(--golnik-weiss);
  color: var(--golnik-anthrazit);
  font-weight: 500;
  font-size: 0.9rem;
}

.flurstueckswahl__ebenen button[aria-pressed="true"] {
  background: var(--golnik-anthrazit);
  color: var(--golnik-weiss);
}

.flurstueckswahl__laden {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: var(--golnik-weiss);
  box-shadow: var(--golnik-schatten);
  font-size: 0.85rem;
  transform: translateX(-50%);
}

.flurstueckswahl__laden span {
  width: 14px;
  height: 14px;
  border: 2px solid var(--golnik-linie);
  border-top-color: var(--golnik-rot);
  border-radius: 50%;
  animation: eanfrage-drehen 800ms linear infinite;
}

@keyframes eanfrage-drehen {
  to {
    transform: rotate(360deg);
  }
}

/* OpenLayers-Bedienung im Stil der Seite: Zoom rechts unten über der Quellenangabe */
.flurstueckswahl .ol-zoom {
  top: auto;
  right: 0.75rem;
  bottom: 2.75rem;
  left: auto;
  padding: 0;
  background: none;
}

.flurstueckswahl .ol-zoom button {
  width: 40px;
  height: 40px;
  margin: 0 0 4px;
  border: 1.5px solid var(--golnik-anthrazit);
  border-radius: var(--golnik-radius-klein);
  background: var(--golnik-weiss);
  color: var(--golnik-anthrazit);
  font-size: 1.35rem;
  box-shadow: var(--golnik-schatten);
}

.flurstueckswahl .ol-zoom button:hover {
  background: var(--golnik-flaeche);
}

.flurstueckswahl .ol-attribution {
  font-size: 0.7rem;
}

.flurstueckswahl__auswahl {
  margin-top: 0.75rem;
}

.flurstueckswahl__leer {
  margin: 0 !important;
  font-size: 0.9rem;
  color: var(--golnik-text-leise);
}

.flurstueckswahl__liste {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .flurstueckswahl__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.flurstueckswahl__eintrag {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.6rem 0.6rem 1rem;
  border: 1.5px solid var(--golnik-rot);
  border-radius: var(--golnik-radius-klein);
  background: var(--golnik-rot-hell);
  animation: eanfrage-schritt 220ms ease;
}

.flurstueckswahl__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  font-size: 0.875rem;
  color: var(--golnik-text-leise);
}

.flurstueckswahl__text strong {
  font-size: 1rem;
  color: var(--golnik-anthrazit);
}

.flurstueckswahl__entfernen,
.anlagen__entfernen,
.eanfrage-uebernommen__entfernen {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--golnik-anthrazit);
  transition: background-color var(--golnik-uebergang);
}

.flurstueckswahl__entfernen:hover,
.anlagen__entfernen:hover,
.eanfrage-uebernommen__entfernen:hover {
  background: rgba(46, 52, 59, 0.08);
}

.eanfrage-felder__titel {
  margin: 0 0 0.75rem !important;
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  color: var(--golnik-anthrazit);
}

@media (min-width: 640px) {
  .felder--drei {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.feld--breit {
  grid-column: 1 / -1;
}

/* Schritt 3: Unterlagen hochladen */
.anlagen__liste {
  display: grid;
  gap: 0.4rem;
  margin: 0.75rem 0;
  padding: 0;
  list-style: none;
}

.anlagen__liste:empty {
  display: none;
}

.anlagen__datei {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.2rem 0.2rem 0.2rem 0.85rem;
  border-radius: var(--golnik-radius-klein);
  background: var(--golnik-flaeche);
  overflow-wrap: anywhere;
}

.anlagen__datei > span {
  flex: 1 1 auto;
}

.anlagen__datei.is-laedt {
  color: var(--golnik-text-leise);
}

.anlagen__feld {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding: 1.25rem;
  border: 2px dashed #c4c9cf;
  border-radius: var(--golnik-radius-klein);
  background: var(--golnik-weiss);
  color: var(--golnik-anthrazit);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--golnik-uebergang), background-color var(--golnik-uebergang);
}

.anlagen__feld:hover,
.anlagen__feld.is-ziel {
  border-color: var(--golnik-rot);
  background: var(--golnik-rot-hell);
}

.anlagen__feld:focus-within {
  outline: 3px solid var(--golnik-rot);
  outline-offset: 2px;
}

.anlagen__icon {
  color: var(--golnik-rot);
}

/* Feld bleibt bedienbar (Tastatur, Screenreader), liegt aber unsichtbar über der Fläche */
.anlagen__eingabe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* Angaben für die Kostenschätzung, auf Wunsch aufgeklappt */
.eanfrage-mehr {
  margin-top: 1.5rem;
  border: 1.5px solid var(--golnik-linie);
  border-radius: var(--golnik-radius-klein);
}

.eanfrage-mehr__kopf {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1rem;
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  color: var(--golnik-anthrazit);
  list-style: none;
  cursor: pointer;
}

.eanfrage-mehr__kopf::-webkit-details-marker {
  display: none;
}

.eanfrage-mehr__kopf > span {
  flex: 1 1 auto;
}

.eanfrage-mehr__pfeil {
  transition: transform var(--golnik-uebergang);
}

.eanfrage-mehr[open] .eanfrage-mehr__pfeil {
  transform: rotate(180deg);
}

.eanfrage-mehr > .feld__hilfe,
.eanfrage-mehr > .felder {
  padding-inline: 1rem;
}

.eanfrage-mehr > .feld__hilfe {
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
}

/* Schritt 4: Fragen zu Rechnungsempfänger und Eigentümer */
.eanfrage-frage {
  margin: 1.5rem 0 0;
  padding: 0;
  border: 0;
}

.eanfrage-frage__block {
  margin-top: 1rem;
  padding: 1.25rem 1.25rem 0.25rem;
  border-radius: var(--golnik-radius-klein);
  background: var(--golnik-flaeche);
}

.eanfrage-frage__titel {
  margin: 0 0 0.75rem !important;
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  color: var(--golnik-anthrazit);
}

/* Schritt 3: in die Karte zeichnen (e-anfrage/karte/Zeichenwerkzeug.js); Karte und Fahne wie in Schritt 2 */
.einzeichnen {
  margin-bottom: 2rem;
}

.einzeichnen > .feld__hilfe {
  margin: 0 !important;
}

.einzeichnen__bereich {
  margin: 1rem 0 0;
}

.einzeichnen__einfuehrung {
  margin-bottom: 1rem;
}

.einzeichnen__einfuehrung-titel {
  margin: 0 !important;
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  color: var(--golnik-anthrazit);
}

.einzeichnen__schritte {
  margin: 0.35rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.95rem;
}

.einzeichnen__schritte li + li {
  margin-top: 0.2rem;
}

.einzeichnen__werkzeuge {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.einzeichnen__werkzeuge .knopf {
  min-height: 44px;
  padding: 0.5rem 1rem;
}

.einzeichnen__werkzeuge .knopf:hover .icon {
  transform: none;
}

.einzeichnen__werkzeuge .knopf:disabled {
  border-color: var(--golnik-linie);
  background: transparent;
  color: var(--golnik-text-inaktiv);
  cursor: default;
}

.einzeichnen__werkzeug[aria-pressed="true"] {
  background: var(--golnik-anthrazit);
  color: var(--golnik-weiss);
}

.einzeichnen__schalter {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  margin-left: auto;
  font-weight: 500;
  color: var(--golnik-anthrazit);
  cursor: pointer;
}

.einzeichnen__schalter input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--golnik-anthrazit);
}

/* Touch: Fadenkreuz in der Kartenmitte, rot sobald es einrastet; der Knopf setzt dort den Punkt */
.einzeichnen__fadenkreuz {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  pointer-events: none;
}

.einzeichnen__fadenkreuz::before,
.einzeichnen__fadenkreuz::after {
  content: "";
  position: absolute;
  background: var(--golnik-anthrazit);
  box-shadow: 0 0 0 1.5px var(--golnik-weiss);
}

.einzeichnen__fadenkreuz::before {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
}

.einzeichnen__fadenkreuz::after {
  top: 50%;
  right: 0;
  left: 0;
  height: 2px;
  margin-top: -1px;
}

.einzeichnen__fadenkreuz.is-eingerastet::before,
.einzeichnen__fadenkreuz.is-eingerastet::after {
  background: var(--golnik-rot);
}

.einzeichnen__setzen {
  position: absolute;
  bottom: 3.75rem;
  left: 50%;
  z-index: 3;
  white-space: nowrap;
  box-shadow: var(--golnik-schatten-hoch);
  transform: translateX(-50%);
}

.einzeichnen__liste {
  display: grid;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.einzeichnen__eintrag {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.6rem 0.6rem 0.75rem;
  border: 1.5px solid var(--golnik-linie);
  border-radius: var(--golnik-radius-klein);
  background: var(--golnik-weiss);
  animation: eanfrage-schritt 220ms ease;
}

.einzeichnen__nummer {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--golnik-anthrazit);
  color: var(--golnik-weiss);
  font-weight: 700;
  font-size: 0.85rem;
}

.einzeichnen__angaben {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.einzeichnen__text {
  resize: vertical;
}

.einzeichnen__art {
  font-size: 0.875rem;
  color: var(--golnik-text-leise);
}

.eanfrage-pruefen {
  margin: 2rem 0 1.5rem;
  padding: 1.25rem;
  border-radius: var(--golnik-radius-klein);
  background: var(--golnik-flaeche);
}

body[data-layout] .eanfrage-pruefen__titel {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
}

/* Auf breiten Bildschirmen steht der Überblick daneben */
@media (min-width: 992px) {
  .eanfrage-pruefen {
    display: none;
  }
}

.eanfrage-zustimmung {
  margin-top: 1.5rem;
}

/* Überblick über die Anfrage (rechts neben dem Formular und vor dem Absenden) */
.eanfrage-zusammenfassung {
  display: grid;
  gap: 0.9rem;
  margin: 0;
}

.eanfrage-zusammenfassung__eintrag {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.15rem 0.75rem;
}

.eanfrage-zusammenfassung__eintrag + .eanfrage-zusammenfassung__eintrag {
  padding-top: 0.9rem;
  border-top: 1px solid var(--golnik-linie);
}

.eanfrage-zusammenfassung dt {
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--golnik-text-leise);
}

.eanfrage-zusammenfassung dd {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

/* Mehrere Leistungen: eingerückt, je Zeile durch eine feine Linie getrennt */
.eanfrage-zusammenfassung__eintrag--liste dd {
  gap: 0;
  padding-left: 0.75rem;
}

.eanfrage-zusammenfassung__eintrag--liste dd > span {
  padding: 0.35rem 0;
}

.eanfrage-zusammenfassung__eintrag--liste dd > span + span {
  border-top: 1px solid var(--golnik-linie);
}

.eanfrage-zusammenfassung__aendern {
  grid-row: 1;
  grid-column: 2;
  padding: 0;
  border: 0;
  background: none;
  color: var(--golnik-rot-dunkel);
  font-size: 0.875rem;
  text-decoration: underline;
}

.eanfrage-uebersicht {
  display: none;
}

@media (min-width: 992px) {
  .eanfrage-uebersicht {
    position: sticky;
    top: calc(var(--golnik-kopf-hoehe) + 1.5rem);
    display: block;
  }
}

.eanfrage-uebersicht__karte {
  padding: 1.5rem;
  border-radius: var(--golnik-radius);
  background: var(--golnik-weiss);
  box-shadow: var(--golnik-schatten);
}

body[data-layout] .eanfrage-uebersicht__titel {
  margin: 0 0 1rem;
  font-size: 1.15rem;
}

.eanfrage-uebersicht__hilfe {
  margin-top: 1.25rem;
  padding: 0 0.25rem;
}

.eanfrage-uebersicht__frage {
  margin: 0 0 0.5rem !important;
  font-family: var(--golnik-schrift-titel);
  font-weight: 500;
  color: var(--golnik-anthrazit);
}

body[data-layout] .eanfrage-uebersicht .kontakt-gross {
  font-size: 1.05rem;
}

/* Weiter, Zurück, Absenden */
.eanfrage-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--golnik-linie);
}

.eanfrage-navigation__weiter,
.eanfrage-navigation__senden {
  margin-left: auto;
}

.eanfrage-navigation__senden.is-sendet {
  opacity: 0.7;
  cursor: progress;
}

@media (max-width: 479px) {
  .eanfrage-navigation .knopf {
    flex: 1 1 auto;
  }
}

/* Bestätigung nach dem Absenden */
.eanfrage-danke {
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  border-radius: var(--golnik-radius);
  background: var(--golnik-weiss);
  box-shadow: var(--golnik-schatten);
}

.eanfrage-danke__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 0 1.25rem !important;
  border-radius: 50%;
  background: var(--golnik-erfolg-hell);
  color: var(--golnik-erfolg);
}

.eanfrage-danke__icon .icon {
  width: 1.75rem;
  height: 1.75rem;
  stroke-width: 2.5;
}

body[data-layout] .eanfrage-danke__titel {
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
  outline: none;
}

body[data-layout] .eanfrage-danke__weiter {
  margin-top: 2rem;
  font-size: 1.15rem;
}

.eanfrage-danke__schritte {
  display: grid;
  gap: 0.75rem;
  padding-left: 1.25rem;
}

.eanfrage-danke__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem !important;
}

@media (prefers-reduced-motion: reduce) {
  .eanfrage__formular.is-schrittweise .eanfrage-schritt.is-aktiv,
  .flurstueckswahl__eintrag {
    animation: none;
  }

  .flurstueckswahl__laden span {
    animation-duration: 2s;
  }
}

/* Weg zum Kontaktformular unter der eAnfrage (alter Anker #Kontakt) */
.eanfrage__kontakt {
  margin: 1.5rem 0 0 !important;
  color: var(--golnik-text-leise);
  text-align: center;
}

/* Verfahrenskarte (bausteine/verfahrenskarte.php): Tafel und Punktbild nebeneinander, Ansprechpersonen darunter.
   Die Namen der Verfahren erscheinen beim Zeigen (Maus, Fokus), die angesprungene Karte der Ansprechperson ist
   hervorgehoben. */
.verfahrenskarte__innen {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 992px) {
  .verfahrenskarte__innen {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
}

.verfahrenslegende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}

.verfahrenslegende li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.verfahrenskarte__hinweis {
  display: flex;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--golnik-text-leise);
}

.verfahrenskarte__hinweis .icon {
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.verfahrensbild {
  position: relative;
}

.verfahrensbild svg {
  display: block;
  width: 100%;
  height: auto;
}

.verfahrensbild__land {
  fill: var(--plan-linie);
}

/* Messpunkt eines Verfahrens, gebaut wie die Standorte der Anfahrtskarte (.punktkarte__punkt, .punktkarte__name):
   roter Punkt mit weißem Rand, beim Zeigen deutlich größer, daneben der Name im weißen Schild. Auf die Maus reagiert
   nur der Punkt: Der Link umfasst auch das unsichtbare Schild, das sonst schon beim Überfahren auslöste */
.verfahrensbild__verfahren {
  --punkt: 14px;
  pointer-events: none;
  position: absolute;
  z-index: 1;
  top: var(--y);
  left: var(--x);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--golnik-anthrazit);
  font: 600 0.95rem/1.2 var(--golnik-schrift-titel);
  text-decoration: none;
  white-space: nowrap;
  transform: translate(calc(var(--punkt) / -2), -50%);
}

/* Schrift wie die Schilder der Standorte: nicht in der Linkfarbe der Seite (body[data-layout] a) */
body[data-layout] .verfahrensbild__verfahren,
body[data-layout] .verfahrensbild__verfahren:hover {
  color: var(--golnik-anthrazit);
  text-decoration: none;
}

.verfahrensbild__verfahren--links {
  flex-direction: row-reverse;
  transform: translate(calc(-100% + var(--punkt) / 2), -50%);
}

.verfahrensbild__punkt {
  flex: none;
  width: var(--punkt);
  height: var(--punkt);
  border: 3px solid var(--golnik-weiss);
  border-radius: 50%;
  background: var(--golnik-rot);
  box-shadow: 0 0 0 1px rgba(216, 19, 48, 0.35), var(--golnik-schatten);
  pointer-events: auto;
  cursor: pointer;
  transition: transform var(--golnik-uebergang);
}

.verfahrensbild__verfahren--neben .verfahrensbild__punkt {
  background: var(--golnik-anthrazit);
  box-shadow: 0 0 0 1px rgba(46, 52, 59, 0.35), var(--golnik-schatten);
}

.verfahrensbild__name {
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--golnik-weiss);
  box-shadow: var(--golnik-schatten);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-4px);
  transition: opacity var(--golnik-uebergang), transform var(--golnik-uebergang), visibility 0s 180ms;
}

.verfahrensbild__verfahren--links .verfahrensbild__name {
  transform: translateX(4px);
}

/* Name am Punkt: per Hover nur mit Maus (hover: hover). Auf Touch-Geräten wertet Safari einen Tipp, der etwas
   einblendet, sonst nur als Hover, und erst der zweite Tipp springt zum Verfahren */
.verfahrensbild__verfahren:focus-visible {
  z-index: 2;
  outline: none;
}

.verfahrensbild__verfahren:focus-visible .verfahrensbild__punkt {
  transform: scale(2);
}

.verfahrensbild__verfahren:focus-visible .verfahrensbild__name {
  opacity: 1;
  visibility: visible;
  transform: none;
  margin-left: calc(var(--punkt) / 2);
  transition: opacity var(--golnik-uebergang), transform var(--golnik-uebergang), visibility 0s;
}

.verfahrensbild__verfahren--links:focus-visible .verfahrensbild__name {
  margin-left: 0;
  margin-right: calc(var(--punkt) / 2);
}

@media (hover: hover) {
  .verfahrensbild__verfahren:hover {
    z-index: 2;
    outline: none;
  }

  .verfahrensbild__verfahren:hover .verfahrensbild__punkt {
    transform: scale(2);
  }

  .verfahrensbild__verfahren:hover .verfahrensbild__name {
    opacity: 1;
    visibility: visible;
    transform: none;
    margin-left: calc(var(--punkt) / 2);
    transition: opacity var(--golnik-uebergang), transform var(--golnik-uebergang), visibility 0s;
  }

  .verfahrensbild__verfahren--links:hover .verfahrensbild__name {
    margin-left: 0;
    margin-right: calc(var(--punkt) / 2);
  }
}

.verfahrensbild__verfahren:focus-visible .verfahrensbild__name {
  background: var(--golnik-anthrazit);
  color: var(--golnik-weiss);
}

.ansprechperson__kontakt {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 1rem !important;
}

.ansprechperson__kontakt a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  overflow-wrap: anywhere;
}

.ansprechperson__verfahren {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--golnik-linie);
  list-style: none;
}

.ansprechperson__verfahren li {
  padding: 0.2rem 0;
}

/* Sprungziel der Punkte: Der Anker in der Karte sitzt an der Oberkante des Abschnitts (die Karte ist dafür nicht
   positioniert), so stehen Überschrift und Einleitung mit im Bild; hervorgehoben wird die Karte der Person */
.ansprechpersonen {
  position: relative;
}

.ansprechperson {
  position: static;
}

.ansprechperson__anker {
  position: absolute;
  top: 0;
  left: 0;
}

.ansprechperson:has(.ansprechperson__anker:target) {
  border-color: var(--golnik-rot);
  box-shadow: 0 0 0 1px var(--golnik-rot);
}

.ansprechperson__verfahren .plan-marke {
  margin-right: 0.45rem;
}

.ansprechperson__verfahren small {
  display: block;
  color: var(--golnik-text-leise);
}

@media (prefers-reduced-motion: reduce) {
  .verfahrensbild__punkt,
  .verfahrensbild__name {
    transition: none;
  }
}

/* ============================================================
   Planinhalt nach XPlanung: Farben der Planzeichen in der Farbrichtung der Planzeichenverordnung (Wohnen rötlich,
   Misch ocker, Gewerbe grau, Sonder orange, Gemeinbedarf pink, Verkehr gelb, Grün grün, Wasser blau), aber als ruhige,
   aufeinander abgestimmte Reihe statt der Druckfarben der Verordnung. Gelten für Kartenebene und Legende der
   Detailseiten (baugebiete-map.css, Planinhalt.js), die Website-Symbole (tools/planzeichen-erzeugen.php, WEB) und das
   Band "Pläne mit Baugrenzen". Die Karte legt Flächen halb durchsichtig an.
   ============================================================ */
:root {
  --plan-wohnen: #ee9f93;
  --plan-misch: #d8bd7a;
  --plan-dorfwohnen: #c7a473;
  --plan-urban: #b38a5c;
  --plan-kern: #dccb83;
  --plan-gewerbe: #b4bac4;
  --plan-sonder: #f0ab55;
  --plan-baugrenze: #2a7fba;
  --plan-baulinie: #d9533f;
  --plan-gruen: #8fd49a;
  --plan-pflanzung: #57b268;
  --plan-natur: #55b46c;
  --plan-strassenbegrenzung: #62bd6c;
  --plan-verkehr: #f1cf62;
  --plan-verkehr-besonders: #f5e2a0;
  --plan-versorgung: #e0df84;
  --plan-gemeinbedarf: #e3a0c9;
  --plan-wasser: #a5cfe3;
  --plan-wasserwirtschaft: #4497c2;
  --plan-denkmal: #c27a5c;
  --plan-wald: #4d9f98;
  --plan-nebenanlagen: #d9806c;
  --plan-linie: #2e343b;
  --plan-sonstige: #8a8f96;
}

/* Band "Pläne mit Baugrenzen" (shared/bausteine/planinhalt-karten.php): flach, Text links, Vorschauen rechts */
.planinhalt-band {
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.planinhalt-band__innen {
  display: grid;
  gap: 1.75rem;
  align-items: center;
}

@media (min-width: 992px) {
  .planinhalt-band__innen {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 3rem;
  }
}

.planinhalt-band__text .abschnitt__einleitung {
  margin-bottom: 0;
}

.planinhalt-band__alle {
  margin-top: 1.25rem;
}

.planinhalt-karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.planinhalt-karte {
  position: relative;
  padding: 0.75rem 0.9rem 0.9rem;
  border-radius: var(--golnik-radius);
  background: var(--golnik-weiss);
  color: var(--golnik-text);
  box-shadow: var(--golnik-schatten);
  transition: box-shadow var(--golnik-uebergang), transform var(--golnik-uebergang);
}

.planinhalt-karte:hover,
.planinhalt-karte:focus-within {
  box-shadow: var(--golnik-schatten-hoch);
  transform: translateY(-2px);
}

.planinhalt-karte__bild .zeichnung {
  margin: 0 0 0.5rem;
}

.planinhalt-karte__bild svg {
  display: block;
  width: 100%;
  height: auto;
}

.planinhalt-karte__name {
  margin: 0;
  font: 600 0.95rem/1.3 var(--golnik-schrift-titel);
}

.planinhalt-karte__link {
  color: var(--golnik-anthrazit);
  text-decoration: none;
}

/* Die ganze Karte ist klickbar */
.planinhalt-karte__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.planinhalt-karte__link:focus-visible {
  outline: none;
}

.planinhalt-karte__link:focus-visible::after {
  box-shadow: var(--golnik-fokus);
}

.planinhalt-karte__ort {
  margin: 0.15rem 0 0.4rem;
  color: var(--golnik-text-leise);
  font-size: 0.85rem;
}

.planinhalt-karte__fakten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.planinhalt-karte__fakten li {
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--golnik-flaeche);
  color: var(--golnik-text);
  font-size: 0.75rem;
}

/* Planzeichen in der Zeichnung (Geltungsbereich::svgMitInhalt), gleiche Farben wie in der Karte */
.planzeichen { fill: var(--plan-sonstige); fill-opacity: 0.35; stroke: var(--plan-sonstige); stroke-width: 1; }
.planzeichen--nutzung-wohnen { fill: var(--plan-wohnen); stroke: var(--plan-wohnen); }
.planzeichen--nutzung-misch { fill: var(--plan-misch); stroke: var(--plan-misch); }
.planzeichen--nutzung-gewerbe { fill: var(--plan-gewerbe); stroke: var(--plan-gewerbe); }
.planzeichen--nutzung-sonder { fill: var(--plan-sonder); stroke: var(--plan-sonder); }
.planzeichen--nutzung-dorfwohnen { fill: var(--plan-dorfwohnen); stroke: var(--plan-linie); stroke-width: 2; }
.planzeichen--nutzung-urban { fill: var(--plan-urban); stroke: var(--plan-linie); stroke-width: 2; }
.planzeichen--nutzung-kern { fill: var(--plan-kern); stroke: var(--plan-kern); }
.planzeichen--gruen { fill: var(--plan-gruen); stroke: var(--plan-gruen); }
.planzeichen--pflanzung, .planzeichen--erhaltung { fill: var(--plan-pflanzung); stroke: var(--plan-pflanzung); }
.planzeichen--wald { fill: var(--plan-wald); stroke: var(--plan-wald); }
/* Umgrenzungen überlagernder Festsetzungen: nur der Rand, wie im Plan */
.planzeichen--natur { fill: none; stroke: var(--plan-natur); stroke-width: 2.5; }
.planzeichen--immissionsschutz { fill: none; stroke: var(--plan-linie); stroke-width: 1.5; stroke-dasharray: 6 3; }
.planzeichen--freihaltung { fill: none; stroke: var(--plan-linie); stroke-width: 1.5; stroke-dasharray: 2 2; }
.planzeichen--wasserwirtschaft { fill: none; stroke: var(--plan-wasserwirtschaft); stroke-width: 2.5; }
.planzeichen--wasserschutz { fill: none; stroke: var(--plan-wasserwirtschaft); stroke-width: 2; stroke-dasharray: 2 2; }
.planzeichen--naturschutz { fill: none; stroke: var(--plan-natur); stroke-width: 2; stroke-dasharray: 2 2; }
.planzeichen--denkmalschutz { fill: none; stroke: var(--plan-denkmal); stroke-width: 2; stroke-dasharray: 2 2; }
.planzeichen--nebenanlagen { fill: none; stroke: var(--plan-nebenanlagen); stroke-width: 1.5; stroke-dasharray: 6 3; }
.planzeichen--wasser { fill: var(--plan-wasser); stroke: var(--plan-wasser); }
.planzeichen--einfahrt { fill: none; stroke: var(--plan-linie); stroke-width: 2.5; }
.planzeichen--keine-einfahrt { fill: none; stroke: var(--plan-baulinie); stroke-width: 2.5; stroke-dasharray: 1 3; }
.planzeichen--verkehr { fill: var(--plan-verkehr); stroke: var(--plan-verkehr); }
.planzeichen--verkehr-besonders { fill: var(--plan-verkehr-besonders); stroke: var(--plan-verkehr); }
.planzeichen--versorgung { fill: var(--plan-versorgung); stroke: var(--plan-versorgung); }
.planzeichen--gemeinbedarf { fill: var(--plan-gemeinbedarf); stroke: var(--plan-gemeinbedarf); }
.planzeichen--nutzungszweck { fill: var(--plan-sonder); fill-opacity: 0.35; stroke: var(--plan-sonder); }
.planzeichen--baufenster { fill: var(--plan-baugrenze); fill-opacity: 0.08; stroke: var(--plan-baugrenze); stroke-width: 2; stroke-dasharray: 9 3 9 3.5 0.1 3.5; stroke-linecap: round; }
.planzeichen--grundstueck { fill: none; stroke: var(--plan-linie); stroke-width: 0.8; stroke-dasharray: 4 3; }
.planzeichen--linie { fill: none; stroke-width: 1.5; }
/* Linienmuster der PlanZV: Baugrenze Strich-Strich-Punkt, Baulinie Strich-Punkt-Punkt */
.planzeichen--baufenster-flaeche { fill: var(--plan-baugrenze); fill-opacity: 0.08; stroke: none; }
.planzeichen--baugrenze { stroke: var(--plan-baugrenze); stroke-dasharray: 9 3 9 3.5 0.1 3.5; stroke-linecap: round; }
.planzeichen--baulinie { stroke: var(--plan-baulinie); stroke-dasharray: 10 3.5 0.1 3.5 0.1 3.5; stroke-linecap: round; }

/* Im Band hebt sich der Planinhalt besser von einer grauen als von einer roséfarbenen Plangebietsfläche ab */
.zeichnung--planinhalt .geltung-flaeche { fill: var(--golnik-flaeche); }