/* ==========================================================================
   GSH Gebäudereinigung & Service Hashani
   Stylesheet – mobile first, keine externen Abhängigkeiten
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Farben und Design-Tokens
   Alle Werte gegen Weiß auf WCAG-AA-Kontrast (>= 4,5:1) geprüft.
   -------------------------------------------------------------------------- */
:root {
  /* Angelehnt an das Blau im Firmenlogo (#0078E8). Genau dieser Ton erreicht
     auf Weiß nur 4,33:1 und liegt damit unter dem Mindestwert für Text.
     --blau-700 ist deshalb eine Spur kräftiger: gleicher Farbton, 5,16:1,
     und auch auf den hellblauen Flächen noch über 4,5:1. */
  --blau-900: #073b78; /* Fußzeile, dunkle Flächen */
  --blau-800: #0a5ab5; /* Hover auf Buttons und Links, heller Teil des Heros */
  --blau-700: #006cd1; /* Primärfarbe – 5,16:1 auf Weiß */
  --blau-300: #a8cff5; /* nur auf dunklem Grund */
  --blau-100: #e3effd;
  --blau-50: #f2f8ff;

  --grau-900: #1a2230;
  --grau-700: #2b3440; /* Fließtext */
  --grau-500: #5a6675;
  --grau-400: #7c8a9b; /* hellster Rand, der 1.4.11 noch erfuellt: 3,52:1 */
  --grau-300: #c9d2dd;
  --grau-100: #eef1f5;
  --weiss: #ffffff;

  --whatsapp: #0f7a6e; /* dunkler als das Marken-Grün, damit Weiß darauf lesbar ist */
  --whatsapp-dunkel: #0c635a;

  --max: 1180px;
  --gap: 1.5rem;
  --radius: 10px;
  --radius-gross: 16px;

  --schatten: 0 1px 2px rgba(7, 59, 120, 0.06), 0 8px 24px rgba(7, 59, 120, 0.07);
  --schatten-stark: 0 2px 4px rgba(7, 59, 120, 0.08), 0 18px 40px rgba(7, 59, 120, 0.14);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;

  --header-h: 68px;
}

/* --------------------------------------------------------------------------
   2. Reset und Grundlagen
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--grau-700);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
  /* Platz für die feste Kontaktleiste am unteren Rand (nur mobil sichtbar) */
  padding-bottom: 68px;
}

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

a {
  color: var(--blau-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--blau-800);
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.6em;
  color: var(--grau-900);
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 700;
}

h1 {
  font-size: clamp(2rem, 6.2vw, 3.4rem);
}

h2 {
  font-size: clamp(1.6rem, 4.2vw, 2.35rem);
}

h3 {
  font-size: clamp(1.15rem, 2.4vw, 1.35rem);
}

p {
  margin: 0 0 1.1em;
}

/* Browser geben figure und blockquote von Haus aus 40 px Seitenabstand.
   Das würde im Karussell den Kartenabstand verfälschen. */
figure,
blockquote {
  margin: 0;
}

ul {
  padding-left: 1.15rem;
}

/* Tastaturbedienung muss immer sichtbar sein */
:focus-visible {
  outline: 3px solid var(--blau-700);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--blau-900);
  color: var(--weiss);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
  color: var(--weiss);
}

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

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.wrap--schmal {
  max-width: 760px;
}

.section {
  padding-block: clamp(3rem, 8vw, 5.5rem);
}

.section--hell {
  background: var(--blau-50);
}

.section--blau {
  background: var(--blau-100);
}

.section-kopf {
  max-width: 680px;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.section-kopf--zentriert {
  margin-inline: auto;
  text-align: center;
}

.section-kopf p {
  font-size: 1.125rem;
  color: var(--grau-500);
  margin-bottom: 0;
}

.eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blau-700);
  margin-bottom: 0.85rem;
}

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

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

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

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease,
    transform 0.18s ease, box-shadow 0.18s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn svg {
  flex: none;
  width: 20px;
  height: 20px;
}

.btn--tel {
  background: var(--blau-700);
  border-color: var(--blau-700);
  color: var(--weiss);
  box-shadow: var(--schatten);
}

.btn--tel:hover {
  background: var(--blau-800);
  border-color: var(--blau-800);
  color: var(--weiss);
}

.btn--wa {
  background: var(--whatsapp);
  border-color: var(--whatsapp);
  color: var(--weiss);
  box-shadow: var(--schatten);
}

.btn--wa:hover {
  background: var(--whatsapp-dunkel);
  border-color: var(--whatsapp-dunkel);
  color: var(--weiss);
}

.btn--mail {
  background: var(--weiss);
  border-color: var(--blau-700);
  color: var(--blau-700);
}

.btn--mail:hover {
  background: var(--blau-100);
  color: var(--blau-800);
}

/* Auf dunklem Grund */
.auf-dunkel .btn--mail {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--weiss);
}

.auf-dunkel .btn--mail:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--weiss);
  color: var(--weiss);
}

.btn--gross {
  padding: 1.1rem 2rem;
  font-size: 1.125rem;
}

.btn-gruppe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* Auf Smartphones untereinander und gleich breit – nebeneinander würden die
   drei Kontaktbuttons unterschiedlich breit und dadurch unruhig wirken. */
@media (max-width: 559px) {
  .btn-gruppe {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-gruppe .btn {
    width: 100%;
  }
}

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--blau-700);
}

.textlink:hover {
  text-decoration: underline;
}

.textlink::after {
  content: "→";
  transition: transform 0.18s ease;
}

.textlink:hover::after {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   5. Kopfzeile und Navigation
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--weiss);
  border-bottom: 1px solid var(--grau-100);
}

.header.ist-gescrollt {
  box-shadow: 0 2px 14px rgba(7, 59, 120, 0.1);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

.header__logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
  text-decoration: none;
}

.header__logo img {
  height: 40px;
  width: auto;
}

/* Der Schriftzug neben der Bildmarke. Auf sehr schmalen Geräten steht nur die
   Bildmarke – der Firmenname bliebe dort ohnehin unlesbar klein. */
.header__wortmarke {
  display: none;
  flex-direction: column;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--blau-900);
}

@media (min-width: 420px) {
  .header__wortmarke {
    display: flex;
  }
}

.header__rechts {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav {
  display: none;
}

.nav__liste {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Ohne JavaScript gibt es keinen Menü-Schalter – dann steht die Navigation
   dauerhaft als umbrechende Liste unter dem Logo. Wird per <noscript> aktiviert. */
.ohne-js .nav {
  display: block;
  width: 100%;
  padding-bottom: 0.75rem;
}

.ohne-js .menue-schalter {
  display: none;
}

.ohne-js .header__inner {
  flex-wrap: wrap;
}

.nav__link {
  display: block;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--grau-700);
  text-decoration: none;
  white-space: nowrap;
}

.nav__link:hover {
  background: var(--blau-50);
  color: var(--blau-700);
}

.nav__link[aria-current="page"] {
  color: var(--blau-700);
  box-shadow: inset 0 -2px 0 var(--blau-700);
  border-radius: 6px 6px 0 0;
}

/* Telefon-Button in der Kopfzeile */
.header__tel {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius);
  background: var(--blau-700);
  color: var(--weiss);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.header__tel:hover {
  background: var(--blau-800);
  color: var(--weiss);
}

.header__tel svg {
  width: 18px;
  height: 18px;
  flex: none;
}

/* Menü-Schalter für Smartphones */
.menue-schalter {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.8rem;
  background: var(--weiss);
  border: 1px solid var(--grau-300);
  border-radius: var(--radius);
  font: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--grau-900);
  cursor: pointer;
}

.menue-schalter__balken {
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  background: var(--grau-900);
}

.menue-schalter__balken::before,
.menue-schalter__balken::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--grau-900);
}

.menue-schalter__balken::before {
  top: -6px;
}

.menue-schalter__balken::after {
  top: 6px;
}

/* Ausgeklapptes Menü */
.nav.ist-offen {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--weiss);
  border-bottom: 1px solid var(--grau-100);
  box-shadow: 0 14px 28px rgba(7, 59, 120, 0.12);
  padding: 0.5rem 1.25rem 1.25rem;
}

.nav.ist-offen .nav__liste {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.nav.ist-offen .nav__link {
  padding: 0.85rem 0.5rem;
  border-bottom: 1px solid var(--grau-100);
  border-radius: 0;
  font-size: 1.0625rem;
}

.nav.ist-offen .nav__link[aria-current="page"] {
  box-shadow: inset 3px 0 0 var(--blau-700);
  background: var(--blau-50);
}

/* Ab 780 px verschwindet die untere Kontaktleiste (siehe dort). Damit ein
   Kontaktweg trotzdem ohne Umweg sichtbar bleibt, rückt der Telefon-Button
   genau an dieser Stelle in den Kopf – sonst gäbe es ein Fenster, in dem
   weder Leiste noch Button zu sehen wären. */
@media (min-width: 780px) {
  .header__tel {
    display: inline-flex;
  }
}

/* Ab dieser Breite passt die waagerechte Navigation in eine Zeile. Mit fünf
   Punkten braucht sie rund 440 px; bei 940 px bleiben neben Logo und
   Telefon-Button gut 40 px Luft auf jeder Seite, also Reserve für breiter
   bauende Systemschriften. Darunter bleibt es beim Menü-Schalter. */
@media (min-width: 940px) {
  .nav {
    display: block;
  }
  .menue-schalter {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--blau-800) 0%, var(--blau-900) 100%);
  color: var(--weiss);
  padding-block: clamp(3rem, 9vw, 6rem);
}

/* Dezente Lichtfläche statt Foto */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.hero::before {
  width: 620px;
  height: 620px;
  top: -280px;
  right: -180px;
  background: radial-gradient(
    circle,
    rgba(127, 178, 232, 0.34) 0%,
    rgba(127, 178, 232, 0) 68%
  );
}

.hero::after {
  width: 480px;
  height: 480px;
  bottom: -260px;
  left: -160px;
  background: radial-gradient(
    circle,
    rgba(27, 114, 212, 0.32) 0%,
    rgba(27, 114, 212, 0) 70%
  );
}

.hero .wrap {
  position: relative;
  z-index: 1;
}

.hero__inhalt {
  max-width: 760px;
}

.hero h1 {
  color: var(--weiss);
  margin-bottom: 0.35em;
}

.hero__slogan {
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  font-weight: 600;
  color: var(--blau-300);
  margin-bottom: 1.1rem;
}

.hero__text {
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  color: rgba(255, 255, 255, 0.9);
  max-width: 60ch;
  margin-bottom: 2rem;
}

.hero .btn-gruppe {
  margin-bottom: 1.75rem;
}

.hero__hinweis {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.85);
}

/* Auf der Startseite steht die Buttongruppe zwischen Text und Hakenliste und
   sorgt selbst für den Abstand. Folgt die Liste dagegen direkt auf den
   Fließtext (Kontaktseite), fehlt er – deshalb nur dann ein Abstand. */
.hero__text + .hero__hinweis {
  margin-top: 1.5rem;
}

.hero__hinweis li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.hero__hinweis svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--blau-300);
}

/* Kleinerer Hero für Unterseiten */
.hero--klein {
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.hero--klein h1 {
  margin-bottom: 0.5em;
}

.hero--klein .hero__text {
  margin-bottom: 0;
}

/* Brotkrumen */
.brotkrumen {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 1rem;
}

.brotkrumen a {
  color: rgba(255, 255, 255, 0.9);
}

.brotkrumen span {
  padding-inline: 0.4rem;
}

/* --------------------------------------------------------------------------
   6b. Reiter für Privat- und Firmenkunden
   Echte Links auf eigenständige Seiten, nur wie Reiter gestaltet. Dadurch
   funktionieren sie ohne JavaScript, sind einzeln verlinkbar und werden von
   Google als getrennte Seiten erfasst.
   -------------------------------------------------------------------------- */
/* Die Leiste ist kein Beiwerk, sondern die Weiche zwischen Privat- und
   Firmenkunden – der wichtigste Schritt auf dieser Seite. Als graue Schrift
   mit dünnem Strich las sie sich wie Kleingedrucktes. Deshalb Schaltflächen
   auf hellblauem Grund: Sie sehen nach etwas aus, das man anklickt, und die
   aktuelle Seite ist ausgefüllt statt nur unterstrichen. */
.reiter {
  background: var(--blau-50);
  border-bottom: 1px solid var(--blau-100);
}

.reiter__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  padding-block: 1rem;
}

.reiter__link {
  display: block;
  padding: 0.8rem 1.4rem;
  /* Zurückhaltender Rand. --grau-300 waere zu hell: gegen Weiß nur 1,5:1,
     die Umrisse bedienbarer Elemente brauchen nach WCAG 1.4.11 aber 3:1.
     --grau-400 ist der hellste Ton, der das noch schafft. */
  border: 1px solid var(--grau-400);
  border-radius: var(--radius);
  background: var(--weiss);
  color: var(--grau-700);
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  transition: border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.reiter__link:hover {
  border-color: var(--blau-700);
  color: var(--blau-700);
}

.reiter__link[aria-current="page"] {
  background: var(--blau-700);
  border-color: var(--blau-700);
  color: var(--weiss);
}

.reiter__link[aria-current="page"]:hover {
  background: var(--blau-800);
  border-color: var(--blau-800);
  color: var(--weiss);
}

/* Auf schmalen Bildschirmen passen die drei nicht nebeneinander. Sie seitlich
   wegzuschieben wäre die schlechteste Lösung: Der dritte stünde außerhalb des
   Bildschirms, ohne dass irgendetwas darauf hinweist. Stattdessen brechen sie
   um; steht die letzte allein in ihrer Zeile, nimmt sie die volle Breite ein,
   damit keine halbe Lücke entsteht. */
@media (max-width: 619px) {
  .reiter__liste {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-block: 0.9rem;
  }

  .reiter__liste li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .reiter__link {
    padding: 0.7rem 0.75rem;
    font-size: 1rem;
    white-space: normal;
  }
}

/* --------------------------------------------------------------------------
   6c. Galerie mit Vorher-Nachher-Vergleich
   -------------------------------------------------------------------------- */
.galerie {
  display: grid;
  gap: var(--gap);
}

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

.vergleich {
  overflow: hidden;
  background: var(--weiss);
  border: 1px solid var(--grau-300);
  border-radius: var(--radius-gross);
}

.vergleich__buehne {
  position: relative;
  /* Festes Seitenverhältnis, damit unterschiedlich große Fotos sauber
     übereinanderliegen und das Layout beim Laden nicht springt. */
  aspect-ratio: 4 / 3;
  background: var(--grau-100);
  touch-action: pan-y;
}

.vergleich__buehne img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* Unten liegt das Nachher-Bild, darüber beschnitten das Vorher-Bild: links
   sieht man den Zustand vorher, rechts das Ergebnis – in Leserichtung.
   Beschnitten wird per clip-path, nicht über die Breite, sonst würde das Bild
   gestaucht statt abgeschnitten. */
.vergleich__vorher {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}

.vergleich__marke {
  position: absolute;
  bottom: 0.75rem;
  z-index: 2;
  padding: 0.3rem 0.7rem;
  border-radius: 100px;
  background: rgba(7, 59, 120, 0.85);
  color: var(--weiss);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
}

.vergleich__marke--vorher {
  left: 0.75rem;
}

.vergleich__marke--nachher {
  right: 0.75rem;
}

/* Trennlinie mit Griff */
.vergleich__griff {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  z-index: 3;
  width: 3px;
  margin-left: -1.5px;
  background: var(--weiss);
  box-shadow: 0 0 0 1px rgba(7, 59, 120, 0.35);
  pointer-events: none;
}

.vergleich__griff::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border: 3px solid var(--weiss);
  border-radius: 50%;
  background: var(--blau-700);
  box-shadow: 0 2px 10px rgba(7, 59, 120, 0.45);
}

/* Der Regler ist das eigentliche Bedienelement: unsichtbar über der Bühne,
   aber mit Maus, Finger und Tastatur bedienbar. */
.vergleich__regler {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
}

.vergleich__regler::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 44px;
  height: 44px;
}

.vergleich__regler::-moz-range-thumb {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
}

/* Sichtbarer Fokus, obwohl der Regler selbst unsichtbar ist */
.vergleich__regler:focus-visible {
  outline: none;
}

.vergleich__buehne:has(.vergleich__regler:focus-visible) {
  outline: 3px solid var(--blau-700);
  outline-offset: 3px;
}

.vergleich figcaption {
  padding: 1rem 1.25rem 1.25rem;
}

.vergleich__titel {
  display: block;
  font-weight: 700;
  color: var(--grau-900);
}

.vergleich__ort {
  display: block;
  font-size: 0.9375rem;
  color: var(--grau-500);
}

/* --------------------------------------------------------------------------
   7. Karten
   -------------------------------------------------------------------------- */
.karte {
  display: flex;
  flex-direction: column;
  background: var(--weiss);
  border: 1px solid var(--grau-300);
  border-radius: var(--radius-gross);
  padding: 1.75rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    transform 0.18s ease;
}

.karte:hover {
  border-color: var(--blau-300);
  box-shadow: var(--schatten);
  transform: translateY(-3px);
}

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

.karte p:last-child {
  margin-bottom: 0;
}

.karte__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.1rem;
  border-radius: 12px;
  background: var(--blau-100);
  color: var(--blau-700);
}

.karte__icon svg {
  width: 26px;
  height: 26px;
}

.karte__liste {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  font-size: 1rem;
}

.karte__liste li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.4rem;
}

.karte__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blau-700);
}

.karte__fuss {
  margin-top: auto;
  padding-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   8. Zwei-Wege-Block: Privat- und Firmenkunden
   -------------------------------------------------------------------------- */
.weiche {
  display: grid;
  gap: var(--gap);
}

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

.weiche__karte {
  position: relative;
  overflow: hidden;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border-radius: var(--radius-gross);
  background: var(--blau-700);
  color: var(--weiss);
}

.weiche__karte--firma {
  background: var(--blau-900);
}

.weiche__karte h3 {
  color: var(--weiss);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
}

.weiche__karte p {
  color: rgba(255, 255, 255, 0.88);
}

.weiche__karte ul {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  color: rgba(255, 255, 255, 0.92);
}

.weiche__karte li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.35rem;
}

.weiche__karte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blau-300);
}

.weiche__karte .textlink {
  color: var(--weiss);
}

/* --------------------------------------------------------------------------
   9. Vertrauensblock mit Zahlen
   -------------------------------------------------------------------------- */
/* Einspaltig auf schmalen Geräten: die Werte sind Wörter, keine kurzen Zahlen,
   und würden in zwei Spalten bei 320 px über den Rand laufen. */
.fakten {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

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

.fakt {
  padding: 1.5rem 1.25rem;
  background: var(--weiss);
  border: 1px solid var(--grau-300);
  border-radius: var(--radius-gross);
  text-align: center;
}

.fakt__zahl {
  display: block;
  font-size: clamp(1.75rem, 5vw, 2.4rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--blau-700);
  letter-spacing: -0.02em;
}

.fakt__text {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.9375rem;
  color: var(--grau-500);
}

/* --------------------------------------------------------------------------
   10b. Bewertungen
   -------------------------------------------------------------------------- */
.bewertung-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  padding: 1.5rem 1.75rem;
  margin-bottom: var(--gap);
  background: var(--weiss);
  border: 1px solid var(--grau-300);
  border-radius: var(--radius-gross);
}

.bewertung-kopf__note {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  color: var(--grau-900);
  letter-spacing: -0.02em;
}

.bewertung-kopf__note span {
  font-size: 1rem;
  font-weight: 600;
  color: var(--grau-500);
}

.bewertung-kopf__text {
  font-size: 0.9375rem;
  color: var(--grau-500);
  margin: 0.35rem 0 0;
}

/* Sterne: als Grafik ausgeblendet, der Wert steht als Text daneben */
.sterne {
  display: inline-flex;
  gap: 2px;
}

.sterne svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: #cc8000; /* 3,16:1 auf Weiß – Sterne tragen die Aussage, daher >= 3:1 */
}

.sterne--klein svg {
  width: 16px;
  height: 16px;
}

.bewertung {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  background: var(--weiss);
  border: 1px solid var(--grau-300);
  border-radius: var(--radius-gross);
}

/* --------------------------------------------------------------------------
   10b-2. Bewertungs-Karussell
   Alle Karten gleich breit, in einer Reihe, seitlich verschiebbar. Weil sie
   in einer Flex-Zeile liegen, sind sie automatisch auch alle gleich hoch.
   -------------------------------------------------------------------------- */
.slider__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.slider__hinweis {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--grau-500);
}

.slider__knoepfe {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.slider__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--grau-300);
  border-radius: 50%;
  background: var(--weiss);
  color: var(--blau-700);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.slider__btn:hover:not([disabled]) {
  border-color: var(--blau-700);
  background: var(--blau-50);
}

.slider__btn[disabled] {
  opacity: 0.35;
  cursor: default;
}

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

.slider__pause {
  padding: 0.55rem 1rem;
  border: 1px solid var(--grau-300);
  border-radius: 100px;
  background: var(--weiss);
  color: var(--grau-700);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.slider__pause:hover {
  border-color: var(--blau-700);
  color: var(--blau-700);
}

.bewertungen {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  /* Nur unten Platz für die Bildlaufleiste. Seitlich kein Innenabstand, sonst
     beginnt die Spur nicht bei 0 und der Zurück-Pfeil bliebe aktiv. */
  padding: 0 0 1rem;
  scrollbar-width: thin;
}

.bewertungen .bewertung {
  flex: 0 0 auto;
  width: min(360px, 84vw);
  scroll-snap-align: start;
}

/* Lange Texte optisch auf neun Zeilen kürzen, damit alle Karten gleich hoch
   bleiben. Der vollständige Text lässt sich aufklappen. Ohne JavaScript gibt
   es keinen Aufklapp-Knopf – dann steht der Text ungekürzt da. */
html:not(.ohne-js) .bewertungen .bewertung__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 9;
  overflow: hidden;
}

html:not(.ohne-js) .bewertungen .bewertung.ist-offen .bewertung__text {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.bewertung__mehr {
  align-self: flex-start;
  margin-top: 0.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--blau-700);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.bewertung__mehr:hover {
  color: var(--blau-800);
}

.bewertung blockquote {
  margin: 0.85rem 0 1.25rem;
  font-size: 1.0625rem;
  color: var(--grau-700);
}

.bewertung blockquote p:last-child {
  margin-bottom: 0;
}

/* Sternebewertung ohne geschriebenen Text. Zurückhaltend gesetzt, damit die
   Karte nicht leer wirkt, aber auch nicht mehr behauptet, als dasteht. */
.bewertung__ohne-text {
  margin: 0.85rem 0 1.25rem;
  font-size: 1rem;
  font-style: italic;
  color: var(--grau-500);
}

.bewertung figcaption {
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--grau-100);
  font-size: 0.9375rem;
}

.bewertung__name {
  font-weight: 700;
  color: var(--grau-900);
}

.bewertung__datum {
  color: var(--grau-500);
}

/* Herkunftshinweis nach § 5b Abs. 3 UWG */
.bewertung-herkunft {
  margin-top: 1.75rem;
  padding: 1rem 1.25rem;
  background: var(--blau-50);
  border-left: 4px solid var(--blau-700);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.9375rem;
  color: var(--grau-500);
}

.bewertung-herkunft p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   10c. Partner
   -------------------------------------------------------------------------- */
/* Partner: Kacheln mit Logo oder, solange keines vorliegt, mit dem Namen */
.partner-gitter {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 700px) {
  .partner-gitter {
    grid-template-columns: repeat(4, 1fr);
  }
}

.partner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  padding: 1.25rem;
  background: var(--weiss);
  border: 1px solid var(--grau-300);
  border-radius: var(--radius-gross);
  text-align: center;
  text-decoration: none;
  color: var(--grau-700);
  font-weight: 700;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

a.partner:hover {
  border-color: var(--blau-300);
  box-shadow: var(--schatten);
  color: var(--blau-700);
}

.partner img {
  max-height: 56px;
  width: auto;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   11. Kontakt-Band (wiederholt sich auf jeder Seite)
   -------------------------------------------------------------------------- */
.kontakt-band {
  background: linear-gradient(150deg, var(--blau-700) 0%, var(--blau-900) 100%);
  color: var(--weiss);
  padding-block: clamp(2.75rem, 7vw, 4.5rem);
}

.kontakt-band h2 {
  color: var(--weiss);
}

.kontakt-band p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.125rem;
  max-width: 58ch;
}

.kontakt-band__inner {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 900px) {
  .kontakt-band__inner {
    grid-template-columns: 1.15fr 1fr;
    gap: 3rem;
  }
}

.kontakt-band__buttons {
  display: grid;
  gap: 0.85rem;
}

.kontakt-band__buttons .btn {
  width: 100%;
}

/* --------------------------------------------------------------------------
   12. Kontaktkacheln (Kontaktseite)
   -------------------------------------------------------------------------- */
.kanal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.75rem;
  border: 2px solid var(--grau-300);
  border-radius: var(--radius-gross);
  background: var(--weiss);
  text-decoration: none;
  color: var(--grau-700);
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    transform 0.18s ease;
}

.kanal:hover {
  border-color: var(--blau-700);
  box-shadow: var(--schatten-stark);
  transform: translateY(-3px);
  color: var(--grau-700);
}

.kanal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1.1rem;
  border-radius: 14px;
  background: var(--blau-100);
  color: var(--blau-700);
}

.kanal--wa .kanal__icon {
  background: #e3f4f1;
  color: var(--whatsapp);
}

.kanal__icon svg {
  width: 28px;
  height: 28px;
}

.kanal__titel {
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--grau-900);
  margin-bottom: 0.2rem;
}

.kanal__wert {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--blau-700);
  word-break: break-word;
}

.kanal--wa .kanal__wert {
  color: var(--whatsapp);
}

.kanal__zusatz {
  margin-top: 0.4rem;
  font-size: 0.9375rem;
  color: var(--grau-500);
}

/* Infoblock mit Adresse und Zeiten */
.infobox {
  padding: 1.75rem;
  background: var(--blau-50);
  border: 1px solid var(--blau-100);
  border-radius: var(--radius-gross);
}

.infobox h3 {
  margin-bottom: 0.75rem;
}

.zeiten {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}

.zeiten th,
.zeiten td {
  padding: 0.55rem 0;
  text-align: left;
  border-bottom: 1px solid var(--grau-300);
}

.zeiten th {
  font-weight: 600;
  color: var(--grau-700);
}

.zeiten td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--grau-900);
  font-weight: 600;
}

.zeiten tr:last-child th,
.zeiten tr:last-child td {
  border-bottom: 0;
}

/* --------------------------------------------------------------------------
   12b. Kontaktformular
   -------------------------------------------------------------------------- */
.formular {
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--weiss);
  border: 1px solid var(--grau-300);
  border-radius: var(--radius-gross);
}

.feldgruppe {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

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

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

.feld label {
  font-weight: 700;
  color: var(--grau-900);
}

.feld__hinweis {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--grau-500);
}

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld select,
.feld textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--grau-300);
  border-radius: var(--radius);
  background: var(--weiss);
  font: inherit;
  color: var(--grau-900);
  /* 16px verhindert, dass iOS beim Antippen hineinzoomt */
  font-size: 1rem;
}

.feld textarea {
  min-height: 150px;
  resize: vertical;
}

.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  border-color: var(--blau-700);
  outline: 2px solid var(--blau-700);
  outline-offset: 1px;
}

/* Nur markieren, wenn der Browser wirklich einen Fehler sieht – nicht schon
   beim ersten Anblick des leeren Formulars. */
.feld input:user-invalid,
.feld textarea:user-invalid {
  border-color: #b3261e;
}

.feldsatz {
  margin: 0 0 1.25rem;
  padding: 0;
  border: 0;
}

.feldsatz legend {
  padding: 0;
  margin-bottom: 0.5rem;
  font-weight: 700;
  color: var(--grau-900);
}

.feld--abstand {
  margin-bottom: 1.25rem;
}

.formular__direkt {
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  color: var(--grau-500);
}

.hero__link {
  color: inherit;
}

.wahl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.wahl label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--grau-300);
  border-radius: 100px;
  font-weight: 600;
  cursor: pointer;
}

.wahl input {
  accent-color: var(--blau-700);
  width: 18px;
  height: 18px;
}

.wahl label:has(input:checked) {
  border-color: var(--blau-700);
  background: var(--blau-50);
  color: var(--blau-700);
}

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

/* Falle für automatische Ausfüller: für Menschen unsichtbar, aber nicht per
   display:none – manche Bots erkennen das und lassen das Feld dann leer. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 1.5rem;
}

.formular__recht {
  flex: 1 1 260px;
  margin: 0;
  font-size: 0.875rem;
  color: var(--grau-500);
}

.pflichtfeld {
  color: #b3261e;
}

/* Meldungsseite von kontakt-senden.php */
.meldung {
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius-gross);
  border: 1px solid var(--grau-300);
  background: var(--weiss);
}

.meldung--fehler {
  border-left: 4px solid #b3261e;
}

.meldung ul {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   13. Ablauf in Schritten
   -------------------------------------------------------------------------- */
.schritte {
  counter-reset: schritt;
  display: grid;
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

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

.schritte li {
  position: relative;
  padding: 1.75rem 1.5rem 1.5rem;
  background: var(--weiss);
  border: 1px solid var(--grau-300);
  border-radius: var(--radius-gross);
}

.schritte li::before {
  counter-increment: schritt;
  content: counter(schritt);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 0.9rem;
  border-radius: 50%;
  background: var(--blau-700);
  color: var(--weiss);
  font-weight: 800;
  font-size: 1.125rem;
}

.schritte h3 {
  margin-bottom: 0.4rem;
}

.schritte p {
  margin-bottom: 0;
  color: var(--grau-500);
}

/* --------------------------------------------------------------------------
   14. Fließtextseiten (Impressum, Datenschutz)
   -------------------------------------------------------------------------- */
.prosa h2 {
  margin-top: 2.5rem;
  font-size: clamp(1.3rem, 3vw, 1.6rem);
}

.prosa h3 {
  margin-top: 1.75rem;
  font-size: 1.125rem;
}

.prosa h2:first-child {
  margin-top: 0;
}

.prosa ul {
  margin-bottom: 1.1em;
}

.prosa li {
  margin-bottom: 0.35rem;
}

/* --------------------------------------------------------------------------
   15. Fußzeile
   -------------------------------------------------------------------------- */
.footer {
  background: var(--blau-900);
  color: rgba(255, 255, 255, 0.82);
  padding-block: clamp(2.5rem, 6vw, 4rem) 2rem;
  font-size: 1rem;
}

.footer__grid {
  display: grid;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 720px) {
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 2.5rem;
  }
}

.footer h2,
.footer h3 {
  color: var(--weiss);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* Das Original-Logo hat schwarze Konturen und einen schwarzen Balken und wäre
   auf dem dunklen Grund der Fußzeile nicht lesbar. Es steht deshalb auf einer
   weißen Fläche – so bleibt es unverändert und trotzdem erkennbar. */
.footer__logo {
  display: inline-block;
  max-width: 250px;
  margin-bottom: 1.25rem;
  padding: 0.9rem 1.1rem;
  background: var(--weiss);
  border-radius: 12px;
}

.footer__logo img {
  width: 100%;
  height: auto;
}

.footer a {
  color: var(--weiss);
  text-decoration: none;
}

.footer a:hover {
  color: var(--blau-300);
  text-decoration: underline;
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer li {
  margin-bottom: 0.55rem;
}

.footer address {
  font-style: normal;
  line-height: 1.8;
}

.footer__unten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.7);
}

.footer__rechtslinks {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.footer__rechtslinks li {
  margin: 0;
}

/* --------------------------------------------------------------------------
   16. Feste Kontaktleiste am unteren Rand (Smartphones)
   Wichtigster Weg zur Kontaktaufnahme – liegt direkt unter dem Daumen.
   -------------------------------------------------------------------------- */
.kontaktleiste {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 120;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--weiss);
  border-top: 1px solid var(--grau-300);
  box-shadow: 0 -4px 18px rgba(7, 59, 120, 0.12);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.kontaktleiste__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.6rem 0.35rem;
  min-height: 62px;
  color: var(--blau-700);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  border-right: 1px solid var(--grau-100);
}

.kontaktleiste__link:last-child {
  border-right: 0;
}

.kontaktleiste__link:active {
  background: var(--blau-100);
}

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

.kontaktleiste__link--wa {
  color: var(--whatsapp);
}

/* Ab Tablet-Breite entfällt die Leiste – dort greifen Kopfzeile und Bänder */
@media (min-width: 780px) {
  .kontaktleiste {
    display: none;
  }
  body {
    padding-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   17. Bewegung reduzieren
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html,
  .bewertungen {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .btn:hover,
  .karte:hover,
  .kanal:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   18. Druck
   -------------------------------------------------------------------------- */
@media print {
  .header,
  .kontaktleiste,
  .kontakt-band,
  .menue-schalter {
    display: none !important;
  }
  body {
    padding-bottom: 0;
    color: #000;
  }
  .hero {
    background: none;
    color: #000;
  }
  .hero h1,
  .hero__slogan {
    color: #000;
  }
}