/* ==========================================================================
   Layout und Komponenten — GERECHT24
   Mobil zuerst. Breakpoints: 480 / 768 / 1024 / 1240.
   ========================================================================== */

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

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

* {
  margin: 0;
}

/* Eigene display-Werte wie grid oder flex sind spezifischer als die
   Browserregel für [hidden]. Ohne diese Zeile bleiben ausgeblendete
   Bereiche sichtbar, etwa der Rückrufzeitraum im Kontaktformular. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  min-height: 100dvh;
  background: var(--farbe-grund);
  color: var(--farbe-text);
  font-family: var(--schrift-text);
  font-size: var(--groesse-md);
  line-height: var(--zeile-weit);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;

  /* Sicherung gegen Woerter, die breiter sind als ihre Spalte. Greift
     erst, wenn ein Wort ohnehin nicht mehr passt, und aendert das
     Schriftbild sonst nicht. */
  overflow-wrap: break-word;
}

/* Deutsche Komposita sind laenger als eine schmale Spalte:
   "Berufshaftpflichtversicherung" ist bei 320 px breiter als der ganze
   Textbereich und schob die Seite nach rechts. Auf dem Handy wird
   deshalb getrennt, auf breiten Schirmen ist dafuer kein Anlass. */
@media (max-width: 767px) {
  body {
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}

/* Die Flächen, die der Browser selbst zeichnet, gehören auch zum
   Erscheinungsbild: Markierung, Schreibmarke, Ankreuzfelder. */
::selection {
  background: #cddbf5;
  color: var(--farbe-primaer-tief);
}

:root {
  accent-color: var(--farbe-primaer);
  caret-color: var(--farbe-primaer);
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--farbe-primaer);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

a:hover {
  color: var(--farbe-primaer-hell);
}

h1,
h2,
h3,
h4 {
  font-family: var(--schrift-titel);
  font-weight: 600;
  line-height: var(--zeile-eng);
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--farbe-text);
}

h1 {
  font-size: clamp(2.125rem, 5.5vw, var(--groesse-5xl));
}

h2 {
  font-size: clamp(1.75rem, 3.6vw, var(--groesse-3xl));
}

h3 {
  font-size: var(--groesse-xl);
}

p {
  text-wrap: pretty;
}

ul,
ol {
  padding: 0;
}

:target {
  scroll-margin-top: 6rem;
}

/* --- Fokus: sichtbar, nie entfernt --------------------------------------- */

:focus-visible {
  outline: 3px solid var(--farbe-fokus);
  outline-offset: 3px;
  border-radius: 3px;
}

.sprunglink {
  position: absolute;
  left: var(--abstand-4);
  top: var(--abstand-4);
  z-index: var(--z-sprunglink);
  padding: var(--abstand-3) var(--abstand-5);
  background: var(--farbe-primaer);
  color: var(--farbe-auf-primaer);
  border-radius: var(--radius-feld);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(calc(-100% - var(--abstand-6)));
  transition: transform var(--dauer-normal) var(--kurve);
}

.sprunglink:focus-visible {
  transform: translateY(0);
  color: var(--farbe-auf-primaer);
}

/* --- Hilfsklassen -------------------------------------------------------- */

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

.huelle {
  width: 100%;
  max-width: var(--breite-max);
  margin-inline: auto;
  padding-inline: var(--seite-x);
}

.abschnitt {
  padding-block: var(--abschnitt-y);
}

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

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

.mass {
  max-width: var(--mass-text);
}

.blei {
  font-size: var(--groesse-lg);
  color: var(--farbe-text-gedaempft);
}

.abschnitt__kopf {
  max-width: var(--mass-text);
  margin-bottom: var(--abstand-8);
}

.abschnitt__kopf p {
  margin-top: var(--abstand-4);
  color: var(--farbe-text-gedaempft);
  font-size: var(--groesse-lg);
}

/* Abstands- und Textwerkzeuge, damit im HTML keine style-Attribute stehen */
.raum-oben-4 { margin-top: var(--abstand-4); }
.raum-oben-5 { margin-top: var(--abstand-5); }
.raum-oben-6 { margin-top: var(--abstand-6); }
.raum-oben-8 { margin-top: var(--abstand-8); }
.raum-unten-5 { margin-bottom: var(--abstand-5); }
.raum-unten-6 { margin-bottom: var(--abstand-6); }
.raum-unten-8 { margin-bottom: var(--abstand-8); }
.text-schwach { color: var(--farbe-text-schwach); }
.text-normal { font-size: var(--groesse-md); }

/* --- Knoepfe ------------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-2);
  min-height: 48px;
  padding: var(--abstand-3) var(--abstand-6);
  border: 1px solid transparent;
  border-radius: var(--radius-knopf);
  font-family: var(--schrift-text);
  font-size: var(--groesse-md);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dauer-schnell) var(--kurve),
    border-color var(--dauer-schnell) var(--kurve),
    color var(--dauer-schnell) var(--kurve),
    transform var(--dauer-schnell) var(--kurve),
    box-shadow var(--dauer-schnell) var(--kurve);
}

.knopf:active {
  transform: translateY(1px);
}

.knopf--primaer {
  background: var(--farbe-akzent);
  color: var(--farbe-auf-akzent);
  box-shadow: var(--schatten-zart);
}

.knopf--primaer:hover {
  background: var(--farbe-akzent-tief);
  color: var(--farbe-auf-akzent);
  box-shadow: var(--schatten-karte);
}

.knopf--zweit {
  background: transparent;
  border-color: var(--farbe-primaer);
  color: var(--farbe-primaer);
}

.knopf--zweit:hover {
  background: var(--farbe-primaer);
  color: var(--farbe-auf-primaer);
}

.knopf--hell {
  background: var(--farbe-flaeche);
  color: var(--farbe-primaer);
}

.knopf--hell:hover {
  background: var(--farbe-flaeche-gedaempft);
  color: var(--farbe-primaer-tief);
}

.knopf--umriss-hell {
  background: transparent;
  border-color: rgb(255 255 255 / 0.45);
  color: #fff;
}

.knopf--umriss-hell:hover {
  background: rgb(255 255 255 / 0.12);
  border-color: #fff;
  color: #fff;
}

.knopf[disabled],
.knopf[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.knopf__symbol {
  flex: none;
  width: 20px;
  height: 20px;
}

.knopf-gruppe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-3);
}

/* Textlink mit Pfeil */
.pfeillink {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
  font-weight: 700;
  text-decoration: none;
}

.pfeillink::after {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  mask: var(--symbol-pfeil) center / contain no-repeat;
  transition: transform var(--dauer-schnell) var(--kurve);
}

.pfeillink:hover::after {
  transform: translateX(3px);
}

:root {
  --symbol-pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* --- Kopfbereich --------------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: var(--z-kopf);
  background: rgb(255 255 255 / 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--farbe-rahmen-zart);
}

@supports not (backdrop-filter: blur(4px)) {
  .kopf {
    background: var(--farbe-flaeche);
  }
}

.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-4);
  height: 64px;
}

.marke {
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  min-height: 44px; /* Tap-Ziel */
  text-decoration: none;
  color: var(--farbe-text);
}

.marke__zeichen {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-feld);
  background: var(--farbe-primaer);
  color: var(--farbe-auf-primaer);
  font-family: var(--schrift-titel);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
}

.marke__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.marke__name {
  font-family: var(--schrift-titel);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.marke__zusatz {
  font-size: var(--groesse-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--farbe-text-schwach);
}

/* Auf schmalen Schirmen bricht der Zusatz um und macht den Kopf hoch. */
@media (max-width: 479px) {
  .kopf .marke__zusatz {
    display: none;
  }
}

/* Bei 320 px konkurrieren Wortmarke, Sprachumschalter und Menüschalter um
   dieselbe Zeile und die Zeile lief über. Die Bedienelemente behalten ihre
   44 px, die Marke gibt nach und schneidet notfalls mit Auslassungspunkten
   ab, statt den Kopfbereich aus der Seite zu schieben. */
@media (max-width: 400px) {
  .kopf__innen {
    gap: var(--abstand-2);
  }

  .kopf__werkzeuge {
    gap: var(--abstand-2);
  }

  .marke {
    gap: var(--abstand-2);
    min-width: 0;
  }

  .marke__text {
    min-width: 0;
  }

  /* Lieber das Zeichen weglassen als den Namen abschneiden: das § ist
     Schmuck und steht ohnehin im Fussbereich, der Name ist die Marke.
     Die Auslassungspunkte bleiben als letzte Sicherung. */
  .kopf .marke__zeichen {
    display: none;
  }

  .marke__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.kopf__werkzeuge {
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
}

/* Navigation: mobil Schublade, ab 1024 px eine Zeile */

.navschalter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--farbe-rahmen);
  border-radius: var(--radius-feld);
  color: var(--farbe-primaer);
  cursor: pointer;
}

.navschalter:hover {
  background: var(--farbe-flaeche-gedaempft);
}

.navschalter svg {
  width: 24px;
  height: 24px;
}

.navschalter__schliessen {
  display: none;
}

.navschalter[aria-expanded="true"] .navschalter__oeffnen {
  display: none;
}

.navschalter[aria-expanded="true"] .navschalter__schliessen {
  display: block;
}

/* Absolut statt fest positioniert: der Kopfbereich ist wegen
   position:sticky und backdrop-filter selbst der Bezugsrahmen, eine
   feste Positionierung würde deshalb auf Kopfhöhe eingesperrt bleiben. */
.nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: calc(100dvh - var(--kopfhoehe, 64px));
  z-index: var(--z-schublade);
  display: flex;
  flex-direction: column;
  padding: var(--abstand-5) var(--seite-x)
    calc(var(--abstand-9) + env(safe-area-inset-bottom));
  background: var(--farbe-flaeche);
  border-bottom: 1px solid var(--farbe-rahmen-zart);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  /* visibility ohne Dauer, aber verzögert: beim Schliessen erst nach dem
     Ausblenden verbergen, beim Öffnen sofort sichtbar. Sonst greift
     focus() nicht, weil ein unsichtbares Element keinen Fokus annimmt. */
  transition: opacity var(--dauer-normal) var(--kurve),
    transform var(--dauer-normal) var(--kurve),
    visibility 0s linear var(--dauer-normal);
}

.nav[data-offen="true"] {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--dauer-normal) var(--kurve),
    transform var(--dauer-normal) var(--kurve), visibility 0s linear 0s;
}

.nav__liste {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-1);
  list-style: none;
  margin: 0;
}

.nav__link {
  display: block;
  padding: var(--abstand-4) var(--abstand-3);
  border-radius: var(--radius-feld);
  font-size: var(--groesse-lg);
  font-weight: 700;
  text-decoration: none;
  color: var(--farbe-text);
}

.nav__link:hover {
  background: var(--farbe-flaeche-gedaempft);
  color: var(--farbe-primaer);
}

.nav__link[aria-current="page"] {
  color: var(--farbe-primaer);
  background: var(--farbe-flaeche-gedaempft);
}

.nav__fuss {
  margin-top: var(--abstand-6);
  padding-top: var(--abstand-6);
  border-top: 1px solid var(--farbe-rahmen-zart);
  display: grid;
  gap: var(--abstand-3);
}

.nav__fuss .knopf {
  width: 100%;
}

/* Sprachumschalter */

.sprachen {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  gap: 2px;
  background: var(--farbe-flaeche-gedaempft);
  border-radius: var(--radius-knopf);
}

.sprachen__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: var(--abstand-2);
  border-radius: var(--radius-knopf);
  font-size: var(--groesse-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--farbe-text-gedaempft);
}

.sprachen__link:hover {
  color: var(--farbe-primaer);
}

.sprachen__link[aria-current="true"] {
  background: var(--farbe-flaeche);
  color: var(--farbe-primaer);
  box-shadow: var(--schatten-zart);
}

.kopf__kontakt {
  display: none;
}

@media (min-width: 1024px) {
  .kopf__innen {
    height: 72px;
  }

  .navschalter {
    display: none;
  }

  .nav {
    position: static;
    inset: auto;
    height: auto;
    flex-direction: row;
    align-items: center;
    padding: 0;
    background: none;
    border-bottom: 0;
    overflow: visible;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .nav__liste {
    flex-direction: row;
    align-items: center;
    gap: var(--abstand-1);
  }

  .nav__link {
    padding: var(--abstand-2) var(--abstand-3);
    font-size: var(--groesse-sm);
    white-space: nowrap;
  }

  .nav__link[aria-current="page"] {
    background: transparent;
    box-shadow: inset 0 -2px 0 var(--farbe-akzent);
    border-radius: 0;
  }

  .nav__fuss {
    display: none;
  }

  .kopf__kontakt {
    display: inline-flex;
  }
}

/* --- Kopfbild ------------------------------------------------------------ */

.kopfbild {
  position: relative;
  padding-top: var(--abstand-8);
  padding-bottom: var(--abstand-9);
  background: linear-gradient(180deg, #fff 0%, var(--farbe-grund) 100%);
  overflow: hidden;
}

.kopfbild__raster {
  display: grid;
  gap: var(--abstand-7);
  align-items: center;
}

.kopfbild__titel {
  margin-bottom: var(--abstand-5);
}

.kopfbild__text {
  max-width: 46ch;
  font-size: var(--groesse-lg);
  color: var(--farbe-text-gedaempft);
}

.kopfbild__aktionen {
  margin-top: var(--abstand-7);
}

.kopfbild__bild {
  position: relative;
  border-radius: var(--radius-bild);
  overflow: hidden;
  box-shadow: var(--schatten-hoch);
  aspect-ratio: 4 / 3;
}

.kopfbild__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 1024px) {
  .kopfbild {
    padding-top: var(--abstand-9);
    padding-bottom: var(--abstand-10);
  }

  /* Asymmetrisch, nicht 50/50 */
  .kopfbild__raster {
    grid-template-columns: 1.08fr 0.92fr;
    gap: var(--abstand-9);
  }

  .kopfbild__bild {
    aspect-ratio: 5 / 4;
    transform: translateY(var(--abstand-4));
  }
}

/* Schlanke Seitenkoepfe fuer Unterseiten */

.seitenkopf {
  padding-block: var(--abstand-8) var(--abstand-7);
  background: var(--farbe-flaeche-tief);
  color: #fff;
}

.seitenkopf h1 {
  color: #fff;
  max-width: 20ch;
}

.seitenkopf p {
  margin-top: var(--abstand-4);
  max-width: 60ch;
  color: var(--farbe-text-auf-tief);
  font-size: var(--groesse-lg);
}

.brotkrumen {
  margin-bottom: var(--abstand-4);
  font-size: var(--groesse-sm);
  color: var(--farbe-text-auf-tief);
}

.brotkrumen ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-2);
  list-style: none;
  margin: 0;
}

.brotkrumen a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #fff;
  text-decoration: underline;
}

.brotkrumen li {
  display: flex;
  align-items: center;
}

.brotkrumen li + li::before {
  content: "/";
  margin-right: var(--abstand-2);
  color: rgb(255 255 255 / 0.5);
}

/* --- Bento-Raster der Schwerpunkte --------------------------------------- */

.bento {
  display: grid;
  gap: var(--abstand-4);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
}

.bentofeld {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Alle Kacheln beginnen oben. Bild- und Farbkacheln schieben ihren Titel
     per margin-top:auto nach unten, wo der Verlauf die Schrift traegt. So
     bleibt der Pfeil in jeder Kachel das letzte Element. */
  justify-content: flex-start;
  min-height: 170px;
  padding: var(--abstand-5);
  border: 1px solid var(--farbe-rahmen-zart);
  border-radius: var(--radius-karte);
  background: var(--farbe-flaeche);
  overflow: hidden;
  transition: border-color var(--dauer-schnell) var(--kurve),
    box-shadow var(--dauer-schnell) var(--kurve),
    transform var(--dauer-schnell) var(--kurve);
}

.bentofeld:hover {
  border-color: var(--farbe-primaer);
  box-shadow: var(--schatten-karte);
  transform: translateY(-2px);
}

.bentofeld__titel {
  font-size: var(--groesse-xl);
  margin-bottom: var(--abstand-2);
}

.bentofeld__titel a {
  color: inherit;
  text-decoration: none;
}

/* Ganze Kachel klickbar, Fokus bleibt am Link */
.bentofeld__titel a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.bentofeld:focus-within {
  border-color: var(--farbe-primaer);
}

.bentofeld__text {
  font-size: var(--groesse-sm);
  color: var(--farbe-text-gedaempft);
  line-height: var(--zeile-normal);
}

/* Die ganze Kachel ist ein Link, zeigte das aber nur beim Ueberfahren.
   Der Pfeil benennt das Ziel dauerhaft und setzt zugleich den unteren
   Rand: kurze Beschreibungen lassen sonst ein Drittel der Kachel leer,
   weil die Bildkachel daneben die Zeilenhoehe vorgibt. */
.bentofeld::after {
  content: "";
  flex: none;
  margin-top: auto;
  z-index: 2;
  width: 20px;
  height: 20px;
  background: var(--farbe-primaer);
  mask: var(--symbol-pfeil) center / contain no-repeat;
  opacity: 0.45;
  transition: opacity var(--dauer-schnell) var(--kurve),
    transform var(--dauer-schnell) var(--kurve);
}

.bentofeld:hover::after,
.bentofeld:focus-within::after {
  opacity: 1;
  transform: translateX(3px);
}

.bentofeld--bild .bentofeld__titel,
.bentofeld--tief .bentofeld__titel {
  margin-top: auto;
}

.bentofeld--bild::after,
.bentofeld--tief::after {
  margin-top: var(--abstand-3);
  background: #fff;
  opacity: 0.8;
}

.bentofeld--bild {
  min-height: 240px;
  border-color: transparent;
}

.bentofeld--bild img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Muss ueber dem Bild liegen, sonst ist die Schrift nicht lesbar. */
.bentofeld--bild::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgb(9 18 44 / 0.2) 0%,
    rgb(9 18 44 / 0.68) 42%,
    rgb(9 18 44 / 0.94) 100%
  );
}

/* Kein position:relative hier: die Kacheln sind Flex-Container, deshalb
   greift z-index auch ohne Positionierung. Bliebe der Titel positioniert,
   wuerde die Klickflaeche (a::after) auf den Titel schrumpfen statt die
   ganze Kachel abzudecken. */
.bentofeld--bild .bentofeld__titel,
.bentofeld--bild .bentofeld__text {
  z-index: 2;
  color: #fff;
}

.bentofeld--bild .bentofeld__text {
  color: rgb(255 255 255 / 0.92);
}

.bentofeld--tief {
  background: var(--farbe-flaeche-tief);
  border-color: transparent;
}

.bentofeld--tief .bentofeld__titel {
  color: #fff;
}

.bentofeld--tief .bentofeld__text {
  color: var(--farbe-text-auf-tief);
}

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

@media (min-width: 1024px) {
  /* 7 Inhalte, 7 Kacheln, keine Luecke: 3+3 / 2+2+2 / 3+3 */
  .bento {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--abstand-4);
  }

  .bento > :nth-child(1),
  .bento > :nth-child(2),
  .bento > :nth-child(6),
  .bento > :nth-child(7) {
    grid-column: span 3;
  }

  .bento > :nth-child(3),
  .bento > :nth-child(4),
  .bento > :nth-child(5) {
    grid-column: span 2;
  }
}

/* --- Geteilter Abschnitt (Text + Bild) ----------------------------------- */

.geteilt {
  display: grid;
  gap: var(--abstand-7);
  align-items: center;
}

.geteilt__bild {
  border-radius: var(--radius-bild);
  overflow: hidden;
  box-shadow: var(--schatten-karte);
  aspect-ratio: 3 / 2;
}

/* Ein hochformatiger Platzhalter darf nicht am 3:2-Rahmen abgeschnitten
   werden, sonst fehlt die Massangabe. */
.geteilt__bild:has(.platzhalter) {
  aspect-ratio: auto;
  box-shadow: none;
}

.geteilt__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.geteilt__text > * + * {
  margin-top: var(--abstand-4);
}

@media (min-width: 900px) {
  .geteilt {
    grid-template-columns: 0.95fr 1.05fr;
    gap: var(--abstand-9);
  }

  .geteilt--bild-links .geteilt__bild {
    order: -1;
  }
}

/* --- Ablauf -------------------------------------------------------------- */

.ablauf {
  display: grid;
  gap: var(--abstand-5);
  list-style: none;
  margin: 0;
}

.ablauf__punkt {
  position: relative;
  padding-top: var(--abstand-5);
  border-top: 2px solid var(--farbe-primaer);
}

.ablauf__titel {
  font-size: var(--groesse-xl);
  margin-bottom: var(--abstand-2);
}

.ablauf__text {
  color: var(--farbe-text-gedaempft);
  font-size: var(--groesse-sm);
  line-height: var(--zeile-normal);
}

@media (min-width: 768px) {
  .ablauf {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--abstand-6);
  }
}

/* --- Aufklappbereiche (FAQ und Rechtsgebiete) ---------------------------- */

/* Ohne eigenes Mass laufen die Zeilen ueber die volle Inhaltsbreite: die
   Frage steht links, das Zeichen fast tausend Pixel weiter rechts, und die
   Antwort darunter bricht schon bei 68 Zeichen um. Die Gruppe bekommt
   deshalb eine Breite, in der Linie, Frage und Zeichen zusammengehoeren. */
.klappliste {
  max-width: 54rem;
}

.klapp {
  border-bottom: 1px solid var(--farbe-rahmen);
}

.klapp:first-of-type {
  border-top: 1px solid var(--farbe-rahmen);
}

.klapp__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-4);
  min-height: 56px;
  padding-block: var(--abstand-4);
  cursor: pointer;
  list-style: none;
  font-family: var(--schrift-titel);
  font-size: var(--groesse-lg);
  font-weight: 600;
  color: var(--farbe-text);
}

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

.klapp__kopf:hover {
  color: var(--farbe-primaer);
}

.klapp__kopf:focus-visible {
  outline: 3px solid var(--farbe-fokus);
  outline-offset: -3px;
}

.klapp__zeichen {
  flex: none;
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid currentColor;
}

.klapp__zeichen::before,
.klapp__zeichen::after {
  content: "";
  position: absolute;
  inset: 50% 4px auto 4px;
  height: 2px;
  background: currentColor;
  transform: translateY(-50%);
  transition: transform var(--dauer-normal) var(--kurve),
    opacity var(--dauer-normal) var(--kurve);
}

.klapp__zeichen::after {
  transform: translateY(-50%) rotate(90deg);
}

.klapp[open] .klapp__zeichen::after {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}

.klapp__inhalt {
  padding-bottom: var(--abstand-5);
  max-width: var(--mass-text);
  color: var(--farbe-text-gedaempft);
}

.klapp__inhalt > * + * {
  margin-top: var(--abstand-3);
}

/* --- Rechtsgebiete: Suche und Gruppen ------------------------------------ */

.suche {
  position: relative;
  max-width: 520px;
  margin-bottom: var(--abstand-7);
}

.suche__feld {
  width: 100%;
  min-height: 52px;
  padding: var(--abstand-3) var(--abstand-5) var(--abstand-3) 3rem;
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rahmen);
  border-radius: var(--radius-knopf);
}

.suche__feld::placeholder {
  color: var(--farbe-text-schwach);
}

.suche__feld:focus-visible {
  outline: 3px solid var(--farbe-fokus);
  outline-offset: 2px;
  border-color: var(--farbe-primaer);
}

.suche__symbol {
  position: absolute;
  left: 1rem;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  color: var(--farbe-text-schwach);
  pointer-events: none;
}

.suche__stand {
  margin-top: var(--abstand-3);
  font-size: var(--groesse-sm);
  color: var(--farbe-text-gedaempft);
}

.gebiet__liste {
  display: grid;
  gap: var(--abstand-2) var(--abstand-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.gebiet__liste li {
  padding-left: 1.25rem;
  position: relative;
  font-size: var(--groesse-sm);
  color: var(--farbe-text-gedaempft);
}

.gebiet__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--farbe-akzent);
}

.gebiet__liste mark {
  background: #fde68a;
  color: var(--farbe-text);
  border-radius: 3px;
  padding-inline: 2px;
}

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

.klapp[hidden] {
  display: none;
}

.leerzustand {
  padding: var(--abstand-8) var(--abstand-5);
  text-align: center;
  border: 1px dashed var(--farbe-rahmen);
  border-radius: var(--radius-karte);
  background: var(--farbe-flaeche);
  color: var(--farbe-text-gedaempft);
}

.leerzustand strong {
  display: block;
  margin-bottom: var(--abstand-2);
  font-family: var(--schrift-titel);
  font-size: var(--groesse-xl);
  color: var(--farbe-text);
}

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

.karten {
  display: grid;
  gap: var(--abstand-4);
  list-style: none;
  margin: 0;
}

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

.karte {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-3);
  padding: var(--abstand-5);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rahmen-zart);
  border-radius: var(--radius-karte);
}

.karte__titel {
  font-size: var(--groesse-lg);
}

.karte__text {
  font-size: var(--groesse-sm);
  color: var(--farbe-text-gedaempft);
  line-height: var(--zeile-normal);
}

.karte__meta {
  margin-top: auto;
  padding-top: var(--abstand-3);
  font-size: var(--groesse-xs);
  color: var(--farbe-text-schwach);
  font-variant-numeric: tabular-nums;
}

/* Downloadkarte */
.download {
  display: flex;
  gap: var(--abstand-4);
  align-items: flex-start;
  padding: var(--abstand-5);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rahmen-zart);
  border-radius: var(--radius-karte);
  transition: border-color var(--dauer-schnell) var(--kurve),
    box-shadow var(--dauer-schnell) var(--kurve);
}

.download:hover {
  border-color: var(--farbe-primaer);
  box-shadow: var(--schatten-karte);
}

.download__symbol {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-feld);
  background: var(--farbe-flaeche-gedaempft);
  color: var(--farbe-primaer);
}

.download__symbol svg {
  width: 22px;
  height: 22px;
}

.download__titel {
  font-size: var(--groesse-lg);
  margin-bottom: var(--abstand-2);
}

.download__titel a {
  text-decoration: none;
}

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

.download__text {
  font-size: var(--groesse-sm);
  color: var(--farbe-text-gedaempft);
  line-height: var(--zeile-normal);
}

.download__meta {
  margin-top: var(--abstand-3);
  font-size: var(--groesse-xs);
  color: var(--farbe-text-schwach);
  font-variant-numeric: tabular-nums;
}

/* Hinweiskasten */
/* Den Akzent traegt das Zeichen, nicht ein Balken an der Kante: ein
   4 px starker Farbstreifen ist Dekoration und faellt aus dem System,
   in dem jede andere Flaeche einen 1-px-Rahmen hat. */
.hinweis {
  display: flex;
  gap: var(--abstand-4);
  padding: var(--abstand-5);
  border-radius: var(--radius-karte);
  background: var(--farbe-flaeche-gedaempft);
  border: 1px solid var(--farbe-rahmen);
}

.hinweis__symbol {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--farbe-akzent);
}

.hinweis__text {
  font-size: var(--groesse-sm);
  color: var(--farbe-text-gedaempft);
}

.hinweis__text strong {
  color: var(--farbe-text);
}

/* Platzhalterrahmen fuer noch fehlende Bilder */
.platzhalter {
  display: grid;
  place-items: center;
  gap: var(--abstand-2);
  padding: var(--abstand-6);
  text-align: center;
  border: 2px dashed var(--farbe-rahmen);
  border-radius: var(--radius-bild);
  background: repeating-linear-gradient(
    135deg,
    var(--farbe-flaeche) 0 10px,
    var(--farbe-flaeche-gedaempft) 10px 20px
  );
  color: var(--farbe-text-schwach);
}

.platzhalter svg {
  width: 34px;
  height: 34px;
  color: var(--farbe-text-schwach);
}

.platzhalter__titel {
  font-family: var(--schrift-text);
  font-size: var(--groesse-sm);
  font-weight: 700;
  color: var(--farbe-text-gedaempft);
}

.platzhalter__mass {
  font-size: var(--groesse-xs);
  font-variant-numeric: tabular-nums;
}

.platzhalter--portraet {
  aspect-ratio: 4 / 5;
}

/* --- Kontaktband --------------------------------------------------------- */

.band {
  background: var(--farbe-flaeche-tief);
  color: #fff;
}

.band__innen {
  display: grid;
  gap: var(--abstand-6);
  align-items: center;
}

.band h2 {
  color: #fff;
}

.band p {
  margin-top: var(--abstand-4);
  color: var(--farbe-text-auf-tief);
  font-size: var(--groesse-lg);
  max-width: 52ch;
}

@media (min-width: 900px) {
  .band__innen {
    grid-template-columns: 1.3fr 0.7fr;
    gap: var(--abstand-9);
  }

  .band__aktionen {
    justify-self: end;
    display: grid;
    gap: var(--abstand-3);
  }

  .band__aktionen .knopf {
    width: 100%;
  }
}

/* --- Kontaktdaten und Karte ---------------------------------------------- */

.kontakt__raster {
  display: grid;
  gap: var(--abstand-8);
  align-items: start;
}

@media (min-width: 950px) {
  .kontakt__raster {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--abstand-9);
  }
}

.datenliste {
  display: grid;
  gap: var(--abstand-4);
  margin: 0;
}

/* Eine Definitionsliste darf zwischen dl und dt/dd nur ein div haben, und
   in diesem div darf nichts anderes stehen. Das Zeichen sitzt deshalb im
   dt und wird aus dem Textfluss genommen, statt als eigenes Geschwister
   neben dt und dd zu stehen. Das Bild bleibt dasselbe. */
.datenliste__zeile {
  position: relative;
  padding-left: calc(40px + var(--abstand-4));
  padding-bottom: var(--abstand-4);
  border-bottom: 1px solid var(--farbe-rahmen-zart);
}

.datenliste__zeile:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.datenliste__symbol {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-feld);
  background: var(--farbe-flaeche-gedaempft);
  color: var(--farbe-primaer);
}

.datenliste__symbol svg {
  width: 20px;
  height: 20px;
}

.datenliste__begriff {
  font-size: var(--groesse-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--farbe-text-schwach);
}

.datenliste__wert {
  margin-top: 2px;
  font-size: var(--groesse-lg);
  line-height: var(--zeile-normal);
  font-variant-numeric: tabular-nums;
}

/* Anrufen und Mailen sind die wichtigsten Handgriffe auf dieser Seite,
   deshalb bekommen sie ein volles Tap-Ziel. */
.datenliste__wert a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  font-weight: 700;
}

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

.sprechzeit + .sprechzeit {
  margin-top: var(--abstand-2);
}

.sprechzeit__tag {
  display: block;
}

/* Kartenkachel */

.kartenfeld {
  position: relative;
  display: block;
  border-radius: var(--radius-karte);
  overflow: hidden;
  box-shadow: var(--schatten-karte);
  text-decoration: none;
  transition: box-shadow var(--dauer-schnell) var(--kurve);
}

.kartenfeld:hover {
  box-shadow: var(--schatten-hoch);
}

.kartenfeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 5 / 3;
}

.kartenfeld__leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-4);
  padding: var(--abstand-4) var(--abstand-5);
  background: var(--farbe-flaeche);
  border-top: 1px solid var(--farbe-rahmen-zart);
}

.kartenfeld__ziel {
  font-weight: 700;
  color: var(--farbe-primaer);
  line-height: var(--zeile-normal);
}

.kartenfeld__zusatz {
  display: block;
  font-weight: 400;
  font-size: var(--groesse-sm);
  color: var(--farbe-text-gedaempft);
}

.kartenfeld__pfeil {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--farbe-primaer);
  color: #fff;
}

.kartenfeld__pfeil svg {
  width: 20px;
  height: 20px;
}

.kartenquelle {
  margin-top: var(--abstand-2);
  font-size: var(--groesse-2xs);
  color: var(--farbe-text-schwach);
}

/* --- Formular ------------------------------------------------------------ */

/* Entweder Rahmen oder Schatten, nicht beides: ein 1-px-Rahmen unter
   einem weichen Schatten laesst die Flaeche flach und angeklebt wirken. */
.formular {
  display: grid;
  gap: var(--abstand-5);
  padding: var(--abstand-6);
  background: var(--farbe-flaeche);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten-karte);
}

@media (min-width: 600px) {
  .formular {
    padding: var(--abstand-7);
  }
}

.feldpaar {
  display: grid;
  gap: var(--abstand-5);
}

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

.feld {
  display: grid;
  gap: var(--abstand-2);
  min-width: 0;
  /* Nebeneinanderstehende Felder sind unterschiedlich hoch, sobald eines
     eine Hilfszeile trägt. Ohne align-content dehnen sich die Rasterzeilen
     des kürzeren Feldes mit, und sein Eingabefeld wird höher als das
     danebenliegende. Hier bleiben alle Zeilen auf natürlicher Höhe. */
  align-content: start;
}

.feld__marke {
  font-size: var(--groesse-sm);
  font-weight: 700;
  color: var(--farbe-text);
}

.feld__pflicht {
  color: var(--farbe-akzent);
}

.feld__hilfe {
  font-size: var(--groesse-xs);
  color: var(--farbe-text-gedaempft);
  line-height: var(--zeile-normal);
}

.feld__eingabe {
  width: 100%;
  min-height: 48px;
  padding: var(--abstand-3) var(--abstand-4);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  border: 1px solid var(--farbe-rahmen);
  border-radius: var(--radius-feld);
  transition: border-color var(--dauer-schnell) var(--kurve),
    box-shadow var(--dauer-schnell) var(--kurve);
}

textarea.feld__eingabe {
  min-height: 150px;
  resize: vertical;
  line-height: var(--zeile-normal);
}

select.feld__eingabe {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 20px;
  padding-right: 2.75rem;
}

.feld__eingabe::placeholder {
  color: var(--farbe-text-schwach);
}

.feld__eingabe:hover {
  border-color: var(--farbe-text-schwach);
}

.feld__eingabe:focus-visible {
  outline: 3px solid var(--farbe-fokus);
  outline-offset: 1px;
  border-color: var(--farbe-primaer);
}

.feld__eingabe[aria-invalid="true"] {
  border-color: var(--farbe-fehler);
  background: var(--farbe-fehler-grund);
}

.feld__fehler {
  display: none;
  align-items: flex-start;
  gap: var(--abstand-2);
  font-size: var(--groesse-sm);
  font-weight: 700;
  color: var(--farbe-fehler);
  line-height: var(--zeile-normal);
}

.feld__fehler svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.feld[data-fehler="true"] .feld__fehler {
  display: flex;
}

/* Auswahlgruppe */

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

.wahlgruppe__titel {
  padding: 0;
  margin-bottom: var(--abstand-3);
  font-size: var(--groesse-sm);
  font-weight: 700;
}

.wahlliste {
  display: grid;
  gap: var(--abstand-3);
}

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

.wahl {
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  min-height: 48px;
  padding: var(--abstand-3) var(--abstand-4);
  border: 1px solid var(--farbe-rahmen);
  border-radius: var(--radius-feld);
  cursor: pointer;
  transition: border-color var(--dauer-schnell) var(--kurve),
    background-color var(--dauer-schnell) var(--kurve);
}

.wahl:hover {
  border-color: var(--farbe-primaer);
  background: var(--farbe-flaeche-gedaempft);
}

.wahl:has(input:checked) {
  border-color: var(--farbe-primaer);
  background: var(--farbe-flaeche-gedaempft);
  box-shadow: inset 0 0 0 1px var(--farbe-primaer);
}

.wahl:has(input:focus-visible) {
  outline: 3px solid var(--farbe-fokus);
  outline-offset: 2px;
}

.wahl input {
  flex: none;
  width: 20px;
  height: 20px;
  accent-color: var(--farbe-primaer);
  cursor: pointer;
}

.wahl span {
  font-size: var(--groesse-sm);
  line-height: var(--zeile-normal);
}

/* Zustimmung */

.zustimmung {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-3);
  padding: var(--abstand-4);
  border: 1px solid var(--farbe-rahmen);
  border-radius: var(--radius-feld);
  cursor: pointer;
}

.zustimmung:hover {
  background: var(--farbe-flaeche-gedaempft);
}

.zustimmung:has(input:focus-visible) {
  outline: 3px solid var(--farbe-fokus);
  outline-offset: 2px;
}

.feld[data-fehler="true"] .zustimmung {
  border-color: var(--farbe-fehler);
  background: var(--farbe-fehler-grund);
}

.zustimmung input {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  accent-color: var(--farbe-primaer);
  cursor: pointer;
}

.zustimmung span {
  font-size: var(--groesse-sm);
  line-height: var(--zeile-normal);
  color: var(--farbe-text-gedaempft);
}

/* Falle fuer Werbeprogramme, fuer Menschen unsichtbar */
.falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Rueckmeldung */

.rueckmeldung {
  display: none;
  gap: var(--abstand-3);
  align-items: flex-start;
  padding: var(--abstand-5);
  border-radius: var(--radius-feld);
  font-size: var(--groesse-sm);
  line-height: var(--zeile-normal);
}

.rueckmeldung[data-art="erfolg"],
.rueckmeldung[data-art="fehler"] {
  display: flex;
}

.rueckmeldung[data-art="erfolg"] {
  background: var(--farbe-erfolg-grund);
  border: 1px solid var(--farbe-erfolg);
  color: #14532d;
}

.rueckmeldung[data-art="fehler"] {
  background: var(--farbe-fehler-grund);
  border: 1px solid var(--farbe-fehler);
  color: #7f1d1d;
}

.rueckmeldung svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
}

.rueckmeldung strong {
  display: block;
  margin-bottom: 2px;
  font-size: var(--groesse-md);
}

/* Ladeanzeige im Knopf */

.lader {
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: drehen 640ms linear infinite;
}

@keyframes drehen {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lader {
    animation-duration: 2s;
  }
}

.demohinweis {
  display: flex;
  gap: var(--abstand-3);
  align-items: flex-start;
  padding: var(--abstand-4);
  margin-bottom: var(--abstand-1);
  border: 1px dashed var(--farbe-akzent);
  border-radius: var(--radius-feld);
  background: #fff7ed;
  font-size: var(--groesse-sm);
  color: #7c2d12;
  line-height: var(--zeile-normal);
}

.demohinweis svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--farbe-akzent);
}

/* Der Dateipfad ist ein Wort ohne Trennstelle. Ohne "anywhere" bestimmt
   er die Mindestbreite der ganzen Spalte und macht die Seite breiter
   als das Fenster. */
.demohinweis code {
  overflow-wrap: anywhere;
}

/* --- Fussbereich --------------------------------------------------------- */

.fuss {
  padding-block: var(--abstand-9) var(--abstand-6);
  background: var(--farbe-flaeche-tief);
  color: var(--farbe-text-auf-tief);
}

.fuss__raster {
  display: grid;
  gap: var(--abstand-7);
}

@media (min-width: 768px) {
  .fuss__raster {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--abstand-8);
  }
}

.fuss .marke {
  color: #fff;
}

.fuss .marke__zeichen {
  background: #fff;
  color: var(--farbe-primaer);
}

.fuss .marke__zusatz {
  color: rgb(255 255 255 / 0.6);
}

.fuss__text {
  margin-top: var(--abstand-4);
  max-width: 40ch;
  font-size: var(--groesse-sm);
  line-height: var(--zeile-normal);
}

.fuss__titel {
  margin-bottom: var(--abstand-4);
  font-family: var(--schrift-text);
  font-size: var(--groesse-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.65);
}

.fuss__liste {
  display: grid;
  gap: var(--abstand-3);
  list-style: none;
  margin: 0;
  font-size: var(--groesse-sm);
}

.fuss__liste a {
  display: inline-flex;
  align-items: center;
  color: var(--farbe-text-auf-tief);
  text-decoration: none;
}

.fuss__liste a:hover {
  color: #fff;
  text-decoration: underline;
}

/* Auf dem Handy sind das Navigationslinks, keine Fliesstextlinks:
   sie brauchen ein Tap-Ziel von 44 px. */
@media (max-width: 767px) {
  .fuss__liste {
    gap: 0;
  }

  .fuss__liste a,
  .fuss__rechtliches a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

.fuss__adresse {
  font-style: normal;
  font-size: var(--groesse-sm);
  line-height: var(--zeile-weit);
}

.fuss__adresse a {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

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

.fuss__unten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-3) var(--abstand-5);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--abstand-8);
  padding-top: var(--abstand-5);
  border-top: 1px solid rgb(255 255 255 / 0.15);
  font-size: var(--groesse-xs);
  color: rgb(255 255 255 / 0.6);
}

.fuss__rechtliches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-4);
  list-style: none;
  margin: 0;
}

.fuss__rechtliches a {
  color: rgb(255 255 255 / 0.8);
  text-decoration: none;
}

.fuss__rechtliches a:hover {
  color: #fff;
  text-decoration: underline;
}

/* --- Klebrige Kontaktleiste, nur auf kleinen Schirmen -------------------- */

.kontaktleiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-klebrig);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abstand-2);
  padding: var(--abstand-3) var(--abstand-3)
    calc(var(--abstand-3) + env(safe-area-inset-bottom));
  background: rgb(255 255 255 / 0.97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--farbe-rahmen);
  box-shadow: 0 -4px 20px rgb(15 23 42 / 0.08);
}

.kontaktleiste .knopf {
  min-height: 50px;
  padding-inline: var(--abstand-3);
  font-size: var(--groesse-sm);
}

body:has(.kontaktleiste) {
  padding-bottom: 84px;
}

@media (min-width: 768px) {
  .kontaktleiste {
    display: none;
  }

  body:has(.kontaktleiste) {
    padding-bottom: 0;
  }
}

/* --- Einblenden beim Scrollen (nur wenn erwuenscht) ---------------------- */

/* Nur wenn JavaScript läuft, sonst bliebe der Inhalt unsichtbar. */
@media (prefers-reduced-motion: no-preference) {
  [data-js="true"] .zeigen {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 520ms var(--kurve), transform 520ms var(--kurve);
  }

  [data-js="true"] .zeigen[data-sichtbar="true"] {
    opacity: 1;
    transform: none;
  }
}

/* --- Fliesstextseiten (Impressum, Datenschutz) --------------------------- */

.fliesstext {
  max-width: 72ch;
}

.fliesstext > * + * {
  margin-top: var(--abstand-4);
}

.fliesstext h2 {
  margin-top: var(--abstand-8);
  font-size: var(--groesse-2xl);
}

.fliesstext h3 {
  margin-top: var(--abstand-6);
}

.fliesstext ul {
  padding-left: var(--abstand-5);
}

.fliesstext li + li {
  margin-top: var(--abstand-2);
}

.fliesstext address {
  font-style: normal;
  padding: var(--abstand-5);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rahmen-zart);
  border-radius: var(--radius-karte);
  line-height: var(--zeile-weit);
}

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

@media print {
  .kopf,
  .kontaktleiste,
  .band,
  .navschalter {
    display: none !important;
  }

  body {
    background: #fff;
    padding-bottom: 0;
  }
}