/* ==========================================================================
   Novas Clean Facility Services Benz
   Stylesheet
   --------------------------------------------------------------------------
   Mobile zuerst: Grundregeln gelten fürs Handy, grössere Bildschirme werden
   mit min-width-Abfragen ergänzt.

   INHALT
     01  Design-Tokens (Farben, Abstände, Schrift)  <- hier Farben ändern
     02  Schriften (selbst gehostet)
     03  Reset & Grundlagen
     04  Typografie
     05  Layout (Container, Abschnitte, Raster)
     06  Buttons
     07  Kopf & Navigation
     08  Bild-Platzhalter
     09  Titelbild (Hero)
     10  Laufband
     11  Warum Novas Clean (Kreis-Logo)
     12  Wellenlinie
     13  Spezialbereiche (Aufklappliste)
     14  Einzugsgebiet
     15  Team
     16  Qualität (Besen-Grafik)
     17  Formular
     18  Kontaktdaten
     19  Leistungen
     20  Über uns
     21  Vorschau-Leistungsseiten
     22  Rechtstexte
     23  Fusszeile
     24  Hilfsklassen
   ========================================================================== */


/* ==========================================================================
   01  DESIGN-TOKENS
   --------------------------------------------------------------------------
   Vorgabe Thomas: Marineblau und Weiss sind die Hauptfarben. Hellgrau nur
   für Details (Abschnitts-Hintergrund, Linien).

   Kontraste (WCAG AA verlangt 4,5 : 1 für Text):
     Marineblau #064384 auf Weiss      9,8 : 1
     Marineblau #064384 auf #F2F2F2    8,9 : 1
     Weiss auf Marineblau              9,8 : 1
     Text #4A4A4A auf Weiss            8,9 : 1
     Text #4A4A4A auf #F2F2F2          7,9 : 1
   ========================================================================== */

:root {
  --c-primary:      #064384;   /* MARINEBLAU: Überschriften, Knöpfe, Logo   */
  --c-primary-dark: #04315F;   /* Hover-Zustand der blauen Knöpfe           */

  --c-surface:      #FFFFFF;
  --c-surface-alt:  #F2F2F2;   /* Hellgrau: abwechselnde Abschnitte         */
  --c-line:         #D9D9D9;   /* Linien                                    */
  --c-placeholder:  #D9D9D9;   /* Bild-Platzhalter bis Freitag              */

  --c-text:         #4A4A4A;   /* Fliesstext dunkelgrau                     */
  --c-text-muted:   #6B6B6B;   /* Nebentext (5,3 : 1 auf Weiss)             */
  --c-text-invert:  #FFFFFF;

  --c-error:        #B3261E;

  /* --- Abstände (8px-Raster) -------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* --- Schrift ----------------------------------------------------------
     Wie auf der alten Seite: Überschriften in einer eleganten Serifenschrift,
     Fliesstext schlicht ohne Serifen. Die Schriftdateien liegen später in
     assets/fonts/ (siehe Abschnitt 02). Bis dahin springen die Ersatz-
     schriften dahinter ein.
  ----------------------------------------------------------------------- */
  --font-serif: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg:   clamp(1.125rem, 0.5vw + 1rem,  1.25rem);
  --fs-xl:   clamp(1.375rem, 1vw + 1.1rem,  1.75rem);
  --fs-2xl:  clamp(1.75rem,  2.5vw + 1.1rem, 2.75rem);
  --fs-3xl:  clamp(2.25rem,  4vw + 1.1rem,  4rem);
  --fs-hero: clamp(2.6rem,   6vw + 1rem,    5.25rem);

  /* --- Form ------------------------------------------------------------- */
  --radius:      6px;
  --radius-pill: 999px;

  /* --- Layout ----------------------------------------------------------- */
  --container:      1160px;
  --container-slim:  780px;
  --header-h:         76px;

  --transition: 180ms cubic-bezier(.4, 0, .2, 1);
}


/* ==========================================================================
   02  SCHRIFTEN (selbst gehostet)
   --------------------------------------------------------------------------
   Keine Google Fonts: Die Dateien liegen auf dem eigenen Server, damit beim
   Laden keine Daten an Dritte gehen. Quelle: fontsource (Zeichensatz
   "latin", enthält ä, ö, ü). Lizenz: SIL Open Font License, freie Nutzung,
   Lizenztexte in assets/fonts/.

   font-display: swap zeigt sofort die Ersatzschrift und tauscht, sobald die
   Datei geladen ist. So bleibt kein Text unsichtbar.
   ========================================================================== */

@font-face {
  font-family: "Libre Caslon Text";
  src: url("../fonts/libre-caslon-text-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Text";
  src: url("../fonts/libre-caslon-text-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Inter als variable Schrift: eine Datei für alle Stärken von 100 bis 900 */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-variabel.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* ==========================================================================
   03  RESET & GRUNDLAGEN
   ========================================================================== */

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

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

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* Sicherheitsnetz gegen seitliches Verrutschen */
}

img, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--c-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-primary-dark); }

:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--c-primary); color: #fff; }

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 200;
  padding: var(--s-2) var(--s-4);
  background: var(--c-primary);
  color: #fff;
}
.skip-link:focus { top: var(--s-4); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ==========================================================================
   04  TYPOGRAFIE
   ========================================================================== */

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.15;
  color: var(--c-primary);
  /* Lange Wörter ("Datenschutzerklärung") dürfen am Handy umbrechen */
  hyphens: auto;
  overflow-wrap: break-word;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }

p + p { margin-top: var(--s-4); }

.lead { font-size: var(--fs-lg); }

.eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: var(--s-3);
}


/* ==========================================================================
   05  LAYOUT
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-4);
}
.container--slim { max-width: var(--container-slim); }

@media (min-width: 760px) {
  .container { padding-inline: var(--s-6); }
}

.section { padding-block: var(--s-8); }
.section--alt { background: var(--c-surface-alt); }
.section--tight { padding-block: var(--s-7); }

@media (min-width: 760px) {
  .section { padding-block: var(--s-9); }
}

.section__head { margin-bottom: var(--s-6); }
.section__head--center { text-align: center; }
.section__head p { margin-top: var(--s-3); }

.split {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .split--wide-left { grid-template-columns: 1.3fr 1fr; }
}

.page-head {
  padding-block: var(--s-8) var(--s-6);
}
.page-head .lead { margin-top: var(--s-4); max-width: 46rem; }


/* ==========================================================================
   06  BUTTONS
   --------------------------------------------------------------------------
   Hauptknopf: Marineblau gefüllt. Zweitknopf: weiss mit blauem Rand.
   Auf blauem Grund ist der Hauptknopf weiss (.btn--weiss).
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: var(--s-3) var(--s-6);
  border: 2px solid var(--c-primary);
  border-radius: var(--radius-pill);
  background: var(--c-primary);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn:hover { background: var(--c-primary-dark); border-color: var(--c-primary-dark); color: #fff; }

.btn--outline { background: #fff; color: var(--c-primary); }
.btn--outline:hover { background: var(--c-primary); color: #fff; }

.btn--weiss { background: #fff; border-color: #fff; color: var(--c-primary); }
.btn--weiss:hover { background: transparent; color: #fff; border-color: #fff; }

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

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}
.btn-row--center { justify-content: center; }


/* ==========================================================================
   07  KOPF & NAVIGATION
   --------------------------------------------------------------------------
   Weisser Kopf, damit das blaue Logo gut sichtbar ist. Am Handy klappt die
   Navigation über den Burger auf. Ab 1000px steht sie nebeneinander
   (muss mit main.js übereinstimmen).
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--c-line);
}

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

/* --- Logo (Textplatzhalter bis die Originaldatei kommt) ------------------ */
.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  color: var(--c-primary);
  text-decoration: none;
}
.logo__name {
  position: relative;
  font-family: var(--font-serif);
  font-size: 1.75rem;
  letter-spacing: -.01em;
}
.logo__stern {
  position: absolute;
  top: -.55em;
  right: 1.05em;
  width: .55em;
  height: .55em;
}
.logo__zusatz {
  margin-top: .3rem;
  font-family: var(--font-sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.logo:hover { color: var(--c-primary); }

/* --- Burger --------------------------------------------------------------- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  background: none;
  color: var(--c-primary);
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  transition: transform var(--transition), background var(--transition);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after  { top:  7px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-7px) rotate(-45deg); }

/* --- Navigation am Handy -------------------------------------------------- */
.nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  background: #fff;
  border-bottom: 1px solid var(--c-line);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .06);
}
.nav[data-open="true"] { display: block; }

.nav__list {
  padding: var(--s-2) var(--s-4) var(--s-5);
}
.nav__link {
  display: block;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-text);
  text-decoration: none;
  font-size: var(--fs-lg);
}
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--c-primary); }
.nav__link[aria-current="page"] { font-weight: 600; }

.nav__cta { margin-top: var(--s-5); }
.nav__cta .btn { width: 100%; }

/* --- Navigation ab 1000px ------------------------------------------------- */
@media (min-width: 1000px) {
  .nav-toggle { display: none; }

  .nav {
    position: static;
    display: block;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .nav__list {
    display: flex;
    align-items: center;
    gap: var(--s-6);
    padding: 0;
  }
  .nav__link {
    padding: var(--s-2) 0;
    border-bottom: 1px solid transparent;
    font-size: var(--fs-base);
  }
  .nav__link:hover,
  .nav__link[aria-current="page"] { border-bottom-color: var(--c-primary); }
  .nav__link[aria-current="page"] { font-weight: 400; }

  .nav__cta { margin-top: 0; margin-left: var(--s-2); }
  .nav__cta .btn { width: auto; min-height: 42px; padding-inline: var(--s-5); }
}


/* ==========================================================================
   08  BILD-PLATZHALTER
   --------------------------------------------------------------------------
   Graue Fläche in der richtigen Grösse mit Beschriftung. Die Originalbilder
   kommen am Freitag. Dann wird jedes .ph durch ein <img> mit gleichem
   Seitenverhältnis ersetzt (Alt-Text steht bereits im aria-label).
   ========================================================================== */

.ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: var(--ph-ratio, 4 / 3);
  padding: var(--s-4);
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,.35) 14px 15px),
    var(--c-placeholder);
  color: #555;
  font-size: var(--fs-sm);
  text-align: center;
}
.ph__label {
  padding: var(--s-1) var(--s-3);
  background: rgba(255, 255, 255, .85);
  border-radius: var(--radius);
}
.ph__label small { display: block; color: var(--c-text-muted); font-size: var(--fs-xs); }


/* ==========================================================================
   09  TITELBILD (HERO)
   --------------------------------------------------------------------------
   Wie auf der alten Seite: helles Foto mit Fensterabzieher, darauf der
   Schriftzug in Marineblau. Das Foto ist hell, darum dunkle Schrift.
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(82vh, 720px);
  padding-block: var(--s-8);
  overflow: hidden;
}
/* Foto (und später Video) füllt den ganzen Titelbereich */
.hero__media {
  position: absolute;
  inset: 0;
  background: var(--c-surface-alt);
}
.hero__media img,
.hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% center;   /* am Handy: Griff seitlich, Text auf hellem Grund */
}
/* Leichter weisser Schleier hinter dem Text, damit er auf jedem Foto lesbar bleibt */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 45% 40% at center, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
.hero__inhalt {
  position: relative;
  z-index: 1;
  text-align: center;
}
.hero h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hero__claim {
  margin-top: var(--s-3);
  font-family: var(--font-serif);
  font-size: var(--fs-hero);
  line-height: 1.05;
  color: var(--c-primary);
}
.hero__sub {
  margin-top: var(--s-3);
  font-size: var(--fs-lg);
  color: var(--c-text);
}
.hero .btn-row { justify-content: center; }


/* ==========================================================================
   10  LAUFBAND
   --------------------------------------------------------------------------
   Die Werte laufen endlos von rechts nach links. Der Inhalt steht im HTML
   zweimal hintereinander, damit kein Loch entsteht. Bei "Bewegung
   reduzieren" (Systemeinstellung) steht das Band still.
   ========================================================================== */

.laufband {
  overflow: hidden;
  padding-block: var(--s-4);
  background: var(--c-primary);
  color: #fff;
}
.laufband__spur {
  display: flex;
  width: max-content;
  animation: laufband 40s linear infinite;
}
.laufband__liste {
  display: flex;
  gap: var(--s-6);
  padding-right: var(--s-6);
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  white-space: nowrap;
}
@keyframes laufband {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ==========================================================================
   11  WARUM NOVAS CLEAN (Kreis-Logo)
   ========================================================================== */

.warum__intro {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  color: var(--c-primary);
  margin-top: var(--s-4);
}
.haken-liste { margin-top: var(--s-5); }
.haken-liste li {
  position: relative;
  padding: var(--s-3) 0 var(--s-3) 2rem;
  border-bottom: 1px solid var(--c-line);
}
.haken-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 1rem;
  height: .55rem;
  border-left: 2px solid var(--c-primary);
  border-bottom: 2px solid var(--c-primary);
  transform: rotate(-45deg);
}

/* Platzhalter für das Kreis-Logo: wird durch die Originalgrafik ersetzt */
.kreis {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(100%, 260px);
  aspect-ratio: 1;
  order: -1;   /* am Handy steht das Kreis-Logo als Überschrift oben */
  margin-inline: auto;
  border: 1.5px solid var(--c-text-muted);
  border-radius: 50%;
  text-align: center;
  line-height: 1;
}
.kreis__warum {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  color: var(--c-text-muted);
}
.kreis .logo { align-items: center; margin-top: var(--s-2); }
.kreis .logo__name { font-size: 2rem; }
.kreis .logo__zusatz { font-size: .8rem; }

@media (min-width: 900px) {
  .kreis { width: min(100%, 340px); order: 0; }
  .kreis .logo__name { font-size: 2.6rem; }
  .kreis__warum { font-size: 2.2rem; }
}


/* ==========================================================================
   12  WELLENLINIE
   ========================================================================== */

.welle {
  display: block;
  width: 100%;
  height: 60px;
  color: var(--c-text-muted);
}


/* ==========================================================================
   13  SPEZIALBEREICHE (Aufklappliste)
   --------------------------------------------------------------------------
   Wie auf der alten Seite. <details> klappt ohne JavaScript auf.
   ========================================================================== */

.spezial__stern { width: 36px; height: 36px; color: var(--c-primary); margin-bottom: var(--s-4); }

.aufklapp { border-top: 1px solid var(--c-line); }
.aufklapp details { border-bottom: 1px solid var(--c-line); }
.aufklapp summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  color: var(--c-primary);
  cursor: pointer;
  list-style: none;
}
.aufklapp summary::-webkit-details-marker { display: none; }
.aufklapp summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-sans);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-text-muted);
  transition: transform var(--transition);
}
.aufklapp details[open] summary::after { transform: rotate(45deg); }
.aufklapp details p { padding-bottom: var(--s-4); }
.aufklapp .neu {
  margin-right: var(--s-2);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  vertical-align: middle;
}


/* ==========================================================================
   14  EINZUGSGEBIET
   ========================================================================== */

.orte {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5);
}
.orte li {
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  background: #fff;
  font-size: var(--fs-sm);
}
.section--alt .orte li { border-color: var(--c-line); }


/* ==========================================================================
   15  TEAM
   ========================================================================== */

.team {
  display: grid;
  gap: var(--s-6);
  max-width: 360px;
  margin-inline: auto;
}
@media (min-width: 760px) {
  .team { grid-template-columns: repeat(3, 1fr); max-width: none; align-items: start; }
  /* Leicht versetzt wie auf der alten Seite */
  .team__person:nth-child(2) { margin-top: var(--s-8); }
}
.team__person .ph { --ph-ratio: 3 / 4; }
.team__name {
  margin-top: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-line);
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  color: var(--c-primary);
}


/* ==========================================================================
   16  QUALITÄT (Besen-Grafik)
   ========================================================================== */

.qualitaet__grafik .ph { --ph-ratio: 2 / 3; max-width: 320px; margin-inline: auto; }
.qualitaet h2 { font-size: var(--fs-3xl); }
.qualitaet p { margin-top: var(--s-5); }


/* ==========================================================================
   17  FORMULAR
   ========================================================================== */

.form { display: grid; gap: var(--s-4); }
.form__row { display: grid; gap: var(--s-4); }
@media (min-width: 600px) {
  .form__row { grid-template-columns: 1fr 1fr; }
}

.field label {
  display: block;
  margin-bottom: var(--s-1);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.field .optional { font-weight: 400; color: var(--c-text-muted); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid #9A9A9A;   /* 2,8 : 1 auf Weiss, genug für Feldränder */
  border-radius: var(--radius);
  background: #fff;
  transition: border-color var(--transition);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--c-primary); outline: 2px solid var(--c-primary); outline-offset: 0; }

.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: var(--c-error); }
.field__error { margin-top: var(--s-1); font-size: var(--fs-sm); color: var(--c-error); }

/* Honigtopf: für Menschen unsichtbar, Bots füllen es aus */
.form__falle {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__hinweis { font-size: var(--fs-sm); color: var(--c-text-muted); }
.form .btn { justify-self: start; }


/* ==========================================================================
   18  KONTAKTDATEN
   ========================================================================== */

.kontaktdaten { display: grid; gap: var(--s-5); }
.kontaktdaten h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: var(--s-1);
}
.zeiten { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--s-4); }


/* ==========================================================================
   19  LEISTUNGEN
   ========================================================================== */

.leistung {
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--c-line);
}
.leistung:first-child { padding-top: 0; }
.leistung h2 { font-size: var(--fs-xl); margin-bottom: var(--s-3); }
.leistung .neu {
  display: inline-block;
  margin-right: var(--s-2);
  padding: 2px var(--s-2);
  border-radius: var(--radius);
  background: var(--c-primary);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  vertical-align: middle;
}
.mehr-link {
  display: inline-block;
  margin-top: var(--s-3);
  font-weight: 600;
}

/* --- Einzelseiten der Leistungen ----------------------------------------- */
.zurueck {
  display: inline-block;
  margin-bottom: var(--s-4);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.zurueck:hover { text-decoration: underline; }

/* Ablauf in nummerierten Schritten */
.schritte {
  counter-reset: schritt;
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-6);
}
.schritte li {
  counter-increment: schritt;
  position: relative;
  padding-left: 3.5rem;
  min-height: 2.5rem;
}
.schritte li::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-family: var(--font-serif);
  font-size: 1.15rem;
}
.schritte strong {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 400;
  color: var(--c-primary);
}

/* Weitere Leistungen als anklickbare Kapseln */
.orte--links li { padding: 0; }
.orte--links a {
  display: block;
  padding: var(--s-2) var(--s-4);
  color: var(--c-primary);
  text-decoration: none;
}
.orte--links a:hover { text-decoration: underline; }

/* "Mehr erfahren" bricht nicht auseinander (geschütztes Leerzeichen im HTML) */


/* ==========================================================================
   20  ÜBER UNS
   ========================================================================== */

.ueber__bild .ph { --ph-ratio: 16 / 7; }
.ueber__spalten { display: grid; gap: var(--s-6); }
@media (min-width: 900px) {
  .ueber__spalten { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
}
.ueber__spalten h2 { font-size: var(--fs-xl); margin-bottom: var(--s-4); }
.punkt-liste li {
  position: relative;
  padding-left: 1.25rem;
}
.punkt-liste li + li { margin-top: var(--s-3); }
.punkt-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-primary);
}


/* ==========================================================================
   21  VORSCHAU-LEISTUNGSSEITEN
   --------------------------------------------------------------------------
   Nur Gerüst, damit Thomas entscheiden kann. Hinweis-Balken und graue
   Kästen werden bei Freigabe entfernt.
   ========================================================================== */

.vorschau-balken {
  padding: var(--s-2) 0;
  background: var(--c-surface-alt);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-sm);
  text-align: center;
}
.vorschau-balken strong { color: var(--c-primary); }

.text-folgt {
  margin-top: var(--s-4);
  padding: var(--s-6) var(--s-4);
  border: 1px dashed #9A9A9A;
  border-radius: var(--radius);
  background: var(--c-surface-alt);
  color: var(--c-text-muted);
  text-align: center;
}
.vorschau-block + .vorschau-block { margin-top: var(--s-7); }


/* ==========================================================================
   22  RECHTSTEXTE
   ========================================================================== */

.recht h2 { font-size: var(--fs-xl); margin: var(--s-7) 0 var(--s-3); }
.recht h2:first-child { margin-top: 0; }
.recht ul { margin-top: var(--s-3); }
.recht li + li { margin-top: var(--s-2); }

.angaben { display: grid; gap: var(--s-5); }
@media (min-width: 760px) {
  .angaben { grid-template-columns: 1fr 1fr; }
}
.angaben dt { font-weight: 600; }

/* Tabelle Dienstleister: am Handy seitlich wischbar statt über den Rand */
.tabelle {
  margin-block: var(--s-4);
  overflow-x: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
.tabelle table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.tabelle th,
.tabelle td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-line);
  text-align: left;
  vertical-align: top;
}
.tabelle th { background: var(--c-surface-alt); color: var(--c-primary); font-weight: 600; }
.tabelle tr:last-child td { border-bottom: 0; }

.offen {
  padding: 0 .25em;
  background: #FFF3B0;   /* gelb markiert: noch offen, nicht erfinden */
  color: #4A4A4A;
}


/* ==========================================================================
   23  FUSSZEILE
   --------------------------------------------------------------------------
   Wie auf der alten Seite: hellgrau, Logo links, Spalten Standort, Kontakt,
   Öffnungszeiten, Info.
   ========================================================================== */

.footer {
  padding-block: var(--s-8) var(--s-5);
  background: var(--c-surface-alt);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm);
}
.footer__grid { display: grid; gap: var(--s-6); }
@media (min-width: 640px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .footer__grid { grid-template-columns: 1.4fr repeat(4, 1fr); }
}
.footer h2 {
  font-size: var(--fs-lg);
  margin-bottom: var(--s-3);
}
.footer address { font-style: normal; }
.footer li + li { margin-top: var(--s-1); }
.footer a { color: var(--c-text); }
.footer a:hover { color: var(--c-primary); }
.footer .logo { color: var(--c-primary); }
.footer__unten {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
}


/* ==========================================================================
   24  HILFSKLASSEN
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.text-center { text-align: center; }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }


/* ==========================================================================
   25  TITELBILD: SCHRIFT DIREKT AUF DEM FOTO (08.10.2026)
   --------------------------------------------------------------------------
   Schrift direkt auf dem Foto: kein weisser Schleier, kein weisses Schild,
   kein weisser Schein. Das Foto ist gespiegelt (Abzieher rechts), die Schrift
   steht links auf dem hellen Teil der Scheibe.
   ========================================================================== */

.hero::after { display: none; }
.hero { min-height: min(86vh, 760px); }
.hero__inhalt { text-align: left; }
.hero h1 {
  display: block;
  padding: 0;
  background: none;
  text-shadow: none;
}
.hero__claim { max-width: 11ch; text-shadow: none; }
.hero__sub { color: var(--c-primary); font-weight: 500; text-shadow: none; }
.hero .btn-row { justify-content: flex-start; }

/* Ab 900px: ganzes Foto, Abzieher rechts ab etwa 37 % der Breite. Die Schrift
   steht darum am linken Rand und wächst mit der Bildschirmbreite mit, so
   bleibt sie immer links vom Abzieher. */
@media (min-width: 900px) {
  .hero__inhalt { max-width: none; padding-left: 6vw; padding-right: 6vw; }
  .hero__claim { font-size: clamp(2.8rem, 4.6vw, 5.5rem); }
}


/* ==========================================================================
   26  TITELBILD NACH JAHRESZEIT (14.10.2026)
   --------------------------------------------------------------------------
   Das Skript im <head> von index.html setzt auf <html> die Klasse
   saison-winter, saison-fruehling, saison-sommer oder saison-herbst. Je nach
   Klasse wird hier das passende Bild aus assets/saison/ geladen, als WebP
   und mit JPG als Rückfall. Ohne JavaScript bleibt das bisherige Titelbild.
   Solange eine Jahreszeit kein eigenes Foto hat, liegt dort eine Kopie des
   bisherigen Titelbilds. Neues Foto: "Saisonbild einsetzen.cmd" (README).

   Bildausschnitt: --saison-pos gilt am Handy, ab 900px die Bildmitte.
   Beim bisherigen Titelbild 20 % (Abzieher am rechten Rand); bei einem neuen
   Foto meist "center" oder dorthin, wo das Wichtige im Bild ist.
   ========================================================================== */

.hero__saison {
  background-color: #dfe6ee;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: var(--saison-pos, 20% center);
  background-image: url("../img/titel-foto.jpg");
  background-image: image-set(url("../img/titel-foto.webp") type("image/webp"), url("../img/titel-foto.jpg") type("image/jpeg"));
}
@media (min-width: 900px) {
  .hero__saison { background-position: var(--saison-pos-gross, center); }
}

.saison-winter .hero__saison {
  --saison-pos: 20% center;
  background-image: url("../saison/winter.jpg");
  background-image: image-set(url("../saison/winter.webp") type("image/webp"), url("../saison/winter.jpg") type("image/jpeg"));
}
.saison-fruehling .hero__saison {
  --saison-pos: 20% center;
  background-image: url("../saison/fruehling.jpg");
  background-image: image-set(url("../saison/fruehling.webp") type("image/webp"), url("../saison/fruehling.jpg") type("image/jpeg"));
}
.saison-sommer .hero__saison {
  --saison-pos: 20% center;
  background-image: url("../saison/sommer.jpg");
  background-image: image-set(url("../saison/sommer.webp") type("image/webp"), url("../saison/sommer.jpg") type("image/jpeg"));
}
.saison-herbst .hero__saison {
  --saison-pos: 58% center;   /* Herbstfoto: Gärtner etwas rechts der Mitte */
  background-image: url("../saison/herbst.jpg");
  background-image: image-set(url("../saison/herbst.webp") type("image/webp"), url("../saison/herbst.jpg") type("image/jpeg"));
}

/* --- Lesbarkeit auf hellen und dunklen Fotos -------------------------------
   Dunkler Verlauf in Marineblau-Schwarz über dem Bild, Schrift weiss.
   Am Handy steht die Schrift über die ganze Breite: gleichmässiger Schleier.
   Ab 900px steht sie links: Verlauf von links (dunkel) nach rechts (klar). */
.hero::after {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 27, 54, .50) 0%, rgba(3, 27, 54, .62) 100%);
}
@media (min-width: 900px) {
  .hero::after {
    background: linear-gradient(90deg, rgba(3, 27, 54, .78) 0%, rgba(3, 27, 54, .60) 38%, rgba(3, 27, 54, .20) 62%, rgba(3, 27, 54, 0) 82%);
  }
}
.hero h1,
.hero__claim,
.hero__sub { color: #fff; }

/* Knöpfe auf dem dunklen Verlauf: Hauptknopf weiss, Telefon mit weissem Rand */
.hero .btn { background: #fff; border-color: #fff; color: var(--c-primary); }
.hero .btn:hover { background: transparent; border-color: #fff; color: #fff; }
.hero .btn--outline { background: transparent; border-color: #fff; color: #fff; }
.hero .btn--outline:hover { background: #fff; color: var(--c-primary); }
.hero :focus-visible { outline-color: #fff; }

/* --- Team, Besen, Kreis-Logo, Mopp, Logo (echte Bilder statt Platzhalter) - */
.logo__bild { width: auto; height: 46px; }
@media (min-width: 1000px) { .logo__bild { height: 54px; } }
.footer .logo__bild { height: 60px; }

.team__foto { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

.besen { width: auto; max-height: 520px; margin-inline: auto; }

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

.kreis-logo {
  position: relative;
  width: min(100%, 300px);
  margin-inline: auto;
  order: -1;   /* am Handy oben, wie eine Überschrift */
}
.kreis-logo img { width: 100%; height: auto; }
.kreis-logo__warum {
  position: absolute;
  top: 16%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 5.5vw, 2.1rem);
  line-height: 1;
  color: var(--c-text-muted);
}
@media (min-width: 900px) {
  .kreis-logo { width: min(100%, 380px); order: 0; }
  .kreis-logo__warum { font-size: 2.4rem; }
}


/* ==========================================================================
   27  PLATZ FÜR DEN CHAT (08.10.2026)
   --------------------------------------------------------------------------
   Das botbuildr-Widget ist ein TRANSPARENTES iframe unten rechts (geschlossen
   etwa 360 x 210 px, am Handy fast die volle Breite). Sichtbar ist nur die
   Blase, aber das ganze Rechteck fängt Klicks ab. Darum bekommt der Fuss
   unten so viel Innenabstand, dass Impressum und Datenschutz darüber liegen
   und anklickbar bleiben.
   ÄNDERT BOTBUILDR DIE WIDGET-GRÖSSE? Dann nur --chat-reserve anpassen.
   ========================================================================== */

:root { --chat-reserve: 210px; }

.footer { padding-bottom: calc(var(--chat-reserve) + var(--s-5)); }


/* ==========================================================================
   28  ERGÄNZUNGEN (09.10.2026)
   ========================================================================== */

/* Keine automatische Silbentrennung in Überschriften ("verlas-sen",
   "Glatt-brugg"). "manual" statt "none": Weiche Trennstellen, die von Hand
   gesetzt sind (&shy; in "Datenschutzerklärung"), gelten weiter. Ohne sie
   würde das lange Wort am Handy mitten im Wort ohne Strich umbrechen. */
h1, h2, h3 {
  -webkit-hyphens: manual;
          hyphens: manual;
}

/* Am Handy etwas kleinere Hauptüberschrift, damit lange Wörter wie
   "Treppenhausreinigung" oder "Sperrgutentsorgung" ganz auf eine Zeile passen */
h1 { font-size: clamp(1.75rem, 6.5vw + .3rem, 4rem); }
@media (max-width: 360px) { h1 { font-size: 1.6rem; } }   /* sehr kleine Handys */

/* Pflichtfelder im Formular */
.pflicht { color: var(--c-primary); font-weight: 600; }
.form__pflicht { font-size: var(--fs-sm); color: var(--c-text-muted); }

/* Chat-Fenster: Sicherheitsnetz, damit die Seite den Rahmen nie einfärbt.
   botbuildr setzt den Rahmen selbst durchsichtig; was INNERHALB des Rahmens
   gemalt wird, bestimmt botbuildr und lässt sich von hier aus nicht ändern. */
iframe[src*="botbuildr.de"] {
  background: transparent !important;
  color-scheme: normal !important;
}

/* Laufband mit den Werten (Startseite): hellgrau wie die übrigen Detailflächen
   statt Marineblau, Schrift in Marineblau (Kontrast 8,9 : 1). Feine Linien
   oben und unten trennen es vom Titelbild und vom weissen Abschnitt darunter. */
.laufband {
  background: var(--c-surface-alt);
  color: var(--c-primary);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}


/* ==========================================================================
   29  LAUFBAND AUF DEM TITELBILD (14.10.2026)
   --------------------------------------------------------------------------
   Wie auf der alten Seite: Die Werte (#freundlich …) laufen ohne eigene
   Fläche, halb durchsichtig, unten über das Titelbild. Ein schmaler dunkler
   Verlauf am unteren Bildrand hält sie auf hellen Stellen lesbar.
   Übersteuert die hellgraue Fläche aus Abschnitt 28.
   ========================================================================== */

.hero { padding-bottom: calc(var(--s-8) + 4.5rem); }   /* Platz für das Band */

.hero .laufband {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding-block: var(--s-4);
  background: none;
  border: 0;
  color: rgba(255, 255, 255, .78);
}
.hero .laufband__liste { text-shadow: 0 1px 6px rgba(3, 27, 54, .45); }

/* Dunkler Streifen unten (zusätzlich zum Verlauf aus Abschnitt 26) */
.hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 9rem;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(3, 27, 54, .55) 0%, rgba(3, 27, 54, 0) 100%);
}


/* ==========================================================================
   30  INSTAGRAM-KNOPF IM FUSS (16.10.2026)
   --------------------------------------------------------------------------
   Kleiner Zweitknopf (weiss, blauer Rand) unter Telefon und E-Mail. Nur ein
   Link auf instagram.com/novas.clean, es wird nichts von Instagram geladen.
   ".footer .btn…" ist nötig, weil ".footer a" sonst die Schriftfarbe setzt.
   ========================================================================== */

.btn--klein { min-height: 40px; padding: var(--s-2) var(--s-5); }
.footer .btn--outline { color: var(--c-primary); }
.footer .btn--outline:hover { color: #fff; }

/* Instagram im Kopf (16.10.2026): am Handy im Menü als breiter Zweitknopf
   unter der Telefonnummer, ab 1000px als runder Knopf nur mit Zeichen rechts
   neben der Telefonnummer (Name für Screenreader steht im aria-label). */
.nav__insta { margin-top: var(--s-3); }
@media (min-width: 1000px) {
  .nav__insta { margin-top: 0; margin-left: calc(var(--s-2) - var(--s-6)); }
  .nav__insta .btn { width: 52px; height: 52px; padding: 0; }   /* so hoch wie der Telefonknopf */
  .nav__insta-text { display: none; }
}


/* ==========================================================================
   31  WÜNSCHE THOMAS (30.10.2026)
   ========================================================================== */

/* --- Team mit zwei Personen: zwei gleich hohe Karten, zentriert, ohne
   Versatz. Funktion und Text stehen unter dem Namen (wörtlich von der
   bisherigen Website). */
@media (min-width: 760px) {
  .team--zwei {
    grid-template-columns: repeat(2, 1fr);
    max-width: 760px;
    align-items: stretch;
    column-gap: var(--s-7);
  }
  .team--zwei .team__person:nth-child(2) { margin-top: 0; }
}
.team__funktion {
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-primary);
}
.team__text { margin-top: var(--s-2); font-size: var(--fs-sm); }

/* --- Über uns, Kopf: Text gut lesbar im Vordergrund, das Mopp-Foto liegt hell
   im Hintergrund (wie auf der alten Seite). Der Stiel läuft hinter dem Text
   durch, der Mopp-Kopf steht unten frei. Bild nur Dekoration (alt=""). */
.ueber__intro {
  position: relative;
  overflow: hidden;
  padding-bottom: clamp(11rem, 26vw, 20rem);   /* Platz für den Mopp-Kopf */
  background: #fff;
}
.ueber__intro-bild {
  position: absolute;
  inset: 0 0 -14% 0;   /* unten etwas überstehen lassen: weniger Weiss unter dem Mopp-Kopf */
  width: 100%;
  height: 114%;
  object-fit: cover;
  object-position: 50% 82%;
  opacity: .32;
  pointer-events: none;
}
.ueber__intro-text { position: relative; z-index: 1; }
.ueber__intro-text p { color: var(--c-text); }

/* --- TikTok neben Instagram: im Kopf gleicher runder Knopf, im Fuss
   zwei kleine Knöpfe nebeneinander (bei wenig Platz untereinander).
   Der TikTok-Knopf im Kopf hat zusätzlich die Klasse nav__insta und
   übernimmt damit Grösse und Abstände. */
.sozial { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* --- Über uns: Text "Unsere Qualität ist kein Zufall" (vorher auf der
   Startseite beim Besen), mittig unter den zwei Spalten, mit feiner Linie */
.ueber__qualitaet {
  margin-top: var(--s-8);
  padding-top: var(--s-7);
  border-top: 1px solid var(--c-line);
}
.ueber__qualitaet h2 { font-size: var(--fs-2xl); margin-bottom: var(--s-4); }