/* =============================================================
   Weser Wash — Mobile Fahrzeugaufbereitung Bremen
   Designsystem. Dunkler Grundton aus dem Instagram-Auftritt,
   Royalblau als Handlungsfarbe aus dem Preis-Flyer.
   ============================================================= */

:root {
  /* Flächen */
  --ink:        #0B0B0D;
  --ink-2:      #101014;
  --ink-3:      #16161B;
  --ink-4:      #1D1D24;

  /* Schrift */
  --fg:         #F3F3F5;
  --fg-2:       #B4B4BE;
  --fg-3:       #7C7C88;

  /* Linien */
  --line:       rgba(255,255,255,.09);
  --line-2:     rgba(255,255,255,.16);

  /* Marke */
  --blue-deep:  #0D2F8D;   /* Flyer */
  --blue:       #1B6FE0;   /* Handlungsfarbe auf dunklem Grund */
  --blue-lite:  #49C1FD;   /* Akzent, Unterstreichungen */
  --red:        #CC463D;   /* nur im Swoosh */
  --wa:         #1FA855;   /* WhatsApp */

  /* Raster */
  --wrap:       1180px;
  --gut:        clamp(1.25rem, 4vw, 3rem);
  --r:          3px;

  /* Bewegung — knapp und technisch, nicht cineastisch */
  --t-micro:    140ms;
  --t-ui:       240ms;
  --t-reveal:   560ms;
  --ease:       cubic-bezier(.2,.8,.2,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);

  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* muss nach den display-Regeln der Komponenten greifen */
[hidden] { display: none !important; }

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

:focus-visible {
  outline: 2px solid var(--blue-lite);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

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

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--blue); color: #fff;
  padding: .6rem 1rem; border-radius: var(--r);
  transition: top var(--t-ui) var(--ease);
}
.skip:focus { top: 1rem; }


/* ---------- Typografie ------------------------------------- */

.h2 {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.75rem, 3.4vw, 2.9rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  margin: 0;
  text-wrap: balance;
}

.lbl {
  font-family: Archivo, system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 1.1rem;
}

.link-quiet {
  color: var(--fg-2);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 2px;
  transition: color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease);
}
.link-quiet:hover { color: var(--fg); border-color: var(--blue-lite); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; text-decoration: none;
  color: var(--blue-lite);
  margin-top: 1.5rem;
}
.link-arrow::after {
  content: "";
  width: 1.4rem; height: 1px;
  background: currentColor;
  transition: width var(--t-ui) var(--ease);
}
.link-arrow:hover::after { width: 2.4rem; }


/* ---------- Wortmarke (Platzhalter) ------------------------ */

.mark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-decoration: none;
  line-height: 1;
}
.mark__word {
  font-family: Archivo, system-ui, sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 1.22rem;
  letter-spacing: -.005em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* width:0 + min-width:100% — so trägt das SVG nichts zur Breite der
   Sperrung bei und richtet sich allein nach dem Schriftzug aus. */
.mark__swoosh { width: 0; min-width: 100%; height: auto; display: block; }
.mark__swoosh-a { fill: var(--blue-lite); }
.mark__swoosh-b { fill: var(--red); }
.mark--foot .mark__word { font-size: 1.45rem; }


/* ---------- Kopf -------------------------------------------- */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease);
}
.site-head.is-stuck {
  background: rgba(11,11,13,.88);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}

.site-head__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 1rem var(--gut);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.site-nav {
  display: flex;
  gap: clamp(1rem, 2.2vw, 2rem);
  margin-left: auto;
  font-size: .92rem;
}
.site-nav a {
  text-decoration: none;
  color: var(--fg-2);
  padding: .35rem 0;
  border-bottom: 1px solid transparent;
  transition: color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease);
}
.site-nav a:hover { color: var(--fg); border-bottom-color: var(--blue-lite); }
.site-nav a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--fg-3); }
.mobilnav a[aria-current="page"] { color: var(--blue-lite); }

.site-head__action { flex: none; }

.burger {
  display: none;
  margin-left: auto;
  width: 42px; height: 34px;
  background: none; border: 1px solid var(--line-2); border-radius: var(--r);
  cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.burger span {
  display: block; width: 17px; height: 1.5px; background: var(--fg);
  transition: transform var(--t-ui) var(--ease), opacity var(--t-micro) var(--ease);
}
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

.mobilnav {
  border-top: 1px solid var(--line);
  background: var(--ink-2);
  padding: .5rem var(--gut) 1.25rem;
}
.mobilnav a {
  display: block;
  padding: .8rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
}
.mobilnav a:last-child { border-bottom: 0; color: var(--blue-lite); }


/* ---------- Buttons ----------------------------------------- */
/*
   Hauptaktion — Grundlage:
   "Button" von Barış Doğan Sütçü (barisdogansutcu), MIT License
   https://uiverse.io/barisdogansutcu/little-penguin-13

   Übernommen wurde die Mechanik: eine sichtbare Vorderfläche und eine
   zweite Ebene dahinter (z-index: -1), die beim Hover per transform
   darunter hervorfährt.

   Angepasst wurde: Radius 4px auf das Systemmaß, der fünffach gestapelte
   Schlagschatten ersatzlos entfernt (das Projekt arbeitet ohne Schatten),
   Farben auf die Marken-Tokens, Timing auf --t-ui statt 0.5s, das zweite
   Icon in der hinteren Ebene entfernt. Die austretende Ebene ist blau und
   greift damit den Swoosh unter dem Schriftzug auf. Der Auszug wurde von
   100 % auf 40 % verkürzt, damit nur ein Streifen sichtbar wird.
*/

.btn-uv {
  position: relative;
  display: inline-block;
  z-index: 1;
  border: 0;
  padding: 0;
  background: none;
  border-radius: var(--r);
  font: inherit;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.btn-uv__face {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 2.7rem;
  padding: 0 1.15rem;
  border-radius: var(--r);
  background: var(--wa);
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--t-micro) var(--ease);
}

.btn-uv__slide {
  position: absolute;
  inset: 0;
  max-width: 86%;
  margin: 0 auto;
  z-index: -1;
  border-radius: var(--r);
  background: var(--blue);
  transform: translateY(0);
  transition: transform var(--t-ui) var(--ease-out);
}

.btn-uv:hover .btn-uv__face,
.btn-uv:focus-visible .btn-uv__face { background: #189a4b; }
.btn-uv:hover .btn-uv__slide,
.btn-uv:focus-visible .btn-uv__slide { transform: translateY(40%); }
.btn-uv:active .btn-uv__face { transform: translateY(1px); }

.btn-uv--lg .btn-uv__face { min-height: 3.3rem; padding: 0 1.7rem; font-size: 1.02rem; }
.btn-uv--block { display: block; width: 100%; }

/*
   Zweitaktion — Grundlage:
   "Button" von E - Coders (Aasheesh Agarwal), MIT License
   https://uiverse.io/e-coders/new-shrimp-32

   Übernommen wurde die Umkehrung beim Hover: transparent mit Rahmen,
   dann gefüllt, dazu ein kurzer Versatz nach oben.

   Angepasst wurde: Rahmen von 0.125em auf die Haarlinie des Projekts,
   Radius 0.9375em auf das Systemmaß, Schlagschatten entfernt, die
   Roobert-Schriftliste durch die Projektschrift ersetzt, Farben für
   dunklen Grund umgedreht, Versatz von 2px auf 1px reduziert.
*/

.btn-ghost {
  appearance: none;
  display: inline-flex; align-items: center; gap: .6rem;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--fg);
  font: inherit; font-weight: 600;
  padding: .8rem 1.5rem;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  transition: color var(--t-ui) var(--ease),
              background var(--t-ui) var(--ease),
              border-color var(--t-ui) var(--ease),
              transform var(--t-micro) var(--ease);
}
.btn-ghost svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.6; flex: none; transition: transform var(--t-ui) var(--ease); }
.btn-ghost:hover {
  color: var(--ink);
  background: var(--fg);
  border-color: var(--fg);
  transform: translateY(-1px);
}
.btn-ghost:hover svg { transform: translateX(3px); }
.btn-ghost:active { transform: translateY(0); }

.ico { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }


/* ---------- Masthead ---------------------------------------- */

.mast {
  position: relative;
  isolation: isolate;
  padding: clamp(3.5rem, 11vh, 8rem) 0 0;
  overflow: hidden;
}

/* Bannerbild + Abdunklung.
   Der Text steht auf der linken Hälfte, deshalb läuft der Verlauf
   von links nach rechts aus. Zusätzlich oben abgedunkelt, damit der
   Schriftzug in der transparenten Kopfleiste lesbar bleibt, und unten,
   damit der Übergang in die Faktenleiste nicht abreißt. */
.mast__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
}
.mast__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
.mast::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg,
      var(--ink) 0%,
      rgba(11,11,13,.94) 32%,
      rgba(11,11,13,.72) 55%,
      rgba(11,11,13,.42) 78%,
      rgba(11,11,13,.34) 100%),
    linear-gradient(180deg,
      rgba(11,11,13,.72) 0%,
      rgba(11,11,13,.10) 26%,
      rgba(11,11,13,.10) 62%,
      rgba(11,11,13,.80) 100%);
}
.mast .wrap { position: relative; }

.mast__rail {
  font-family: Archivo, system-ui, sans-serif;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  /* heller als die sonstigen Kleintexte: die Zeile reicht bis in den
     helleren Teil des Banners und fiel dort unter WCAG AA */
  color: var(--fg-2);
  margin: 0 0 clamp(1.5rem, 4vw, 2.75rem);
}
.mast__rail span { color: var(--blue-lite); margin-inline: .4rem; }

.mast__claim {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.15rem, 6.6vw, 5rem);
  line-height: .98;
  letter-spacing: -.038em;
  margin: 0;
  max-width: 26ch;
}
.mast__claim em {
  font-style: italic;
  color: var(--fg-2);
}

.mast__lead {
  max-width: 52ch;
  margin: clamp(1.6rem, 3.5vw, 2.4rem) 0 0;
  color: var(--fg-2);
  font-size: clamp(1rem, 1.35vw, 1.1rem);
}

.mast__act {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 1.6rem;
  margin: clamp(2rem, 4vw, 2.8rem) 0 clamp(3rem, 8vw, 5rem);
}

.factrail {
  position: relative;          /* deckt den unteren Rand des Banners ab */
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  background: var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.factrail li {
  padding: 1.1rem var(--gut);
  font-size: .88rem;
  color: var(--fg-3);
  border-right: 1px solid var(--line);
}
.factrail li:last-child { border-right: 0; }
.factrail strong {
  display: block;
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--fg);
  letter-spacing: -.02em;
}
/* Erstes Element am Raster des Inhalts ausrichten */
.factrail li:first-child { padding-left: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))); }
.factrail li:last-child  { padding-right: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))); }

.mast__glyph {
  position: absolute;
  right: -6%;
  top: 12%;
  width: 62%;
  max-width: 900px;
  opacity: .05;
  pointer-events: none;
  z-index: -1;
}
.mast__glyph path:first-child { fill: var(--blue-lite); }
.mast__glyph path:last-child  { fill: var(--red); }


/* ---------- Seitenkopf der Unterseiten ---------------------- */

.phead {
  padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
}
.phead__krume {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
  font-family: Archivo, system-ui, sans-serif;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-3);
}
.phead__krume a { text-decoration: none; transition: color var(--t-micro) var(--ease); }
.phead__krume a:hover { color: var(--fg); }
.phead__krume span { color: var(--blue-lite); }

.phead__titel {
  margin: 0;
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.1rem, 5.6vw, 4.2rem);
  line-height: 1;
  letter-spacing: -.035em;
  max-width: 20ch;
}
.phead__lead {
  margin: clamp(1.25rem, 3vw, 1.9rem) 0 0;
  max-width: 56ch;
  color: var(--fg-2);
  font-size: clamp(1rem, 1.3vw, 1.08rem);
}


/* ---------- Verweis auf die nächste Seite ------------------- */

.weiter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: center;
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.weiter__k {
  margin: 0 0 .4rem;
  font-family: Archivo, system-ui, sans-serif;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-3);
}
.weiter__t {
  margin: 0;
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  letter-spacing: -.025em;
}
.weiter__s { margin: .45rem 0 0; color: var(--fg-2); font-size: .95rem; max-width: 46ch; }


/* ---------- Sektionen --------------------------------------- */

.sec { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.sec--raised { background: var(--ink-2); border-block: 1px solid var(--line); }

.sec__head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.25rem, 5vw, 3.5rem);
}
.sec__note {
  margin: 0;
  color: var(--fg-2);
  font-size: .98rem;
  max-width: 46ch;
}


/* ---------- Leistungsindex ---------------------------------- */

.index {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.idx { list-style: none; margin: 0; padding: 0; }
.index__main .idx {
  columns: 2;
  column-gap: clamp(1.5rem, 4vw, 3rem);
}
.idx li {
  break-inside: avoid;
  border-bottom: 1px solid var(--line);
}
.idx li span {
  display: block;
  padding: .78rem 0 .78rem 0;
  position: relative;
  transition: padding-left var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}
.idx li span::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 0; height: 1px;
  background: var(--blue-lite);
  transform: translateY(-50%);
  transition: width var(--t-micro) var(--ease);
}
.idx li:hover span { padding-left: 1.3rem; color: #fff; }
.idx li:hover span::before { width: .9rem; }

.index__side {
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.idx--plain li span { padding-block: .62rem; font-size: .95rem; color: var(--fg-2); }
.idx--plain li:last-child { border-bottom: 0; }
.idx--plain a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  transition: border-color var(--t-micro) var(--ease);
}
.idx--plain a:hover { border-bottom-color: var(--blue-lite); }
.index__where {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: .86rem;
  color: var(--fg-3);
}


/* ---------- Preispakete ------------------------------------- */
/* Drei eigenst�ndige Bl�cke statt einer Vergleichstabelle.
   Die Tabelle musste auf dem Handy seitlich gescrollt werden und war
   damit unbrauchbar. Die Pakete bauen kumulativ aufeinander auf �
   diese Formulierung stammt vom Flyer des Kunden �, deshalb bleibt
   jeder Block auch untereinander kurz genug zum �berblicken. */

.pakete {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.75rem, 1.6vw, 1.15rem);
  align-items: start;
}

.paket {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-3);
}
.paket--lead {
  border-color: var(--blue);
  background: linear-gradient(180deg, rgba(27,111,224,.12), rgba(27,111,224,.03) 40%, var(--ink-3));
}

.paket__kopf {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .55rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.paket__name {
  margin: 0;
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -.025em;
}
.paket__art { margin: 0; font-size: .82rem; color: var(--fg-3); }
.paket__tag {
  margin: 0 0 0 auto;
  font-family: Archivo, system-ui, sans-serif;
  font-size: .62rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: var(--blue);
  padding: .24rem .5rem; border-radius: 2px;
  align-self: center;
}

.paket__preis {
  margin: 1.25rem 0 .35rem;
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 4.4vw, 3rem);
  line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.paket__preis i {
  font-style: normal;
  font-size: .8rem; font-weight: 600;
  color: var(--fg-3);
  vertical-align: .95em;
  margin-right: .35rem;
  letter-spacing: 0;
}
.paket__preis span { font-size: .62em; margin-left: .1rem; }

.paket__fuer {
  margin: 0 0 1.4rem;
  font-size: .88rem;
  color: var(--fg-3);
}

.paket__liste { list-style: none; margin: 0 0 auto; padding: 0; }
.paket__liste li {
  position: relative;
  padding: .5rem 0 .5rem 1.55rem;
  font-size: .94rem;
  color: var(--fg-2);
  border-bottom: 1px solid var(--line);
}
.paket__liste li:last-child { border-bottom: 0; }
.paket__liste li::before {
  content: "";
  position: absolute; left: .2rem; top: 1.15rem;
  width: .45rem; height: .45rem;
  border-radius: 50%;
  background: var(--blue-lite);
}
.paket__erbt {
  color: var(--fg) !important;
  font-weight: 600;
}
.paket__erbt::before {
  width: .7rem !important; height: 1px !important;
  border-radius: 0 !important;
  left: .1rem !important; top: 1.35rem !important;
  background: var(--fg-3) !important;
}

.paket__fuss { margin-top: 1.6rem; }

/* Kompakter Anriss auf der Startseite — die ausführlichen
   Paketblöcke stehen nur auf der Preisseite. */
.preisstrip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-2);
}
.preisstrip__i {
  display: block;
  padding: 1.5rem clamp(1rem, 2vw, 1.5rem) 1.6rem;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-decoration: none;
  transition: background var(--t-micro) var(--ease);
}
.preisstrip__i:last-child { border-right: 0; }
.preisstrip__i:hover { background: var(--ink-3); }
.preisstrip__i:hover .preisstrip__p { color: var(--blue-lite); }

.preisstrip__n {
  display: block;
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 700; font-size: .74rem;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--fg-3);
}
.preisstrip__p {
  display: block;
  margin: .5rem 0 .5rem;
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  transition: color var(--t-micro) var(--ease);
}
.preisstrip__p i {
  font-style: normal; font-size: .38em; font-weight: 600;
  color: var(--fg-3); vertical-align: .9em; margin-right: .3rem; letter-spacing: 0;
}
.preisstrip__b { display: block; font-size: .88rem; color: var(--fg-2); }
/* Zusatzleistungen + Versprechen */
.extras {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--line);
}
.pricelist { margin: 0; }
.pricelist > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--line);
}
.pricelist dt { color: var(--fg-2); }
.pricelist dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 500;
}
.promise { align-self: start; display: grid; gap: 1rem; }
.promise p {
  margin: 0;
  padding: 1.1rem 1.25rem;
  border-left: 2px solid var(--blue);
  background: var(--ink-3);
  font-size: .93rem;
  color: var(--fg-2);
}
.promise strong { color: var(--fg); display: block; }
.promise__b { border-left-color: var(--fg-3); }


/* ---------- Gegenüberstellung ------------------------------- */

.versus { border-top: 1px solid var(--line-2); }

.versus__head {
  display: grid;
  grid-template-columns: 9rem minmax(0,1fr) minmax(0,1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 1rem 0;
  border-bottom: 1px solid var(--line-2);
}
.versus__col {
  margin: 0;
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.versus__col--us { grid-column: 2; color: var(--blue-lite); }
.versus__col--them { color: var(--fg-3); }

.vrow {
  display: grid;
  grid-template-columns: 9rem minmax(0,1fr) minmax(0,1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line);
}
.vrow__k {
  margin: 0;
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.01em;
}
.vrow__us, .vrow__them { margin: 0; font-size: .95rem; }
.vrow__us { color: var(--fg); }
.vrow__them { color: var(--fg-3); }


/* ---------- Arbeiten ---------------------------------------- */

.shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.75rem, 1.6vw, 1.15rem);
}
.shot { margin: 0; grid-column: span 1; }
.shot--wide { grid-column: span 2; }

/* Textfeld schließt die erste Reihe — kein leeres Rasterfeld,
   und der Verweis auf Instagram sitzt dort, wo er gebraucht wird. */
.shots__panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ink-3);
}
.shots__panel-k {
  margin: 0 0 auto;
  font-family: Archivo, system-ui, sans-serif;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-3);
}
.shots__panel-t { margin: 1.5rem 0 0; font-size: .93rem; color: var(--fg-2); }
.shots__panel .link-arrow { margin-top: 1rem; }

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--ink-3);
  aspect-ratio: 4 / 5;
  transition: transform var(--t-ui) var(--ease);
}
.shot--wide img { aspect-ratio: 16 / 13; }

.shot figcaption {
  display: flex; align-items: baseline; gap: .65rem; flex-wrap: wrap;
  margin-top: .7rem;
  font-size: .84rem;
  color: var(--fg-3);
}
.shot__tag {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 700; font-size: .64rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue-lite);
  border: 1px solid rgba(73,193,253,.35);
  border-radius: 2px;
  padding: .14rem .4rem;
}

/* Enthüllung beim ersten Sichtbarwerden — nur hier, nicht global */
.shots > * {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transition: clip-path var(--t-reveal) var(--ease-out), opacity var(--t-reveal) var(--ease-out);
}
.shots.is-in > * { clip-path: inset(0 0 0 0); opacity: 1; }
.shots.is-in > *:nth-child(2) { transition-delay: 60ms; }
.shots.is-in > *:nth-child(3) { transition-delay: 120ms; }
.shots.is-in > *:nth-child(4) { transition-delay: 180ms; }
.shots.is-in > *:nth-child(5) { transition-delay: 240ms; }


/* ---------- Firmenflotten ----------------------------------- */

.sec--fleet {
  background:
    linear-gradient(90deg, rgba(13,47,141,.30), rgba(13,47,141,0) 62%),
    var(--ink);
  border-block: 1px solid var(--line);
}
.fleet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.fleet__lead p {
  margin: 1.25rem 0 0;
  color: var(--fg-2);
  max-width: 42ch;
}
.fleet__cta { margin-top: 1.9rem; }
.fleet__list { margin: 0; }
.fleet__list > div {
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
}
.fleet__list > div:first-child { border-top: 1px solid var(--line); }
.fleet__list dt {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.01em;
}
.fleet__list dd { margin: .3rem 0 0; color: var(--fg-3); font-size: .93rem; }


/* ---------- Konfigurator ------------------------------------ */

.conf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.conf__block { border: 0; margin: 0 0 2.25rem; padding: 0; }
.conf__block legend { padding: 0; }

.chips { display: flex; flex-wrap: wrap; gap: .6rem; }

.chip { position: relative; cursor: pointer; }
/* Das Feld liegt bewusst NICHT über dem Label und nimmt keine Klicks an:
   deckte es die ganze Fläche ab, traf der Klick erst das Feld und wurde
   danach vom Label ein zweites Mal weitergereicht — der Haken sprang
   sofort wieder zurück. So landet jeder Klick beim Label, das die
   Checkbox genau einmal umschaltet. Fokus per Tastatur bleibt möglich. */
.chip input {
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 1px;
  opacity: 0; margin: 0;
  pointer-events: none;
}
.chip__body {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .7rem 1.05rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--ink-3);
  transition: border-color var(--t-micro) var(--ease),
              background var(--t-micro) var(--ease),
              box-shadow var(--t-micro) var(--ease);
}
.chip__name { font-weight: 600; font-size: .96rem; }
.chip__meta { font-size: .78rem; color: var(--fg-3); font-variant-numeric: tabular-nums; }

.chip:hover .chip__body { border-color: var(--fg-3); }
.chip input:checked + .chip__body {
  border-color: var(--blue);
  background: rgba(27,111,224,.14);
  box-shadow: inset 0 0 0 1px var(--blue);
}
.chip input:checked + .chip__body .chip__meta { color: var(--blue-lite); }
.chip input:focus-visible + .chip__body { outline: 2px solid var(--blue-lite); outline-offset: 2px; }

.fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.field { margin: 0; display: grid; gap: .4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .82rem; color: var(--fg-2); }
.opt { color: var(--fg-3); }
.field input {
  font: inherit;
  color: var(--fg);
  background: var(--ink-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: .68rem .85rem;
  transition: border-color var(--t-micro) var(--ease), background var(--t-micro) var(--ease);
}
.field input::placeholder { color: var(--fg-3); }
.field input:hover { border-color: var(--fg-3); }
.field input:focus { border-color: var(--blue); background: var(--ink-4); outline: none; }

.conf__hinweis { margin: 1rem 0 0; font-size: .85rem; color: var(--fg-3); }
.conf__hinweis a { color: var(--fg-2); }

.conf__new { margin: 1.25rem 0 0; font-size: .9rem; color: var(--fg-2); }
.conf__new label { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; }
.conf__new input { accent-color: var(--blue); width: 1rem; height: 1rem; }

/* Summenpanel */
.summe {
  position: sticky;
  top: 5.5rem;
  background: var(--ink-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: clamp(1.35rem, 3vw, 1.75rem);
}
.summe__zeile {
  display: flex; justify-content: space-between; gap: 1rem;
  margin: 0 0 .55rem;
  font-size: .93rem;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.summe__zeile b { font-weight: 600; color: var(--fg); }
.summe__zeile--rabatt { color: var(--blue-lite); }

.summe__gesamt {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin: 1.1rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-2);
  font-size: .82rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-3);
  font-family: Archivo, system-ui, sans-serif; font-weight: 700;
}
.summe__gesamt strong {
  font-size: 2.1rem;
  letter-spacing: -.03em;
  color: var(--fg);
  text-transform: none;
  font-variant-numeric: tabular-nums;
  transition: color var(--t-micro) var(--ease);
}
.summe__gesamt i { font-style: normal; font-size: .7rem; color: var(--fg-3); vertical-align: .55em; margin-right: .3rem; }
.summe__gesamt.is-changed strong { color: var(--blue-lite); }

.summe__fein {
  margin: 1rem 0 1.4rem;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--fg-3);
}
.summe__hint {
  margin: .75rem 0 0;
  font-size: .8rem;
  color: var(--blue-lite);
  min-height: 1.2em;
}
.summe__alt { margin: .9rem 0 0; font-size: .84rem; color: var(--fg-3); }
.summe__alt a { color: var(--fg-2); }


/* ---------- Fuß --------------------------------------------- */

.site-foot {
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
}
.foot {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
}
.foot__brand p { margin: 1.1rem 0 0; color: var(--fg-3); font-size: .9rem; }
.foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .92rem; }
.foot__col a {
  color: var(--fg-2); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease);
}
.foot__col a:hover { color: var(--fg); border-bottom-color: var(--line-2); }

.foot__legal {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: .78rem;
  color: var(--fg-3);
  max-width: 70ch;
}


/* ---------- Responsiv --------------------------------------- */

@media (max-width: 1000px) {
  .pakete { grid-template-columns: 1fr; }
  .paket__liste { margin-bottom: 0; }
  .weiter { grid-template-columns: 1fr; align-items: start; }
  .sec__head { grid-template-columns: 1fr; align-items: start; gap: 1rem; }
  .index { grid-template-columns: 1fr; }
  .extras { grid-template-columns: 1fr; }
  .conf { grid-template-columns: 1fr; }
  .summe { position: static; }
  .fleet { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .site-nav, .site-head__action { display: none; }
  .burger { display: flex; }
  .site-head { background: rgba(11,11,13,.9); backdrop-filter: blur(10px); border-bottom-color: var(--line); }

  /* Auf dem Handy läuft der Text über die volle Breite, der seitliche
     Verlauf greift also nicht mehr. Hier deckt eine überwiegend
     senkrechte, deutlich kräftigere Abdunklung ab — gemessen fiel der
     Fließtext sonst auf 2,5:1 und damit unter WCAG AA. Das Bild wirkt
     dadurch eher als Textur denn als Motiv; auf 375 px Breite ist
     beides gleichzeitig nicht zu haben. */
  .mast::before {
    background: linear-gradient(180deg,
      rgba(11,11,13,.90) 0%,
      rgba(11,11,13,.88) 62%,
      rgba(11,11,13,.66) 84%,
      rgba(11,11,13,.88) 100%);
  }
  .mast__bg img { object-position: 50% 50%; }

  .factrail { grid-template-columns: 1fr 1fr; }
  .factrail li:nth-child(2n) { border-right: 0; }
  .factrail li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .factrail li { padding-inline: var(--gut) !important; }

  .versus__head { display: none; }
  .vrow { grid-template-columns: 1fr; gap: .5rem; padding: 1.5rem 0; }
  .vrow__us, .vrow__them { padding-left: 1rem; border-left: 2px solid var(--blue); }
  .vrow__them { border-left-color: var(--line-2); }
  .vrow__us::before, .vrow__them::before {
    display: block;
    font-family: Archivo, system-ui, sans-serif;
    font-size: .66rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    margin-bottom: .2rem;
  }
  .vrow__us::before { content: "Weser Wash"; color: var(--blue-lite); }
  .vrow__them::before { content: "Waschanlagen-Sauger"; color: var(--fg-3); }

  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shot--wide { grid-column: span 2; }
  .shots__panel { grid-column: span 2; }
}

@media (max-width: 560px) {
  .preisstrip { grid-template-columns: 1fr; }
  .preisstrip__i { border-right: 0; }
  .index__main .idx { columns: 1; }
  .fields { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr; }
  .shots { grid-template-columns: 1fr; }
  .shot--wide, .shots__panel { grid-column: span 1; }
  .mast__act { gap: 1.1rem; }
  .mast__act .btn-uv { display: block; width: 100%; }
  .btn-ghost { width: 100%; justify-content: center; }
}


/* ---------- Reduzierte Bewegung ----------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .shots > * { clip-path: none; opacity: 1; }
  /* der Streifen unter der Hauptaktion bleibt eingefahren */
  .btn-uv:hover .btn-uv__slide,
  .btn-uv:focus-visible .btn-uv__slide { transform: none; }
  .btn-ghost:hover { transform: none; }
  .btn-ghost:hover svg { transform: none; }
}