/* =====================================================================
   PRO TRANSPORTE BERN — Website
   ---------------------------------------------------------------------
   Look angelehnt an citymove.ch, das der Kunde als Vorbild nennt:
   heller, luftiger Hintergrund mit feinem Spaltenraster, schwebende
   Pillen-Navigation, sehr grosse fette Headlines, dunkle abgerundete
   Aktionskarten, viel Weissraum.

   Zwei bewusste Abweichungen vom Vorbild:
   - Markenfarbe Rot statt citymove-Blau. citymove sitzt selbst in Bern;
     gleiche Farbe plus gleiches Layout wäre eine Verwechslung.
   - Echte Fotos des Betriebs statt Renderings.

   Weiterhin gilt: keine Farbverläufe, keine externen Schriften.
   ===================================================================== */

:root {
  --rot:        #D4140A;
  --rot-dunkel: #A80F07;
  --tinte:      #16181D;
  --grau-900:   #2A2E37;
  --grau-600:   #5F6672;
  --grau-400:   #9AA1AC;
  --grau-200:   #E6E9ED;
  --grau-100:   #F4F6F8;
  --weiss:      #FFFFFF;
  --gruen:      #0E7A3C;

  --radius:     1.15rem;
  --radius-gross: 1.75rem;
  --schatten:   0 2px 10px rgba(22,24,29,.06), 0 12px 40px rgba(22,24,29,.07);
  --schatten-tief: 0 4px 16px rgba(22,24,29,.10), 0 20px 60px rgba(22,24,29,.12);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --breite: 78rem;
  --nav-hoehe: 3.9rem;
}

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

body {
  margin: 0; font-family: var(--sans); color: var(--tinte);
  background: var(--weiss); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.menue-offen { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--rot); }
figure { margin: 0; }

.wrap { width: min(100% - 2.5rem, var(--breite)); margin-inline: auto; }

/* Ankersprünge dürfen nicht unter der schwebenden Pille landen */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 7rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Feines Spaltenraster im Hintergrund — wie bei citymove.
   Reines Linienmuster, kein Verlauf. */
.raster { position: relative; }
.raster::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    to right, var(--grau-200) 0 1px, transparent 1px 16.6667%);
  opacity: .7;
}
.raster > * { position: relative; }

/* --- Demo-Banner ------------------------------------------------------ */
.demo-banner {
  background: #C8860D; color: #fff; text-align: center;
  padding: .55rem 1rem; font-size: .84rem; font-weight: 600;
}
.demo-banner strong { text-transform: uppercase; letter-spacing: .06em; }

/* --- Schwebende Pillen-Navigation ------------------------------------ */
.kopf {
  position: sticky; top: .9rem; z-index: 60;
  padding: 0 1.25rem; margin-top: .9rem;
}
.kopf__pille {
  /* Muss über dem Menü-Panel liegen (beide sind Kinder von .kopf),
     sonst verdeckt das aufgeklappte Menü den Schliessen-Knopf. */
  position: relative; z-index: 55;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; width: fit-content; max-width: 100%; margin-inline: auto;
  padding: .5rem .5rem .5rem .75rem;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--grau-200);
  border-radius: 999px; box-shadow: var(--schatten);
  min-height: var(--nav-hoehe);
}

.menue-knopf {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .5rem .95rem .5rem .6rem; border: 0; border-radius: 999px;
  background: transparent; cursor: pointer; font: inherit;
  font-weight: 600; font-size: .9rem; color: var(--tinte);
}
.menue-knopf:hover { background: var(--grau-100); }
.menue-knopf__punkte {
  display: grid; grid-template-columns: repeat(2, 4px); gap: 3px;
  padding: .5rem; background: var(--grau-100); border-radius: 999px;
}
.menue-knopf__punkte i {
  width: 4px; height: 4px; border-radius: 50%; background: var(--tinte);
  transition: background .15s;
}
.menue-knopf[aria-expanded="true"] .menue-knopf__punkte { background: var(--rot); }
.menue-knopf[aria-expanded="true"] .menue-knopf__punkte i { background: #fff; }

.logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit;
        padding-inline: .5rem; border-inline: 1px solid var(--grau-200); }
.logo__mark {
  display: grid; place-items: center; width: 2.15rem; height: 2.15rem;
  background: var(--rot); color: #fff; font-weight: 800; font-size: .92rem;
  border-radius: .6rem; flex: none; letter-spacing: -.02em;
}
.logo__text { display: flex; flex-direction: column; line-height: 1.1; }
.logo__name { font-weight: 800; font-size: .95rem; letter-spacing: -.015em; white-space: nowrap; }
.logo__zusatz { font-size: .62rem; text-transform: uppercase; letter-spacing: .16em; color: var(--grau-400); }

.kopf__tel {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--grau-100); color: var(--tinte);
  padding: .7rem 1.15rem; border-radius: 999px;
  text-decoration: none; font-weight: 600; font-size: .9rem; white-space: nowrap;
}
.kopf__tel:hover { background: var(--rot); color: #fff; }

/* Vollbild-Menü mit Bildkarten — wie bei citymove, und von OBEN
   herunterfahrend (ausdrücklicher Kundenwunsch). */
.nav {
  position: fixed; inset: 0; z-index: 70;
  background: var(--weiss);
  overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(2.5rem, 4vw, 3.25rem) 0 clamp(1.5rem, 3vw, 2rem);
  transform: translateY(-100%);
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
body.menue-offen .nav { transform: translateY(0); }

/* Schliessen-Knopf oben links, wie im Vorbild */
.nav__schliessen {
  position: absolute; top: 1.5rem; left: 1.5rem;
  display: grid; place-items: center; width: 3rem; height: 3rem;
  border-radius: 50%; border: 1px solid var(--grau-200);
  background: var(--weiss); color: var(--tinte); cursor: pointer;
  box-shadow: var(--schatten); z-index: 2;
}
.nav__schliessen svg { width: 1.4rem; height: 1.4rem; }
.nav__schliessen:hover { background: var(--rot); color: #fff; border-color: var(--rot); }

.nav__kopf { text-align: center; max-width: 44rem; margin: 0 auto clamp(1.25rem, 2.5vw, 1.75rem); }
.nav__titel {
  display: block; margin: 0 0 .2rem; font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800; letter-spacing: -.035em; line-height: 1.05;
}
/* Vorbild nutzt hier einen Farbverlauf — bewusst flach in der Markenfarbe. */
.nav__unterzeile {
  margin: 0 0 .6rem; font-size: clamp(1.05rem, 2vw, 1.45rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
}
.nav__unterzeile em { font-style: normal; color: var(--rot); }
.nav__lead { margin: 0; color: var(--grau-600); font-size: .92rem; }

/* Kartenraster mit feinen Trennlinien wie im Vorbild */
.nav__karten {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--grau-200);
  border-block: 1px solid var(--grau-200);
}
.navkarte {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .4rem; padding: 1.15rem 1.25rem 1.35rem;
  background: var(--weiss); text-decoration: none; color: inherit;
  transition: background .16s;
}
.navkarte:hover { background: var(--grau-100); }
.navkarte__bild {
  width: 100%; max-width: 11rem; aspect-ratio: 16 / 10;
  border-radius: .8rem; overflow: hidden; margin-bottom: .35rem;
  background: var(--grau-100);
}
.navkarte__bild img { width: 100%; height: 100%; object-fit: cover; }
.navkarte__bild--icon {
  display: grid; place-items: center; color: var(--rot);
}
.navkarte__bild--icon svg { width: 2.9rem; height: 2.9rem; }
.navkarte__titel { font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em; }
.navkarte__text { font-size: .85rem; color: var(--grau-600); max-width: 20rem; line-height: 1.45; }
.navkarte__knopf {
  margin-top: auto; padding: .45rem 1rem; border-radius: 999px;
  background: var(--grau-100); color: var(--tinte);
  font-size: .78rem; font-weight: 700;
}
.navkarte:hover .navkarte__knopf { background: var(--rot); color: #fff; }
.navkarte--wichtig .navkarte__knopf { background: var(--rot); color: #fff; }
.navkarte--wichtig:hover .navkarte__knopf { background: var(--rot-dunkel); }
.navkarte--notruf .navkarte__titel { color: var(--rot); }

@media (max-width: 62rem) { .nav__karten { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) {
  .nav__karten { grid-template-columns: 1fr; }
  .navkarte { padding: 1.5rem 1.25rem; }
  .navkarte__bild { max-width: 11rem; }
}

/* Abdunklung hinter dem Panel */
.menue-schleier {
  position: fixed; inset: 0; background: rgba(22,24,29,.5);
  opacity: 0; visibility: hidden; z-index: 65;
  transition: opacity .3s ease, visibility .3s;
}
body.menue-offen .menue-schleier { opacity: 1; visibility: visible; }

/* Bei offenem Menü verschwindet die Pille — der Schliessen-Knopf im
   Overlay übernimmt, so wie im Vorbild. */
body.menue-offen .kopf__pille { opacity: 0; pointer-events: none; }
.kopf__pille { transition: opacity .2s ease; }

@media (max-width: 34rem) {
  .kopf__pille { width: 100%; gap: .5rem; padding-left: .5rem; }
  .logo { border: 0; padding-inline: .25rem; }
  .logo__text { display: none; }
  .menue-knopf span { display: none; }
  .kopf__tel { padding: .7rem .85rem; }
  .kopf__tel span { display: none; }
}

/* --- Hero: hell und luftig ------------------------------------------- */
.hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem); }
.hero__grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.hero__marke {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .9rem; background: var(--grau-100); border-radius: 999px;
  font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--grau-600); margin-bottom: 1.35rem;
}
.hero__marke::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--rot);
}
.hero h1 {
  margin: 0 0 1.35rem; font-weight: 800; letter-spacing: -.035em;
  font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.03;
}
.hero h1 em { font-style: normal; color: var(--rot); }
.hero__lead {
  margin: 0 0 2rem; font-size: clamp(1rem, 1.3vw, 1.12rem);
  color: var(--grau-600); max-width: 32rem;
}

/* Dunkle Aktionskarten wie bei citymove: Label links, rundes Icon rechts */
.aktionen { display: grid; gap: .6rem; max-width: 24rem; }
.aktion {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1rem 1rem 1rem 1.35rem; border-radius: var(--radius);
  background: var(--tinte); color: #fff; text-decoration: none;
  font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  transition: background .15s, transform .15s;
}
.aktion:hover { background: var(--grau-900); transform: translateX(3px); }
.aktion--rot { background: var(--rot); }
.aktion--rot:hover { background: var(--rot-dunkel); }
.aktion__icon {
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem; flex: none;
  background: rgba(255,255,255,.15); border-radius: 50%;
}
.aktion__icon svg { width: 1.05rem; height: 1.05rem; }

.hero__bild {
  position: relative; border-radius: var(--radius-gross); overflow: hidden;
  box-shadow: var(--schatten-tief);
}
.hero__bild img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 32%; aspect-ratio: 4 / 3;
}
.hero__stempel {
  position: absolute; left: 1rem; bottom: 1rem;
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  color: var(--tinte); padding: .6rem 1.05rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
}

@media (max-width: 58rem) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__bild { order: -1; }
  .hero__bild img { aspect-ratio: 16 / 10; }
  .aktionen { max-width: none; }
}

/* --- Scroll-Stapel (citymove-Muster) ----------------------------------
   Jedes Panel klebt bei top:0 und füllt den Bildschirm. Weil sie
   nacheinander im Fluss stehen, schiebt sich beim Scrollen das jeweils
   nächste über das stehende. Kein Scroll-Hijacking: normales Scrollen
   bleibt erhalten, nur die Optik wechselt.                              */
.stapel { position: relative; }
.stapel__panel {
  position: sticky; top: 0;
  min-height: 100svh; display: grid; align-items: center;
  padding: clamp(4.5rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
  background: var(--weiss);
  border-top: 1px solid var(--grau-200);
}
/* Abwechselnd hell/dunkel, damit der Wechsel beim Scrollen sichtbar wird */
.stapel__panel:nth-child(even) { background: var(--grau-100); }
.stapel__panel--dunkel { background: var(--tinte); color: #fff; }
.stapel__panel--dunkel .stapel__label { color: #fff; }
.stapel__panel--dunkel p { color: rgba(255,255,255,.72); }

.stapel__inhalt {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
.stapel__text { max-width: 34rem; }
.stapel__label {
  display: inline-block; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .13em; color: var(--rot);
  margin-bottom: 1rem;
}
.stapel__text h2 {
  margin: 0 0 1rem; font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  line-height: 1.08; letter-spacing: -.03em; font-weight: 800;
}
.stapel__text p { margin: 0 0 1.75rem; font-size: 1.02rem; color: var(--grau-600); }
.stapel__bild {
  border-radius: var(--radius-gross); overflow: hidden; box-shadow: var(--schatten-tief);
}
.stapel__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Nummerierung rechts — am Viewport befestigt, nicht im Textfluss.
   float + sticky funktioniert hier nicht: das Element landet am Ende
   des Stapels statt mitzulaufen. */
.stapel__fortschritt {
  position: fixed; right: 1.6rem; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  z-index: 40;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
}
.stapel.ist-sichtbar .stapel__fortschritt { opacity: 1; visibility: visible; }
/* Grosse aktuelle Zahl, kräftiger Balken — vorher war das ein Haarstrich,
   den man auf hellem Grund kaum gesehen hat. */
.stapel__nr {
  font-size: 2.1rem; font-weight: 800; letter-spacing: -.05em;
  line-height: 1; color: var(--tinte);
  font-variant-numeric: tabular-nums;
}
.stapel__nr--gesamt {
  font-size: .82rem; font-weight: 700; letter-spacing: .06em;
  color: var(--grau-400);
}
.stapel__linie {
  display: block; width: 4px; height: 6.5rem; position: relative;
  background: var(--grau-200); border-radius: 999px; overflow: hidden;
}
.stapel__linie i {
  position: absolute; left: 0; width: 4px; background: var(--rot);
  border-radius: 999px; top: 0; height: 25%;
  transition: top .35s cubic-bezier(.16,1,.3,1), height .35s cubic-bezier(.16,1,.3,1);
}
/* Auf dem dunklen Panel stünden Zahlen und Balken sonst dunkel auf
   dunkel. Die Klasse setzt das Stapel-Skript, sobald es dort ankommt. */
.stapel.auf-dunkel .stapel__nr { color: #fff; }
.stapel.auf-dunkel .stapel__nr--gesamt { color: rgba(255,255,255,.55); }
.stapel.auf-dunkel .stapel__linie { background: rgba(255,255,255,.22); }
.stapel.auf-dunkel .stapel__knopf {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff;
}
.stapel.auf-dunkel .stapel__knopf:hover:not(:disabled) {
  background: var(--rot); border-color: var(--rot);
}
.stapel__nr, .stapel__nr--gesamt, .stapel__linie, .stapel__knopf {
  transition: color .3s ease, background-color .3s ease, border-color .3s ease;
}

/* Vor/Zurück unten rechts — ebenfalls am Viewport */
.stapel__steuerung {
  position: fixed; right: 1.6rem; bottom: 1.75rem;
  display: flex; gap: .5rem; z-index: 40;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
}
.stapel.ist-sichtbar .stapel__steuerung { opacity: 1; visibility: visible; }
.stapel__knopf {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .7rem 1.15rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--grau-200); background: var(--weiss);
  font: inherit; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--tinte);
  box-shadow: var(--schatten);
}
.stapel__knopf svg { width: 1rem; height: 1rem; }
.stapel__knopf:hover:not(:disabled) { background: var(--rot); color: #fff; border-color: var(--rot); }
.stapel__knopf:disabled { opacity: .35; cursor: default; }

@media (max-width: 58rem) {
  .stapel__inhalt { grid-template-columns: 1fr; }
  .stapel__bild { order: -1; }
  .stapel__bild img { aspect-ratio: 16 / 10; }
  .stapel__panel { min-height: auto; padding: 3rem 0; }
  .stapel__fortschritt { display: none; }
  .stapel__steuerung { display: none; }
}

/* --- Zahlenleiste ----------------------------------------------------- */
.fakten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1px; background: var(--grau-200);
  border: 1px solid var(--grau-200); border-radius: var(--radius); overflow: hidden;
}
.fakt { background: var(--weiss); padding: 1.5rem 1.35rem; }
.fakt__zahl {
  display: block; font-size: 1.95rem; font-weight: 800;
  letter-spacing: -.035em; color: var(--rot); line-height: 1.1;
}
.fakt__text { font-size: .84rem; color: var(--grau-600); }

/* --- Sektionen -------------------------------------------------------- */
.sektion { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.sektion--schmal { padding: clamp(1.5rem, 3vw, 2.25rem) 0; }
.sektion--grau { background: var(--grau-100); }
.sektion--tinte { background: var(--tinte); color: #fff; }

.sektion__kopf { max-width: 44rem; margin-bottom: 2.75rem; }
.sektion__label {
  display: inline-block; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .13em; color: var(--rot);
  margin-bottom: .9rem;
}
.sektion h2 {
  margin: 0 0 .8rem; font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  line-height: 1.1; letter-spacing: -.03em; font-weight: 800;
}
.sektion__lead { margin: 0; font-size: 1.02rem; color: var(--grau-600); }
.sektion--tinte .sektion__lead { color: rgba(255,255,255,.68); }

/* --- Leistungs-Slider (citytrans-Element) ----------------------------- */
.slider { position: relative; }
.slider__spur {
  display: grid; grid-auto-flow: column;
  /* Feste Spaltenbreite, KEIN minmax(0, …): mit Minimum 0 schrumpfen die
     Spalten in den vorhandenen Platz, statt überzulaufen — dann gibt es
     nichts zu scrollen und die Pfeile bleiben wirkungslos. */
  grid-auto-columns: 21rem;
  gap: 1.15rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: .5rem; scrollbar-width: thin;
}
.slider__spur > * { scroll-snap-align: start; }
.slider__spur::-webkit-scrollbar { height: 6px; }
.slider__spur::-webkit-scrollbar-thumb { background: var(--grau-200); border-radius: 999px; }

.slider__steuerung {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 1.5rem;
}
.slider__stand {
  font-size: .8rem; font-weight: 700; letter-spacing: .1em;
  color: var(--grau-400); text-transform: uppercase;
}
.slider__knoepfe { display: flex; gap: .5rem; }
.slider__knopf {
  display: grid; place-items: center; width: 2.8rem; height: 2.8rem;
  border: 1px solid var(--grau-200); background: var(--weiss);
  border-radius: 50%; cursor: pointer; color: var(--tinte);
  transition: background .14s, color .14s, opacity .14s;
}
.slider__knopf svg { width: 1.15rem; height: 1.15rem; }
.slider__knopf:hover:not(:disabled) { background: var(--rot); color: #fff; border-color: var(--rot); }
.slider__knopf:disabled { opacity: .35; cursor: default; }

@media (max-width: 40rem) {
  .slider__spur { grid-auto-columns: 85vw; }
}

/* --- Leistungen ------------------------------------------------------- */
.leistung {
  background: var(--weiss); display: flex; flex-direction: column;
  border: 1px solid var(--grau-200); border-radius: var(--radius); overflow: hidden;
  transition: box-shadow .18s, transform .18s;
}
.leistung:hover { box-shadow: var(--schatten); transform: translateY(-2px); }
/* Hauptleistung: gleiche Grösse wie die anderen, aber rot markiert */
.leistung--haupt { border-color: var(--rot); border-width: 2px; }
.leistung__bild { overflow: hidden; }
.leistung__bild img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
/* Hochformat-Aufnahmen in Querformat-Kacheln: ohne Korrektur schneidet
   der Zuschnitt genau das Motiv weg (beim Pannenbild den Wagenheber). */
.leistung__bild img.zeig-oben  { object-position: center 26%; }
.leistung__bild img.zeig-mitte { object-position: center 45%; }

.leistung__text { padding: 1.5rem 1.4rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.leistung h3 { margin: 0; font-size: 1.1rem; letter-spacing: -.015em; }
.leistung p { margin: 0; font-size: .92rem; color: var(--grau-600); }
.leistung__tag {
  align-self: flex-start; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--rot);
  background: #FCE9E8; padding: .28rem .65rem; border-radius: 999px;
}
.leistung__liste { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: .3rem; }
.leistung__liste li { display: flex; gap: .55rem; font-size: .88rem; color: var(--grau-600); }
.leistung__liste li::before { content: "▪"; color: var(--rot); flex: none; }

/* Karten ohne Foto: gestaltete Fläche im selben Format wie die Bilder.
   Sonst strecken sie sich im Slider auf Bildhöhe und klaffen unten auf —
   und ein erfundenes Foto kommt hier nicht hin. */
.leistung__icon {
  display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3;
  color: var(--rot); background: var(--grau-100);
  border-bottom: 1px solid var(--grau-200);
}
.leistung__icon svg { width: 3.2rem; height: 3.2rem; }


/* --- Galerie ---------------------------------------------------------- */
.galerie { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.15rem; }
.galerie__bild {
  background: var(--weiss); border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--grau-200);
}
/* 5/4 statt 3/4: Die Galerie zeigt heute überwiegend Querformat-Aufnahmen.
   Im alten Hochformat-Rahmen blieb vom Kleinwagen nur ein Kotflügel übrig.
   Auf schmalen Geräten wird die Kachel bildschirmbreit — dort noch flacher,
   sonst füllt ein einzelnes Bild den halben Bildschirm. */
.galerie__bild img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
@media (max-width: 48rem) {
  .galerie__bild img { aspect-ratio: 4 / 3; }
}
.galerie__bild figcaption {
  padding: .85rem 1rem; font-size: .85rem; color: var(--grau-600); font-weight: 600;
}

/* --- Kundenstimmen ---------------------------------------------------- */
.stimmen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.15rem;
}
.stimme {
  background: var(--weiss); border: 1px solid var(--grau-200);
  border-radius: var(--radius); padding: 1.6rem 1.5rem;
  display: flex; flex-direction: column; gap: 1.1rem;
}
.stimme blockquote {
  margin: 0; font-size: .98rem; line-height: 1.6; flex: 1;
}
.stimme blockquote::before {
  content: "\201E"; display: block; font-size: 2.6rem; line-height: .6;
  color: var(--rot); margin-bottom: .5rem;
}
.stimme figcaption { display: flex; flex-direction: column; font-size: .85rem; }
.stimme figcaption strong { font-weight: 700; }
.stimme figcaption span { color: var(--grau-400); }
/* Solange keine echten Zitate vorliegen, soll die Karte als unfertig lesbar sein */
.stimme--leer { border-style: dashed; background: var(--grau-100); }
.stimmen__hinweis {
  margin: 1.5rem 0 0; padding: 1rem 1.2rem; background: #FFF4E0;
  border-left: 4px solid #C8860D; border-radius: var(--radius-s, .7rem);
  font-size: .88rem; color: #6B4A05; max-width: 46rem;
}

/* --- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-block; padding: .85rem 1.5rem; border-radius: 999px;
  font-weight: 700; font-size: .92rem; text-decoration: none;
  border: 0; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.btn--rot   { background: var(--rot); color: #fff; }
.btn--rot:hover { background: var(--rot-dunkel); }
.btn--weiss { background: #fff; color: var(--tinte); }
.btn--weiss:hover { background: var(--grau-200); }

/* --- Notruf ----------------------------------------------------------- */
.notruf {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.75rem;
  align-items: center; background: var(--rot); color: #fff;
  padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius-gross);
}
.notruf__icon { width: 3.2rem; height: 3.2rem; flex: none; }
.notruf__icon svg { width: 100%; height: 100%; }
.notruf h2 { margin: 0 0 .3rem; font-size: 1.45rem; letter-spacing: -.025em; }
.notruf p { margin: 0; font-size: .95rem; color: rgba(255,255,255,.88); }
@media (max-width: 55rem) {
  .notruf { grid-template-columns: 1fr; gap: 1.1rem; }
}

/* --- Ablauf ----------------------------------------------------------- */
.ablauf { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.15rem; }
.ablauf__schritt {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius); padding: 1.5rem 1.4rem;
}
.ablauf__nr {
  display: block; font-size: .78rem; font-weight: 800; letter-spacing: .08em;
  color: var(--rot); margin-bottom: .9rem;
}
.ablauf__schritt h3 { margin: 0 0 .35rem; font-size: 1.02rem; letter-spacing: -.015em; }
.ablauf__schritt p { margin: 0; font-size: .88rem; color: rgba(255,255,255,.62); }

/* --- Vorteile --------------------------------------------------------- */
.vorteile { margin-top: 2.75rem; padding-top: 2.25rem; border-top: 1px solid rgba(255,255,255,.13); }
.vorteile__titel {
  margin: 0 0 1.25rem; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .13em; color: rgba(255,255,255,.5);
}
.vorteile__liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: .7rem 2rem;
}
.vorteile__liste li { display: flex; gap: .7rem; align-items: baseline; font-size: .95rem; }
.vorteile__liste li::before { content: "✓"; color: var(--rot); font-weight: 800; flex: none; }

/* --- Kontakt ---------------------------------------------------------- */
.kontakt { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.kontakt__liste { margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.05rem; }
.kontakt__zeile-label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--grau-400);
}
.kontakt__zeile-wert { font-size: 1.05rem; font-weight: 700; margin: 0; }
.kontakt__zeile-wert a { color: inherit; text-decoration: none; }
.kontakt__zeile-wert a:hover { color: var(--rot); }
.platzhalter {
  display: inline-block; padding: .2rem .65rem; background: #FFF4E0;
  border: 1px dashed #C8860D; border-radius: 999px;
  color: #8A5C05; font-size: .82rem; font-weight: 600;
}
@media (max-width: 55rem) { .kontakt { grid-template-columns: 1fr; gap: 2rem; } }

/* WhatsApp-Link neben der Telefonnummer.
   Ohne feste Grösse skaliert das Inline-SVG auf die volle Spaltenbreite —
   das Icon war dadurch riesig. */
.wa-link {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: .5rem; padding: .5rem .95rem; border-radius: 999px;
  background: #25D366; color: #fff; text-decoration: none;
  font-size: .85rem; font-weight: 700;
}
.wa-link:hover { background: #1da851; color: #fff; }
.wa-link svg { width: 1.05rem; height: 1.05rem; flex: none; }
/* Telefon und WhatsApp untereinander statt nebeneinander */
.kontakt__zeile-wert { display: flex; flex-direction: column; align-items: flex-start; }

/* --- FAQ -------------------------------------------------------------- */
.faq {
  background: var(--weiss); border: 1px solid var(--grau-200);
  border-radius: var(--radius); padding: .95rem 1.15rem; margin-bottom: .6rem;
}
.faq summary { cursor: pointer; font-weight: 700; font-size: .95rem; }
.faq[open] { box-shadow: var(--schatten); }
.faq p { margin: .6rem 0 0; font-size: .9rem; color: var(--grau-600); }

/* --- Fuss ------------------------------------------------------------- */
.fuss { background: var(--tinte); color: rgba(255,255,255,.6); padding: 3rem 0 2rem; font-size: .85rem; }
.fuss__inner { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.fuss a { color: rgba(255,255,255,.8); }
.fuss h3 { margin: 0 0 .5rem; color: #fff; font-size: .74rem; text-transform: uppercase; letter-spacing: .13em; }
.fuss__spalte { max-width: 20rem; }
.fuss__spalte p { margin: 0; }
.fuss__unten {
  margin-top: 2.25rem; padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.12); font-size: .78rem;
}

/* --- Rechner-Einbettung ----------------------------------------------- */
.rechner-sektion { padding: clamp(3rem, 7vw, 5.5rem) 0; background: var(--grau-100); }


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

/* Seitenkopf mit Brotkrumen — eine H1 pro Seite, sichtbarer Pfad */
.seitenkopf { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.seitenkopf h1 {
  margin: 0 0 .9rem; font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 800; letter-spacing: -.035em; line-height: 1.05;
  max-width: 24ch;
}
.seitenkopf__lead {
  margin: 0; font-size: clamp(1rem, 1.3vw, 1.12rem);
  color: var(--grau-600); max-width: 44rem;
}
.brotkrumen {
  display: flex; gap: .5rem; align-items: center; margin-bottom: 1.1rem;
  font-size: .82rem; color: var(--grau-400); font-weight: 600;
}
.brotkrumen a { color: var(--grau-600); text-decoration: none; }
.brotkrumen a:hover { color: var(--rot); }

/* Aktueller Menüpunkt im Overlay */
.navkarte.is-aktuell { background: var(--grau-100); }
.navkarte.is-aktuell .navkarte__titel { color: var(--rot); }
.navkarte.is-aktuell .navkarte__knopf { background: var(--tinte); color: #fff; }

/* Preistabelle */
.tabelle-rahmen {
  overflow-x: auto; border: 1px solid var(--grau-200);
  border-radius: var(--radius); background: var(--weiss);
}
.preistabelle { width: 100%; border-collapse: collapse; min-width: 40rem; }
.preistabelle th, .preistabelle td { padding: .95rem 1.1rem; text-align: right; }
.preistabelle thead th {
  text-align: right; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--grau-600);
  border-bottom: 1px solid var(--grau-200); white-space: nowrap;
}
.preistabelle thead th:first-child,
.preistabelle tbody th { text-align: left; }
.preistabelle tbody th {
  font-weight: 700; font-size: .95rem;
  display: flex; flex-direction: column; gap: .15rem;
}
.preistabelle tbody th span {
  font-weight: 500; font-size: .8rem; color: var(--grau-400);
}
.preistabelle tbody tr + tr th,
.preistabelle tbody tr + tr td { border-top: 1px solid var(--grau-200); }
.preistabelle tbody td { font-variant-numeric: tabular-nums; font-weight: 600; }

.preisliste {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.15rem; margin-top: 1.5rem;
}
.preisliste__block {
  background: var(--weiss); border: 1px solid var(--grau-200);
  border-radius: var(--radius); padding: 1.5rem 1.4rem;
}
.preisliste__block h3 {
  margin: 0 0 1rem; font-size: .76rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--rot);
}
.preisliste dl { margin: 0; display: grid; gap: .55rem; }
.preisliste dl > div {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .92rem; padding-bottom: .55rem;
  border-bottom: 1px solid var(--grau-200);
}
.preisliste dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.preisliste dt { color: var(--grau-600); }
.preisliste dd { margin: 0; font-weight: 700; white-space: nowrap; }
.preisliste__hinweis {
  margin: 1rem 0 0; font-size: .84rem; color: var(--grau-400); line-height: 1.5;
}

/* Nur für Screenreader */
.visuell-versteckt {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Preistabelle auf schmalen Geräten als Karten statt als Tabelle */
@media (max-width: 46rem) {
  .preistabelle { min-width: 0; }
  .preistabelle thead { display: none; }
  .preistabelle, .preistabelle tbody, .preistabelle tr { display: block; }
  .preistabelle tr { padding: 1rem 1.1rem; border-top: 1px solid var(--grau-200); }
  .preistabelle tbody tr:first-child { border-top: 0; }
  .preistabelle tbody th, .preistabelle tbody td { border: 0; padding: 0; }
  .preistabelle tbody th { margin-bottom: .6rem; }
  .preistabelle tbody td {
    display: flex; justify-content: space-between; padding: .25rem 0;
    font-size: .92rem;
  }
  .preistabelle tbody td::before {
    content: attr(data-spalte); color: var(--grau-600); font-weight: 500;
  }
}


/* Platz für die Schnellzugriff-Leiste — aber NUR für den Inhalt, nicht
   für den ganzen Body: ein padding-left am body erzeugt links eine weisse
   Spalte über die volle Höhe, die bei dunklen Sektionen wie ein Fehler
   aussieht. Die Hintergründe laufen jetzt durch, nur der Text rückt ein.

   Und auch das nur im engen Bereich: ab etwa 1456 px ist der Rand neben
   dem 78-rem-Inhalt ohnehin breiter als die Leiste. */
@media (min-width: 62rem) and (max-width: 91rem) {
  .wrap { padding-left: 4.75rem; }
}

/* --- Schnellzugriff: vertikale Icon-Leiste links ----------------------
   Klebt am linken Rand und bleibt beim Scrollen stehen. Auf schmalen
   Geräten wandert sie an den unteren Rand — dort ist sie mit dem Daumen
   erreichbar und verdeckt keinen Text. */
.schnellzugriff {
  position: fixed; left: 1.25rem; top: 50%; transform: translateY(-50%);
  z-index: 45; display: flex; flex-direction: column;
  background: var(--tinte); border-radius: var(--radius);
  box-shadow: var(--schatten-tief);
  /* KEIN overflow:hidden — das würde die Beschriftung abschneiden, weil sie
     rechts neben der Leiste liegt. Die runden Ecken macht deshalb der
     erste bzw. letzte Knopf selbst. */
}

.schnellzugriff__knopf {
  position: relative; display: grid; place-items: center;
  width: 3.25rem; height: 3.25rem; color: #fff; text-decoration: none;
  transition: background .15s;
}
.schnellzugriff__knopf + .schnellzugriff__knopf {
  border-top: 1px solid rgba(255,255,255,.14);
}
/* Rundung über den ersten und letzten Knopf — kein overflow:hidden
   auf der Leiste, das würde die Hover-Beschriftung abschneiden. */
.schnellzugriff__knopf:first-child {
  border-start-start-radius: var(--radius); border-start-end-radius: var(--radius);
}
.schnellzugriff__knopf:last-child {
  border-end-start-radius: var(--radius); border-end-end-radius: var(--radius);
}
.schnellzugriff__knopf svg { width: 1.35rem; height: 1.35rem; }
.schnellzugriff__knopf:hover { background: var(--rot); }
.schnellzugriff__knopf--rot { background: var(--rot); }
.schnellzugriff__knopf--rot:hover { background: var(--rot-dunkel); }

/* Beschriftung fährt beim Zeigen nach rechts aus */
.schnellzugriff__tipp {
  position: absolute; left: calc(100% + .6rem); top: 50%;
  transform: translateY(-50%) translateX(-.4rem);
  padding: .45rem .8rem; border-radius: 999px;
  background: var(--tinte); color: #fff; white-space: nowrap;
  font-size: .8rem; font-weight: 600; pointer-events: none;
  opacity: 0; transition: opacity .16s ease, transform .16s ease;
  box-shadow: var(--schatten-tief); z-index: 1;
}
/* Kleine Spitze, die auf den Knopf zeigt */
.schnellzugriff__tipp::before {
  content: ""; position: absolute; right: 100%; top: 50%;
  transform: translateY(-50%);
  border: .38rem solid transparent; border-right-color: var(--tinte);
}
.schnellzugriff__knopf:hover .schnellzugriff__tipp,
.schnellzugriff__knopf:focus-visible .schnellzugriff__tipp {
  opacity: 1; transform: translateY(-50%) translateX(0);
}

@media (max-width: 62rem) {
  .schnellzugriff {
    left: 50%; right: auto; top: auto; bottom: 1rem;
    transform: translateX(-50%); flex-direction: row;
    border-radius: 999px;
  }
  .schnellzugriff__knopf + .schnellzugriff__knopf {
    border-top: 0; border-left: 1px solid rgba(255,255,255,.14);
  }
  /* Auf schmalen Geräten gibt es kein Zeigen — deshalb steht die
     Beschriftung dort dauerhaft unter dem Icon. */
  .schnellzugriff__knopf {
    width: auto; min-width: 4.4rem; height: auto; padding: .6rem .5rem;
    gap: .25rem; grid-auto-flow: row; align-content: center;
  }
  .schnellzugriff__tipp {
    position: static; opacity: 1; transform: none; padding: 0;
    background: none; box-shadow: none; font-size: .62rem;
    text-transform: uppercase; letter-spacing: .04em;
    color: rgba(255,255,255,.75);
  }
  .schnellzugriff__tipp::before { display: none; }
  .schnellzugriff__knopf--rot .schnellzugriff__tipp,
  .schnellzugriff__knopf:hover .schnellzugriff__tipp { color: #fff; }
}
/* Bei offenem Menü ist die Leiste im Weg */
body.menue-offen .schnellzugriff { opacity: 0; pointer-events: none; }
.schnellzugriff { transition: opacity .2s ease; }


/* --- Laufband: Einzugsgebiet ------------------------------------------
   Der Inhalt steht zweimal im Markup; die Spur läuft bis -50 % und
   springt zurück — dadurch wirkt es endlos ohne JavaScript. */
.laufband {
  position: relative; overflow: hidden;
  border-block: 1px solid var(--grau-200);
  background: var(--weiss); padding: .85rem 0;
  /* Ränder weich auslaufen lassen. mask statt Verlaufs-Overlay, damit es
     auf jedem Untergrund funktioniert. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
}
.laufband__spur {
  display: flex; width: max-content;
  animation: laufband 52s linear infinite;
}
/* Beim Zeigen anhalten, damit man in Ruhe lesen kann */
.laufband:hover .laufband__spur,
.laufband:focus-within .laufband__spur { animation-play-state: paused; }

.laufband__reihe { display: flex; align-items: center; }
.laufband__ort {
  display: inline-flex; align-items: center; gap: .6rem;
  white-space: nowrap; padding-inline: 1.4rem;
  font-size: .88rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--tinte);
}
.laufband__punkt {
  width: .4rem; height: .4rem; border-radius: 50%;
  background: var(--rot); flex: none;
}
.laufband__km {
  font-size: .78rem; font-weight: 600; color: var(--grau-400);
  font-variant-numeric: tabular-nums;
}

@keyframes laufband {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .laufband__spur { animation: none; }
  .laufband { overflow-x: auto; }
}


/* --- Leistungen: horizontal gepinnt -----------------------------------
   Die Hülle ist hoch (Höhe setzt das Skript aus der Spurbreite), die
   Bühne klebt darin. Solange sie klebt, wandert die Spur nach links —
   erst wenn die letzte Karte durch ist, scrollt die Seite weiter. */
.hpin { position: relative; }
.hpin__buehne {
  position: sticky; top: 0; min-height: 100svh;
  display: flex; align-items: center; overflow: hidden;
  padding-block: clamp(2rem, 5vw, 3.5rem);
}
.hpin__spur {
  display: flex; gap: 1.15rem; width: max-content;
  will-change: transform;
}
.hpin__spur > .leistung { width: 21rem; flex: none; }

.hpin__fortschritt {
  display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem;
}
.hpin__stand {
  font-size: .8rem; font-weight: 700; letter-spacing: .1em;
  color: var(--grau-400); text-transform: uppercase;
  font-variant-numeric: tabular-nums; flex: none;
}
.hpin__balken {
  position: relative; flex: 1; height: 4px;
  background: var(--grau-200); border-radius: 999px; overflow: hidden;
}
.hpin__balken i {
  position: absolute; left: 0; top: 0; height: 100%;
  width: 16%; background: var(--rot); border-radius: 999px;
}

/* Schmale Geräte: kein Pinning, dort wird gewischt */
@media (max-width: 62rem) {
  .hpin__buehne {
    position: static; min-height: 0; overflow-x: auto;
    scroll-snap-type: x mandatory; padding-block: 0;
  }
  .hpin__spur { transform: none !important; padding-bottom: .5rem; }
  .hpin__spur > .leistung { scroll-snap-align: start; width: 85vw; }
  .hpin { height: auto !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hpin__buehne { position: static; min-height: 0; overflow-x: auto; }
  .hpin__spur { transform: none !important; }
  .hpin { height: auto !important; }
}


/* =====================================================================
   Feinschliff: Mikrobewegungen
   Alles über CSS und Inline-SVG — keine Bibliothek, kein Ladegewicht.
   Jeder Effekt hat einen Grund; reine Zierde bleibt draussen.
   ===================================================================== */

/* --- Weiche Seitenwechsel ---------------------------------------------
   Native View Transitions: beim Klick auf einen Menüpunkt blendet die
   alte Seite aus und die neue ein, statt hart umzuschalten. Eine Regel,
   null JavaScript. Browser ohne Unterstützung ignorieren sie. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: seite-raus .22s ease both; }
::view-transition-new(root) { animation: seite-rein .28s ease both; }
@keyframes seite-raus { to { opacity: 0; transform: translateY(-6px); } }
@keyframes seite-rein { from { opacity: 0; transform: translateY(10px); } }

/* --- Einblenden beim Scrollen ----------------------------------------- */
.zeigt-sich { opacity: 0; transform: translateY(18px); }
.zeigt-sich.ist-da {
  opacity: 1; transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
/* Gestaffelt, damit Karten nacheinander kommen statt alle auf einmal */
.zeigt-sich.ist-da:nth-child(2) { transition-delay: .07s; }
.zeigt-sich.ist-da:nth-child(3) { transition-delay: .14s; }
.zeigt-sich.ist-da:nth-child(4) { transition-delay: .21s; }
.zeigt-sich.ist-da:nth-child(5) { transition-delay: .28s; }
.zeigt-sich.ist-da:nth-child(6) { transition-delay: .35s; }

/* --- Fotos atmen beim Zeigen ------------------------------------------ */
.leistung__bild, .galerie__bild, .navkarte__bild { overflow: hidden; }
.leistung__bild img, .galerie__bild img, .navkarte__bild img {
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.leistung:hover .leistung__bild img,
.galerie__bild:hover img,
.navkarte:hover .navkarte__bild img { transform: scale(1.045); }

/* --- Knöpfe geben Rückmeldung ----------------------------------------- */
.btn, .aktion, .kopf__tel, .navkarte__knopf, .wa-link,
.schnellzugriff__knopf, .stapel__knopf {
  transition: transform .12s ease, background-color .15s ease, color .15s ease;
}
.btn:active, .aktion:active, .kopf__tel:active,
.wa-link:active, .stapel__knopf:active { transform: scale(.97); }

/* Der wichtigste Knopf pulst dezent, bis er einmal gesehen wurde */
.aktion--rot { position: relative; }
.aktion--rot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(212,20,10,.45);
  animation: ruf-puls 2.8s ease-out 1.2s 3;
  pointer-events: none;
}
@keyframes ruf-puls {
  0%   { box-shadow: 0 0 0 0 rgba(212,20,10,.45); }
  70%  { box-shadow: 0 0 0 14px rgba(212,20,10,0); }
  100% { box-shadow: 0 0 0 0 rgba(212,20,10,0); }
}

/* --- Laufband-Einträge reagieren -------------------------------------- */
.laufband__ort { transition: color .15s ease; }
.laufband__ort:hover { color: var(--rot); }
.laufband__ort:hover .laufband__punkt { transform: scale(1.6); }
.laufband__punkt { transition: transform .15s ease; }

/* --- Menükarten kommen gestaffelt ------------------------------------- */
body.menue-offen .navkarte {
  animation: karte-rein .45s cubic-bezier(.16,1,.3,1) both;
}
body.menue-offen .navkarte:nth-child(1) { animation-delay: .06s; }
body.menue-offen .navkarte:nth-child(2) { animation-delay: .11s; }
body.menue-offen .navkarte:nth-child(3) { animation-delay: .16s; }
body.menue-offen .navkarte:nth-child(4) { animation-delay: .21s; }
body.menue-offen .navkarte:nth-child(5) { animation-delay: .26s; }
body.menue-offen .navkarte:nth-child(6) { animation-delay: .31s; }
@keyframes karte-rein {
  from { opacity: 0; transform: translateY(22px); }
}

/* --- Wer weniger Bewegung will, bekommt weniger ----------------------- */
@media (prefers-reduced-motion: reduce) {
  .zeigt-sich { opacity: 1; transform: none; }
  .aktion--rot::after { animation: none; }
  body.menue-offen .navkarte { animation: none; }
  .leistung:hover .leistung__bild img,
  .galerie__bild:hover img,
  .navkarte:hover .navkarte__bild img { transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}


/* --- Parallax am Hero-Bild -------------------------------------------- */
.hero__bild img { will-change: transform; }

/* --- Magnetische Knöpfe ----------------------------------------------- */
.ist-magnetisch { transition: transform .18s cubic-bezier(.16,1,.3,1); }

@media (prefers-reduced-motion: reduce) {
  .ist-magnetisch { transform: none !important; }
}


/* --- Bento: Kachelraster mit Fakten ------------------------------------
   Gemini schlug hier Flottengrösse, ISO-Zertifikate und Pünktlichkeits-
   quote vor — davon hat der Betrieb nichts. Das Format bleibt, die
   Inhalte sind auf Prüfbares beschränkt. */
.bento {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.bento__kachel {
  background: var(--weiss); border: 1px solid var(--grau-200);
  border-radius: var(--radius); padding: 1.5rem 1.4rem;
  display: flex; flex-direction: column; gap: .3rem;
  transition: transform .18s ease, box-shadow .18s ease;
}
.bento__kachel:hover { transform: translateY(-3px); box-shadow: var(--schatten); }
.bento__kachel--gross { grid-column: span 2; grid-row: span 2; }
.bento__kachel--breit { grid-column: span 2; }
.bento__kachel--rot { background: var(--rot); color: #fff; border-color: var(--rot); }
.bento__kachel--dunkel { background: var(--tinte); color: #fff; border-color: var(--tinte); }

.bento__label {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--rot);
}
.bento__kachel--rot .bento__label,
.bento__kachel--dunkel .bento__label { color: rgba(255,255,255,.7); }
.bento__zahl {
  font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 800;
  letter-spacing: -.045em; line-height: 1; margin: .35rem 0 .1rem;
  font-variant-numeric: tabular-nums;
}
.bento__kachel--gross .bento__zahl { font-size: clamp(3rem, 6vw, 5rem); }
.bento__titel { margin: 0; font-size: 1.02rem; font-weight: 800; letter-spacing: -.015em; }
.bento__text { margin: .4rem 0 0; font-size: .88rem; color: var(--grau-600); }
.bento__kachel--rot .bento__text,
.bento__kachel--dunkel .bento__text { color: rgba(255,255,255,.75); }
.bento__link {
  margin-top: auto; padding-top: .8rem; font-size: .86rem;
  font-weight: 700; text-decoration: none;
}
/* Alle 26 als Raster — die Kachel ist hoch, eine schmale Reihe liesse
   die Mitte leer. Grösse wächst mit dem verfügbaren Platz. */
.bento__wappen {
  /* Feste Spaltenzahl statt auto-fill: das machte bei breiter Kachel
     13 winzige Spalten und liess die Kachel halb leer. */
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: .5rem; margin-top: 1.5rem; align-content: start;
}
.bento__wappen img {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  border-radius: .3rem; box-shadow: 0 0 0 1px var(--grau-200);
  transition: transform .16s ease, box-shadow .16s ease;
}
.bento__wappen img:hover {
  transform: scale(1.12); box-shadow: 0 0 0 2px var(--rot); position: relative; z-index: 1;
}

@media (max-width: 62rem) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__wappen { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 38rem) {
  .bento { grid-template-columns: 1fr; }
  .bento__wappen { grid-template-columns: repeat(7, 1fr); gap: .35rem; }
  .bento__kachel--gross, .bento__kachel--breit { grid-column: span 1; grid-row: auto; }
}

/* --- Fahrzeugschau mit Hotspots --------------------------------------- */
.schau { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--weiss); }
.schau__buehne {
  position: relative; max-width: 52rem; margin: 0 auto;
  color: var(--grau-900);
}
.schau__bild { width: 100%; height: auto; display: block; }

/* Punkte liegen als Buttons ÜBER dem Foto. Die Prozentwerte beziehen
   sich auf die Bühne, und die hat exakt das Seitenverhältnis des Bildes —
   dadurch sitzen sie bei jeder Grösse an derselben Stelle im Motiv. */
.schau__bild {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius); box-shadow: var(--schatten);
}
.schau__punkt {
  position: absolute; transform: translate(-50%, -50%);
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: var(--rot); color: #fff; border: 2px solid rgba(255,255,255,.9);
  cursor: pointer; font: inherit; font-size: .85rem; font-weight: 800;
  display: grid; place-items: center; padding: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.35), 0 0 0 0 rgba(212,20,10,.5);
  animation: schau-puls 2.6s ease-out infinite;
}
.schau__punkt:hover, .schau__punkt.ist-offen {
  background: var(--tinte); animation: none;
  transform: translate(-50%,-50%) scale(1.14);
}
.schau__punkt:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@keyframes schau-puls {
  0%   { box-shadow: 0 2px 8px rgba(0,0,0,.35), 0 0 0 0 rgba(212,20,10,.5); }
  70%  { box-shadow: 0 2px 8px rgba(0,0,0,.35), 0 0 0 14px rgba(212,20,10,0); }
  100% { box-shadow: 0 2px 8px rgba(0,0,0,.35), 0 0 0 0 rgba(212,20,10,0); }
}

.schau__karte {
  position: absolute; z-index: 5; width: min(19rem, 78vw);
  background: var(--tinte); color: #fff; border-radius: var(--radius);
  padding: 1.1rem 1.2rem; box-shadow: var(--schatten-tief);
}
.schau__karte[hidden] { display: none; }
.schau__karte-zu {
  position: absolute; top: .5rem; right: .55rem; width: 1.6rem; height: 1.6rem;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff;
  cursor: pointer; font-size: .75rem; line-height: 1;
}
.schau__karte-zu:hover { background: var(--rot); }
.schau__karte-titel {
  display: block; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.6);
}
.schau__karte-wert {
  display: block; font-size: 1.3rem; font-weight: 800;
  letter-spacing: -.02em; margin: .15rem 0 .45rem;
}
.schau__karte-text { margin: 0; font-size: .88rem; color: rgba(255,255,255,.78); }

.schau__fuss {
  max-width: 44rem; margin: 2rem auto 0; text-align: center;
  font-size: .88rem; color: var(--grau-600);
}

@media (max-width: 62rem) {
  /* Ab hier klebt die Schnellzugriff-Leiste unten am Bildschirm — eine
     frei positionierte Karte läge darunter. Deshalb fest unter die Grafik. */
  .schau__karte {
    /* relative, nicht static: der Schliessen-Knopf ist absolut positioniert
       und würde sich sonst auf die Bühne beziehen — er klebte oben rechts
       im Foto statt in der Karte. */
    position: relative; width: auto; margin-top: 1.25rem;
    left: auto !important; right: auto !important; top: auto !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .schau__punkt { animation: none; }
  .bento__kachel:hover { transform: none; }
}


/* --- Wenn GSAP übernimmt --------------------------------------------
   ScrollTrigger pinnt selbst und braucht die Bühne im normalen Fluss.
   Ohne das läge sticky-Pinning und GSAP-Pinning übereinander. */
.gsap-aktiv .hpin { height: auto !important; }
.gsap-aktiv .hpin__buehne { position: static; }
.gsap-aktiv .zeigt-sich { opacity: 1; transform: none; }


/* --- Ortsseiten -------------------------------------------------------- */
.stadt__oben {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start; margin-bottom: 2.5rem;
}
.stadt__text p { margin: 0 0 1rem; font-size: 1rem; color: var(--grau-600); }
.stadt__einleitung { font-size: 1.08rem !important; color: var(--tinte) !important; }
.stadt__eckdaten {
  background: var(--tinte); color: #fff; border-radius: var(--radius-gross);
  padding: 1.6rem 1.5rem;
}
.stadt__eckdaten-titel {
  margin: 0 0 1rem; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .12em; color: rgba(255,255,255,.6);
}
.stadt__eckdaten dl { margin: 0 0 1.25rem; display: grid; gap: .6rem; }
.stadt__eckdaten dl > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-bottom: .6rem; border-bottom: 1px solid rgba(255,255,255,.14);
}
.stadt__eckdaten dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.stadt__eckdaten dt { font-size: .84rem; color: rgba(255,255,255,.6); }
.stadt__eckdaten dd {
  margin: 0; font-weight: 800; font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.stadt__eckdaten .btn { width: 100%; text-align: center; }
.stadt__eckdaten-fuss {
  margin: .9rem 0 0; font-size: .78rem; color: rgba(255,255,255,.5); line-height: 1.5;
}
.stadt__h2 {
  margin: 2.5rem 0 1rem; font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 800; letter-spacing: -.025em;
}
.stadt__hinweis { margin: 1rem 0 0; font-size: .86rem; color: var(--grau-600); }
.stadt__aktionen { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 2rem; }
.btn--dunkel { background: var(--tinte); color: #fff; border-radius: 999px; }
.btn--dunkel:hover { background: var(--rot); }

@media (max-width: 58rem) { .stadt__oben { grid-template-columns: 1fr; } }

/* --- Einsatzgebiete ---------------------------------------------------- */
.gebiete {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .85rem;
}
.gebiet {
  display: flex; flex-direction: column; gap: .2rem;
  padding: 1.25rem 1.25rem 1.35rem; background: var(--weiss);
  border: 1px solid var(--grau-200); border-radius: var(--radius);
  text-decoration: none; color: inherit;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.gebiet:hover {
  transform: translateY(-3px); border-color: var(--rot); box-shadow: var(--schatten);
}
.gebiet--heimat { border-color: var(--rot); border-width: 2px; padding: calc(1.25rem - 1px); }
.gebiet__name { font-size: 1.08rem; font-weight: 800; letter-spacing: -.02em; }
.gebiet__wert { font-size: .84rem; color: var(--grau-600); font-variant-numeric: tabular-nums; }
.gebiet__zusatz { font-size: .82rem; font-weight: 700; color: var(--rot); margin-top: .25rem; }
.gebiete__rest {
  margin: 1.5rem 0 0; font-size: .92rem; color: var(--grau-600);
  max-width: 52rem; line-height: 1.7;
}

/* --- Partner (Platzhalter) --------------------------------------------- */
.partner {
  margin-top: 2.5rem; padding-top: 2rem;
  border-top: 1px solid var(--grau-200); text-align: center;
}
.partner__titel {
  display: block; font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--grau-400); margin-bottom: 1rem;
}
.partner__reihe {
  display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center;
}
.partner__platz {
  padding: .9rem 1.6rem; border-radius: var(--radius);
  border: 1px dashed #C8860D; background: #FFF4E0; color: #8A5C05;
  font-size: .88rem; font-weight: 600;
}
.partner__hinweis {
  margin: 1rem auto 0; max-width: 36rem;
  font-size: .8rem; color: var(--grau-400);
}


/* --- Fliesstext für die lokale Suche ---------------------------------- */



/* --- Kurze Anfrage: drei Wege, dieselben Daten -------------------------- */
.anfrage {
  max-width: 44rem; background: var(--weiss); border: 1px solid var(--grau-200);
  border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2rem);
  display: grid; gap: 1rem;
}
.anfrage__felder { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.anfrage__feld { display: grid; gap: .35rem; }
.anfrage__label {
  font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--grau-600);
}
.anfrage input, .anfrage textarea {
  width: 100%; padding: .75rem .9rem; font: inherit; font-size: .95rem;
  border: 1px solid var(--grau-200); border-radius: .7rem;
  background: var(--weiss); color: var(--tinte);
}
.anfrage textarea { resize: vertical; min-height: 5rem; }
.anfrage input:focus-visible, .anfrage textarea:focus-visible {
  outline: 2px solid var(--rot); outline-offset: 1px; border-color: var(--rot);
}

.anfrage__wege { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .3rem; }
.anfrage__weg {
  display: inline-flex; align-items: center; gap: .55rem; cursor: pointer;
  padding: .8rem 1.25rem; border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: .9rem; border: 1px solid transparent;
  transition: transform .12s ease, background-color .15s ease;
}
.anfrage__weg svg { width: 1.15rem; height: 1.15rem; flex: none; }
.anfrage__weg:active { transform: scale(.97); }
.anfrage__weg--wa   { background: #25D366; color: #fff; }
.anfrage__weg--wa:hover { background: #1da851; }
.anfrage__weg--mail { background: var(--tinte); color: #fff; }
.anfrage__weg--mail:hover { background: var(--rot); }
.anfrage__weg--tel  { background: var(--grau-100); color: var(--tinte); border-color: var(--grau-200); }
.anfrage__weg--tel:hover { background: var(--rot); color: #fff; border-color: var(--rot); }
.anfrage__hinweis { margin: 0; font-size: .8rem; color: var(--grau-400); }
.anfrage__hinweis a { color: var(--grau-600); }

@media (max-width: 40rem) {
  .anfrage__felder { grid-template-columns: 1fr; }
  .anfrage__weg { width: 100%; justify-content: center; }
}

/* Dieselben Wege im Rechner */
.ptb__wege {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ptb-grau-300);
}
.ptb__wege-titel {
  width: 100%; font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ptb-grau-600); margin-bottom: .2rem;
}
.ptb__weg {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  padding: .65rem 1.1rem; border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: .85rem; color: #fff;
}
.ptb__weg svg { width: 1.05rem; height: 1.05rem; flex: none; }
.ptb__weg--wa { background: #25D366; }
.ptb__weg--wa:hover { background: #1da851; }
.ptb__weg--mail { background: var(--ptb-tinte); }
.ptb__weg--mail:hover { background: var(--ptb-rot); }

/* --- Rechtsseiten: Fliesstext ----------------------------------------- */
/* Lesebreite auf den Inhalt begrenzen, nicht auf den Container:
   sonst zentriert sich der ganze Block und steht versetzt zu allen
   anderen Abschnitten. */
.fliesstext { max-width: none; }
.fliesstext > * { max-width: 46rem; }
.fliesstext h2 {
  margin: 2.25rem 0 .75rem; font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 800; letter-spacing: -.02em;
}
.fliesstext h2:first-child { margin-top: 0; }
.fliesstext p { margin: 0 0 1rem; color: var(--grau-600); }
.rechtsliste { display: grid; gap: .8rem; margin: 0 0 1rem; }
.rechtsliste > div {
  display: grid; grid-template-columns: 12rem 1fr; gap: 1rem;
  padding-bottom: .8rem; border-bottom: 1px solid var(--grau-200);
}
.rechtsliste dt { font-weight: 700; font-size: .92rem; }
.rechtsliste dd { margin: 0; color: var(--grau-600); }
.rechtsaufzaehlung { margin: 0 0 1rem; padding-left: 1.1rem; color: var(--grau-600); }
.rechtsaufzaehlung li { margin-bottom: .4rem; }
@media (max-width: 40rem) {
  .rechtsliste > div { grid-template-columns: 1fr; gap: .2rem; }
}

/* --- Fusszeile: echte Navigation --------------------------------------- */
.fuss__nav { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin-top: .6rem; }
.fuss__nav a { color: rgba(255,255,255,.75); text-decoration: none; font-size: .85rem; }
.fuss__nav a:hover { color: #fff; text-decoration: underline; }

/* --- Erreichbarkeit ----------------------------------------------------- */
.zeiten {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .8rem; border-radius: 999px;
  background: rgba(14,122,60,.1); color: var(--gruen);
  font-size: .82rem; font-weight: 700;
}
.zeiten__punkt {
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--gruen);
  box-shadow: 0 0 0 0 rgba(14,122,60,.5); animation: zeiten-puls 2.4s ease-out infinite;
}
@keyframes zeiten-puls {
  0% { box-shadow: 0 0 0 0 rgba(14,122,60,.5); }
  70% { box-shadow: 0 0 0 8px rgba(14,122,60,0); }
  100% { box-shadow: 0 0 0 0 rgba(14,122,60,0); }
}

/* --- Tastaturbedienung -------------------------------------------------- */
:focus-visible { outline: 3px solid var(--rot); outline-offset: 2px; border-radius: 4px; }
.sprungmarke {
  position: absolute; left: 50%; top: -100%; transform: translateX(-50%);
  z-index: 200; padding: .8rem 1.4rem; background: var(--tinte); color: #fff;
  border-radius: 0 0 .8rem .8rem; font-weight: 700; text-decoration: none;
  transition: top .18s ease;
}
.sprungmarke:focus { top: 0; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .zeiten__punkt { animation: none; }
}


/* =====================================================================
   Bausteine nach abschleppdienst-stern.de
   Aufbau übernommen, Farbe und Inhalte bleiben unsere.
   ===================================================================== */

/* --- Vorteilsliste im Hero: zwei Spalten mit Häkchen ------------------- */
.vorteilsliste {
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  display: grid; grid-template-columns: repeat(2, auto); gap: .6rem 1.75rem;
  justify-content: start;
}
.vorteilsliste li {
  display: flex; align-items: center; gap: .55rem;
  font-size: .95rem; font-weight: 600; color: var(--grau-600);
}
.vorteilsliste li::before {
  content: ""; flex: none; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--rot);
  /* Häkchen als Maske — kein zusätzliches Bild nötig */
  -webkit-mask: no-repeat center/.75rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
          mask: no-repeat center/.75rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* --- Die beiden grossen Blöcke: anrufen und rechnen -------------------- */
.rufblock { display: grid; gap: .7rem; max-width: 30rem; }
.rufblock__haupt, .rufblock__zweit {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.05rem 1.35rem; border-radius: var(--radius);
  text-decoration: none; transition: transform .14s ease, background-color .16s ease;
}
.rufblock__haupt { background: var(--tinte); color: #fff; }
.rufblock__haupt:hover { background: var(--rot); transform: translateY(-2px); }
.rufblock__zweit { background: var(--rot); color: #fff; }
.rufblock__zweit:hover { background: var(--rot-dunkel); transform: translateY(-2px); }
.rufblock__icon {
  display: grid; place-items: center; width: 2.9rem; height: 2.9rem; flex: none;
  border-radius: 50%; background: rgba(255,255,255,.14);
}
.rufblock__icon svg { width: 1.35rem; height: 1.35rem; }
.rufblock__text { display: flex; flex-direction: column; line-height: 1.25; }
.rufblock__text strong {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 800;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.rufblock__text span { font-size: .82rem; opacity: .78; }

@media (max-width: 30rem) {
  .vorteilsliste { grid-template-columns: 1fr; }
}

/* --- WhatsApp-Verlauf --------------------------------------------------- */
.chat__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
.chat__punkte { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .5rem; }
.chat__punkte li {
  display: flex; gap: .6rem; font-size: .93rem; color: var(--grau-600);
}
.chat__punkte li::before { content: "▪"; color: var(--rot); flex: none; }
.btn--wa {
  display: inline-flex; align-items: center; gap: .55rem;
  background: #25D366; color: #fff;
}
.btn--wa:hover { background: #1da851; }
.btn--wa svg { width: 1.15rem; height: 1.15rem; }

.chat__fenster {
  background: #ECE5DD; border-radius: var(--radius-gross);
  box-shadow: var(--schatten-tief); overflow: hidden;
  max-width: 26rem; margin-inline: auto; width: 100%;
}
.chat__kopf {
  display: flex; align-items: center; gap: .7rem;
  padding: .8rem 1rem; background: #075E54; color: #fff;
}
.chat__avatar {
  display: grid; place-items: center; width: 2.3rem; height: 2.3rem;
  border-radius: 50%; background: var(--rot); font-weight: 800; font-size: .8rem;
}
.chat__wer { display: flex; flex-direction: column; line-height: 1.2; }
.chat__wer strong { font-size: .92rem; }
.chat__status { font-size: .72rem; opacity: .75; }

.chat__verlauf { padding: 1rem; display: grid; gap: .55rem; }
.chat__blase {
  position: relative; max-width: 85%; padding: .6rem 2.9rem .6rem .8rem;
  border-radius: .8rem; font-size: .88rem; line-height: 1.45;
  box-shadow: 0 1px 1px rgba(0,0,0,.08);
}
.chat__blase--sie { justify-self: start; background: #fff; }
.chat__blase--wir { justify-self: end; background: #DCF8C6; }
.chat__zeit {
  position: absolute; right: .6rem; bottom: .45rem;
  font-size: .64rem; color: rgba(0,0,0,.42);
}
.chat__hinweis {
  margin: 0; padding: .5rem 1rem .9rem; text-align: center;
  font-size: .72rem; color: rgba(0,0,0,.45);
}

@media (max-width: 58rem) {
  .chat__grid { grid-template-columns: 1fr; }
}


/* --- Leistungen als ruhiges Raster (Startseite) ------------------------
   Die gepinnte Fassung mit horizontalem Durchlauf steht auf leistungen.html. */
.leistungsraster {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem;
  width: auto !important; transform: none !important;
}
.leistungsraster > .leistung { width: auto; }
@media (max-width: 62rem) { .leistungsraster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .leistungsraster { grid-template-columns: 1fr; } }


/* --- Leistungskarten im Stern-Stil ------------------------------------
   Wie bei abschleppdienst-stern.de: hellgrauer Kasten, Bild oben randlos
   darin, Text darunter, unten links ein unterstrichener Link und rechts
   ein runder Pfeilknopf. Beim Zeigen wird der Kasten weiss und hebt sich. */
.leistungsraster > .leistung,
.hpin__spur > .leistung {
  position: relative;
  background: var(--grau-100);
  border: 0;
  border-radius: var(--radius-gross);
  overflow: hidden;
  padding: 0;
  transition: background-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.leistungsraster > .leistung:hover,
.hpin__spur > .leistung:hover {
  background: var(--weiss);
  box-shadow: var(--schatten-tief);
  transform: translateY(-3px);
}

/* Bild randlos oben im Kasten */
.leistungsraster > .leistung .leistung__bild,
.hpin__spur > .leistung .leistung__bild {
  position: relative;
  border-radius: 0; border-bottom: 0; box-shadow: none;
  margin: 0; overflow: hidden;
}
.leistungsraster > .leistung .leistung__bild img,
.hpin__spur > .leistung .leistung__bild img {
  aspect-ratio: 4 / 3; width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.leistungsraster > .leistung:hover .leistung__bild img,
.hpin__spur > .leistung:hover .leistung__bild img { transform: scale(1.04); }

/* Icon-Karten: gleiche Fläche, Icon mittig */
.leistungsraster > .leistung .leistung__icon,
.hpin__spur > .leistung .leistung__icon {
  width: 100% !important; height: auto !important; aspect-ratio: 4 / 3;
  margin: 0; padding: 0; border-radius: 0; box-shadow: none;
  display: grid; place-items: center;
  background: var(--grau-200); color: var(--rot);
}
.leistungsraster > .leistung .leistung__icon svg,
.hpin__spur > .leistung .leistung__icon svg { width: 3.8rem; height: 3.8rem; }

/* Textbereich */
.leistungsraster > .leistung .leistung__text,
.hpin__spur > .leistung .leistung__text {
  padding: 1.5rem 1.6rem 1.6rem; gap: .6rem; flex: 1;
}
/* Titel wie bei Stern: gross, aber nicht fett */
.leistungsraster > .leistung h3,
.hpin__spur > .leistung h3 {
  font-size: 1.4rem; font-weight: 600; letter-spacing: -.02em; margin: 0;
}
/* Text auf drei Zeilen begrenzt, damit alle Karten gleich wirken */
.leistungsraster > .leistung .leistung__text > p,
.hpin__spur > .leistung .leistung__text > p {
  font-size: .93rem; line-height: 1.6; color: var(--grau-600); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Aufzählung entfällt in dieser Ansicht — Stern hat sie nicht, und sie
   liess die erste Karte aus der Reihe fallen. */
.leistungsraster > .leistung .leistung__liste,
.hpin__spur > .leistung .leistung__liste { display: none; }

/* Badge im Bild, unten links */
.leistungsraster > .leistung .leistung__bild .leistung__tag,
.hpin__spur > .leistung .leistung__bild .leistung__tag {
  position: absolute; left: .9rem; bottom: .9rem; z-index: 2;
  background: rgba(255,255,255,.94); color: var(--tinte);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(22,24,29,.18);
  padding: .3rem .7rem; border-radius: 999px;
  font-size: .66rem; letter-spacing: .07em;
}
.leistung--haupt .leistung__tag { background: var(--rot) !important; color: #fff !important; }

/* Fusszeile: Link links, runder Pfeil rechts */
.leistung__mehr {
  margin-top: auto; padding-top: 1.1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: .92rem; font-weight: 600; color: var(--tinte);
  text-decoration: none;
}
.leistung__mehr span { text-decoration: underline; text-underline-offset: 4px; }
.leistung__mehr::after {
  content: "→"; flex: none;
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: 50%; border: 1.5px solid var(--rot); color: var(--rot);
  font-size: 1.05rem; line-height: 1;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.leistungsraster > .leistung:hover .leistung__mehr::after,
.hpin__spur > .leistung:hover .leistung__mehr::after {
  background: var(--rot); color: #fff; transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .leistungsraster > .leistung:hover,
  .hpin__spur > .leistung:hover { transform: none; }
  .leistungsraster > .leistung:hover .leistung__bild img,
  .hpin__spur > .leistung:hover .leistung__bild img { transform: none; }
}


/* --- Zentrierter Sektionskopf (Stern-Vorbild) -------------------------- */
.sektion__kopf--mitte { text-align: center; margin-inline: auto; max-width: 46rem; }
.sektion__kopf--mitte h2 em { font-style: normal; color: var(--rot); }

/* --- FAQ zweispaltig mit Aufklappern ----------------------------------- */
.faq-raster {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 3.5rem;
}
.faq2 { border-bottom: 1px solid var(--grau-200); }
.faq2 > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 0; cursor: pointer; list-style: none;
  font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
  transition: color .15s ease;
}
.faq2 > summary::-webkit-details-marker { display: none; }
.faq2 > summary::after {
  content: ""; flex: none; width: .7rem; height: .7rem;
  border-right: 2px solid var(--rot); border-bottom: 2px solid var(--rot);
  transform: rotate(45deg) translate(-2px,-2px);
  transition: transform .22s ease;
}
.faq2[open] > summary::after { transform: rotate(-135deg) translate(-2px,-2px); }
.faq2 > summary:hover { color: var(--rot); }
.faq2 > p {
  margin: 0; padding: 0 0 1.15rem; font-size: .93rem;
  line-height: 1.65; color: var(--grau-600); max-width: 34rem;
}
@media (max-width: 58rem) { .faq-raster { grid-template-columns: 1fr; gap: 0; } }

/* --- Ratgeber-Karten ---------------------------------------------------- */
.ratgeber {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(17rem, 1fr);
  gap: 1.15rem; overflow-x: auto;
  scroll-snap-type: x mandatory; padding-bottom: .5rem;
  /* Ränder weich auslaufen lassen, damit die vierte Karte angeschnitten wirkt */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent);
}
.rat {
  scroll-snap-align: start;
  background: var(--grau-100); border-radius: var(--radius-gross);
  overflow: hidden; display: flex; flex-direction: column;
  transition: background-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.rat:hover { background: var(--weiss); box-shadow: var(--schatten-tief); transform: translateY(-3px); }
.rat__bild { display: block; overflow: hidden; }
.rat__bild img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.rat:hover .rat__bild img { transform: scale(1.04); }
.rat__text { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.rat__text h3 {
  margin: 0; font-size: 1.12rem; font-weight: 700; letter-spacing: -.015em;
  line-height: 1.3; transition: color .15s ease;
}
.rat:hover .rat__text h3 { color: var(--rot); }
.rat__text p {
  margin: 0; font-size: .9rem; line-height: 1.6; color: var(--grau-600);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.rat__knopf {
  align-self: flex-start; margin-top: auto;
  padding: .6rem 1.15rem; border-radius: .7rem;
  background: var(--tinte); color: #fff; text-decoration: none;
  font-size: .85rem; font-weight: 700;
  transition: background-color .16s ease;
}
.rat:hover .rat__knopf { background: var(--rot); }
.rat__fuss { font-size: .78rem; color: var(--grau-400); }
.ratgeber__hinweis { margin: 1.25rem 0 0; text-align: center; }

@media (max-width: 40rem) {
  .ratgeber { grid-auto-columns: 85vw; }
}
@media (prefers-reduced-motion: reduce) {
  .rat:hover { transform: none; }
  .rat:hover .rat__bild img { transform: none; }
}


/* --- Einsatzgebiete: Liste links, Distanzkarte rechts -------------------
   Stern zeigt an dieser Stelle eine Deutschlandkarte. Ein grob gezeichneter
   Schweizer Umriss fällt jedem Einheimischen sofort als falsch auf — hier
   stehen deshalb echte Strassendistanzen als Ringe um Bern. */
.gebiete__grid {
  display: grid; grid-template-columns: 1fr .85fr;
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
.gebiete__karte { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
/* Schweizer Karte: dunkle Flächen, helle Kantonsgrenzen — wie Sterns
   Deutschlandkarte. Umriss von Wikimedia Commons (gemeinfrei), auf die
   26 Kantonspfade reduziert und Koordinaten gerundet. */
.schweiz { width: 100%; max-width: 30rem; height: auto; display: block; }
.schweiz__kanton {
  fill: var(--tinte); stroke: var(--weiss); stroke-width: 1.6;
  stroke-linejoin: round; transition: fill .18s ease;
}
.schweiz__kanton:hover,
.schweiz__kanton.ist-gewaehlt { fill: var(--grau-900); cursor: pointer; }
.schweiz__kanton:focus-visible { outline: 3px solid var(--rot); outline-offset: 2px; }
.schweiz__kanton--heimat { fill: var(--rot); }
.schweiz__kanton--heimat:hover,
.schweiz__kanton--heimat.ist-gewaehlt { fill: var(--rot-dunkel); }

/* Anzeigefeld unter der Karte */
.schweiz__anzeige {
  min-height: 4.2rem; width: 100%; max-width: 30rem;
  display: grid; place-items: center; text-align: center;
  padding: .85rem 1rem; border-radius: var(--radius);
  background: var(--weiss); border: 1px solid var(--grau-200);
}
.schweiz__anzeige-leer { font-size: .86rem; color: var(--grau-400); }
.schweiz__anzeige-inhalt { display: grid; gap: .15rem; }
.schweiz__anzeige-inhalt[hidden] { display: none; }
.schweiz__anzeige-inhalt strong {
  font-size: 1.05rem; font-weight: 800; letter-spacing: -.015em;
}
.schweiz__anzeige-inhalt > span { font-size: .84rem; color: var(--grau-600); }
.schweiz__anzeige-preis { font-weight: 700; color: var(--rot) !important; }
.schweiz__anzeige-preis b { font-variant-numeric: tabular-nums; }
.schweiz__anzeige-auto {
  font-size: .78rem !important; color: var(--grau-600) !important; font-weight: 600;
}
.schweiz__anzeige-auto b { font-variant-numeric: tabular-nums; color: var(--tinte); }
.gebiete__karte-hinweis { margin: 0; font-size: .78rem; color: var(--grau-400); }

@media (max-width: 62rem) {
  .gebiete__grid { grid-template-columns: 1fr; }
  .gebiete__karte { order: -1; }
}