/* ============================================================
   SECTIONS — Styles der einzelnen Blöcke
   1. hero + logo-bar ....... Codex-V2 (ein Foto statt drei)
   2. prinzip ............... Codex-V2 «Worauf du dich verlassen kannst»
   3. standorte ............. template (Leaflet) + neue Mechanik
   4. leistungen ............ Codex-V2 «Wir übernehmen den Rest»
   5. team-trust ............ template (Collage + Stimmen), neuer Text
   6. cta ................... Codex-V2 «Bereit, mit uns zu wachsen?»
   7. gruppe ................ krieger-gruppe-filter-karussell

   ------------------------------------------------------------
   BILDFOKUS. Die echten Fotos vom Shooting sind 3:2, die Slots sind
   teilweise hochkant (hero, Collage, Avatare). Ein zentrierter Crop
   schneidet Menschen an, deshalb liest jeder Fotoslot seine
   object-position aus --pos:

       <img style="--pos: 62% 30%" …>

   Der Wert steht direkt am Bild, weil er zum Bild gehört und nicht
   zum Block. Ohne --pos greift ein sinnvoller Default.
   ============================================================ */

/* ============================================================
   1. HERO
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
}

/* Zusätzliche Hintergrundebene hinter Text + Fotokarte: der Fuhrpark
   bei Nacht als Vollflächen-Foto, kräftig abgedunkelt. Eigenes <img>
   statt background-image aus demselben Grund wie bei .hero__photo —
   srcset/sizes bleiben nutzbar.                                     */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Auf schmalen Screens schneidet cover die Gesichter rechts im Bild ab —
     Anker weiter rechts holt sie zurück ins Bild. Ab 1024px passt die Mitte. */
  object-position: 82% 42%;
}

@media (min-width: 1024px) {
  .hero__bg-photo {
    object-position: 50% 50%;
  }
}

/* Мягкий переход: тёмно слева (там лежит текст), направо — прозрачно,
   чтобы оригинальный фон был виден без затемнения. */
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(10, 8, 8, 0.86) 0%,
    rgba(10, 8, 8, 0.72) 30%,
    rgba(10, 8, 8, 0.32) 58%,
    rgba(10, 8, 8, 0) 82%);
  pointer-events: none;
}

.hero > .container {
  position: relative;
  z-index: 1;
}

.hero__grid {
  display: grid;
  align-items: stretch;
  min-height: 84vh;
}

@media (min-width: 1024px) {
  .hero__grid {
    min-height: 86vh;
  }
}

.hero__copy {
  padding-block: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 1024px) {
  .hero__copy {
    padding-block: 84px;
    max-width: 640px;
  }
}

.hero__title {
  max-width: 720px;
  font-size: clamp(2.25rem, 5.4vw, 4rem);
}

.hero__lead {
  margin-top: 24px;
  max-width: 560px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
}

@media (min-width: 1024px) {
  .hero__lead { font-size: 1.125rem; }
}

.hero__actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero__stats {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 520px;
}

.hero__stat-k {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.hero__stat-v {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.25;
  color: var(--faint);
}

.hero__badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.hero__trust {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 85%;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-float);
  color: #111;
  font-size: 13px;
  line-height: 1.35;
}

.hero__trust-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.hero__trust-title .star { color: var(--accent); }

.hero__trust-sub {
  font-size: 12px;
  color: rgba(17, 17, 17, 0.6);
}

.hero__arrow {
  display: none;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #111;
  box-shadow: var(--shadow-float);
}

@media (min-width: 640px) {
  .hero__arrow { display: grid; }
}

@media (max-width: 1023px) {
  .hero--bg .hero__badge { display: none; }

  .hero--bg .hero__grid { min-height: min(78vh, 620px); }

  /* Auf schmalen Screens ist rechts kein Platz für den unabgedunkelten
     Bildausschnitt — der Verlauf deckt hier fast die ganze Breite ab. */
  .hero--bg .hero__bg::after {
    background: linear-gradient(to right,
      rgba(10, 8, 8, 0.9) 0%,
      rgba(10, 8, 8, 0.8) 55%,
      rgba(10, 8, 8, 0.5) 100%);
  }
}

/* --- Полоса логотипов ---
   Marken-Namen sind reiner Text mit variabler Breite, keine fest
   bemessenen Logo-Bilder — bei 6 Stück lässt sich eine feste Zeile auf
   schmalen Screens nie ohne Umbruch garantieren. Ein Umbruch mit
   justify-content: center riss aber ein einzelnes letztes Wort
   (z. B. "Bauformat") isoliert in die Mitte — sah wie ein Fehler aus.
   Lösung: die Liste läuft als endlose Ticker-Zeile (Marquee), also nie
   ein Umbruch, nie ein verirrtes Wort. Die Bildunterschrift steht dafür
   immer sichtbar und zentriert ÜBER der Zeile statt seitlich daneben. */
.logo-bar {
  border-block: 1px solid var(--border);
  background: var(--bg);
}

.logo-bar__inner {
  padding-block: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.logo-bar__label {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.72;
  text-align: center;
  white-space: nowrap;
}

.logo-bar__list {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* .logo-bar__track enthält die 6 Marken UND (via .logo-bar__dup,
   display: contents — zählt also als eigene Flex-Items) eine exakte
   Kopie davon. So ist die Track-Breite genau doppelt so groß wie eine
   Runde der Liste, und translateX(-50%) hört exakt da auf, wo die Kopie
   optisch die Originalzeile fortsetzt — nahtlose Endlosschleife. */
.logo-bar__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  gap: clamp(28px, 6vw, 56px);
  padding-inline: clamp(28px, 6vw, 56px);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  opacity: 0.45;
  animation: logo-bar-scroll 40s linear infinite;
  animation-timing-function: linear;
  will-change: transform;
}

.logo-bar__dup {
  display: contents;
}

.logo-bar__track span { flex-shrink: 0; white-space: nowrap; }

.logo-bar__list:hover .logo-bar__track { animation-play-state: paused; }

@keyframes logo-bar-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-66.66%);
  }
}

@media (max-width: 480px) {
  .logo-bar__track { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-bar__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    padding-inline: 0;
  }

  .logo-bar__list { overflow: visible; mask-image: none; -webkit-mask-image: none; }

  /* Ohne Animation läuft die Kopie nicht ins Sichtfeld — sie wird
     einfach ausgeblendet statt gescrollt. */
  .logo-bar__dup { display: none; }
}

@media (max-width: 768px) {
  .show-desktop { display: none; }
}

/* ============================================================
   2. PRINZIP — «Worauf du dich bei uns verlassen kannst.»
   ============================================================ */
.prinzip {
  background: var(--bg);
  color: var(--ink);
}

.prinzip__grid {
  display: grid;
  gap: 40px;
}

@media (min-width: 1024px) {
  .prinzip__grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 64px;
    align-items: start;
  }
}

.prinzip__aside {
  align-self: start;
}

@media (min-width: 1024px) {
  .prinzip__aside {
    position: sticky;
    top: calc(var(--header-h) + 20px);
  }
}

.prinzip__title {
  font-size: clamp(2.125rem, 4.2vw, 3.25rem);
}

/* «Das Translogistikprinzip» stand zuerst als dünne Zeile unter der
   Überschrift und wirkte dort wie ein vergessener Rest. Jetzt sitzt es
   als fette Augenbraue darüber — mit rotem Punkt, wie die übrigen
   Meta-Zeilen der Seite. */
.prinzip__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.prinzip__lead {
  margin-top: 18px;
  max-width: 420px;
  color: var(--muted);
}

.prinzip__lead strong {
  font-weight: 700;
  color: var(--ink);
}

/* Bild unter dem Text: die linke Spalte ist auf dem Desktop sticky und
   blieb unter dem kurzen Lead sonst zur Hälfte leer. */
.prinzip__figure {
  position: relative;
  margin-top: 28px;
  max-width: 420px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.prinzip__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}

.prinzip__figure figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 26px 18px 14px;
  background: linear-gradient(to top, rgba(6, 6, 6, 0.86), transparent);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 1023px) {
  .prinzip__figure { max-width: none; }
}

/* Nummer + Emoji + Titel in einer Zeile: mit drei Elementen wird der
   Standardabstand von 16px zu breit, der Titel rutscht sonst auf
   schmalen Screens in die zweite Zeile. */
.prinzip .accordion__label { gap: 12px; }

/* ============================================================
   3. STANDORTE — карта + список одинаковой высоты
   ============================================================ */
.standorte {
  position: relative;
  overflow: hidden;
}

.standorte__head {
  margin-bottom: 32px;
}

.standorte__title {
  font-size: clamp(2rem, 3.8vw, 3rem);
}

/* --- Сетка: строка 1 = панель поиска / заголовок списка
       строка 2 = карта / список (обе тянутся на одну высоту) --- */
.locations {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    'search'
    'map'
    'listhead'
    'list';
  gap: 12px;
}

@media (min-width: 1024px) {
  .locations {
    grid-template-columns: 1.12fr 0.88fr;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      'search listhead'
      'map    list';
    column-gap: 32px;
    row-gap: 14px;
    /* фиксированная высота ряда — единственный способ
       гарантировать «карта по высоте как список» */
    height: clamp(600px, 78vh, 800px);
  }
}

.locations__search { grid-area: search; }
.locations__listhead { grid-area: listhead; }
.locations__map { grid-area: map; }
.locations__panel { grid-area: list; }

.locations__listhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 46px;
  padding-inline: 4px;
}

.locations__listhead-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.locations__count {
  font-size: 12px;
  color: var(--faint);
}

/* --- Карта --- */
.locations__map {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  /* Für scrollIntoView beim Auswählen aus der Liste auf schmalen Screens
     (assets/js/locations.js) — sonst rutscht die Karte unter den
     sticky-Header. */
  scroll-margin-top: calc(var(--header-h) + 16px);
}

@media (max-width: 1023px) {
  .locations__map { height: 460px; }
}

.map-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
}

.map-bar__state {
  display: flex;
  align-items: center;
  gap: 8px;
}

.map-bar__scale {
  font-weight: 500;
  color: var(--faint);
}

/* --- Umschalter «Auslieferungsgebiete» (150-km-Kreise) --- */
.map-zones {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 11.5px;
  font-weight: 600;
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.map-zones:hover { border-color: var(--border-strong); }

/* display: inline-flex schlägt die UA-Regel für [hidden] — ohne das hier
   bliebe der Knopf sichtbar, wenn locations.js ihn ausblendet (Leaflet
   nicht geladen, siehe noMapFallback). Gleiche Falle wie bei
   .job-card[hidden] und .standort-picker__panel[hidden]. */
.map-zones[hidden] { display: none; }

/* Vier Tortenstücke statt eines Punktes: der Knopf schaltet Gebiete in
   Standortfarben, das soll man ihm ansehen. Die Farben sind dieselben
   wie in ZONE_COLOR (assets/js/locations.js) — hier bewusst als feste
   Werte dupliziert, es ist eine Miniatur, kein Datenmodell. */
.map-zones__swatch {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: conic-gradient(#2f74c0 0 25%, #57a83c 0 50%,
                             #c2a212 0 75%, #c0392b 0);
  transition: all var(--dur-fast) var(--ease);
}

.map-zones.is-off { color: var(--faint); }

.map-zones.is-off .map-zones__swatch {
  background: transparent;
  opacity: 0.6;
}

@media (max-width: 420px) {
  .map-zones__label { display: none; }
  .map-zones { padding: 5px 8px; }
}

/* ------------------------------------------------------------
   STANDORTGEBIETE (Bundesland-Polygone, assets/data/bundeslaender.geo.json)

   Leaflet setzt stroke/fill als Präsentationsattribute, CSS gewinnt
   darüber. Arbeitsteilung deshalb:
     locations.js  → WELCHE Farbe (die des zuständigen Standorts)
     hier          → WIE VIEL davon zu sehen ist (Deckkraft, Linienstärke)

   Der Umriss ist im Ruhezustand 0 breit. Das ist die eigentliche
   Änderung gegenüber früher: ohne Linien liest sich die Karte als
   «Deutschland, aufgeteilt in Gebiete» statt als Gitternetz aus 16
   umrandeten Ländern. Zwei Länder desselben Standorts verschmelzen so
   zu einer Fläche, die Grenze wird nur dort sichtbar, wo die Farbe
   wechselt.
   ------------------------------------------------------------ */

/* Der Umriss Deutschlands: ein Schlagschatten auf die Ebene, nicht auf
   die einzelne Fläche. Der Filter wirkt auf das fertig gezeichnete Bild
   ALLER Polygone, also auf die gemeinsame Silhouette — Binnengrenzen
   bleiben davon unberührt. Eine zweite Geometrie (Außengrenze als
   eigenes GeoJSON) wird damit überflüssig. */
/* ⚠️ ZWINGEND, sonst ist die ganze Ebene unsichtbar.
   base.css setzt `img, svg { max-width: 100% }`. Leaflet kennt diese
   Falle und hebt sie selbst auf — aber nur für seine eigene Ebene:

     .leaflet-container .leaflet-overlay-pane svg { max-width: none !important }

   Die Flächen liegen in einer EIGENEN Ebene ('zones'), die von dieser
   Regel nicht erfasst wird. Leaflet-Ebenen haben keine eigene Breite,
   also werden aus max-width: 100% exakt 0 Pixel: das SVG fällt in der
   Breite zusammen und zeichnet nichts mehr — die Pfade stehen dabei
   völlig korrekt im DOM, mit richtiger Farbe und Deckkraft. Der Fehler
   sieht deshalb aus, als hätte sich gar nichts geändert.

   Gilt für jede weitere eigene Ebene mit Vektoren: Regel hier ergänzen. */
.leaflet-container .zones-pane svg {
  max-width: none !important;
  max-height: none !important;
}

.zones-pane {
  filter: drop-shadow(0 0 1px rgba(20, 24, 31, 0.45));
}

/* Kein Ausblenden der Nachbarländer.
   Es gab hier eine Maske: ein Polygon über die ganze Welt mit den 16
   Bundesländern als Löchern, das alles außerhalb Deutschlands unter der
   Hintergrundfarbe verschwinden ließ. Sie ist auf Wunsch wieder raus —
   die Karte soll ihre Umgebung behalten.

   Wer die Staatsgrenzen der Nachbarländer wirklich loswerden will,
   kommt an der Kachelquelle nicht vorbei: in einem Rasterbild sind sie
   Pixel. Nötig wären Vektorkacheln (MapLibre GL + maplibre-gl-leaflet),
   dort lässt sich die boundary-Ebene im Stil-JSON abschalten. */

:root[data-theme='dark'] .zones-pane {
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.5));
}

/* Deckend statt lasiert. Mit 11 % schimmerten die Kacheln durch und die
   Gebiete wirkten löchrig — besonders bei den Stadtstaaten, wo im Zoom
   eine helle Fläche in einem farbigen Umriss stand. Jetzt trägt die
   Farbe, und die Beschriftung der Kachel darunter bleibt gerade noch
   lesbar. Wer es voll deckend will: fill-opacity auf 1. */
.delivery-zone {
  stroke-width: 0;
  stroke-opacity: 0;
  stroke-linejoin: round;
  fill-opacity: 0.42;
  cursor: pointer;
  transition: fill-opacity var(--dur-fast) var(--ease),
              stroke-opacity var(--dur-fast) var(--ease),
              stroke-width var(--dur-fast) var(--ease);
}

/* Der Browser umrandet einen angeklickten SVG-Pfad mit seinem
   Fokusrahmen — und der folgt dem umschließenden RECHTECK, nicht der
   Landesgrenze. Auf der Karte sah das aus wie ein zweites, falsches
   Gebiet. Die Auswahl ist durch Farbe und Kontur deutlich genug. */
.delivery-zone:focus,
.delivery-zone:focus-visible {
  outline: none;
}

:root[data-theme='dark'] .delivery-zone { fill-opacity: 0.34; }

/* Standort gewählt: sein Gebiet tritt hervor, der Rest zurück.
   Nicht stärker füllen: im Standort-Zoom deckt eine einzige Fläche den
   ganzen Kartenausschnitt, dann schluckt jede höhere Deckkraft die
   Straßennamen darunter. */
.delivery-zone.is-assigned {
  fill-opacity: 0.5;
  stroke-opacity: 0.55;
  stroke-width: 1.25;
}

/* Das eigene Land des Standorts, nicht nur mitbedient. */
.delivery-zone.is-owned.is-assigned {
  fill-opacity: 0.72;
  stroke-opacity: 0.9;
  stroke-width: 2;
}

.delivery-zone.is-dimmed {
  fill-opacity: 0.14;
  stroke-opacity: 0;
  stroke-width: 0;
}

:root[data-theme='dark'] .delivery-zone.is-assigned { fill-opacity: 0.42; }
:root[data-theme='dark'] .delivery-zone.is-owned.is-assigned { fill-opacity: 0.6; }
:root[data-theme='dark'] .delivery-zone.is-dimmed { fill-opacity: 0.12; }

/* Überfahren: das ganze Gebiet eines Standorts (alle seine Länder)
   bekommt Kontur und mehr Farbe — locations.js setzt .is-hover auf allen
   Flächen desselben Standorts, nicht nur auf der unter dem Zeiger. So
   sieht man auf einen Blick, wie weit die Filiale reicht.

   Muss NACH .is-assigned/.is-dimmed stehen: gleiche Spezifität, und der
   Zeiger soll auch ein zurückgetretenes Gebiet wieder zeigen können. */
.delivery-zone.is-hover,
.delivery-zone.is-dimmed.is-hover {
  fill-opacity: 0.68;
  stroke-opacity: 0.9;
  stroke-width: 2;
}

:root[data-theme='dark'] .delivery-zone.is-hover,
:root[data-theme='dark'] .delivery-zone.is-dimmed.is-hover { fill-opacity: 0.58; }

/* --- Herangezoomt: Farbe zurücknehmen ---
   In der Übersicht ist die Fläche die Aussage, im Standort-Zoom deckt sie
   den ganzen Ausschnitt und würde Straßen und Ortsnamen schlucken. Die
   Kontur bleibt kräftig, damit die Landesgrenze weiter klar ist —
   sichtbar wird das Gebiet also durch die Linie, nicht durch die Fläche.
   Umgeschaltet ab Zoom 8 (ZOOM_DENSE_MAX in assets/js/locations.js).

   Muss ganz am Ende stehen: gleiche Spezifität wie die Theme-Regeln
   darüber, gewinnen soll die Zoom-Stufe. */
.locations__map.is-zoomed .delivery-zone { fill-opacity: 0.2; }
.locations__map.is-zoomed .delivery-zone.is-assigned { fill-opacity: 0.26; }
.locations__map.is-zoomed .delivery-zone.is-owned.is-assigned { fill-opacity: 0.34; }
.locations__map.is-zoomed .delivery-zone.is-hover { fill-opacity: 0.4; }
.locations__map.is-zoomed .delivery-zone.is-dimmed { fill-opacity: 0.08; }

/* --- Hinweis beim Überfahren einer Fläche --- */
.zone-tip.leaflet-tooltip {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-card);
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  /* Der Zeiger steht in der Fläche, die Beschriftung folgt ihm (sticky).
     Ohne das fängt sie ihre eigenen Ereignisse ab und flackert. */
  pointer-events: none;
}

.zone-tip.leaflet-tooltip::before { display: none; }   /* kein Pfeil, die Fläche ist groß genug */

.zone-tip__land {
  display: block;
  font-weight: 700;
}

.zone-tip__branch {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  color: var(--muted);
}

.zone-tip__dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
}

.zone-tip__support {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--faint);
}

/* На узком экране служебные строки только мешают */
@media (max-width: 560px) {
  .map-bar__scale,
  .map-foot__right { display: none; }
}

.map-canvas {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--map-bg);
}

#map {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.map-foot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: #111;
  color: #fff;
  font-size: 12px;
}

.map-foot__left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.map-foot__right { color: rgba(255, 255, 255, 0.6); }

/* --- Маркеры Leaflet --- */
.map-pin__dot {
  display: block;
  position: relative;
  width: 14px;
  height: 14px;
  margin: -1px 0 0 -1px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: scale(0.3);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}

.map-pin__dot::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}

.map-pin.is-visible .map-pin__dot {
  opacity: 1;
  transform: scale(1);
}

.map-pin.is-active .map-pin__dot {
  transform: scale(1.35);
}

.map-pin.is-active .map-pin__dot::after { opacity: 1; }

.map-pin--new .map-pin__dot {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow), 0 2px 8px rgba(0, 0, 0, 0.35);
}

.map-pin__label {
  position: absolute;
  left: 18px;
  top: -3px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(17, 17, 17, 0.9);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}

.map-pin.is-visible .map-pin__label {
  opacity: 1;
  transform: none;
  transition-delay: .18s;
}

@media (max-width: 640px) {
  .map-pin__label { display: none; }
}

.leaflet-container {
  font-family: var(--font-sans);
  background: var(--map-bg);
}

.leaflet-container a { color: var(--accent); }

.leaflet-popup-content-wrapper {
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
}

.leaflet-popup-content {
  margin: 12px 14px;
  font-size: 13px;
  line-height: 1.45;
}

.leaflet-popup-content strong { font-size: 14px; }

.map-popup__title { color: inherit; }
.map-popup__title:hover,
.map-popup__title:focus-visible { text-decoration: underline; }

.map-popup__cta {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}

.map-popup__cta:hover,
.map-popup__cta:focus-visible { text-decoration: underline; }

.leaflet-control-attribution {
  font-size: 10px !important;
  background: rgba(255, 255, 255, 0.75) !important;
}

:root[data-theme='dark'] .leaflet-control-attribution {
  background: rgba(0, 0, 0, 0.6) !important;
  color: rgba(255, 255, 255, 0.6);
}

:root[data-theme='dark'] .leaflet-popup-content-wrapper,
:root[data-theme='dark'] .leaflet-popup-tip {
  background: #1A1A1A;
  color: #fff;
}

:root[data-theme='dark'] .leaflet-popup-close-button { color: rgba(255, 255, 255, 0.6); }

/* Контролы зума под тему */
.leaflet-bar a,
.leaflet-bar a:hover {
  background: var(--bg);
  color: var(--ink);
  border-bottom-color: var(--border);
}

.leaflet-bar a:hover { background: var(--bg-alt); }

.leaflet-bar {
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

:root[data-theme='dark'] .leaflet-bar { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }

/* --- Список филиалов --- */
.locations__panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.locations__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px 4px 2px 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.locations__list::-webkit-scrollbar { width: 6px; }
.locations__list::-webkit-scrollbar-track { background: transparent; }

.locations__list::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
}

/* Мобила: внутренний скролл списка отключён целиком — плашки идут
   обычным потоком. Палец по плашке скроллит страницу, а не ищет
   узкую полосу рядом с ними. touch-action: pan-y — страховка от
   того, что браузер примет нажатие на <button> за начало жеста
   и «съест» вертикальный свайп. */
@media (max-width: 1023px) {
  .locations__list {
    overflow: visible;
    overscroll-behavior: auto;
    touch-action: pan-y;
  }

  .location { touch-action: pan-y; }
}

.location {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: translateX(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease),
              border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.location.is-revealed {
  opacity: 1;
  transform: none;
}

.location:hover { border-color: var(--border-strong); }

/* Красная плашка = ВЫБРАННЫЙ город, а не «новый».
   По умолчанию активен Bremen (locations.js берёт индекс из highlight);
   при выборе другого города прежняя плашка возвращается к белой, красной
   остаётся ровно одна. Раньше красный был приклеен к .location--new,
   поэтому Bremen горел всегда — независимо от выбора. */
.location.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 0 1px var(--accent);
}

/* --- Skyline-иллюстрация внутри кнопки ---
   Два вложенных элемента, а не mask-composite: каждому нужна ровно
   одна маска, поэтому нет расхождений между браузерами.
     .location__skyline      — рамка + растворение влево (под текст)
     .location__skyline-art  — сам город: маска из SVG, цвет из темы   */
/* Панорама ~6.3:1 — почти ровно пропорции кнопки, поэтому графика идёт
   во всю плашку, а не полоской: только так штрих остаётся читаемым. */
.location__skyline {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Растворение влево: под номером, названием и примечанием фон чистый.
     Детальная архитектура плотнее контурного Hamburg, поэтому запас
     под текстом больше, чем был изначально (10% → 22% → 32%): Text
     braucht mehr reinen Raum, bevor die Silhouette einsetzt. */
  -webkit-mask-image: linear-gradient(90deg, transparent 32%, #000 76%);
          mask-image: linear-gradient(90deg, transparent 32%, #000 76%);
}

/* Прозрачность = база состояния × поправка рисунка × поправка мобилы.
   Три независимых множителя вместо новых селекторов: тёмная тема,
   отдельный рисунок (Günthersdorf) и узкий экран не спорят за специфичность.
   skylineHeight / skylineBoost в DATA пишут --skyline-h / --skyline-boost. */
.location {
  --skyline-mul: calc(var(--skyline-boost, 1) * var(--skyline-mob, 1));
}

.location__skyline-art {
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: calc(var(--skyline-op, .16) * var(--skyline-mul));
  transform-origin: right bottom;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  -webkit-mask-image: var(--skyline);
          mask-image: var(--skyline);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  /* Сдвиг вправо: рисунок отходит от текста, справа срезается узкая
     полоска (у всех панорам там рядовая застройка, не доминанта).
     Günthersdorf через --skyline-x остаётся на месте — он и так узкий. */
  -webkit-mask-position: var(--skyline-x, calc(100% + 24px)) bottom;
          mask-position: var(--skyline-x, calc(100% + 24px)) bottom;
  /* 82%, а не contain: шпиль телебашни не должен упираться в верхний край */
  -webkit-mask-size: auto var(--skyline-h, 82%);
          mask-size: auto var(--skyline-h, 82%);
}

/* Контент — над иллюстрацией (у .location__skyline z-index: 0,
   иначе позиционированный слой перекрыл бы поточные элементы). */
.location__left,
.location__go {
  position: relative;
  z-index: 1;
}

.location:hover .location__skyline-art {
  opacity: calc(var(--skyline-op-hover, .32) * var(--skyline-mul));
  transform: translateY(-2px);
}

/* Белый штрих на почти чёрном фоне «светится» сильнее, чем чёрный на белом.
   Правим через переменную, а не новым селектором: иначе тёмная тема
   по специфичности перебила бы .is-active с его красной плашкой. */
:root[data-theme='dark'] .location {
  --skyline-op: .13;
  --skyline-op-hover: .28;
}

/* Активная плашка красная → штрих города белый. Красный — светлый фон
   для белого контура, контраст ниже, чем чёрное по белому, поэтому
   прозрачность здесь заметно выше базовой. */
.location.is-active .location__skyline-art {
  background: #fff;
  opacity: calc(.5 * var(--skyline-mul));
  transform: translateY(-2px);
}

.location.is-active:hover .location__skyline-art { opacity: calc(.62 * var(--skyline-mul)); }

/* Узкая колонка: текст занимает почти всю ширину — графику приглушаем */
@media (max-width: 560px) {
  .location { --skyline-mob: .55; }
}

@media (prefers-reduced-motion: reduce) {
  .location__skyline-art { transition: none; }
  .location:hover .location__skyline-art,
  .location.is-active .location__skyline-art { transform: none; }
}

.location__left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.location__num {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  font-size: 12px;
  font-weight: 700;
}

.location.is-active .location__num {
  background: #fff;
  color: var(--accent);
}

.location__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.location__name-link:hover,
.location__name-link:focus-visible {
  text-decoration: underline;
}

/* «NEU» — красная пилюля на белой плашке, на выбранной инвертируется */
.location__flag {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.location.is-active .location__flag {
  background: #fff;
  color: var(--accent);
}

.location__note {
  margin-top: 5px;
  font-size: 13px;
  color: var(--muted);
}

.location.is-active .location__note { color: rgba(255, 255, 255, 0.8); }

.location__go {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  font-size: 13px;
  /* Непрозрачная заливка: под кружком проходит skyline, без фона стрелка
     тонула в линиях. var(--bg), а не --surface — тот в тёмной теме
     полупрозрачный и рисунок просвечивал бы. */
  background: var(--bg);
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}

.location:hover .location__go {
  border-color: var(--accent);
  color: var(--accent);
}

/* На красной плашке белая заливка съела бы белую стрелку — здесь
   достаточно лёгкой подложки, чтобы кружок отделился от линий. */
.location.is-active .location__go {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.16);
  color: var(--accent-ink);
}

.location.is-active:hover .location__go {
  border-color: #fff;
  color: var(--accent-ink);
  background: rgba(255, 255, 255, 0.28);
}

/* --- Плашка под сеткой --- */
.locations__note {
  margin-top: 24px;
  display: grid;
  gap: 20px;
  align-items: center;
}

@media (min-width: 768px) {
  .locations__note {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 28px;
  }
}

.locations__note .meta-line { color: rgba(255, 255, 255, 0.6); }

.locations__note-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.05;
}

.locations__note p {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

/* ============================================================
   3b. WRENCH SCENE — источник: translogistik-wrench-scroll
       Кинематографичная сцена на 300vh со sticky-кадром:
       ключ влетает, разворачивается и уходит, заголовок
       расходится влево/вправо, снизу проявляется сетка 01–04.
       Всегда чёрная — работает в обеих темах.
   ============================================================ */
.wrench-scene {
  position: relative;
  height: 190vh;
  height: 190dvh;
  background: #000;
  color: #fff;
}

/* Echter, garantierter Schwarzraum zwischen der Szene und der nächsten
   (hellen) Section — unabhängig vom sticky-Scroll-Timing der Szene
   selbst, das je nach Gerät/Adressleiste variiert und sonst mal knapper,
   mal großzügiger direkt in die helle Section überging. */
.wrench-scene-tail {
  background: #000;
  height: 56px;
}

@media (max-width: 900px) {
  .wrench-scene-tail { height: 24px; }
}

.wrench-stage {
  position: sticky;
  top: 0;
  /* dvh statt vh: 100vh ist die GRÖSSTE mögliche Viewport-Höhe (Adressleiste
     eingeklappt). Ist die Adressleiste beim Öffnen sichtbar, ist der reale
     sichtbare Bereich kleiner als 100vh — der Rahmen wurde dann unten vom
     overflow:hidden abgeschnitten. dvh folgt der tatsächlich sichtbaren Höhe. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --- Заголовок: две группы по краям --- */
.wrench-head {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 4vw;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  pointer-events: none;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.wrench-head__left,
.wrench-head__right {
  opacity: 0;
  will-change: transform, opacity;
}

.wrench-head__left { text-align: left; }
.wrench-head__right { text-align: right; }

.wrench-line {
  display: block;
  font-size: clamp(2.4rem, 7vw, 6.5rem);
  line-height: 0.88;
  text-transform: uppercase;
}

.wrench-line--accent { color: var(--accent); }

/* --- Сам ключ --- */
.wrench-tool {
  position: absolute;
  left: 50%;
  top: 40%;
  z-index: 3;
  width: min(80vw, 660px);
  opacity: 0;
  transform: translate(-50%, 70%) scale(0.35);
  filter: drop-shadow(0 40px 90px rgba(227, 6, 19, 0.45));
  pointer-events: none;
  will-change: transform, opacity;
}

.wrench-tool img {
  width: 100%;
  height: auto;
  transform: rotate(-28deg);
  will-change: transform;
}

/* --- Сетка 01–04 --- */
.wrench-zone {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: var(--container);
  margin: 32px auto 0;
  padding-inline: 4vw;
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
}

.wrench-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

/* Vier Foto-Kacheln statt der früheren Textzellen mit roten Trennlinien:
   dieselben vier Leistungen, aber mit dem Bild als Fläche. Die Höhe hängt
   an der Viewport-Höhe, weil die Szene in einem sticky 100vh-Kader sitzt —
   feste px würden auf flachen Fenstern unten abgeschnitten. */
.wrench-cell {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  height: clamp(230px, 32vh, 330px);
  padding: 20px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0A0A0A;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

.wrench-cell:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(227, 6, 19, 0.28);
}

/* Weiche rote Lichtspur, die dem Mauszeiger am Kartenrand folgt —
   nur sichtbar beim Hover über genau diese Kachel. --mx/--my kommen
   per Mousemove aus wrench.js (in % relativ zur Kachel). Umsetzung
   über eine gemaskte Rahmen-Ebene (padding-box vs. content-box, xor):
   der Farbverlauf malt nur den 1px-Rahmen, nicht die Fläche. */
.wrench-cell::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(227, 6, 19, 0.9), transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
  pointer-events: none;
}

.wrench-cell:hover::before { opacity: 1; }

@media (hover: none) {
  .wrench-cell::before { display: none; }
}

.wrench-cell__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
}

.wrench-cell__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transition: transform .8s var(--ease);
}

.wrench-cell:hover .wrench-cell__bg img { transform: scale(1.05); }

/* Verlauf: unten fast deckend, damit Titel und Text auf jedem Motiv
   lesbar bleiben; oben nur angedunkelt, damit die Nummer sitzt. */
.wrench-cell__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(6, 6, 6, 0.95) 0%,
    rgba(6, 6, 6, 0.78) 34%,
    rgba(6, 6, 6, 0.34) 68%,
    rgba(6, 6, 6, 0.30) 100%);
}

.wrench-cell__num {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 20px;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.62);
}

.wrench-cell__body {
  position: relative;
  z-index: 2;
  margin-top: auto;
}

.wrench-cell__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.wrench-cell__text {
  margin-top: 8px;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.74);
}

/* Kennzahl aus den früheren Foto-Kacheln (120+ Fahrzeuge, 450+ Monteure …) */
.wrench-cell__meta {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .wrench-cell:hover { transform: none; }
  .wrench-cell:hover .wrench-cell__bg img { transform: none; }
}

@media (max-width: 900px) {
  .wrench-scene { height: 160vh; height: 160dvh; }

  /* Statt vertikal zu zentrieren oben ausrichten: reicht der Inhalt
     knapp nicht, geht bei flex-start höchstens unten etwas verloren
     statt oben die Überschrift anzuschneiden. */
  .wrench-stage {
    justify-content: flex-start;
    padding-top: 14px;
  }

  .wrench-head {
    flex-direction: column;
    gap: 6px;
  }

  .wrench-head__right { text-align: left; }

  .wrench-line { font-size: clamp(1.6rem, 9vw, 3rem); }

  .wrench-tool { width: min(90vw, 360px); }

  .wrench-zone { margin-top: 18px; }

  .wrench-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  /* Zwei Reihen à zwei Kacheln müssen zusammen in den sticky-Kader
     passen, deshalb hier deutlich flacher als auf dem Desktop. */
  .wrench-cell {
    height: clamp(120px, 16vh, 210px);
    padding: 14px;
  }

  .wrench-cell__num { font-size: 1.15rem; top: 14px; left: 16px; }
  .wrench-cell__title { font-size: 16px; }
  .wrench-cell__text { display: none; }
  .wrench-cell__meta { margin-top: 8px; font-size: 9px; }

  /* при двух колонках левая линия нужна только у чётных */
  .wrench-cell + .wrench-cell { border-left: 0; }

  .wrench-cell:nth-child(even) {
    border-left: 1px solid rgba(227, 6, 19, 0.4);
  }

  .wrench-cell:nth-child(n + 3) {
    border-top: 1px solid rgba(227, 6, 19, 0.4);
  }
}

@media (max-width: 480px) {
  .wrench-grid { grid-template-columns: minmax(0, 1fr); }

  .wrench-cell:nth-child(even) { border-left: 0; }

  .wrench-cell + .wrench-cell {
    border-top: 1px solid rgba(227, 6, 19, 0.4);
  }
}

/* Без анимации — статичный читаемый кадр, сцена сжимается */
@media (prefers-reduced-motion: reduce) {
  .wrench-scene { height: auto; }

  .wrench-stage {
    position: static;
    height: auto;
    padding-block: 96px;
  }

  .wrench-head__left,
  .wrench-head__right,
  .wrench-zone {
    opacity: 1;
    transform: none;
  }

  .wrench-tool {
    position: relative;
    left: auto;
    top: auto;
    margin: 40px auto;
    transform: none;
    opacity: 1;
  }
}

/* ============================================================
   4. LEISTUNGEN — «Wir übernehmen den Rest»
   ------------------------------------------------------------
   Auf der Startseite gibt es diese Section nicht mehr eigenständig.
   Die Klassen hier bleiben, weil unsere-mission.html sie weiterhin
   für ihren eigenen Leistungen-Abschnitt braucht.
   ============================================================ */
.leistungen__intro { max-width: 720px; }

.leistungen__title {
  font-size: clamp(2.125rem, 4.2vw, 3.25rem);
}

.leistungen__lead {
  margin-top: 16px;
  max-width: 560px;
  color: var(--muted);
}

.leistungen__intro > .leistungen__lead:first-child {
  margin-top: 0;
  max-width: 640px;
  font-size: 1.0625rem;
  line-height: 1.6;
}

.leistungen__grid {
  margin-top: 48px;
  display: grid;
  gap: 24px;
}

@media (min-width: 768px) {
  .leistungen__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .leistungen__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
  }
}

.service {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-alt);
}

/* Карточка-ссылка (unsere-mission.html): кликается вся площадь,
   поэтому и отзыв на наведение даёт вся карточка, а не только
   строка «Mehr Details». */
a.service {
  transition: transform var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

a.service:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lift);
}

a.service:hover .service__foot-row { color: var(--accent); }

a.service:hover .service__foot-row .circle-icon {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

a.service--dark:hover { border-color: rgba(255, 255, 255, 0.3); }
a.service--dark:hover .service__foot-row { color: #fff; }

.service--dark {
  background: #111;
  border-color: #111;
  color: #fff;
}

:root[data-theme='dark'] .service { background: var(--surface); }

:root[data-theme='dark'] .service--dark {
  background: #1A1A1A;
  border-color: rgba(255, 255, 255, 0.14);
}

.service__media {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.service__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transition: transform .7s var(--ease);
}

.service:hover .service__media img { transform: scale(1.04); }

.service__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.05) 60%, transparent);
}

.service__tags {
  position: absolute;
  z-index: 2;
  bottom: 12px;
  left: 12px;
  display: flex;
  gap: 8px;
}

.service__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 28px;
}

.service__title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.05;
}

.service__text {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}

.service--dark .service__text { color: rgba(255, 255, 255, 0.7); }

.service__foot {
  margin-top: auto;
  padding-top: 24px;
}

.service__foot .rule { margin-bottom: 20px; }

.service--dark .service__foot .rule { background: rgba(255, 255, 255, 0.15); }

.service__foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
}

.service--dark .service__foot-row .circle-icon { border-color: rgba(255, 255, 255, 0.2); }

/* --- Две плашки под карточками --- */
.leistungen__extra {
  margin-top: 24px;
  display: grid;
  gap: 24px;
}

@media (min-width: 1024px) {
  .leistungen__extra { grid-template-columns: 1.1fr 0.9fr; }

  /* Seit die Foto-Kacheln in der Wrench-Szene stehen, bleibt hier nur
     die Aktuell-Karte — die soll die Breite nicht halb leer lassen. */
  .leistungen__extra--single { grid-template-columns: minmax(0, 1fr); }
}

.extra-note {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

@media (min-width: 640px) {
  .extra-note { flex-direction: row; gap: 24px; }
}

.extra-note__icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

.extra-note__title {
  font-size: 16px;
  font-weight: 700;
}

.extra-note p {
  margin-top: 8px;
  max-width: 520px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}

.extra-flash {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

/* Плашка-новость целиком ссылка (a.extra-flash), поэтому у обёртки
   и подписей display: block — внутри <a> они спаны, а не блоки. */
.extra-flash > span:not(.circle-icon) { display: block; }

a.extra-flash:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px var(--accent-glow);
}

.extra-flash__label {
  display: block;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
}

.extra-flash__title {
  display: block;
  margin-top: 4px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}

.extra-flash .circle-icon {
  width: 36px;
  height: 36px;
  background: #fff;
  color: var(--accent);
  border-color: #fff;
}

/* ============================================================
   5. TEAM & VERTRAUEN — коллаж + отзывы (текст заменён)
   ============================================================ */
.team-trust {
  padding-block: var(--pad-quiet);
  overflow: hidden;
  background: var(--bg);
}

@media (min-width: 1024px) {
  .team-trust { padding-block: 88px; }
}

@media (max-width: 640px) {
  .team-trust { padding-block: 56px; }
}

.collage {
  position: relative;
  height: 320px;
  margin-bottom: 48px;
  padding-inline: var(--gutter);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
}

.collage img {
  flex-shrink: 0;
  border-radius: 16px;
  object-fit: cover;
  object-position: var(--pos, 50% 30%);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10);
  transition: transform .35s var(--ease);
}

:root[data-theme='dark'] .collage img {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
}

.collage img:hover { transform: translateY(-8px); }

/* «дуга» — как в template-концепте */
.collage img:nth-child(1) { width: 100px; height: 140px; margin-bottom: 16px; }
.collage img:nth-child(2) { width: 118px; height: 168px; margin-bottom: 40px; }
.collage img:nth-child(3) { width: 108px; height: 148px; margin-bottom: 8px; }
.collage img:nth-child(4) { width: 136px; height: 196px; margin-bottom: 56px; }
.collage img:nth-child(5) { width: 126px; height: 176px; margin-bottom: 32px; }
.collage img:nth-child(6) { width: 112px; height: 156px; margin-bottom: 12px; }
.collage img:nth-child(7) { width: 122px; height: 172px; margin-bottom: 44px; }
.collage img:nth-child(8) { width: 104px; height: 144px; margin-bottom: 20px; }
.collage img:nth-child(9) { width: 116px; height: 162px; margin-bottom: 36px; }

@media (max-width: 960px) {
  .collage {
    height: 200px;
    gap: 8px;
    margin-bottom: 36px;
  }

  .collage img {
    width: 64px !important;
    height: 90px !important;
    margin-bottom: 8px !important;
  }

  .collage img:nth-child(1),
  .collage img:nth-child(9) { display: none; }
}

@media (max-width: 560px) {
  .collage img:nth-child(2),
  .collage img:nth-child(8) { display: none; }
}

.team-trust__head {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: 56px;
  padding-inline: var(--gutter);
  text-align: center;
}

.team-trust__title {
  margin-top: 20px;
  font-size: clamp(1.875rem, 3.6vw, 2.75rem);
}

.team-trust__lead {
  margin-top: 16px;
  max-width: 560px;
  margin-inline: auto;
  color: var(--muted);
}

.testimonials {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: 40px;
}

@media (min-width: 768px) {
  .testimonials {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
}

.testimonial { text-align: center; }

.testimonial__stars {
  color: #EAB308;
  font-size: 15px;
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.testimonial blockquote {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
}

.testimonial__author {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.testimonial__author img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial__author strong {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
}

.testimonial__author span {
  font-size: 13px;
  color: var(--faint);
}

.team-trust__actions {
  margin-top: 56px;
  padding: 32px var(--gutter) 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 1080px;
  margin-inline: auto;
}

/* ============================================================
   5b. FAQ — источник: Translogistik-Faq-Brighter-Style
       Красная карточка: слева метка, справа большой ответ,
       снизу 4 плитки. Клик по плитке подменяет текст справа.
   ============================================================ */
.faq {
  background: var(--bg);
}

.faq-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(110% 85% at 50% 22%, rgba(255, 190, 180, 0.32) 0%, rgba(255, 80, 80, 0.14) 30%, rgba(184, 30, 26, 0) 68%),
    linear-gradient(180deg, #C92A26 0%, #B81E1A 14%, #9F1C18 56%, #8A1815 100%);
  color: #fff;
}

@media (min-width: 768px) {
  .faq-card { border-radius: 28px; }
}

.faq-card::before,
.faq-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.faq-card::before {
  background: radial-gradient(58% 42% at 50% 28%, rgba(255, 210, 200, 0.24) 0%, rgba(255, 255, 255, 0.05) 20%, transparent 70%);
}

.faq-card::after {
  background: radial-gradient(130% 120% at 50% 100%, rgba(0, 0, 0, 0.22) 0%, transparent 58%);
}

.faq-card__inner {
  position: relative;
  z-index: 1;
  padding: 40px 24px;
}

@media (min-width: 768px) {
  .faq-card__inner { padding: 48px 32px; }
}

@media (min-width: 1024px) {
  .faq-card__inner { padding: 48px 40px; }
}

/* --- Заголовок карточки --- */
.faq-head {
  max-width: 820px;
  margin-bottom: 28px;
}

@media (min-width: 1024px) {
  .faq-head { margin-bottom: 32px; }
}

.faq-head__title {
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}

.faq-head__sub {
  margin-top: 16px;
  max-width: 620px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

/* --- Аккордеон внутри красной карточки ---
   Механика и разметка — общий .accordion (components.css), здесь
   только палитра «белое по красному»: базовые токены дали бы
   красный .is-open на красном фоне.

   Пришло на место четырёх плиток-переключателей 01–04 с дисплеем
   ответа: тот блок занимал на телефоне почти три экрана из-за
   min-height 180px у плиток и 300px у дисплея. */
.faq-accordion {
  gap: 10px;
}

.faq-accordion .accordion__item {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.18);
  color: #fff;
}

.faq-accordion .accordion__item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.28);
}

.faq-accordion .accordion__item.is-open {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.faq-accordion .accordion__trigger {
  gap: 14px;
  padding: 18px 20px;
}

.faq-accordion .accordion__title {
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.92);
  text-wrap: balance;
}

.faq-accordion .accordion__item:hover .accordion__title,
.faq-accordion .accordion__item.is-open .accordion__title { color: #fff; }

@media (min-width: 1024px) {
  .faq-accordion .accordion__trigger { padding: 20px 24px; }
  .faq-accordion .accordion__title { font-size: 18px; }
}

.faq-accordion .accordion__icon {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

/* Открытый: белый круг с красным крестиком — как у .accordion
   в светлой секции, только наоборот по контрасту */
.faq-accordion .accordion__item.is-open .accordion__icon {
  background: #fff;
  border-color: #fff;
  color: var(--accent);
}

.faq-accordion .accordion__body {
  padding: 0 20px 20px;
}

@media (min-width: 1024px) {
  .faq-accordion .accordion__body { padding: 0 24px 24px; }
}

.faq-accordion .accordion__body p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  opacity: 1;
  max-width: 760px;
}

.faq-accordion .accordion__trigger:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* --- Компактный FAQ на телефоне --- */
@media (max-width: 767px) {
  .faq-card__inner { padding: 28px 18px; }

  .faq-head { margin-bottom: 20px; }
  .faq-head__title { font-size: clamp(1.5rem, 6.6vw, 2rem); }

  .faq-head__sub {
    margin-top: 12px;
    font-size: 15px;
  }

  .faq-accordion { gap: 8px; }

  .faq-accordion .accordion__trigger {
    gap: 12px;
    padding: 14px 16px;
  }

  .faq-accordion .accordion__title { font-size: 15.5px; }

  .faq-accordion .accordion__icon {
    width: 30px;
    height: 30px;
  }

  .faq-accordion .accordion__icon::before { width: 12px; }
  .faq-accordion .accordion__icon::after { height: 12px; }

  .faq-accordion .accordion__body { padding: 0 16px 16px; }
  .faq-accordion .accordion__body p { font-size: 14.5px; }
}

/* ============================================================
   6. CTA — «Bereit, mit uns zu wachsen?»
   ============================================================ */
.cta {
  position: relative;
  overflow: hidden;
  background: var(--accent);
}

.cta__card {
  position: relative;
  z-index: 2;
  display: grid;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #fff;
  color: #111;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.18);
}

@media (min-width: 1024px) {
  .cta__card { grid-template-columns: 0.9fr 1.1fr; }
}

:root[data-theme='dark'] .cta__card {
  background: #141414;
  color: #fff;
}

.cta__media {
  position: relative;
  min-height: 300px;
  background: #111;
}

@media (min-width: 1024px) {
  .cta__media { min-height: 420px; }
}

.cta__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  opacity: 0.9;
}

.cta__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent);
}

.cta__media-tag {
  position: absolute;
  z-index: 2;
  bottom: 16px;
  left: 16px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: #fff;
  color: #111;
  font-size: 11px;
  font-weight: 700;
}

.cta__body {
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 1024px) {
  .cta__body { padding: 48px; }
}

.cta__title {
  font-size: clamp(2rem, 3.6vw, 2.625rem);
}

.cta__lead {
  margin-top: 16px;
  max-width: 440px;
  color: inherit;
  opacity: 0.7;
}

.cta__actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

.cta__note {
  font-size: 13px;
  opacity: 0.6;
}

.cta__facts {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  font-size: 13px;
}

:root[data-theme='dark'] .cta__facts { border-color: rgba(255, 255, 255, 0.12); }

.cta__blob {
  position: absolute;
  right: -96px;
  bottom: -96px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

/* ============================================================
   7. KRIEGER GRUPPE — «Teil einer starken Gruppe.»
      Restyle nach import/krieger-gruppe-v2.html: Pillen pro Marke
      (statt Kategorie-Filter) + Slider mit Zähler und Pfeilen.
      Karten jetzt mit Beschreibungstext; Translogistik als
      "featured" Karte (schwarz), statt der vorherigen roten Karte.
   ============================================================ */
.gruppe {
  background: var(--bg-alt);
  border-block: 1px solid var(--border);
}

.gruppe__head {
  max-width: 860px;
  margin-bottom: 32px;
}

.gruppe__title {
  margin-top: 16px;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
}

.gruppe__lead {
  margin-top: 16px;
  max-width: 620px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
}

/* --- Pillen: eine pro Marke, klick scrollt zur Karte --- */
.gruppe__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.gruppe__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.gruppe__pill-tag {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.7;
}

.gruppe__pill:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* Ausgewählt ist rot, nicht schwarz: schwarz sah aus wie «deaktiviert»
   und kollidierte mit der schwarzen Eigen-Karte im Slider. */
.gruppe__pill.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.gruppe__pill.is-active .gruppe__pill-tag { opacity: 0.85; }

/* --- Zähler + Pfeile über dem Slider --- */
.gruppe__slider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.gruppe__slider-count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.gruppe__slider-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gruppe__nav {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  box-shadow: var(--shadow-float);
  transition: opacity var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}

.gruppe__nav:hover:not(:disabled) { background: var(--bg-alt); }
.gruppe__nav svg { width: 15px; height: 15px; }
.gruppe__nav--prev svg { transform: rotate(180deg); }

.gruppe__nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* --- Slider: horizontales Scroll-Snap statt Filter-Ein-/Ausblenden --- */
.gruppe__slider {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* overflow-x: auto forces overflow-y to compute as auto too, which clips
     the hover/active lift (translateY) and shadow of .gruppe__brand at the
     top edge — this padding gives that lift room so cards render whole. */
  padding-block: 12px 8px;
}

.gruppe__slider::-webkit-scrollbar { display: none; }

.gruppe__slider.is-dragging {
  scroll-behavior: auto;
  user-select: none;
}

/* --- Markenkarte --- */
.gruppe__brand {
  flex: 0 0 280px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 300px;
  padding: 26px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

@media (min-width: 640px) {
  .gruppe__brand { flex-basis: 300px; }
}

.gruppe__brand:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lift);
}

.gruppe__brand-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.gruppe__brand-num {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--faint);
}

.gruppe__brand-badge {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-alt);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.gruppe__brand-title {
  margin-top: auto;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.gruppe__brand-desc {
  margin-top: 8px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
}

.gruppe__brand-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  font-weight: 700;
}

.gruppe__brand:hover .gruppe__brand-foot { color: var(--accent); }

.gruppe__brand-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-alt);
  font-size: 13px;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.gruppe__brand:hover .gruppe__brand-icon {
  background: var(--accent);
  color: var(--accent-ink);
}

/* Translogistik: "featured" Karte — komplett in Markenrot statt der
   Karten-Fläche, mit weißer Schrift, damit sie unter den übrigen
   (neutralen) Marken-Karten heraussticht. */
.gruppe__brand--self {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  cursor: default;
}

.gruppe__brand--self:hover {
  transform: none;
  box-shadow: var(--shadow-card);
}

.gruppe__brand--self .gruppe__brand-badge {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  /* Badge nach links, Nummer nach rechts — umgekehrte Reihenfolge zu den
     übrigen Marken-Karten, extra so gewünscht für die eigene Karte. */
  order: -1;
}

.gruppe__brand--self .gruppe__brand-num { color: rgba(255, 255, 255, 0.7); }
.gruppe__brand--self .gruppe__brand-title { color: #fff; }
.gruppe__brand--self .gruppe__brand-desc { color: rgba(255, 255, 255, 0.85); }
.gruppe__brand--self .gruppe__brand-foot { border-top-color: rgba(255, 255, 255, 0.25); }
.gruppe__brand--self .gruppe__brand-icon { background: rgba(255, 255, 255, 0.2); color: #fff; }

/* .gruppe__brand:hover würde Fuß-Text und Icon sonst auf Markenrot
   umfärben — auf der bereits roten "self"-Karte unsichtbar. Hier bleibt
   Weiß, nur die Icon-Fläche hellt sich beim Hover leicht auf. */
.gruppe__brand--self:hover .gruppe__brand-foot { color: #fff; }
.gruppe__brand--self:hover .gruppe__brand-icon {
  background: rgba(255, 255, 255, 0.32);
  color: #fff;
}

/* Auf Mobile nehmen die Pillen zu viel Fläche ohne Mehrwert ein —
   die Karten bleiben per Swipe/Pfeilen bedienbar, Pillen weg. */
@media (max-width: 640px) {
  .gruppe__pills { display: none; }
}

/* ============================================================
   LEGAL — Datenschutz und Impressum
   ============================================================ */
.legal {
  max-width: 820px;
  margin-inline: auto;
}

.legal__block {
  margin-bottom: 48px;
}

.legal__block-title {
  margin-bottom: 24px;
}

.legal__block h3 {
  margin-top: 32px;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.legal__block h4 {
  margin-top: 24px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.legal__block p {
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}

.legal__block p:last-child {
  margin-bottom: 0;
}

.legal__block ul {
  margin: 16px 0 12px 20px;
  padding: 0;
  list-style: disc;
}

.legal__block li {
  margin-bottom: 6px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}

.legal__block a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-soft);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.legal__block a:hover {
  color: var(--accent-hover);
  border-bottom-color: var(--accent);
}

/* ============================================================
   KARTENKACHELN — deutsche Beschriftung + Theme
   ------------------------------------------------------------
   Der Kachelserver (tile.openstreetmap.de) liefert die Karte mit
   DEUTSCHEN Namen — vorher stand dort CARTO Positron mit englischen
   Bezeichnungen («Germany», «Bavaria», «Cologne»). Positron gab es
   dafür in hell UND dunkel; die deutsche Ausgabe nur in einer
   Variante. Beide Themes entstehen deshalb hier per Filter:

     hell   – Farben stark zurückgenommen, damit die Karte so ruhig
              wirkt wie der Rest der Seite (Positron-Look).
     dunkel – invert + hue-rotate dreht die Karte ins Negative, ohne
              die Schrift unlesbar zu machen; hue-rotate holt die
              durch invert verschobenen Farbtöne zurück.

   Der Filter sitzt auf .leaflet-tile-pane, NICHT auf dem Container:
   in diesem Pane liegen ausschließlich die Kachelbilder. Auf dem
   Container würde er Pins, Labels, Popups und Zoom-Knöpfe mit
   umdrehen. Nebeneffekt: der Theme-Wechsel lädt keine Kacheln neu.
   ============================================================ */

/* Die deutsche OSM-Ausgabe zeichnet deutlich mehr als Positron: jede
   Kreisstadt, Nachbarländer, Verwaltungsnamen. Bei Übersichtszoom
   konkurriert diese Grundschrift mit unseren 10 Pin-Labels. Deshalb
   nicht nur entsättigen, sondern auch aufhellen und den Kontrast
   herunternehmen — die Kachelschrift rückt damit in den Hintergrund,
   die Pins (voller Kontrast, eigene Ebene) treten hervor. */
.leaflet-tile-pane {
  filter: saturate(0.12) brightness(1.14) contrast(0.88);
}

:root[data-theme='dark'] .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) saturate(0.1) brightness(0.86) contrast(0.9);
}

/* .page-hero ist IMMER dunkel (#111), unabhängig vom Theme-Attribut
   (siehe karriere.css) — der helle Kartenfilter oben (stark aufgehellt,
   fürs helle --bg gedacht) machte die Karte hier im hellen Theme fast
   unsichtbar auf dem dunklen Scrim. Deshalb hier immer den dunklen
   Filter, egal was data-theme sagt. */
.page-hero .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) saturate(0.1) brightness(0.86) contrast(0.9);
}

/* Brotkrumen im Hero: der Hero ist ein Flex-Spalten-Container, die
   Brotkrumen sind sein erstes Kind. Nur der Abstand nach unten fehlt —
   Farben bringt .breadcrumb selbst mit (auf .on-dark abgestimmt). */
.hero__breadcrumb { margin-bottom: 20px; }

/* ============================================================
   STANDORTWAHL (karriere.html, direkt unter dem Hero)
   ------------------------------------------------------------
   Erste Sektion der Karriereseite: Standort wählen, bevor irgendein
   Fließtext kommt. Die Pillenreihe selbst (.standortfilter) ist in
   karriere.css gestylt — hier nur der Rahmen drumherum.
   ============================================================ */

.standortwahl { border-bottom: 1px solid var(--border); }

.standortwahl__head {
  max-width: 720px;
  display: grid;
  gap: 12px;
}

.standortwahl__title { font-size: clamp(1.75rem, 4vw, 2.75rem); }

.standortwahl__lead {
  margin: 0;
  max-width: 560px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

/* .standortfilter selbst bringt nur margin-bottom mit (karriere.css) —
   hier steht die Pillenreihe direkt unter dem Lead und braucht deshalb
   zusätzlich Luft nach oben, sonst klebt «Standort wählen» am letzten
   Textzeile. */
.standortwahl .standortfilter { margin-top: 32px; }

/* Sprungmarke zur Stellenliste: der Filter sitzt jetzt weit über den
   Karten, deshalb braucht die Auswahl einen sichtbaren Weg nach unten. */
.standortwahl__jump {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.standortwahl__jump:hover { color: var(--accent); }

.standortwahl__jump:hover .circle-icon {
  border-color: var(--accent);
  color: var(--accent);
}