/* ==========================================================================
   Familie Nartschik Hörakustik
   Gestaltung der gesamten Website. Eine einzige Datei, ohne Framework.

   Aufbau dieser Datei:
     1. Einstellwerte          Farben, Abstände, Schriftgrößen
     2. Schriftart             Montserrat, lokal
     3. Grundlagen             Grundeinstellungen für die ganze Seite
     4. Bedienbarkeit          Sprunglink, Fokusrahmen, Klickflächen
     5. Kopfbereich            Logo, Menü, Telefonnummer
     6. Inhaltsbereich
     7. Fußbereich
     8. Bausteine              Knöpfe, Standortkarten, Öffnungszeiten
     9. Breite Inhalte         Tabellen und Ähnliches
   ========================================================================== */


/* ==========================================================================
   1. EINSTELLWERTE
   Hier stehen alle Farben, Abstände und Schriftgrößen an einer Stelle.
   Wird ein Wert hier geändert, ändert er sich überall auf der Website.
   ========================================================================== */

:root {

  /* --- Farben laut Vorgabe --- */
  --farbe-primaer:   #006080;   /* Hauptfarbe, Überschriften und Knöpfe */
  --farbe-dunkel:    #004d66;   /* dunkleres Blau, Fußbereich und Hover */
  --farbe-gold:      #c9a84c;   /* Gold, sparsam für Akzente */
  --farbe-hellblau:  #c2dde6;   /* helles Blau für Flächen und Linien */

  /* --- Abgeleitete Farben --- */
  --farbe-flaeche:      #e8f4f8;  /* sehr helles Blau für abgesetzte Bereiche */
  --farbe-hintergrund:  #ffffff;  /* Seitenhintergrund */
  /* Die gesamte Schrift der Website steht in der Hauptfarbe Petrol. Auf
     Weiß ergibt das 7,0 zu 1 und auf dem hellen Blau 6,3 zu 1, beides weit
     über der Anforderung von 4,5 zu 1.
     Einzige Ausnahme sind die dunklen Flächen, also der Auftakt oben auf
     jeder Seite und der Fußbereich. Dort ist die Schrift weiß. Diese
     Ausnahme steht weiter unten bei .bereich--petrol und .fuss. */
  --farbe-text:         #006080;  /* Fließtext, Hauptfarbe Petrol */
  --farbe-text-leise:   #006080;  /* Nebentexte, ebenfalls Petrol */
  --farbe-text-hell:    #ffffff;  /* Text auf dunklem Grund */
  --farbe-linie:        #c2dde6;  /* Trennlinien */
  --farbe-fokus:        #b8620e;  /* Rahmen bei Tastaturbedienung */

  /* --- Schrift --- */
  --schrift: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI',
             Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Grundschriftgröße 18 Pixel. Alle anderen Größen richten sich danach. */
  --schrift-basis:  18px;
  --schrift-klein:  1rem;      /* 18 Pixel, Nebentexte */
  --schrift-text:   1.111rem;  /* 20 Pixel, Fließtext */
  --schrift-gross:  1.333rem;  /* 24 Pixel, hervorgehobene Absätze */
  --schrift-h3:     1.556rem;  /* 28 Pixel */
  --schrift-h2:     2rem;      /* 36 Pixel */
  --schrift-h1:     2.444rem;  /* 44 Pixel */

  --zeilenhoehe:        1.65;  /* großzügiger Zeilenabstand, gute Lesbarkeit */
  --zeilenhoehe-eng:    1.25;  /* für Überschriften */

  /* --- Abstände --- */
  --abstand-winzig: 0.25rem;
  --abstand-klein:  0.5rem;
  --abstand:        1rem;
  --abstand-gross:  2rem;
  --abstand-riesig: 4rem;

  /* --- Maße --- */
  --breite-inhalt:  1200px;  /* größte Breite des Seiteninhalts */
  --breite-text:    34em;    /* etwa 70 Zeichen je Zeile, angenehm zu lesen */
  --klickflaeche:   48px;    /* Mindestgröße jedes anklickbaren Elements */

  /* --- Ecken --- */
  --ecke-klein: 4px;
  --ecke:       8px;
  --ecke-gross: 16px;

  /* --- Schatten --- */
  --schatten: 0 2px 8px rgba(0, 77, 102, 0.12);
}


/* ==========================================================================
   2. SCHRIFTART
   Montserrat liegt als Datei auf dem eigenen Server unter /assets/fonts/.
   Es wird nichts von Google oder einem anderen fremden Server geladen.

   Es sind nur zwei Dateien nötig. Montserrat ist eine sogenannte variable
   Schrift: Eine einzige Datei enthält alle Strichstärken von dünn bis fett.
   Der Browser stellt die gewünschte Stärke selbst ein. Das spart Ladezeit
   gegenüber einer eigenen Datei je Strichstärke.

   Die eine Datei deckt die üblichen westeuropäischen Zeichen ab, die
   zweite die selteneren wie das ő oder das ș. Der Browser lädt die zweite
   nur, wenn ein solches Zeichen auf der Seite vorkommt.

   font-display: swap sorgt dafür, dass der Text sofort lesbar ist, auch
   bevor die Schriftdatei fertig geladen wurde.
   ========================================================================== */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;   /* deckt 400 normal, 600 halbfett und 700 fett ab */
  font-display: swap;
  src: url('/assets/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ==========================================================================
   3. GRUNDLAGEN
   ========================================================================== */

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

/* Versteckt heißt versteckt.
   Die Voreinstellung des Browsers für das Merkmal "hidden" ist schwächer
   als jede eigene Regel, die display setzt. Ein Knopf mit .knopf hat
   display: inline-flex und war dadurch trotz hidden zu sehen. Genau das ist
   in der Buchung passiert: Auf Schritt eins standen "Weiter" und "Anfrage
   abschicken" nebeneinander. */
[hidden] { display: none !important; }

html {
  font-size: var(--schrift-basis);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Wer in den Systemeinstellungen weniger Bewegung wünscht, bekommt sie auch
   nicht. Das gilt für die ganze Website. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: var(--schrift-text);
  line-height: var(--zeilenhoehe);
  color: var(--farbe-text);
  background: var(--farbe-hintergrund);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: var(--zeilenhoehe-eng);
  /* Überschriften stehen in Petrol wie der übrige Text. Sie heben sich
     über Größe und Strichstärke ab, nicht mehr über die Farbe. */
  color: var(--farbe-primaer);
  margin: 0 0 var(--abstand) 0;
  /* Überschriften dürfen ruhig etwas breiter laufen als der Fließtext. */
  max-width: 22em;
}

/* Die Schriftgröße wächst mit der Bildschirmbreite. Auf dem Handy sind
   die Überschriften dadurch kleiner, aber immer noch deutlich größer als
   der Fließtext. Ohne das würde ein langes Wort wie HÖRLÖSUNGEN über den
   Rand hinauslaufen und die Seite ließe sich seitlich verschieben. */
h1 { font-size: clamp(1.9rem, 1.35rem + 2.6vw, var(--schrift-h1)); }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.7vw, var(--schrift-h2)); margin-top: var(--abstand-gross); }
h3 { font-size: clamp(1.35rem, 1.15rem + 0.9vw, var(--schrift-h3)); margin-top: var(--abstand-gross); }
h4 { font-size: var(--schrift-gross); }

/* Sicherheitsnetz: Ein einzelnes Wort, das trotzdem zu lang ist, wird
   umgebrochen, statt die ganze Seite zu verschieben. */
h1, h2, h3, h4, p, li, dd, dt, address {
  overflow-wrap: break-word;
}

p, li {
  /* Fließtext auf etwa siebzig Zeichen je Zeile begrenzen. Längere Zeilen
     sind für das Auge schwer zu verfolgen. */
  max-width: var(--breite-text);
}

p { margin: 0 0 var(--abstand) 0; }

ul, ol { padding-left: 1.4em; margin: 0 0 var(--abstand) 0; }
li { margin-bottom: var(--abstand-klein); }

a {
  color: var(--farbe-primaer);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--farbe-dunkel); }

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

hr {
  border: 0;
  border-top: 2px solid var(--farbe-linie);
  margin: var(--abstand-gross) 0;
}


/* ==========================================================================
   4. BEDIENBARKEIT
   ========================================================================== */

/* Sprunglink. Liegt außerhalb des Bildes und rutscht herein, sobald jemand
   mit der Tabulatortaste darauf landet. */
.sprunglink {
  position: absolute;
  left: var(--abstand);
  top: -100px;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  min-height: var(--klickflaeche);
  padding: var(--abstand-klein) var(--abstand);
  background: var(--farbe-dunkel);
  color: var(--farbe-text-hell);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--ecke) var(--ecke);
}
.sprunglink:focus {
  top: 0;
  color: var(--farbe-text-hell);
}

/* Deutlich sichtbarer Rahmen bei Bedienung mit der Tastatur. Er ist
   absichtlich kräftig, damit auch bei schwachem Sehen erkennbar bleibt,
   wo man sich gerade befindet. */
:focus-visible {
  outline: 3px solid var(--farbe-fokus);
  outline-offset: 3px;
  border-radius: var(--ecke-klein);
}

/* Auf dunklen Flächen ist der orange Rahmen nahezu unsichtbar: gegen Petrol
   erreicht er nur 1,6 zu 1, gefordert sind 3 zu 1. Wer mit der Tastatur
   bedient, sähe dort nicht, wo er gerade steht. Auf Petrol und im dunklen
   Fußbereich wird der Rahmen deshalb weiß, das ergibt 7,0 zu 1. */
.bereich--petrol :focus-visible,
.fuss :focus-visible {
  outline-color: var(--farbe-hintergrund);
}

/* Jedes anklickbare Element ist mindestens 48 mal 48 Pixel groß, damit es
   sich mit dem Finger sicher treffen lässt. */
a[href], button, label[for], input[type="checkbox"] + label, summary {
  min-height: var(--klickflaeche);
}
.navigation__link,
.fuss__liste a,
.knopf,
.telefon-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--klickflaeche);
  min-width: var(--klickflaeche);
}


/* ==========================================================================
   5. KOPFBEREICH
   ========================================================================== */

.kopf {
  background: var(--farbe-hintergrund);
  border-bottom: 3px solid var(--farbe-hellblau);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Wird das Handy zum Lesen gedreht, ist der Bildschirm nur noch etwa 375
   Pixel hoch. Ein mitlaufender Kopf würde davon ein Drittel belegen. Deshalb
   scrollt er in dieser Lage mit nach oben weg und gibt den Platz frei. */
@media (max-height: 480px) and (orientation: landscape) {
  .kopf { position: static; }
  .kopf__inhalt { padding-top: var(--abstand-winzig); }
  .navigation__link { padding-top: var(--abstand-klein); padding-bottom: var(--abstand-klein); }
}

/* Der Kopf ist bewusst zweizeilig aufgebaut. Oben Logo und Telefonnummer,
   darunter die Navigation über die volle Breite. Alle sechs Menüpunkte
   nebeneinander in eine Zeile mit Logo und Telefonnummer zu quetschen
   würde die Schrift und die Klickflächen zu klein machen. */
.kopf__inhalt {
  max-width: var(--breite-inhalt);
  margin: 0 auto;
  padding: var(--abstand-klein) var(--abstand) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand);
}

/* Das Logo ist nur die goldene Bildmarke. Der Name steht als Text daneben,
   dadurch bleibt er auch bei kleiner Darstellung scharf und lesbar. */
.kopf__logo {
  display: flex;
  align-items: center;
  gap: var(--abstand-klein);
  flex: 0 0 auto;
  text-decoration: none;
  color: var(--farbe-primaer);
}
.kopf__logo:hover .kopf__marke { color: var(--farbe-primaer); }

.kopf__logo-bild {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
}
.kopf__logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.kopf__marke {
  font-weight: 700;
  font-size: var(--schrift-gross);
  color: var(--farbe-primaer);
}
.kopf__claim {
  font-size: var(--schrift-klein);
  color: var(--farbe-text-leise);
}

/* Text, den nur Vorleseprogramme hören, der aber nicht auf dem Bildschirm
   erscheint. Wird zum Beispiel für Zusätze wie "zur Startseite" genutzt. */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.kopf__telefon {
  margin-left: auto;
  order: 5;
  text-align: right;
  line-height: 1.2;
}
.kopf__telefon-ort {
  display: block;
  font-size: var(--schrift-klein);
  color: var(--farbe-text-leise);
}
.kopf__telefon-link {
  font-size: var(--schrift-gross);
  font-weight: 700;
  color: var(--farbe-primaer);
  text-decoration: none;
  white-space: nowrap;
}
.kopf__telefon-link:hover { text-decoration: underline; }

/* --- Navigation --- */

/* Die Navigation belegt die zweite Zeile über die volle Breite. */
.navigation {
  flex: 0 0 100%;
  order: 10;
  border-top: 2px solid var(--farbe-linie);
  margin-top: var(--abstand-klein);
}

.navigation__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-winzig);
}
.navigation__punkt { margin: 0; max-width: none; }

.navigation__link {
  padding: var(--abstand-klein) var(--abstand);
  margin-top: -2px;   /* liegt auf der Trennlinie, damit der aktive Punkt sauber anschließt */
  color: var(--farbe-primaer);
  font-weight: 600;
  font-size: var(--schrift-klein);
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: var(--ecke);
  border-bottom: 4px solid transparent;
}
.navigation__link:hover {
  background: var(--farbe-flaeche);
  color: var(--farbe-dunkel);
}
.navigation__link--aktiv {
  color: var(--farbe-primaer);
  border-bottom-color: var(--farbe-gold);
  background: var(--farbe-flaeche);
}

/* --- Aufklappbares Menü für schmale Bildschirme --- */

.menue-schalter { display: none; }

.menue-knopf {
  display: none;              /* auf breiten Bildschirmen nicht nötig */
  align-items: center;
  gap: var(--abstand-klein);
  min-height: var(--klickflaeche);
  padding: var(--abstand-klein) var(--abstand);
  margin-left: auto;
  font-weight: 700;
  color: var(--farbe-primaer);
  background: var(--farbe-flaeche);
  border: 2px solid var(--farbe-hellblau);
  border-radius: var(--ecke);
  cursor: pointer;
}
.menue-knopf__balken {
  display: block;
  width: 24px;
  height: 3px;
  background: currentColor;
  box-shadow: 0 7px 0 currentColor, 0 -7px 0 currentColor;
}

@media (max-width: 900px) {
  .kopf__inhalt { gap: var(--abstand-klein); }

  .menue-knopf { display: inline-flex; }

  .navigation {
    display: none;
    border-top: 0;
    margin-top: 0;
  }
  /* Ist das Kontrollkästchen angehakt, klappt das Menü auf. Das geschieht
     ohne JavaScript, allein über CSS. */
  .menue-schalter:checked ~ .navigation { display: block; }

  .navigation__liste { flex-direction: column; gap: 0; }
  .navigation__link {
    display: flex;
    width: 100%;
    padding: var(--abstand) var(--abstand-klein);
    font-size: var(--schrift-text);
    border-bottom: 2px solid var(--farbe-linie);
    border-radius: 0;
  }
  .navigation__link--aktiv {
    border-left: 6px solid var(--farbe-gold);
    border-bottom-color: var(--farbe-linie);
  }

  /* Auf schmalen Bildschirmen sollen Logo und Menütaste in eine Zeile
     passen. Der Leitspruch tritt dafür zurück, der Name bleibt. */
  .kopf__inhalt { gap: var(--abstand-klein); }
  .kopf__logo { gap: var(--abstand-winzig); }
  .kopf__logo-bild { width: 40px; height: 40px; }
  .kopf__marke { font-size: var(--schrift-klein); }
  .kopf__claim { display: none; }

  /* Die Menütaste bleibt mit 48 Pixeln Höhe gut treffbar, wird aber
     schmaler, damit sie neben das Logo in die erste Zeile passt. */
  .menue-knopf { padding: var(--abstand-klein); gap: var(--abstand-winzig); }

  .kopf__telefon { margin-left: 0; text-align: left; order: 5; }
  .kopf__telefon-ort { display: inline; margin-right: var(--abstand-klein); }
  .kopf__telefon-link { font-size: var(--schrift-text); }
}


/* ==========================================================================
   6. INHALTSBEREICH
   ========================================================================== */

.inhalt {
  flex: 1 0 auto;   /* schiebt den Fußbereich auch bei kurzen Seiten nach unten */
}

.bereich {
  padding: var(--abstand-riesig) var(--abstand);
}
.bereich--flaeche { background: var(--farbe-flaeche); }

/* Petrolfläche. Wird auf der Startseite für die Vorstellung benutzt, damit
   der Auftakt sich klar vom Rest der Seite abhebt. Weiße Schrift auf
   #006080 ergibt einen Kontrast von 7,0 zu 1 und liegt damit deutlich über
   der Anforderung von 4,5 zu 1. */
.bereich--petrol {
  background: var(--farbe-primaer);
  color: var(--farbe-text-hell);
}
.bereich--petrol .titel,
.bereich--petrol strong { color: var(--farbe-text-hell); }
.bereich--petrol .titel__zusatz { color: var(--farbe-hellblau); }
.bereich--petrol a:not(.knopf) { color: var(--farbe-hellblau); }

/* Auf dunklem Grund franst helle Schrift optisch aus. Fettdruck fällt
   dadurch weniger auf als auf Weiß. Deshalb steht der Fließtext hier auf
   einem leicht getönten Weiß und nur das Hervorgehobene auf reinem Weiß.
   Der Unterschied wirkt nicht wie ein Farbwechsel, bringt den Fettdruck
   aber zurück. Gemessene Kontraste: 6,3 zu 1 und 7,0 zu 1, beide deutlich
   über der Anforderung von 4,5 zu 1.
   Der größere Zeilenabstand kommt aus demselben Grund: Helle Zeilen auf
   dunklem Grund laufen sonst ineinander. */
.bereich--petrol p {
  color: var(--farbe-flaeche);
  line-height: 1.75;
}

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


/* ==========================================================================
   7. FUSSBEREICH
   ========================================================================== */

/* Der Fußbereich ist eine Nachschlagestelle, kein zweiter Werbeblock. Alles
   darin ist eine Stufe kleiner gesetzt als im Hauptteil und enger geführt.
   Die Angaben bleiben vollständig und gut lesbar, treten aber zurück.
   Verkleinert wird nur hier. Auf der Standortseite stehen dieselben
   Bausteine weiterhin in voller Größe, denn dort sind sie der Inhalt. */
.fuss {
  flex-shrink: 0;
  background: var(--farbe-dunkel);
  color: var(--farbe-text-hell);
  padding: var(--abstand-gross) var(--abstand);
  margin-top: var(--abstand-riesig);
  font-size: var(--schrift-klein);
  line-height: 1.5;
}

.fuss__inhalt {
  max-width: var(--breite-inhalt);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--abstand-gross);
}

.fuss a { color: var(--farbe-hellblau); }
.fuss a:hover { color: var(--farbe-text-hell); }

/* Die Standortnamen im Fußbereich sind h2, damit die Gliederung stimmt.
   Sie sollen aber nicht wie eine Hauptüberschrift wirken. Sie heben sich
   hier über die Strichstärke und eine leicht geöffnete Laufweite ab, nicht
   über die Größe. Das wirkt ruhiger als eine große Überschrift. */
.fuss h2,
.fuss h3 {
  color: var(--farbe-text-hell);
  font-size: var(--schrift-text);
  font-weight: 600;
  letter-spacing: 0.03em;
  margin: 0 0 var(--abstand-klein) 0;
}

/*
 * Die beiden Häuser: auf dem Handy untereinander, ab 640 Pixeln nebeneinander.
 *
 * Der Umbruch steht hier ausdrücklich als Medienabfrage und nicht als
 * auto-fit. Grund: Die Trennlinie zwischen den Häusern muss genau dann von
 * waagerecht auf senkrecht wechseln, wenn auch die Anordnung wechselt.
 * Mit auto-fit entscheidet der Browser den Umbruch selbst, und zwischen 620
 * und 630 Pixeln standen die Häuser bereits untereinander, während die Linie
 * schon seitlich saß. Beides hängt jetzt an derselben Zahl und kann nicht
 * mehr auseinanderlaufen.
 */
.fuss__standorte {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--abstand-gross);
}

@media (min-width: 640px) {
  .fuss__standorte { grid-template-columns: 1fr 1fr; }
}

/* --- Die Kontaktdaten im Fußbereich --- */

/*
 * Eine feine Linie trennt die beiden Standorte voneinander, ohne einen
 * Rahmen zu ziehen. Sie steht immer nur ZWISCHEN den Häusern, nie vor dem
 * ersten: Eine Linie am äußeren Rand sähe aus wie ein Kasten, dem die
 * übrigen Seiten fehlen.
 *
 * Auf dem Handy stehen die Häuser untereinander, dort läuft die Linie
 * waagerecht. Vorher fehlte sie dort ganz, und die beiden Anschriften
 * gingen ineinander über. Gerade wo die Angaben untereinander stehen,
 * braucht es die Trennung am nötigsten.
 */
/* Zwei Pixel bei 45 Prozent Deckkraft. Das ergibt auf dem dunklen Grund
   einen Kontrast von 3,2 zu 1 und ist damit auch auf einem Handydisplay bei
   Tageslicht zu erkennen. Die vorherige Linie mit einem Pixel bei 30 Prozent
   kam auf 2,2 zu 1 und ging draußen unter. */
.fuss__standorte > *:not(:first-child) .standort-karte,
.fuss .standort-karte + .standort-karte {
  padding-top: var(--abstand-gross);
  border-top: 2px solid rgba(255, 255, 255, 0.45);
}

@media (min-width: 640px) {
  /* Nebeneinander wandert die Linie an die Seite. Dieselbe Zahl wie beim
     Umbruch der Spalten oben, damit beides zusammen umschaltet. */
  .fuss__standorte > *:not(:first-child) .standort-karte,
  .fuss .standort-karte + .standort-karte {
    padding-top: 0;
    border-top: 0;
    padding-left: var(--abstand-gross);
    border-left: 2px solid rgba(255, 255, 255, 0.45);
  }
}

.fuss .anschrift,
.fuss .standort-karte__kontakt {
  margin-bottom: var(--abstand-klein);
}

/* Die Telefonnummer bleibt die wichtigste Angabe im Fußbereich. Sie behält
   den Fettdruck, wird aber nicht mehr größer gesetzt als der Rest. Die
   Klickfläche von 48 Pixeln bleibt unangetastet, damit sie sich auf dem
   Handy sicher mit dem Finger treffen lässt. */
.fuss .telefon-link {
  font-size: var(--schrift-klein);
}

/* Öffnungszeiten enger führen. Die Schrift bleibt bei 18 Pixeln, gespart
   wird ausschließlich an den Abständen zwischen den Zeilen. Kleiner zu
   setzen wäre der falsche Weg, das geht bei dieser Zielgruppe zuerst
   verloren. */
.fuss .oeffnungszeiten {
  line-height: 1.45;
}
.fuss .oeffnungszeiten__zeile {
  padding: 0;
}
.fuss .oeffnungszeiten__tag {
  font-weight: 400;
  flex: 1 1 9em;
}
.fuss .offen-status {
  margin-bottom: var(--abstand-winzig);
}

.fuss__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand);
}
.fuss__liste li { max-width: none; margin: 0; }

.fuss__rechtliches,
.fuss__copyright {
  grid-column: 1 / -1;
}
.fuss__copyright {
  margin: 0;
  padding-top: var(--abstand);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  font-size: var(--schrift-klein);
  color: var(--farbe-hellblau);
  max-width: none;
}


/* ==========================================================================
   8. BAUSTEINE
   ========================================================================== */

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

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-klein);
  min-height: var(--klickflaeche);
  padding: var(--abstand-klein) var(--abstand-gross);
  background: var(--farbe-primaer);
  color: var(--farbe-text-hell);
  font-size: var(--schrift-text);
  font-weight: 700;
  /* Der Zeilenabstand steht hier fest und wird NICHT von der Umgebung
     geerbt. Sonst richtet sich die Höhe eines Knopfes danach, wo er
     zufällig steht: Auf der Petrolfläche gilt für Absätze ein größerer
     Zeilenabstand von 1,75, damit helle Zeilen auf dunklem Grund nicht
     ineinanderlaufen. Diese Regel traf auch den Absatz, in dem die Knöpfe
     des Auftakts stehen, und machte sie zwei Pixel höher als jeden anderen
     Knopf der Website. Auf Online Hörtest fiel es am 13. September 2026
     auf, weil dort oben und unten derselbe Knopf mit derselben
     Beschriftung steht. */
  line-height: var(--zeilenhoehe);
  text-decoration: none;
  border: 3px solid var(--farbe-primaer);
  border-radius: var(--ecke);
  cursor: pointer;
}
/* Ein Knopf darf nie breiter werden als der Platz, den er hat. */
.knopf { max-width: 100%; }

.knopf:hover {
  background: var(--farbe-dunkel);
  border-color: var(--farbe-dunkel);
  color: var(--farbe-text-hell);
}
.knopf--zweit {
  background: transparent;
  color: var(--farbe-primaer);
}
.knopf--zweit:hover {
  background: var(--farbe-flaeche);
  color: var(--farbe-dunkel);
}

/* --- Anschrift und Standortkarte --- */

.anschrift {
  font-style: normal;
  margin-bottom: var(--abstand);
}
.anschrift__firma { font-weight: 600; }

.standort-karte__kontakt { margin-bottom: var(--abstand); }

/* Telefonnummern, E-Mail-Adressen und Webadressen sind eigenständige
   Bedienelemente, keine Links im Fließtext. Sie bekommen deshalb die volle
   Klickfläche von 48 Pixeln Höhe, damit sie sich mit dem Finger sicher
   treffen lassen. */
.standort-karte__kontakt a,
.kontakt a {
  display: inline-flex;
  align-items: center;
  min-height: var(--klickflaeche);
  /* Lange E-Mail-Adressen dürfen auf schmalen Bildschirmen umbrechen. */
  overflow-wrap: anywhere;
}

.telefon-link {
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.telefon-link:hover { text-decoration: underline; }
.telefon-link__symbol { margin-right: 0.3em; }

/* --- Öffnungszeiten --- */

.oeffnungszeiten {
  margin: 0;
  font-size: var(--schrift-klein);
}
.oeffnungszeiten__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-klein);
  padding: var(--abstand-winzig) 0;
}
.oeffnungszeiten__tag {
  font-weight: 600;
  margin: 0;
  flex: 1 1 12em;
}
.oeffnungszeiten__zeit {
  margin: 0;
  flex: 0 1 auto;
  white-space: nowrap;
}
.oeffnungszeiten__hinweis {
  margin: var(--abstand-winzig) 0 0 0;
  font-style: italic;
}

/* --- Hinweisleiste für Aktionen, Bauform Streifen --- */

.aktion {
  background: var(--farbe-gold);
  color: #1a1a1a;
}
.aktion__inhalt {
  max-width: var(--breite-inhalt);
  margin: 0 auto;
  padding: var(--abstand-klein) var(--abstand);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand);
}
.aktion__text {
  margin: 0;
  max-width: 60em;
  flex: 1 1 20em;
}
.aktion__titel { display: block; }
.aktion__knopf {
  min-height: var(--klickflaeche);
  display: inline-flex;
  align-items: center;
  padding: var(--abstand-winzig) var(--abstand);
  background: #1a1a1a;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--ecke);
}
.aktion__knopf:hover { background: #000000; color: #ffffff; }

.aktion__schliessen {
  /* 48 mal 48 Pixel, damit die Taste mit dem Finger sicher zu treffen ist. */
  width: var(--klickflaeche);
  height: var(--klickflaeche);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  line-height: 1;
  color: #1a1a1a;
  background: transparent;
  border: 2px solid transparent;
  border-radius: var(--ecke);
  cursor: pointer;
}
.aktion__schliessen:hover { border-color: #1a1a1a; }


/* --- Hinweisleiste für Aktionen, Bauform Fenster --- */

.aktion-fenster {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--abstand);
}
.aktion-fenster__hintergrund {
  position: absolute;
  inset: 0;
  background: rgba(0, 40, 55, 0.6);
}
.aktion-fenster__kasten {
  position: relative;
  z-index: 1;
  max-width: 34em;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--abstand-gross);
  background: var(--farbe-hintergrund);
  border-top: 6px solid var(--farbe-gold);
  border-radius: var(--ecke-gross);
  box-shadow: 0 8px 32px rgba(0, 40, 55, 0.35);
}
.aktion-fenster__titel { margin-top: 0; padding-right: 2em; }
.aktion-fenster__text { max-width: none; }
.aktion-fenster__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand);
  margin-top: var(--abstand-gross);
}
.aktion-fenster__x {
  position: absolute;
  top: var(--abstand-klein);
  right: var(--abstand-klein);
  width: var(--klickflaeche);
  height: var(--klickflaeche);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--farbe-primaer);
  background: transparent;
  border: 2px solid transparent;
  border-radius: var(--ecke);
  cursor: pointer;
}
.aktion-fenster__x:hover { border-color: var(--farbe-dunkel); }

/* Solange das Fenster offen ist, scrollt die Seite dahinter nicht mit. */
body.fenster-offen { overflow: hidden; }


/* ==========================================================================
   8a. AUFTAKT
   Der erste Abschnitt jeder Seite. Erzeugt wird er von der Funktion
   auftakt() in /inc/auftakt.php. Er ist der einzige farbig hervorgehobene
   Abschnitt einer Seite. Alles darunter steht auf Weiß oder Hellblau.
   ========================================================================== */

/* Die Goldkante unten schließt den Auftakt sichtbar ab und trennt ihn vom
   zweiten Block. Dieselbe Kante trägt der Fußbereich am oberen Rand. So
   klammern zwei gleiche Linien den Inhalt jeder Seite ein. */
.auftakt {
  border-bottom: 5px solid var(--farbe-gold);
}

.auftakt__titel {
  margin-top: 0;
}

/* Auftakt, der nur aus der Überschrift besteht. Er bekommt weniger Höhe,
   damit die Petrolfläche nicht leer wirkt und der eigentliche Inhalt der
   Seite früher sichtbar wird. */
.auftakt--schlank {
  padding-top: var(--abstand-gross);
  padding-bottom: var(--abstand-gross);
}

/* Der Einstiegstext ist eine Stufe größer als der übrige Fließtext. Er
   beantwortet die Frage, worum es auf dieser Seite geht, und soll ohne
   Anstrengung lesbar sein. Die begrenzte Breite hält die Zeilen bei etwa
   70 Zeichen. Längere Zeilen verliert das Auge beim Rücksprung. */
.auftakt__text {
  max-width: var(--breite-text);
  font-size: var(--schrift-gross);
}

/* Nebenangabe unter der Überschrift, etwa der Stand einer Rechtsseite.
   Kleiner und leiser als der Einstiegstext, aber mit 5,0 zu 1 immer noch
   klar über der Anforderung. */
.auftakt__klein {
  font-size: var(--schrift-klein);
  max-width: var(--breite-text);
}
.bereich--petrol .auftakt__klein { color: var(--farbe-hellblau); }

.auftakt__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand);
  margin-top: var(--abstand-gross);
  max-width: none;
}

/* Auftakt mit dem Knopf rechts neben der Überschrift.
   Benutzt auf Online Hörtest, wo der Auftakt nur aus der Überschrift und
   einem Knopf besteht. Stünden beide untereinander, bliebe die rechte
   Hälfte des Petrolstreifens leer.

   Warum ein Raster und kein flex mit space-between: Käme später doch noch
   ein Einstiegstext dazu, liefen mit flex Überschrift und Text in einer
   Spalte zusammen, und der Knopf säße neben beiden auf halber Höhe. Im
   Raster steht der Knopf in der zweiten Spalte und geht über alle Zeilen,
   egal wie viele es sind.

   Erst ab 900 Pixeln. Darunter bleibt der Knopf unter der Überschrift, dort
   hätte nebeneinander keines von beidem noch Platz. */
@media (min-width: 900px) {
  .auftakt--knopf-rechts .auftakt__inhalt {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: var(--abstand-gross);
  }

  .auftakt--knopf-rechts .auftakt__knoepfe {
    grid-column: 2;
    grid-row: 1 / -1;
    /* Weder oben noch unten ein eigener Abstand. Der Knopf steht neben der
       Überschrift, und die Höhe der Fläche soll allein von der Überschrift
       kommen, genau wie auf Hörlösungen und Warum wir. Mit einem Abstand
       unten war der Knopf das höchste Element und die Petrolfläche dadurch
       zwei Pixel höher als dort. */
    margin-top: 0;
    margin-bottom: 0;
    justify-content: flex-end;
  }
}

/* Knöpfe auf der Petrolfläche. Der volle Knopf ist weiß mit petrolfarbener
   Schrift, Kontrast 7,0 zu 1. Der zweite ist nur umrandet und bleibt damit
   sichtbar zweite Wahl. */
.knopf--hell {
  background: var(--farbe-hintergrund);
  color: var(--farbe-primaer);
  border-color: var(--farbe-hintergrund);
}
.knopf--hell:hover {
  background: var(--farbe-hellblau);
  color: var(--farbe-dunkel);
  border-color: var(--farbe-hellblau);
}

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


/* ==========================================================================
   8b. INHALTSBAUSTEINE DER SEITEN
   ========================================================================== */

/* --- Überschriften mit zweitem Teil --- */
/* Die bisherige Website setzt in fast jeder Überschrift einen Teil fett und
   auf eine eigene Zeile. Das ist hier nachgebildet. */

.titel__zusatz {
  display: block;
  color: var(--farbe-primaer);
}
.titel__unter {
  display: block;
  margin-top: var(--abstand-winzig);
  font-size: var(--schrift-gross);
  font-weight: 400;
  color: var(--farbe-text-leise);
}
.titel--mitte { margin-left: auto; margin-right: auto; text-align: center; }

/* --- Sprungmarken --- */
/* Der Kopfbereich bleibt beim Scrollen oben stehen. Ohne diese Regel würde
   eine angesprungene Überschrift darunter verschwinden. Der Wert entspricht
   der Höhe des Kopfes plus etwas Luft. */

[id] { scroll-margin-top: 11rem; }

@media (max-width: 900px) {
  [id] { scroll-margin-top: 9rem; }
}

/* Zusätzlicher Ankerpunkt für eine alte Kennung, unsichtbar. */
.anker-alt {
  display: block;
  height: 0;
  overflow: hidden;
}

/* --- Bilder --- */

.bild {
  width: 100%;
  height: auto;
  border-radius: var(--ecke-gross);
}

/* --- Platzhalter für ein Bild, das noch fehlt --- */

/*
 * Der Kasten belegt genau so viel Platz wie das spätere Bild: quadratisch,
 * so wie alle Themenbilder der Website. Wird die richtige Aufnahme
 * eingesetzt, verschiebt sich dadurch nichts.
 *
 * Er ist absichtlich auffällig. Ein blasser grauer Kasten würde nach einer
 * Weile wie ein Gestaltungsfehler aussehen, statt wie eine offene Aufgabe.
 */
.platzhalter {
  aspect-ratio: 1 / 1;
  border: 3px dashed var(--farbe-hellblau);
  border-radius: var(--ecke-gross);
  background: var(--farbe-flaeche);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-klein);
  padding: var(--abstand-gross);
  text-align: center;
}

.platzhalter__marke {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--farbe-primaer);
}

.platzhalter__text {
  font-size: 1.05rem;
  line-height: var(--zeilenhoehe);
  color: var(--farbe-text);
  max-width: 22rem;
}

/* --- Einleitung der Startseite --- */

/*
 * Der Auftakt der Startseite besteht aus drei Teilen: Überschrift, Bild und
 * Text. Sie stehen im Quelltext in der Reihenfolge, die auf dem Handy
 * gelten soll:
 *
 *     1. Familie Nartschik, Hören ist Können
 *     2. das Bild
 *     3. der Text
 *
 * Vorher steckte die Überschrift mit im Textblock. Auf dem Handy standen
 * dadurch Überschrift und der gesamte Text zuerst, und das Bild rutschte
 * ganz ans Ende des Abschnitts. Wer die Seite auf dem Handy öffnete, sah
 * die beiden Inhaber erst nach vier Absätzen.
 *
 * Am Rechner ordnet das Raster die Teile neu an, siehe weiter unten. Die
 * Abfolge steht damit nur an einer Stelle im Quelltext und nicht zweimal.
 */
.einleitung {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--abstand-gross);
  align-items: center;
}

.einleitung__titel { margin-bottom: 0; }

/*
 * Das Porträt ist genauso groß wie alle anderen Bilder der Startseite.
 *
 * Vorher war es deutlich kleiner: Eine Obergrenze von 26rem hielt es bei
 * 768 Pixeln auf 468 fest, während die Themenbilder daneben 732 breit
 * waren. Am Rechner kam ein zweiter Grund dazu, das Raster gab ihm nur
 * 0,8 von 2 Spaltenanteilen. Gemessen: 451 gegen 564 Pixel.
 *
 * Das Bild ist hochformatig, alle anderen sind quadratisch. Damit die
 * Reihe trotzdem gleichmäßig wirkt, steht es jetzt in einem quadratischen
 * Rahmen und wird darin vollständig gezeigt, nicht beschnitten. Weil es
 * freigestellt auf weißem Grund ist, geht der schmale Rand links und
 * rechts nahtlos in die Fläche über und fällt nicht auf.
 *
 * contain und nicht cover: cover würde den Rahmen randlos füllen, dabei
 * aber oben und unten je ein Zehntel abschneiden. Bei einem Bild der
 * beiden Inhaber ist das die falsche Sparsamkeit.
 */
/*
 * Das Porträt.
 *
 * Es braucht keine Sonderbehandlung mehr. Die Bilddatei ist selbst
 * quadratisch, genau wie alle anderen Bilder der Startseite: Das
 * hochformatige Porträt steht darin unbeschnitten und mittig auf weißem
 * Grund.
 *
 * VORGESCHICHTE, damit das nicht jemand zurückbaut:
 * Vorher war die Datei hochformatig und wurde per CSS in einen
 * quadratischen Rahmen eingepasst. Das hat zweimal nicht funktioniert.
 * Beim ersten Versuch hielt eine Obergrenze das Bild klein, beim zweiten
 * ragte es 86 Pixel über seinen Kasten hinaus und wurde abgeschnitten,
 * weil sich eine Höhenangabe in Prozent nicht auflösen ließ. Der Fehler
 * lag nicht in der Regel, sondern darin, dass eine Form erzwungen wurde,
 * die das Bild nicht hatte.
 *
 * Jetzt hat die Datei die richtige Form, und das CSS muss nichts mehr
 * richten. Wer das Bild ersetzt: bitte wieder quadratisch anliefern.
 *
 * width: 100% ist nötig, nicht Kosmetik. Ein Rasterfeld mit margin: 0 auto
 * zentriert sich und schrumpft dabei auf die Breite seines Inhalts, statt
 * die Spalte zu füllen.
 */
.einleitung__bild {
  width: 100%;
  margin: 0 auto;
}

/* Auf der Petrolfläche wirkt eine hellblaue Bildunterlage schmutzig, und
   das freigestellte Porträt geht so nahtlos in seinen Rand über. */
.bereich--petrol .einleitung__bild .bild { background: var(--farbe-hintergrund); }

/*
 * Am Rechner: Überschrift und Text links untereinander, das Bild rechts
 * daneben über die volle Höhe. Also genau die Anordnung von vorher, nur
 * ohne dass dafür die Reihenfolge im Quelltext falsch sein muss.
 */
@media (min-width: 900px) {
  .einleitung {
    /* Zwei gleiche Spalten wie bei den Themenblöcken darunter. Damit ist
       das Porträt exakt so breit wie jedes andere Bild der Seite. */
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    /* Nur noch senkrechter Abstand zwischen Überschrift und Text, den
       waagerechten Abstand zum Bild regelt die Spaltenlücke. */
    row-gap: var(--abstand);
    column-gap: var(--abstand-riesig);
    align-items: start;
  }

  .einleitung__titel { grid-column: 1; grid-row: 1; }
  .einleitung__text  { grid-column: 1; grid-row: 2; }

  /*
   * Das Bild steht über beide Zeilen und bleibt beim Scrollen stehen,
   * während Überschrift und Text daran vorbeilaufen. Genau wie die Bilder
   * der Themenblöcke darunter und die Porträts auf Warum wir.
   *
   * align-self: start statt center, ebenfalls wie bei den Themenblöcken:
   * Das Bild beginnt oben bündig mit der Überschrift. Mittig ausgerichtet
   * müsste es beim Scrollen erst ein Stück nach oben wandern, bevor es
   * stehen bleibt, und das sieht aus wie ein Ruckler.
   *
   * Der Abstand nach oben entspricht der Höhe des Kopfbereichs, der
   * ebenfalls stehen bleibt. Sonst verschwände das Bild dahinter.
   */
  .einleitung__bild {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: start;
    position: sticky;
    top: 11rem;
  }
}

/* --- Themenblöcke --- */
/* Benutzt auf der Startseite, auf Hörlösungen und, in einer Abwandlung mit
   ungleichen Spalten, für die beiden Personen auf Warum wir. Die Startseite
   verwendet bewusst dieselben Klassen wie Hörlösungen und keine eigenen.
   Zwei getrennte Regelsätze für dasselbe Aussehen laufen mit der Zeit
   auseinander, einer nicht. */

.thema,
.person {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--abstand-gross);
  align-items: start;
}

@media (min-width: 900px) {
  .thema,
  .person { grid-template-columns: 1fr 1fr; gap: var(--abstand-riesig); }

  .person { grid-template-columns: 22rem 1fr; }

  /* Bei jedem zweiten Block wandert das Bild auf die andere Seite. Das
     bringt Ruhe in eine lange Seite. */
  .thema--gedreht .thema__bild { order: 2; }

  .person--gedreht .person__bild { order: 2; }

  /* Bei den Personen sind die beiden Spalten nicht gleich breit: Das Bild
     steht in einer schmalen Spalte von 22rem, der Text in der breiten.
     Wandert das Bild nach rechts, müssen die Breiten mitwandern. Sonst
     landet der Text in der schmalen Spalte und das Bild wird riesig.
     Genau das war bei Marcus Nartschik der Fall: 732 Pixel Bild neben
     396 Pixeln Text, während es bei Kristin Nartschik umgekehrt war. */
  .person--gedreht { grid-template-columns: 1fr 22rem; }
}

/* Die Frage vor dem Knopf "Mehr erfahren". Sie steht nur auf der
   Startseite, weil nur dort von einem Anreißer weitergeführt wird. */
.thema__frage {
  font-weight: 600;
  color: var(--farbe-primaer);
}

/* Das Bild bleibt beim Scrollen stehen, der Text läuft daran vorbei. Der
   Leser verliert dadurch nicht aus dem Blick, worum es in diesem Abschnitt
   geht. Der Abstand nach oben entspricht der Höhe des Kopfbereichs, der
   ebenfalls stehen bleibt.
   Auf schmalen Bildschirmen steht das Bild über dem Text statt daneben.
   Dort wäre ein stehenbleibendes Bild nur im Weg, deshalb ist es dort
   ausgeschaltet. */
.thema__bild,
.person__bild { position: sticky; top: 11rem; }
@media (max-width: 899px) {
  .thema__bild,
  .person__bild,
  /* Auf dem Handy steht das Porträt über dem Text und nicht daneben.
     Ein stehenbleibendes Bild wäre dort nur im Weg. */
  .einleitung__bild { position: static; }
}

/* --- Zertifikatsband --- */

/* Das Zertifikatsband gehört zum Abschnitt über Implantate. Es belegt, was
   der Text darüber sagt: Zulassung für alle Hersteller. Es steht deshalb im
   selben Abschnitt, nur durch eine Linie und eine eigene Fläche abgesetzt. */
.zertifikate-block {
  margin-top: var(--abstand-riesig);
  padding-top: var(--abstand-gross);
  border-top: 2px solid var(--farbe-linie);
}
.zertifikate-block .titel { margin-top: 0; }

.zertifikate {
  list-style: none;
  margin: var(--abstand-gross) 0 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--abstand-gross);
  align-items: center;
  /* justify-items steht bewusst auf stretch, dem Vorgabewert. Bei center
     würde die Zelle auf die Inhaltsbreite schrumpfen, das Bild seine Breite
     aber wiederum von der Zelle beziehen. Beide würden sich gegenseitig
     kleinrechnen, bis nichts mehr übrig ist. */
}
.zertifikate__punkt { margin: 0; max-width: none; }
.zertifikate__bild {
  width: 100%;
  max-width: 180px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--ecke);
}

/* --- Personen auf der Seite Warum wir --- */

.person__bild { text-align: center; }
.person__bild .bild {
  max-width: 20rem;
  margin: 0 auto var(--abstand);
  border-radius: 50%;
  background: var(--farbe-flaeche);
}
.person__name {
  font-size: var(--schrift-h3);
  margin-bottom: 0;
}
.person__rolle {
  display: block;
  font-size: var(--schrift-klein);
  font-weight: 400;
  color: var(--farbe-text-leise);
}
.person__gruss { margin-top: var(--abstand-gross); }

.zitat {
  margin: 0 0 var(--abstand-gross) 0;
  padding-left: var(--abstand);
  border-left: 5px solid var(--farbe-gold);
}
.zitat p {
  font-size: var(--schrift-gross);
  color: var(--farbe-primaer);
}

/* --- Angebotsliste --- */

.angebot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--abstand-gross);
  margin-top: var(--abstand-gross);
}
/*
 * Die neun Kacheln unter "Unser Angebot".
 *
 * Derselbe Rahmen und derselbe Stand wie die Kundenstimmen auf der
 * Startseite und auf Hörlösungen: drei Pixel in der Hauptfarbe und ein
 * zweistufiger Schatten, der die Kachel über die Seite hebt.
 *
 * BEWUSST OHNE HOVER-EFFEKT, anders als bei den Kundenstimmen und den
 * häufigen Fragen. Diese Kacheln lassen sich nicht bedienen, sie enthalten
 * keinen Knopf und klappen nichts auf. Eine Kachel, die unter dem Zeiger
 * reagiert, verspricht aber genau das. Wer dann klickt und nichts passiert,
 * hält die Seite für defekt.
 */
.angebot__punkt {
  padding: var(--abstand-gross);
  background: var(--farbe-flaeche);
  border: 3px solid var(--farbe-primaer);
  border-radius: var(--ecke-gross);
  box-shadow:
    0 2px 4px rgba(0, 77, 102, 0.18),
    0 10px 24px rgba(0, 77, 102, 0.22);
}
.angebot__titel {
  margin-top: 0;
  font-size: var(--schrift-gross);
  color: var(--farbe-primaer);
}
.angebot__punkt p { max-width: none; margin-bottom: 0; }

/* --- Rechtstexte: Impressum und Datenschutz --- */

.rechtstext h2 {
  margin-top: var(--abstand-riesig);
  padding-top: var(--abstand);
  border-top: 3px solid var(--farbe-linie);
  max-width: none;
}
.rechtstext h3 {
  font-size: var(--schrift-gross);
  color: var(--farbe-primaer);
}
.rechtstext h4 { color: var(--farbe-primaer); }

.rechtstext__stand {
  font-size: var(--schrift-klein);
  color: var(--farbe-text-leise);
  max-width: none;
}

/* Ein Kasten je Gesellschaft, damit auf einen Blick erkennbar bleibt,
   welche Angabe zu welchem der beiden Unternehmen gehört. */
.gesellschaft {
  margin: var(--abstand-gross) 0;
  padding: var(--abstand-gross);
  background: var(--farbe-flaeche);
  border-left: 6px solid var(--farbe-primaer);
  border-radius: var(--ecke);
}
.gesellschaft__name {
  margin-top: 0;
  font-size: var(--schrift-gross);
  color: var(--farbe-primaer);
}

.angaben { margin: 0; }
.angaben__zeile {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--abstand-winzig);
  padding: var(--abstand-klein) 0;
  border-bottom: 1px solid var(--farbe-linie);
}
.angaben__zeile:last-child { border-bottom: 0; }
.angaben__zeile dt { font-weight: 600; margin: 0; }
.angaben__zeile dd { margin: 0; }
.angaben__hinweis {
  font-size: var(--schrift-klein);
  color: var(--farbe-text-leise);
}

/* Telefonnummern, E-Mail-Adressen und Webadressen in den Angabenkästen sind
   eigenständige Bedienelemente und bekommen die volle Klickfläche von 48
   Pixeln Höhe.

   Links mitten im Fließtext, etwa ein Verweis auf die Datenschutzerklärung
   innerhalb eines Satzes, bleiben bewusst normal hoch. Sie 48 Pixel hoch zu
   machen würde den Zeilenabstand zerreißen und den Text schlechter lesbar
   machen. Die Barrierefreiheitsrichtlinie WCAG nimmt Links im Fließtext von
   der Mindestgröße ausdrücklich aus. */
.angaben a {
  display: inline-flex;
  align-items: center;
  min-height: var(--klickflaeche);
  overflow-wrap: anywhere;
}

@media (min-width: 700px) {
  .angaben__zeile {
    grid-template-columns: 17rem 1fr;
    gap: var(--abstand);
  }
}

.standort__sitzhinweis {
  font-size: var(--schrift-klein);
  color: var(--farbe-text-leise);
}

/* --- Standortseite --- */

.standort {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--abstand-gross);
  align-items: start;
}
@media (min-width: 900px) {
  .standort { grid-template-columns: 1fr 1fr; gap: var(--abstand-riesig); }
}

.anschrift--gross { font-size: var(--schrift-gross); }

.kontakt { margin: 0 0 var(--abstand-gross) 0; }
.kontakt__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-klein);
  padding: var(--abstand-winzig) 0;
}
.kontakt__zeile dt {
  font-weight: 600;
  flex: 0 0 6em;
  margin: 0;
}
.kontakt__zeile dd { margin: 0; }
.kontakt__telefon { font-size: var(--schrift-gross); }

.standort__zwischentitel {
  font-size: var(--schrift-gross);
  margin-top: var(--abstand-gross);
  margin-bottom: var(--abstand-klein);
}

/* Die Bewertungen stehen in der rechten Spalte über der Karte und haben
   dieselbe Breite wie sie, ohne eigene Einrückung.

   Die Überschrift trägt oben keinen eigenen Abstand: Sie ist das erste
   Element der Spalte und soll auf gleicher Höhe mit dem Namen des Hauses
   in der linken Spalte beginnen. */
.standort__bewertung { margin-bottom: var(--abstand-gross); }
.standort__bewertung .standort__zwischentitel { margin-top: 0; }

/* Beide Spalten beginnen mit einer Überschrift, links der Name des Hauses,
   rechts "Was unsere Kunden sagen". Sie sollen auf gleicher Höhe anfangen.
   Der Name brachte von der allgemeinen Überschriftenregel einen Abstand
   nach oben mit und saß dadurch sechsunddreißig Pixel tiefer. */
.standort__daten > .titel:first-child { margin-top: 0; }

/* Die Bewertung als Nebenangabe.
   Auf der Startseite und auf Hörlösungen ist sie ein eigener Abschnitt mit
   Fläche, Rahmen und Schatten. Hier steht sie neben den Öffnungszeiten und
   soll dort nicht lauter sein als die Anschrift darüber. Der Kasten
   verliert deshalb alles Kastenhafte, die Zahlen werden kleiner, und nur
   die Note bleibt hervorgehoben. */
.bewertung-leise .bewertung {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  max-width: none;
}
.bewertung-leise .bewertung__note {
  justify-content: flex-start;
  margin-bottom: var(--abstand-winzig);
}
.bewertung-leise .bewertung__note .sterne { font-size: var(--schrift-text); }
.bewertung-leise .bewertung__zahl { font-size: var(--schrift-gross); }
.bewertung-leise .bewertung__satz {
  font-size: var(--schrift-klein);
  color: var(--farbe-text-leise);
  margin: 0 0 var(--abstand) 0;
  max-width: none;
}
/* Der Knopf bleibt ein Knopf und behält seine Klickfläche von 48 Pixeln.
   Kleiner gesetzt ist er, damit er sich neben den Öffnungszeiten einordnet
   und sie nicht überstrahlt. */
.bewertung-leise .bewertung__link .knopf {
  font-size: var(--schrift-klein);
  padding: var(--abstand-klein) var(--abstand);
}

/* Der kurze Satz, was an diesem Standort angeboten wird. Er steht zwischen
   Anschrift und Wegbeschreibung und ist bewusst ruhig gesetzt: Die Adresse
   darüber bleibt das Auffälligste des Abschnitts. */
.standort__leistungen {
  margin: 0 0 var(--abstand-gross) 0;
  color: var(--farbe-text);
}

/* --- Merkkasten: die Aussage, die dieses Haus unterscheidet --- */

/*
 * Benutzt im Abschnitt über Cochlea-Implantate für die Zulassung bei allen
 * Herstellern. Bauform wie die übrigen hervorgehobenen Kästen der Website:
 * helle Fläche, kräftige Kante links. Hier in Petrol statt in Gold, weil es
 * kein Warnhinweis ist, sondern eine Auszeichnung.
 *
 * Das Häkchen steht als eigenes Zeichen in einem Kreis daneben und ist für
 * Vorleseprogramme ausgeblendet: Es sagt nichts, was der Text nicht schon
 * sagt, und "Häkchen" vorgelesen zu bekommen hilft niemandem.
 */
.merkkasten {
  display: flex;
  gap: var(--abstand-gross);
  align-items: flex-start;
  margin-top: var(--abstand-riesig);
  padding: var(--abstand-gross);
  background: var(--farbe-flaeche);
  border-left: 8px solid var(--farbe-primaer);
  border-radius: var(--ecke);
}

.merkkasten__zeichen {
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  border: 3px solid var(--farbe-primaer);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--schrift-gross);
  line-height: 1;
  color: var(--farbe-primaer);
}

.merkkasten__inhalt { min-width: 0; }

.merkkasten__marke {
  margin: 0 0 var(--abstand-winzig) 0;
  font-size: var(--schrift-klein);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--farbe-text-leise);
}

.merkkasten__titel {
  margin: 0 0 var(--abstand) 0;
  font-size: var(--schrift-h3);
  color: var(--farbe-dunkel);
}

.merkkasten__liste {
  list-style: none;
  margin: var(--abstand) 0;
  padding: 0;
}

/* Das Häkchen vor jedem Punkt ist Schmuck und steht deshalb im Stylesheet,
   nicht im Text. Vorleseprogramme überspringen es dadurch von allein. */
/* Die Lesebreite bleibt erhalten. Hier stand max-width: none, wodurch die
   Zeilen am Rechner über zwölfhundert Pixel liefen. Das Auge verliert bei
   solchen Zeilen den Rücksprung, und die ganze Website vermeidet es sonst. */
.merkkasten__liste li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: var(--abstand);
}
.merkkasten__liste li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--farbe-primaer);
  font-weight: 700;
}

.merkkasten__schluss { margin-bottom: 0; }

/* Auf schmalen Bildschirmen wandert das Häkchen über den Text. Nebeneinander
   bliebe für den Text zu wenig Platz. */
@media (max-width: 599px) {
  .merkkasten {
    flex-direction: column;
    gap: var(--abstand);
    padding: var(--abstand);
  }
}

/* --- So finden Sie uns --- */

/*
 * Die Wegbeschreibung auf der Standortseite. Sie steht in einem eigenen
 * Kasten, weil sie das ist, wonach die meisten Besucher dieser Seite
 * suchen. Vorher war sie eine von vier gleich aussehenden
 * Zwischenüberschriften ganz am Ende des Abschnitts.
 *
 * Der Kasten trägt seine Kennzeichnung im Rahmen und nicht in der Fläche.
 * Grund: Die beiden Standorte stehen abwechselnd auf Weiß und auf dem
 * hellen Blau. Eine gefüllte Fläche wäre auf einem der beiden Gründe
 * unsichtbar, ein Rahmen ist auf beiden gleich gut zu sehen. Die goldene
 * Kante links ist dieselbe Markierung, die auch wichtige Hinweise auf den
 * übrigen Seiten tragen.
 */
.anfahrt {
  margin: 0 0 var(--abstand-gross) 0;
  padding: var(--abstand) var(--abstand-gross);
  background: var(--farbe-hintergrund);
  border: 2px solid var(--farbe-hellblau);
  border-left: 8px solid var(--farbe-gold);
  border-radius: var(--ecke);
}

.anfahrt__titel {
  margin: 0 0 var(--abstand-klein) 0;
  font-size: var(--schrift-gross);
}

.anfahrt__text { margin: 0; }

.karte { margin: 0; }
.karte__bild { border-radius: var(--ecke-gross); }
.karte__hinweis {
  margin-top: var(--abstand-winzig);
  font-size: var(--schrift-klein);
  color: var(--farbe-text-leise);
}
.karte__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand);
  margin-top: var(--abstand);
  max-width: none;
}


/* --- Formular --- */

.formular { max-width: 44rem; }

/*
 * DER KASTEN UM DAS FORMULAR
 *
 * Das Formular stand bisher ohne Rahmen auf weißem Grund und ging dadurch
 * in der Seite unter. Jetzt liegt es als weiße Karte auf der hellblauen
 * Fläche des Abschnitts, mit demselben Petrolrahmen und demselben Schatten
 * wie die Kacheln auf Start und Hörlösungen.
 *
 * DIE REIHENFOLGE DER FLÄCHEN IST ABSICHT: hellblaue Seite, weiße Karte,
 * hellblaue Knöpfe darin. Wäre die Karte selbst hellblau, verschwänden die
 * Tages- und Zeitknöpfe darin, und die Eingabefelder verlören ihren
 * ruhigen weißen Grund.
 */
.formular--kasten {
  /* Auf breiten Bildschirmen steht die Karte mittig in der hellblauen
     Fläche. Links ausgerichtet ließe sie rechts ein großes leeres Feld
     stehen, und die Seite wirkte, als fehlte dort etwas. */
  margin-inline: auto;
  background: var(--farbe-hintergrund);
  border: 3px solid var(--farbe-primaer);
  border-radius: var(--ecke-gross);
  padding: var(--abstand-gross);
  box-shadow: 0 2px 4px rgba(0, 77, 102, 0.18),
              0 10px 24px rgba(0, 77, 102, 0.22);
}

/* Auf schmalen Bildschirmen ist der Rand sonst breiter als nötig und nimmt
   den Eingabefeldern Platz weg. */
@media (max-width: 560px) {
  .formular--kasten {
    padding: var(--abstand);
    border-radius: var(--ecke);
  }
  /* Der Einwilligungskasten liegt in der Karte. Zwei breite Ränder
     hintereinander lassen für den Text kaum noch Platz. */
  .feld--einwilligung { padding: var(--abstand); }
}

.formular__gruppe {
  margin: 0 0 var(--abstand-riesig) 0;
  padding: 0;
  border: 0;
}
.formular__legende {
  padding: 0;
  margin-bottom: var(--abstand);
  font-size: var(--schrift-h3);
  font-weight: 700;
  color: var(--farbe-primaer);
  line-height: var(--zeilenhoehe-eng);
}

.feld { margin-bottom: var(--abstand-gross); }
.feld--schmal { max-width: 16rem; }

/*
 * ZWEI KURZE FELDER NEBENEINANDER
 *
 * Vorname und Nachname, Telefon und E-Mail gehören paarweise zusammen und
 * sind beide kurz. Untereinander über die ganze Kartenbreite gezogen sehen
 * sie auf dem Rechner leer und ungeordnet aus. Auf dem Handy bleibt es bei
 * einer Spalte, dort ist eine Spalte immer richtig.
 *
 * Die Eingabefelder werden nach unten gedrückt, damit sie auf einer Linie
 * stehen. Sonst säßen sie verschieden hoch, weil unter "Telefonnummer" ein
 * längerer Hilfstext steht als unter "E-Mail-Adresse".
 */
.feld-paar { display: grid; grid-template-columns: 1fr; gap: 0 var(--abstand); }

/* --------------------------------------------------------------------------
   TELEFON ODER E-MAIL
   --------------------------------------------------------------------------
   Zwischen den beiden Feldern steht das Wort "oder". Das ersetzt den
   erklärenden Satz, der vorher darüber stand: Gebraucht wird eine der beiden
   Angaben, nicht beide. Beide tragen trotzdem ein Sternchen, denn ohne
   irgendeine Erreichbarkeit kann die Anfrage nicht bearbeitet werden.
   -------------------------------------------------------------------------- */

.feld-paar__oder {
  margin: 0 0 var(--abstand) 0;
  text-align: center;
  font-weight: 600;
  color: var(--farbe-text-leise);
}

@media (min-width: 700px) {
  .feld-paar { grid-template-columns: 1fr 1fr; }
  /* Drei Spalten: Feld, Wort, Feld. Das Wort bekommt nur so viel Platz, wie
     es braucht. */
  .feld-paar--oder { grid-template-columns: 1fr auto 1fr; }
  /* Auf Höhe der Eingabefelder, nicht auf Höhe der Beschriftungen. Die
     Felder sind 56 Pixel hoch, die Zeile etwa 28, also 14 Pixel Abstand
     nach unten, damit das Wort in der Mitte des Feldes sitzt. */
  .feld-paar__oder { align-self: end; margin-bottom: 14px; }
  .feld-paar > .feld { display: flex; flex-direction: column; }
  .feld-paar > .feld > .feld__eingabe { margin-top: auto; }
}

.feld__titel {
  display: block;
  margin-bottom: var(--abstand-winzig);
  font-weight: 600;
  font-size: var(--schrift-text);
  color: var(--farbe-primaer);
}
.feld__pflicht {
  font-weight: 400;
  font-size: var(--schrift-klein);
  color: var(--farbe-text-leise);
}
/* Die Auflösung des Sternchens unter den Feldern. */
.feld__pflichthinweis {
  margin: 0 0 var(--abstand) 0;
  font-size: var(--schrift-klein);
  color: var(--farbe-text-leise);
}

.feld__hilfe {
  margin: 0 0 var(--abstand-klein) 0;
  font-size: var(--schrift-klein);
  color: var(--farbe-text-leise);
  max-width: none;
}

/* Die Eingabefelder sind bewusst groß und kontrastreich umrandet. Zu zarte
   Felder werden bei nachlassendem Sehvermögen leicht übersehen. */
.feld__eingabe {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: var(--abstand-klein) var(--abstand);
  font-family: inherit;
  font-size: var(--schrift-text);
  line-height: var(--zeilenhoehe);
  color: var(--farbe-text);
  background: var(--farbe-hintergrund);
  border: 2px solid var(--farbe-dunkel);
  border-radius: var(--ecke);
}
.feld__eingabe--gross { min-height: 10rem; resize: vertical; }
.feld__eingabe:hover { border-color: var(--farbe-primaer); }

/* Ein Feld mit Fehler bekommt einen roten Rahmen UND eine Meldung im
   Klartext. Farbe allein genügt nicht, sie hilft farbenblinden Menschen
   nicht weiter. */
.feld__eingabe[aria-invalid="true"] {
  border-color: #a5230f;
  background: #fdf5f4;
}
.feld__fehler {
  margin: 0 0 var(--abstand-klein) 0;
  padding: var(--abstand-klein) var(--abstand);
  font-size: var(--schrift-klein);
  font-weight: 600;
  color: #7d1b0b;
  background: #fdf5f4;
  border-left: 5px solid #a5230f;
  border-radius: var(--ecke-klein);
  max-width: none;
}

/* --- Standortauswahl --- */

.auswahl {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--abstand);
}
@media (min-width: 700px) {
  .auswahl { grid-template-columns: 1fr 1fr; }
}

.auswahl__punkt {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-klein);
  min-height: var(--klickflaeche);
  padding: var(--abstand);
  background: var(--farbe-hintergrund);
  border: 2px solid var(--farbe-linie);
  border-radius: var(--ecke);
  cursor: pointer;
}
.auswahl__punkt:hover { border-color: var(--farbe-primaer); }
.auswahl__punkt:has(input:checked) {
  border-color: var(--farbe-primaer);
  background: var(--farbe-flaeche);
  box-shadow: inset 0 0 0 2px var(--farbe-primaer);
}
.auswahl__punkt input {
  /* Große Schaltfläche, damit sie sich mit dem Finger sicher treffen lässt. */
  width: 28px;
  height: 28px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--farbe-primaer);
}
.auswahl__text { display: block; }
.auswahl__adresse {
  display: block;
  font-size: var(--schrift-klein);
  color: var(--farbe-text-leise);
}

/* --------------------------------------------------------------------------
   DAS HÖRTESTERGEBNIS AM TERMINFORMULAR
   --------------------------------------------------------------------------
   Erscheint nur, wenn jemand vom Online-Hörtest kommt. Die Werte stehen im
   Klartext da, denn eine Einwilligung in etwas, das man nicht sieht, ist
   keine.

   Gestaltet wie die übrigen hervorgehobenen Kästen: helle Fläche, drei Pixel
   Petrolrahmen, derselbe zweistufige Schatten. Der Kasten liegt auf der
   weißen Karte des Formulars und hebt sich davon ab.
   -------------------------------------------------------------------------- */

.ergebnis {
  background: var(--farbe-flaeche);
  border: 3px solid var(--farbe-primaer);
  border-radius: var(--ecke-gross);
  padding: var(--abstand-gross) var(--abstand);
  margin-bottom: var(--abstand-gross);
  box-shadow: 0 2px 4px rgba(0, 77, 102, 0.18),
              0 10px 24px rgba(0, 77, 102, 0.22);
}

.ergebnis__werte {
  margin: var(--abstand) 0;
  padding: 0;
}

/* Bezeichnung und Wert. Auf dem Handy untereinander, ab Tablet nebeneinander
   mit fester Spalte links, damit die Werte auf einer Linie stehen. */
.ergebnis__zeile {
  padding: var(--abstand-klein) 0;
  border-top: 2px solid var(--farbe-linie);
}
.ergebnis__zeile:first-child { border-top: 0; }

.ergebnis__zeile dt {
  font-weight: 600;
  color: var(--farbe-text);
}
.ergebnis__zeile dd {
  margin: 0;
  color: var(--farbe-text);
}

@media (min-width: 600px) {
  .ergebnis__zeile {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: var(--abstand);
    align-items: baseline;
  }
}

/* Der Einwilligungskasten liegt im Ergebniskasten und braucht deshalb eine
   eigene Fläche, sonst verschwimmen die beiden hellblauen Flächen. */
.ergebnis .feld--einwilligung {
  background: var(--farbe-hintergrund);
  margin-bottom: var(--abstand);
}

.ergebnis__verwerfen { margin: 0; }

@media (max-width: 560px) {
  .ergebnis { padding: var(--abstand) var(--abstand-klein); }
}


/* --- Einwilligung --- */

.feld--einwilligung {
  padding: var(--abstand-gross);
  /* Hellblau statt Weiß: Der Kasten liegt jetzt auf der weißen Karte des
     Formulars und wäre sonst nur noch am dünnen Rahmen zu erkennen. */
  background: var(--farbe-flaeche);
  border: 2px solid var(--farbe-linie);
  border-radius: var(--ecke);
}
.einwilligung {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand);
  cursor: pointer;
}
.einwilligung input {
  width: 28px;
  height: 28px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--farbe-primaer);
}
.einwilligung span {
  max-width: var(--breite-text);
  /* "Datenschutzerklärung" ist zwanzig Zeichen lang und passt bei 320 Pixeln
     nicht mehr in eine Zeile. Ohne diese beiden Zeilen schiebt das Wort die
     Seite seitlich hinaus. Getrennt wird nach deutschen Regeln, weil im
     Seitenkopf lang="de" steht. */
  hyphens: auto;
  overflow-wrap: break-word;
  /* Ohne diese Zeile kann der Text auf sehr schmalen Bildschirmen nicht
     schrumpfen und schiebt die Seite seitlich hinaus. Aufgefallen bei
     320 Pixeln Breite. */
  min-width: 0;
}

/* --- Absenden --- */

.formular__absenden { margin: var(--abstand-gross) 0; max-width: none; }
.knopf--gross {
  font-size: var(--schrift-gross);
  min-height: 64px;
  padding: var(--abstand) var(--abstand-riesig);
}
.formular__hinweis {
  font-size: var(--schrift-klein);
  color: var(--farbe-text-leise);
}

/* --------------------------------------------------------------------------
   SEHR SCHMALE BILDSCHIRME
   --------------------------------------------------------------------------
   320 Pixel ist die schmalste Breite, die noch vorkommt, etwa beim iPhone SE
   der ersten Generation. Dort brauchen die großen Knöpfe weniger Rand, sonst
   bricht ihre Beschriftung um und sie werden über 120 Pixel hoch.
   -------------------------------------------------------------------------- */

@media (max-width: 420px) {
  .knopf {
    padding-left: var(--abstand);
    padding-right: var(--abstand);
    width: 100%;
    justify-content: center;
  }
  .knopf--gross {
    padding: var(--abstand) var(--abstand);
    font-size: var(--schrift-text);
  }
  .feld--einwilligung { padding: var(--abstand); }
  .hinweis { padding: var(--abstand); }
  .angebot__punkt,
  .zahlen__karte,
  .gesellschaft { padding: var(--abstand); }
}

/* ==========================================================================
   TERMINWAHL: TAGE UND UHRZEITEN
   ==========================================================================

   Die Knöpfe sind gestaltet wie die Kacheln auf der Startseite und auf
   Hörlösungen: hellblaue Fläche, drei Pixel Rahmen in der Hauptfarbe,
   derselbe zweistufige Schatten, dasselbe Anheben beim Überfahren.

   Es sind echte Auswahlfelder. Das Auswahlfeld selbst ist unsichtbar, die
   Beschriftung sieht aus wie ein Knopf. Dadurch funktioniert die Auswahl
   auch ohne JavaScript, mit der Tastatur und mit Vorleseprogrammen, ohne
   dass dafür etwas nachgebaut werden müsste.
   ========================================================================== */

.feld--auswahl {
  border: 0;
  padding: 0;
  margin: 0 0 var(--abstand-gross) 0;
}

.terminwahl {
  display: grid;
  /* 8rem statt 9,5rem: Im Vollbild ist der Kasten etwa 300 Pixel breit, und
     bei 9,5rem passte dort nur eine Kachel je Reihe. Sechs Tage
     untereinander sind über 500 Pixel hoch. Mit 8rem stehen zwei
     nebeneinander, und "Donnerstag" passt weiterhin in eine Zeile. */
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: var(--abstand);
  margin-top: var(--abstand);
}

/* Bei den Uhrzeiten passen mehr in eine Reihe, sie sind schmaler. */
.terminwahl--zeiten {
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
}

.terminwahl__punkt {
  display: block;
  margin: 0;
  cursor: pointer;
}

/* Das Auswahlfeld selbst bleibt vorhanden, nur unsichtbar. Es wird nicht
   mit display:none entfernt, sonst wäre es mit der Tastatur nicht mehr
   erreichbar und Vorleseprogramme fänden es nicht. */
.terminwahl__punkt input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.terminwahl__inhalt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15em;
  min-height: var(--klickflaeche);
  padding: var(--abstand) var(--abstand-klein);
  background: var(--farbe-flaeche);
  color: var(--farbe-primaer);
  border: 3px solid var(--farbe-primaer);
  border-radius: var(--ecke-gross);
  text-align: center;
  box-shadow:
    0 2px 4px rgba(0, 77, 102, 0.18),
    0 10px 24px rgba(0, 77, 102, 0.22);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

.terminwahl__oben {
  font-size: var(--schrift-text);
  font-weight: 700;
  line-height: 1.15;
}
.terminwahl__unten {
  font-size: var(--schrift-klein);
  line-height: 1.15;
}

/* Anheben beim Überfahren, wie bei den Kundenstimmen. */
@media (hover: hover) {
  .terminwahl__punkt:hover .terminwahl__inhalt {
    transform: translateY(-6px);
    box-shadow:
      0 4px 8px rgba(0, 77, 102, 0.20),
      0 18px 34px rgba(0, 77, 102, 0.28);
  }
}

/* Der gewählte Tag oder die gewählte Zeit kehrt die Farben um. Das ist die
   deutlichste Rückmeldung, die es gibt, und sie funktioniert auch für
   Menschen, die Farben schlecht unterscheiden: Die Fläche wird dunkel. */
.terminwahl__punkt input:checked + .terminwahl__inhalt {
  background: var(--farbe-primaer);
  color: var(--farbe-text-hell);
  box-shadow:
    inset 0 0 0 2px var(--farbe-hintergrund),
    0 4px 8px rgba(0, 77, 102, 0.24),
    0 16px 32px rgba(0, 77, 102, 0.30);
}

/* Der Fokusrahmen gehört an den sichtbaren Knopf, nicht an das unsichtbare
   Auswahlfeld. Ohne diese Regel sieht man bei Tastaturbedienung nicht, wo
   man steht. */
.terminwahl__punkt input:focus-visible + .terminwahl__inhalt {
  outline: 3px solid var(--farbe-fokus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .terminwahl__inhalt { transition: none; }
  .terminwahl__punkt:hover .terminwahl__inhalt { transform: none; }
}

/* Der Knopf, der die übrigen Zeiten aufklappt. Erst das Skript blendet ihn
   ein, ohne Skript stehen ohnehin alle Zeiten da. */
.terminwahl__mehr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-klein);
  min-height: var(--klickflaeche);
  margin-top: var(--abstand);
  padding: var(--abstand-klein) var(--abstand-gross);
  background: var(--farbe-hintergrund);
  color: var(--farbe-primaer);
  font-family: inherit;
  font-size: var(--schrift-klein);
  font-weight: 700;
  border: 3px solid var(--farbe-primaer);
  border-radius: var(--ecke);
  cursor: pointer;
}
.terminwahl__mehr:hover {
  background: var(--farbe-primaer);
  color: var(--farbe-text-hell);
}


/* --- Das unsichtbare Feld gegen automatische Einsendungen --- */
/* Es wird aus dem Bild geschoben statt mit display:none ausgeblendet.
   Manche Programme erkennen display:none und lassen das Feld dann leer. */
.honigtopf {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Gemeinsamer Hinweis über mehreren Feldern --- */

.feld__gruppenhinweis {
  padding: var(--abstand);
  margin-bottom: var(--abstand-gross);
  background: var(--farbe-hintergrund);
  border-left: 5px solid var(--farbe-primaer);
  border-radius: var(--ecke-klein);
  max-width: none;
}

/* --- Einwilligungsfenster --- */
/* Es erscheint nur, wenn das Modul eingeschaltet ist. Solange
   consent_aktiv auf false steht, wird es gar nicht erst ausgegeben. */

.consent {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--abstand);
}
.consent__hintergrund {
  position: absolute;
  inset: 0;
  background: rgba(0, 40, 55, 0.65);
}
.consent__kasten {
  position: relative;
  z-index: 1;
  max-width: 38rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--abstand-gross);
  background: var(--farbe-hintergrund);
  border-top: 6px solid var(--farbe-primaer);
  border-radius: var(--ecke-gross);
  box-shadow: 0 8px 32px rgba(0, 40, 55, 0.35);
}
.consent__titel { margin-top: 0; }
.consent__text { max-width: none; }

/* Beide Schaltflächen sind gleich groß und gleich auffällig. Das ist keine
   Geschmacksfrage: Ein kleineres oder blasseres Ablehnen gilt als
   unzulässige Beeinflussung der Entscheidung. */
.consent__knoepfe {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--abstand);
  margin: var(--abstand-gross) 0;
}
@media (min-width: 560px) {
  .consent__knoepfe { grid-template-columns: 1fr 1fr; }
}
.consent__knopf {
  width: 100%;
  min-height: 56px;
  font-size: var(--schrift-text);
}

.consent__details {
  border-top: 2px solid var(--farbe-linie);
  padding-top: var(--abstand);
}
.consent__mehr {
  display: flex;
  align-items: center;
  min-height: var(--klickflaeche);
  font-weight: 600;
  color: var(--farbe-primaer);
  cursor: pointer;
}
.consent__inhalt { padding-top: var(--abstand); }
.consent__inhalt h3 { font-size: var(--schrift-text); margin-top: var(--abstand); }

/* Widerrufslink in der Fußzeile. Sieht aus wie die anderen Links dort,
   ist technisch aber eine Schaltfläche. */
.fuss__widerruf {
  display: inline-flex;
  align-items: center;
  min-height: var(--klickflaeche);
  padding: 0;
  font: inherit;
  color: var(--farbe-hellblau);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.fuss__widerruf:hover { color: var(--farbe-text-hell); }

/* --- Hinweiskästen --- */

.hinweis {
  padding: var(--abstand-gross);
  border-radius: var(--ecke-gross);
  margin-bottom: var(--abstand-gross);
}
.hinweis__titel { margin-top: 0; }
/* Der Knopf für den Kalendereintrag auf der Dankeseite. Er entsteht erst
   durch das Skript, deshalb steht der Platz dafür leer im HTML. */
.kalender { margin: var(--abstand-gross) 0 0 0; }

.hinweis__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand);
  margin-top: var(--abstand-gross);
  max-width: none;
}
.hinweis--erfolg {
  background: var(--farbe-flaeche);
  border-left: 8px solid var(--farbe-primaer);
}
/* Wichtige Hinweise, etwa die Abgrenzung beim Hörtest. Gleiche Bauart wie
   der Erfolgskasten, aber mit dem Gold der Website als Markierung. Die
   Klasse wurde bisher im HTML benutzt, ohne dass es dazu einen Stil gab:
   Der Kasten stand ohne Fläche und ohne Rand einfach im Text. */
.hinweis--wichtig {
  background: var(--farbe-flaeche);
  border-left: 8px solid var(--farbe-gold);
}
.hinweis--fehler {
  background: #fdf5f4;
  border-left: 8px solid #a5230f;
}
.hinweis--fehler .hinweis__titel,
.hinweis--fehler .titel { color: #7d1b0b; }

/* Das dunkle Rot gilt für Verweise IM FLIESSTEXT, nicht für Knöpfe.
   Ein Knopf bringt seine eigene Farbe mit: weiße Schrift auf Petrol, 7,0
   zu 1. Ohne die Ausnahme hier färbte diese Regel auch die Knopfschrift
   dunkelrot, und der Kontrast fiel auf 1,47 zu 1. Auf dem Bildschirm war
   davon fast nichts mehr zu lesen. Aufgefallen am 14. September 2026 auf
   der Fehlerseite des Formulars. */
.hinweis--fehler a:not(.knopf) { color: #7d1b0b; }

.einstieg__telefon { font-size: var(--schrift-gross); }

/* --- Fehlerseite --- */

.fehler__standorte {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--abstand-gross);
  margin: var(--abstand-gross) 0;
}
@media (min-width: 700px) {
  .fehler__standorte { grid-template-columns: 1fr 1fr; }
}
.fehler__standort {
  padding: var(--abstand);
  background: var(--farbe-flaeche);
  border-radius: var(--ecke);
  /* Ohne diese Zeile bläht der Inhalt das Rasterfeld auf, statt sich ihm
     anzupassen: Rasterfelder schrumpfen von sich aus nicht unter die Breite
     ihres Inhalts. Die Telefonnummer im Knopf darf nicht umbrechen, und
     damit wurde der Kasten bei 320 Pixeln 338 Pixel breit. Die ganze Seite
     ließ sich dadurch seitlich verschieben. */
  min-width: 0;
}
@media (min-width: 480px) {
  .fehler__standort { padding: var(--abstand-gross); }
}
.fehler__ort {
  margin-top: 0;
  font-size: var(--schrift-gross);
}
/* Der Telefonknopf steht in einem Kasten, der auf dem Handy nur etwa 270
   Pixel breit ist. Mit dem üblichen breiten Innenabstand passt die Nummer
   dort nicht hinein und schiebt die Seite seitlich hinaus. Deshalb füllt er
   den Kasten und bekommt weniger Rand. */
.fehler__standort .knopf {
  width: 100%;
  padding-left: var(--abstand);
  padding-right: var(--abstand);
}

.fehler__wege li { margin-bottom: var(--abstand-klein); }
.fehler__wege a {
  display: inline-flex;
  align-items: center;
  min-height: var(--klickflaeche);
}
.fehler__telefon { margin: var(--abstand-gross) 0; max-width: none; }


/* ==========================================================================
   9. BREITE INHALTE
   Tabellen und andere breite Sachen scrollen in einem eigenen Kasten.
   Die Seite selbst darf sich nie seitlich verschieben lassen.
   ========================================================================== */

.scrollbar {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin-bottom: var(--abstand);
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 32em;
}
th, td {
  padding: var(--abstand-klein) var(--abstand);
  border-bottom: 1px solid var(--farbe-linie);
  text-align: left;
  vertical-align: top;
}
th { font-weight: 700; background: var(--farbe-flaeche); }

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


/* ==========================================================================
   10. DRUCK
   ========================================================================== */

@media print {
  .kopf, .fuss, .sprunglink, .aktion { display: none; }
  body { color: #000; font-size: 12pt; }
  a { text-decoration: underline; }
}



/* ==========================================================================
   11. ONLINE-HÖRTEST, ERKLÄRENDE SEITE
   ========================================================================== */

.zahlen {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--abstand-gross);
  margin-bottom: var(--abstand-riesig);
}
@media (min-width: 700px) {
  .zahlen { grid-template-columns: 1fr 1fr; }
}
.zahlen__karte {
  padding: var(--abstand-gross);
  background: var(--farbe-hintergrund);
  border-radius: var(--ecke-gross);
  border-left: 6px solid var(--farbe-primaer);
}
.zahlen__wert {
  display: block;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--farbe-primaer);
  margin-bottom: var(--abstand-klein);
}
.zahlen__text { margin: 0; max-width: none; }

/* --------------------------------------------------------------------------
   DIE DREI KENNZAHLEN DES HÖRTESTS
   --------------------------------------------------------------------------
   Acht Töne, zwei Minuten, null Euro. Sie standen bis zum 13. September 2026
   auf dem Startbildschirm des Werkzeugs. Dort helfen sie niemandem mehr: Wer
   den Test geöffnet hat, ist überzeugt. Sie stehen jetzt unter dem Knopf auf
   der Übersichtsseite, also da, wo die Entscheidung fällt.

   Gestaltet wie die übrigen Kacheln der Website: helle Fläche, Petrolrahmen.
   Sie liegen auf dem hellen Blau des Abschnitts, deshalb weißer Grund.
   -------------------------------------------------------------------------- */

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--abstand);
  max-width: 44rem;
}

.kennzahlen__karte {
  padding: var(--abstand-gross) var(--abstand-klein);
  text-align: center;
  background: var(--farbe-hintergrund);
  border: 3px solid var(--farbe-primaer);
  border-radius: var(--ecke-gross);
}

.kennzahlen__wert {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--farbe-primaer);
}

.kennzahlen__text {
  display: block;
  margin-top: var(--abstand-winzig);
  font-weight: 600;
  color: var(--farbe-text);
}

.kennzahlen__zusatz {
  margin: var(--abstand) 0 0 0;
  font-size: var(--schrift-klein);
  color: var(--farbe-text-leise);
}

@media (max-width: 480px) {
  .kennzahlen { gap: var(--abstand-klein); }
  .kennzahlen__karte { padding: var(--abstand) var(--abstand-winzig); }
  .kennzahlen__wert { font-size: 2rem; }
}

.quelle {
  font-size: var(--schrift-klein);
  color: var(--farbe-text-leise);
}

/* Die drei nummerierten Schritte */
.schritt {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--abstand);
  margin-bottom: var(--abstand-riesig);
}
@media (min-width: 700px) {
  .schritt { grid-template-columns: 5rem 1fr; gap: var(--abstand-gross); }
}
.schritt__nummer {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  /* Kräftig genug, um auch bei schwachem Sehvermögen erkennbar zu sein.
     Das helle Blau des Bestands war auf Weiß kaum zu sehen. */
  color: var(--farbe-primaer);
}
.schritt__text .titel { margin-top: 0; }


/* ==========================================================================
   12. HÄUFIGE FRAGEN
   Die Fragen klappen über das HTML-Element <details> auf, das der Browser
   selbst mitbringt. Ohne JavaScript, mit Tastatur bedienbar.
   ========================================================================== */

.faq__gruppe { margin-bottom: var(--abstand-riesig); }

.faq__gruppentitel {
  font-size: var(--schrift-gross);
  color: var(--farbe-primaer);
  padding-bottom: var(--abstand-klein);
  border-bottom: 3px solid var(--farbe-linie);
}

/*
 * Die Frage als Kachel.
 *
 * Innenabstand und runde Ecken sind schon im Ruhezustand gesetzt, nur ohne
 * Farbe. Der negative Außenabstand nimmt die Einrückung optisch wieder
 * zurück, damit der Text genau dort steht wie vorher. Ohne das würde beim
 * Überfahren alles um ein paar Pixel springen.
 */
.faq__eintrag {
  border-bottom: 1px solid var(--farbe-linie);
  border-radius: var(--ecke-gross);
  /*
   * Die Einrückung ist bewusst klein, und zwar bei jeder Bildschirmbreite.
   *
   * Der Seitenrand des Bereichs ist durchgehend 18 Pixel breit, erst ab
   * etwa 1240 Pixeln Fensterbreite kommt durch die Zentrierung mehr dazu.
   * Mit der vollen Einrückung von 18 Pixeln klebte die Kachel deshalb von
   * 320 bis 1236 Pixeln genau am Bildschirmrand, gemessen bei 320, 375,
   * 700 und 768. Die Hälfte lässt überall eine schmale Luft.
   */
  padding-left: var(--abstand-klein);
  padding-right: var(--abstand-klein);
  margin-left: calc(var(--abstand-klein) * -1);
  margin-right: calc(var(--abstand-klein) * -1);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

/*
 * Beim Überfahren färbt sich die Frage hellblau, hebt sich um sechs Pixel
 * an und wirft einen Schatten. Dieselben Werte wie bei den Kundenstimmen,
 * damit sich die ganze Website gleich anfühlt.
 *
 * Die Trennlinie verschwindet dabei: Sie würde mit angehoben und hinge dann
 * als Strich in der Luft.
 *
 * Die zweite Regel gilt für den Finger. Safari auf dem iPhone wendet den
 * Klickzustand nur auf bedienbare Elemente an, und das ist hier die Frage
 * selbst, nicht der Kasten darum. Deshalb wird über :has von der Frage auf
 * den Kasten zurückgegriffen.
 */
@media (hover: hover) {
  .faq__eintrag:hover {
    background: var(--farbe-flaeche);
    transform: translateY(-6px);
    border-bottom-color: transparent;
    box-shadow:
      0 4px 8px rgba(0, 77, 102, 0.20),
      0 18px 34px rgba(0, 77, 102, 0.28);
  }
}

.faq__eintrag:has(> .faq__frage:active) {
  background: var(--farbe-flaeche);
  transform: translateY(-6px);
  border-bottom-color: transparent;
  box-shadow:
    0 4px 8px rgba(0, 77, 102, 0.20),
    0 18px 34px rgba(0, 77, 102, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  .faq__eintrag { transition: none; }
  .faq__eintrag:hover,
  .faq__eintrag:has(> .faq__frage:active) { transform: none; }
}


.faq__frage {
  display: flex;
  align-items: center;
  gap: var(--abstand);
  min-height: var(--klickflaeche);
  padding: var(--abstand) 0;
  padding-right: var(--abstand-gross);
  font-size: var(--schrift-text);
  font-weight: 600;
  color: var(--farbe-primaer);
  cursor: pointer;
  position: relative;
  list-style: none;
}
/* Das Dreieck des Browsers durch ein eigenes Zeichen ersetzen. */
.faq__frage::-webkit-details-marker { display: none; }
.faq__frage::after {
  content: "+";
  position: absolute;
  right: 0;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--farbe-primaer);
  line-height: 1;
}
.faq__eintrag[open] .faq__frage::after { content: "\2212"; }
.faq__frage:hover { color: var(--farbe-primaer); }

.faq__antwort {
  padding: 0 0 var(--abstand-gross) 0;
}

/*
 * Die Antworten nutzen die volle Breite des Bereichs.
 *
 * Im Fließtext der übrigen Seiten ist die Zeilenlänge auf etwa 70 Zeichen
 * begrenzt, weil längere Zeilen beim Rücksprung schwer zu verfolgen sind.
 * Hier stand der Text dadurch auf 57 Prozent der Fläche, und rechts daneben
 * blieb der Rest leer. Bei einer Frage, die man aufklappt, wirkt das wie ein
 * Fehler.
 */
.faq__antwort p,
.faq__antwort li { max-width: none; }

.faq__antwort p { margin-bottom: var(--abstand); }

.faq__tipp {
  padding: var(--abstand);
  background: var(--farbe-flaeche);
  border-left: 5px solid var(--farbe-gold);
  border-radius: var(--ecke-klein);
  max-width: none;
}

.faq__abschluss {
  font-weight: 600;
  color: var(--farbe-primaer);
}


/* --- Anzeige, ob gerade geöffnet ist --- */

.offen-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--abstand-klein);
  margin-bottom: var(--abstand-klein);
  max-width: none;
}
.offen-status__punkt {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.offen-status--offen .offen-status__punkt { background: #1a7a45; }
.offen-status--zu .offen-status__punkt { background: #8a5a00; }
.offen-status--offen strong { color: #16603a; }
.offen-status--zu strong { color: #7a4f00; }
.offen-status__zusatz {
  font-size: var(--schrift-klein);
  color: var(--farbe-text-leise);
}

/* Im dunklen Fußbereich brauchen die Farben mehr Helligkeit. */
.fuss .offen-status--offen strong { color: #7fd6a4; }
.fuss .offen-status--zu strong { color: #f0c674; }
.fuss .offen-status--offen .offen-status__punkt { background: #7fd6a4; }
.fuss .offen-status--zu .offen-status__punkt { background: #f0c674; }
.fuss .offen-status__zusatz { color: var(--farbe-hellblau); }


/* ==========================================================================
   13. ZUSTÄNDE UND ÜBERGÄNGE
   ==========================================================================

   Was das Original hier vorsieht, ist schnell erzählt: für Menüpunkte,
   Knöpfe, das Logo, die Zertifikatsbilder und Textlinks gibt es dort
   KEINEN einzigen Überfahr-Effekt. Es gibt nur einen Tastaturfokus, überall
   derselbe: ein zwei Pixel breiter Umriss in reinem Blau (#0000ff) mit
   weißem Ring. Die aktive Seite im Menü ist durch Farbe und einen zwei
   Pixel breiten Unterstrich gekennzeichnet.

   Ergänzt wurden hier drei Dinge, die das Original nicht hat:

   1. Ein Zustand für "wird gerade angetippt". Auf Handy und Tablet gibt es
      kein Überfahren. Ohne Rückmeldung beim Antippen weiß niemand, ob der
      Knopf getroffen wurde, und tippt ein zweites Mal.

   2. Sanfte Farbübergänge von 0,15 Sekunden. Das ist keine Bewegung im
      Sinne unserer Regel, sondern verhindert das harte Umspringen, das
      besonders bei nachlassendem Sehvermögen als Flackern wahrgenommen wird.

   3. Ein deutlicherer Fokusrahmen als der des Originals, siehe oben bei den
      Einstellwerten.

   Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt die
   Übergänge nicht. Das regelt der Block ganz oben in dieser Datei.
   ========================================================================== */

.navigation__link,
.knopf,
.kopf__logo,
.kopf__marke,
.telefon-link,
.feld__eingabe,
.auswahl__punkt,
.faq__frage,
.fuss a,
.fuss__widerruf,
.aktion__knopf,
.aktion__schliessen {
  transition: color 0.15s ease, background-color 0.15s ease,
              border-color 0.15s ease;
}

/* --- Wird gerade angetippt oder angeklickt --- */

.knopf:active {
  /* Ein Pixel nach unten: fühlt sich an wie ein gedrückter Knopf. */
  transform: translateY(1px);
  background: var(--farbe-dunkel);
  border-color: var(--farbe-dunkel);
}
.knopf--zweit:active {
  background: var(--farbe-hellblau);
  color: var(--farbe-dunkel);
}

.navigation__link:active {
  background: var(--farbe-hellblau);
}

.telefon-link:active,
.kopf__telefon-link:active {
  color: var(--farbe-dunkel);
}

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

.auswahl__punkt:active {
  border-color: var(--farbe-dunkel);
}

.aktion__knopf:active,
.aktion__schliessen:active,
.fuss__widerruf:active {
  transform: translateY(1px);
}

/* Auf Geräten ohne Maus wird nicht überfahren, sondern getippt. Dort werden
   die Überfahr-Effekte abgeschaltet, damit sie nicht nach dem Antippen
   hängen bleiben. Das ist ein bekannter Ärger auf Tablets: Der Knopf sieht
   danach dauerhaft aus, als stünde der Finger noch darauf. */
@media (hover: none) {
  .navigation__link:hover { background: transparent; }
  .knopf:hover {
    background: var(--farbe-primaer);
    border-color: var(--farbe-primaer);
  }
  .knopf--zweit:hover {
    background: transparent;
    color: var(--farbe-primaer);
  }
  .faq__frage:hover { color: var(--farbe-dunkel); }
  .auswahl__punkt:hover { border-color: var(--farbe-linie); }
  .feld__eingabe:hover { border-color: var(--farbe-dunkel); }
}


/* ==========================================================================
   14. KUNDENSTIMMEN
   ==========================================================================

   Angelehnt an den Bewertungsabschnitt des Originals, mit vier bewussten
   Abweichungen:

   1. Keine fremden Schriften. Das Original lädt Lora und Source Sans 3 von
      Google nach. Wir bleiben bei Montserrat.
   2. Kein Wischkarussell. Auf dem Handy übersieht man leicht, dass es
      weitergeht, und mit der Tastatur ist es mühsam. Die Karten stehen
      untereinander beziehungsweise nebeneinander, je nach Platz.
   3. Größere Schrift und kräftigere Kontraste, wie überall auf dieser Seite.
   4. Die Sterne sind Schriftzeichen, kein Bild und keine Grafik von einem
      fremden Server.
   ========================================================================== */

.sterne {
  /* Ein kräftiges Braungold. Das Gelb des Originals erreicht auf Weiß nur
     etwa 2 zu 1 und wäre für viele kaum zu erkennen. */
  color: #8a5a00;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* --- Kopfzeile mit Note, Anzahl und Stichtag --- */

.bewertung {
  max-width: 40rem;
  margin: 0 auto var(--abstand-riesig);
  padding: var(--abstand-gross);
  text-align: center;
  background: var(--farbe-flaeche);
  /* Derselbe Rahmen wie bei den Knöpfen "Quedlinburg" und "Thale": drei
     Pixel in der Hauptfarbe. Zusammenfassung, Kacheln und Knöpfe sind
     dadurch als eine Familie erkennbar. */
  border: 3px solid var(--farbe-primaer);
  border-radius: var(--ecke-gross);
  /* Derselbe Stand wie die Kacheln darunter, damit der ganze Abschnitt als
     eine Ebene über der Seite liegt und nicht halb angehoben wirkt. */
  box-shadow:
    0 2px 4px rgba(0, 77, 102, 0.18),
    0 10px 24px rgba(0, 77, 102, 0.22);
}

.bewertung__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-klein);
  margin-bottom: var(--abstand-klein);
  max-width: none;
}
.bewertung__note .sterne { font-size: var(--schrift-h3); }

.bewertung__zahl {
  font-size: var(--schrift-h2);
  font-weight: 700;
  color: var(--farbe-primaer);
  line-height: 1;
}

.bewertung__satz {
  margin: 0 auto var(--abstand-gross);
  max-width: 30em;
  color: var(--farbe-text);
}

.bewertung__link { margin: 0; max-width: none; }

/* Die Aufschlüsselung nach Haus. Ohne Aufzählungspunkte: Es sind zwei
   Knöpfe, keine Stichpunktliste. Die Liste ist trotzdem eine <ul>, weil
   Vorleseprogramme dann "Liste mit zwei Einträgen" ansagen. */
.bewertung__haeuser {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--abstand);
}
.bewertung__haus {
  margin: 0;
  max-width: none;
}
.bewertung__haus .knopf {
  font-size: var(--schrift-klein);
  /* Weißer Grund, damit sich der Knopf von der hellblauen Kachel abhebt. */
  background: var(--farbe-hintergrund);
}
.bewertung__haus .knopf:hover {
  background: var(--farbe-primaer);
  color: var(--farbe-text-hell);
}

/* Knappe Fassung für die Standortseite, wo beide Häuser nebeneinander
   stehen und der Platz enger ist. */
.bewertung--kurz {
  max-width: none;
  margin-bottom: var(--abstand-gross);
  padding: var(--abstand);
  text-align: left;
}
.bewertung--kurz .bewertung__note { justify-content: flex-start; }
.bewertung--kurz .bewertung__satz { margin-left: 0; }

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

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

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

/*
 * Die Kacheln. Hellblaue Fläche auf weißem Grund, Schrift in Petrol.
 *
 * Vorher waren die Karten weiß und standen auf weißem Grund. Sie waren
 * dadurch nur an ihrer dünnen Umrandung zu erkennen und wirkten nicht wie
 * eigenständige Kacheln. Jetzt trägt die Fläche selbst die Abgrenzung, so
 * wie die abgesetzten Abschnitte auf der Seite Hörlösungen.
 *
 * Petrol auf dem hellen Blau ergibt einen Kontrast von 6,3 zu 1 und liegt
 * damit deutlich über der Anforderung von 4,5 zu 1.
 */
.stimme {
  display: flex;
  flex-direction: column;
  margin: 0;
  max-width: none;
  padding: var(--abstand-gross);
  background: var(--farbe-flaeche);
  color: var(--farbe-primaer);
  border: 3px solid var(--farbe-primaer);
  border-radius: var(--ecke-gross);
  /*
   * Zwei Schatten übereinander, nicht einer.
   *
   * Der erste ist eng und dunkel und sitzt direkt unter der Kante. Er ist
   * das, was das Auge als Auflagepunkt liest. Der zweite ist weit und weich
   * und bildet den Lichtabfall im Raum ab. Ein einzelner Schatten wirkt
   * immer wie aufgeklebt, erst die Kombination lässt die Kachel wirklich
   * über der Seite liegen.
   *
   * Die Farbe ist kein Grau, sondern das dunkle Blau der Website mit
   * niedriger Deckkraft. Graue Schatten auf farbigen Flächen wirken
   * schmutzig.
   */
  box-shadow:
    0 2px 4px rgba(0, 77, 102, 0.18),
    0 10px 24px rgba(0, 77, 102, 0.22);
  /* Beim Überfahren hebt sich die Kachel an. Die Bewegung gehört zum
     Aufheben dazu: Ein Gegenstand, der sich hebt, wirft einen längeren
     Schatten, und erst beides zusammen liest das Auge als Tiefe. */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/*
 * Die Kachel hebt sich unter dem Zeiger an.
 *
 * Nur dort, wo es auch einen Zeiger gibt. Auf dem Handy gibt es kein
 * Überfahren, ein Hover-Zustand bliebe dort nach dem Antippen hängen und
 * die Kachel stünde dauerhaft angehoben da. Deshalb die Abfrage hover: hover.
 */
@media (hover: hover) {
  .stimme:hover {
    transform: translateY(-6px);
    box-shadow:
      0 4px 8px rgba(0, 77, 102, 0.20),
      0 18px 34px rgba(0, 77, 102, 0.28);
  }
}

/*
 * Dasselbe unter dem Finger.
 *
 * Auf dem Handy gibt es kein Überfahren, nur Berühren. Die Klasse setzt das
 * Skript, solange ein Finger auf der Kachel liegt, und nimmt sie beim
 * Loslassen wieder weg. Das ist der Grund, warum es nicht über :active
 * läuft: Safari auf dem iPhone wendet :active auf gewöhnliche Elemente gar
 * nicht an, der Effekt bliebe dort aus.
 *
 * Beginnt der Finger zu wischen, meldet der Browser den Zeiger ab und die
 * Kachel senkt sich von allein. Sie bleibt also nicht angehoben hängen,
 * während man durch das Laufband schiebt.
 */
.stimme--gedrueckt {
  transform: translateY(-6px);
  box-shadow:
    0 4px 8px rgba(0, 77, 102, 0.20),
    0 18px 34px rgba(0, 77, 102, 0.28);
}
.stimme--offen.stimme--gedrueckt {
  box-shadow:
    inset 0 0 0 2px var(--farbe-primaer),
    0 6px 12px rgba(0, 77, 102, 0.24),
    0 22px 40px rgba(0, 77, 102, 0.32);
}

/*
 * DIE EINGERASTETE KACHEL AUF DEM HANDY
 *
 * Dort ist immer nur eine Kachel im Blick. Sie steht dauerhaft angehoben da,
 * genau wie eine Kachel unter dem Mauszeiger am Rechner, und beim Wischen
 * wandert die Hervorhebung zur nächsten.
 *
 * Bedingung ist allein die Breite, nicht das Fehlen eines Mauszeigers.
 *
 * Zuerst stand hier zusätzlich hover: none. Das war unnötig eng und ließ
 * sich zudem nicht nachprüfen: Ein Rechnerbrowser meldet auch in einem
 * schmalen Fenster immer einen feinen Zeiger, der Fall wäre also erst auf
 * dem echten Gerät aufgefallen.
 *
 * Die Breite allein genügt. Unter 700 Pixeln füllt eine Kachel das Bild,
 * und die Hervorhebung ist sinnvoll, ob man wischt oder ein schmales
 * Fenster am Rechner hat. Darüber stehen drei oder vier nebeneinander, und
 * dann wäre es willkürlich, ausgerechnet die linke anzuheben. Dort
 * übernimmt das Überfahren mit der Maus.
 *
 * Ein Überlagern mit dem Hover-Zustand kann nicht schaden, beide setzen
 * denselben Wert.
 */
@media (max-width: 699px) {
  .stimme--aktiv {
    transform: translateY(-6px);
    box-shadow:
      0 4px 8px rgba(0, 77, 102, 0.20),
      0 18px 34px rgba(0, 77, 102, 0.28);
  }
  .stimme--offen.stimme--aktiv {
    box-shadow:
      inset 0 0 0 2px var(--farbe-primaer),
      0 6px 12px rgba(0, 77, 102, 0.24),
      0 22px 40px rgba(0, 77, 102, 0.32);
  }
}

/* Wer Bewegung abgeschaltet hat, bekommt den kräftigen Schatten trotzdem,
   nur ohne das Anheben und ohne weichen Übergang. */
@media (prefers-reduced-motion: reduce) {
  .stimme { transition: none; }
  .stimme:hover,
  .stimme--gedrueckt,
  .stimme--aktiv { transform: none; }
}

/* Während eine Kachel aus- oder einfährt, wird ihr Inhalt beschnitten.
   Sonst stünde beim Einfahren Text über den Rand hinaus. */
.stimme--faehrt { overflow: hidden; }

/* Die ausgefahrene Kachel bekommt innen eine zusätzliche Linie und wirkt
   dadurch etwas kräftiger umrandet als die übrigen. Daran erkennt man auch
   später noch, welche der fünf gerade geöffnet ist.
   Der Rahmen selbst ist bei allen Kacheln gleich, deshalb wird hier nach
   innen gearbeitet und nicht mit einer anderen Farbe.

   Bewusst OHNE weichen Übergang: Die Linie soll in dem Moment da sein, in
   dem die Kachel ausfährt. Ein Übergang, der aus irgendeinem Grund nicht
   anläuft, ließe die Markierung ganz ausfallen. Die Bewegung der Kachel
   selbst ist Anlass genug, hier braucht es keine zweite. */
.stimme--offen {
  /* Die innere Linie und ein etwas höherer Stand. Die ausgefahrene Kachel
     liegt damit sichtbar weiter vorn als die übrigen. */
  box-shadow:
    inset 0 0 0 2px var(--farbe-primaer),
    0 4px 8px rgba(0, 77, 102, 0.22),
    0 16px 32px rgba(0, 77, 102, 0.28);
}
@media (hover: hover) {
  .stimme--offen:hover {
    box-shadow:
      inset 0 0 0 2px var(--farbe-primaer),
      0 6px 12px rgba(0, 77, 102, 0.24),
      0 22px 40px rgba(0, 77, 102, 0.32);
  }
}

.stimme__sterne {
  font-size: var(--schrift-text);
  margin-bottom: var(--abstand-klein);
}

.stimme__text {
  margin: 0 0 var(--abstand) 0;
  padding: 0;
  border: 0;
  flex: 1 1 auto;
}
.stimme__text p {
  margin: 0;
  max-width: none;
  /* Etwas kleiner als der Fließtext, aber deutlich größer als im Original,
     wo die Karten mit 15 Pixeln gesetzt sind. */
  font-size: var(--schrift-klein);
}

/* --- Lange Zitate kürzen --- */

/*
 * Gekürzt wird NUR, wenn das Skript läuft. Es setzt die Klasse
 * .stimme__text--kurz und hängt den Knopf an. Ohne JavaScript steht jedes
 * Zitat vollständig da. Andersherum, also im CSS kürzen und per Skript
 * aufklappen, wäre der Fehler: Fällt das Skript aus, hätte niemand mehr eine
 * Möglichkeit, den Rest zu lesen.
 */
.stimme__text--kurz p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

.stimme__mehr {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-klein);
  min-height: var(--klickflaeche);
  margin: 0 0 var(--abstand) 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--farbe-primaer);
  font-family: inherit;
  font-size: var(--schrift-klein);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.stimme__mehr:hover { text-decoration: none; }

/* Der Pfeil zeigt nach unten, solange gekürzt ist, und dreht sich beim
   Aufklappen nach oben. */
.stimme__mehr::after {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-0.12em, -0.12em);
  transition: transform 0.25s ease;
}
.stimme__mehr[aria-expanded="true"]::after {
  transform: rotate(225deg) translate(-0.12em, -0.12em);
}

.stimme__quelle {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-klein);
  align-items: baseline;
  margin: 0;
  padding-top: var(--abstand);
  /* Auf der hellblauen Kachel wäre eine hellblaue Linie unsichtbar. */
  border-top: 1px solid var(--farbe-primaer);
  max-width: none;
}
.stimme__name { font-weight: 700; color: var(--farbe-primaer); }
.stimme__datum {
  font-size: var(--schrift-klein);
  color: var(--farbe-text-leise);
}

/* --- Das Laufband der Kundenstimmen --- */

.laufband {
  margin-top: var(--abstand-gross);
}

/*
 * Die Bahn. Die Karten liegen nebeneinander und rasten beim Schieben ein,
 * das erledigt der Browser über scroll-snap. Auf dem Handy ist eine Karte
 * zu sehen, ab Tablet zwei, am Rechner drei.
 *
 * Die nächste Karte ragt bewusst ein Stück herein. Dieser angeschnittene
 * Rand ist das stärkste Signal dafür, dass es weitergeht, deutlicher als
 * jeder Punkt und jeder Pfeil.
 */
.laufband__bahn {
  display: flex;
  /*
   * Jede Kachel behält ihre eigene Höhe.
   *
   * Der Vorgabewert wäre stretch: Dann wachsen ALLE Kacheln mit, sobald eine
   * einzige aufgeklappt wird. Die übrigen stünden dann hoch und halb leer da,
   * weil ihr Text ja weiterhin auf vier Zeilen gekürzt ist. Gemessen waren
   * das 608 statt 371 Pixel bei vier Kacheln, die gar nichts anzuzeigen
   * hatten.
   *
   * Damit die geschlossenen Kacheln trotzdem eine gleichmäßige Reihe bilden,
   * setzt das Skript ihnen eine gemeinsame Mindesthöhe.
   */
  align-items: start;
  gap: var(--abstand-gross);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Platz für Fokusrahmen UND Schatten. Eine Bahn mit overflow-x schneidet
     auch oben und unten ab, dort steht der Schatten der Kacheln sonst
     halb abgeschnitten. Der negative Außenabstand nimmt den Platz optisch
     wieder zurück, damit sich an der Anordnung nichts verschiebt. */
  /* Gerechnet, nicht geschätzt: Der weite Schatten der Kacheln ist 6 Pixel
     nach unten versetzt und 16 Pixel weich, reicht also 22 Pixel unter die
     Kante und 10 Pixel darüber hinaus. Die geöffnete Kachel kommt auf 28.
     Das Polster deckt den größeren der beiden Fälle ab. */
  /* Gerechnet für den größten Fall, die angehobene Kachel unter dem Zeiger:
     6 Pixel Hub plus 18 Pixel Schatten nach oben ergeben 24, unten kommen
     18 Pixel Versatz und 34 Pixel Weichzeichnung auf 52. Seitlich bleiben
     es 16 Pixel, mehr geht nicht: Der Außenabstand ist negativ, und über
     den 18 Pixeln Seitenrand des Bereichs ragte die Bahn auf dem Handy
     über den Bildschirmrand hinaus. */
  padding: 26px 16px 56px;
  margin: -26px -16px -56px;

  /*
   * WICHTIG, sonst steht das Laufband beim Laden schief.
   *
   * Das Einrasten richtet die Kachel am Anfang des Scrollbereichs aus, und
   * der beginnt am äußeren Rand, nicht erst hinter dem Polster. Ohne diese
   * Zeile schiebt der Browser die Bahn beim Laden um die 16 Pixel weiter,
   * die erste Kachel klebt am Rand und ihr Schatten wird links
   * abgeschnitten. Gemessen: scrollLeft stand auf 16 statt auf 0.
   *
   * scroll-padding rückt den Bereich ein, an dem eingerastet wird. Damit
   * fällt der Einrastpunkt wieder mit dem Polsterrand zusammen.
   */
  scroll-padding-inline: 16px;
  /* Die Bahn ist mit der Tastatur scrollbar. Damit erreicht man jede Karte
     auch ohne Maus und ohne die Knöpfe. */
  -webkit-overflow-scrolling: touch;
}

/* Die Karten in der Bahn. Grid-Regeln aus .stimmen greifen hier nicht mehr,
   weil die Bahn ein Flex-Container ist. */
.laufband__bahn.stimmen {
  display: flex;
  grid-template-columns: none;
}

.laufband__bahn .stimme {
  flex: 0 0 85%;
  scroll-snap-align: start;
  /*
   * Ohne diese Zeile schrumpft eine Kachel nicht unter die Breite ihres
   * längsten unteilbaren Wortes. In der Bewertung von Matthias G. fehlt im
   * Original ein Leerzeichen: "wurden.Alle" ist damit ein einziges langes
   * Wort. Gemessen war diese eine Kachel dadurch 281 statt 241 Pixel breit,
   * und das Laufband rastete ungleichmäßig ein.
   *
   * Der Tippfehler bleibt, er steht so bei Google. Mit min-width: 0 darf
   * die Kachel wieder schrumpfen, und das lange Wort bricht um.
   */
  min-width: 0;
}

@media (min-width: 700px) {
  .laufband__bahn .stimme { flex-basis: calc((100% - var(--abstand-gross)) / 2); }
}
@media (min-width: 1100px) {
  .laufband__bahn .stimme { flex-basis: calc((100% - 2 * var(--abstand-gross)) / 3); }
}

/*
 * VIER KACHELN AUF BREITEN BILDSCHIRMEN
 *
 * Erst ab 1500 Pixeln, und nicht früher. Der Grund ist gerechnet:
 * Bei der üblichen Inhaltsbreite von 1200 Pixeln wäre eine von vier Kacheln
 * nur 239 Pixel breit, davon gehen Innenabstand und Rahmen ab. Übrig blieben
 * 161 Pixel Text, also etwa 18 Zeichen je Zeile. Ein Zitat wird darin zur
 * Buchstabensäule.
 *
 * Deshalb zwei Maßnahmen zusammen: Der Bewertungsblock darf breiter werden
 * als der übrige Seiteninhalt, und der Innenabstand der Kacheln wird kleiner.
 * Erst beides zusammen ergibt eine Zeilenlänge, die man lesen kann.
 *
 * Die Überschrift und der Kasten mit der Note bleiben davon unberührt, sie
 * haben ihre eigene Breite und stehen weiterhin mittig.
 */
@media (min-width: 1500px) {
  #kundenstimmen .bereich__inhalt { max-width: 1440px; }

  .laufband__bahn .stimme {
    flex-basis: calc((100% - 3 * var(--abstand-gross)) / 4);
    padding: var(--abstand-gross) var(--abstand);
  }
}

/*
 * DIE PFEILE
 *
 * Ab Tablet liegen sie auf der linken und der rechten Kachel, jeweils auf
 * halber Höhe. Auf dem Handy wandern sie unter das Band, weil eine Kachel
 * dort nur etwa 280 Pixel breit ist und ein Pfeil darauf einen guten Teil
 * des Zitats verdecken würde.
 */

/* --- Handy: Pfeile und Zählung in einer Reihe unter dem Band --- */

.laufband {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--abstand);
}

/* Der Rahmen löst sich hier auf, damit Bahn, Pfeile und Zählung alle vier
   direkt in der Reihe oben liegen und sich einzeln anordnen lassen. */
.laufband__rahmen { display: contents; }

.laufband__bahn { flex: 1 0 100%; }

.laufband__zurueck { order: 1; }
.laufband__weiter  { order: 2; }

.laufband__pfeil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--klickflaeche);
  height: var(--klickflaeche);
  padding: 0;
  background: var(--farbe-hintergrund);
  color: var(--farbe-primaer);
  border: 3px solid var(--farbe-primaer);
  border-radius: 50%;
  cursor: pointer;
}
.laufband__pfeil:hover {
  background: var(--farbe-primaer);
  color: var(--farbe-text-hell);
}

/* Die Spitze ist aus zwei Rahmenlinien gebaut, kein Bild und kein Zeichen.
   Sie nimmt damit automatisch die Farbe des Knopfes an. */
.laufband__spitze {
  width: 0.6em;
  height: 0.6em;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.laufband__zurueck .laufband__spitze {
  transform: rotate(-135deg);
  margin-left: 0.2em;
}
.laufband__weiter .laufband__spitze {
  transform: rotate(45deg);
  margin-right: 0.2em;
}


/* --- Ab Tablet: Pfeile auf den äußeren Kacheln --- */

@media (min-width: 700px) {
  .laufband { display: block; }

  /*
   * Der Rahmen umschließt nur die Bahn. Seine Höhe entspricht damit genau
   * der Kachelhöhe, und top: 50% trifft die Mitte der Kachel.
   *
   * Der Innenabstand links und rechts hält den Streifen frei, in dem die
   * Pfeile sitzen. Sie liegen dadurch NEBEN den Kacheln und nicht darüber.
   * Vorher lagen sie auf der Kachel und verdeckten dort die Zeilenanfänge
   * und Zeilenenden.
   */
  .laufband__rahmen {
    display: block;
    position: relative;
    padding-left: var(--abstand-riesig);
    padding-right: var(--abstand-riesig);
  }

  .laufband__pfeil {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  /* Mittig in dem freigehaltenen Streifen: 4rem breit, Knopf 48 Pixel. */
  .laufband__zurueck { left: 0; }
  .laufband__weiter  { right: 0; }
}

/* --- Lange Zitate kürzen: Knopf --- */

/* --- Bewegung beim Hereinscrollen --- */

/*
 * Jede Karte blendet sich ein, sobald sie in den Bildschirm kommt. Das
 * übernimmt der Browser selbst über animation-timeline: view(), ganz ohne
 * JavaScript.
 *
 * Die @supports-Abfrage ist wichtig: Browser, die das noch nicht können,
 * etwa Firefox in der stabilen Fassung, bekommen die Regel gar nicht erst
 * zu sehen. Dort stehen die Karten einfach sofort da. Ohne diese Abfrage
 * wären sie in diesen Browsern dauerhaft unsichtbar.
 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /*
     * NUR DIE KACHELN, NICHT DER KASTEN MIT DER NOTE.
     *
     * Der Kasten stand hier ursprünglich mit drin. Gemessen hatte er dadurch
     * die Deckkraft 0, solange die Einblendbewegung ihn nicht erreicht hatte.
     * Er trägt aber die Kernaussage des ganzen Abschnitts: die Note 5,0 und
     * die Zahl der Bewertungen. Eine Bewegung darf nicht darüber entscheiden,
     * ob diese Information ankommt.
     *
     * Die Kacheln dürfen einblenden. Fällt dort etwas aus, fehlt ein Zitat,
     * das man ohnehin erst beim Weiterscrollen liest. Die Note dagegen ist
     * der Grund, warum jemand diesen Abschnitt überhaupt ansieht. Sie steht
     * deshalb von der ersten Sekunde an da und zählt nur noch hoch.
     */
    .stimme {
      animation: einblenden linear both;
      animation-timeline: view();
      /* Die Bewegung ist abgeschlossen, wenn die Karte 15 Prozent in den
         Bildschirm hineinragt. Sie ist also fertig, bevor man zu lesen
         beginnt, und lenkt nicht beim Lesen ab. */
      animation-range: entry 0% entry 15%;
    }
  }
}

/*
 * ACHTUNG, HIER STECKTE EIN FEHLER.
 *
 * Diese Bildfolge benutzte bis zum 13. September 2026 transform. Damit war
 * das Anheben der Kachel beim Überfahren wirkungslos: Eine laufende
 * Animation hat im Browser Vorrang vor gewöhnlichen Regeln, und weil sie
 * mit "both" ihren Endzustand festhält, überschrieb sie das translateY des
 * Hover-Zustands dauerhaft. Gemessen blieb der Versatz bei null, obwohl die
 * Regel gültig war. Der Schatten wuchs, die Kachel bewegte sich nicht.
 *
 * Jetzt benutzt die Bildfolge die eigenständige Eigenschaft translate, der
 * Hover-Zustand weiterhin transform. Das sind zwei verschiedene
 * Eigenschaften, sie addieren sich und können sich nicht mehr gegenseitig
 * aushebeln.
 *
 * Diese Bildfolge wird ausschließlich innerhalb der Abfrage auf
 * animation-timeline verwendet. Jeder Browser, der die beherrscht, kennt
 * auch translate.
 */
@keyframes einblenden {
  from { opacity: 0; translate: 0 12px; }
  to   { opacity: 1; translate: 0 0; }
}

/* Im dunklen Fußbereich und auf farbigen Flächen brauchen die Sterne mehr
   Helligkeit, damit sie sich abheben. */
.fuss .sterne { color: #f0c674; }


/* ==========================================================================
   VOLLBILD FÜR MEHRSCHRITTIGE WERKZEUGE
   ==========================================================================
   Benutzt von der Terminbuchung. Ein Schritt je Bildschirm, nichts scrollt,
   oben eine Leiste mit der Schrittanzeige und einem Weg hinaus.

   WARUM ÜBERHAUPT VOLLBILD? Weil ein Formular mit vier Abschnitten auf dem
   Handy sonst zweieinhalbtausend Pixel lang ist. Wer scrollt, verliert den
   Überblick, überspringt Felder und bricht ab. Ein Schritt je Bildschirm
   zeigt immer genau eine Frage.

   HINWEIS: Der Online-Hörtest hat dieselbe Mechanik, aber eigene Klassen in
   assets/css/hoertest.css, weil er vorher entstanden ist. Wer hier etwas
   ändert, sollte dort nachsehen. Beide zusammenzulegen wäre der nächste
   sinnvolle Schritt, ist aber ein eigener Auftrag.
   ========================================================================== */

/* Die Seite dahinter feststellen. Die Scrollposition wird als negatives
   "top" gemerkt, damit sie beim Verlassen wieder stimmt. */
body.vollbild-aktiv {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

.vollbild {
  position: fixed;
  inset: 0;
  /* dvh statt vh: Auf dem Handy wächst und schrumpft die Adresszeile. */
  height: 100vh;
  height: 100dvh;
  z-index: 200;          /* über dem mitlaufenden Kopfbereich, der hat 100 */
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--farbe-flaeche);
}

/* --- Die Leiste oben --- */

.vollbild__leiste {
  display: none;         /* erst im Vollbild sichtbar */
  align-items: center;
  gap: var(--abstand);
  background: var(--farbe-primaer);
  color: var(--farbe-text-hell);
}
.vollbild .vollbild__leiste { display: flex; }

.vollbild__beenden {
  flex: 0 0 auto;
  min-height: var(--klickflaeche);
  margin-right: var(--abstand);
  padding: var(--abstand-klein) var(--abstand);
  font-family: inherit;
  font-size: var(--schrift-klein);
  font-weight: 600;
  color: var(--farbe-text-hell);
  background: transparent;
  border: 2px solid var(--farbe-hellblau);
  border-radius: var(--ecke);
  cursor: pointer;
}
.vollbild__beenden:hover {
  background: var(--farbe-hintergrund);
  border-color: var(--farbe-hintergrund);
  color: var(--farbe-primaer);
}

/* --- Die Schrittanzeige --- */

.schrittleiste {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;          /* darf schrumpfen, sonst fliegt der Knopf raus */
  gap: var(--abstand-klein);
  margin: 0;
  padding: var(--abstand-klein) var(--abstand);
  list-style: none;
}

.schrittleiste__punkt {
  display: flex;
  align-items: center;
  gap: var(--abstand-klein);
  flex: 1;
  font-size: var(--schrift-klein);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}
.schrittleiste__punkt::after {
  content: '';
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.25);
}
.schrittleiste__punkt:last-child::after { display: none; }

.schrittleiste__zahl {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  font-size: var(--schrift-klein);
}

.schrittleiste__punkt--aktiv { color: var(--farbe-text-hell); }
.schrittleiste__punkt--aktiv .schrittleiste__zahl {
  background: var(--farbe-hintergrund);
  border-color: var(--farbe-hintergrund);
  color: var(--farbe-primaer);
}
.schrittleiste__punkt--fertig .schrittleiste__zahl {
  background: var(--farbe-gold);
  border-color: var(--farbe-gold);
  color: var(--farbe-dunkel);
}

/* Auf schmalen Geräten nur die Zahlen. Die Wörter passen dort nicht, und
   die Zahl mit dem Fortschrittsbalken genügt zur Orientierung. Für
   Vorleseprogramme bleiben die Wörter im Text erhalten. */
@media (max-width: 700px) {
  .schrittleiste { padding-left: var(--abstand-klein); padding-right: 0; }
  .schrittleiste__wort {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .vollbild__beenden {
    padding-left: var(--abstand-klein);
    padding-right: var(--abstand-klein);
    margin-right: var(--abstand-klein);
  }
}

/* --- Die Rückfrage vor dem Abbruch --- */

.vollbild__abbruch {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--abstand);
  background: rgba(0, 45, 60, 0.75);
}

.vollbild__abbruch-kasten {
  max-width: 30rem;
  padding: var(--abstand-gross) var(--abstand);
  background: var(--farbe-flaeche);
  border: 3px solid var(--farbe-primaer);
  border-radius: var(--ecke-gross);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  text-align: center;
}
.vollbild__abbruch-titel { margin: 0 0 var(--abstand) 0; font-size: var(--schrift-h3); }
.vollbild__abbruch-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand);
  justify-content: center;
  margin: var(--abstand-gross) 0 0 0;
}


/* ==========================================================================
   DIE TERMINBUCHUNG IN VIER SCHRITTEN
   ==========================================================================
   1. Worum geht es      2. Welches Geschäft
   3. Wann               4. Ihre Angaben

   OHNE JAVASCRIPT ÄNDERT SICH NICHTS. Dann stehen alle vier Abschnitte
   untereinander auf der Seite, so wie vorher, und die Knöpfe zum Blättern
   sind ausgeblendet. Das Formular ist ein einziges Formular, die Schritte
   sind nur Ansichten davon. Deshalb kann auch nichts verloren gehen, wenn
   jemand zwischen den Schritten hin und her geht.
   ========================================================================== */

/* Die Fußleiste erscheint erst, wenn das Skript übernommen hat. Ohne
   Skript stehen alle Schritte untereinander, der Absendeknopf steht wie
   früher am Ende des Formulars, und Blätterknöpfe wären sinnlos. */
.buchung__fussleiste { display: none; }

.buchung--schritte .buchung__schritt { display: none; }
.buchung--schritte .buchung__schritt--aktiv { display: block; }

/* Der Absendeknopf im Formular ist dann doppelt, einer steht in der
   Fußleiste. */
.buchung--schritte .formular__absenden { display: none; }

/* --------------------------------------------------------------------------
   DER AUFBAU IM VOLLBILD
   --------------------------------------------------------------------------
   Drei Ebenen übereinander, von denen nur die mittlere scrollt:

       Leiste oben      Schrittanzeige und Abbrechen      steht fest
       Inhalt           der laufende Schritt              scrollt
       Fußleiste        Zurück und Weiter                 steht fest

   Vorher standen die Blätterknöpfe am Ende des jeweiligen Schritts. Sobald
   der Inhalt länger war als der Bildschirm, rutschten sie aus dem Bild, und
   man kam nicht mehr zurück.
   -------------------------------------------------------------------------- */

.vollbild .formular--kasten {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: 44rem;
  width: 100%;
  margin: var(--abstand) auto;
  border-radius: var(--ecke-gross);
}

.vollbild .buchung__inhalt {
  flex: 1 1 auto;
  overflow-y: auto;
  /* Etwas Luft, damit der letzte Absatz nicht am Knopf klebt. */
  padding-bottom: var(--abstand);
}

.vollbild .buchung__fussleiste {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand);
  padding-top: var(--abstand);
  border-top: 2px solid var(--farbe-linie);
}

/* In der Fußleiste stehen zwei Knöpfe nebeneinander. Sie dürfen deshalb
   nicht die volle Breite einnehmen, wie es die Regel für sehr schmale
   Bildschirme weiter unten sonst vorschreibt. Bei wenig Platz schrumpft der
   rechte Knopf und seine Beschriftung darf umbrechen. */
.vollbild .buchung__fussleiste .knopf {
  width: auto;
  min-width: 0;
}
.buchung__zurueck { flex: 0 0 auto; }
.buchung__vor { flex: 0 1 auto; }

@media (max-width: 420px) {
  .vollbild .buchung__fussleiste { gap: var(--abstand-klein); }
  .vollbild .buchung__fussleiste .knopf--gross {
    padding-left: var(--abstand);
    padding-right: var(--abstand);
  }
  .vollbild .buchung__fussleiste .knopf--zweit {
    padding-left: var(--abstand-klein);
    padding-right: var(--abstand-klein);
  }
}

/* Auf dem ersten Schritt gibt es kein Zurück. Der Knopf bleibt stehen und
   wird nur unsichtbar, damit "Weiter" nicht hin und her springt. Dafür eine
   eigene Klasse und nicht das Merkmal hidden: Versteckte Elemente werden
   weiter oben ausnahmslos ausgeblendet, und der Platz soll ja bleiben. */
.buchung__zurueck--unsichtbar { visibility: hidden; }

/* KEIN FOKUSRAHMEN UM DIE SCHRITTÜBERSCHRIFT.
   Beim Blättern setzt assets/js/buchung.js den Blick auf die Überschrift des
   neuen Schritts. Das ist für Vorleseprogramme und für die Tastaturbedienung
   nötig, sonst bliebe der Blick am eben gedrückten, nun verborgenen Knopf
   hängen und es würde nichts vorgelesen.

   Der Browser zeichnet dabei aber seinen orangefarbenen Rahmen um die
   Überschrift, obwohl niemand dorthin getabbt ist. Eine Überschrift ist kein
   Bedienelement und über die Tabulatortaste auch nicht erreichbar, der
   Rahmen gehört hier also nicht hin. */
.buchung__titel:focus,
.buchung__titel:focus-visible { outline: none; }

.buchung__titel {
  margin: 0 0 var(--abstand-klein) 0;
  font-size: var(--schrift-h3);
  color: var(--farbe-primaer);
  line-height: var(--zeilenhoehe-eng);
}

.buchung__hilfe {
  margin: 0 0 var(--abstand-gross) 0;
  color: var(--farbe-text-leise);
}

/* Die Telefonnummer unter dem Kasten. Sie steht auf jedem Schritt, weil im
   Vollbild der Kopfbereich verdeckt ist. */
.buchung__anruf {
  flex: 0 0 auto;
  margin: 0 0 var(--abstand) 0;
  text-align: center;
  font-size: var(--schrift-klein);
}
.buchung:not(.vollbild) .buchung__anruf { margin-top: var(--abstand); }

/* --------------------------------------------------------------------------
   WENN ETWAS FEHLT
   --------------------------------------------------------------------------
   Drei Zeichen, alle an der Stelle, wo das Problem sitzt:

     1. Der betroffene Schritt wird in der Leiste oben rot.
     2. Die Buchung öffnet den ersten Schritt mit einem Fehler.
     3. Am Feld selbst steht die Meldung, und das Feld wird rot.

   KEIN KASTEN MEHR ÜBER DEM FORMULAR. Der sagte dasselbe ein zweites Mal
   und schob im Vollbild den ganzen Aufbau nach unten. Ohne JavaScript
   bleibt er stehen, dort ist er die einzige Übersicht über alle Fehler.
   -------------------------------------------------------------------------- */

.buchung .hinweis--fehler {
  flex: 0 0 auto;
  max-width: 44rem;
  width: 100%;
  margin: var(--abstand) auto 0 auto;
}
.buchung--schritte .hinweis--fehler { display: none; }

/* Ein Schritt, auf dem etwas fehlt. Die Kennzeichnung liegt nicht allein in
   der Farbe: Für Vorleseprogramme steht "hier fehlt noch etwas" im Text. */
.schrittleiste__punkt--fehler .schrittleiste__zahl {
  /* Helle Fläche mit rotem Ring. Die helle Fläche hebt sich gegen das Petrol
     der Leiste ab, der Ring macht daraus eine Warnung. Ein voll roter Kreis
     wäre auf Petrol kaum als Form zu erkennen, beide Farben sind dunkel. */
  background: #fdf5f4;
  border: 3px solid #a5230f;
  color: #a5230f;
  font-weight: 700;
}
.schrittleiste__punkt--fehler { color: var(--farbe-text-hell); }

/* Ein Kasten, in dem etwas fehlt, etwa die Einwilligung. Die Eingabefelder
   bekommen ihren roten Rahmen über aria-invalid, ein Kontrollkästchen hat
   dafür keinen eigenen Rahmen. */
.feld--fehlt {
  border-color: #a5230f;
  background: #fdf5f4;
}

/* Der Hinweis, wenn auf einem Schritt noch etwas fehlt. */
.buchung__fehlt {
  margin: var(--abstand) 0 0 0;
  padding: var(--abstand-klein) var(--abstand);
  background: #fdf5f4;
  border-left: 8px solid #a5230f;
  border-radius: var(--ecke);
  color: #7d1b0b;
  font-weight: 600;
}

/* Die Kacheln der Anliegen, gleiche Bauart wie die Standortkacheln. Auf dem
   Rechner zwei nebeneinander, auf dem Handy untereinander. */
.auswahl__dauer {
  display: block;
  font-size: var(--schrift-klein);
  color: var(--farbe-text-leise);
}

/* --------------------------------------------------------------------------
   IM VOLLBILD WIRD ENGER GESETZT
   --------------------------------------------------------------------------
   Auf schmalen und flachen Bildschirmen kommt der Platz aus den Abständen,
   nicht aus der Schrift. Schriftgrößen und Klickflächen bleiben unverändert,
   sie sind für Leser ab 50 gewählt.
   -------------------------------------------------------------------------- */

@media (max-width: 700px), (max-height: 820px) {
  .vollbild .formular--kasten {
    margin: var(--abstand-klein) auto;
    padding: var(--abstand);
  }
  .buchung__hilfe { margin-bottom: var(--abstand); }
  .vollbild .auswahl { gap: var(--abstand-klein); }
  .vollbild .auswahl__punkt { padding: var(--abstand-klein) var(--abstand); }
  .vollbild .feld { margin-bottom: var(--abstand); }
  .vollbild .feld--einwilligung { padding: var(--abstand); }
  .vollbild .formular__gruppe { margin-bottom: 0; }
  .vollbild .buchung__fussleiste { padding-top: var(--abstand-klein); }
  /* Das Freitextfeld ist freiwillig und darf kleiner anfangen. Wer viel
     schreiben möchte, zieht es an der Ecke größer. */
  .vollbild .feld__eingabe--gross { min-height: 6rem; }
}


/* ==========================================================================
   KARRIERE: ANSPRECHPARTNER UND TELEFONNUMMERN
   ==========================================================================
   Gestaltet wie alle anderen Kacheln der Website: helle Fläche, drei Pixel
   Petrolrahmen, derselbe zweistufige Schatten wie bei den Bewertungen, den
   Terminkacheln und dem Formularkasten. Nichts Neues erfunden.

   Ein Gesicht und ein Name senken die Hürde bei einer Bewerbung deutlich
   mehr als eine E-Mail-Adresse. Deshalb stehen beide Personen groß und vor
   dem Formular.
   ========================================================================== */

/* --------------------------------------------------------------------------
   KARRIERE: DAS FIRMENPORTRÄT
   --------------------------------------------------------------------------
   Die Seite benutzt dieselbe Anordnung wie die Vorstellung auf der
   Startseite: auf dem Handy Bild über Text, am Rechner nebeneinander mit
   stehendem Bild. Hier stehen nur die beiden Unterschiede.
   -------------------------------------------------------------------------- */

/* Auf der Karriereseite gibt es in diesem Block keine Überschrift, die steht
   schon im Auftakt darüber. Der Text füllt deshalb beide Zeilen des
   Rasters, sonst bliebe oben eine Lücke. */
@media (min-width: 900px) {
  .einleitung--ohne-titel .einleitung__text { grid-row: 1 / -1; }
}

/* Die Namen unter dem Bild, darunter der Satz. Beide bleiben mit dem Bild
   zusammen stehen, wenn der Text daran vorbeiläuft. */
.einleitung__namen {
  margin: var(--abstand) 0 0 0;
  text-align: center;
  font-weight: 700;
  color: var(--farbe-text);
}

.einleitung__spruch {
  margin: var(--abstand-winzig) 0 0 0;
  text-align: center;
  font-size: var(--schrift-gross);
  font-weight: 600;
  line-height: var(--zeilenhoehe-eng);
  color: var(--farbe-text);
}

@media (max-width: 420px) {
  .einleitung__spruch { font-size: var(--schrift-text); }
}

/* Die beiden Telefonnummern in der Angabentabelle. Groß, weil das der
   wichtigste Weg ist. */
.karriere__nummern {
  display: grid;
  /* Zwei nebeneinander, sobald der Platz reicht, sonst untereinander. Eine
     feste Aufteilung auf zwei Spalten hat die Kästen im Tablet-Bereich
     seitlich aus dem Bild geschoben, weil die Telefonnummer selbst schon
     236 Pixel breit ist. */
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--abstand);
  margin-top: var(--abstand);
  /* Steht dort nur eine Nummer, zieht das Raster den einen Kasten sonst über
     die volle Breite. Auf einem großen Bildschirm sind das fast 900 Pixel
     für eine Telefonnummer. */
  max-width: 20rem;
}

.karriere__nummer {
  display: block;
  min-width: 0;
  padding: var(--abstand);
  background: var(--farbe-hintergrund);
  border: 2px solid var(--farbe-linie);
  border-radius: var(--ecke);
}

/* Die Ortszeile über der Nummer ist entfallen, im Kasten steht nur noch die
   Telefonnummer selbst. Der Kasten darf deshalb schmaler werden. */
.karriere__nummer { text-align: center; }