/* ============================================================================
   VadimYourEditor, Seiten-Komponenten. Setzt tokens.css voraus.

   Drei Regeln halten die Seite vom Einheitslook fern:

     1. Ueberschriften stehen links, nicht mittig. Mittig zentrierte Bloecke
        untereinander sind das auffaelligste Merkmal generischer Startseiten.
     2. Statt schwebender Karten mit dicken Radien gibt es Haarlinien-Raster.
        Die Trennlinien tragen die Struktur, nicht Schatten.
     3. Der Verlauf erscheint als harte Flaeche oder Kante, nie als Nebel.
   ========================================================================== */

/* ---------------------------------------------------------------- Layout -- */

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.wrap--text { max-width: calc(var(--maxw-text) + var(--pad) * 2); }

section.sec { padding-block: var(--sec-y); position: relative; }
.sec--alt { background: var(--bg-1); }
.sec--line { border-top: 1px solid var(--line); }

/* Abschnittsmarke: 01 mit Verlaufslinie und Kleinbuchstaben-Label. */
.sec-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.sec-label .n { color: var(--c-1); font-weight: 700; }
.sec-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-2), transparent);
}

.head { max-width: 800px; margin-bottom: clamp(36px, 5vw, 64px); }
.head p { margin-top: 18px; color: var(--fg-2); font-size: var(--t-md); max-width: 62ch; }

/* Hervorgehobenes Wort in Ueberschriften.

   Frueher lief hier der volle Verlauf durch die Buchstaben. Das war bunt,
   aber es zog die Aufmerksamkeit auf den Farbverlauf statt auf das Wort und
   passte nicht zur Marke. Jetzt einfach das Tuerkis der Marke. */
.grad { color: var(--c-1); }

/* --------------------------------------------------------------- Buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s, border-color .15s, color .15s;
}
.btn:active { transform: translateY(1px); }

/* Volles Tuerkis, dunkler Text darauf fuer Kontrast. */
.btn--primary {
  background: var(--c-1);
  color: var(--on-bright);
  box-shadow: var(--sh-glow);
}
.btn--primary:hover { background: #33ede2; transform: translateY(-2px); }

.btn--ghost { border-color: var(--line-2); color: var(--fg); }
.btn--ghost:hover { border-color: var(--c-1); background: var(--bg-2); }

/* Auf hellen Verlaufsflaechen. */
.btn--onbright { background: var(--on-bright); color: #fff; }
.btn--onbright:hover { transform: translateY(-2px); }
.btn--outline-bright { border-color: rgba(6,7,12,.35); color: var(--on-bright); }
.btn--outline-bright:hover { background: rgba(6,7,12,.08); }

.btn--lg { padding: 17px 32px; font-size: var(--t-base); }
.btn--block { width: 100%; }

/* Textlink mit Verlaufspfeil. */
.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--c-1);
}
.link::after { content: "→"; transition: transform .16s; }
.link:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------- Kopfzeile */

.hdr { position: sticky; top: 0; z-index: 50; transition: background .2s, border-color .2s; border-bottom: 1px solid transparent; }
.hdr.is-stuck {
  background: rgba(5,6,10,.88);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border-bottom-color: var(--line);
}
.hdr .wrap { display: flex; align-items: center; gap: 20px; height: var(--header-h); }

.logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; font-weight: 800; letter-spacing: -.03em; }
/* Das Logo ist eine weisse Bilddatei mit Transparenz. Keine Hintergrundfarbe
   dahinter, sonst scheint sie durch die freigestellten Stellen. */
.logo .mark {
  height: 27px;
  width: auto;
  flex-shrink: 0;
}
.logo .wm { font-size: var(--t-base); }
.logo .wm span { font-weight: 400; color: var(--fg-3); }

.nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.nav a {
  position: relative;
  padding: 8px 14px;
  color: var(--fg-2);
  font-size: var(--t-sm);
  font-weight: 600;
  transition: color .15s;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 2px;
  background: var(--g);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s;
}
.nav a:hover { color: var(--fg); }
.nav a:hover::after { transform: scaleX(1); }

.hdr-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Sprachumschalter im Kopf. */
.lang-wechsel {
  padding: 7px 11px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--fg-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .06em;
  transition: border-color .15s, color .15s;
}
.lang-wechsel:hover { border-color: var(--c-1); color: var(--fg); }

.hdr-tel {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--fg-2);
  white-space: nowrap;
  transition: color .15s;
}
.hdr-tel:hover { color: var(--c-1); }

.burger {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--fg);
  font-size: 17px;
}

/* --------------------------------------------------------------- Warenkorb -- */

.cart-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--fg-2);
  flex-shrink: 0;
  transition: border-color .15s, color .15s;
}
.cart-btn:hover { border-color: var(--c-1); color: var(--fg); }
.cart-badge {
  position: absolute;
  top: -7px; right: -7px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background: var(--c-1);
  color: var(--on-bright);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
}
/* Die eigene display:grid-Regel oben besiegt sonst die eingebaute
   [hidden]-Regel des Browsers, dann steht trotz hidden noch eine "0" da. */
.cart-badge[hidden] { display: none; }

.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  z-index: 300;
}
.cart-overlay.is-offen { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100%;
  width: min(380px, 92vw);
  background: var(--bg-1);
  border-left: 1px solid var(--line);
  z-index: 301;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s ease;
  box-shadow: var(--sh-3);
}
.cart-drawer.is-offen { transform: translateX(0); }

.cart-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.cart-kopf h3 { font-size: var(--t-lg); }
.cart-schliessen {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  color: var(--fg-2);
  font-size: 15px;
  transition: background .15s, color .15s;
}
.cart-schliessen:hover { background: var(--bg-2); color: var(--fg); }

.cart-liste { flex: 1; overflow-y: auto; padding: 6px 22px; }
.cart-leer { padding: 30px 0; color: var(--fg-3); font-size: var(--t-sm); text-align: center; }

.cart-item {
  display: grid;
  grid-template-columns: 52px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.cart-item-bild { width: 52px; height: 52px; object-fit: cover; border-radius: var(--r-sm); }
.cart-item-titel { font-size: var(--t-sm); font-weight: 700; }
.cart-item-menge { font-size: var(--t-xs); color: var(--fg-3); margin-top: 2px; }
.cart-item-menge-sel {
  margin-top: 4px;
  padding: 3px 22px 3px 8px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--bg-1);
  color: var(--fg-2);
  font-size: var(--t-xs);
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-3) 50%),
                    linear-gradient(135deg, var(--fg-3) 50%, transparent 50%);
  background-position: calc(100% - 12px) 55%, calc(100% - 8px) 55%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.cart-item-menge-sel:hover { border-color: var(--c-1); }
.cart-item-preis { font-family: var(--mono); font-size: var(--t-sm); font-weight: 700; white-space: nowrap; }
.cart-item-entfernen { color: var(--fg-3); font-size: 14px; padding: 4px; transition: color .15s; }
.cart-item-entfernen:hover { color: var(--bad); }

.cart-fuss { padding: 18px 22px 22px; border-top: 1px solid var(--line); flex-shrink: 0; }
.cart-summe {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  font-size: var(--t-md);
  font-weight: 700;
}
.cart-summe span:last-child { color: var(--c-1); font-family: var(--mono); }
.cart-hinweis { margin-top: 12px; font-size: var(--t-xs); color: var(--fg-3); text-align: center; }
.cart-hinweis a { color: var(--c-1); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 640px) {
  .cart-item { grid-template-columns: 44px 1fr auto auto; }
}

/* ------------------------------------------------------------------- Hero -
   Asymmetrisch: Schlagzeile links, Kennzahlen rechts. Darunter ein
   durchgehendes Verlaufsband als harte Kante statt eines Farbnebels. */

.hero { padding-block: clamp(56px, 8vw, 118px) 0; position: relative; overflow: hidden; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: end;
}

.hero h1 { max-width: 14ch; }
.hero .sub { margin-top: 26px; max-width: 54ch; color: var(--fg-2); font-size: var(--t-md); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* Kennzahlen als Liste mit Haarlinien, keine Kacheln. */
.stats { border-top: 1px solid var(--line); }
.stat { padding-block: 16px; border-bottom: 1px solid var(--line); }
.stat .v {
  font-size: var(--t-xl);
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--c-1);
}
.stat .l { margin-top: 2px; color: var(--fg-3); font-size: var(--t-sm); }

/* Das Verlaufsband unter dem Hero. Harte Kante, volle Breite. */
.band {
  margin-top: clamp(44px, 6vw, 84px);
  height: clamp(4px, .6vw, 7px);
  background: var(--g);
}

/* --------------------------------------------------------- Kundenlogos --- */

.logos { padding-block: 36px 44px; background: var(--bg-1); overflow: hidden; }
.logos .lbl {
  margin-bottom: 24px;
  font-family: var(--mono);
  font-size: var(--t-sm);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Endlos laufendes Logoband.

   Die Logos stehen mehrfach hintereinander im Laufband. Verschoben wird um
   genau die Haelfte der Gesamtbreite, und weil die zweite Haelfte identisch
   zur ersten ist, springt beim Zuruecksetzen nichts. Wie viele Kopien noetig
   sind, rechnet site.js aus der Breite aus, sonst entstehen bei breiten
   Fenstern Luecken.

   An beiden Raendern blendet eine Maske aus, damit die Logos nicht hart
   abgeschnitten aus dem Bild laufen. */
.marquee {
  position: relative;
  /* Schmaler Rand, sonst verblasst ein Name genau dann, wenn man ihn lesen
     will. Nur die aeussersten Pixel sollen weich auslaufen. */
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee var(--dauer, 40s) linear infinite;
}
.marquee-set {
  display: flex;
  align-items: center;
  flex: none;
  gap: clamp(40px, 6vw, 84px);
  padding-right: clamp(40px, 6vw, 84px);
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Bewusst KEIN Anhalten beim Darueberfahren. Das Band lief sonst genau
   dann nicht mehr, wenn der Zeiger zufaellig darueber lag, etwa beim
   Scrollen mit der Maus in der Bildmitte. */

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee { mask-image: none; -webkit-mask-image: none; }
  .marquee-set { flex-wrap: wrap; }
}

/* Die Kundenlogos liegen in zwei Sorten vor, und welche Datei welche ist,
   laesst sich im Stylesheet nicht erkennen. Deshalb entscheidet site.js beim
   Laden anhand des Alphakanals und setzt eine der beiden Klassen.

   Ohne diese Unterscheidung passiert eines von beidem: schwarze Logos
   verschwinden auf dem dunklen Grund, oder Logos mit ausgefuelltem
   Hintergrund werden durch einen Farbfilter zu einem weissen Klotz. */
.logos img {
  height: clamp(42px, 4.6vw, 64px);
  width: auto;
  flex: none;
  opacity: .85;
  transition: opacity .2s;
}
.logos img:hover { opacity: 1; }

/* Freigestellt: als weisse Silhouette. Das Motiv bleibt erhalten, weil nur
   die sichtbaren Pixel eingefaerbt werden, die transparenten nicht. */
.logos img.is-sil { filter: brightness(0) invert(1); opacity: .8; }
.logos img.is-sil:hover { opacity: 1; }

/* Nicht freigestellt: unveraendert lassen und auf ein helles Plaettchen
   setzen. Der mitgelieferte Hintergrund geht darin auf, statt als Kasten
   gegen die Seite zu stehen. */
.logos img.is-plate {
  height: clamp(38px, 4.2vw, 56px);
  padding: 9px 13px;
  border-radius: var(--r);
  background: #fff;
  opacity: 1;
  box-sizing: content-box;
}

/* Wortmarke statt Bildlogo.

   Greift automatisch, wenn eine Logodatei fehlt, und ist bewusst als eigene
   Gestaltung angelegt statt als Notbehelf: heller Text in Versalien, gross
   genug zum Lesen. Eine Leiste aus Schriftzuegen ist ein gaengiges und
   sauberes Mittel, solange die Bilddateien nicht vorliegen. */
.logo-ph {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: clamp(42px, 4.6vw, 64px);
  padding-inline: 2px;
  color: var(--fg);
  font-size: clamp(17px, 1.6vw, 23px);
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
  opacity: .88;
  transition: opacity .2s, color .2s;
}
.logo-ph:hover { opacity: 1; color: var(--c-1); }

/* --------------------------------------------------- Haarlinien-Raster --- */

/* Leistungen als Raster aus Trennlinien statt aus schwebenden Karten.
   Die Linien kommen aus dem Hintergrund, jede Zelle ueberdeckt sie. */
.hgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.hcell {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 40px) clamp(22px, 2.4vw, 32px);
  background: var(--bg);
  position: relative;
  transition: background .2s;
}
.hcell::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--g);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .25s;
}
.hcell:hover { background: var(--bg-1); }
.hcell:hover::before { transform: scaleY(1); }

/* Bild in der Leistungskachel: flach, damit der Text die Hauptrolle
   behaelt und die Kacheln gleich hoch bleiben. */
.hcell-bild {
  width: calc(100% + 2 * clamp(22px, 2.4vw, 32px));
  margin: calc(-1 * clamp(26px, 3vw, 40px)) calc(-1 * clamp(22px, 2.4vw, 32px)) 22px;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}
.hcell .n {
  font-family: var(--mono);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--fg-3);
  margin-bottom: 18px;
}
.hcell h3 { margin-bottom: 12px; }
.hcell p { flex: 1; color: var(--fg-2); font-size: var(--t-sm); }
.hcell .link { margin-top: 20px; }

/* --------------------------------------------------------------- Pakete ---
   Die Karten teilen sich ein gemeinsames Zeilenraster. Dadurch stehen Titel,
   Mengenwahl, Preis und jede einzelne Merkmalszeile ueber alle Pakete hinweg
   exakt auf derselben Hoehe, egal wie lang ein Text in einer Spalte wird.
   Genau das macht die Pakete vergleichbar.

   Zeilen: Abzeichen, Titel, Mengenwahl, Preis, 8 Merkmale, Ersparnis, Knopf. */

.offers {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(236px, 1fr));
  grid-template-rows: repeat(14, auto);
  background: var(--line);
  border: 1px solid var(--line);
}

.offer {
  position: relative;
  display: grid;
  grid-row: span 14;
  grid-template-rows: subgrid;
  align-content: start;
  gap: 0;
  padding: 26px 22px 24px;
  background: var(--bg);
}

/* Ohne Subgrid faellt die Karte auf eine einfache Spalte zurueck. Die Zeilen
   liegen dann nicht mehr exakt auf einer Hoehe, die Karte bleibt aber heil. */
@supports not (grid-template-rows: subgrid) {
  .offers { grid-template-rows: none; }
  .offer { display: flex; flex-direction: column; grid-row: auto; }
  .offer .f-list { display: block; }
}
/* Verlaufskante oben statt farbigem Rahmen ringsum. */
.offer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--g);
  opacity: 0;
  transition: opacity .2s;
}
.offer:hover::before { opacity: 1; }

/* Das empfohlene Paket.

   Frueher war die ganze Karte eine Verlaufsflaeche. Das sticht heraus, macht
   den Text darauf aber unruhig: der Untergrund wechselt hinter jeder Zeile
   die Farbe. Jetzt bleibt die Flaeche ruhig und nur leicht aufgehellt, den
   Blick zieht stattdessen die kraeftige Kante oben, das Abzeichen und der
   Knopf. Der Text steht damit hier genauso ruhig wie in den Nachbarkarten. */
.offer--feat { background: var(--bg-2); }
.offer--feat::before { opacity: 1; height: 4px; }

/* Abzeichenzeile. Steht auch leer da, damit die Titel aller Karten auf
   derselben Hoehe beginnen. */
.badge-slot { min-height: 26px; display: flex; align-items: flex-start; }

.offer .badge {
  padding: 5px 12px;
  border-radius: var(--r-sm);
  /* Heller Verlauf mit fast schwarzer Schrift. Auf der dunklen Karte ist das
     der staerkste Kontrast, den es hier gibt, und zugleich klein genug, um
     nicht mit dem Fliesstext zu konkurrieren. */
  background: var(--g);
  color: #06070c;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
}
.offer .badge--sale { background: var(--g-warm); color: #06070c; }

.offer h3 { font-size: var(--t-md); padding-top: 10px; }

/* Mengenwahl */
.qty-pick { padding-top: 12px; }
.qty-pick select {
  width: 100%;
  padding: 9px 32px 9px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--bg-1);
  color: var(--fg);
  font-size: var(--t-sm);
  font-weight: 700;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-3) 50%),
                    linear-gradient(135deg, var(--fg-3) 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.qty-pick select:hover { border-color: var(--c-1); }
.p-price { padding-top: 16px; }
.offer .price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.offer .now { font-size: var(--t-xl); font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.offer .was { color: var(--fg-3); font-size: var(--t-sm); text-decoration: line-through; }
.offer .per { margin-top: 5px; color: var(--fg-2); font-size: var(--t-sm); font-weight: 600; font-family: var(--mono); }

/* Merkmalszeilen. Die Liste selbst verschwindet aus dem Layout, damit jede
   Zeile eine eigene Zeile im gemeinsamen Raster belegt und die Merkmale
   ueber alle Pakete hinweg nebeneinander stehen. */
.f-list { display: contents; }
.offer .f {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-block: 9px;
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
}
.offer .f:first-of-type { margin-top: 18px; }
/* Die Merkmalszeilen tragen den Vergleich, deshalb bewusst kraeftig gesetzt
   statt als kleingedruckte Nebensache. */
.offer .f .k { color: var(--fg-2); font-size: var(--t-sm); }
.offer .f .v { color: var(--fg); font-weight: 700; text-align: right; }
.offer .f .v.no { color: var(--fg-3); font-weight: 500; }

.offer .spar {
  padding-block: 14px 16px;
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--c-1);
}

/* Gibt es nichts zu sparen, bleibt die Zeile trotzdem stehen, nur unsichtbar.
   Mit display:none wuerde sie aus dem Raster fallen und alle folgenden Zeilen
   dieser Karte um eine Position hochrutschen. Dann saessen die Knoepfe der
   Karten nicht mehr auf einer Hoehe, genau das soll das Raster verhindern. */
.offer .spar[hidden] { display: block; visibility: hidden; }

.offer .btn { align-self: end; }

/* -------------------------------------------------------------- Showcase -- */

/* Kategoriefilter ueber dem Portfolio. */
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.filter button {
  padding: 9px 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  color: var(--fg-2);
  font-size: var(--t-sm);
  font-weight: 600;
  transition: color .16s, border-color .16s, background .16s;
}
.filter button:hover { color: var(--fg); border-color: var(--c-1); }
.filter button.is-on {
  background: var(--g);
  border-color: transparent;
  color: var(--on-bright);
  font-weight: 800;
}
.filter .cnt { opacity: .6; font-weight: 600; margin-left: 6px; }

.showcase { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

/* Ausgefilterte Kacheln verschwinden, ohne dass das Raster springt. */
.clip[hidden] { display: none; }

.showcase-empty {
  display: none;
  padding: 40px 0;
  color: var(--fg-3);
  font-size: var(--t-sm);
}
.showcase-empty.is-on { display: block; }

/* Hochformat ist der Normalfall, das ist das Format der Shortform-Clips.
   Querformat-Videos bekommen 16:9 und belegen zwei Spalten. Ohne das wuerde
   der Zuschnitt oben und unten die Bildmitte wegschneiden. */
.clip {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  transition: transform .2s;
}
.clip--quer { aspect-ratio: 16 / 9; grid-column: span 2; }
.clip:hover { transform: translateY(-4px); }
.clip video, .clip img { width: 100%; height: 100%; object-fit: cover; }

/* Solange die Clips noch nicht lokal liegen, fuellt eine Verlaufsflaeche die
   Kachel. Jede bekommt einen anderen Ausschnitt der Verlaufsachse, dadurch
   wirkt die Reihe gestaltet und nicht leer. */
.clip .ph { height: 100%; background: var(--g); background-size: 700% 100%; }
.clip:nth-child(7n+1) .ph { background-position:   0% 0; }
.clip:nth-child(7n+2) .ph { background-position:  17% 0; }
.clip:nth-child(7n+3) .ph { background-position:  33% 0; }
.clip:nth-child(7n+4) .ph { background-position:  50% 0; }
.clip:nth-child(7n+5) .ph { background-position:  67% 0; }
.clip:nth-child(7n+6) .ph { background-position:  83% 0; }
.clip:nth-child(7n+7) .ph { background-position: 100% 0; }

.clip .meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 48px 16px 16px;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
}
.clip .nm { font-size: var(--t-base); font-weight: 700; letter-spacing: -.01em; }
.clip .dur { margin-top: 2px; color: rgba(255,255,255,.72); font-size: var(--t-sm); font-family: var(--mono); }
.clip .play {
  position: absolute;
  top: 12px; right: 12px;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(5,6,10,.55);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 11px;
}

/* ----------------------------------------------------------- Bewertungen -- */

.rating-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  font-size: var(--t-sm);
  transition: border-color .16s;
}
.rating-pill:hover { border-color: var(--c-1); }
.rating-pill .num { font-size: var(--t-md); font-weight: 800; letter-spacing: -.03em; }
.rating-pill .stars { color: #ffc247; letter-spacing: 1px; }
.rating-pill .src { color: var(--fg-3); }

/* Bewertungen als waagerechter Schieber.

   Ein Raster waere bei vielen Bewertungen eine endlose Wand. Nebeneinander
   in einem Fenster bleibt der Abschnitt gleich hoch, egal ob drei oder
   dreissig Stimmen darin stehen. Gescrollt wird per Pfeil, Wischen oder
   Tastatur, und die Kacheln rasten sauber ein. */
/* Nur die einzelne Kachel (.quote) steht auf hellem Grund, nicht der ganze
   Kasten drumherum. So wirkt jede Bewertung wie eine eigene helle Karte auf
   dunklem Grund, statt einer grossen grauen Flaeche. */
.rev { position: relative; }
.rev-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  /* overflow-x:auto berechnet overflow-y automatisch auch auf "auto" statt
     "visible", sonst wuerde die Sprechblasen-Spitze der Karten unten
     abgeschnitten. Etwas Platz reicht, damit sie sichtbar bleibt. */
  padding-bottom: 12px;
  /* Bewusst OHNE scroll-snap. Zusammen mit den Pfeilen und dem weichen
     Scrollen sprang die Spur sonst an den Anschlag, statt eine Kachel weiter
     zu gehen: eine Zuweisung von scrollLeft = 500 landete bei 3000. Ohne
     Snap trifft jeder Klick genau eine Kachelbreite, und das Wischen fuehlt
     sich unveraendert an. */
  /* Die eigene Leiste stoert, gescrollt wird ueber Pfeile, Wischen oder
     das Mausrad. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rev-scroll::-webkit-scrollbar { display: none; }
/* Wachsen erlaubt: solange wenige Bewertungen da sind, fuellen sie die
   Breite aus. Sobald es mehr werden als hineinpassen, gibt es keinen freien
   Platz mehr und die Kacheln bleiben auf ihrer Grundbreite. So steht nie
   eine leere Flaeche neben der letzten Kachel. */
.rev-scroll .quote {
  flex: 1 0 clamp(280px, 30vw, 380px);
}

/* Passt alles ins Fenster, gibt es nichts zu blaettern. Dann verschwindet
   die Leiste, statt zwei tote Pfeile zu zeigen. site.js setzt die Klasse. */
.rev-nav { display: flex; gap: 10px; margin-top: 20px; }
.rev-nav.is-weg { display: none; }
.rev-nav button {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid #ccd5dc;
  border-radius: 50%;
  background: #fff;
  color: #10151a;
  font-size: 17px;
  transition: border-color .16s, background .16s, opacity .16s;
}
.rev-nav button:hover:not(:disabled) { border-color: #10151a; }
.rev-nav button:disabled { opacity: .3; cursor: default; }
.rev-nav .zaehler { display: flex; align-items: center; margin-left: 6px; color: #6b7784; font-family: var(--mono); font-size: var(--t-sm); }

@media (prefers-reduced-motion: reduce) { .rev-scroll { scroll-behavior: auto; } }
/* Kein Profilbild. Stattdessen bekommt die Karte selbst die Form einer
   Sprechblase: eine kleine Spitze unten links zeigt auf den Namen darunter,
   so als wuerde die Person direkt darunter das Zitat aussprechen. */
.quote {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 22px;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: 0 1px 3px rgba(10,20,30,.10), 0 8px 22px -14px rgba(10,20,30,.25);
}
.quote::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: -9px;
  width: 0; height: 0;
  border-style: solid;
  border-width: 10px 9px 0 0;
  border-color: #fff transparent transparent transparent;
  filter: drop-shadow(2px 3px 2px rgba(10,20,30,.06));
}

.quote .stars { flex-shrink: 0; margin-bottom: 16px; color: #ffc247; letter-spacing: 2px; }
.quote p { flex: 1; font-size: var(--t-sm); line-height: 1.7; letter-spacing: -.01em; color: #1a2027; }
.quote .who { margin-top: 20px; padding-top: 16px; border-top: 1px solid #e3e8ec; display: flex; flex-direction: column; gap: 2px; }
.quote .nm { font-size: var(--t-sm); font-weight: 700; color: #10151a; }
.quote .src { color: #6b7784; font-size: var(--t-xs); }

/* ----------------------------------------------------------- Zertifikate -- */

.certs { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 40px; margin-top: 26px; }
/* Siegel laufen durch dieselbe Pruefung wie die Kundenlogos, site.js setzt
   is-sil oder is-plate. Ohne Klasse bleibt das Bild unveraendert. */
.certs img { height: 46px; width: auto; opacity: .85; transition: opacity .2s; }
.certs img:hover { opacity: 1; }
.certs img.is-sil { filter: brightness(0) invert(1); opacity: .72; }
.certs img.is-sil:hover { opacity: 1; }
.certs img.is-plate { height: 40px; padding: 8px 12px; border-radius: var(--r); background: #fff; opacity: 1; box-sizing: content-box; }
.cert-ph {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--fg-2);
  font-size: var(--t-sm);
  font-weight: 700;
}

/* -------------------------------------------------------------- Lightbox -- */

/* Das YouTube-Fenster wird erst beim Klick erzeugt. Vorher gibt es keinerlei
   Verbindung zu Google, weil auch die Vorschaubilder lokal liegen. */
.lb {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(3,4,7,.93);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lb.is-on { display: grid; }
/* Der Rahmen schneidet das iframe an den Ecken ab, deshalb duerfen Titel und
   Schliessen-Knopf nicht darin liegen. Sie haengen an der Huelle darum. */
.lb-inner { position: relative; width: min(100%, 420px); max-height: 100%; }
/* Querformat braucht ein breiteres Fenster, sonst bleibt es winzig. */
.lb.is-quer .lb-inner { width: min(100%, 980px); }
.lb.is-quer .lb-box { aspect-ratio: 16 / 9; }
.lb-box {
  position: relative;
  aspect-ratio: 9 / 16;
  max-height: 100%;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #000;
  box-shadow: var(--sh-3);
}
.lb-box iframe { width: 100%; height: 100%; border: 0; }
.lb-close {
  position: absolute;
  top: -44px; right: 0;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--fg);
  font-size: 18px;
  line-height: 1;
}
.lb-close:hover { background: var(--c-1); color: var(--on-bright); }
.lb-title {
  position: absolute;
  top: -38px; left: 0; right: 52px;
  color: var(--fg-2);
  font-size: var(--t-sm);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ---------------------------------------------------------------- Ablauf -- */

/* Waagerechter Zeitstrahl mit Verlaufslinie. */
.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(20px, 3vw, 34px); position: relative; }
.flow::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 13px;
  height: 2px;
  background: var(--g);
  opacity: .45;
}
.flow-step { position: relative; padding-top: 40px; }
.flow-step::before {
  content: "";
  position: absolute;
  top: 6px; left: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--g);
  box-shadow: 0 0 0 5px var(--bg);
}
.flow-step .n { font-family: var(--mono); font-size: var(--t-xs); color: var(--fg-3); letter-spacing: .16em; }
.flow-step h3 { margin: 8px 0 10px; font-size: var(--t-md); }
.flow-step p { color: var(--fg-2); font-size: var(--t-sm); }

/* ----------------------------------------------------------- Preistabelle - */

.rates { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); background: var(--line); border: 1px solid var(--line); }
.rate { padding: 26px 22px; background: var(--bg); }
.rate .t { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.rate .v { margin-top: 12px; font-size: var(--t-xl); font-weight: 800; letter-spacing: -.04em; }
.rate .v small { font-size: var(--t-sm); font-weight: 500; color: var(--fg-3); letter-spacing: 0; }
.rate ul { margin-top: 16px; }
.rate li { display: flex; gap: 9px; padding-block: 4px; color: var(--fg-3); font-size: var(--t-xs); }
.rate li::before { content: "·"; color: var(--c-1); font-weight: 800; }

/* ------------------------------------------------------------------- FAQ -- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: -.02em;
  cursor: pointer;
  list-style: none;
  transition: color .16s;
}
.faq summary:hover { color: var(--c-1); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--c-1);
  transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 24px; max-width: 68ch; color: var(--fg-2); font-size: var(--t-sm); }

/* ---------------------------------------------------------- Verlaufsband -- */

/* Ganzer Abschnitt als Verlaufsflaeche mit dunklem Text. Der staerkste
   Bruch auf der Seite und der Ort fuer den Hauptaufruf. */
.gband { background: var(--g); color: var(--on-bright); }
.gband h2 { max-width: 20ch; }
.gband p { margin-top: 18px; max-width: 56ch; color: rgba(6,7,12,.78); font-size: var(--t-md); }
.gband .btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.gband .sub { margin-top: 20px; font-family: var(--mono); font-size: var(--t-sm); color: rgba(6,7,12,.7); }
.gband .sec-label { color: rgba(6,7,12,.66); }
.gband .sec-label .n { background: none; color: var(--on-bright); -webkit-text-fill-color: var(--on-bright); }
.gband .sec-label::after { background: linear-gradient(90deg, rgba(6,7,12,.35), transparent); }

/* ------------------------------------------------------------- Kontakt ---- */

/* Kontaktwege als Kacheln.

   Die E-Mail-Adresse ist mit Abstand der laengste Eintrag. Sie bekommt
   deshalb eine eigene, volle Zeile, statt in eine schmale Spalte gequetscht
   zu werden, wo sie umbricht oder abgeschnitten wird. */
.contact { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.contact-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-1);
  transition: border-color .18s, background .18s, transform .18s;
}
.contact-row:hover { border-color: var(--c-1); background: var(--bg-2); transform: translateY(-2px); }
.contact-row .l { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.contact-row .v { font-size: var(--t-md); font-weight: 700; letter-spacing: -.02em; word-break: break-word; }
.contact-row .h { color: var(--fg-3); font-size: var(--t-sm); }

/* Volle Breite fuer die E-Mail. */
.contact-row--breit { grid-column: 1 / -1; }
.contact-row--breit .v { font-size: var(--t-lg); }

/* WhatsApp bekommt seine eigene Farbe, damit der Weg sofort erkennbar ist. */
.contact-row--wa:hover { border-color: #25d366; }
.contact-row--wa .l { color: #25d366; }

.nl-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.nl-form input {
  flex: 1 1 220px;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--bg-1);
  font-size: var(--t-sm);
}
.nl-form input:focus { border-color: var(--c-1); outline: none; }
.nl-msg { margin-top: 10px; font-size: var(--t-sm); min-height: 1.4em; }

/* --------------------------------------------------------------- Fusszeile */

.ftr { border-top: 1px solid var(--line); padding-block: clamp(48px, 6vw, 72px) 28px; }
.ftr-top { display: grid; gap: 36px; grid-template-columns: 1.7fr 1fr 1fr 1fr; padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.ftr-top p { margin-top: 16px; max-width: 34ch; color: var(--fg-3); font-size: var(--t-sm); }
.ftr h4 { margin-bottom: 16px; font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); font-weight: 600; }
.ftr li { padding-block: 5px; }
.ftr li a { color: var(--fg-2); font-size: var(--t-sm); transition: color .15s; }
.ftr li a:hover { color: var(--c-1); }
.ftr-btm { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; color: var(--fg-3); font-size: var(--t-xs); }

/* --------------------------------------------------- Klebende CTA (mobil) - */

.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  display: none;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(5,6,10,.95);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform .24s cubic-bezier(.2,.8,.3,1);
}
.sticky-cta.is-on { transform: translateY(0); }
.sticky-cta .btn { flex: 1; }

/* ------------------------------------------------------------ Einblenden -- */

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.3,1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }


/* ======================================================= Unterseiten ===== */

.page-hero { padding-block: clamp(44px, 6vw, 84px) clamp(26px, 3vw, 40px); }
.page-hero h1 { max-width: 20ch; font-size: var(--t-2xl); }
.page-hero p { margin-top: 20px; max-width: 62ch; color: var(--fg-2); font-size: var(--t-md); }

.crumbs { margin-bottom: 18px; color: var(--fg-3); font-size: var(--t-sm); font-family: var(--mono); }
.crumbs a:hover { color: var(--c-1); }

/* Verweiskarten am Fuss einer Unterseite, damit man nicht in der Sackgasse
   landet, wenn man unten angekommen ist. */
.next { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); background: var(--line); border: 1px solid var(--line); }
.next a { display: block; padding: 26px 24px; background: var(--bg); transition: background .18s; }
.next a:hover { background: var(--bg-1); }
.next .l { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.next .t { margin-top: 10px; font-size: var(--t-md); font-weight: 700; letter-spacing: -.02em; }
.next .d { margin-top: 6px; color: var(--fg-2); font-size: var(--t-sm); }


/* ---------------------------------------------------------------- Suche -- */

.search { position: relative; max-width: 540px; margin-bottom: 12px; }
.search input {
  width: 100%;
  padding: 15px 18px 15px 48px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--bg-1);
  color: var(--fg);
  font-size: var(--t-sm);
}
.search input:focus { border-color: var(--c-1); outline: none; }
.search input::placeholder { color: var(--fg-3); }
.search .ico { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); pointer-events: none; opacity: .6; }

.such-treffer { margin-bottom: 20px; min-height: 1.3em; color: var(--fg-3); font-family: var(--mono); font-size: var(--t-sm); }

.no-hits {
  display: none;
  margin-top: 24px;
  padding: 30px 26px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
  color: var(--fg-2);
  font-size: var(--t-sm);
}
.no-hits.is-on { display: block; }

.faq details[hidden] { display: none; }
/* ============================================================================
   Shop-Raster fuer die Pakete

   Frueher standen die Pakete als fuenf Spalten mit je vierzehn Zeilen
   nebeneinander. Das war als Vergleichstabelle gedacht, wirkte aber
   erschlagend. Jetzt ist es ein Produktraster wie in einem Onlineshop:
   Bild, Name, Preis, Mengenwahl, Knopf. Die Merkmale stehen kurz darunter
   statt als lange Liste.
   ========================================================================== */

.shop { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.artikel {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-1);
  overflow: hidden;
  transition: border-color .18s, transform .18s;
}
.artikel:hover { border-color: var(--line-2); transform: translateY(-3px); }
.artikel--beliebt { border-color: var(--c-1); }

.artikel-bild { position: relative; aspect-ratio: 4 / 3; background: var(--bg-2); overflow: hidden; }
.artikel-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.artikel:hover .artikel-bild img { transform: scale(1.04); }

.artikel-fahne {
  position: absolute;
  top: 12px; left: 12px;
  padding: 5px 12px;
  border-radius: var(--r-sm);
  background: var(--c-1);
  color: #06070c;
  font-size: 12px;
  font-weight: 800;
}
.artikel-fahne--sale { background: var(--c-warm); color: #fff; }

.artikel-inhalt { display: flex; flex-direction: column; flex: 1; padding: 20px 20px 22px; }
.artikel h3 { font-size: var(--t-md); }

/* Der Preis steht direkt unter dem Titel, nicht erst nach Beschreibung und
   Merkmalen. So beginnt jede Karte auf derselben Zeile mit derselben Art
   Inhalt, egal wie lang der Text darunter ausfaellt, und die Reihe wirkt
   parallel statt an unterschiedlichen Stellen "abzureissen". */
.artikel .price { margin-top: 10px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.artikel .now { font-size: var(--t-xl); font-weight: 800; letter-spacing: -.04em; }
.artikel .was { color: var(--fg-3); font-size: var(--t-sm); text-decoration: line-through; }
.artikel .per { margin-top: 3px; color: var(--fg-2); font-size: var(--t-sm); font-family: var(--mono); }

/* Termine ohne Stueckzahl */
.artikel .dauer { margin-top: 6px; color: var(--fg-3); font-size: var(--t-sm); font-family: var(--mono); }

.artikel .beschreibung { margin-top: 12px; color: var(--fg-2); font-size: var(--t-sm); }

.artikel .merkmale { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.artikel .merkmale li {
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--fg-2);
  font-size: var(--t-xs);
}

/* Menge und Kaufbutton bleiben unten in der Karte, auch wenn der Text
   darueber unterschiedlich lang ist. margin-top:auto schiebt den Block im
   Flex-Container so weit wie moeglich nach unten, dadurch stehen alle
   Buttons einer Reihe auf gleicher Hoehe. */
.artikel .preisblock { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.artikel .qty-pick { padding-top: 14px; }
.artikel .btn { margin-top: 14px; }

/* ---------------------------------------------------- Zertifikatszeile ---
   Bewusst klein und ganz unten: eine stille Bestaetigung, kein Blickfang. */
.certs-klein {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--fg-3);
  font-size: var(--t-xs);
}
.certs-klein .lbl { font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.certs-klein span:not(.lbl) { color: var(--fg-2); }
.certs-klein img { height: 22px; width: auto; filter: brightness(0) invert(1); opacity: .55; }

/* Breites Bild unter dem Seitenkopf einer Leistungsseite. */
.seiten-bild {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--r-md);
}
@media (max-width: 640px) { .seiten-bild { aspect-ratio: 3 / 2; } }

/* Sprungleiste: kurze Verweise als Pillen, etwa unter der Fehlerseite. */
.jump { display: flex; flex-wrap: wrap; gap: 8px; }
.jump a {
  padding: 9px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  color: var(--fg-2);
  font-size: var(--t-sm);
  font-weight: 600;
  transition: border-color .16s, color .16s, background .16s;
}
.jump a:hover { border-color: var(--c-1); color: var(--fg); background: var(--bg-2); }

/* ----------------------------------------------------------- Fehlerseite -- */

.fehlerseite {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding-block: clamp(20px, 5vw, 60px);
}
.figur-halter { display: grid; place-items: center; }

/* Die Figur wippt langsam, damit die Seite nicht ganz tot wirkt. */
.pixelfigur {
  width: clamp(140px, 20vw, 220px);
  height: auto;
  image-rendering: pixelated;
  animation: figurWippt 3.4s ease-in-out infinite;
  filter: drop-shadow(0 18px 26px rgba(0,232,218,.18));
}
@keyframes figurWippt {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) { .pixelfigur { animation: none; } }

/* Auf der Fehlerseite traegt die Figur den Blick, nicht die Schlagzeile.
   Deshalb hier eine Stufe kleiner als der Standard fuer h1. */
.fehlerseite h1 { font-size: var(--t-2xl); letter-spacing: -.035em; }
.fehlerseite h1 + p { margin-top: 20px; max-width: 46ch; color: var(--fg-2); font-size: var(--t-md); }

.fehler-zahl {
  font-family: var(--mono);
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: .3em;
  color: var(--c-1);
  margin-bottom: 14px;
}

@media (max-width: 720px) {
  .fehlerseite { grid-template-columns: 1fr; text-align: left; }
  .figur-halter { justify-items: start; }
}

/* ============================================================================
   Blog

   Der Fliesstext ist bewusst schmal und gross gesetzt. Lange Artikel werden
   sonst zur Wand, und genau diese Seiten sollen auch von Maschinen gelesen
   und zitiert werden koennen.
   ========================================================================== */

.posts { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.post {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-1);
  transition: border-color .18s, transform .18s, background .18s;
}
.post:hover { border-color: var(--c-1); transform: translateY(-3px); background: var(--bg-2); }
.post .meta { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.post h3 { margin: 14px 0 10px; font-size: var(--t-md); }
.post p { flex: 1; color: var(--fg-2); font-size: var(--t-sm); }
.post .more { margin-top: 18px; color: var(--c-1); font-size: var(--t-sm); font-weight: 700; }

/* Kurzantwort ganz oben im Artikel. Beantwortet die Frage in zwei Saetzen,
   bevor der Text ausholt. */
.kurzantwort {
  margin-bottom: clamp(30px, 4vw, 44px);
  padding: 22px 24px;
  border-left: 3px solid var(--c-1);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--bg-1);
}
.kurzantwort .l { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--c-1); margin-bottom: 8px; }
.kurzantwort p { font-size: var(--t-md); color: var(--fg); }

.prose { font-size: var(--t-md); line-height: 1.75; color: var(--fg-2); }
.prose > * + * { margin-top: 20px; }
.prose h2 {
  margin-top: clamp(38px, 5vw, 56px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: var(--t-lg);
  color: var(--fg);
}
.prose h3 { margin-top: 30px; font-size: var(--t-md); color: var(--fg); }
.prose strong, .prose b { color: var(--fg); font-weight: 700; }
.prose a { color: var(--c-1); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose li { margin-top: 10px; }
.prose li::marker { color: var(--c-1); }

.prose table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.prose th, .prose td { padding: 11px 14px; border: 1px solid var(--line); text-align: left; }
.prose th { background: var(--bg-2); color: var(--fg); font-weight: 700; }
.prose .tabelle { overflow-x: auto; }

.artikel-kopf { margin-bottom: clamp(26px, 4vw, 40px); }
.artikel-kopf h1 { font-size: var(--t-2xl); }
.artikel-meta { margin-top: 18px; color: var(--fg-3); font-family: var(--mono); font-size: var(--t-sm); }
/* ============================================================================
   Bildschirmgroessen

   Vier Stufen: grosser Bildschirm, Laptop, Tablet, Telefon. Die Spaltenzahl
   der Paketkarten wird je Stufe fest gesetzt statt ueber auto-fit. Bei fuenf
   Paketen entscheidet sonst die Fensterbreite auf den Pixel genau darueber,
   ob am Ende eine einzelne Karte allein in der zweiten Reihe steht.
   ========================================================================== */

/* ---- Laptop --------------------------------------------------------- */
@media (max-width: 1200px) {
  .offers { grid-template-columns: repeat(3, 1fr); }
  .hgrid  { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Tablet --------------------------------------------------------- */
@media (max-width: 940px) {
  .hero { padding-block: clamp(40px, 7vw, 72px) 0; }
  .hero-grid { grid-template-columns: 1fr; align-items: start; gap: 34px; }
  .hero h1 { max-width: 18ch; }
  /* Kennzahlen nebeneinander statt als lange Liste unter dem Text. */
  .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 24px; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }

  .nav {
    position: absolute;
    top: var(--header-h); left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 8px var(--pad) 18px;
    background: rgba(5,6,10,.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 13px 0; font-size: var(--t-base); border-bottom: 1px solid var(--line); }
  .nav a::after { display: none; }
  .burger { display: grid; place-items: center; }
  .hdr-cta .btn--primary { display: none; }
  /* Sprachumschalter im Kopf. */
.lang-wechsel {
  padding: 7px 11px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--fg-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .06em;
  transition: border-color .15s, color .15s;
}
.lang-wechsel:hover { border-color: var(--c-1); color: var(--fg); }

.hdr-tel { display: none; }

  .offers { grid-template-columns: repeat(2, 1fr); }
  .ftr-top { grid-template-columns: 1fr 1fr; }

  /* Der waagerechte Zeitstrahl ergibt untereinander keinen Sinn mehr. */
  .flow::before { display: none; }
  .flow-step { padding-top: 34px; }
}

/* ---- Telefon -------------------------------------------------------- */
@media (max-width: 640px) {
  /* Erzwungene Zeilenumbrueche in Ueberschriften passen nur zu breiten
     Zeilen. Auf dem Telefon bricht der Text besser von selbst um. */
  h1 br, h2 br { display: none; }

  .offers  { grid-template-columns: 1fr; }
  .hgrid   { grid-template-columns: 1fr; }
  .showcase { grid-template-columns: repeat(2, 1fr); }
  .rates   { grid-template-columns: 1fr 1fr; }
  .contact { grid-template-columns: 1fr; }
  .ftr-top { grid-template-columns: 1fr; gap: 28px; }

  .stats { grid-template-columns: 1fr; gap: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }

  .sticky-cta { display: flex; }
  /* Platz fuer die klebende Leiste, damit sie die Fusszeile nicht verdeckt. */
  body { padding-bottom: 76px; }

  .btn--lg { padding: 15px 24px; }
  .hero-cta .btn { flex: 1 1 100%; }
}

/* ---- kleine Telefone ------------------------------------------------ */
@media (max-width: 520px) {
  .showcase { grid-template-columns: 1fr; }
  /* Bei einer Spalte kann Querformat keine zwei belegen. */
  .clip--quer { grid-column: span 1; }
}

@media (max-width: 400px) {
  .rates { grid-template-columns: 1fr; }
  .filter button { padding: 8px 14px; font-size: var(--t-xs); }
}