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

/* ============================================================
   wald-und-baum.de — Gestaltungsraster
   Richtung C2 „Grüner Block“: Papierton als Grundfläche, das
   Blattgrün des Logos als große Fläche im Kopf, Petrol für
   Schrift und Bedienelemente.
   Farben aus dem Logo. Kontraste geprüft: skripte/kontraste.py
   ============================================================ */

:root {
  --petrol: #005A63;          /* Überschriften, Links, Primärknopf — 7,9:1 auf Weiß */
  --petrol-tief: #00434A;     /* Hover */
  --blattgruen: #82AA30;      /* nur Flächen — 2,7:1, niemals Textfarbe */
  --gruen-text: #4E6B1B;      /* grüne Schrift und Haken — 6,2:1 auf Weiß */
  --gruen-knopf: #5E7F20;     /* grüner Knopf mit weißer Schrift — 4,6:1 */
  --gruen-hell: #EDF2E3;      /* helle grüne Fläche */
  --gruen-linie: #CFE0AE;
  --bcd: #BCD96C;             /* Hellgrün auf Petrol und auf Foto — 5,0:1 auf Petrol */
  --papier: #FAF7F1;          /* Grundfläche */
  --papier-tief: #F1ECE1;
  --weiss: #ffffff;
  --linie: #E3DED2;
  --linie-kraeftig: #CFC7B6;
  --tinte: #231F20;           /* Fließtext — 15,4:1 auf Papier */
  --grau: #5B6762;            /* Nebentext — 5,5:1 auf Papier */
  --grau-hell: #7E8D88;       /* nur große Schrift und Linien — 3,5:1 */

  --schrift-titel: "Bitter", Georgia, "Times New Roman", serif;
  --schrift-text: "Work Sans", "Helvetica Neue", Arial, sans-serif;

  --breite: 1280px;
  --rand: clamp(1rem, 4vw, 2.5rem);
  --luft: clamp(2.75rem, 6vw, 5rem);
  --radius: 20px;
  --radius-klein: 12px;
}

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

/* Muss stehen, bevor Klassen display setzen: sonst schlägt jede Klasse mit display
   das hidden-Attribut und versteckte Elemente bleiben sichtbar. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.66;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 { font-family: var(--schrift-titel); font-weight: 600; line-height: 1.18; letter-spacing: -0.018em; }
h1 { font-size: clamp(2rem, 4.6vw, 2.85rem); margin: 0 0 1rem; }
h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); margin: 0 0 0.9rem; }
h3 { font-size: 1.3rem; margin: 0 0 0.6rem; }
p { margin: 0 0 1rem; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a { color: var(--petrol); text-underline-offset: 0.18em; }
a:hover { color: var(--gruen-text); }
:focus-visible { outline: 3px solid var(--petrol); outline-offset: 2px; border-radius: 3px; }

img { max-width: 100%; height: auto; }

.mitte { max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }
.visuell-versteckt {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.w-gruen { color: var(--gruen-text); }
.w-petrol { color: var(--petrol); }

/* ---------- Sprungmarken ---------- */
.sprungmarke {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--petrol); color: var(--weiss);
  font-weight: 600; padding: 0.85rem 1.3rem; text-decoration: none;
}
.sprungmarke:focus { left: 0; color: var(--weiss); }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 48px; padding: 0.75rem 1.6rem;
  background: var(--petrol); color: var(--weiss);
  border: 2px solid var(--petrol); border-radius: 999px;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.knopf:hover { background: var(--petrol-tief); border-color: var(--petrol-tief); color: var(--weiss); }
.knopf-gruen { background: var(--gruen-knopf); border-color: var(--gruen-knopf); }
.knopf-gruen:hover { background: var(--gruen-text); border-color: var(--gruen-text); }
.knopf-hell { background: var(--gruen-hell); border-color: var(--gruen-hell); color: var(--gruen-text); }
.knopf-hell:hover { background: var(--gruen-linie); border-color: var(--gruen-linie); color: var(--gruen-text); }
.knopf-linie { background: transparent; color: var(--petrol); border-color: var(--grau-hell); }
.knopf-linie:hover { background: var(--papier-tief); color: var(--petrol-tief); }
.knopf-weiss { background: var(--weiss); border-color: var(--weiss); color: var(--petrol); }
.knopf-weiss:hover { background: var(--gruen-hell); border-color: var(--gruen-hell); color: var(--petrol-tief); }
.knopf-linie-hell { background: transparent; color: var(--weiss); border-color: rgba(255,255,255,0.75); }
.knopf-linie-hell:hover { background: rgba(255,255,255,0.12); color: var(--weiss); border-color: var(--weiss); }
.knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }
.ikon { flex-shrink: 0; }

/* ---------- Kopf ---------- */
.kopf { background: var(--papier); }
.kopf-innen {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem);
  padding-block: 1.15rem;
}
.marke { display: block; line-height: 0; margin-right: auto; }
.marke img { width: clamp(150px, 16vw, 198px); height: auto; }
.startseite .marke { display: none; }
.startseite .hauptmenue { margin-left: auto; }

.hauptmenue ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(0.9rem, 2vw, 1.7rem); }
.hauptmenue > ul > li { position: relative; }
.hauptmenue a {
  display: inline-block; padding: 0.5rem 0.15rem;
  color: var(--tinte); text-decoration: none; font-weight: 500;
  border-bottom: 3px solid transparent;
}
.hauptmenue a:hover { color: var(--petrol); border-bottom-color: var(--gruen-linie); }
.hauptmenue a.aktiv, .hauptmenue a[aria-current="page"] { color: var(--petrol); border-bottom-color: var(--blattgruen); }
.hauptmenue ul ul {
  display: none; position: absolute; left: -0.9rem; top: 100%; z-index: 30;
  flex-direction: column; gap: 0; min-width: 16rem;
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius-klein); padding: 0.5rem; box-shadow: 0 14px 30px rgba(35,31,32,0.12);
}
.hauptmenue li:hover > ul, .hauptmenue li:focus-within > ul { display: flex; }
.hauptmenue ul ul a { display: block; padding: 0.55rem 0.7rem; border-bottom: 0; border-radius: 8px; }
.hauptmenue ul ul a:hover { background: var(--gruen-hell); color: var(--petrol); }

.kopf-telefon {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--petrol); font-weight: 600; text-decoration: none; white-space: nowrap;
  min-height: 44px;
}
.kopf-telefon:hover { color: var(--petrol-tief); text-decoration: underline; }

.menue-schalter {
  display: none; align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0.55rem 1rem; margin-left: auto;
  background: var(--weiss); color: var(--tinte);
  border: 2px solid var(--grau-hell); border-radius: 999px;
  font: inherit; font-weight: 600; cursor: pointer;
}

/* ---------- Bühne (Startseite) ----------
   Drei Varianten, umgeschaltet über "variante" in quelle/daten/buehne.json.
   Der Wert landet als Klasse kopf-h1 / kopf-h2 / kopf-h3 am <body>.
   Gemeinsam ist allen dreien die weiße Karte mit dem großen Logo. */
.buehne { position: relative; }
.buehne-foto { position: absolute; left: 0; right: 0; top: 0; overflow: hidden; }
.buehne-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.buehne-foto::after { content: ""; position: absolute; inset: 0; }
.buehne-flaeche { position: absolute; left: 0; right: 0; background: var(--blattgruen); }
.buehne-innen {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start;
  padding-bottom: var(--luft);
}
.buehne-karte {
  background: var(--weiss); border-radius: var(--radius);
  padding: clamp(1.5rem, 3.4vw, 2.75rem);
  box-shadow: 0 22px 48px rgba(35,31,32,0.18);
}
.buehne-logo { width: clamp(200px, 26vw, 300px); height: auto; display: block; margin-bottom: 1.5rem; }
.buehne-karte h1 { margin-bottom: 0.9rem; }
.buehne-karte p { color: var(--grau); margin-bottom: 0; }

/* --- h1: Foto über die ganze Kopfhöhe, Menü steht darauf --- */
.kopf-h1 .kopf { position: absolute; left: 0; right: 0; top: 0; z-index: 20; background: transparent; }
.kopf-h1 .hauptmenue > ul > li > a, .kopf-h1 .kopf-telefon { color: var(--weiss); }
.kopf-h1 .hauptmenue > ul > li > a:hover { color: var(--weiss); border-bottom-color: var(--bcd); }
.kopf-h1 .hauptmenue > ul > li > a.aktiv,
.kopf-h1 .hauptmenue > ul > li > a[aria-current="page"] { color: var(--weiss); border-bottom-color: var(--bcd); }
.kopf-h1 .kopf-telefon:hover { color: var(--bcd); }
.kopf-h1 .menue-schalter { background: rgba(255,255,255,0.14); color: var(--weiss); border-color: var(--weiss); }
.kopf-h1 .buehne-foto { height: clamp(23rem, 50vw, 38rem); }
.kopf-h1 .buehne-foto::after {
  background: linear-gradient(180deg, rgba(0,38,42,0.72) 0%, rgba(0,38,42,0.20) 34%, rgba(0,38,42,0.10) 100%);
}
.kopf-h1 .buehne-flaeche { display: none; }
.kopf-h1 .buehne-innen { padding-top: clamp(8rem, 17vw, 13rem); }
.kopf-h1 .buehne-karte { max-width: 36rem; }
/* Die Kennzahlen stehen rechts neben der Karte und sind an deren Unterkante ausgerichtet.
   Dort ist das Foto schon zu Ende, sie liegen also auf dem Papierton und bleiben lesbar. */
.kopf-h1 .buehne-neben { align-self: end; padding-bottom: 0.5rem; }

/* --- h2: Bildband, die Karte ragt darüber hinaus --- */
.kopf-h2 .buehne-foto { height: clamp(16rem, 36vw, 27rem); }
.kopf-h2 .buehne-flaeche { display: none; }
.kopf-h2 .buehne-innen { padding-top: clamp(4rem, 13vw, 9.5rem); }
.kopf-h2 .buehne-neben { align-self: end; padding-bottom: 0.5rem; }

/* --- h3: Foto mit grünem Sockel --- */
.kopf-h3 .buehne-foto { height: clamp(11rem, 25vw, 19rem); }
.kopf-h3 .buehne-flaeche { top: clamp(11rem, 25vw, 19rem); height: clamp(5rem, 11vw, 8.5rem); }
.kopf-h3 .buehne-innen { padding-top: clamp(3.5rem, 11vw, 7.5rem); }
.kopf-h3 .buehne-neben { align-self: end; padding-bottom: 0.5rem; }

/* ---------- Kennzahlen ----------
   Drei Kacheln nebeneinander neben der Bühnenkarte. Das Symbol steht über der Zahl,
   weil die Spalte für Symbol neben Text zu schmal wäre. */
.kennzahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; margin-top: 1.6rem; }
.kennzahl {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius-klein); padding: 1.1rem 1rem;
  display: flex; flex-direction: column; gap: 0.7rem;
}
.kennzahl-symbol {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  background: var(--gruen-hell); color: var(--gruen-text);
  display: inline-flex; align-items: center; justify-content: center;
}
.kennzahl .zahl { font-family: var(--schrift-titel); font-size: 1.35rem; font-weight: 600; color: var(--petrol); line-height: 1.1; display: block; }
.kennzahl .name { font-size: 0.88rem; color: var(--grau); display: block; margin-top: 0.2rem; }

/* Auf schmalen Bildschirmen legt sich das Symbol neben den Text — das spart Höhe
   und lässt die Beschriftung in einer Zeile stehen. */
@media (max-width: 44rem) {
  .kennzahlen { grid-template-columns: minmax(0, 1fr); gap: 0.7rem; }
  .kennzahl { flex-direction: row; align-items: center; gap: 0.9rem; padding: 0.9rem 1rem; }
  .kennzahl .name { font-size: 0.95rem; }
}

/* ---------- Seitenkopf der Unterseiten ---------- */
.krumen { background: var(--papier); border-bottom: 1px solid var(--linie); }
.krumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0.7rem 0; font-size: 0.9rem; }
.krumen li + li::before { content: "›"; margin-right: 0.5rem; color: var(--grau-hell); }
.krumen a { color: var(--grau); }
.krumen [aria-current="page"] { color: var(--tinte); }

.seitenkopf { padding-block: var(--luft) clamp(1.5rem, 4vw, 2.5rem); }
.seitenkopf-mit-bild { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.seitenkopf-bild { margin: 0; }
.seitenkopf-bild img { width: 100%; border-radius: var(--radius); display: block; }
.obertitel { font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gruen-text); font-weight: 600; margin-bottom: 0.7rem; }
.untertitel { font-family: var(--schrift-titel); font-size: 1.2rem; color: var(--petrol); margin-bottom: 0.9rem; }
.einleitung { font-size: 1.15rem; color: var(--grau); max-width: 42rem; }

/* ---------- Inhalt ---------- */
.inhalt { padding-block: clamp(1.5rem, 4vw, 2.5rem) var(--luft); }
.inhalt > section { margin-bottom: var(--luft); }
.inhalt > section:last-child { margin-bottom: 0; }
.fliess { max-width: 44rem; }
.fliess ul, .fliess ol { padding-left: 1.3rem; }
.fliess li { margin-bottom: 0.45rem; }
.fliess h2 { margin-top: 2rem; }
.fliess h3 { margin-top: 1.6rem; }
.fliess h2:first-child, .fliess h3:first-child { margin-top: 0; }

.abschnitt-hell { background: var(--weiss); }
.band { padding-block: var(--luft); }
.band-kopf { max-width: 44rem; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }

/* ---------- Leistungsseiten: Text mit Randspalte ---------- */
.leistung-zwei {
  display: grid; grid-template-columns: minmax(0, 1fr) 22rem;
  gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
}
.leistung-spalte {
  position: sticky; top: 1.5rem;
  display: flex; flex-direction: column; gap: 1.25rem;
}
.spalten-karte {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: clamp(1.3rem, 2.4vw, 1.6rem);
}
.spalten-karte h2 { font-size: 1.28rem; margin-bottom: 1rem; }
.spalten-karte-petrol { background: var(--petrol); border-color: var(--petrol); color: var(--weiss); }
.spalten-karte-petrol h2 { color: var(--weiss); margin-bottom: 0.5rem; }
.spalten-karte-petrol p { color: rgba(255,255,255,0.9); font-size: 1rem; margin-bottom: 1rem; }
.spalten-karte-petrol .knopf { width: 100%; }

.blick { margin: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.blick dt {
  font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--grau); font-weight: 600; margin-bottom: 0.15rem;
}
.blick dd { margin: 0; font-size: 1rem; }

.nachbarn { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.nachbarn a { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; font-weight: 600; }
.nachbar-symbol {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--petrol); color: var(--weiss);
}
.nachbar-symbol svg { width: 20px; height: 20px; }
.nachbar-symbol-2 { background: var(--gruen-knopf); }
.nachbar-symbol-3 { background: var(--tinte); }

@media (max-width: 62rem) {
  .leistung-zwei { grid-template-columns: minmax(0, 1fr); }
  .leistung-spalte { position: static; }
}

/* ---------- Leistungskarten ---------- */
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.karte {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: clamp(1.4rem, 2.4vw, 2rem);
  display: flex; flex-direction: column;
}
.karte-symbol {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--petrol); color: var(--weiss); margin-bottom: 1.2rem;
}
.karte-2 .karte-symbol { background: var(--gruen-knopf); }
.karte-3 .karte-symbol { background: var(--tinte); }
.karte h3 { margin-bottom: 0.7rem; }
.karte h3 a { color: var(--tinte); text-decoration: none; }
.karte h3 a:hover { color: var(--petrol); text-decoration: underline; }
.karte h3 a::after { content: ""; position: absolute; inset: 0; }
.karte { position: relative; }
.karte p { color: var(--grau); }
.karte .weiter { margin-top: auto; padding-top: 1.2rem; display: inline-flex; align-items: center; gap: 0.5rem; color: var(--petrol); font-weight: 600; }
.karte:hover { border-color: var(--gruen-linie); box-shadow: 0 14px 30px rgba(35,31,32,0.08); }

.merkmale { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.merkmale li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.97rem; }
.ikon-haken { color: var(--gruen-text); margin-top: 0.22rem; }

/* ---------- Ablauf ---------- */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: clamp(1rem, 2vw, 1.8rem); }
.schritt { border-top: 3px solid var(--petrol); padding-top: 1.1rem; }
.schritt-nr { display: block; font-family: var(--schrift-titel); font-weight: 600; color: var(--gruen-text); margin-bottom: 0.5rem; }
.schritt p { color: var(--grau); margin-bottom: 0; }

/* ---------- Team ---------- */
.personen { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.person {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
}
.person-bild { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: var(--papier-tief); }
.person-inhalt { padding: clamp(1.3rem, 2.4vw, 1.8rem); }
.person-initialen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 999px;
  background: var(--gruen-hell); color: var(--petrol);
  font-family: var(--schrift-titel); font-size: 1.35rem; font-weight: 600;
  margin: clamp(1.3rem, 2.4vw, 1.8rem) 0 0 clamp(1.3rem, 2.4vw, 1.8rem);
}
.person h3 { margin-bottom: 0.25rem; }
.person-rolle { color: var(--gruen-text); font-weight: 600; font-size: 0.95rem; margin-bottom: 0.7rem; }
.person-text { color: var(--grau); }
.person-mail { font-size: 0.95rem; overflow-wrap: anywhere; }

/* Kurzfassung für die Startseite: Textspalte links, drei Porträts rechts.
   Ohne Kästen und ohne Tätigkeitssatz — der steht auf /team.html. */
.teamteaser {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 4vw, 4rem); align-items: center;
}
.personen-kurz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.8rem, 2vw, 1.6rem); }
.person-quadrat {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--radius); display: block;
  margin-bottom: 0.85rem; background: var(--papier-tief);
}
.person-kurz h3 { font-size: 1.2rem; margin-bottom: 0.15rem; }
.person-kurz .person-rolle { margin-bottom: 0; }

/* ---------- Kontakt ---------- */
.kontaktliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.4rem; }
.kontaktliste li { display: flex; align-items: flex-start; gap: 0.9rem; }
.kontaktliste .ikon { color: var(--petrol); margin-top: 0.25rem; }
.kontakt-name { display: block; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grau); margin-bottom: 0.15rem; }
.kontakt-gross { font-family: var(--schrift-titel); font-size: 1.3rem; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.kontakt-gross:hover { text-decoration: underline; }
.kontakt-adresse { display: block; }
.kontakt-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.kontakt-kasten { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: clamp(1.4rem, 2.6vw, 2.2rem); }

/* ---------- Kontaktband ---------- */
.kontaktband { background: var(--petrol); color: var(--weiss); }
.kontaktband-innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: clamp(2rem, 4vw, 3rem); }
.kontaktband h2 { margin-bottom: 0.4rem; }
.kontaktband p { color: rgba(255,255,255,0.9); margin: 0; max-width: 34rem; }
.kontaktband-knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- Referenzkarte ----------
   Selbst gezeichnet: Umriss als Linienzug, ein Punkt je Auftrag. Kein Kartendienst.
   quelle/js/karte.09e1d860b7.js verbindet Punkte und Zeilen und macht die Legende zum Filter;
   ohne das Skript bleiben Karte und Liste vollständig stehen. */
.karte-zwei {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem); align-items: start;
}
.karte-feld {
  position: relative;
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: clamp(1rem, 2.2vw, 1.6rem);
}
/* Die Hintergrundkarte liegt als Bild hinter dem SVG. Beide füllen dieselbe Fläche,
   deshalb passen Bild und Punkte ohne weiteres Zutun übereinander. */
.karte-bild {
  /* Erste Zeile für ältere Browser, zweite liefert auf feinen Bildschirmen die große Fassung. */
  background-image: url("/bilder/basiskarte-sachsen-1200.jpg");
  background-image: image-set(url("/bilder/basiskarte-sachsen-1200.jpg") 1x,
                              url("/bilder/basiskarte-sachsen-2000.jpg") 2x);
  background-size: 100% 100%; background-repeat: no-repeat;
  border-radius: var(--radius-klein); overflow: hidden;
}
.referenzkarte { display: block; width: 100%; height: auto; }
.karte-quelle { margin: 0.9rem 0 0; font-size: 0.85rem; color: var(--grau); }
.karte-punkt { transition: r 120ms ease, opacity 120ms ease; }
.ist-bedienbar .karte-punkt { cursor: pointer; }
.karte-punkt:focus-visible { outline: 3px solid var(--petrol); outline-offset: 2px; }

.karte-legende, .karte-chips {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.6rem;
}
.karte-chips { margin: 0 0 1.2rem 0; }
.karte-legende { gap: 0.6rem clamp(1rem, 2.5vw, 2rem); }
.karte-legende li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.97rem; }
.karte-punkt-marke { width: 14px; height: 14px; border-radius: 999px; flex-shrink: 0; }

/* --- Farbe je Leistungsfeld ---------------------------------------------
   Die Farben stehen hier und nicht als style="…" im HTML. Ein style-Attribut
   ist Inline-CSS: sobald eine Inhaltsrichtlinie mit style-src 'self' greift,
   verwirft der Browser es, und Karte wie Liste wären farblos. Über eine
   Klasse je Feld passiert das nicht. bauen.py prüft beim Bauen, dass zu jedem
   Eintrag in FELDER eine Regel hier existiert. */
.feld-verkehrssicherheit { --feldfarbe: var(--petrol); }
.feld-waldbetreuung      { --feldfarbe: var(--gruen-knopf); }
.feld-baumkataster       { --feldfarbe: var(--tinte); }
.feld-sonstiges          { --feldfarbe: #646E6B; }

.karte-punkt-marke.feld-verkehrssicherheit,
.karte-punkt-marke.feld-waldbetreuung,
.karte-punkt-marke.feld-baumkataster,
.karte-punkt-marke.feld-sonstiges { background: var(--feldfarbe); }
.karte-punkt[class*="feld-"] { fill: var(--feldfarbe); }
.karte-chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0.5rem 1rem;
  background: var(--weiss); color: var(--tinte);
  border: 2px solid var(--grau-hell); border-radius: 999px;
  font: inherit; font-weight: 600; font-size: 0.95rem; cursor: pointer;
}
.karte-chip:hover { border-color: var(--petrol); color: var(--petrol); }
.karte-chip.ist-aktiv { background: var(--petrol); border-color: var(--petrol); color: var(--weiss); }
.karte-chip.ist-aktiv .karte-zahl { background: rgba(255,255,255,0.22); color: var(--weiss); }
.karte-zahl {
  display: inline-block; min-width: 1.7rem; padding: 0.1rem 0.45rem;
  background: var(--gruen-hell); color: var(--petrol);
  border-radius: 999px; font-size: 0.85rem; font-weight: 600; text-align: center;
}

.karte-liste { max-height: 34rem; overflow-y: auto; padding-right: 0.4rem; }
.referenz-gruppe + .referenz-gruppe { margin-top: 1.6rem; }
.referenz-gruppe h3 {
  display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem;
  position: sticky; top: 0; background: var(--papier); padding: 0.3rem 0; z-index: 1;
}
.referenz-liste { list-style: none; margin: 0; padding: 0; }
.karte-zeile {
  padding: 0.55rem 0.75rem; border-top: 1px solid var(--linie);
  border-left: 4px solid var(--feldfarbe, transparent); border-radius: 0 6px 6px 0;
}
.karte-zeile:last-child { border-bottom: 1px solid var(--linie); }
.ist-bedienbar .karte-zeile { cursor: default; }
.karte-zeile.ist-hell { background: var(--gruen-hell); }
.referenz-name { display: block; font-weight: 600; }
.referenz-text { display: block; color: var(--grau); font-size: 0.95rem; }

/* Auf dem Telefon entfällt die Karte: bei rund 300 px Breite sind die Punkte
   keine 7 px groß und mit dem Finger nicht zu treffen. Die Liste trägt dieselbe
   Auskunft, der Filter bleibt. */
@media (max-width: 44rem) {
  .karte-zwei { grid-template-columns: minmax(0, 1fr); }
  .karte-feld { display: none; }
  .karte-liste { max-height: none; overflow: visible; padding-right: 0; }
  .karte-chips { margin-bottom: 1.4rem; }
}

/* ---------- Hinweiskasten ---------- */
.hinweis {
  background: var(--gruen-hell); border-left: 4px solid var(--gruen-knopf);
  border-radius: var(--radius-klein); padding: 1.2rem 1.4rem; margin-block: 1.6rem;
}
.hinweis > :last-child { margin-bottom: 0; }

.seitenliste { list-style: none; margin: 0; padding: 0; }
.seitenliste li { padding: 0.55rem 0; border-bottom: 1px solid var(--linie); }
.seitenliste-beschr { color: var(--grau); }

/* ---------- Fuß ---------- */
.fuss { background: var(--tinte); color: rgba(255,255,255,0.84); margin-top: 0; padding-block: var(--luft) 2rem; }
.fuss h2 { font-size: 1.05rem; color: var(--weiss); margin-bottom: 0.7rem; }
.fuss a { color: var(--weiss); }
.fuss a:hover { color: var(--gruen-linie); }
.fuss-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 0.45rem; }
.fuss-gross { font-family: var(--schrift-titel); font-size: 1.2rem; font-weight: 600; text-decoration: none; }
.fuss-unten { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between;
  margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,0.2); font-size: 0.9rem; }
.fuss-unten p { margin: 0; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 60rem) {
  .buehne-innen { grid-template-columns: minmax(0, 1fr); }
  .kopf-h1 .buehne-foto { height: clamp(17rem, 62vw, 26rem); }
  .kopf-h1 .buehne-innen { padding-top: clamp(6rem, 26vw, 9rem); }
  .kopf-h2 .buehne-foto { height: clamp(11rem, 42vw, 18rem); }
  .kopf-h2 .buehne-innen { padding-top: clamp(4rem, 22vw, 8rem); }
  .kopf-h3 .buehne-foto { height: clamp(9rem, 34vw, 14rem); }
  .kopf-h3 .buehne-flaeche { top: clamp(9rem, 34vw, 14rem); height: clamp(4rem, 12vw, 6rem); }
  .kopf-h3 .buehne-innen { padding-top: clamp(3.5rem, 18vw, 6.5rem); }
  .buehne-neben { align-self: start !important; padding-bottom: 0 !important; }
  .seitenkopf-mit-bild { grid-template-columns: minmax(0, 1fr); }
  .teamteaser { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

/* Unterhalb von 66rem wird die Bühne einspaltig: die Kennzahlen passen rechts neben der
   Karte sonst nicht mehr in einer Zeile nebeneinander. */
@media (max-width: 66rem) {
  .buehne-innen { grid-template-columns: minmax(0, 1fr); }
  .buehne-neben { align-self: start; padding-bottom: 0; }
}

@media (max-width: 52rem) {
  .menue-schalter { display: inline-flex; }
  .startseite .hauptmenue { margin-left: 0; }
  .startseite .kopf-innen { justify-content: flex-end; }
  .kopf-telefon { order: 3; }
  .hauptmenue {
    display: none; order: 5; flex-basis: 100%;
    border-top: 1px solid var(--linie); margin-top: 0.9rem; padding-top: 0.6rem;
  }
  .hauptmenue.offen { display: block; }
  .hauptmenue ul { flex-direction: column; gap: 0; }
  .hauptmenue a { display: block; padding: 0.75rem 0; border-bottom: 1px solid var(--linie); }
  .hauptmenue a.aktiv, .hauptmenue a[aria-current="page"] { border-bottom-color: var(--linie); }
  .hauptmenue ul ul {
    display: flex; position: static; min-width: 0; box-shadow: none;
    border: 0; border-radius: 0; padding: 0 0 0 1rem; background: transparent;
  }
  .hauptmenue ul ul a { padding: 0.65rem 0; border-radius: 0; }
  .kopf-innen { flex-wrap: wrap; }
}