/* Wiederverwendbare Bausteine: Header, Footer, Buttons, Card, Hinweisbox,
   Preistabelle, FAQ-Akkordeon, Formular, Breadcrumb. */

/* Header und Wortmarke */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0 8px;
  /* 8 statt 12 px: Die Leiste bleibt beim Scrollen dauerhaft stehen, jeder
     Pixel geht vom Inhalt ab. Mit 44 px hohen Bedienelementen ergibt das
     60 px Gesamthöhe statt 72. */
  padding: 8px var(--seiten-padding-x);
  background-color: var(--header-fläche);
  backdrop-filter: blur(10px);
  /* Kante plus sehr weicher Schatten: der Kopf liegt sichtbar über dem Inhalt,
     ohne dass ein harter Kasten entsteht. */
  box-shadow: var(--schatten-header);
}

/* Wortmarke immer links, Bedienelemente immer rechts, alles in einer Zeile.

   Die Rechnung für den engsten Fall, 320 px:
   Rand 2 x 16, Telefon 44, Umschalter 44, zwei Abstände 6 und 8. Für die
   Wortmarke bleiben 178 px. "Schimmelpilzgutachter.com" braucht bei 17 px
   rund 233 px, passt also nicht. Ohne ".com" sind es 21 Zeichen, bei 15 px
   rund 172 px, das passt.

   Deshalb zwei Stufen: Die Größe folgt einer clamp-Kurve, und unterhalb von
   22 em entfällt die Endung ".com". Der Markenname bleibt vollständig
   lesbar, die Zeile bleibt eine Zeile, und beide Bedienelemente behalten
   ihre 44 px. Für Blindenlesegeräte bleibt die Endung erhalten. */
.wortmarke {
  display: inline-flex;
  align-items: baseline;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(15px, 4.4vw, var(--wortmarke-size-mobile));
  letter-spacing: var(--wortmarke-letter-spacing);
  line-height: 1.2;
  color: var(--ink-900);
  text-decoration: none;
  overflow-wrap: normal;
  white-space: nowrap;
}

@media (max-width: 22em) {
  .wortmarke-endung {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.wortmarke:hover {
  color: var(--ink-900);
}

@media (min-width: 48em) {
  .wortmarke {
    font-size: var(--wortmarke-size-desktop);
  }
}

.wortmarke-endung {
  color: var(--sky-700);
}

/* Bedienelemente rechts in der Leiste: Direktwahl und Menü-Umschalter.
   Bleiben zusammen, damit die Wortmarke links den ganzen übrigen Platz
   bekommt und nie umbricht. */
.kopf-bedienung {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Direktwahl als Symbol in der Leiste selbst, nicht erst im geöffneten Menü.
   Bei akutem Schimmelbefall ist der Anruf der schnellste Weg, und auf dem
   Handy soll dafür kein Menü nötig sein. Am Desktop entfällt sie hier, dort
   steht die Nummer ausgeschrieben in der Navigation. */
.kopf-anruf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--sky-800);
  border-radius: var(--radius);
  background-color: var(--sky-700);
  color: var(--white);
  text-decoration: none;
  transition: background-color var(--duration-hover) var(--ease-hover);
}

.kopf-anruf:hover {
  background-color: var(--sky-800);
  color: var(--white);
}

.kopf-anruf svg {
  width: 22px;
  height: 22px;
}

@media (min-width: 64em) {
  .kopf-anruf {
    display: none;
  }
}

/* Menü-Umschalter, feste px als Header-Chrome-Ausnahme */
.menu-toggle {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  background-color: var(--white);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--duration-hover) var(--ease-hover),
    border-color var(--duration-hover) var(--ease-hover);
}

.menu-toggle:hover {
  background-color: var(--sky-50);
  border-color: var(--sky-600);
}

.menu-toggle[aria-expanded="true"] {
  background-color: var(--sky-50);
  border-color: var(--sky-600);
}

.menu-toggle .icon {
  width: 24px;
  height: 24px;
}

/* Das sichtbare Wort "Menü" hilft Nutzern, die das Hamburger-Zeichen nicht
   kennen. Neben der langen Wortmarke passt es aber erst ab etwa 420 px in
   dieselbe Zeile, darunter würde der Header umbrechen. Blindenlesegeräte
   bekommen die Beschriftung über den sr-only-Text in jedem Fall. */
.menu-toggle-text {
  display: none;
}

@media (min-width: 26em) {
  .menu-toggle {
    padding: 0 12px;
  }

  .menu-toggle-text {
    display: inline;
  }
}

/* Der Umschalter zeigt an, was der nächste Klick bewirkt: geschlossenes Menü
   zeigt den Hamburger, geöffnetes das Kreuz. Gesteuert allein über den
   aria-expanded-Zustand, den das Skript ohnehin pflegen muss. */
.menu-toggle[aria-expanded="false"] .icon-schliessen,
.menu-toggle[aria-expanded="true"] .icon-menue {
  display: none;
}

@media (min-width: 64em) {
  .menu-toggle {
    display: none;
  }
}

/* Hauptnavigation: ohne JS immer vollständig sichtbar, siehe base.css */
#hauptnavigation {
  flex-basis: 100%;
}

/* Der Abstand oben und unten sitzt an den Listenpunkten, nicht an der Liste.
   Grund: Im eingeklappten Zustand ist die Rasterspur 0 hoch, ein Kasten kann
   aber nicht niedriger werden als sein eigener Innenabstand. Als Innenabstand
   der Liste blieben dadurch 20 px unsichtbare Höhe in der Leiste stehen, die
   beim Scrollen dauerhaft mitfährt. Als Außenabstand der Punkte liegt er
   innerhalb des abgeschnittenen Bereichs und verschwindet mit. */
#hauptnavigation ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

#hauptnavigation li:first-child {
  margin-top: var(--space-2xs);
}

#hauptnavigation li:last-child {
  margin-bottom: var(--space-xs);
}

/* Mobil sind die Einträge vollflächige Zeilen mit mindestens 48 px Höhe.
   Die vorherigen 39 px lagen unter der Mindestgröße für Trefferflächen und
   waren für die Zielgruppe deutlich zu knapp. */
#hauptnavigation a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: var(--space-2xs) var(--space-2xs);
  margin-inline: calc(var(--space-2xs) * -1);
  border-radius: var(--radius);
  color: var(--ink-900);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
}

#hauptnavigation li + li {
  border-top: 1px solid var(--ink-200);
}

#hauptnavigation a:hover {
  color: var(--sky-800);
  background-color: var(--sky-50);
}

/* Aktive Seite mobil: Farbe plus eine Kante links, damit die Orientierung
   nicht allein über Farbe läuft. */
#hauptnavigation a[aria-current="page"] {
  color: var(--sky-700);
  box-shadow: inset 3px 0 0 var(--sky-700);
}

/* Direktwahl am Ende des mobilen Menüs. Bei akutem Befall ist der Anruf der
   schnellste Weg, deshalb steht die Nummer dort, wo man sie sucht. */
.navigation-anruf {
  margin-top: var(--space-2xs);
  border-top: 0 !important;
}

/* Die Regeln oben stehen an "#hauptnavigation a" und gewinnen über einen
   ID-Selektor. Deshalb hier ebenfalls mit der ID schreiben, sonst bliebe die
   dunkle Textfarbe auf der blauen Fläche stehen (Kontrast 2.93 statt 5.61). */
#hauptnavigation .navigation-anruf a {
  gap: var(--space-2xs);
  justify-content: center;
  background-color: var(--sky-700);
  color: var(--white);
}

#hauptnavigation .navigation-anruf a:hover {
  background-color: var(--sky-800);
  color: var(--white);
}

.navigation-anruf .icon {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}

/* Eingeklapptes Menü: "visibility: hidden" allein genügt nicht, das Element
   bliebe im Layout stehen und risse ein großes Loch in den Header. Deshalb
   faltet sich die Höhe über grid-template-rows von 0fr auf 1fr zusammen. */
html.js #hauptnavigation {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  opacity: 0;
  transition: grid-template-rows var(--duration-exit) var(--ease-out),
    opacity var(--duration-exit) var(--ease-out),
    visibility 0s linear var(--duration-exit);
}

html.js #hauptnavigation > ul {
  overflow: hidden;
  min-height: 0;
}

html.js #hauptnavigation.ist-offen {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
  transition: grid-template-rows var(--duration-enter) var(--ease-out),
    opacity var(--duration-enter) var(--ease-out);
}

@media (min-width: 64em) {
  #hauptnavigation {
    flex-basis: auto;
  }

  #hauptnavigation li:first-child,
  #hauptnavigation li:last-child {
    margin-block: 0;
  }

  #hauptnavigation ul {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 0;
    gap: var(--space-m);
  }

  #hauptnavigation li + li {
    border-top: 0;
  }

  #hauptnavigation a {
    position: relative;
    display: block;
    min-height: 0;
    margin-inline: 0;
    padding: var(--space-3xs) 0;
    border-radius: 0;
    color: var(--ink-700);
    font-size: 1rem;
  }

  #hauptnavigation a:hover {
    background-color: transparent;
    color: var(--sky-700);
  }

  #hauptnavigation a[aria-current="page"] {
    box-shadow: none;
  }

  /* Die Direktwahl steht jetzt auch am Desktop in der Navigation, auf
     Kundenwunsch. Sie ist dort kein Menüpunkt mehr, sondern eine
     Schaltfläche: Bei akutem Befall ist der Anruf der schnellste Weg, und
     die Nummer soll man nicht erst suchen müssen.
     Am Desktop nur die Nummer ohne das Wort "anrufen", sonst wird die
     Navigationszeile zu breit und bricht um. */
  .navigation-anruf {
    margin-top: 0;
    margin-inline-start: var(--space-2xs);
  }

  #hauptnavigation .navigation-anruf a {
    display: inline-flex;
    padding: var(--space-3xs) var(--space-xs);
    border-radius: var(--radius);
    font-size: var(--font-size-klein);
  }

  .navigation-anruf-lang {
    display: none;
  }

  /* Aktive Seite bekommt eine ruhige Unterstreichung statt nur Farbe,
     damit die Orientierung nicht allein über Farbe läuft. */
  #hauptnavigation a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background-color: var(--sky-700);
    border-radius: 2px;
  }

  html.js #hauptnavigation,
  html.js #hauptnavigation.ist-offen {
    display: block;
    visibility: visible;
    opacity: 1;
    transition: none;
  }
}

/* Breadcrumb */
.breadcrumb {
  font-size: var(--font-size-klein);
  color: var(--ink-500);
  margin-bottom: var(--space-m);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-3xs);
}

.breadcrumb li + li::before {
  content: "/";
  margin-inline-end: var(--space-3xs);
  color: var(--sky-300);
}

.breadcrumb a {
  color: var(--ink-500);
  text-decoration-color: var(--ink-200);
}

.breadcrumb a:hover {
  color: var(--sky-700);
}

.breadcrumb [aria-current="page"] {
  color: var(--ink-700);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 44px;
  max-width: 100%;
  padding: var(--space-xs) var(--space-l);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--font-size-body);
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-hover) var(--ease-hover),
    border-color var(--duration-hover) var(--ease-hover),
    transform var(--duration-press) var(--ease-out);
}

.btn-primary {
  background-color: var(--sky-700);
  color: var(--white);
  box-shadow: var(--schatten-button);
}

/* Anruf-Schaltfläche. Bei akutem Befall ist der Anruf der schnellste Weg,
   deshalb steht die Nummer im Knopf und nicht nur ein Wort wie "Kontakt".
   Der Hörer bleibt beim Text, auch wenn der Knopf umbricht. */
.btn-anruf .icon {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
}

/* Zweitrangige Schaltfläche neben dem Anruf: gleiche Form, weniger Gewicht.
   Rahmen statt Fläche, damit die Rangfolge ohne Farbe allein erkennbar ist. */
.btn-zweit {
  background-color: var(--white);
  border-color: var(--sky-200);
  color: var(--sky-700);
}

.btn-zweit:hover {
  border-color: var(--sky-700);
  background-color: var(--sky-50);
  color: var(--sky-800);
}

/* Knopfreihe.
   Zwei Knöpfe nebeneinander mussten vorher über einen Außenabstand am
   zweiten Knopf auskommen. Das hatte zwei Fehler:

   1. Beide Knöpfe sind inline-flex und richteten sich an der Schriftlinie
      aus. Die Schriftlinie eines Flex-Kastens ist die seines ersten Kindes.
      Beim Anruf-Knopf ist das erste Kind das Hörersymbol, ein SVG hat keine
      Schriftlinie, ersatzweise gilt seine Unterkante. Beim zweiten Knopf ist
      das erste Kind Text. Zwei verschiedene Bezugslinien, also standen die
      Knöpfe versetzt, obwohl beide 47 px hoch sind.
   2. Beim Umbruch auf schmalen Geräten blieb der Außenabstand als Einzug
      stehen, der zweite Knopf war um 8 px eingerückt.

   Als Flex-Reihe entfällt beides: gleiche Ausrichtung über die Kastenhöhe
   statt über die Schriftlinie, und der Abstand kommt aus gap, das beim
   Umbruch nicht als Einzug wirkt. */
.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin-block: var(--flow-absatz) 0;
}

/* Kein Knopf in der Reihe bringt einen eigenen Außenabstand mit.
   Der Grund: align-items richtet die Kästen einschließlich ihrer
   Außenabstände aus. Ein Knopf mit oberem Abstand steht dadurch tiefer als
   sein Nachbar, obwohl beide exakt gleich hoch sind.

   Solche Abstände stehen an mehreren Stellen, weil ein Knopf früher immer
   allein auf einen Absatz folgte: in components.css für die Hinweisbox, in
   pages.css für den Startseiten-Vorspann. Beide haben zwei Klassen, also
   dieselbe Stärke wie ".knopfreihe > .btn", und je nach Reihenfolge der
   Dateien gewinnt mal die eine, mal die andere. Genau daran ist die
   Ausrichtung zweimal hängen geblieben: einmal behoben, an der nächsten
   Stelle wieder da.

   Die doppelte Klasse ".btn.btn" hebt die Stärke um eine Stufe an. Damit
   gewinnt diese Regel gegen jede vorhandene und gegen jede künftige Regel
   dieser Art, unabhängig von der Reihenfolge der Dateien. Den Abstand nach
   oben trägt die Reihe selbst. */
.knopfreihe > .btn.btn {
  margin: 0;
}

/* Sicherheitsnetz für Knöpfe, die einzeln im Fließtext stehen. */
.btn {
  vertical-align: middle;
}

.btn-primary:hover {
  background-color: var(--sky-800);
  color: var(--white);
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-link {
  min-height: 0;
  padding: 0;
  gap: var(--space-3xs);
  background: none;
  color: var(--sky-700);
  border: none;
  text-decoration: underline;
  text-decoration-color: var(--sky-300);
  text-underline-offset: 0.2em;
}

.btn-link:hover {
  color: var(--sky-800);
  text-decoration-color: currentColor;
}

.btn-link .icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  transition: transform var(--duration-hover) var(--ease-hover);
}

.btn-link:hover .icon {
  transform: translateX(0.15em);
}

/* Inhaltskarte */
.card {
  padding: var(--space-m);
  border: 1px solid var(--sky-100);
  border-radius: var(--radius);
  background-color: var(--sky-50);
}

@media (min-width: 48em) {
  .card {
    padding: var(--space-l);
  }
}

.card > :last-child {
  margin-bottom: 0;
}

/* Hinweisbox, farbige Kante links, bewusst kein Rot (siehe Masterplan Abschnitt 5).
   Wird als Abschluss-Block mit Handlungsaufruf eingesetzt. */
.hinweisbox {
  padding: var(--space-m);
  border: 1px solid var(--sky-200);
  border-left: 4px solid var(--sky-700);
  border-radius: var(--radius);
  background-color: var(--sky-50);
}

@media (min-width: 48em) {
  .hinweisbox {
    padding: var(--space-l) var(--space-xl);
  }
}

.hinweisbox > :last-child {
  margin-bottom: 0;
}

/* Nur für einen Knopf, der unmittelbar in der Box steht. Steht er in einer
   Knopfreihe, bringt die Reihe den Abstand mit, und ein zusätzlicher Abstand
   am einzelnen Knopf würde ihn gegen seinen Nachbarn verschieben. */
.hinweisbox > .btn-primary {
  margin-top: var(--space-2xs);
}

/* Preistabelle */
.preistabelle {
  display: grid;
  gap: var(--space-2xs);
  max-width: 52rem;
}

.preistabelle-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3xs) var(--space-m);
  padding: var(--space-s) var(--space-m);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  background-color: var(--white);
  transition: border-color var(--duration-hover) var(--ease-hover),
    background-color var(--duration-hover) var(--ease-hover);
}

.preistabelle-zeile:hover {
  border-color: var(--sky-200);
  background-color: var(--sky-50);
}

.preistabelle-titel {
  flex: 1 1 18rem;
  min-width: 0;
  font-weight: 600;
  color: var(--ink-900);
}

.preistabelle-titel .klein {
  display: block;
  margin-top: var(--space-3xs);
  font-weight: 400;
  color: var(--ink-500);
}

.preistabelle-preis {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--sky-700);
  text-align: right;
}

/* Bezugsgröße bleibt am Preis, tritt aber optisch zurück. Der Masterplan
   verlangt, dass nie eine nackte Zahl ohne Bezug steht. */
.preistabelle-preis .klein {
  display: block;
  font-weight: 400;
  color: var(--ink-500);
}

/* Gruppenüberschrift innerhalb der Preisübersicht */
.preisgruppe-titel {
  margin-top: var(--space-l);
  margin-bottom: var(--space-2xs);
  font-family: var(--font-sans);
  font-size: var(--font-size-klein);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.preisgruppe-titel:first-of-type {
  margin-top: 0;
}

/* FAQ-Akkordeon auf Basis von details/summary, voll bedienbar ohne JS */
.faq-akkordeon {
  display: grid;
  gap: var(--space-2xs);
  max-width: 52rem;
}

.faq-eintrag {
  padding: 0 var(--space-m);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  background-color: var(--white);
  transition: border-color var(--duration-hover) var(--ease-hover);
}

.faq-eintrag:hover {
  border-color: var(--sky-200);
}

.faq-eintrag[open] {
  border-color: var(--sky-200);
  background-color: var(--sky-50);
}

.faq-eintrag summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-s) 0;
  font-weight: 600;
  color: var(--ink-900);
  cursor: pointer;
  list-style: none;
}

.faq-eintrag summary:hover {
  color: var(--sky-800);
}

.faq-eintrag summary::-webkit-details-marker {
  display: none;
}

.faq-eintrag summary .icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--sky-700);
  transition: transform var(--duration-hover) var(--ease-hover);
}

.faq-eintrag[open] summary .icon {
  transform: rotate(180deg);
}

.faq-eintrag-inhalt {
  padding: 0 0 var(--space-m);
}

.faq-eintrag-inhalt > :last-child {
  margin-bottom: 0;
}

/* Formular */
.kontaktformular {
  max-width: 40rem;
}

.formular-feld {
  display: grid;
  gap: var(--space-3xs);
  margin-bottom: var(--space-m);
}

.formular-feld label {
  font-weight: 600;
  color: var(--ink-900);
}

.formular-feld input,
.formular-feld select,
.formular-feld textarea {
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  color: var(--ink-900);
  background-color: var(--white);
  transition: border-color var(--duration-hover) var(--ease-hover);
}

.formular-feld input:hover,
.formular-feld select:hover,
.formular-feld textarea:hover {
  border-color: var(--sky-300);
}

.formular-feld textarea {
  resize: vertical;
}

.formular-hilfetext {
  font-size: var(--font-size-klein);
  color: var(--ink-500);
}

.formular-fehlertext {
  display: none;
  font-size: var(--font-size-klein);
  color: var(--sky-800);
  font-weight: 600;
}

.formular-feld[data-fehler="true"] .formular-fehlertext {
  display: block;
  animation: fehler-einblenden var(--duration-error) var(--ease-out);
}

@keyframes fehler-einblenden {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.formular-feld[data-fehler="true"] input,
.formular-feld[data-fehler="true"] select,
.formular-feld[data-fehler="true"] textarea {
  border-color: var(--sky-800);
  border-width: 2px;
}

.formular-checkbox-zeile {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  margin-bottom: var(--space-2xs);
}

.formular-checkbox-zeile input {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.25em;
  accent-color: var(--sky-700);
}

.formular-checkbox-zeile label {
  font-size: var(--font-size-klein);
  line-height: var(--line-height-klein);
}

#formular-status:not(:empty) {
  margin: var(--space-s) 0;
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius);
  background-color: var(--sky-50);
  border: 1px solid var(--sky-200);
}

/* Antwortseite des Kontaktformulars ohne JavaScript (kontakt.php) */
.formular-antwort-seite {
  padding: var(--space-2xl) var(--seiten-padding-x);
  text-align: center;
}

/* Links auf getönter Fläche. Ausdrücklich NICHT für Schaltflächen:
   ein Knopf bringt seine eigene Fläche mit, und diese Regel hat ihn
   eingefärbt, also dunkelblaue Schrift auf blauer Fläche erzeugt.
   Deshalb überall :not(.btn).
   Seit der Aufhellung erreicht --sky-700 auf --sky-50 nur noch 4.40 und auf
   --sky-100 nur 4.04, beides unter der Anforderung von 4.5 für Text. Auf Weiß
   reicht es mit 4.64. Statt die ganze Skala wieder abzudunkeln bekommen nur
   die Links auf getönten Flächen die nächstdunklere Stufe: 5.91 auf sky-50,
   5.43 auf sky-100. */
.card a:not(.btn),
.hinweisbox a:not(.btn),
.kennzahl a:not(.btn),
.paket a:not(.btn),
.faq-eintrag a:not(.btn),
.bildtafel-bild figcaption a:not(.btn),
.gegenüber-block a:not(.btn) {
  color: var(--sky-800);
}

.card a:not(.btn):hover,
.hinweisbox a:not(.btn):hover,
.kennzahl a:not(.btn):hover,
.paket a:not(.btn):hover,
.faq-eintrag a:not(.btn):hover,
.bildtafel-bild figcaption a:not(.btn):hover,
.gegenüber-block a:not(.btn):hover {
  color: var(--sky-900);
}

/* Honeypot-Feld, für echte Nutzer unsichtbar, für Screenreader ausgeblendet */
.formular-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Footer. Beginnt mit einer kräftigen Kante in der Markenfarbe, damit der
   Übergang vom Inhalt zum Fuß eindeutig ist und nicht nur über den
   Farbwechsel wahrgenommen wird. */
.site-footer {
  margin-top: var(--space-2xl);
  padding: var(--space-2xl) var(--seiten-padding-x) var(--space-l);
  background-color: var(--sky-900);
  color: var(--white);
  border-top: 4px solid var(--sky-700);
}

.site-footer a {
  color: var(--white);
  text-decoration-color: var(--sky-400);
}

.site-footer a:hover {
  color: var(--sky-200);
  text-decoration-color: currentColor;
}

.site-footer h3 {
  margin-bottom: var(--space-2xs);
  font-family: var(--font-sans);
  font-size: var(--font-size-klein);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sky-200);
}

.site-footer p + p {
  margin-top: var(--space-2xs);
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3xs);
}

.wortmarke-footer {
  color: var(--white);
  margin-bottom: var(--space-xs);
}

.wortmarke-footer .wortmarke-endung {
  color: var(--sky-300);
}

.footer-grid {
  display: grid;
  gap: var(--space-l);
  max-width: var(--seiten-max-width);
  margin-inline: auto;
  grid-template-columns: 1fr;
}

@media (min-width: 48em) {
  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: var(--space-xl);
  }
}

.footer-copyright {
  max-width: var(--seiten-max-width);
  margin-inline: auto;
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid var(--footer-trennlinie);
  font-size: var(--font-size-klein);
  color: var(--sky-200);
}