/* =========================================================================
   AUTO GLANZ – Stylesheet
   =========================================================================
   AUFBAU DER DATEI
   1. Designvariablen (:root)   <- hier wird alles Gestalterische eingestellt
   2. Grundlagen / Reset
   3. Hilfsklassen
   4. Kopfbereich und Navigation
   5. Startbereich (Hero)
   6. Leistungen
   7. Preise
   8. Vorher / Nachher
   9. Ablauf
   10. Kundenstimmen
   11. Kontakt und Formular
   12. Fußbereich
   13. Bewegung / Barrierefreiheit

   WICHTIG: Farben stehen ausschliesslich im :root Block.
   Ausnahme, fest hinterlegte Farben ausserhalb von :root:
   - keine. Die SVG Platzhalter in /assets tragen ihre Farben selbst,
     sie muessen bei einem Markenwechsel dort mit angepasst werden.
   ========================================================================= */

/* =========================================================================
   1. DESIGNVARIABLEN
   Fuer einen neuen Kunden reicht es, diesen Block zu aendern.
   Die Farben unten stammen direkt aus assets/logo.png.
   ========================================================================= */
:root {
  /* --- Markenfarben (aus dem Logo ausgelesen) --- */
  --farbe-marke: #5bafa6;          /* Tuerkis des Logos */
  --farbe-marke-hell: #8fd8ce;     /* helle Variante, fuer Text auf Dunkel */
  --farbe-marke-dunkel: #387078;   /* dunkles Petrol aus dem Logo */
  --farbe-marke-kontrast: #04191c; /* Textfarbe auf tuerkisen Flaechen */

  /* --- Textfarben --- */
  --farbe-text: #dfe9ea;           /* Fliesstext auf dunklem Grund */
  --farbe-text-leise: #9fb0b3;     /* Nebeninfos, Bildunterschriften */
  --farbe-text-stark: #ffffff;     /* Ueberschriften */

  /* --- Flaechen --- */
  --farbe-grund: #05090c;          /* Seitenhintergrund, fast schwarz */
  --farbe-flaeche: #0c1418;        /* Karten, Kaesten */
  --farbe-flaeche-hoch: #13212a;   /* hervorgehobene Karten, Eingabefelder */
  --farbe-schleier: rgba(5, 9, 12, 0.92); /* Kopfbereich beim Scrollen */

  /* --- Linien --- */
  --farbe-linie: #1d2c33;
  --farbe-linie-stark: #2c4149;

  /* --- Zustandsfarben --- */
  --farbe-erfolg: #57c08a;
  --farbe-fehler: #ff8a80;
  --farbe-fokus: #8fd8ce;

  /* --- Schriften --- */
  --schrift-titel: "Helvetica Neue", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --schrift-text: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* --- Schriftgroessen --- */
  --groesse-riesig: clamp(2.4rem, 7vw, 4.6rem);
  --groesse-gross: clamp(1.9rem, 4.2vw, 2.9rem);
  --groesse-mittel: clamp(1.25rem, 2.4vw, 1.6rem);
  /* Ueberschriften in Karten. Skalieren mit der Fensterbreite, damit auch
     lange Woerter wie "Keramikversiegelung" in schmale Karten passen. */
  --groesse-kartentitel: clamp(1.05rem, 0.72rem + 1.05vw, 1.45rem);
  --groesse-text: clamp(1rem, 1.05vw, 1.075rem);
  --groesse-klein: 0.9rem;
  --groesse-mini: 0.78rem;

  /* --- Zeilenhoehe und Laufweite --- */
  --zeilenhoehe: 1.65;
  --zeilenhoehe-titel: 1.1;
  --laufweite-label: 0.16em;

  /* --- Abstaende --- */
  --abstand-xs: 0.4rem;
  --abstand-s: 0.8rem;
  --abstand-m: 1.4rem;
  --abstand-l: 2.4rem;
  --abstand-xl: 4rem;
  --abstand-abschnitt: clamp(3.5rem, 9vw, 7rem);

  /* --- Inhaltsbreiten --- */
  --breite-inhalt: 1180px;
  --breite-schmal: 720px;
  --rand-seite: clamp(1.1rem, 4vw, 2.5rem);

  /* --- Radien --- */
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
  --radius-rund: 999px;

  /* --- Schatten --- */
  --schatten-weich: 0 10px 30px rgba(0, 0, 0, 0.45);
  --schatten-stark: 0 20px 50px rgba(0, 0, 0, 0.6);
  --schatten-marke: 0 12px 34px rgba(91, 175, 166, 0.28);

  /* --- Uebergaenge --- */
  --dauer: 0.28s;
  --dauer-lang: 0.7s;
  --kurve: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =========================================================================
   2. GRUNDLAGEN
   ========================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Damit Sprungziele nicht unter dem festen Kopfbereich landen */
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--farbe-grund);
  color: var(--farbe-text);
  font-family: var(--schrift-text);
  font-size: var(--groesse-text);
  line-height: var(--zeilenhoehe);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  color: var(--farbe-text-stark);
  line-height: var(--zeilenhoehe-titel);
  margin: 0 0 var(--abstand-m);
  font-weight: 800;
  letter-spacing: -0.02em;
  /* Lange Woerter duerfen umbrechen, statt aus ihrem Kasten zu laufen.
     hyphens setzt dabei einen Trennstrich, gesteuert ueber lang="de"
     im html Element. Deutsche Fachwoerter sind oft sehr lang. */
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

h1 { font-size: var(--groesse-riesig); }
h2 { font-size: var(--groesse-gross); }
h3 { font-size: var(--groesse-mittel); }

p { margin: 0 0 var(--abstand-m); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--farbe-marke-hell);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dauer) var(--kurve);
}
a:hover { color: var(--farbe-text-stark); }

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

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

/* Sichtbarer Tastaturfokus, Pflicht fuer Barrierefreiheit */
:focus-visible {
  outline: 3px solid var(--farbe-fokus);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}

/* =========================================================================
   3. HILFSKLASSEN
   ========================================================================= */
.inhalt {
  width: 100%;
  max-width: var(--breite-inhalt);
  margin-inline: auto;
  padding-inline: var(--rand-seite);
}

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

/* Abwechselnd leicht abgesetzter Hintergrund */
.abschnitt--abgesetzt {
  background-color: var(--farbe-flaeche);
  border-block: 1px solid var(--farbe-linie);
}

/* Nur fuer Screenreader sichtbar */
.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;
}

/* Sprungmarke "Zum Inhalt springen" */
.sprungmarke {
  position: absolute;
  left: var(--abstand-s);
  top: -100px;
  z-index: 200;
  background-color: var(--farbe-marke);
  color: var(--farbe-marke-kontrast);
  padding: var(--abstand-s) var(--abstand-m);
  border-radius: var(--radius-s);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--dauer) var(--kurve);
}
.sprungmarke:focus {
  top: var(--abstand-s);
  color: var(--farbe-marke-kontrast);
}

/* Kleine Ueberzeile ueber den Ueberschriften */
.ueberzeile {
  display: inline-block;
  font-size: var(--groesse-mini);
  letter-spacing: var(--laufweite-label);
  text-transform: uppercase;
  color: var(--farbe-marke-hell);
  font-weight: 700;
  margin-bottom: var(--abstand-s);
}

.abschnitt-kopf {
  max-width: var(--breite-schmal);
  margin-bottom: var(--abstand-xl);
}
.abschnitt-kopf p {
  color: var(--farbe-text-leise);
  font-size: 1.05em;
}

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

/* --- Knoepfe --- */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-xs);
  padding: 0.95em 1.9em;
  border-radius: var(--radius-rund);
  border: 1px solid transparent;
  font-family: var(--schrift-text);
  font-size: var(--groesse-klein);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dauer) var(--kurve),
              background-color var(--dauer) var(--kurve),
              border-color var(--dauer) var(--kurve),
              color var(--dauer) var(--kurve),
              box-shadow var(--dauer) var(--kurve);
}
.knopf:hover { transform: translateY(-2px); }

.knopf--voll {
  background-color: var(--farbe-marke);
  color: var(--farbe-marke-kontrast);
  box-shadow: var(--schatten-marke);
}
.knopf--voll:hover {
  background-color: var(--farbe-marke-hell);
  color: var(--farbe-marke-kontrast);
}

.knopf--linie {
  background-color: transparent;
  color: var(--farbe-text-stark);
  border-color: var(--farbe-linie-stark);
}
.knopf--linie:hover {
  border-color: var(--farbe-marke);
  color: var(--farbe-marke-hell);
}

.knopf--breit { width: 100%; }

/* =========================================================================
   4. KOPFBEREICH UND NAVIGATION
   ========================================================================= */
.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--farbe-schleier);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--farbe-linie);
}

.kopf__reihe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-m);
  min-height: 4.75rem;
}

.kopf__logo { display: flex; align-items: center; }
.kopf__logo img {
  height: 3.1rem;
  width: auto;
}

.nav__liste {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.8rem);
}

.nav__link {
  color: var(--farbe-text);
  text-decoration: none;
  font-size: var(--groesse-klein);
  font-weight: 600;
  padding: 0.4rem 0;
  position: relative;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background-color: var(--farbe-marke);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dauer) var(--kurve);
}
.nav__link:hover { color: var(--farbe-marke-hell); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__knopf { margin-left: var(--abstand-s); }

/* Menueknopf, nur mobil sichtbar */
.menue-knopf {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid var(--farbe-linie-stark);
  border-radius: var(--radius-s);
  color: var(--farbe-text-stark);
  padding: 0.6rem 0.9rem;
  font-size: var(--groesse-klein);
  font-weight: 700;
  cursor: pointer;
}
.menue-knopf__balken {
  position: relative;
  display: block;
  width: 20px; height: 2px;
  background-color: currentColor;
  transition: background-color var(--dauer) var(--kurve);
}
.menue-knopf__balken::before,
.menue-knopf__balken::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px; height: 2px;
  background-color: currentColor;
  transition: transform var(--dauer) var(--kurve);
}
.menue-knopf__balken::before { top: -6px; }
.menue-knopf__balken::after { top: 6px; }

/* Zustand geoeffnet: Balken wird zum Kreuz */
.menue-knopf[aria-expanded="true"] .menue-knopf__balken {
  background-color: transparent;
}
.menue-knopf[aria-expanded="true"] .menue-knopf__balken::before {
  transform: translateY(6px) rotate(45deg);
}
.menue-knopf[aria-expanded="true"] .menue-knopf__balken::after {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 900px) {
  .menue-knopf { display: inline-flex; }

  .nav {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background-color: var(--farbe-grund);
    border-bottom: 1px solid var(--farbe-linie);
    box-shadow: var(--schatten-stark);
    display: none;
  }
  .nav.ist-offen { display: block; }

  .nav__liste {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--abstand-s) var(--rand-seite) var(--abstand-l);
  }
  .nav__liste li { border-bottom: 1px solid var(--farbe-linie); }
  .nav__liste li:last-child { border-bottom: 0; }

  .nav__link {
    display: block;
    padding: var(--abstand-m) 0;
    font-size: 1.05rem;
  }
  .nav__link::after { display: none; }

  .nav__knopf {
    margin: var(--abstand-m) 0 0;
    width: 100%;
  }
}

/* =========================================================================
   5. STARTBEREICH (HERO)
   ========================================================================= */
.start {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 8vw, 6rem) clamp(3.5rem, 9vw, 6.5rem);
}

/* Dezenter Lichtschein in der Markenfarbe */
.start::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto auto;
  width: min(70vw, 780px);
  aspect-ratio: 1;
  background: radial-gradient(circle,
              rgba(91, 175, 166, 0.22) 0%,
              rgba(91, 175, 166, 0) 65%);
  pointer-events: none;
}

.start__raster {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.start__titel span {
  color: var(--farbe-marke-hell);
  display: block;
}

.start__text {
  font-size: 1.15em;
  color: var(--farbe-text-leise);
  max-width: 46ch;
}

.start__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-s);
  margin-top: var(--abstand-l);
}

.start__hinweis {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-xs);
  margin-top: var(--abstand-m);
  padding: 0.5rem 1rem;
  border: 1px solid var(--farbe-linie-stark);
  border-radius: var(--radius-rund);
  font-size: var(--groesse-klein);
  color: var(--farbe-text-leise);
}
.start__hinweis strong { color: var(--farbe-marke-hell); }

/* Merkmale unter dem Startbereich */
.start__merkmale {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-m) var(--abstand-l);
  margin-top: var(--abstand-xl);
  padding-top: var(--abstand-l);
  border-top: 1px solid var(--farbe-linie);
}
.start__merkmale li {
  display: flex;
  align-items: center;
  gap: var(--abstand-xs);
  font-size: var(--groesse-klein);
  color: var(--farbe-text-leise);
}
.start__merkmale li::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background-color: var(--farbe-marke);
  flex: none;
}

.start__bild {
  border-radius: var(--radius-l);
  border: 1px solid var(--farbe-linie);
  overflow: hidden;
  box-shadow: var(--schatten-stark);
  background-color: var(--farbe-flaeche);
}

@media (max-width: 900px) {
  /* Auf schmalen Bildschirmen untereinander.
     Die Ueberschrift bleibt bewusst oben, das Bild folgt darunter. */
  .start__raster { grid-template-columns: 1fr; }
}

/* =========================================================================
   6. LEISTUNGEN
   ========================================================================= */
.leistungen__raster {
  display: grid;
  /* min(220px, 100%) sorgt dafuer, dass die Spalte auf sehr schmalen
     Bildschirmen nicht breiter wird als der Platz, den sie hat. */
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--abstand-m);
}

.leistung {
  background-color: var(--farbe-flaeche-hoch);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-m);
  padding: var(--abstand-l);
  /* Rasterfelder haben von Haus aus eine Mindestbreite in Inhaltsgroesse.
     min-width 0 hebt das auf, sonst schiebt ein langes Wort die Karte
     breiter als ihre Spalte. */
  min-width: 0;
  /* Nichts darf ueber den Rand der Karte hinausragen. */
  overflow: hidden;
  transition: transform var(--dauer) var(--kurve),
              border-color var(--dauer) var(--kurve);
}
.leistung:hover {
  transform: translateY(-4px);
  border-color: var(--farbe-marke-dunkel);
}

.leistung__symbol {
  width: 46px; height: 46px;
  margin-bottom: var(--abstand-m);
  color: var(--farbe-marke);
}
.leistung__symbol svg { width: 100%; height: 100%; }

.leistung h3 {
  margin-bottom: var(--abstand-s);
  /* Kleinere, mitwachsende Groesse als bei normalen h3 */
  font-size: var(--groesse-kartentitel);
  /* Letzte Sicherung: passt ein Wort selbst getrennt nicht mehr in die
     Zeile, wird es hart umbrochen statt ueber den Rand geschoben. */
  overflow-wrap: anywhere;
}
.leistung p {
  color: var(--farbe-text-leise);
  font-size: var(--groesse-klein);
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

/* =========================================================================
   7. PREISE
   ========================================================================= */
.preise__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--abstand-m);
  align-items: start;
}

.paket {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Kein overflow hidden, die Fahne "Am haeufigsten gewaehlt" ragt
     absichtlich ueber den oberen Rand hinaus. */
  min-width: 0;
  background-color: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-l);
  padding: var(--abstand-l);
  transition: transform var(--dauer) var(--kurve),
              border-color var(--dauer) var(--kurve),
              box-shadow var(--dauer) var(--kurve);
}
.paket:hover {
  transform: translateY(-4px);
  border-color: var(--farbe-marke-dunkel);
  box-shadow: var(--schatten-weich);
}

/* Hervorgehobenes Paket (PREMIUM+) */
.paket--hervor {
  background-color: var(--farbe-flaeche-hoch);
  border-color: var(--farbe-marke);
  box-shadow: var(--schatten-marke);
}
.paket--hervor:hover { border-color: var(--farbe-marke-hell); }

.paket__fahne {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--farbe-marke);
  color: var(--farbe-marke-kontrast);
  font-size: var(--groesse-mini);
  font-weight: 800;
  letter-spacing: var(--laufweite-label);
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-rund);
  white-space: nowrap;
}

.paket__name {
  font-size: 1.1rem;
  letter-spacing: var(--laufweite-label);
  text-transform: uppercase;
  margin-bottom: var(--abstand-xs);
}

.paket__preis {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-bottom: var(--abstand-m);
  padding-bottom: var(--abstand-m);
  border-bottom: 1px solid var(--farbe-linie);
}
.paket__preis-ab {
  font-size: var(--groesse-mini);
  text-transform: uppercase;
  letter-spacing: var(--laufweite-label);
  color: var(--farbe-text-leise);
}
.paket__preis-zahl {
  font-family: var(--schrift-titel);
  font-size: 2.3rem;
  font-weight: 800;
  color: var(--farbe-marke-hell);
  line-height: 1;
}

.paket__basis {
  font-size: var(--groesse-klein);
  color: var(--farbe-text-leise);
  margin-bottom: var(--abstand-s);
}
.paket__basis strong { color: var(--farbe-text); }

.paket__liste {
  display: grid;
  gap: 0.6rem;
  margin-bottom: var(--abstand-l);
  font-size: var(--groesse-klein);
}
.paket__liste li {
  display: grid;
  grid-template-columns: 1.15rem minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
/* Haken vor jedem Leistungspunkt.
   Der Haken ist eine Maske ueber einer Farbflaeche, dadurch nimmt er
   automatisch die Markenfarbe aus dem :root Block an. */
.paket__liste li::before {
  content: "";
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  background-color: var(--farbe-marke);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.2 16.4 4.8 12l1.4-1.4 3 3 7.6-7.6L18.2 7.4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.2 16.4 4.8 12l1.4-1.4 3 3 7.6-7.6L18.2 7.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.paket__knopf { margin-top: auto; }

.preise__fussnote {
  margin-top: var(--abstand-l);
  font-size: var(--groesse-klein);
  color: var(--farbe-text-leise);
  max-width: var(--breite-schmal);
}

/* =========================================================================
   8. VORHER / NACHHER
   ========================================================================= */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--abstand-m);
}

.galerie__stueck {
  margin: 0;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-m);
  overflow: hidden;
  background-color: var(--farbe-flaeche-hoch);
}
.galerie__stueck img { width: 100%; }

.galerie__bild {
  position: relative;
}
.galerie__marke {
  position: absolute;
  top: var(--abstand-s);
  left: var(--abstand-s);
  background-color: var(--farbe-schleier);
  border: 1px solid var(--farbe-linie-stark);
  color: var(--farbe-marke-hell);
  font-size: var(--groesse-mini);
  font-weight: 800;
  letter-spacing: var(--laufweite-label);
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-rund);
}

.galerie__stueck figcaption {
  padding: var(--abstand-m);
  font-size: var(--groesse-klein);
  color: var(--farbe-text-leise);
}

/* =========================================================================
   9. ABLAUF
   ========================================================================= */
.ablauf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--abstand-l);
  counter-reset: schritt;
}

.ablauf__schritt {
  position: relative;
  padding-top: var(--abstand-l);
  border-top: 2px solid var(--farbe-linie-stark);
}
.ablauf__schritt::before {
  counter-increment: schritt;
  content: counter(schritt);
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-50%);
  width: 2.6rem; height: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: var(--farbe-marke);
  color: var(--farbe-marke-kontrast);
  font-family: var(--schrift-titel);
  font-weight: 800;
}
.ablauf__schritt h3 { margin-bottom: var(--abstand-s); }
.ablauf__schritt p { color: var(--farbe-text-leise); font-size: var(--groesse-klein); }

/* =========================================================================
   10. KUNDENSTIMMEN
   ========================================================================= */
.stimmen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--abstand-m);
}

.stimme {
  margin: 0;
  background-color: var(--farbe-flaeche-hoch);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-m);
  padding: var(--abstand-l);
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
}

.stimme__sterne {
  display: flex;
  gap: 0.2rem;
  color: var(--farbe-marke);
}
.stimme__sterne svg { width: 18px; height: 18px; }

.stimme blockquote {
  margin: 0;
  font-size: 1.02em;
}

.stimme figcaption {
  font-size: var(--groesse-klein);
  color: var(--farbe-text-leise);
  margin-top: auto;
}
.stimme figcaption strong { color: var(--farbe-text); display: block; }

/* =========================================================================
   11. KONTAKT UND FORMULAR
   ========================================================================= */
.kontakt__raster {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

@media (max-width: 900px) {
  .kontakt__raster { grid-template-columns: 1fr; }
}

.formular {
  background-color: var(--farbe-flaeche-hoch);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-l);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}

.feld-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--abstand-m);
}

.feld {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: var(--abstand-m);
}

.feld label {
  font-size: var(--groesse-klein);
  font-weight: 600;
  color: var(--farbe-text);
}
.feld label .pflicht { color: var(--farbe-marke-hell); }

.feld input,
.feld select,
.feld textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background-color: var(--farbe-grund);
  border: 1px solid var(--farbe-linie-stark);
  border-radius: var(--radius-s);
  color: var(--farbe-text);
  font-family: var(--schrift-text);
  font-size: 1rem;
  transition: border-color var(--dauer) var(--kurve);
}
.feld textarea { resize: vertical; min-height: 8rem; }

.feld select {
  appearance: none;
  /* Pfeil als eingebettetes SVG. Feste Farbe noetig, entspricht
     --farbe-text-leise (#9fb0b3). Bei Markenwechsel hier mit aendern. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%239fb0b3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 1.4rem;
  padding-right: 2.6rem;
}

.feld input:hover,
.feld select:hover,
.feld textarea:hover { border-color: var(--farbe-marke-dunkel); }

.feld input::placeholder,
.feld textarea::placeholder { color: var(--farbe-text-leise); opacity: 0.7; }

/* Fehlerzustand */
.feld input[aria-invalid="true"],
.feld select[aria-invalid="true"],
.feld textarea[aria-invalid="true"] {
  border-color: var(--farbe-fehler);
}

/* Erklaerender Hinweis unter einem Feld, kein Fehler.
   Ueber aria-describedby mit dem Feld verknuepft, wird also auch
   vorgelesen, sobald das Feld den Fokus bekommt. */
.feld__hilfe {
  font-size: var(--groesse-mini);
  color: var(--farbe-text-leise);
  line-height: 1.45;
}

.feld__fehler {
  font-size: var(--groesse-mini);
  color: var(--farbe-fehler);
  min-height: 1.1em;
}

/* Honeypot: aus dem Sichtfeld geschoben, nicht display:none,
   damit einfache Bots das Feld weiterhin ausfuellen. */
.honigtopf {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
}

.formular__status {
  margin-top: var(--abstand-m);
  padding: var(--abstand-s) var(--abstand-m);
  border-radius: var(--radius-s);
  font-size: var(--groesse-klein);
  border: 1px solid transparent;
}
.formular__status:empty { display: none; }
.formular__status.ist-erfolg {
  color: var(--farbe-erfolg);
  border-color: var(--farbe-erfolg);
  background-color: rgba(87, 192, 138, 0.08);
}
.formular__status.ist-fehler {
  color: var(--farbe-fehler);
  border-color: var(--farbe-fehler);
  background-color: rgba(255, 138, 128, 0.08);
}

.formular__hinweis {
  margin-top: var(--abstand-m);
  font-size: var(--groesse-mini);
  color: var(--farbe-text-leise);
}

/* --- Kontaktdaten neben dem Formular --- */
.kontaktdaten {
  display: grid;
  gap: var(--abstand-m);
}

.kontaktdaten__block {
  background-color: var(--farbe-flaeche-hoch);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-m);
  padding: var(--abstand-l);
}
.kontaktdaten__block h3 {
  font-size: 1.05rem;
  letter-spacing: var(--laufweite-label);
  text-transform: uppercase;
  margin-bottom: var(--abstand-s);
}
.kontaktdaten__block a { font-weight: 600; }
.kontaktdaten__block address {
  font-style: normal;
  color: var(--farbe-text-leise);
}
.kontaktdaten__zeit {
  display: flex;
  justify-content: space-between;
  gap: var(--abstand-m);
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--farbe-linie);
  font-size: var(--groesse-klein);
  color: var(--farbe-text-leise);
}
.kontaktdaten__zeit:last-child { border-bottom: 0; }
.kontaktdaten__zeit strong { color: var(--farbe-text); font-weight: 600; }

/* =========================================================================
   12. FUSSBEREICH
   ========================================================================= */
.fuss {
  background-color: var(--farbe-flaeche);
  border-top: 1px solid var(--farbe-linie);
  padding-block: var(--abstand-xl) var(--abstand-l);
}

.fuss__raster {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: var(--abstand-l);
  padding-bottom: var(--abstand-l);
  border-bottom: 1px solid var(--farbe-linie);
}
@media (max-width: 760px) {
  .fuss__raster { grid-template-columns: 1fr; }
}

.fuss__logo img {
  height: 3.4rem;
  width: auto;
  margin-bottom: var(--abstand-m);
}

.fuss h3 {
  font-size: 0.95rem;
  letter-spacing: var(--laufweite-label);
  text-transform: uppercase;
  margin-bottom: var(--abstand-m);
}

.fuss p, .fuss address, .fuss li {
  color: var(--farbe-text-leise);
  font-size: var(--groesse-klein);
}
.fuss address { font-style: normal; }
.fuss__liste { display: grid; gap: 0.55rem; }

.fuss__unten {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--abstand-s);
  padding-top: var(--abstand-l);
  font-size: var(--groesse-mini);
  color: var(--farbe-text-leise);
}
.fuss__rechtslinks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-m);
}

/* =========================================================================
   13. BEWEGUNG UND BARRIEREFREIHEIT
   ========================================================================= */

/* Einblenden beim Scrollen.
   Nur wenn JavaScript laeuft, sonst bleibt alles sichtbar (no-js). */
html:not(.no-js) .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dauer-lang) var(--kurve),
              transform var(--dauer-lang) var(--kurve);
}
html:not(.no-js) .reveal.ist-sichtbar {
  opacity: 1;
  transform: none;
}

/* Nutzer, die weniger Bewegung wuenschen, bekommen keine Animation */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html:not(.no-js) .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Unterseiten (Impressum, Datenschutz) */
.rechtstext {
  max-width: var(--breite-schmal);
  padding-block: var(--abstand-abschnitt);
}
.rechtstext h2 {
  font-size: var(--groesse-mittel);
  margin-top: var(--abstand-xl);
}
.rechtstext h2:first-of-type { margin-top: var(--abstand-l); }
.rechtstext ul {
  list-style: disc;
  padding-left: 1.3rem;
  margin-bottom: var(--abstand-m);
  color: var(--farbe-text-leise);
}
.rechtstext li { margin-bottom: 0.4rem; }

/* Auffaelliger Kasten fuer Platzhalterhinweise */
.hinweis-kasten {
  border: 1px dashed var(--farbe-marke);
  border-radius: var(--radius-m);
  padding: var(--abstand-m);
  background-color: var(--farbe-flaeche-hoch);
  color: var(--farbe-text);
  font-size: var(--groesse-klein);
  margin-bottom: var(--abstand-l);
}