/* ==========================================================================
   Polat Garten- & Landschaftsbau
   Ein Stylesheet, kein Build-Schritt. Klassennamen auf Deutsch.

   Farben sind mit werkzeuge/kontrast.py gegen WCAG AA geprueft.
   Wer eine Farbe aendert, prueft sie dort erneut nach.
   ========================================================================== */

/* --- Schriften, lokal ausgeliefert (kein Google-CDN, DSGVO) --------------- */
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/sourceserif-600.woff2') format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/sourceserif-700.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/inter-700.woff2') format('woff2')}

/* --- Werte ---------------------------------------------------------------- */
:root{
  /* Farben. Die ersten drei sind aus dem Firmenlogo gemessen. */
  --gruen-dunkel:#102E17;   /* Kopf, Fuss, Ueberschriften   14,09:1 auf Sand */
  --gruen:#567A2A;          /* Buttons, Links                4,98:1 mit Weiss */
  --gruen-hell:#658F31;     /* nur Dekor und grosse Schrift  Logogruen */
  --gruen-blass:#A7C489;    /* Text auf Dunkelgruen          7,65:1 */
  --sand:#FAFAF7;
  --weiss:#FFFFFF;
  --text:#1F241E;
  --text-leise:#55605A;
  --linie:#E3E6DE;
  --schatten:0 1px 2px rgba(16,46,23,.05), 0 8px 24px rgba(16,46,23,.06);
  --schatten-hoch:0 2px 4px rgba(16,46,23,.07), 0 16px 40px rgba(16,46,23,.10);

  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --breite:1180px;
  --breite-schmal:720px;
  --rand:clamp(1.25rem, 5vw, 3rem);
  --radius:14px;
  --radius-klein:8px;

  /* Hakensymbol als Maske, damit es die Farbe aus dem CSS uebernimmt */
  --haken:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.3 5.7 9 17l-5.3-5.3 1.4-1.4L9 14.2l9.9-9.9z'/%3E%3C/svg%3E");
}

/* --- Grundlagen ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important}
}
body{
  margin:0; background:var(--sand); color:var(--text);
  font-family:var(--sans); font-size:1.0625rem; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,picture,video{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{font-family:var(--serif); color:var(--gruen-dunkel); line-height:1.15;
  margin:0 0 .5em; letter-spacing:-.01em; font-weight:700; text-wrap:balance}
h1{font-size:clamp(2.1rem, 1.4rem + 3.2vw, 3.6rem)}
h2{font-size:clamp(1.65rem, 1.2rem + 2vw, 2.5rem)}
h3{font-size:clamp(1.2rem, 1.05rem + .7vw, 1.5rem)}
h4{font-size:1.0625rem; font-family:var(--sans); font-weight:600}
p{margin:0 0 1.15em; text-wrap:pretty}
a{color:var(--gruen); text-underline-offset:.18em; text-decoration-thickness:.08em}
a:hover{color:var(--gruen-dunkel)}
:focus-visible{outline:3px solid var(--gruen-dunkel); outline-offset:3px; border-radius:3px}
ul,ol{padding-left:1.25em}
li{margin-bottom:.4em}
hr{border:0; border-top:1px solid var(--linie); margin:2.5rem 0}
strong{font-weight:600}

/* Nur fuer Screenreader */
.nur-vorlesen{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.sprungmarke{position:absolute; left:-9999px; top:0; z-index:200; background:var(--gruen-dunkel);
  color:#fff; padding:.85rem 1.25rem; border-radius:0 0 var(--radius-klein) 0; font-weight:600}
.sprungmarke:focus{left:0; color:#fff}

/* --- Aufbau --------------------------------------------------------------- */
.inhalt{width:min(100% - var(--rand)*2, var(--breite)); margin-inline:auto}
.inhalt-schmal{width:min(100% - var(--rand)*2, var(--breite-schmal)); margin-inline:auto}
.schnitt{padding-block:clamp(3rem, 7vw, 5.5rem)}
.schnitt-eng{padding-block:clamp(2.25rem, 5vw, 3.5rem)}
.schnitt-weiss{background:var(--weiss); border-block:1px solid var(--linie)}
.schnitt-dunkel{background:var(--gruen-dunkel); color:#fff}
.schnitt-dunkel h2,.schnitt-dunkel h3{color:#fff}
.schnitt-dunkel p{color:#E6EDDF}

.kopfzeile{max-width:62ch; margin-bottom:clamp(1.75rem,4vw,2.75rem)}
.kopfzeile.mitte{margin-inline:auto; text-align:center}
.augenbraue{font-size:.8125rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--gruen); margin:0 0 .75rem}
.schnitt-dunkel .augenbraue{color:var(--gruen-blass)}
.vorspann{font-size:clamp(1.05rem,1rem + .35vw,1.2rem); color:var(--text-leise); max-width:60ch}
.schnitt-dunkel .vorspann{color:#D6E2CB}

/* --- Knoepfe -------------------------------------------------------------- */
.knopf{display:inline-flex; align-items:center; gap:.55rem; padding:.85rem 1.6rem;
  border-radius:999px; font-weight:600; font-size:1rem; text-decoration:none;
  border:2px solid transparent; cursor:pointer; font-family:inherit;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease}
.knopf:hover{transform:translateY(-1px)}
.knopf-voll{background:var(--gruen); color:#fff}
.knopf-voll:hover{background:var(--gruen-dunkel); color:#fff}
.knopf-rand{background:transparent; color:var(--gruen-dunkel); border-color:var(--gruen-dunkel)}
.knopf-rand:hover{background:var(--gruen-dunkel); color:#fff}
.knopf-hell{background:#fff; color:var(--gruen-dunkel)}
.knopf-hell:hover{background:var(--gruen-blass); color:var(--gruen-dunkel)}
.knopf-hell-rand{background:transparent; color:#fff; border-color:rgba(255,255,255,.6)}
.knopf-hell-rand:hover{background:#fff; color:var(--gruen-dunkel); border-color:#fff}
.knopf-reihe{display:flex; flex-wrap:wrap; gap:.85rem}

/* --- Kopf ----------------------------------------------------------------- */
.kopf{position:sticky; top:0; z-index:100; background:var(--gruen-dunkel); color:#fff}
/* Kein position:relative hier - das Klappmenue richtet sich an .kopf aus,
   sonst ragt es seitlich ueber den Bildschirmrand hinaus. */
.kopf-innen{display:flex; align-items:center; gap:1.25rem; min-height:76px}
.marke{display:flex; align-items:center; gap:.7rem; text-decoration:none; color:#fff; flex-shrink:0}
.marke img{width:46px; height:auto; background:#fff; border-radius:8px; padding:3px}
.marke-text{display:flex; flex-direction:column; line-height:1.15}
.marke-name{font-family:var(--serif); font-weight:700; font-size:1.0625rem; letter-spacing:-.01em}
.marke-zusatz{font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gruen-blass)}

.hauptnavi{margin-left:auto}
.hauptnavi ul{display:flex; gap:.35rem; list-style:none; margin:0; padding:0}
.hauptnavi li{margin:0}
.hauptnavi a{display:block; padding:.55rem .85rem; color:#E6EDDF; text-decoration:none;
  border-radius:var(--radius-klein); font-weight:500; font-size:.9688rem;
  transition:background-color .15s ease, color .15s ease}
.hauptnavi a:hover{background:rgba(255,255,255,.1); color:#fff}
.hauptnavi a[aria-current="page"]{color:#fff; font-weight:600; background:rgba(255,255,255,.13)}
.kopf-telefon{display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.15rem;
  background:var(--gruen); color:#fff; border-radius:999px; text-decoration:none;
  font-weight:600; font-size:.9688rem; white-space:nowrap; flex-shrink:0}
.kopf-telefon:hover{background:#fff; color:var(--gruen-dunkel)}
.kopf-telefon svg{width:17px; height:17px; fill:currentColor; flex-shrink:0}

.menue-knopf{display:none; background:transparent; border:2px solid rgba(255,255,255,.35);
  color:#fff; border-radius:var(--radius-klein); padding:.5rem .7rem; cursor:pointer; font:inherit}
.menue-knopf svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2; display:block}

/* 1100 px, nicht 900: Zwischen 900 und 1100 passen Firmenname, fuenf
   Menuepunkte und der Telefon-Knopf noch nicht nebeneinander - bei 1024 px,
   einer sehr verbreiteten Laptop-Breite, stand der Knopf ueber dem Rand und
   die ganze Seite liess sich seitlich schieben. Bis 1100 px daher das
   Klappmenue. Der Umschaltpunkt fuer Heldbild und Textspalten bleibt bei 900. */
@media (max-width:1100px){
  /* Der Firmenname darf hier umbrechen und schrumpfen. Ohne das schiebt er
     auf schmalen Geraeten den Menue-Knopf ueber den Bildschirmrand hinaus
     und die ganze Seite laesst sich seitlich verschieben. */
  .kopf-innen{gap:.75rem}
  .marke{flex-shrink:1; min-width:0}
  .marke-name{font-size:.9375rem; line-height:1.2}
  .menue-knopf{display:block; margin-left:auto; order:2}
  .hauptnavi{position:absolute; left:0; right:0; top:100%;
    background:var(--gruen-dunkel); margin:0;
    border-top:1px solid rgba(255,255,255,.14); box-shadow:var(--schatten-hoch)}
  .hauptnavi[hidden]{display:none}
  .hauptnavi ul{flex-direction:column; gap:0; padding:.5rem var(--rand) 1.25rem}
  .hauptnavi a{padding:.85rem .25rem; border-radius:0; border-bottom:1px solid rgba(255,255,255,.09)}
  .kopf-telefon{order:1; padding:.6rem .8rem; margin-left:auto}
  .kopf-telefon .telefon-text{display:none}
}
@media (max-width:420px){
  .marke-zusatz{display:none}
  .marke-name{font-size:.9375rem}
}

/* --- Held (Startbild) -----------------------------------------------------
   Text steht auf der dunkelgruenen Flaeche, nicht auf dem Foto. Grund: im
   Textbereich liegt sonnenbeschienener Granit (#fee8b4). Selbst bei 55 %
   Abdunklung kaeme Weiss dort nur auf 4,49:1 - zu knapp. So bleibt das Foto
   in voller Leuchtkraft und der Kontrast ist mit 14,73:1 kein Thema mehr. */
.held{position:relative; background:var(--gruen-dunkel); color:#fff; overflow:hidden}
.held-bild{width:100%; height:100%; object-fit:cover}
.held-innen{position:relative; z-index:1; padding-block:clamp(3rem, 7vw, 5.5rem);
  padding-right:clamp(0rem, 4vw, 3.5rem); max-width:48ch}

@media (min-width:900px){
  .held-foto{position:absolute; inset:0 0 0 50%; z-index:0}
  /* Weicher Übergang, damit die Fotokante nicht als harte Linie steht */
  .held-foto::after{content:""; position:absolute; inset:0; width:150px;
    background:linear-gradient(90deg, var(--gruen-dunkel) 0%, rgba(16,46,23,0) 100%)}
  .held-innen{min-height:min(74vh, 620px); display:flex; flex-direction:column;
    justify-content:center; max-width:calc(50% - var(--rand))}
}
@media (max-width:899px){
  .held-foto img{aspect-ratio:16/10}
}
.held h1{color:#fff; margin-bottom:.45em}
.held-vorspann{font-size:clamp(1.0625rem,1rem + .55vw,1.3rem); color:#E9F0E2; margin-bottom:2rem}
.held-marken{display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.5rem; padding:0; list-style:none}
.held-marken li{margin:0; font-size:.8125rem; font-weight:600; letter-spacing:.04em;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28);
  padding:.35rem .8rem; border-radius:999px; color:#fff}

/* --- Karten --------------------------------------------------------------- */
.raster{display:grid; gap:clamp(1rem,2.2vw,1.6rem)}
.raster-2{grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr))}
.raster-3{grid-template-columns:repeat(auto-fit, minmax(min(100%, 285px), 1fr))}
.raster-4{grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr))}

.karte{background:var(--weiss); border:1px solid var(--linie); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--schatten)}
.karte-bild{aspect-ratio:4/3; width:100%; object-fit:cover; background:#EEF1EA}
.karte-inhalt{padding:1.35rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1}
.karte h3{margin-bottom:.4rem}
.karte p{color:var(--text-leise); font-size:.9688rem; margin-bottom:1rem}
.karte p:last-child{margin-bottom:0}
.karte-fuss{margin-top:auto; font-weight:600; font-size:.9375rem; color:var(--gruen)}
.karte-link{text-decoration:none; color:inherit; transition:transform .2s ease, box-shadow .2s ease}
.karte-link:hover{transform:translateY(-3px); box-shadow:var(--schatten-hoch)}
.karte-link:hover h3{color:var(--gruen)}

/* --- Merkmalsliste mit Haken ---------------------------------------------- */
.haken-liste{list-style:none; padding:0; margin:0; display:grid; gap:.7rem}
.haken-liste li{position:relative; padding-left:2rem; margin:0}
.haken-liste li::before{content:""; position:absolute; left:0; top:.42em;
  width:1.15rem; height:1.15rem; background:var(--gruen-hell);
  -webkit-mask:var(--haken) center/1.15rem no-repeat;
  mask:var(--haken) center/1.15rem no-repeat}
.schnitt-dunkel .haken-liste li::before{background:var(--gruen-blass)}

/* --- Zwei Spalten Text und Bild ------------------------------------------- */
.paar{display:grid; gap:clamp(1.75rem,4vw,3.5rem); align-items:center;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr))}
.paar-bild{border-radius:var(--radius); overflow:hidden; box-shadow:var(--schatten)}
.paar-bild img{width:100%; aspect-ratio:3/2; object-fit:cover}
@media (min-width:900px){ .paar-gedreht > :first-child{order:2} }

/* --- Zahlen und Fakten ---------------------------------------------------- */
.fakten{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(min(100%,200px),1fr));
  list-style:none; padding:0; margin:0}
.fakten > div{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius); padding:1.35rem 1.4rem}
.fakten dt{font-size:.8125rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gruen-blass); font-weight:600; margin-bottom:.35rem}
.fakten dd{margin:0; font-family:var(--serif); font-size:1.35rem; font-weight:700;
  color:#fff; line-height:1.25}

/* --- Referenzen ----------------------------------------------------------- */
.projekt{background:var(--weiss); border:1px solid var(--linie); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--schatten); margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.projekt-kopf{padding:1.5rem clamp(1.25rem,3vw,2rem) 1.15rem}
.projekt-kopf h3{margin-bottom:.35rem}
.projekt-meta{font-size:.875rem; color:var(--text-leise); margin:0;
  display:flex; flex-wrap:wrap; gap:.35rem 1.25rem}
.projekt-text{padding:0 clamp(1.25rem,3vw,2rem) 1.25rem; color:var(--text-leise); max-width:70ch}
.galerie{display:grid; gap:2px; grid-template-columns:repeat(auto-fit, minmax(min(100%,220px),1fr));
  background:var(--linie)}
.galerie img{width:100%; aspect-ratio:4/3; object-fit:cover; background:#EEF1EA}

/* --- Einzugsgebiet -------------------------------------------------------- */
.orte{display:flex; flex-wrap:wrap; gap:.6rem; list-style:none; padding:0; margin:0}
.orte li{margin:0; background:var(--weiss); border:1px solid var(--linie); border-radius:999px;
  padding:.5rem 1.15rem; font-weight:500; font-size:.9375rem}
.schnitt-dunkel .orte li{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); color:#fff}

/* --- Formular ------------------------------------------------------------- */
.formular{display:grid; gap:1.15rem}
.feld{display:grid; gap:.4rem}
.feld-paar{display:grid; gap:1.15rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.feld label{font-weight:600; font-size:.9375rem; color:var(--gruen-dunkel)}
.feld .hinweis{font-weight:400; color:var(--text-leise); font-size:.875rem}
.feld input,.feld textarea,.feld select{font:inherit; font-size:1rem; color:var(--text);
  background:var(--weiss); border:1.5px solid #C9D0C2; border-radius:var(--radius-klein);
  padding:.75rem .9rem; width:100%}
.feld textarea{min-height:150px; resize:vertical}
.feld input:focus,.feld textarea:focus,.feld select:focus{
  outline:3px solid var(--gruen-dunkel); outline-offset:1px; border-color:var(--gruen-dunkel)}
.pflicht{color:#B3261E}
.zustimmung{display:flex; gap:.75rem; align-items:flex-start; font-size:.9375rem; color:var(--text-leise)}
.zustimmung input{width:1.2rem; height:1.2rem; margin-top:.2rem; flex-shrink:0; accent-color:var(--gruen)}
.honig{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.formular-meldung{padding:1rem 1.15rem; border-radius:var(--radius-klein); font-weight:500}
.formular-meldung[data-art="gut"]{background:#E8F2DE; border:1px solid var(--gruen); color:#2C4416}
.formular-meldung[data-art="schlecht"]{background:#FCEAE8; border:1px solid #B3261E; color:#7A1810}

/* --- Kontaktangaben ------------------------------------------------------- */
/* Ein <dl> darf nur eine Ebene aus <div> mit dt und dd enthalten. Das Symbol
   steht deshalb im <dt> und nicht in einem zusaetzlichen Behaelter davor. */
.kontaktliste{padding:0; margin:0; display:grid; gap:1.25rem}
.kontaktliste > div{display:grid; gap:.15rem}
.kontaktliste svg{width:20px; height:20px; fill:var(--gruen); flex-shrink:0}
.kontaktliste dt{display:flex; align-items:center; gap:.6rem;
  font-size:.8125rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-leise); font-weight:600}
.kontaktliste dd{margin:0; padding-left:1.85rem; font-size:1.0625rem; font-weight:500;
  overflow-wrap:anywhere}
.kontaktliste a{font-weight:600}

/* --- E-Mail-Adresse auf einer Zeile halten -------------------------------
   Die Adresse ist 35 Zeichen lang und braucht bei voller Schriftgroesse
   rund 324 px. Das passt erst ab etwa 405 px Bildschirmbreite. Darunter
   schrumpft sie mit, statt in zwei Zeilen zu brechen. Ab 405 px steht sie
   wieder in normaler Groesse. */
.kontaktliste dd a[href^="mailto:"],
.rechtstext a[href^="mailto:"],
.fuss a[href^="mailto:"]{
  font-size:min(1.0625rem, 4.2vw);
}
/* Solange die Kontaktliste in einer schmalen Spalte steht, faellt die
   Einrueckung weg - die 30 px fehlen der Adresse sonst zur vollen Zeile.
   Ab 900 px ist die Spalte breit genug, dann darf sie wieder eingerueckt sein. */
@media (max-width:900px){
  .kontaktliste dd{padding-left:0}
}

/* --- Fuss ----------------------------------------------------------------- */
.fuss{background:var(--gruen-dunkel); color:#E6EDDF; padding-top:clamp(2.75rem,6vw,4rem)}
.fuss a{color:#E6EDDF; text-decoration:none}
.fuss a:hover{color:#fff; text-decoration:underline}
/* 320 px Mindestbreite je Spalte: Die E-Mail-Adresse braucht in voller
   Schriftgroesse rund 314 px. Waeren die Spalten schmaler, braeche sie um.
   Lieber eine Spalte weniger als eine umgebrochene Adresse. */
.fuss-raster{display:grid; gap:2.25rem;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr))}

/* Erst ab 1150 px ist Platz fuer alle vier Spalten nebeneinander. Die
   Kontaktspalte bekommt davon mehr ab, weil die Adresse dort steht.
   minmax(0, ...) statt 1fr, damit eine Spalte notfalls schrumpfen darf und
   nicht die ganze Seite seitlich hinausschiebt. */
@media (min-width:1150px){
  .fuss-raster{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr)}
}
.fuss-marke{font-family:var(--serif); font-size:1.35rem; font-weight:700; color:#fff;
  line-height:1.2; margin:0 0 .75rem}
.fuss h2{font-size:.8125rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gruen-blass);
  font-family:var(--sans); font-weight:600; margin-bottom:1rem}
.fuss ul{list-style:none; padding:0; margin:0; display:grid; gap:.6rem; min-width:0}
/* Die E-Mail-Adresse ist laenger als die Spalte und lief sonst in die naechste. */
.fuss li{margin:0; overflow-wrap:anywhere}
.fuss-schluss{margin-top:2.75rem; border-top:1px solid rgba(255,255,255,.16); padding-block:1.35rem;
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between;
  font-size:.875rem; color:#B9C9AC}
.fuss-schluss ul{display:flex; flex-wrap:wrap; gap:.6rem 1.35rem}

/* --- Rechtstexte ---------------------------------------------------------- */
/* Lange E-Mail-Adressen und Links passen auf schmalen Bildschirmen sonst nicht
   in die Textspalte und die ganze Seite laesst sich seitlich verschieben. */
.rechtstext{overflow-wrap:break-word}
.rechtstext h2{font-size:1.35rem; margin-top:2.5rem}
.rechtstext h3{font-size:1.0625rem; font-family:var(--sans); margin-top:1.75rem}
.rechtstext p,.rechtstext li{color:var(--text); font-size:1rem}
.rechtstext address{font-style:normal; margin-bottom:1.15em}

/* Offene Stellen stehen nicht mehr sichtbar auf der Seite, sondern als
   HTML-Kommentar mit dem Wort OFFEN. werkzeuge/pruefen.py findet sie dort.
   So sieht die Seite fuer Besucher fertig aus und nichts geht verloren. */

/* --- Breites Abschlussbild ------------------------------------------------ */
.bildband{position:relative; background:var(--gruen-dunkel)}
.bildband img{width:100%; aspect-ratio:21/9; object-fit:cover; display:block}
.bildband figcaption{position:absolute; left:0; right:0; bottom:0;
  padding:2.5rem var(--rand) 1.15rem; color:#fff; font-size:.9375rem;
  background:linear-gradient(180deg, rgba(11,31,16,0) 0%, rgba(11,31,16,.75) 100%)}
@media (max-width:640px){
  .bildband img{aspect-ratio:4/3}
}

/* --- Kleine Hilfsklassen --------------------------------------------------
   Diese Angaben standen frueher als style="..." direkt im HTML. Die
   Content-Security-Policy erlaubt das nicht: auf dem Server wurden sie
   allesamt blockiert und die Seite sah anders aus als beim lokalen Testen.
   Lokal ohne Header faellt das nicht auf - deshalb hier im Stylesheet. */
.kein-abstand{margin:0}
.mitte-block{margin-inline:auto}
.text-mitte{text-align:center}
.oben-2{margin-top:2rem}
.leicht{font-weight:400}
.knopf-reihe.mitte{justify-content:center; margin-top:1.75rem}
.paar.oben{align-items:start}
.fuss-notiz{margin:0; color:#B9C9AC}
.hinweis-oben{margin-top:1.5rem; color:var(--text-leise)}
.kleiner-hinweis{margin-top:1.25rem; color:var(--text-leise); font-size:.9375rem}
.kleiner-hinweis-oben{margin:1.25rem 0 0; color:var(--text-leise); font-size:.9375rem}
.pflicht-hinweis{margin:0; font-size:.875rem; color:var(--text-leise)}
.stand-hinweis{color:var(--text-leise); font-size:.9375rem}
.feldgruppe{border:0; padding:0; margin:0}
.feldgruppe-titel{padding:0; margin-bottom:.4rem; font-weight:600;
  font-size:.9375rem; color:var(--gruen-dunkel)}

/* --- Fehlerseite ---------------------------------------------------------- */
.mitte-seite{min-height:60vh; display:grid; place-items:center; text-align:center}