/* ==========================================================================
   GEMEC – Komponenten: Knoepfe, Buehne, Karten, Galerie, Formular, Karte
   ========================================================================== */

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

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0.7rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  font: inherit;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  /* justify-content zentriert den Textblock als Ganzes, nicht seine Zeilen.
     Ohne das steht die zweite Zeile einer umbrechenden Beschriftung linksbuendig
     unter der ersten – auf schmalen Schirmen sichtbar, etwa bei
     "Zurueck zur Uebersicht" im Kopf der Vorschau. */
  text-align: center;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
    color var(--transition);
}

.knopf--primaer {
  background: var(--blue-500);
  color: var(--white);
}

.knopf--primaer:hover {
  background: var(--navy-700);
  color: var(--white);
}

.knopf--zweit {
  background: var(--white);
  border-color: var(--steel-300);
  color: var(--navy-800);
}

.knopf--zweit:hover {
  border-color: var(--navy-800);
  background: var(--steel-100);
  color: var(--navy-800);
}

.knopf--hell {
  background: var(--white);
  color: var(--navy-800);
}

.knopf--hell:hover {
  background: var(--steel-200);
  color: var(--navy-900);
}

.knopf--rand-hell {
  border-color: rgb(255 255 255 / 0.45);
  color: var(--white);
}

.knopf--rand-hell:hover {
  border-color: var(--white);
  background: rgb(255 255 255 / 0.1);
  color: var(--white);
}

.knopf-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* Unter 36rem steht jeder Knopf in einer eigenen Zeile und ueber die volle
   Breite.

   Zwei Knoepfe nebeneinander brauchen rund 400px – auf dem Telefon bricht die
   Reihe deshalb um, und dann ist jede Zeile so breit wie ihre Beschriftung:
   die rechte Kante wird zur Treppe. Ueber die volle Breite hat jede
   Beschriftung ihre Zeile, alle Kanten liegen uebereinander, und die
   Tippflaeche ist so gross wie moeglich.

   Ab 36rem (576px) passen zwei Knoepfe nebeneinander. Dort bleibt es bei der
   gewoehnlichen Reihe – ueber die volle Breite waeren sie dann breiter als
   der Fliesstext darueber.

   Der .aufruf-Block hatte diese Regel bisher als einziger fuer sich; ueberall
   sonst – Buehne, Fehlerseite, Dankeseite, Anfahrt – stand die Treppe. */
@media (max-width: 35.999rem) {
  .knopf-reihe {
    display: grid;
    grid-template-columns: 1fr;
  }

  .knopf-reihe > .knopf {
    width: 100%;
  }
}

/* ---------- Buehne ---------- */

.buehne {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(78vh, 40rem);
  background: var(--navy-900);
  overflow: hidden;
}

.buehne__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
}

/* Farbverlauf sichert den Textkontrast unabhaengig vom Bildinhalt */
.buehne::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgb(6 26 59 / 0.94) 0%,
    rgb(6 26 59 / 0.82) 42%,
    rgb(11 35 73 / 0.55) 100%
  );
}

.buehne__innen {
  position: relative;
  z-index: 1;
  padding-block: var(--space-3xl);
}

.buehne__inhalt {
  max-width: 44rem;
}

.buehne h1 {
  color: var(--white);
  margin-bottom: var(--space-m);
}

.buehne__vorzeile {
  display: inline-block;
  margin-bottom: var(--space-s);
  padding: 0.32rem 0.7rem;
  background: rgb(255 255 255 / 0.12);
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 2rem;
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.buehne__text {
  max-width: 38rem;
  margin-bottom: var(--space-l);
  color: #dbe3ee;
  font-size: var(--step-1);
  line-height: 1.55;
}

/* ---------- Seitenkopf innerer Seiten ---------- */

.seitenkopf {
  padding-block: var(--space-xl) var(--space-l);
  background: var(--navy-800);
  color: var(--steel-200);
}

.seitenkopf h1 {
  color: var(--white);
  max-width: 30ch;
}

.seitenkopf__text {
  max-width: 46rem;
  margin-bottom: 0;
  font-size: var(--step-1);
  color: #cfd9e6;
}

/* ---------- Brotkrumen ---------- */

.krumen {
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--steel-200);
  font-size: 0.87rem;
}

.krumen ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--steel-500);
}

.krumen li:not(:last-child)::after {
  content: "›";
  margin-left: 0.4rem;
  color: var(--steel-400);
}

.krumen a {
  color: var(--steel-500);
}

/* ---------- Abstand zwischen Bloecken ----------

   Raster, Galerie, Knopfreihe und Anfahrt folgen im Seitenaufbau immer auf
   einen einleitenden Textblock. Der Abstand dazwischen stand bisher als
   Inline-Style im Markup, mal --space-l, mal --space-m – dadurch hatten
   Startseite und Unterseiten unterschiedliche Rhythmik.                     */

.abstand-oben {
  margin-top: var(--space-l);
}

/* Ein eigener Themenblock innerhalb desselben Abschnitts, etwa
   "Weitere Leistungen" unter dem Fliesstext einer Leistungsseite. */
.abstand-oben--gross {
  margin-top: var(--space-xl);
}

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

.raster {
  display: grid;
  gap: var(--space-m);
}

/* Die Zahl im Klassennamen ist jetzt auch die Obergrenze der Spalten.

   Vorher stand hier repeat(auto-fit, minmax(…)). Das füllt so viele Spuren,
   wie hineinpassen: bei 76rem Container waren das in --2 drei und in --3 vier
   Spalten. Vier Leistungskarten standen dadurch als 3+1 statt als 2×2, die
   letzte Reihe blieb halb gefüllt und wurde auf volle Breite gedehnt. */
.raster--2 {
  grid-template-columns: 1fr;
}

@media (min-width: 42rem) {
  .raster--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.raster--3 {
  grid-template-columns: 1fr;
}

@media (min-width: 36rem) {
  .raster--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Genau drei Karten lassen in einem Zweispalter eine Luecke in der letzten
   Reihe. Die dritte fuellt die Reihe dann selbst aus. */
@media (min-width: 36rem) and (max-width: 47.999rem) {
  .raster--3 > :last-child:nth-child(3) {
    grid-column: 1 / -1;
  }

  /* Traegt die Karte ein Bild, wuerde es ueber die volle Breite im Verhaeltnis
     3:2 zum uebergrossen Banner und die Karte waere doppelt so hoch wie die
     beiden darueber. In dieser einen Reihe deshalb flacher. */
  .raster--3 > :last-child:nth-child(3) .karte__bild {
    aspect-ratio: 16 / 5;
  }
}

@media (min-width: 48rem) {
  .raster--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Zwei Spalten, nicht mehr – dieselbe Falle wie oben bei .raster. Mit
   repeat(auto-fit, …) passten ab rund 1100px drei Spuren in den Container.
   Text und Bild belegten die ersten beiden, die dritte blieb leer: Das Bild
   bekam ein Drittel der Breite statt der Haelfte, und zwischen Text und Bild
   klaffte eine tote Spalte. Der Umbruch bei 62rem ist derselbe Punkt, den die
   sizes-Attribute der Bilder ohnehin annehmen. */
.split {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 62rem) {
  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Formular und Kontaktspalte sind unterschiedlich hoch. Zentriert saehe die
   kuerzere Spalte aus, als haenge sie in der Luft. */
.split--oben {
  align-items: start;
}

/* Die grossen Bilder in den zweispaltigen Bloecken. */
.split img,
.detailbild img {
  border-radius: var(--radius-m);
}

/* Ein einzelnes Detailbild unter dem Fliesstext, schmaler als die Huelle. */
.detailbild {
  max-width: 46rem;
  margin-top: var(--space-l);
}

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

.karte {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-m);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.karte:hover {
  border-color: var(--navy-600);
  box-shadow: var(--shadow-m);
}

.karte__bild {
  aspect-ratio: 3 / 2;
  width: 100%;
  object-fit: cover;
  background: var(--steel-100);
}

.karte__koerper {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-m);
}

.karte__nummer {
  margin-bottom: 0.6rem;
  color: var(--steel-500);
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.12em;
}

.karte h3 {
  margin-bottom: 0.5rem;
}

.karte p {
  color: var(--ink-muted);
  font-size: 0.96rem;
}

.karte__mehr {
  display: inline-flex;
  align-items: flex-end;
  min-height: 44px;
  margin-top: auto;
  padding-top: var(--space-s);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}

.karte__mehr::after {
  content: " →";
}

/* Die ganze Karte klickbar machen, ohne Textauswahl zu blockieren */
.karte__mehr::before {
  content: "";
  position: absolute;
  inset: 0;
}

.karte {
  position: relative;
}

/* ---------- Merkmalsliste ---------- */

.merkmale {
  margin: 0 0 var(--space-m);
  padding: 0;
  list-style: none;
}

.merkmale li {
  position: relative;
  padding-left: 1.65rem;
  margin-bottom: 0.6rem;
}

.merkmale li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.7rem;
  height: 0.4rem;
  border-left: 2px solid var(--blue-500);
  border-bottom: 2px solid var(--blue-500);
  transform: rotate(-45deg);
}

.abschnitt--navy .merkmale li::before {
  border-color: var(--blue-300);
}

/* ---------- Markenschild ----------

   Das Firmenlogo im Seiteninhalt. Es hat einen weissen Grund; eine
   freigestellte Fassung gibt es nicht, und weiss ausgestanzt bliebe von den
   verchromten Kanten des G nichts uebrig.

   Auf weissen Abschnitten steht es deshalb einfach da. Auf Grau und Navy
   braeuchte es sonst ein weisses Rechteck mitten in der Flaeche – dort
   bekommt es dieselbe Flaeche als bewusstes Schild mit Innenabstand und
   Radius.                                                                  */

.markenschild {
  display: inline-block;
  margin: 0 0 var(--space-m);
}

.markenschild img {
  display: block;
  width: 180px;
  height: auto;
}

.abschnitt--grau .markenschild,
.abschnitt--navy .markenschild,
.fuss .markenschild {
  padding: var(--space-xs) var(--space-s);
  background: var(--white);
  border-radius: var(--radius-m);
}

/* Im Fussbereich folgt direkt darunter die Anschrift, nicht eine
   Ueberschrift – da genuegt der kleinere Abstand. */
.fuss .markenschild {
  margin-bottom: var(--space-s);
}

/* ---------- Kennzahlen ---------- */

.kennzahlen {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  margin: 0;
  padding: 0;
}

.kennzahl {
  padding: var(--space-m);
  background: var(--white);
  border: var(--border);
  border-left: 3px solid var(--blue-500);
  border-radius: var(--radius-s);
}

.kennzahl dt {
  color: var(--steel-500);
  font-size: 0.86rem;
  font-weight: 600;
}

.kennzahl dd {
  margin: 0.15rem 0 0;
  color: var(--navy-800);
  font-size: var(--step-1);
  font-weight: 650;
  line-height: 1.25;
}

/* ---------- Hinweisblock ---------- */

/* Breite und Abstand standen bisher als Inline-Style an jedem einzelnen
   Hinweis – siebenmal mit max-width, einmal ohne. Jetzt einheitlich hier.
   Der Hinweis steht im Seitenaufbau nie zuoberst, der Abstand nach oben
   gilt deshalb immer. */
.hinweis {
  max-width: var(--width-text);
  margin-top: var(--space-l);
  padding: var(--space-m);
  background: var(--paper);
  border: var(--border);
  border-left: 3px solid var(--steel-400);
  border-radius: var(--radius-s);
  font-size: 0.96rem;
}

.hinweis :last-child {
  margin-bottom: 0;
}

.hinweis__titel {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--navy-800);
  font-weight: 650;
}

/* ---------- Galerie ---------- */

.galerie {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.galerie__eintrag {
  margin: 0;
}

.galerie__knopf {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 1px solid var(--steel-200);
  border-radius: var(--radius-m);
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.galerie__knopf:hover {
  border-color: var(--navy-600);
  box-shadow: var(--shadow-m);
}

.galerie__knopf img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  background: var(--steel-100);
}

.galerie figcaption {
  padding-top: 0.55rem;
  color: var(--ink-muted);
  font-size: 0.89rem;
  line-height: 1.45;
}

/* ---------- Lightbox ---------- */

.lightbox {
  width: min(94vw, 68rem);
  max-width: none;
  max-height: 94vh;
  padding: 0;
  background: var(--navy-900);
  border: 0;
  border-radius: var(--radius-m);
  color: var(--steel-200);
  overflow: hidden;
  /* Scrollen im Dialog soll nicht auf die Seite dahinter durchschlagen */
  overscroll-behavior: contain;
}

.lightbox::backdrop {
  background: rgb(6 26 59 / 0.86);
}

.lightbox__bild {
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  background: #04122a;
}

.lightbox__text {
  margin: 0;
}

.lightbox__fuss {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-m);
  font-size: 0.93rem;
}

.lightbox__schliessen {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: var(--radius-s);
  color: var(--white);
  font: inherit;
  font-size: 1.1rem;
  cursor: pointer;
}

.lightbox__schliessen:hover {
  background: rgb(255 255 255 / 0.12);
}

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

.formular {
  display: grid;
  gap: var(--space-m);
}

.feldpaar {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}

.feld {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.feld label {
  color: var(--navy-800);
  font-size: 0.94rem;
  font-weight: 600;
}

.feld__pflicht {
  color: var(--error);
}

.feld__hilfe {
  margin: 0;
  color: var(--steel-500);
  font-size: 0.85rem;
}

.feld input,
.feld select,
.feld textarea {
  width: 100%;
  min-height: 46px;
  padding: 0.65rem 0.8rem;
  background: var(--white);
  border: 1px solid var(--steel-400);
  border-radius: var(--radius-s);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.feld textarea {
  min-height: 9rem;
  resize: vertical;
  line-height: 1.6;
}

.feld select {
  appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b6c70' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
}

.feld input:hover,
.feld select:hover,
.feld textarea:hover {
  border-color: var(--steel-500);
}

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

.feld input[aria-invalid="true"],
.feld textarea[aria-invalid="true"],
.feld select[aria-invalid="true"] {
  border-color: var(--error);
  background: var(--error-bg);
}

.feld__fehler {
  display: none;
  color: var(--error);
  font-size: 0.87rem;
  font-weight: 550;
}

.feld__fehler:not(:empty) {
  display: block;
}

/* Kontrollkaestchen */
.zustimmung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
}

.zustimmung input[type="checkbox"] {
  width: 1.3rem;
  height: 1.3rem;
  min-height: 0;
  margin: 0.18rem 0 0;
  accent-color: var(--blue-500);
  flex: none;
}

.zustimmung label {
  font-size: 0.93rem;
  font-weight: 450;
  line-height: 1.55;
  color: var(--ink);
}

/* Honigtopf – fuer Menschen unsichtbar, Bots fuellen ihn aus */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular__meldung {
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-s);
  font-size: 0.96rem;
}

.formular__meldung--fehler {
  background: var(--error-bg);
  border: 1px solid var(--error);
  color: #7d1c21;
}

.formular__meldung--erfolg {
  background: var(--success-bg);
  border: 1px solid var(--success);
  color: #0f4a2e;
}

.formular__meldung :last-child {
  margin-bottom: 0;
}

/* ---------- Kontaktdaten ---------- */

.kontaktliste {
  margin: 0;
  display: grid;
  gap: var(--space-s);
}

.kontaktliste dt {
  color: var(--steel-500);
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.kontaktliste dd {
  margin: 0.1rem 0 0;
  font-size: 1.05rem;
}

.kontaktliste a {
  font-weight: 600;
  text-decoration: none;
}

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

/* Telefon und E-Mail sind auf dem Handy die meistgenutzten Ziele überhaupt.
   Sie bekommen die volle Tippfläche, auch wenn sie als Textlinks aussehen.
   Das gilt überall im Inhaltsbereich, nicht nur auf der Kontaktseite –
   ebenso für Linklisten wie die Wegweiser auf der Fehlerseite. */
@media (max-width: 62rem) {
  .kontaktliste a,
  .anfahrt__adresse a,
  main a[href^="tel:"],
  main a[href^="mailto:"],
  .hinweis p > a:only-child,
  .merkmale li > a:only-child {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .rechtstext p:has(a[href^="tel:"]),
  .rechtstext p:has(a[href^="mailto:"]) {
    line-height: 1.4;
  }
}

/* ---------- Anfahrtskarte ---------- */

.anfahrt {
  border: var(--border);
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--white);
}

.anfahrt__karte {
  display: block;
  position: relative;
  width: 100%;
  border: 0;
  padding: 0;
  background: #e8edf3;
  cursor: pointer;
  text-decoration: none;
}

.anfahrt__karte svg {
  display: block;
  width: 100%;
  height: auto;
}

.anfahrt__fahne {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  padding: 0.4rem 0.7rem;
  background: rgb(255 255 255 / 0.94);
  border: 1px solid var(--steel-300);
  border-radius: var(--radius-s);
  color: var(--navy-800);
  font-size: 0.84rem;
  font-weight: 600;
}

/* Auf schmalen Bildschirmen schrumpft die ganze Grafik mit. Ohne Ausgleich
   wäre der Straßenname nur noch rund sieben Pixel hoch und unlesbar.
   Beschriftung, Namensschild und Markierung wachsen deshalb im
   SVG-Koordinatensystem mit. */
@media (max-width: 48rem) {
  /* Unten rechts wird es eng: dort stehen bereits Namensschild und
     Maßstabshinweis. Oben rechts ist Platz. */
  .anfahrt__fahne {
    top: 0.5rem;
    right: 0.5rem;
    bottom: auto;
    font-size: 0.78rem;
    padding: 0.32rem 0.55rem;
  }

  .karte-strasse {
    font-size: 29px;
  }
  /* Markierung vergrößern. Die Spitze sitzt bei y = 32 im lokalen System,
     mal 1,35 sind das 43 – der Versatz von 174 hält sie damit auf Höhe 217. */
  .karte-pin {
    transform: translate(400px, 174px) scale(1.35);
  }
  /* Schild darunter, mit Abstand zur Spitze */
  .karte-schild {
    transform: translate(400px, 244px) scale(1.5);
  }
  .karte-hinweis {
    font-size: 21px;
  }
}

.anfahrt__leiste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-s) var(--space-m);
  border-top: 1px solid var(--steel-200);
  background: var(--paper);
}

.anfahrt__adresse {
  font-size: 0.94rem;
  font-style: normal;
  line-height: 1.5;
}

/* Die Knopfreihe ist hier ein Flex-Kind und damit nur so breit wie ihr
   Inhalt. Unter 36rem stehen ihre Knoepfe untereinander – ohne diese Zeile
   blieben sie dabei auf halber Leistenbreite stehen. */
@media (max-width: 35.999rem) {
  .anfahrt__leiste .knopf-reihe {
    width: 100%;
  }
}

/* ---------- Aufruf zum Handeln ---------- */

.aufruf {
  display: grid;
  gap: var(--space-m);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

.aufruf h2 {
  margin-bottom: 0.4rem;
}

.aufruf p {
  margin-bottom: 0;
  color: #cfd9e6;
}

/* Die Knopfreihe folgt dem Layout des Blocks: einspaltig steht sie linksbündig
   unter Überschrift und Text, zweispaltig rechts daneben. Der Umbruchpunkt des
   Blocks ergibt sich aus dem Raster oben – 2 × 20rem plus 1,5rem Lücke sind
   41,5rem Container, dazu 2,5rem Rand der Hülle macht 44rem Fensterbreite.

   Vorher stand hier auf jeder Seite ein style="justify-content: flex-end" im
   Markup. Inline-Styles wiegen schwerer als jede Medienabfrage, deshalb blieb
   die Reihe auch auf dem Handy rechtsbündig, während der Text daneben links
   stand.

   Nebeneinander brauchen "Zum Kontaktformular" und die Rufnummer 403px. So
   viel hat die halbe Breite erst ab 56rem Fensterbreite; zwischen 44rem und
   56rem ist der Block zwar zweispaltig, seine rechte Spalte aber zu schmal
   für die Reihe – dort brach sie um und stand als Treppe da.

   Bis 56rem stehen die Knöpfe deshalb untereinander und füllen ihre Spalte:
   erst die volle Hüllenbreite, ab 44rem die halbe. Gleiche Breite, gleiche
   Höhe, eine Kante. */
@media (max-width: 55.999rem) {
  .aufruf .knopf-reihe {
    display: grid;
    grid-template-columns: 1fr;
  }

  .aufruf .knopf-reihe .knopf {
    width: 100%;
  }
}

/* Eine Rufnummer über zwei Zeilen liest sich nicht mehr als eine Nummer. */
.aufruf .knopf-reihe .knopf {
  white-space: nowrap;
}

@media (min-width: 56rem) {
  .aufruf .knopf-reihe {
    justify-content: flex-end;
  }
}

/* ---------- Schnellzugriff am unteren Bildschirmrand (nur mobil) ----------

   Auf dem Handy steckt die Hauptaktion sonst hinter dem Menü. Diese Leiste
   hält Anrufen und Nachricht dauerhaft in Reichweite des Daumens.
   Ab 48rem (768px) verschwindet sie, dort steht der Knopf im Kopfbereich.    */

.schnellzugriff {
  /* fixed, nicht sticky: die Leiste hängt am Fenster, nicht am Dokument,
     und bleibt deshalb beim Scrollen an derselben Stelle stehen. */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Über dem Seiteninhalt, aber unter dem Kopfbereich (z-index 50). Die
     eingeklappte Navigation gehört zum Kopf und liegt damit oben, wenn sie
     aufgeht. */
  z-index: 40;
  display: block;
  /* Halbdeckend mit Weichzeichner: der durchscrollende Inhalt bleibt
     erkennbar, die Leiste setzt sich trotzdem sichtbar ab. */
  background: rgb(255 255 255 / 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--steel-200);
  box-shadow: 0 -4px 20px rgb(15 23 42 / 0.08);
  /* Platz für den Homeindikator auf randlosen iPhones */
  padding: 0.75rem 0.85rem calc(0.75rem + env(safe-area-inset-bottom));
}

/* Ohne backdrop-filter würde der Text unter der Leiste durchschimmern und
   den Kontrast drücken. Dann lieber deckend. */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .schnellzugriff {
    background: var(--white);
  }
}

/* Die Leiste liegt über dem Inhalt: ohne diesen Abstand endet der Fußbereich
   unter der Leiste. Höhe der Leiste = 1px Linie + 2x12px Innenabstand +
   54px Schaltfläche, aufgerundet auf 84px. */
body {
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
}

.schnellzugriff__innen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  max-width: 32rem;
  margin-inline: auto;
}

.schnellzugriff__knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 54px;
  padding: 0.5rem 0.7rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: 1.03rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition),
    color var(--transition);
}

.schnellzugriff__knopf svg {
  flex: none;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Anrufen als Umrisspille, Anfrage gefüllt – die gefüllte Fläche zieht
   den Blick auf die Aktion, die den längeren Text erlaubt. */
.schnellzugriff__anruf {
  background: var(--white);
  border-color: var(--blue-500);
  color: var(--blue-500);
}

.schnellzugriff__anruf:active {
  background: #eef4fb;
  color: var(--navy-800);
}

.schnellzugriff__anfrage {
  background: var(--blue-500);
  color: var(--white);
  box-shadow: 0 2px 10px rgb(29 95 168 / 0.28);
}

.schnellzugriff__anfrage:active {
  background: var(--navy-700);
  color: var(--white);
}

.schnellzugriff__knopf:focus-visible {
  outline-offset: 3px;
}

/* Ab 48rem (768px) ist der Bildschirm breit genug für den Anfrage-Knopf im
   Kopfbereich. Die Leiste verschwindet, der Abstand am body entfällt. */
@media (min-width: 48rem) {
  .schnellzugriff {
    display: none;
  }

  body {
    padding-bottom: 0;
  }
}

/* Auf Papier hat eine feste Leiste nichts zu suchen. */
@media print {
  .schnellzugriff {
    display: none;
  }

  body {
    padding-bottom: 0;
  }
}

/* Sehr schmale Geräte: Beschriftung darf schrumpfen statt zu überlaufen */
@media (max-width: 22rem) {
  .schnellzugriff {
    padding-inline: 0.6rem;
  }

  .schnellzugriff__innen {
    gap: 0.5rem;
  }

  .schnellzugriff__knopf {
    font-size: 0.94rem;
    gap: 0.4rem;
  }
}

/* ---------- Tabelle ---------- */

.tabellenhuelle {
  overflow-x: auto;
  border: var(--border);
  border-radius: var(--radius-s);
}

/* Eine reine Wertetabelle braucht die volle Huellenbreite nicht. */
.tabellenhuelle--schmal {
  max-width: 34rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

th,
td {
  padding: 0.7rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--steel-200);
}

th {
  background: var(--paper);
  color: var(--navy-800);
  font-weight: 650;
  white-space: nowrap;
}

tbody tr:last-child td {
  border-bottom: 0;
}

/* Auf dem Handy zwingt nowrap die Tabelle sonst in horizontales Scrollen,
   obwohl .tabellenhuelle das nur abfaengt und nicht verhindert. Bei fuenf
   Wertezeilen ist Umbrechen die bessere Loesung als Wischen. */
@media (max-width: 30rem) {
  th {
    white-space: normal;
  }
}

/* ---------- Rechtstexte ---------- */

.rechtstext h2 {
  margin-top: var(--space-xl);
  font-size: var(--step-2);
}

.rechtstext h3 {
  margin-top: var(--space-l);
}

.rechtstext > :first-child {
  margin-top: 0;
}

.platzhalter {
  padding: 0.1rem 0.4rem;
  background: #fff4d6;
  border: 1px dashed #b8860b;
  border-radius: 2px;
  color: #6b4e00;
  font-weight: 600;
  font-size: 0.94em;
}