:root {
  /* Marke */
  --blau:          #024594;
  --blau-dunkel:   #003887;
  --blau-tief:     #051557;
  --blau-hell:     #C9DBF2;
  --blau-mittel:   #5E93D6;
  --blau-blass:    #E8EFF9;

  /* Flächen */
  --weiss:         #ffffff;
  --grau:          #F4F6FA;
  --grau-linie:    #E6E9F0;
  --grau-feld:     #D4DAE7;
  --fuss-linie:    #1D2B67;

  /* Text */
  --text:          #3b456f;
  --text-leise:    #5A6280;
  --text-fuss:     #9DACC9;

  --schritt-1: #D8412F;
  --schritt-2: #EE8B2D;
  --schritt-3: #E9C227;
  --schritt-4: #3E9E55;
  --schritt-5: #0E8FD6;
  --schritt-3-text: #C9A50E;

  --erfolg:        #3E9E55;
  --erfolg-blass:  #EEF7F0;
  --erfolg-text:   #1F6B36;
  --fehler-blass:  #FBEDEB;
  --fehler-text:   #8E2418;

  /* Maße */
  --seitenrand:    20px;
  --max-breite:    1240px;
  --abstand-sek:   52px;
  --kopf-hoehe:    74px;

  --schrift-kopf:  "Raleway", "Helvetica Neue", Arial, sans-serif;
  --schrift-text:  "Roboto", "Helvetica Neue", Arial, sans-serif;
}

@media (min-width: 768px) {
  :root { --seitenrand: 32px; --abstand-sek: 80px; --kopf-hoehe: 90px; }
}

@media (min-width: 1200px) {
  :root { --seitenrand: 48px; --abstand-sek: 110px; --kopf-hoehe: 106px; }
}

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

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--weiss);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

[id] { scroll-margin-top: calc(var(--kopf-hoehe) + 8px); }

h1, h2, h3, h4 {
  font-family: var(--schrift-kopf);
  color: var(--blau-tief);
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

img { max-width: 100%; }

a { color: var(--blau); text-decoration: none; }
a:hover { color: var(--blau-dunkel); }

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

.wrap {
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 0 var(--seitenrand);
}

.nur-fuer-screenreader {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: var(--seitenrand); z-index: 100;
  background: var(--blau); color: var(--weiss); padding: 12px 20px;
  font-family: var(--schrift-kopf); font-weight: 600;
}
.skip-link:focus { top: 8px; color: var(--weiss); }

/* --------------------------------------------------------- Das Farbband -- */

.band {
  height: 6px;
  background: linear-gradient(90deg,
    var(--schritt-1) 0%,      var(--schritt-1) 16.66%,
    var(--schritt-2) 16.66%,  var(--schritt-2) 33.33%,
    var(--schritt-3) 33.33%,  var(--schritt-3) 50%,
    var(--schritt-4) 50%,     var(--schritt-4) 66.66%,
    var(--schritt-5) 66.66%,  var(--schritt-5) 83.33%,
    #7B4FA8 83.33%,           #7B4FA8 100%);
}

.band--hero { height: 6px; }
@media (min-width: 768px) { .band--hero { height: 8px; } }

.akzent { width: 92px; border-radius: 3px; }
@media (min-width: 1200px) { .akzent { width: 104px; } }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px;
  background: var(--blau); color: var(--weiss);
  font-family: var(--schrift-kopf); font-size: 14px; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase;
  border: 0; cursor: pointer; text-align: center;
}
.btn:hover { background: var(--blau-dunkel); color: var(--weiss); }
.btn--voll { display: flex; width: 100%; }

@media (min-width: 1200px) {
  .btn { min-height: 54px; padding: 0 32px; font-size: 15px; }
}

/* --------------------------------------------------------------- Kopf ---- */

.kopf {
  position: sticky; top: 0; z-index: 40;
  background: var(--weiss);
  border-bottom: 1px solid var(--grau-linie);
}

.kopf__zeile {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--kopf-hoehe); gap: 16px;
}

.kopf__logo { height: 46px; width: auto; display: block; }
@media (min-width: 1200px) { .kopf__logo { height: 66px; } }

.kopf__griffe { display: flex; align-items: center; gap: 6px; }

.ikonknopf {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; padding: 0; cursor: pointer; color: var(--blau-tief);
}

@media (min-width: 1200px) {
  .kopf__griffe { display: none; }
}

.nav { display: none; }

@media (min-width: 1200px) {
  .nav {
    display: flex; align-items: center; gap: 28px;
    font-family: var(--schrift-kopf); font-size: 14px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
  }
  .nav__link {
    color: var(--text); padding: 8px 0; border-bottom: 2px solid transparent;
  }
  .nav__link:hover { color: var(--blau); }
  .nav__link.ist-aktiv { color: var(--blau); border-bottom-color: var(--blau); }
  .nav__knopf,
  .nav__knopf:hover,
  .nav__knopf.ist-aktiv { min-height: 46px; padding: 0 24px; font-size: 13px;
                          color: var(--weiss); border-bottom-color: transparent; }
}

/* ------------------------------------------------------------ Mobilmenü -- */

.menue {
  position: fixed; inset: 0; z-index: 50;
  background: var(--blau-tief);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.menue[hidden] { display: none; }

.menue > .wrap { width: 100%; margin-left: 0; margin-right: 0; }

.menue__kopf {
  position: sticky; top: 0; z-index: 2;
  background: var(--weiss); flex-shrink: 0;
}

.menue__liste { padding-top: 14px; flex-shrink: 0; }

.menue__link {
  display: flex; align-items: center;
  min-height: 54px;
  font-family: var(--schrift-kopf); font-size: 19px; font-weight: 600;
  color: var(--weiss); border-bottom: 1px solid var(--fuss-linie);
}
.menue__link:hover { color: var(--blau-hell); }
.menue__link:last-child { border-bottom: 0; }

.menue__fuss { padding-top: 20px; padding-bottom: 18px; margin-top: auto; flex-shrink: 0; }

.menue__titel {
  font-family: var(--schrift-kopf); font-weight: 700;
  font-size: 11.5px; color: #7E93C4; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 700; padding-bottom: 12px; margin: 0;
  text-align: center;
}

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

.hero__zeiten { background: var(--blau); padding: 13px 0; }
.hero__zeiten p {
  font-size: 15.5px; line-height: 1.5; color: var(--blau-hell);
}
.hero__zeiten strong { font-weight: 600; color: var(--weiss); }

@media (min-width: 1200px) {
  .hero__zeiten { padding: 17px 0; }
  .hero__zeiten p { font-size: 19px; letter-spacing: 0.01em; }
}

.hero__bild { width: 100%; height: 170px; object-fit: cover; display: block; }
@media (min-width: 768px)  { .hero__bild { height: 240px; } }
@media (min-width: 1200px) { .hero__bild { height: 300px; } }

.zaesur img {
  width: 100%; height: 400px;
  object-fit: cover; object-position: center;
  display: block;
}

.band--zaesur { margin-top: 24px; }
@media (min-width: 1200px) { .band--zaesur { margin-top: 32px; } }

.hero__claim-block { background: var(--weiss); padding: 34px 0 6px; }
@media (min-width: 1200px) { .hero__claim-block { padding: 60px 0 16px; } }

.hero__claim {
  font-size: 27px; line-height: 1.34; font-weight: 700;
  color: var(--blau);
  border-left: 4px solid var(--blau); padding-left: 16px;
  text-wrap: pretty;
}

@media (min-width: 768px) { .hero__claim { font-size: 34px; } }

@media (min-width: 1200px) {
  .hero__claim-block .wrap {
    display: grid; grid-template-columns: minmax(0, 1fr) 150px;
    gap: 56px; align-items: center;
  }
  .hero__claim {
    font-size: 41px; line-height: 1.26;
    border-left-width: 5px; padding-left: 28px;
  }
}

.betriebe { display: flex; flex-direction: column; gap: 16px; }
.betriebe img { width: 150px; height: auto; display: block; }

.hero__betriebe { display: none; }
@media (min-width: 1200px) { .hero__betriebe { display: flex; } }

.betriebe--auf-dunkel { gap: 18px; align-items: center; align-self: center; }
.betriebe--auf-dunkel img { width: 116px; }

.betriebe--reihe {
  display: grid; grid-template-columns: repeat(3, 1fr);
  align-items: center; justify-items: center; justify-content: center;
  gap: 20px; align-self: auto;
}
.betriebe--reihe img { width: 100%; max-width: 152px; }
@media (min-width: 768px) {
  .betriebe--reihe { grid-template-columns: repeat(3, 152px); gap: 48px; }
}

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

.sektion { padding: var(--abstand-sek) 0; }
.sektion--grau { background: var(--grau); }
.sektion--blau { background: var(--blau); }

.sektion__kopf { display: flex; flex-direction: column; gap: 16px; }

.h2 {
  font-size: 25px; line-height: 1.32; font-weight: 400; color: var(--blau);
}
.h2 strong { font-weight: 700; }
.h2--hell { color: var(--weiss); }

@media (min-width: 768px)  { .h2 { font-size: 30px; } }
@media (min-width: 1200px) { .h2 { font-size: 34px; line-height: 1.3; } }

.sektion__kopf--eng { gap: 6px; }
.sektion__kopf .zusatz {
  font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--blau);
}
@media (min-width: 1200px) { .sektion__kopf .zusatz { font-size: 18px; } }

.fliess { display: flex; flex-direction: column; gap: 18px; }
.fliess p { font-size: 16px; }
@media (min-width: 1200px) { .fliess p { font-size: 17px; } }

.merksatz { border-left: 4px solid var(--blau); padding: 2px 0 2px 16px; margin-top: 4px; }
.merksatz p {
  font-size: 17px; line-height: 1.55; color: var(--blau-tief);
  font-family: var(--schrift-kopf); font-weight: 500;
}
@media (min-width: 1200px) { .merksatz { padding: 4px 0 4px 22px; } .merksatz p { font-size: 19px; } }

.kachel-blau {
  background: var(--blau); padding: 22px; margin-top: 6px;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
.kachel-blau__titel {
  font-family: var(--schrift-kopf); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: #9DC4F0;
}
.kachel-blau p {
  font-size: 16px; color: var(--weiss); line-height: 1.5;
  font-family: var(--schrift-kopf); font-weight: 500;
}

/* Bilderreihen */
.bilder { display: flex; flex-direction: column; gap: 10px; padding-top: 28px; }
.bilder img { width: 100%; height: 205px; object-fit: cover; display: block; }

@media (min-width: 768px) {
  .bilder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .bilder img { height: 235px; }
}

@media (min-width: 1200px) {
  .infos__raster {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 80px; align-items: start;
  }
  .infos__bilder {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px; padding-top: 0;
  }
  .infos__bilder img { height: 235px; }
  .kachel-blau { margin-top: 0; height: 235px; padding: 28px; }
  .kachel-blau p { font-size: 17px; }
}

/* ---------------------------------------------------------- Waschschritte -- */

.schritte { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 1200px) { .schritte { gap: 20px; } }

.schritt { background: var(--weiss); border-top: 5px solid var(--schritt-farbe); }
.schritt__bild { width: 100%; height: 200px; object-fit: cover; display: block; }
.schritt__text { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.schritt__kopf { display: flex; align-items: baseline; gap: 12px; }
.schritt__nr {
  font-family: var(--schrift-kopf); font-size: 30px; font-weight: 700;
  color: var(--schritt-farbe); line-height: 1;
}
.schritt__titel { font-size: 20px; }
.schritt__fliess { display: flex; flex-direction: column; gap: 10px; }
.schritt__beschreibung { font-size: 15px; line-height: 1.62; color: var(--text-leise); }
.schritt__beschreibung strong { font-weight: 600; color: var(--text); }
.schritt__beschreibung em { font-style: italic; }

.hinweis {
  font-size: 12.5px; font-weight: 500; color: var(--blau);
  background: var(--blau-blass); padding: 7px 12px;
  align-self: flex-start; line-height: 1.45;
}
.hinweis strong { font-weight: 700; }

.schritt--1 { --schritt-farbe: var(--schritt-1); }
.schritt--2 { --schritt-farbe: var(--schritt-2); }
.schritt--3 { --schritt-farbe: var(--schritt-3); }
.schritt--4 { --schritt-farbe: var(--schritt-4); }
.schritt--5 { --schritt-farbe: var(--schritt-5); }
.schritt--3 .schritt__nr { color: var(--schritt-3-text); }

@media (min-width: 1200px) {
  .schritt {
    display: grid; grid-template-columns: 6px 294px minmax(0, 1fr);
    border-top: 0;
  }
  .schritt::before { content: ""; background: var(--schritt-farbe); }
  .schritt__bild { height: 100%; min-height: 240px; }
  .schritt__text {
    padding: 36px 40px;
    display: grid; grid-template-columns: auto 1fr;
    align-content: start; column-gap: 32px; row-gap: 0;
  }
  .schritt__kopf { display: contents; }
  .schritt__nr { grid-column: 1; grid-row: 1 / span 3; align-self: start; font-size: 52px; line-height: 0.9; }
  .schritt__titel { grid-column: 2; grid-row: 1; align-self: start; font-size: 24px; }
  .schritt__fliess { grid-column: 2; grid-row: 2; padding-top: 8px; }
  .schritt__beschreibung { font-size: 15.5px; line-height: 1.65; }
  .hinweis { grid-column: 2; grid-row: 3; justify-self: start; font-size: 13px; padding: 6px 12px; margin-top: 14px; }
}

.schritte__vorspann { display: flex; flex-direction: column; gap: 16px; padding-bottom: 28px; }
.schritte__vorspann p { font-size: 15.5px; color: var(--text-leise); }

@media (min-width: 1200px) {
  .schritte__vorspann {
    display: flex; flex-direction: row; align-items: flex-end;
    justify-content: space-between; gap: 48px; padding-bottom: 56px;
  }
  .schritte__vorspann p { font-size: 16.5px; max-width: 420px; }
  .schritte__vorspann .sektion__kopf { max-width: 620px; }
}

/* --------------------------------------------------------------- Sauger --- */

.sauger p { font-size: 16.5px; color: #D6E4F6; }
.sauger strong { color: var(--weiss); font-weight: 500; }

.sauger__bilder { display: flex; flex-direction: column; gap: 10px; padding-top: 26px; }
.sauger__bilder img { width: 100%; height: 205px; object-fit: cover; display: block; }

@media (min-width: 768px) {
  .sauger__bilder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .sauger__bilder img { height: 280px; }
}

@media (min-width: 1200px) {
  .sauger__raster {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 72px; align-items: center;
  }
  .sauger__bilder { padding-top: 0; }
  .sauger__bilder img { height: 320px; }
  .sauger p { font-size: 17.5px; }
}

/* ----------------------------------------------------------- Gutscheine --- */

.gutschein__kasten {
  background: var(--grau); padding: 28px 22px 30px;
  display: flex; flex-direction: column; gap: 16px; align-items: flex-start;
}
.gutschein__bild { width: 108px; height: auto; display: block; }
.gutschein__kasten p { font-size: 16px; color: var(--text-leise); }

@media (min-width: 1200px) {
  .gutschein__kasten {
    flex-direction: row; align-items: center; gap: 52px; padding: 52px 56px;
  }
  .gutschein__bild { width: 156px; flex-shrink: 0; }
  .gutschein__inhalt { display: flex; flex-direction: column; gap: 14px; flex-grow: 1; }
  .gutschein__kasten p { max-width: 640px; font-size: 17px; }
  .gutschein__kasten .btn { flex-shrink: 0; width: auto; }
}

/* -------------------------------------------------------------- Kontakt --- */

.kontakt__spalten { display: flex; flex-direction: column; gap: 14px; }

@media (min-width: 1200px) {
  .kontakt__spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .kontakt__links { display: flex; flex-direction: column; gap: 24px; }
}

.adresse {
  background: var(--blau-tief); padding: 26px 22px;
  display: flex; flex-direction: column; gap: 20px;
  font-style: normal;
}
.adresse h3 { font-size: 18px; color: var(--weiss); }
.adresse__zeile { display: flex; gap: 13px; align-items: flex-start; }
.adresse__zeile svg { flex-shrink: 0; margin-top: 3px; }
.adresse__name { color: var(--weiss); font-weight: 500; }
.adresse__zusatz { font-size: 14.5px; color: #A9C2E6; }

.adresse__ruf {
  display: flex; align-items: center; gap: 13px; min-height: 44px;
  color: var(--weiss); font-size: 16px;
}
.adresse__ruf:hover { color: var(--blau-hell); }
.adresse__ruf svg { flex-shrink: 0; }

@media (min-width: 1200px) { .adresse { padding: 40px; } .adresse h3 { font-size: 19px; } }

.karte { background: #E4E9F2; min-height: 240px; display: flex; flex-direction: column; }
@media (min-width: 1200px) { .karte { flex-grow: 1; min-height: 300px; } }

.karte__blocker {
  flex-grow: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 26px 20px; text-align: center;
}
.karte__blocker[hidden] { display: none; }
.karte__blocker h3 { font-size: 16px; }
.karte__blocker p { font-size: 13.5px; color: var(--text-leise); max-width: 42ch; }
.karte__blocker .btn { margin-top: 6px; }
.karte__blocker a { font-size: 13.5px; min-height: 40px; display: flex; align-items: center; }

.karte__halter { flex-grow: 1; display: flex; }
.karte__halter[hidden] { display: none; }
.karte__halter iframe { width: 100%; min-height: 240px; border: 0; display: block; }
@media (min-width: 1200px) { .karte__halter iframe { min-height: 300px; } }

.karte__route { padding-top: 10px; }
.karte__route a {
  font-size: 14.5px; font-weight: 500;
  min-height: 44px; display: inline-flex; align-items: center; gap: 7px;
}

/* ------------------------------------------------- Einwilligungsdialog --- */

.btn--zweit {
  background: var(--weiss); color: var(--blau);
  box-shadow: inset 0 0 0 2px var(--blau);
}
.btn--zweit:hover { background: var(--blau-blass); color: var(--blau); }

.btn--tief { background: var(--blau-tief); }
.btn--tief:hover { background: #0B2276; }

.btn--grau {
  background: var(--grau); color: var(--text-leise);
  box-shadow: inset 0 0 0 1px var(--grau-feld);
}
.btn--grau:hover { background: var(--grau-linie); color: var(--blau-tief); }

/* Oben mittig statt in der Bildschirmmitte, wie bei der Schwesterseite. */
.dialog.einwilligung {
  max-width: 760px;
  margin: max(16px, 6vh) auto auto;
  max-height: calc(100vh - 2 * max(16px, 6vh));
  max-height: calc(100dvh - 2 * max(16px, 6vh));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.dialog.einwilligung::backdrop { background: rgba(0, 0, 0, 0.65); }

.einwilligung__inhalt { padding: 24px var(--seitenrand) 22px; }
.einwilligung h2 { font-size: 21px; padding-bottom: 12px; }
.einwilligung h2:focus { outline: none; }
.einwilligung p { font-size: 15px; color: var(--text-leise); line-height: 1.65; }

.einwilligung__dienste {
  background: var(--grau); margin: 20px 0;
  padding: 6px 18px;
}

.schalter {
  display: grid; grid-template-columns: 26px 1fr; column-gap: 14px;
  padding: 12px 0;
}
.schalter + .schalter { border-top: 1px solid var(--grau-linie); }
.schalter input {
  width: 22px; height: 22px; margin: 3px 0 0;
  accent-color: var(--blau); cursor: pointer;
}
.schalter__text { font-size: 15px; line-height: 1.6; color: var(--text); cursor: pointer; }
.schalter__text strong { font-family: var(--schrift-kopf); color: var(--blau-tief); font-weight: 700; }
.schalter__anbieter { color: var(--text-leise); font-size: 14px; }
.schalter__mehr {
  grid-column: 2; justify-self: start;
  font-size: 14px; font-weight: 500;
  border-bottom: 1px solid currentColor; line-height: 1.5; margin-top: 2px;
}

.einwilligung__knoepfe { display: grid; gap: 10px; }
.einwilligung__knoepfe .btn { width: 100%; }

@media (min-width: 640px) {
  .einwilligung__knoepfe { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .einwilligung__knoepfe .btn { padding: 0 12px; white-space: nowrap; }
}

.einwilligung .schalter__stand { font-size: 13px; color: var(--text-leise); padding-top: 12px; }

.einwilligung__recht { display: flex; flex-wrap: wrap; gap: 4px 24px; padding-top: 14px; }
.einwilligung__recht a {
  font-size: 14px; color: var(--blau-tief); min-height: 40px;
  display: inline-flex; align-items: center;
  text-decoration: underline; text-decoration-color: var(--blau-mittel); text-underline-offset: 5px;
}

/* Formulare */
.formular { background: var(--weiss); padding: 26px 22px 28px; }
.formular h3 { font-size: 18px; padding-bottom: 20px; }
.formular__felder { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1200px) { .formular { padding: 40px; } .formular h3 { font-size: 19px; padding-bottom: 24px; } }

.feld { display: flex; flex-direction: column; gap: 7px; }
.feld > label { font-size: 13.5px; font-weight: 500; color: var(--blau-tief); }

.feld input,
.feld select,
.feld textarea {
  font-family: inherit; font-size: 16px; color: var(--text);
  border: 1px solid var(--grau-feld); background: #FAFBFD;
  padding: 0 14px; min-height: 52px; width: 100%;
  border-radius: 0; -webkit-appearance: none; appearance: none;
}
.feld textarea { padding: 14px; min-height: 130px; line-height: 1.6; resize: vertical; }
.feld select { background-image: none; }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--blau); }
.feld input:user-invalid, .feld textarea:user-invalid { border-color: var(--schritt-1); }

.zaehler { font-size: 12px; color: #9AA2B6; align-self: flex-end; }

.zustimmung { display: flex; gap: 11px; align-items: flex-start; }
.zustimmung input { width: 20px; height: 20px; flex-shrink: 0; margin: 2px 0 0; accent-color: var(--blau); }
.zustimmung label { font-size: 14px; color: var(--text-leise); }

.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.feld--fehler input,
.feld--fehler select,
.feld--fehler textarea { border-color: var(--schritt-1); }
.feld__fehler { font-size: 13px; color: var(--schritt-1); }
.zustimmung.feld--fehler label { color: var(--schritt-1); }

.formular__status {
  font-size: 14.5px; line-height: 1.55;
  padding: 14px 16px; border-left: 3px solid;
}
.formular__status[hidden] { display: none; }
.formular__status--ok     { border-color: var(--erfolg); background: var(--erfolg-blass); color: var(--erfolg-text); }
.formular__status--fehler { border-color: var(--schritt-1); background: var(--fehler-blass); color: var(--fehler-text); }
.formular__status:focus { outline: 2px solid var(--blau); outline-offset: 2px; }
/* Nach erfolgreichem Versand bleibt nur die Erfolgsmeldung stehen. */
.formular__felder--gesendet > :not([data-status]) { display: none; }

/* Während des Versands: Felder abblenden, Spinner darüber, Knopf bleibt sichtbar */
.formular__felder { position: relative; }
.formular__felder > * { transition: opacity .2s ease; }
.formular__felder[data-laeuft] > :not([type="submit"]) { opacity: .3; pointer-events: none; }
.formular__felder[data-laeuft]::after {
  content: ""; position: absolute; left: 50%; top: 45%;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border: 4px solid var(--blau-hell); border-top-color: var(--blau);
  border-radius: 50%; animation: formular-dreh .8s linear infinite;
}
@keyframes formular-dreh { to { transform: rotate(360deg); } }

.captcha__blocker {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 18px; background: var(--grau); border: 1px solid var(--grau-linie);
}
.captcha__blocker[hidden], .captcha__halter[hidden] { display: none; }
.captcha__blocker p { font-size: 13.5px; color: var(--text-leise); max-width: 46ch; }
.captcha__blocker a { font-size: 13.5px; font-weight: 500; min-height: 40px; display: inline-flex; align-items: center; }

.captcha__halter { max-width: 100%; overflow-x: auto; }

.no-js .captcha { display: none; }

.btn[disabled] { opacity: .6; cursor: default; }

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

.fuss { background: var(--blau-tief); color: var(--text-fuss); }
.fuss__inhalt { padding: 40px 0 26px; }
.fuss__bloecke { display: flex; flex-direction: column; gap: 30px; }

.fuss__recht {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding-top: 22px; border-top: 1px solid var(--fuss-linie);
  font-size: 13px; text-align: center;
}
.fuss__menue { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.fuss__menue a, .fuss__menue button {
  color: var(--text-fuss); min-height: 40px; display: flex; align-items: center;
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left;
}
.fuss__menue a:hover, .fuss__menue button:hover { color: var(--weiss); }
.fuss__copyright a { color: var(--text-fuss); }
.fuss__copyright a:hover { color: var(--weiss); }
.fuss__copyright { padding-bottom: 10px; line-height: 1.6; }

@media (min-width: 768px) {
  .fuss__recht {
    flex-direction: row; flex-wrap: wrap;
    align-items: center; gap: 26px; margin-top: 10px; text-align: left;
  }
  .fuss__menue {
    flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 26px; margin-left: auto;
  }
  .fuss__copyright { padding-bottom: 0; }
}

@media (min-width: 1200px) {
  .fuss__inhalt { padding: 64px 0 32px; }
}

/* -------------------------------------------------------------- Dialoge --- */

.dialog {
  border: 0; padding: 0; max-width: 780px; width: calc(100% - 32px);
  max-height: 86vh; background: var(--weiss); color: var(--text);
}
.dialog::backdrop { background: rgba(5, 21, 87, 0.6); }

.dialog__kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px var(--seitenrand); border-bottom: 1px solid var(--grau-linie);
  position: sticky; top: 0; background: var(--weiss);
}
.dialog__kopf h2 { font-size: 20px; color: var(--blau); font-weight: 700; }
.dialog__inhalt { padding: 24px var(--seitenrand) 32px; }
.dialog__inhalt h3 { font-size: 17px; padding: 20px 0 8px; }
.dialog__inhalt p { font-size: 15.5px; padding-bottom: 10px; }

.offenlegung { margin: 0; font-size: 15.5px; }
.offenlegung dt {
  font-family: var(--schrift-kopf); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--blau);
  padding-top: 16px;
}
.offenlegung dd { margin: 2px 0 0; line-height: 1.6; }

@media (min-width: 768px) {
  .offenlegung {
    display: grid; grid-template-columns: 210px minmax(0, 1fr);
    column-gap: 24px; align-items: baseline;
  }
  .offenlegung dt { padding-top: 12px; }
  .offenlegung dd { padding-top: 12px; }
}

/* ------------------------------------------------------ Bewegung, Druck --- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .formular__felder[data-laeuft]::after { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
}

@media print {
  .kopf, .menue, .karte, .dialog, .btn, .band { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .sektion { padding: 12pt 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}