/* ==========================================================================
   Infoabend Inklusives Wohnen – Stylesheet
   Barrierefrei nach WCAG 2.1 AA / BITV 2.0
   Keine externen Schriften oder Ressourcen (Datenschutz).
   ========================================================================== */

:root {
  /* Farben – alle Text-Kombinationen erreichen mindestens 4.5:1 Kontrast */
  --tinte:        #241C0E;  /* Haupttext, auf Creme ca. 15:1 */
  --tinte-leicht: #4A3D28;  /* Nebentext, auf Creme ca. 8:1  */
  --creme:        #FFFDF7;  /* Seitenhintergrund */
  --weiss:        #FFFFFF;
  --sonne:        #F5B32E;  /* Akzent aus dem Flyer */
  --sonne-hell:   #FDEFCE;
  --sonne-blass:  #FFF8E8;
  --sonne-dunkel: #7A3E00;  /* Links, auf Creme ca. 7:1 */
  --sonne-tiefer: #5C2F00;  /* Link im Hover-Zustand */
  --rand:         #E4D5B4;
  --rand-stark:   #C9A85C;
  --fokus:        #12100A;

  --breite:       72rem;
  --textbreite:   38rem;
  --radius:       14px;
  --schatten:     0 2px 4px rgba(36, 28, 14, .07), 0 8px 20px rgba(36, 28, 14, .06);
}

/* --------------------------------------------------------------------------
   Grundlagen
   -------------------------------------------------------------------------- */

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

html {
  /* Kein feste px-Größe: die Browser-Einstellung des Nutzers bleibt wirksam. */
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 7rem; /* damit Anker nicht unter der Navigation landen */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinte);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.1875rem;   /* ca. 19px – gut lesbar */
  line-height: 1.65;
  text-align: left;       /* niemals Blocksatz: erschwert das Lesen */
  overflow-wrap: break-word;
}

h1, h2, h3 {
  line-height: 1.2;
  margin: 0 0 .6em;
  text-wrap: balance;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.65rem, 4vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.45rem); }

p, li { max-width: var(--textbreite); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 700; }

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

/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */

a {
  color: var(--sonne-dunkel);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
}
a:hover { color: var(--sonne-tiefer); text-decoration-thickness: 3px; }

.extern-hinweis {
  display: inline-block;
  font-size: .85em;
  font-weight: 400;
  color: var(--tinte-leicht);
  text-decoration: none;
}

/* Telefon- und E-Mail-Links werden oft mit dem Finger getroffen.
   Sie bekommen darum eine größere Trefferfläche (WCAG 2.2, 2.5.8). */
a[href^="tel:"],
a[href^="mailto:"],
.fuss-schluss a,
.karte > p > a,
.person-text > p > a {
  display: inline-block;
  padding: .3rem 0;
  min-height: 1.6rem;
}
.knopf[href^="tel:"],
.knopf[href^="mailto:"] { padding: .75rem 1.5rem; min-height: 3rem; }

/* --------------------------------------------------------------------------
   Fokus – sichtbar auf jedem Untergrund
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Fallback für ältere Browser ohne :focus-visible */
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: .5rem;
  top: -6rem;
  z-index: 100;
  background: var(--tinte);
  color: var(--weiss);
  padding: .9rem 1.4rem;
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 700;
  text-decoration: none;
  transition: top .15s ease-in-out;
}
.skip-link:focus { top: 0; color: var(--weiss); }

.visuell-versteckt {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Kopfbereich und Navigation
   -------------------------------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--weiss);
  border-bottom: 3px solid var(--sonne);
  box-shadow: 0 2px 10px rgba(36, 28, 14, .08);
}

.kopf-marke {
  max-width: none;
  margin: 0;
  padding: .7rem 1.25rem .2rem;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .01em;
  color: var(--tinte);
}

.hauptnavigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .4rem;
  list-style: none;
  margin: 0;
  padding: 0 1rem .55rem;
}
.hauptnavigation li { max-width: none; }

.hauptnavigation a {
  display: block;
  padding: .6rem .85rem;      /* große Klickfläche, mind. 44px hoch */
  min-height: 44px;
  border-radius: 999px;
  color: var(--tinte);
  font-weight: 600;
  font-size: 1.0rem;
  text-decoration: none;
  border: 2px solid transparent;
}
.hauptnavigation a:hover,
.hauptnavigation a:focus-visible {
  background: var(--sonne-hell);
  border-color: var(--rand-stark);
  color: var(--tinte);
}
.hauptnavigation a[aria-current="true"] {
  background: var(--sonne);
  border-color: var(--sonne-dunkel);
}

/* Auf schmalen Bildschirmen bräuchte die Navigation drei Zeilen und
   würde fast den halben Bildschirm verdecken. Darum scrollt der Kopf
   dort einfach mit. Zurück nach oben geht über den Link in der Fußzeile. */
@media (max-width: 48rem) {
  .kopf { position: static; }
  html { scroll-padding-top: 1rem; }
  .hauptnavigation a { font-size: .95rem; padding: .6rem .7rem; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  background:
    radial-gradient(120% 90% at 15% 0%, #FFE9AE 0%, transparent 60%),
    linear-gradient(170deg, var(--sonne) 0%, #FBD26B 45%, var(--sonne-blass) 100%);
  padding: 3rem 1.25rem 0;
  border-bottom: 3px solid var(--rand-stark);
}

.hero-inhalt {
  max-width: var(--breite);
  margin: 0 auto;
}

.hero-oberzeile {
  max-width: none;
  margin: 0 0 .6rem;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5C2F00;
}

.hero h1 { margin-bottom: .35em; }
.hero-gross {
  display: inline-block;
  font-size: 1.18em;
  line-height: 1.05;
}

.hero-unterzeile {
  max-width: none;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  font-weight: 600;
  color: #3B2E17;
  margin-bottom: 2rem;
}

/* Eckdaten-Karten */
.eckdaten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 0 0 2rem;
}
.eckdaten-punkt {
  background: var(--weiss);
  border: 2px solid var(--rand-stark);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--schatten);
}
.eckdaten dt {
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--sonne-dunkel);
  margin-bottom: .35rem;
}
.eckdaten dd { margin: 0; }

.hero-bild {
  display: block;
  width: 100%;
  max-width: 60rem;
  /* Luft zwischen den Knöpfen und der Zeichnung – auf schmalen
     Bildschirmen etwas weniger, auf breiten mehr. Der untere Wert
     verhindert, dass es auf dem Handy zu eng wird. */
  margin: clamp(2.5rem, 6vw, 4.5rem) auto 0;
}

/* --------------------------------------------------------------------------
   Knöpfe
   -------------------------------------------------------------------------- */

.knopf-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  max-width: none;
  margin: 0 0 2.5rem;
}

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 3rem;             /* mind. 48px Zielfläche */
  padding: .75rem 1.5rem;
  border: 3px solid var(--tinte);
  border-radius: 999px;
  font-size: 1.0625rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.3;
}
.knopf-haupt {
  background: var(--tinte);
  color: var(--weiss);
}
.knopf-haupt:hover { background: #3D3016; color: var(--weiss); }

.knopf-neben {
  background: var(--weiss);
  color: var(--tinte);
}
.knopf-neben:hover { background: var(--sonne-hell); color: var(--tinte); }

.knopf-klein {
  min-height: 2.75rem;
  padding: .55rem 1.1rem;
  font-size: 1rem;
  background: var(--weiss);
  color: var(--tinte);
  border-width: 2px;
}
.knopf-klein:hover { background: var(--sonne-hell); color: var(--tinte); }

.knopf-breit { width: 100%; }

.knopf .extern-hinweis { color: inherit; opacity: .8; }

/* --------------------------------------------------------------------------
   Abschnitte
   -------------------------------------------------------------------------- */

.abschnitt {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 3.5rem 1.25rem;
}
/* Die hellen Abschnitte gehen über die volle Breite. Die Inhaltsspalte
   wird über das Innenabstand-Maß zentriert – nicht über automatische
   Außenabstände. Sonst würden schmale Elemente (Überschrift, Einleitung)
   in der Mitte landen statt links zu beginnen. */
.abschnitt-hell {
  max-width: none;
  background: var(--sonne-blass);
  border-top: 2px solid var(--rand);
  border-bottom: 2px solid var(--rand);
  padding-left: max(1.25rem, calc((100% - var(--breite)) / 2 + 1.25rem));
  padding-right: max(1.25rem, calc((100% - var(--breite)) / 2 + 1.25rem));
}
.abschnitt-hell > * {
  max-width: var(--breite);
  margin-left: 0;
  margin-right: 0;
}
.abschnitt-hell > p.einleitung { max-width: var(--textbreite); }

/* Akzentlinie als eigener Balken statt als Unterkante der Überschrift:
   so bleibt die Überschrift ein normaler Block und rutscht in den
   hellen Abschnitten nicht in die Mitte. */
.abschnitt h2 {
  max-width: var(--breite);
  margin-bottom: 1.2rem;
}
.abschnitt h2::after {
  content: "";
  display: block;
  width: 4rem;
  height: 5px;
  margin-top: .45rem;
  background: var(--sonne);
  border-radius: 3px;
}

.einleitung {
  font-size: 1.25rem;
  color: var(--tinte);
  margin-bottom: 2rem;
}

.unterueberschrift {
  margin-top: 2.5rem;
  color: var(--sonne-dunkel);
}

.gross {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.35;
}

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

.spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.karte {
  background: var(--weiss);
  border: 2px solid var(--rand);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--schatten);
}
.karte h3 { color: var(--sonne-dunkel); }
.karte p, .karte li { max-width: none; }

/* --------------------------------------------------------------------------
   Listen
   -------------------------------------------------------------------------- */

.liste-haken {
  list-style: none;
  padding: 0;
  margin: 0 0 1em;
}
.liste-haken li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: .6rem;
}
.liste-haken li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 1.15rem;
  height: .6rem;
  border-left: 3px solid var(--sonne-dunkel);
  border-bottom: 3px solid var(--sonne-dunkel);
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Hinweis-Kästen
   -------------------------------------------------------------------------- */

.hinweis-kasten {
  background: var(--weiss);
  border: 2px solid var(--rand-stark);
  border-left: 10px solid var(--sonne);
  border-radius: var(--radius);
  padding: 1.75rem;
  margin-block: 2rem;
}
.hinweis-kasten:last-child { margin-bottom: 0; }
.hinweis-kasten h3 { margin-top: 0; }
.hinweis-wichtig { background: var(--sonne-hell); border-color: var(--rand-stark); }

/* --------------------------------------------------------------------------
   Programm
   -------------------------------------------------------------------------- */

.programm-liste {
  list-style: none;
  counter-reset: schritt;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.25rem;
}
.programm-liste > li {
  counter-increment: schritt;
  position: relative;
  max-width: none;
  background: var(--weiss);
  border: 2px solid var(--rand);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem 1.4rem 5.25rem;
  box-shadow: var(--schatten);
}
.programm-liste > li::before {
  content: counter(schritt);
  position: absolute;
  left: 1.25rem;
  top: 1.3rem;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  background: var(--sonne);
  border: 3px solid var(--tinte);
  border-radius: 50%;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--tinte);
}
.programm-liste h3 { margin-bottom: .35em; }
.programm-liste p { max-width: none; }
.programm-liste .wer {
  font-weight: 600;
  color: var(--sonne-dunkel);
  margin-top: .5em;
}

/* --------------------------------------------------------------------------
   Person
   -------------------------------------------------------------------------- */

.person {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  background: var(--weiss);
  border: 2px solid var(--rand);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--schatten);
}
.person-bild {
  width: 100%;
  border-radius: var(--radius);
  border: 3px solid var(--sonne);
}
.person-text h3 { margin-top: 0; }
.person-rolle {
  font-weight: 700;
  color: var(--sonne-dunkel);
  margin-bottom: 1em;
}

@media (max-width: 52rem) {
  .person { grid-template-columns: 1fr; gap: 1.25rem; }
  .person-bild { max-width: 13rem; }
}

/* --------------------------------------------------------------------------
   Link-Listen
   -------------------------------------------------------------------------- */

.link-liste {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  gap: .85rem;
}
.link-liste > li {
  max-width: none;
  background: var(--weiss);
  border: 2px solid var(--rand);
  border-radius: var(--radius);
  padding: 1.1rem 1.35rem;
}
.link-liste > li > a {
  display: inline-block;
  font-size: 1.15rem;
  font-weight: 700;
  padding: .15rem 0;
}
.link-liste p {
  margin: .35rem 0 0;
  color: var(--tinte-leicht);
  max-width: none;
}

.download-zeile { max-width: none; margin-top: 2rem; }

/* --------------------------------------------------------------------------
   Anfahrt
   -------------------------------------------------------------------------- */

.adresse-kasten {
  background: var(--weiss);
  border: 3px solid var(--tinte);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: var(--schatten);
}
.adresse-kasten p { max-width: none; }

.tipp {
  background: var(--sonne-hell);
  border-radius: 10px;
  padding: .8rem 1rem;
  margin-bottom: 1em;
}

.kontakt-direkt {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  max-width: none;
  margin-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   Formulare
   -------------------------------------------------------------------------- */

.formular-block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 2rem;
  align-items: start;
}

.formular-erklaerung {
  background: var(--weiss);
  border: 2px solid var(--rand);
  border-radius: var(--radius);
  padding: 1.6rem;
}
.formular-erklaerung h3 { margin-top: 0; color: var(--sonne-dunkel); }
.formular-erklaerung p, .formular-erklaerung li { max-width: none; }

.kontakt-person { font-size: 1.2rem; }
.kontakt-zeile { margin-bottom: .5em; }
.kontakt-label {
  display: inline-block;
  min-width: 5.5rem;
  font-weight: 600;
}

/* Kontakt per Messenger */
.messenger {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--rand);
}
.messenger h4 {
  margin: 0 0 .5rem;
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--sonne-dunkel);
}
.messenger p { max-width: none; }
.messenger-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: .6rem 0 .75rem;
  max-width: none;
}
.messenger-knoepfe .knopf { flex: 0 1 auto; }

/* Innerhalb der Kontakt-Karte füllen die beiden Knöpfe die Breite,
   auf den Textseiten stehen sie in ihrer natürlichen Größe nebeneinander. */
.messenger .messenger-knoepfe .knopf { flex: 1 1 12rem; }

.messenger-hinweis {
  margin: 1.5rem 0 0;
  font-weight: 600;
}

/* Weiterer Kontaktweg – deutlich vom Messenger-Block abgesetzt */
.kontakt-weitere {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--rand);
}

.formular {
  background: var(--weiss);
  border: 3px solid var(--tinte);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--schatten);
}
.formular h3 { margin-top: 0; }

.feld { margin-bottom: 1.4rem; }

.feld > label {
  display: block;
  font-weight: 700;
  margin-bottom: .4rem;
  max-width: none;
}

.pflicht  { font-weight: 400; font-size: .9em; color: #7A2E00; }
.optional { font-weight: 400; font-size: .9em; color: var(--tinte-leicht); }

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld textarea {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: .65rem .8rem;
  font-family: inherit;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--tinte);
  background: var(--weiss);
  border: 2px solid #6B5B3E;
  border-radius: 8px;
}
.feld textarea { min-height: 8rem; resize: vertical; }

.feld input:focus-visible,
.feld textarea:focus-visible {
  border-color: var(--fokus);
  outline: 3px solid var(--fokus);
  outline-offset: 1px;
}

.feld-hilfe {
  margin: .4rem 0 0;
  font-size: .95rem;
  color: var(--tinte-leicht);
  max-width: none;
}

.feld-kasten {
  background: var(--sonne-blass);
  border: 2px solid var(--rand);
  border-radius: 10px;
  padding: 1rem 1.1rem;
}

.ankreuz {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-weight: 600;
  cursor: pointer;
  max-width: none;
}
.ankreuz input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  margin: .1rem 0 0;
  accent-color: var(--sonne-dunkel);
}

/* Fehlermeldungen (per JavaScript ergänzt) */
.feld-fehler {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin: .45rem 0 0;
  padding: .5rem .7rem;
  background: #FDE7E7;
  border-left: 5px solid #A4160E;
  border-radius: 6px;
  color: #7A100A;
  font-weight: 600;
  font-size: 1rem;
  max-width: none;
}
.feld-fehler::before { content: "!"; font-weight: 700; }

.feld input[aria-invalid="true"],
.feld textarea[aria-invalid="true"] { border-color: #A4160E; border-width: 3px; }

.formular-fehler {
  margin-bottom: 1.4rem;
  padding: 1rem 1.15rem;
  background: #FDE7E7;
  border: 3px solid #A4160E;
  border-radius: 10px;
  color: #7A100A;
  max-width: none;
}
.formular-fehler h4 { margin: 0 0 .5rem; font-size: 1.1rem; }
.formular-fehler ul { margin: 0; padding-left: 1.3rem; }
.formular-fehler li { max-width: none; }
.formular-fehler a { color: #7A100A; }

/* Honigtopf: Falle für Spam-Roboter. Für Menschen unsichtbar,
   aber nicht per display:none (manche Roboter erkennen das). */
.honigtopf {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Fußzeile
   -------------------------------------------------------------------------- */

.fusszeile {
  background: var(--tinte);
  color: #FBF6EA;
  padding: 3rem 1.25rem 1.5rem;
  margin-top: 0;
}
.fusszeile a { color: #FFD98A; }
.fusszeile a:hover { color: var(--weiss); }
.fusszeile h2 {
  font-size: 1.25rem;
  border: none;
  padding: 0;
  color: var(--sonne);
  max-width: none;
}

.fuss-inhalt {
  max-width: var(--breite);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2.5rem;
}
.fuss-block p, .fuss-block li { max-width: none; }

.fuss-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}
.fuss-logos img {
  background: var(--weiss);
  border-radius: 10px;
  padding: .6rem;
  height: 5.5rem;
  width: auto;
}

.fuss-links {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.25rem;
}
.fuss-links a {
  display: inline-block;
  padding: .5rem 0;
  min-height: 44px;
  font-weight: 600;
}

.fuss-schluss {
  max-width: var(--breite);
  margin: 2.5rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid #4A3D28;
}

/* --------------------------------------------------------------------------
   Unterseiten (Impressum, Datenschutz, Danke, Barrierefreiheit)
   -------------------------------------------------------------------------- */

.textseite {
  max-width: 46rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
}
.textseite h2 { margin-top: 2.5rem; }
.textseite h3 { margin-top: 1.75rem; }
.textseite ul, .textseite ol { padding-left: 1.4rem; }
.textseite li { margin-bottom: .5rem; }

.erfolg-kasten {
  background: #E6F4E6;
  border: 3px solid #1E6B23;
  border-left-width: 10px;
  border-radius: var(--radius);
  padding: 1.75rem;
  margin-bottom: 2rem;
}
.erfolg-kasten h1 { color: #14501A; margin-top: 0; }

.zurueck-leiste {
  background: var(--weiss);
  border-bottom: 3px solid var(--sonne);
  padding: .75rem 1.25rem;
}
.zurueck-leiste a { font-weight: 700; }

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

@media print {
  .kopf, .knopf-reihe, .formular, .skip-link, .fuss-schluss { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero { background: none; }
  .abschnitt, .abschnitt-hell { padding: 1rem 0; }
  .karte, .programm-liste > li, .hinweis-kasten { break-inside: avoid; box-shadow: none; }
  a::after { content: " (" attr(href) ")"; font-size: .85em; word-break: break-all; }
  a[href^="#"]::after { content: ""; }
}

/* --------------------------------------------------------------------------
   Nutzer-Einstellungen respektieren
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Hoher Kontrast erwünscht: Ränder verstärken, Verläufe entfernen */
@media (prefers-contrast: more) {
  :root { --tinte-leicht: #241C0E; --rand: #6B5B3E; --rand-stark: #3D3016; }
  .hero { background: var(--sonne); }
  .karte, .link-liste > li, .formular-erklaerung { border-color: var(--tinte); }
}

/* Windows-Kontrastmodus */
@media (forced-colors: active) {
  .knopf, .karte, .formular, .hinweis-kasten, .link-liste > li { border: 2px solid ButtonText; }
  .programm-liste > li::before { border: 2px solid ButtonText; }
  .liste-haken li::before { border-color: CanvasText; }
}