/* Layerwerk — Quelle: adapters/webflow/site-code/head.css. Nicht direkt bearbeiten. */
/* Site head custom code. Wrapped in <style> when pushed to Webflow.
   Every value references a Webflow Variable. A literal is a defect. */
/* ============================== Lato: von Webflow selbst gehostet
   12. Sep. Bis v81 standen hier vier eigene @font-face-Regeln, weil
   Webflow die Schrift ueber Googles WebFont-Loader zog (Besucher-IP an
   Google, ohne Einwilligung - siehe _docs/dsgvo-anforderungen.md §4c).
   Der Auftraggeber hat Lato 400 und 700 inzwischen als CUSTOM FONTS in
   den Site Settings hochgeladen. Webflow erzeugt die @font-face-Regeln
   damit selbst und liefert die Dateien von der eigenen CDN aus - unsere
   Regeln waeren ab hier eine zweite, konkurrierende Quelle fuer dieselbe
   Familie. Deshalb entfernt.
   Der Weg ueber Custom Fonts ist dem ueber eigene @font-face vorzuziehen:
   die Schrift bleibt im Designer-Canvas sichtbar, und der Name `Lato` in
   der Variable `font/family/sans` muss nicht durch einen Fantasienamen
   ersetzt werden.
   ERLEDIGT (23. Sep): Der Google-Loader ist raus. Hier stand bis dahin,
   er ziehe weiterhin zehn Lato-Varianten von fonts.gstatic.com nach.
   Nachgemessen ueber sechs Seiten, alle ausgehenden Anfragen
   protokolliert: NULL Anfragen an fonts.googleapis.com und
   fonts.gstatic.com. Die einzigen Fremdhosts sind Webflows eigenes CDN
   (jQuery, Badge). Die Schrift kommt ausschliesslich aus den beiden
   selbst gehosteten WOFF2. Damit ist §4c der dsgvo-anforderungen erfuellt.
   Merke: diesen Block misst man nach, statt ihn zu glauben - der Vermerk
   stand hier noch, als er laengst nicht mehr zutraf. */
/* Focus ring. Webflow rejects variable bindings on outline-width and
   outline-offset, so it lives here rather than as ~20 literals across
   components. :focus-visible, never :focus. Never animated. */
:focus-visible {
  outline: var(--_sizes---border-width--main) solid var(--_colour---focus--ring);
  outline-offset: var(--_sizes---space--1);
  transition: none !important;
}
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: var(--_sizes---border-width--main) solid var(--_colour---focus--ring);
  outline-offset: var(--_sizes---space--1);
}
/* Frueher stand hier eine Utility-Klasse .u-no-touch-hover, die :hover auf
   Touch zuruecksetzt. Sie war auf KEIN Element angewendet - toter Code, am
   22. Aug entfernt. Der richtige Weg steht weiter unten unter "hover states":
   die Hover-Zustaende gar nicht erst ausserhalb von
   @media (hover: hover) and (pointer: fine) zu deklarieren. */
/* Mobile menu — a DISCLOSURE, not an entrance (global.yaml), so deliberately
   not a motion-vocabulary primitive. */
#mobile-menu {
  opacity: 0;
  transform: translateY(calc(var(--_sizes---motion--distance--sm) * -1));
  visibility: hidden;
  transition:
    opacity calc(var(--_sizes---motion--duration--fast) * 1ms) cubic-bezier(0.16, 1, 0.3, 1),
    transform calc(var(--_sizes---motion--duration--fast) * 1ms) cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear calc(var(--_sizes---motion--duration--fast) * 1ms);
}
#mobile-menu.is-open {
  display: flex; opacity: 1; transform: translateY(0);
  visibility: visible; transition-delay: 0s;
}
/* ------------------------------------------------------- Skip-Link (18. Sep)
   WCAG 2.4.1. Eingefuegt von footer.js als erstes Kind des <body>, siehe dort
   die Begruendung.
   NICHT `display: none` und nicht `visibility: hidden` - beides nimmt das
   Element aus der Tab-Reihenfolge, der Link waere dann unerreichbar. Statt
   dessen aus dem Sichtfeld geschoben und bei `:focus` zurueckgeholt.
   Farben: `brand-700` (#1f3d4d) auf Weiss ergibt nachgemessen 11,46:1, weit
   ueber den geforderten 4,5:1. Bewusst NICHT die Akzentfarbe - die reisst AA
   (siehe qa/accessibility-review-2026-09-18.md, Befund 2).
   `z-index: 100` liegt ueber der Navigation (50), sonst erschiene der Link
   hinter der klebenden Kopfzeile. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  transform: translateY(-120%);
  padding: 12px 20px;
  background: var(--_colour---white);
  color: var(--_colour---brand-700);
  font-size: var(--_sizes---font-size--text-small);
  font-weight: var(--_sizes---font--weight--bold);
  line-height: 1.4;
  text-decoration: none;
  border-radius: 0 0 var(--_sizes---radius--md) 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.skip-link:focus {
  transform: translateY(0);
}
html.is-menu-open, html.is-menu-open body { overflow: hidden; touch-action: none; }
/* Dieselbe Sperre fuer die Bildansicht. `showModal()` faengt Fokus und ESC,
   aber nicht das Scrollen - gemessen am 18. Sep: das Mausrad bewegte die
   Seite hinter dem offenen Modal von scrollY 0 auf 500.
   Eigene Klasse statt `is-menu-open`, weil an jener auch
   `.sticky-apply { display: none }` haengt (Zeile 873). Das Modal soll
   sperren, nicht den Bewerben-Knopf verstecken. */
html.is-modal-open, html.is-modal-open body { overflow: hidden; touch-action: none; }
.nav-primary, .nav-mobile { position: sticky; top: 0; z-index: 50; }
/* Die Trennlinie beim Scrollen lag auf `border/subtle` = neutral-200 (#ccc).
   Gegen die weisse Navigation liest sich das als harte dunkle Kante. Eine
   Stufe heller (neutral-100, #eee) trennt weiterhin sichtbar, wirkt aber wie
   ein Schatten statt wie ein Rahmen. Bleibt in der Palette. */
.nav-primary.is-stuck, .nav-mobile.is-stuck {
  box-shadow: 0 1px 0 0 var(--_colour---neutral-100);
}
/* ------------------------------------------- Nav schrumpft beim Scrollen
   `.is-stuck` kommt ab 120px Scroll aus footer.js.
   Die Nav-Hoehe ist `max(Telefon-Button, Logo)` + Padding; der Button ist
   45 hoch. Ab ~159px Logobreite fuehrt das Logo, darunter das Padding. */
.nav-primary {
  padding-block: var(--_sizes---space--3);
  transition: padding-block calc(var(--_sizes---motion--duration--base) * 1ms)
              cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-primary.is-stuck {
  padding-block: var(--_sizes---space--2);
}
/* Animiert wird `width` am Logo. Sonst die Regel `nur transform und
   opacity` - hier bewusst anders: eine Transform-Skalierung wuerde die
   Nachbarelemente NICHT verschieben, die Nav bliebe hoch und das Logo
   wuerde ueber die Kante ragen. Die Layoutaenderung ist der Zweck. */
.nav-primary_logo {
  width: 203px;
  transition: width calc(var(--_sizes---motion--duration--base) * 1ms)
              cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-primary.is-stuck .nav-primary_logo {
  width: 120px;
}
/* Derselbe Effekt mobil. Hier ueber `height`, weil die Designer-Klasse
   das Logo hoehengefuehrt setzt (`height: space/5`, `width: auto`). */
.nav-mobile_logo {
  height: 48px;
  transition: height calc(var(--_sizes---motion--duration--base) * 1ms)
              cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-mobile.is-stuck .nav-mobile_logo {
  height: var(--_sizes---space--5);
}
/* Groessenwechsel bleibt, nur die Animation entfaellt. */
@media (prefers-reduced-motion: reduce) {
  .nav-primary,
  .nav-primary_logo,
  .nav-mobile_logo { transition: none; }
}
/* The hero video is a bare <video>: Webflow's Video element is a YouTube/Vimeo
   oEmbed player, which the DSGVO annotation forbids. Attributes are applied by
   heroVideo-1.0.0.js because the Designer API reserves every one of them. */
.hero-video_media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* entrance-reveal / stagger-group. Motion Vocabulary v1.1 §1-2.
   IntersectionObserver drives it — the 85%-of-viewport trigger and once:true
   are native to it, so no ScrollTrigger and no extra runtime. */
[data-reveal] {
  opacity: 0;
  transform: translateY(var(--_sizes---motion--distance--md));
  transition:
    opacity calc(var(--_sizes---motion--duration--slow) * 1ms) cubic-bezier(0.16, 1, 0.3, 1),
    transform calc(var(--_sizes---motion--duration--slow) * 1ms) cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }
/* ------------------------------------------------------------- carousel
   SWIPER, nicht scroll-snap. Diese Datei beschrieb bis 22. Aug eine
   scroll-snap-Loesung mit .instagram-tile-Breiten - die war nie live, und wer
   sie deployt haette, haette die funktionierende Galerie zerstoert: das
   gebaute Markup kennt .instagram-tile in dieser Rolle nicht mehr, Swiper
   verpackt die Kacheln zur Laufzeit in .swiper-slide.
   Warum am Ende doch Swiper: die Kacheln brauchen Pfeiltasten-Navigation mit
   angesagten Zustaenden an den Enden. Das ist mit scroll-snap nicht ohne
   eigenes JS zu haben, und dann ist die Ersparnis dahin.
   Aussehen und Masse der Pfeile stehen als Webflow-Klasse .carousel_arrow
   (64x64, weiss, 2px brand-500, Icon als background-image). Hier nur, was die
   Designer-UI nicht ausdruecken kann. */
/* 23. Sep: Naechste Kachel angeschnitten sichtbar, statt an der
   Rasterkante hart abzubrechen.
   Der Track behaelt sein Rastermass, laesst die Kacheln aber ueber die
   Kante hinaus zeichnen. Beschnitten wird an der Sektion - dort endet der
   Ueberlauf, ohne die Seite seitwaerts scrollbar zu machen.
   Den Track selbst fensterbreit zu machen ging nicht: die Designer-Klasse
   setzt `max-width` auf das Raster und gewinnt, dadurch addierte sich der
   Einzug auf 240 statt 120. */
.instagram-gallery_track {
  overflow: visible;
}
.u-section:has(.instagram-gallery_track) {
  overflow-x: clip;
}
.instagram-gallery_track .swiper-slide {
  height: auto;
}
/* --------------------------------- Werkstatt-Raster aus dem CMS (23. Aug)
   Die Collection List schiebt drei Wrapper zwischen Raster und Kachel:
   `.w-dyn-list > .w-dyn-items > .w-dyn-item > img`. Damit ist das Bild kein
   Rasterkind mehr - das Grid legt die Wrapper aus, und aus drei Spalten wird
   eine einzige mit sechs gestapelten Bildern.
   `display: contents` nimmt die Wrapper aus dem Layoutbaum, ohne sie aus dem
   DOM zu entfernen: die Bilder sind wieder direkte Kinder von
   `.u-grid-3.is-photo-grid` und die Spaltenregeln greifen unveraendert.
   Beim Karussell darunter geht das NICHT - dort scrollt `.w-dyn-items` und
   braucht seine Masse. Deshalb zwei verschiedene Loesungen fuer zwei
   Collection Lists auf derselben Seite. */
.u-grid-3.is-photo-grid > .w-dyn-list,
.u-grid-3.is-photo-grid .w-dyn-items,
.u-grid-3.is-photo-grid .w-dyn-item {
  display: contents;
}
/* Seit dem CMS-Umbau ist die Slide das `.w-dyn-item` der Collection List,
   nicht mehr das Bild selbst. Der Wrapper hat von Webflow keine eigenen
   Masse, also muss das Bild ihn ausfuellen - sonst faellt es auf seine
   Eigenbreite zurueck und der Peek auf die naechste Kachel stimmt nicht.
   `.instagram-tile` traegt bereits aspect-ratio und object-fit. */
.instagram-gallery_track .w-dyn-item {
  height: auto;
}
.instagram-gallery_track .w-dyn-item > .instagram-tile {
  width: 100%;
  display: block;
}
/* Das Icon sitzt als background-image im Knopf. background-position gehoert
   zwingend dazu: ohne Angabe faellt CSS auf 0% 0% zurueck, das Icon klebt oben
   links statt in der Mitte. Genau das ist am 22. Aug passiert, weil ein
   spaeteres update_style die Eigenschaft still ueberschrieben hat - die
   Designer-API ersetzt den Regelsatz, sie merged nicht.
   background-origin: border-box, weil box-sizing border-box gilt: sonst
   bezieht sich die Malflaeche auf 60x60 statt 64x64 und das Icon sitzt um die
   halbe Randbreite verschoben. */
.carousel_arrow {
  background-position: 50% 50%;
  background-origin: border-box;
  background-clip: border-box;
  flex-shrink: 0;
}
/* Das Icon-SVG zeigt nach rechts; im Design ist der Linkspfeil dasselbe Symbol
   gespiegelt. Darum scaleX statt eines zweiten Assets. */
.carousel_arrow[data-carousel="prev"] {
  transform: scaleX(-1);
}
/* Swiper markiert die Enden selbst. Deaktivieren statt ausblenden, damit die
   Bedienelemente in der Tab-Reihenfolge bleiben und ihr Zustand angesagt wird. */
.carousel_arrow.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}
/* Die Pfeile waren hier bis 22. Aug unter 767px ausgeblendet. Das Design
   (3822:12841) zeigt sie auf Mobil sehr wohl — 64x64, zentriert unter der
   Galerie. Regel ersatzlos entfernt: die Basisklasse zentriert bereits und
   traegt order: 2, eine Ersatzregel braucht es nicht. */
/* -------------------------------------------------------- Fliesstextbreite
   Fliesstext unter einer h2 im Sektionskopf laeuft nie auf volle Breite. Im
   Design sind es 585 bzw. 586px - Logo-Zeile (3514:2266) und Recruiting
   (3514:2308). 586px sind bei 16px Schrift rund 70 Zeichen, die Spanne, ab
   der das Auge beim Zeilenwechsel die naechste Zeile verliert.
   Die Regel haengt an der STRUKTUR, nicht an einer Seite: `.u-section-header`
   ist genau der Block aus Eyebrow, h2 und Fliesstext. Damit greift sie
   automatisch, sobald irgendwo eine weitere Sektion mit Fliesstext unter der
   Ueberschrift dazukommt.
   Bewusst nicht `.body-md` global: dieselbe Klasse traegt auch Texte in
   schmalen Spalten (Kontaktzeiten, Jobkarten), die keine Begrenzung brauchen
   und durch eine globale Regel nur unnoetig eingeengt wuerden. */
.u-section-header .body-md {
  max-width: 586px;
}
/* Der Fliesstext unter der Seiten-H1 ist `body-lg`, nicht `body-md`, und im
   Design 680px breit (3018:6299 / hero-page) - die Headline daneben 760.
   Deshalb eine eigene Regel statt die 586px oben mitzunehmen. */
/* 3. Sep: Groesse und Zeilenhoehe dazu. Im Design ist dieser Absatz
   `Text Main` — 18px, Zeilenhoehe 1.4 (Figma 3929:3687 /karriere und
   3018:6305 /unternehmen, beide identisch). Gebaut trug er `body-lg`,
   also `text-large` (20px) und `line-height/compact` (1.2). Die Klasse
   `body-lg` bleibt unangetastet — sie ist hier nur die falsche Rolle,
   und der Fliesstext unter der Seiten-H1 ist der einzige Ort, an dem
   sie im ganzen Bau vorkommt. */
.u-section.is-hero-page .body-lg {
  max-width: 680px;
  font-size: var(--_sizes---font-size--text-main);
  line-height: var(--_sizes---font--line-height--normal);
}
/* ------------------------------------------------- Hero zur Statszeile
   Im Design schliesst `hero-page` unten mit padding 0 ab, und `about-intro`
   oeffnet mit `text/gap-xl` (40px). Gebaut erben beide pauschal `.u-section`
   mit 96px oben UND unten - macht 192px statt 40.
   Beide Sektionen stossen nur auf /unternehmen direkt aneinander, deshalb
   der Geschwister-Selektor statt zweier Einzelregeln: so bleibt die
   Grundregel fuer alle anderen Sektionen unberuehrt. */
.u-section.is-hero-page {
  padding-bottom: var(--_sizes---space--0);
}
.u-section.is-hero-page + .u-section.is-about-intro {
  padding-top: var(--_sizes---text--gap-xl);
}
/* ----------------------------------------------------------- Stat-Karten
   Zwei Varianten, dieselbe Komponente: auf der Startseite (3514:2205) sind die
   Karten `neutral-100`, auf /unternehmen (3735:15000) `white`. Das ist kein
   Versehen im Design, sondern Absicht - auf /unternehmen sitzen sie in einer
   Sektion, die selbst schon abgesetzt ist.
   Die Webflow-Klasse .stat traegt den Standardwert `white`. Die graue Variante
   haengt am KONTEXT statt an einer Kombiklasse: die Startseiten-Karten stecken
   in .stats-row, die auf /unternehmen in .u-grid-4.is-stats. Eine Kombiklasse
   an der Instanz waere hier nicht moeglich - `stat` ist eine Komponente, und
   die Klasse gaebe es dann auf beiden Seiten.
   Bis 23. Aug fiel das nicht auf, weil der Seitenhintergrund selbst
   `#f4f2ed` war: gegen dieses Grau war `white` kaum vom Kartengrau zu
   unterscheiden. Erst mit weissem Body wurde der Unterschied sichtbar. */
.stats-row .stat {
  background-color: var(--_colour---neutral-100);
}
/* ------------------------------------------------------------ Jobkarten
   23. Sep: NEUER AUFBAU. Die Karte klappt nicht mehr auf.
   Geschlossen (Figma 4567:21842, JobCard_small 588 x 560): Foto oben,
   darunter Pills und Titel. Zwei Karten nebeneinander, unter 768px eine
   je Zeile. Ein Klick irgendwo auf die Karte oeffnet die volle
   Beschreibung im Stellen-Modal (Figma 4826:20482) - siehe footer.js,
   "Jobkarten -> Stellen-Modal".
   Abstaende wie im Entwurf und mit DENSELBEN Variablen, damit sie auf
   Tablet und Mobil mitskalieren:
     Innenabstand seitlich   card/padding              40
     unten                   layout/column-gap-lg      64
     Pills -> Titel          control/gap-sm            12
     zwischen den Pills      space/1                    8  (*)
     Karte -> Karte          layout/grid-gap           24
   (*) Figma nennt das `text-gap-sm` = 8px. Die Webflow-Variable
   `text/gap-sm` steht aber auf space/2 = 12px, `text/gap-xs` auf 8px -
   beide eine Stufe hoeher als in Figma. Sie stammen nicht aus dem
   Generator (tokens.json kennt `text-gap` nicht, siehe
   qa/ingester-findings.md). Deshalb hier die Primitive mit dem Figma-Wert
   statt der gleichnamigen, aber falschen Semantik-Variable.
   Foto -> Pills: im Entwurf 30px (Inhalt bei y=380, Foto endet bei 350).
   Figma setzt das als festen Wert, nicht als Variable - hier ebenso.
   Titel: H2 aus dem Entwurf - font-size/h2, Zeilenhoehe 1.1, -1 %
   Laufweite, neutral-700. Vorher trug die Karte h3 (32px). */
.job-list_items .w-dyn-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--_sizes---layout--grid-gap);
}
@media screen and (max-width: 767px) {
  .job-list_items .w-dyn-items { grid-template-columns: minmax(0, 1fr); }
}
/* Die Karte fuellt die Zeilenhoehe - Karten derselben Zeile sind gleich
   hoch, auch wenn ein Titel zweizeilig ist. */
.job-list_items .w-dyn-item { display: flex; }
.job-card {
  position: relative;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0 0 var(--_sizes---layout--column-gap-lg);
  overflow: hidden;
  isolation: isolate;
}
.job-card_image {
  aspect-ratio: 588 / 350;
  height: auto;
  object-fit: cover;
}
.job-card_content {
  padding: 30px var(--_sizes---card--padding) 0;
  row-gap: var(--_sizes---control--gap-sm);
}
.job-card_meta {
  column-gap: var(--_sizes---space--1);
  row-gap: var(--_sizes---space--1);
}
/* Eine leere Pill (Feld im CMS leer) nicht als leeren Rahmen zeigen. Die
   Initiativbewerbung traegt im Entwurf nur zwei Pills. */
.job-card_meta > .tag-pill.w-dyn-bind-empty,
.job-card_meta > .tag-pill:empty {
  display: none;
}
.job-card_title {
  font-size: var(--_sizes---font-size--h2);
  font-weight: var(--_sizes---font--weight--bold);
  line-height: var(--_sizes---font--line-height--tight);
  letter-spacing: var(--_sizes---font--tracking--tight);
  color: var(--_colour---neutral-700);
}
/* Der Text der Stelle steht weiter in der Karte (Quelle fuer das Modal),
   wird aber erst ausgeblendet, wenn footer.js das Modal wirklich
   eingerichtet hat (`has-job-modal`). Ohne JS bleibt er lesbar. */
html.has-job-modal .job-card_details { display: none; }
/* Der bestehende <button> der Karte wird zur Klickflaeche ueber die ganze
   Karte - ein Knopf je Karte, per Tastatur erreichbar, Name setzt das JS
   ("<Titel>: Stellenbeschreibung anzeigen"). Ohne JS gibt es nichts zu
   oeffnen, dann ist er ausgeblendet. */
.job-card_expand { display: none; }
html.has-job-modal .job-card_actions { position: static; }
html.has-job-modal .job-card_expand {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}
.job-card_expand:focus { outline: none; }
/* Die Karte schneidet ueber `overflow: hidden` alles ab, was nach aussen
   ragt - der Fokusring liegt deshalb innen. */
.job-card_expand:focus-visible {
  outline: 2px solid var(--_colour---brand-500);
  outline-offset: -4px;
}
@media (prefers-reduced-motion: no-preference) {
  .job-card_image {
    transition: transform calc(var(--_sizes---motion--duration--fast) * 2ms) cubic-bezier(0.16, 1, 0.3, 1);
  }
  .job-card:hover .job-card_image { transform: scale(1.03); }
}
/* ------------------------------------------------------- Stellen-Modal
   Aufbau nach Figma 4826:20482, aber HELL statt dunkel (Vorgabe 23. Sep):
   neutral-100 als Grund, neutral-700 fuer Text, Knoepfe orange.
   Das Foto sitzt oben rechts (53 % der Breite) und laeuft nach links in
   den Grund aus - im Entwurf der Verlauf von 48 % bis 66 % der Karte, hier
   auf die Bildbreite umgerechnet (2,5 % bis 36 %).
   Der Inhalt scrollt, die Knopfleiste nicht: sie ist ein eigenes Kind des
   Dialogs unter dem Scrollbereich und steht damit immer unten links. */
.job-modal {
  container-type: inline-size;
  width: min(100% - 2 * var(--site-margin, 16px), 1200px);
  max-width: none;
  max-height: calc(100dvh - 2 * var(--_sizes---space--6));
  padding: 0;
  border: 0;
  border-radius: var(--_sizes---radius--lg);
  background-color: var(--_colour---neutral-100);
  color: var(--_colour---neutral-700);
  overflow: hidden;
}
/* NUR im offenen Zustand flex - ein geschlossener Dialog mit eigenem
   display bliebe sichtbar (siehe `.gallery-modal[open]`). */
.job-modal[open] {
  display: flex;
  flex-direction: column;
}
.job-modal::backdrop {
  background-color: rgba(16, 30, 38, 0.82);
}
.job-modal_scroll {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* html.is-modal-open setzt `touch-action: none` fuer die Seite - hier
     muss senkrechtes Wischen wieder scrollen. */
  touch-action: pan-y;
  padding: var(--_sizes---card--padding) var(--_sizes---card--padding) 0;
}
.job-modal_media {
  position: absolute;
  top: 0;
  right: 0;
  width: 53.06%;
  aspect-ratio: 636 / 380;
}
.job-modal_media[hidden] { display: none; }
.job-modal_media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--_colour---neutral-100) 2.5%,
    rgba(238, 238, 238, 0) 36.3%
  );
}
.job-modal_image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Kopf: Pills und Titel, links neben dem Foto. Die Mindesthoehe reicht bis
   zur Bildunterkante (Bildhoehe = 53.06 % Breite x 380/636 = 31.7cqi),
   damit der Text darunter nicht ins Foto laeuft. */
.job-modal_head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: var(--_sizes---control--gap-sm);
  padding-top: calc(var(--_sizes---space--tap-min) + var(--_sizes---text--gap-xl));
}
/* Der Titel darf ueber die volle Breite laufen, wie im Entwurf (dort
   1120px Textbreite, der Titel reicht in den Fotoverlauf). Eine Grenze bei
   52 % brach "Lehre Fahrzeugbautechniker:in" in zwei Zeilen (23. Sep). */
.job-modal.has-image .job-modal_head {
  min-height: calc(31.7cqi - var(--_sizes---card--padding));
}
.job-modal_head .job-card_meta {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--_sizes---space--1);
  row-gap: var(--_sizes---space--1);
}
.job-modal_title {
  margin: 0;
  /* "Fahrzeugbautechniker" ist in H1 breiter als ein Telefon - ohne
     Trennung lief es rechts aus dem Fenster (gemessen bei 390px). */
  hyphens: auto;
  overflow-wrap: break-word;
  font-size: var(--_sizes---font-size--h1);
  font-weight: var(--_sizes---font--weight--bold);
  line-height: var(--_sizes---font--line-height--snug);
  /* Der Titel laeuft ueber die volle Breite ins Foto. Im dunklen Entwurf
     stand weisse Schrift auf dunklem Bild; hell ist es dunkle Schrift auf
     dunklem Bild - ohne Schein war "...chniker:in" kaum lesbar. Ein
     weicher Schein in der Grundfarbe, kein Kasten. */
  text-shadow:
    0 0 8px rgba(238, 238, 238, 0.9),
    0 0 20px rgba(238, 238, 238, 0.8),
    0 0 40px rgba(238, 238, 238, 0.6);
  letter-spacing: var(--_sizes---font--tracking--tight);
  color: var(--_colour---neutral-700);
}
/* "(M/W/D)" als eigene Zeile, 18px Versalien, 9 % Laufweite - im Entwurf
   mit einer leeren 18px-Zeile Abstand zum Titel. */
.job-modal_title-suffix {
  display: block;
  margin-top: 1.16em;
  font-size: var(--_sizes---font-size--text-main);
  line-height: var(--_sizes---font--line-height--compact);
  letter-spacing: var(--_sizes---font--tracking--widest);
  text-transform: uppercase;
}
/* Bloecke: Ueberschrift H4, Liste text-main. Zwischen den Bloecken
   text/gap-lg (24), Ueberschrift -> Liste control/gap-sm (12). Der Wrapper
   traegt die 12 als row-gap; die Ueberschrift holt sich die Differenz zu
   24 als Rand. */
.job-modal_body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: var(--_sizes---control--gap-sm);
  margin-top: var(--_sizes---text--gap-xl);
  padding-bottom: var(--_sizes---card--padding);
}
.job-modal_body .job-card_blocktitle {
  margin: calc(var(--_sizes---text--gap-lg) - var(--_sizes---control--gap-sm)) 0 0;
  font-size: var(--_sizes---font-size--h4);
  font-weight: var(--_sizes---font--weight--bold);
  line-height: var(--_sizes---font--line-height--relaxed);
  color: var(--_colour---neutral-700);
}
.job-modal_body > :first-child { margin-top: 0; }
.job-modal_body .job-card_tasks,
.job-modal_body .job-card_lede,
.job-modal_body .job-card_pay {
  padding-left: 0;
  font-size: var(--_sizes---font-size--text-main);
  line-height: var(--_sizes---font--line-height--normal);
  color: var(--_colour---neutral-700);
}
/* Einzug der Aufzaehlung laut Entwurf 27px (Punkt ausserhalb). */
.job-modal_body .job-card_tasks.w-richtext ul {
  padding-left: 27px;
}
/* Knopfleiste. Kein Rahmen im Entwurf; sobald Inhalt darunter
   durchscrollt, trennt ein leichter Schatten (Klasse aus footer.js). */
.job-modal_actions {
  display: flex;
  flex-wrap: wrap;
  flex: none;
  justify-content: flex-start;
  gap: var(--_sizes---text--gap-md);
  padding: var(--_sizes---text--gap-lg) var(--_sizes---card--padding) var(--_sizes---card--padding);
  background-color: var(--_colour---neutral-100);
}
.job-modal_actions[hidden] { display: none; }
.job-modal.is-scrollable .job-modal_actions {
  box-shadow: 0 -1px 0 var(--_colour---neutral-200);
}
.job-modal .job-card_apply,
.job-modal .job-card_more {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: var(--_sizes---space--xxs);
  box-sizing: border-box;
  min-height: var(--_sizes---space--tap-min);
  margin: 0;
  padding: var(--_sizes---control--gap-sm) var(--_sizes---text--gap-lg);
  border-radius: var(--_sizes---radius--pill);
  font-size: var(--_sizes---font-size--text-xxs);
  font-weight: var(--_sizes---font--weight--bold);
  line-height: normal;
  text-decoration: none;
  white-space: nowrap;
  visibility: visible;
  opacity: 1;
}
.job-modal .job-card_apply {
  border: 0;
  background-color: var(--_colour---accent-color-aa);
  color: var(--_colour---white);
}
.job-modal .job-card_more {
  border: var(--_sizes---border-width--main) solid var(--_colour---accent-color-aa);
  background-color: transparent;
  color: var(--_colour---accent-color-aa);
}
.job-modal .job-card_apply:hover {
  background-color: color-mix(in srgb, var(--_colour---accent-color-aa) 85%, black);
}
.job-modal .job-card_more:hover {
  background-color: var(--_colour---accent-color-aa);
  color: var(--_colour---white);
}
.job-modal .job-card_apply:focus-visible,
.job-modal .job-card_more:focus-visible {
  outline: 2px solid var(--_colour---accent-color-aa);
  outline-offset: 2px;
}
/* Telefon- und Mail-Symbol wie im Entwurf, abhaengig vom Linkziel - so
   bekommt die Initiativbewerbung sie automatisch, "Jetzt bewerben" nicht. */
.job-modal a[href^="tel:"]::before,
.job-modal a[href^="mailto:"]::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--job-icon) center / contain no-repeat;
  mask: var(--job-icon) center / contain no-repeat;
}
.job-modal a[href^="tel:"] {
  --job-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 15.5c-1.25 0-2.45-.2-3.57-.57a1.02 1.02 0 0 0-1.02.24l-2.2 2.2a15.05 15.05 0 0 1-6.59-6.59l2.2-2.21a.96.96 0 0 0 .25-1A11.36 11.36 0 0 1 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z'/%3E%3C/svg%3E");
}
.job-modal a[href^="mailto:"] {
  --job-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0-8 5-8-5h16zm0 12H4V8l8 5 8-5v10z'/%3E%3C/svg%3E");
}
/* Schliessknopf: weisser Kreis oben rechts, wie der Knopf im Entwurf -
   dort ein Chevron (Ueberbleibsel des Akkordeons), hier ein X. */
.job-modal_close {
  position: absolute;
  top: var(--_sizes---card--padding);
  right: var(--_sizes---card--padding);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--_sizes---space--tap-min);
  height: var(--_sizes---space--tap-min);
  padding: 0;
  border: 0;
  border-radius: var(--_sizes---radius--pill);
  background-color: var(--_colour---white);
  color: var(--_colour---neutral-700);
  cursor: pointer;
}
.job-modal_close::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.job-modal_close:focus { outline: none; }
.job-modal_close:focus-visible {
  outline: 2px solid var(--_colour---brand-500);
  outline-offset: 2px;
}
/* Mobil: Foto ueber die volle Breite oben, kein Verlauf, Text darunter -
   daneben waere kein Platz. Abstand Foto -> Pills wie auf der Karte. */
@media screen and (max-width: 767px) {
  .job-modal {
    max-height: calc(100dvh - 2 * var(--_sizes---space--4));
  }
  .job-modal_media {
    position: relative;
    width: auto;
    margin: calc(-1 * var(--_sizes---card--padding)) calc(-1 * var(--_sizes---card--padding)) 0;
    aspect-ratio: 588 / 350;
  }
  .job-modal_media::after { content: none; }
  .job-modal.has-image .job-modal_head {
    max-width: none;
    min-height: 0;
    padding-top: 30px;
  }
  /* Mobil H2 wie auf der Karte - H1 steht dort auf einer Breite von
     302px Text und bricht jedes zweite Wort. */
  .job-modal_title { font-size: var(--_sizes---font-size--h2); }
}
/* ------------------------------------------------------------- Chronik
   Die neun Geschichten liegen im Grid uebereinander statt display:none, damit
   der laengste Eintrag die Hoehe bestimmt und die Sektion beim Wechseln nicht
   springt. Nur Deckkraft und Sichtbarkeit wechseln - die Motion-Regel im
   Projekt erlaubt ausschliesslich transform und opacity, und ein Hoehensprung
   waere ohnehin height.
   Basisgestaltung (Grid, Spalten, Bildmasse) steht als Webflow-Klasse. Hier
   nur der Zustandswechsel, den die Designer-UI nicht ausdruecken kann. */
.timeline_story-item {
  transition:
    opacity calc(var(--_sizes---motion--duration--fast) * 1ms) cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear calc(var(--_sizes---motion--duration--fast) * 1ms);
}
.timeline_story-item.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
/* Aktives Jahr weiss, inaktive neutral-300 (Design 3127:25164). */
.timeline_year.is-active,
.timeline_year[aria-pressed="true"] {
  color: var(--_colour---white);
  font-weight: var(--_sizes---font--weight--bold);
}
.timeline_arrows .carousel_arrow:disabled {
  opacity: 0.35;
  cursor: default;
}
/* Die Chronik-Pfeile stehen auf neutral-700, nicht auf hellem Grund. Im Design
   (3730:14366) sind sie darum invertiert: transparente Flaeche, 2px weisser
   Rand, weisses Icon. Die Basisklasse .carousel_arrow traegt die helle Variante
   (weisse Flaeche, brand-500 Rand, blaues Icon) und gilt weiter fuer die
   Instagram-Galerien - deshalb hier auf .timeline_arrows eingegrenzt und nicht
   an der geteilten Klasse geaendert. */
.timeline_arrows .carousel_arrow {
  background-color: transparent;
  border-color: var(--_colour---white);
  background-image: url("https://cdn.prod.website-files.com/6a8566a5ee577323e74ca7cf/6a8950c8f2e4e8f19ed53c7f_icon-arrow-white.svg");
}
/* ----------------------------------------- CMS-Wrapper durchlaessig machen
   Seit der Bindung an die Collection schiebt Webflow `.w-dyn-items` und
   `.w-dyn-item` zwischen Container und Eintrag. Beide sind `display: block`.
   Damit greift weder `grid-area` am Story-Item noch die Flex-Reihe der Achse:
   das direkte Kind des Rasters ist der Wrapper, nicht der Eintrag.
   Folge vor dem Fix: neun Stories a 420px untereinander (3640px statt 448)
   und neun Jahreszahlen untereinander (405px statt 45). Beides gemessen.
   Die Regeln reichen das Layout eine Ebene durch. Sie muessen hier stehen -
   die Designer-UI kann `.w-dyn-*` nicht stylen. */
.timeline_story .w-dyn-items { display: grid; }
.timeline_story .w-dyn-item  { grid-area: 1 / 1; }
.timeline_axis > .w-dyn-items {
  flex: 1 1 auto;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  display: flex;
}
/* Eyebrow und Headline stehen auf neutral-700. Die Basisklassen tragen die
   Textfarben der hellen Sektionen (brand-500 / neutral-700) und waeren hier
   praktisch unlesbar. Design: brand-300 auf Eyebrow, weiss auf der Headline. */
.is-timeline .eyebrow { color: var(--_colour---brand-300); }
.is-timeline .heading-xl { color: var(--_colour---white); }
/* Die Jahreszahl ueber dem Story-Text. Webflow rendert sie als
   `.timeline_story-key`, die Klasse stand auf `display: none` - im Design
   (3127:25122) steht sie sehr wohl da: Text Small, brand-300, ueber dem Text. */
.timeline_story-key {
  margin-bottom: var(--_sizes---space--1);
  color: var(--_colour---brand-300);
  font-size: var(--_sizes---font-size--text-small);
  font-weight: var(--_sizes---font--weight--regular);
  letter-spacing: var(--_sizes---font--tracking--wide);
  display: block;
}
/* Die Achslinie hinter den Punkten. Im Design (`AxisLine`, 3127:25127) ist es
   ein 1px-Rechteck in neutral-200, das GENAU am ersten Punkt beginnt und am
   letzten endet - nicht ueber die volle Containerbreite.
   Im Markup gibt es dafuer kein Element. Eine durchgehende Linie auf dem
   Container waere falsch: sie ragte links und rechts um eine halbe
   Jahresbreite ueber die aeusseren Punkte hinaus (gemessen 39px bei 1440).
   Darum je ein Segment pro Jahr, von der eigenen Punktmitte bis zur naechsten:
   `left: 50%` startet in der Mitte, `width: 100%` reicht genau eine
   Elementbreite weiter. Das letzte Jahr bekommt keins - so endet die Linie
   exakt im letzten Punkt.
   Voraussetzung ist, dass zwei Punktmitten immer genau eine Elementbreite
   auseinanderliegen. Deshalb `flex-start` + `flex: 1 0 auto` statt
   `space-between`: letzteres verteilt den Rest als Luecken ZWISCHEN den
   Elementen, und die Segmente kaemen 39px zu kurz an. `flex-grow` verteilt
   denselben Platz stattdessen IN die Elemente - die Punkte sitzen an
   derselben Stelle, aber die Rechnung geht auf.
   `flex-shrink: 0` haelt die Jahreszahlen unter 768 lesbar; dort scrollt die
   Achse ohnehin (scroll-snap weiter oben). */
.timeline_axis { position: relative; }
.timeline_axis .w-dyn-items {
  justify-content: flex-start;
  column-gap: 0;
}
.timeline_axis .w-dyn-item {
  flex: 1 0 auto;
  position: relative;
}
.timeline_axis .w-dyn-item:not(:last-child)::after {
  content: "";
  background-color: var(--_colour---neutral-200);
  height: 1px;
  width: 100%;
  position: absolute;
  top: 4px;
  left: 50%;
  z-index: 0;
}
.timeline_year {
  z-index: 1;
  width: 100%;
  position: relative;
}
/* Nur das aktive Jahr ist fett und weiss (Text Large Bold), die uebrigen
   neutral-300 Regular. Die Auszeichnung sitzt am Label, weil die Farbe am
   Button vom Label geschlagen wird - gleiches Muster wie beim Sekundaerbutton. */
.timeline_year .timeline_year-label {
  color: var(--_colour---neutral-300);
  font-weight: var(--_sizes---font--weight--regular);
}
.timeline_year.is-active .timeline_year-label,
.timeline_year[aria-pressed="true"] .timeline_year-label {
  color: var(--_colour---white);
  font-weight: var(--_sizes---font--weight--bold);
}
/* Ohne JS setzt niemand is-active - dann waere das Panel leer. Der erste
   Eintrag muss sichtbar sein, gleiches Muster wie .wf-no-js [data-reveal]. */
.wf-no-js .timeline_story-item:first-child {
  opacity: 1;
  visibility: visible;
}
/* ---------------------------------------------------------- hover states
   ALLE Hover-Zustaende stehen hier, nicht als Webflow-Klasse. Grund: die
   Designer-UI kann keine Media Query um einen :hover legen - was ueber
   pseudo:"hover" gesetzt wird, landet immer top-level und gilt damit auch auf
   Touch. Dort bleibt der Zustand nach dem Tippen kleben, bei den Pfeilen
   besonders sichtbar, weil sie nicht navigieren sondern blaettern.
   hover:hover = das Geraet kann schweben, pointer:fine = praezise Eingabe.
   Ein iPad mit Maus erfuellt beides und bekommt den Hover - richtig so.
   Werte aus Figma: Primary hover 3735:15108, Secondary 3735:15112,
   Pfeil 3664:14300 - brand-700 bzw. brand-500, jeweils mit weisser Schrift.
   Das weisse Pfeil-Icon ist eine zweite SVG-Datei: ein background-image
   laesst sich per CSS nicht umfaerben. */
@media (hover: hover) and (pointer: fine) {
  .button-primary,
  .button-secondary,
  .button-secondary_label,
  .carousel_arrow {
    transition:
      background-color calc(var(--_sizes---motion--duration--fast) * 1ms) ease,
      border-color calc(var(--_sizes---motion--duration--fast) * 1ms) ease,
      color calc(var(--_sizes---motion--duration--fast) * 1ms) ease;
  }
  .button-primary:hover {
    background-color: var(--_colour---brand-700);
  }
  .button-secondary:hover {
    background-color: var(--_colour---brand-700);
    border-color: var(--_colour---brand-700);
  }
  /* Die Textfarbe sitzt auf dem Label-Kind und schlaegt den Wert am Button. */
  .button-secondary:hover .button-secondary_label {
    color: var(--_colour---white);
  }
  /* :not(:disabled) — an den Enden der Chronik-Achse sind die Pfeile
     deaktiviert und duerfen nicht auf Hover reagieren. */
  .carousel_arrow:not(:disabled):hover {
    background-color: var(--_colour---brand-500);
    background-image: url("https://cdn.prod.website-files.com/6a8566a5ee577323e74ca7cf/6a8950c8f2e4e8f19ed53c7f_icon-arrow-white.svg");
  }
  .timeline_year:hover { color: var(--_colour---white); }
  /* Beide Navigationen teilen denselben Hover. Die Desktop-Regel stand bis
     22. Aug top-level und klebte damit auf Touch fest; die Mobil-Links hatten
     gar keinen. */
  .nav-primary_link:hover,
  .nav-mobile_link:hover {
    color: var(--_colour---action--default);
  }
  /* Footer-Links bekommen denselben Hover wie die Navigation, aber NICHT
     denselben Wert. Die Nav steht auf Weiss, der Footer auf `surface/brand`
     (brand-700). Dort erreicht action/default nur 1.81:1 und brand-400 2.29:1 -
     beide unter AA, der Hover wuerde den Link praktisch unlesbar machen.
     brand-300 kommt auf 5.63:1, ist derselbe Farbton fuer dunklen Grund und
     sitzt im Footer bereits als `text/on-brand-muted`. */
  .footer-main_link {
    transition: color calc(var(--_sizes---motion--duration--fast) * 1ms) ease;
  }
  .footer-main_link:hover {
    color: var(--_colour---brand-300);
  }
  .closing-cta_btn-outline:hover {
    background-color: var(--_colour---white);
    color: var(--_colour---brand-500);
  }
  .closing-cta_btn:hover {
    background-color: var(--_colour---brand-300);
  }
}
/* Reduced motion is the OPACITY-ONLY variant, never the absence of the effect.
   Only movement is removed; the fade and the stagger survive.
   Der gespiegelte Linkspfeil ist KEINE Animation - scaleX bleibt. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal].is-revealed, #mobile-menu { transform: none; }
  .carousel_arrow[data-carousel="prev"] { transform: scaleX(-1); }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
/* No JavaScript: content must be visible, never stuck at opacity 0. */
.wf-no-js [data-reveal] { opacity: 1; transform: none; }
/* --------------------------------------------------------- hero, 22 Aug
   Der Text liegt jetzt UEBER dem Video, mit einem Verlauf darunter. Vorher war
   es ein Videoband mit der Headline darunter auf hell - das Design hat sich
   geaendert, nicht meine Lesart. */
/* Einfahren von links, dabei transparent -> opak. Startzustand steht hier,
   damit der Text nie kurz an der Endposition aufblitzt, bevor JS laeuft.
   Werte auf Wunsch vom 25. Aug: Strecke 120px, Dauer 2s, Start 1s nach
   dem Laden. Die Verzoegerung steckt NICHT in `transition-delay`, sondern
   in footer.js - sonst zaehlt sie ab dem Moment, in dem die Klasse
   gesetzt wird, und das ist nicht zuverlaessig der Ladezeitpunkt.
   Alle drei sind Literale: die Skala kennt weder 120px (distance/lg = 40)
   noch 2000ms (duration/slow = 500). Ein erfundenes Token waere eines,
   das im Design nicht existiert. Kommen sie dazu, gehoeren die Werte
   dorthin zurueck. */
[data-hero-reveal] {
  opacity: 0;
  transform: translateX(-120px);
  transition:
    opacity 2000ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 2000ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-hero-reveal].is-revealed { opacity: 1; transform: translateX(0); }
/* Ohne JS bleibt der Text sonst unsichtbar - das waere schlimmer als keine
   Animation. */
.wf-no-js [data-hero-reveal] { opacity: 1; transform: none; }
/* --------------------------------------------- sticky Bewerben-Button
   Optisch identisch zu button-primary, nur fixiert. Unten rechts, ueber allem
   ausser dem Mobilmenue (z-index 100). */
/* ÜBERGANGSLÖSUNG — 25. Aug. Abstand fest auf 48px statt am Token.
   ZURÜCKBAUEN, sobald das "Made in Webflow"-Banner in der Produktion weg
   ist (es verschwindet mit Site-Plan + eigener Domain, siehe qa/TODO.md).
   Dann diese beiden Zeilen wieder auf den Token setzen:
     right:  var(--_sizes---site--margin);
     bottom: var(--_sizes---site--margin);
   Der Token loest bereichsweise auf - 48px ab 992, darunter 32 und 16.
   Das ist das gewollte Verhalten; die feste 48 ist nur so lange richtig,
   wie das Badge unten rechts Platz braucht. */
.sticky-apply {
  position: fixed;
  bottom: 48px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--_sizes---space--tap-min);
  padding: var(--_sizes---space--2) var(--_sizes---space--4);
  border-radius: var(--_sizes---radius--pill);
  /* 25. Aug: von action/default (blau) auf action/accent (orange) - wie der
     Telefonbutton in der Navigation. Nur die Farbe, Geometrie unveraendert. */
  background-color: var(--_colour---action--accent);
  color: var(--_colour---text--on-brand);
  /* Transparenter Rand haelt die Hoehe konstant, wenn im Hover ein
     sichtbarer Rand dazukommt - gleiche Technik wie bei .nav-primary_tel. */
  border: 2px solid #0000;
  box-sizing: border-box;
  font-family: var(--_sizes---font--family--sans);
  font-size: var(--_sizes---font-size--text-xxs);
  font-weight: var(--_sizes---font--weight--bold);
  text-decoration: none;
  box-shadow: 0 2px 12px rgba(16, 30, 38, 0.28);
  transition:
    background-color calc(var(--_sizes---motion--duration--fast) * 1ms) ease,
    color calc(var(--_sizes---motion--duration--fast) * 1ms) ease,
    border-color calc(var(--_sizes---motion--duration--fast) * 1ms) ease;
}
/* Dauerhaft sichtbar, ab dem ersten Frame. War bis 22. Aug an den Hero
   gekoppelt (IntersectionObserver + .is-visible) - bewusst entfernt: der
   Button soll immer unten rechts stehen, nicht erst nach dem Hero. */
.sticky-apply { opacity: 1; visibility: visible; }
/* Waehrend das Mobilmenue offen ist, darf er nicht darueber liegen. */
html.is-menu-open .sticky-apply { display: none; }
/* Dasselbe, solange die Grossansicht offen ist — 17. Sep.
   Der Dialog liegt zwar darueber (Top Layer schlaegt jeden z-index),
   aber der orange Knopf schimmert durch die Abdunklung und sitzt auf
   dem Telefon direkt neben den Blaetter-Pfeilen. Gemessen: der Pfeil
   bleibt anklickbar, es ist rein optisch - trotzdem unruhig.
   `:has()` statt einer Klasse per Skript: der Zustand steht schon im
   DOM (`dialog[open]`), ein zweiter Schalter waere eine zweite Stelle,
   die man vergessen kann. Alle Browser ab 2023 koennen es; wo nicht,
   bleibt es beim heutigen Verhalten - kein Ausfall, nur kein Gewinn. */
body:has(dialog.gallery-modal[open]) .sticky-apply { display: none; }
/* 17. Sep: Auf /karriere ausblenden.
   Der Marker `data-seite="karriere"` sitzt am <html> und wird im Head der
   Karriere-Seite gesetzt (Page settings -> Custom code -> Head).
   Bewusst NICHT an `.sticky-apply.w--current` gehaengt: das haette die
   Sichtbarkeit an das LINKZIEL gekoppelt statt an die Seite. Zeigt der
   Button eines Tages woanders hin - auf ein Formular, auf /kontakt -,
   waere er auf /karriere wieder da und dafuer auf der falschen Seite weg.
   Die Anforderung ist "auf /karriere ausblenden", unabhaengig davon,
   wohin der Button verlinkt. Genau das steht hier.
   `display: none` statt visibility/opacity, damit der Knopf auch aus der
   Tab- und Vorlesereihenfolge faellt. */
html[data-seite="karriere"] .sticky-apply { display: none; }
/* 23. Sep: Im Hero von /karriere steht nur noch "Offene Stellen ansehen".
   NUR dort - `hero-page` ist geteilt und traegt dieselben zwei Buttons auf
   /unternehmen, die unveraendert bleiben sollen. Deshalb ueber den
   Seitenmarker statt am Bauteil. */
html[data-seite="karriere"] .hero-video_actions .button-secondary {
  display: none;
}
/* Sanft scrollen statt springen. `scroll-margin-top` haelt die Ueberschrift
   unter der klebenden Navigation frei (gestuckt 69px, plus Luft).
   `prefers-reduced-motion` schaltet das Weiche weiter oben global ab. */
html {
  scroll-behavior: smooth;
}
#stellen {
  scroll-margin-top: 88px;
}
/* 23. Sep: Auf Mobil nach unten LINKS, auf Desktop unverändert rechts.
   `right: auto` ist hier nicht Kosmetik, sondern notwendig. Die Position
   kommt aus der Webflow-Designer-Klasse, und die setzt im selben Bereich
   bereits `right: 24px`. Ein blosses `left: …` liesse beide Werte stehen —
   bei `position: fixed` und automatischer Breite spannt der Browser das
   Element dann zwischen beide Kanten auf, statt es zu verschieben. Der
   Knopf wuerde also nicht wandern, sondern quer ueber den Schirm wachsen.
   Grenze 767 statt 768, weil die Webflow-Regel mit `right: 24px` genau
   auf `max-width: 767px` sitzt. Dieselbe Grenze zu nehmen heisst: es gibt
   keinen Bereich, in dem nur eine der beiden Regeln greift.
   24px auch links, damit der Abstand zur Kante derselbe bleibt wie
   vorher rechts — der Knopf wechselt die Seite, nicht den Randabstand. */
@media (max-width: 767px) {
  .sticky-apply {
    right: auto;
    left: 24px;
    /* 23. Sep: auch nach unten 24 statt 48 - gemessen war der Knopf mobil
       48px vom unteren Rand entfernt, aber nur 24 von der linken Kante.
       Gleicher Wert in beide Richtungen, auf Ansage. */
    bottom: 24px;
  }
}
/* ------------------------------- Freiraum unter dem Footer (23. Sep)
   Der schwebende Bewerben-Knopf verdeckte am Seitenende die Rechtslinks.
   Nachgemessen bei 1440x900, ganz nach unten gescrollt:
     Knopf      x 1199-1392, y 804-852
     Impressum  x 1128-1206  ueberlappt
     Datenschutz x 1230-1320 ueberlappt
   Und das war nicht nur optisch: `elementFromPoint` auf der Mitte von
   "Datenschutz" traf `A.sticky-apply` statt des Links - der Link war
   schlicht nicht anklickbar. Mobil ueberlappen beide ebenfalls, dort
   liegen sie aber links und der Knopf rechts genug daneben.
   Loesung ist Platz statt Umpositionierung: Der Knopf steht `fixed` und
   haelt 48px (mobil 24) zur Unterkante; ein Innenabstand am Footer
   schiebt die Links darueber hinaus.
   Der Footer BRINGT SCHON einen Innenabstand mit - gemessen 48px unten,
   mobil 36. Die Werte hier ersetzen ihn, sind also Gesamtwerte, keine
   Zugaben:
     Desktop 120 = 48 Knopfabstand + 48 Knopfhoehe + 24 Luft
     Mobil    92 = 24 Knopfabstand + 44 Knopfhoehe + 24 Luft
   Bewusst `padding` und nicht `margin`: der Footer traegt die
   Hintergrundfarbe, ein Aussenabstand risse eine weisse Lippe unter die
   Seite. */
.footer-main {
  padding-bottom: 120px;
}
@media (max-width: 767px) {
  .footer-main {
    padding-bottom: 92px;
  }
}
/* Reduced motion: Deckkraft ja, Bewegung nein - wie bei [data-reveal]. */
@media (prefers-reduced-motion: reduce) {
  [data-hero-reveal], [data-hero-reveal].is-revealed { transform: none; }
}
/* Aktive Seite in der Navigation fett. Webflow setzt w--current selbst, wenn
   der Link auf die aktuelle Seite zeigt - das nutzen wir, statt es per JS zu
   berechnen. Die Kombiklasse is-current deckt die Faelle ab, in denen der Link
   als URL statt als Page-Link gesetzt ist. */
.nav-primary_link.w--current,
.nav-mobile_link.w--current,
.nav-primary_link.is-current,
.nav-mobile_link.is-current {
  font-weight: var(--_sizes---font--weight--bold);
}
/* Hover auf Navigations- und Jahreslinks. Stand am 22. Aug im
   ausgelieferten Head-Block, fehlte aber in dieser Datei - beim ersten
   Deploy des Rasterblocks waere er dadurch verloren gegangen. Aufgefallen
   nur, weil der Live-Block vorher gesichert und danach gegen die neue
   Fassung diffed wurde. */
@media (hover: hover) and (pointer: fine) {
  .nav-primary_link,
  .nav-mobile_link,
  .timeline_year {
    transition: color calc(var(--_sizes---motion--duration--fast) * 1ms) ease;
  }
  /* Die Hover-Werte selbst stehen im Block weiter oben - hier stand bis
     23. Aug eine wortgleiche Kopie. Zwei Quellen fuer denselben Hover heisst,
     dass eine Aenderung an einer Stelle stillschweigend von der anderen
     ueberschrieben wird; nur die Transition bleibt hier. */
}
/* D-01 (mobiler Seitenrand 24 -> 16) ist im Rasterblock weiter unten
   aufgegangen: `--site-margin` ist unter 600px 16px und wird dort an alle
   Sektionen vergeben. Die frueher hier stehende Einzelregel fuer fuenf
   Klassen ist damit ueberfluessig und entfernt - zwei Quellen fuer denselben
   Rand waeren genau die Doppelbindung, die das Raster aufloesen soll. */
/* ------------------------------- D-05: Chronik-Bild randlos ab Tablet
   §3 letzte Zeile: `StoryImage` ist auf Tablet und Mobil das einzige
   Sektionsbild, das ueber die volle Breite geht. Es konnte das bisher nicht,
   weil `.timeline_story-item` auf allen Breakpoints `560px 1fr` ist - das
   Bild sitzt in einer 560px-Spur und kann gar nicht ausbrechen.
   Zuerst einspaltig stapeln, dann den Rand negieren. §6.6: das Nullpadding
   der Sektion ist Absicht, der Rand sitzt an den inneren Bloecken - deshalb
   `site/margin` und nicht `site/margin-wide`. */
@media screen and (max-width: 991px) {
  .timeline_story-item {
    grid-template-columns: 1fr;
    grid-row-gap: var(--_sizes---space--5);
  }
  .timeline_story-image {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
  }
  /* Im Markup steht die Jahreszahl VOR dem Bild - einspaltig landet sie damit
     ganz oben, ueber dem Bild statt ueber dem Text. Im Design (3823:3841)
     gehoert sie in den Textblock darunter.
     `order` statt einer Umbaumassnahme, weil das Markup aus der Collection
     kommt. Die Reihenfolge im DOM bleibt Jahr → Bild → Text und damit auch
     die Vorlesereihenfolge; visuell rutscht nur das Jahr hinter das Bild.
     Der Textfluss Jahr → Text bleibt in beiden Reihenfolgen zusammen.
     Kein Zeilenabstand zwischen Jahr und Text: die beiden gehoeren im Design
     zu einem Block, der Abstand von space/5 gilt zum Bild. */
  .timeline_story-image { order: 1; }
  .timeline_story-key   { order: 2; margin-bottom: calc(var(--_sizes---space--5) * -1); }
  .timeline_story-text  { order: 3; }
}
/* ==========================================================================
   RASTERSYSTEM — Umsetzung von _docs/dev-spec-responsive-grid.md
   ==========================================================================
   Die Spezifikation ist seit 22. Aug "approved, ready to implement" und war
   bis hierher nicht gebaut. §1 beschreibt exakt den Fehler, den man bei
   983px Fensterbreite sieht:
     "The site currently breaks between roughly 900 and 1200px. Cause: the
      desktop grid is a fixed 1200px container, and the tablet layout does
      not engage until 768."
   Ursache im Detail: Webflow kennt drei max-width-Bloecke (991/767/479).
   Der Bereich 992-1199 aus §2 existiert dort nicht, also erbt er den
   Tablet-Block - 8 Spalten auf einem fast desktopbreiten Fenster. Zugleich
   binden 21 Klassen `grid/max-width` direkt als Cap, was §4 fuer die
   Tablet- und Mobile-Werte ausdruecklich verbietet.
   Warum hier und nicht im Designer: die Designer-UI kann nur Webflows drei
   Breakpoints. Die sechs Bereiche aus §2 sind dort nicht ausdrueckbar.
   Dieses Stylesheet wird nach dem Webflow-Stylesheet eingebunden und
   gewinnt daher bei gleicher Spezifitaet.
   Die Werte stehen bewusst als Literale und nicht als Figma-Variablen:
   `grid/gutter` aliast in allen drei Modi dasselbe Primitiv und kann
   16/20/24 gar nicht liefern. §7 der Spec nennt sie Bereichswerte, nicht
   Figma-Modi. Einzige Quelle der Wahrheit ist damit dieser Block. */
/* ---------------------------------------------------- §3b Bereichswerte */
:root {
  --grid-columns: 6;
  --grid-gutter: 16px;
  --site-margin: 16px;
  --container-max: 1200px;
}
@media (min-width: 600px)  { :root { --grid-columns: 8;  --grid-gutter: 20px; --site-margin: 32px; } }
@media (min-width: 768px)  { :root { --site-margin: 48px; } }
@media (min-width: 992px)  { :root { --grid-columns: 12; --grid-gutter: 24px; } }
/* §2 sagt fuer 1200-1439: Rand "48 -> 120 fluid". Die Formel in §3b,
   clamp(48px, 10vw, 120px), leistet das NICHT: 10vw sind bei 1200px genau
   120px, der Clamp liefert also sofort sein Maximum. Der Inhalt spraenge bei
   exakt 1200 von 1103 auf 960 - ein Sprung von 143px an einer Grenze, die
   laut §1 gerade ruhig sein soll. Deshalb hier die Interpolation, die §2
   beschreibt: bei 1200 noch 48, bei 1440 die vollen 120.
   Siehe Notiz in _docs/dev-spec-responsive-grid.md §9. */
@media (min-width: 1200px) {
  :root { --site-margin: clamp(48px, calc(48px + (100vw - 1200px) * 0.3), 120px); }
}
@media (min-width: 1440px) { :root { --site-margin: 120px; } }
/* ------------------------------------------------------- §3c Container
   Fluid unterhalb 1440, Cap erst dort: 1200 Inhalt + 2x120 Rand = 1440.
   Genau ein linker Rand fuer jede Sektion, auf jeder Breite. */
.u-section > .u-section-header,
.u-section > .u-grid-2,
.u-section > .u-grid-3,
.u-section > .u-grid-4,
.u-section > .u-two-col,
.u-section > .u-two-col-reverse,
.stats-row,
.videoref_inner,
.videoref_row,
.instagram-gallery_track,
.contact-directory_grid,
.u-dyn-grid-5,
.timeline_story,
.timeline_nav,
.closing-cta_card,
.logo-strip,
.hero-video_content,
.recruiting_strip,
/* `job-list_items` hing an `grid/max-width` - einer Webflow-Variable mit
   FESTEN Pixelwerten je Breakpoint: 1200 / 672 / 358. Das sind die Breiten
   der Figma-Frames, nicht des Viewports. Unter 768px stand die Jobkarte
   dadurch stur auf 358px: bei 390 zufaellig richtig, bei 600 aber 178px
   schmaler als das Teamfoto darueber, das dem fluiden Raster folgt.
   Hier eingereiht faellt sie auf `100% - 2x site-margin` zurueck und ist
   auf jeder Breite genau so breit wie das Foto. */
.job-list_items {
  width: 100%;
  max-width: var(--container-cap, none) !important;
  margin-inline: auto;
  padding-inline: 0 !important;
}
/* Der Cap greift laut §3c erst ab 1440. Statt die lange Selektorliste zu
   wiederholen, traegt sie eine eigene Variable - das spart im
   ausgelieferten Block ueber 700 Zeichen, und die Liste steht nur einmal. */
@media (min-width: 1440px) {
  :root { --container-cap: var(--container-max); }
}
/* Der Aussenrand sitzt an der Sektion, nicht am Inhalt - sonst addiert er
   sich bei verschachtelten Bloecken. Sektionen sind full-bleed, ihr
   Padding erzeugt den Rand (§4, "Full-bleed sections ignore the
   container. Only their inner content obeys the margin"). */
.u-section,
.logo-row,
.footer-main,
.videoref,
.photo-grid,
.team-grid,
.timeline,
.recruiting,
.closing-cta,
.contact-directory,
.location,
.job-list,
.reasons,
.application,
.about-intro {
  padding-inline: var(--site-margin);
}
/* Sektionen sind Flex-Spalten mit `align-items: center`. Das zentriert jedes
   Kind, das nicht die volle Breite hat - genau der Effekt, der `.logo-strip`
   und die Kennzahlen bei 979/1015px nach innen zieht, obwohl der Container
   stimmt. Die Kinder sollen die Containerbreite fuellen und darin selbst
   ausrichten, nicht als Block zentriert werden.
   `align-items` bleibt unangetastet, weil Buttons, Karten und die Navigation
   ihre INHALTE zu Recht zentrieren. Geaendert wird nur die Breite der
   direkten Kinder. */
.u-section > *,
.logo-row > *,
.videoref > *,
.photo-grid > *,
.team-grid > *,
.recruiting > *,
.closing-cta > *,
.contact-directory > * {
  width: 100%;
  align-self: stretch;
}
/* Der Logo-Streifen zentriert seine Logos im Design bewusst (§4.2: 949px
   zentrierter Block). Das darf er - aber innerhalb des Containers, nicht
   als schmaler Block am Raster vorbei. */
.logo-strip {
  width: 100%;
  justify-content: center;
}
/* ------------------------------------ Hero-Inhalt: Rand explizit setzen
   `.hero-video_content` ist `position: absolute; left: 0; right: 0` in der
   bewusst full-bleed Hero-Sektion (§3) - es gibt also kein Elternpadding
   zu erben. `.stats-row` ist ein <ul> direkt im Body, ebenfalls ohne
   Sektion darueber. Beide brauchen den Rand explizit, weil die
   Container-Regel oben ihn mit `padding-inline: 0 !important` entfernt. */
.stats-row,
.hero-video_content {
  padding-inline: var(--site-margin) !important;
}
/* Die H1 sitzt unter 992px buendig auf der Videounterkante - gemessen
   0px Abstand bei 390 und 734, waehrend der Desktop 89px hat.
   `.hero-video_content` ist absolut positioniert und haengt an
   `bottom: section-space/medium`. Dieser Wert loest mobil zu 56px auf und
   POSITIONIERT den Block - einen Abstand zwischen Text und Videokante
   erzeugt er nicht, weil die Ueberschrift im Block unten anliegt.
   Deshalb ein eigener Innenabstand. `space/6` loest mobil zu 28px und im
   Tablet-Modus zu 34px auf - genug Luft, ohne die Ueberschrift aus dem
   unteren Drittel zu heben, wo sie im Design steht. */
@media (max-width: 991px) {
  .hero-video_content {
    padding-bottom: var(--_sizes---space--6);
  }
}
/* Ab 1440 greift der 1200er Cap und zentriert beide Elemente bereits.
   Das Padding von oben kaeme dann OBENDRAUF - gemessen: Inhalt 960 statt
   1200, erste Kennzahl bei 240 statt 120. Ab hier also kein Padding mehr,
   der Cap uebernimmt. */
@media (min-width: 1440px) {
  .stats-row,
  .hero-video_content {
    padding-inline: 0 !important;
  }
}
/* -------------------------------------------- Logo-Streifen: umbrechend
   Aus den Figma-Frames gemessen, nicht geraten:
     Desktop  NO_WRAP, 949px, gap 48, eine Reihe
     Tablet   WRAP,    672px, gap 40, Reihenabstand 32, zentriert
              -> 3 Logos, das vierte bricht um
     Mobil    WRAP,    358px, gap 24, Reihenabstand 24, je 167px
              -> 2-up, zwei Reihen
   Es ist also ueberall unterhalb Desktop ein umbrechender, zentrierter
   Streifen. Ein `space-between` waere an jeder Breite falsch: es zieht die
   aeusseren Logos an die Containerkanten und laesst in der letzten Reihe
   grosse Luecken. Der Streifen selbst fuellt den Container, die Logos
   verteilen sich darin. */
.logo-strip {
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--_sizes---layout--row-gap-lg, 40px);
}
@media (max-width: 991px) {
  .logo-strip { gap: 32px 40px; }
}
@media (max-width: 599px) {
  .logo-strip { gap: 24px; }
  .logo-strip > * { flex: 0 0 calc(50% - 12px); }
}
/* ------------------------------------ Kundenlogos aus dem CMS — 23. Aug
   Der Streifen kommt jetzt aus der Collection `Kundenlogos`. Jedes Logo
   bringt Bild, Alt-Text und eine eigene Hoehe mit.
   Standardhoehe 50px. Die Webflow-Klasse `logo-strip_item` steht auf
   `space/6` (40) - die Regel hier gewinnt, weil sie spaeter kommt und
   dieselbe Spezifitaet hat. Sie gilt fuer beide Faelle, damit ein Logo
   ohne gepflegte Hoehe nicht auf die alten 40 zurueckfaellt.
   Die individuelle Hoehe kommt ueber `--logo-h`, gesetzt aus dem
   CMS-Wert (siehe footer.js). Fehlt der Wert, greift der Fallback 50. */
.logo-strip_item {
  height: var(--logo-h, 50px);
  width: auto;
  object-fit: contain;
}
/* Die Collection List selbst darf das Flex-Layout des Streifens nicht
   stoeren: `w-dyn-list` und `w-dyn-items` sind zusaetzliche Ebenen
   zwischen `.logo-strip` und den Logos. Beide werden transparent
   gemacht, damit die Logos direkte Flex-Kinder bleiben und Gap sowie
   Umbruch wie vorher funktionieren. */
.logo-strip > .w-dyn-list { width: 100%; }
.logo-strip .w-dyn-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--_sizes---layout--row-gap-lg, 40px);
}
@media (max-width: 991px) {
  .logo-strip .w-dyn-items { gap: 32px 40px; }
}
@media (max-width: 599px) {
  .logo-strip .w-dyn-items { gap: 24px; }
  .logo-strip .w-dyn-item { flex: 0 0 calc(50% - 12px); display: flex; justify-content: center; }
}
/* ======================================== Logo-Laufband — 11. Sep
   Die zehn Kundenlogos laufen als durchgehendes Band von rechts nach
   links, statt umbrochen zu stehen. Auf allen Breiten, auch mobil.
   12. Sep: gilt jetzt fuer BEIDE Streifen - `.logo-strip` auf der
   Startseite und `.fz-logo-strip` auf den neun /fahrzeuge-Detailseiten.
   Seit der Umstellung auf die Collection `Kundenlogos` zeigen beide
   dieselben Logos und sollen sich gleich verhalten. Die Klassen sind
   historisch getrennt (unterschiedliche Gaps und Hintergruende); fuer
   den Laufband-Zustand steht deshalb jede Regel doppelt, statt die
   Klassen zusammenzulegen.
   WIE ES FUNKTIONIERT. `footer.js` haengt eine zweite, identische Kopie
   der Logo-Liste an. Das Band wird um GENAU die Breite einer Kopie nach
   links geschoben; in dem Moment steht die Kopie exakt dort, wo das
   Original startete, und der Sprung zurueck auf 0 ist unsichtbar. Die
   Breite wird nicht geraten, sondern in `footer.js` gemessen und als
   `--marquee-w` gesetzt - bei Logos aus dem CMS ist sie nicht vorhersehbar.
   Gerechnet: zehn Logos auf 50px Hoehe ergeben 1933px, dazu zehn Gaps
   à 48 = 2413px je Durchlauf. Sichtbar sind 1200px. Eine Kopie ist also
   doppelt so breit wie das Fenster - es kann keine Luecke entstehen.
   WARUM `translate3d` UND KEIN `left`: Transform und Opacity sind die
   einzigen Eigenschaften, die dieses Projekt animiert (siehe README).
   `translate3d` statt `translateX`, damit die Ebene auf der GPU bleibt;
   ein 2413px breites Band auf der CPU ruckelt auf schwaecheren Geraeten. */
.logo-strip.is-marquee,
.fz-logo-strip.is-marquee {
  /* Der Streifen wird zum Fenster: was links und rechts hinauslaeuft,
     wird abgeschnitten. `flex-wrap` muss weg - die Regeln oben setzen
     `wrap`, und ein umbrechendes Band ist kein Band. */
  display: block;
  overflow: hidden;
  width: 100%;
  flex-wrap: nowrap;
  /* Weiche Kanten. Ohne sie erscheinen die Logos an den Raendern hart
     abgeschnitten, als waere die Section zu schmal. 48px entsprechen dem
     Gap, damit die Blende nie ein ganzes Logo verschluckt. */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
/* Die Spur traegt beide Kopien nebeneinander und wird als Ganzes bewegt.
   `width: max-content` laesst sie so breit werden, wie ihr Inhalt es
   verlangt - ohne das wuerde sie auf Containerbreite gestaucht und die
   Logos brechen doch um. */
.logo-strip.is-marquee .logo-marquee_track,
.fz-logo-strip.is-marquee .logo-marquee_track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  gap: var(--_sizes---layout--row-gap-lg, 40px);
  will-change: transform;
  animation: logo-marquee var(--marquee-dur, 60s) linear infinite;
}
/* Die Listen innerhalb der Spur duerfen nicht mehr umbrechen und keine
   eigene Breite mitbringen - sie sind jetzt blosse Glieder der Kette.
   Die Regeln weiter oben setzen an `.w-dyn-items` ein `flex-wrap: wrap`
   und an `.logo-strip > .w-dyn-list` eine Breite von 100%; beides wird
   hier fuer den Laufband-Fall zurueckgenommen. */
.logo-strip.is-marquee .w-dyn-list,
.fz-logo-strip.is-marquee .w-dyn-list { width: auto; }
.logo-strip.is-marquee .w-dyn-items,
.fz-logo-strip.is-marquee .w-dyn-items {
  flex-wrap: nowrap;
  width: max-content;
}
/* Auch auf Mobil laeuft das Band. Die 2-Spalten-Kachel von oben wuerde
   die Logos sonst auf halbe Containerbreite zwingen. */
.logo-strip.is-marquee .w-dyn-item,
.fz-logo-strip.is-marquee .w-dyn-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Die Verschiebung ist negativ: das Band wandert nach LINKS, die Logos
   ziehen also von rechts nach links durch das Fenster. */
@keyframes logo-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(var(--marquee-w, 2413px) * -1), 0, 0); }
}
/* Beim Ueberfahren anhalten - ohne das laesst sich ein einzelnes Logo
   nicht in Ruhe ansehen. Nur mit echter Maus: auf Touch gibt es kein
   Hover, das Band bliebe nach dem ersten Tippen stehen. */
@media (hover: hover) and (pointer: fine) {
.logo-strip.is-marquee:hover .logo-marquee_track,
.fz-logo-strip.is-marquee:hover .logo-marquee_track {
    animation-play-state: paused;
  }
}
/* Mobil: kleinere Logos und engere Abstaende, sonst zieht ein einzelnes
   breites Logo (Hasler ist bei 50px Hoehe 439px breit) ueber die ganze
   Bildschirmbreite. Die Hoehe kommt aus `--logo-h` als INLINE-Style und
   laesst sich von hier nicht ueberschreiben - deshalb rechnet `footer.js`
   den Faktor. Hier steht nur, was das Stylesheet tragen kann. */
@media (max-width: 599px) {
  .logo-strip.is-marquee .logo-marquee_track,
.logo-strip.is-marquee .w-dyn-items,
.fz-logo-strip.is-marquee .w-dyn-items { gap: 32px; }
.logo-strip.is-marquee,
.fz-logo-strip.is-marquee {
    -webkit-mask-image: linear-gradient(to right,
      transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right,
      transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
  /* Kein Logo darf breiter werden als das Fenster, sonst ist es nie als
     Ganzes zu sehen. Gemessen bei 358px Fensterbreite: Hasler ist auf
     50px Hoehe 439px breit und damit das einzige, das anstoesst.
     `max-width` in Kombination mit dem `object-fit: contain` von
     `.logo-strip_item` skaliert das Bild proportional herunter, statt es
     zu beschneiden - die Hoehe gibt dann nach, nicht der Inhalt. 80vw
     laesst links und rechts Luft, damit ein breites Logo im Band als
     eigenstaendiges Element lesbar bleibt. */
.logo-strip.is-marquee .logo-strip_item,
.fz-logo-strip.is-marquee .fz-logo-strip_item {
    max-width: 80vw;
  }
}
/* Reduced motion: das Band steht still und zeigt die Logos umbrochen,
   wie vor dem 11. Sep. NICHT die Section ausblenden - die Logos sind
   Inhalt, nicht Dekoration. `footer.js` haengt in diesem Fall gar keine
   zweite Kopie an, damit kein Logo doppelt erscheint. */
@media (prefers-reduced-motion: reduce) {
.logo-strip.is-marquee,
.fz-logo-strip.is-marquee {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
.logo-strip.is-marquee .logo-marquee_track,
.fz-logo-strip.is-marquee .logo-marquee_track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
.logo-strip.is-marquee .w-dyn-items,
.fz-logo-strip.is-marquee .w-dyn-items {
    flex-wrap: wrap;
    width: 100%;
  }
}
/* ---------------------------------------- Footer: Logo ueber die Listen
   Vorgabe: bis 980px bleibt der Footer wie er ist, darunter wandert der
   Steinhauser-Schriftzug ueber die drei Linklisten und wird 220px breit.
   Deckt sich mit dem Tablet-Frame: `FootIn` ist dort `WRAP`, die
   Statement-Spalte laeuft auf volle 672px und die drei Linkspalten
   stehen mit je 208px darunter. Auf dem Desktop ist `FootIn` `NO_WRAP`
   mit 475 / 154 / 179 / 248. */
@media (max-width: 980px) {
  .footer-main_columns { flex-wrap: wrap; }
  /* Die Statement-Spalte (Logo + Claim) nimmt die volle Breite und
     steht damit als eigene Zeile ueber den Listen. */
  .footer-main_statement {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .footer-main_logo { width: 220px; }
  /* Die drei Linklisten teilen sich die Zeile darunter zu gleichen
     Teilen, statt einzeln umzubrechen. */
  .footer-main_column {
    flex: 1 1 0;
    min-width: 0;
  }
  /* Erst hier braucht die Ueberschrift Luft nach oben: das Logo steht ab
     dieser Breite in einer eigenen Zeile darueber. Auf Desktop stehen Logo
     und Ueberschriften nebeneinander und muessen oben buendig sein (Design
     3514:2318: beide bei y=65) - dort waere der Abstand ein Versatz. */
  .footer-main_column-heading {
    margin-top: var(--_sizes---space--5);
  }
}
/* Unter 600px stapelt der Footer einspaltig - drei Spalten nebeneinander
   waeren dort zu schmal. */
@media (max-width: 599px) {
  .footer-main_column { flex: 0 0 100%; }
}
/* Der Abstand ueber den Listentiteln steht NICHT hier, sondern als
   `space/5` direkt auf der Webflow-Klasse `.footer-main_column-heading`.
   Sie hing auf `space/0`.
   Eine Regel an dieser Stelle waere doppelt gemoppelt und haette den
   Klassenwert mit `!important` ueberschrieben - genau der Fall, den das
   Rasterprojekt sonst vermeidet: zwei Quellen fuer denselben Abstand.
   Was die Designer-UI ausdruecken kann, gehoert in die Klasse. */
/* -------------------------------- Telefon-Button unter 960px nur als Icon
   Vorgabe (23. Sep): AB 960px zeigt der Button die volle Nummer, darunter
   nur das Icon. Die Regel greift deshalb bis 959px.
   **Der Navigationswechsel bleibt bei 767** - hier aendert sich
   ausschliesslich der Button.
   Vorher lag die Grenze bei 885px. Der Wert stammte aus einer Messung der
   Textbreite; 960 ist eine Ansage und liegt darueber, der Button wird
   also frueher zum Icon.
   Grund: die volle Nummer +43 5522 44248-0 braucht rund 118px Text plus
   Polsterung. Neben fuenf Navigationslinks wird es darunter zu eng, lange
   bevor die mobile Navigation uebernimmt. Der Befund steht seit dem
   Tablet-Frame in qa/tablet-frame-findings.md §3.
   Masse exakt wie der fertige Button der mobilen Navigation, aus dem
   Stylesheet gelesen statt geschaetzt:
     .nav-mobile_phone       64 x 44, radius/pill
     .nav-mobile_phone-icon  16 x 16
   Ein erster Versuch hatte 44x44 quadratisch - das ist schmaler als der
   gezeichnete Button und passt zu keinem der beiden.
   Im Markup ist die Nummer ein reiner Textknoten direkt im <a>:
     <a href="tel:+43552244248" class="nav-primary_tel">+43 5522 44248-0</a>
   Es gibt also kein inneres Element zum Ausblenden. Deshalb `font-size: 0`
   fuer den Text und dasselbe Icon-SVG als Hintergrund. Der Text bleibt im
   DOM und damit fuer Screenreader und Suchmaschinen lesbar, der Link
   bleibt ein `tel:`-Link, und 44px Hoehe erfuellen `space/tap-min`. */
@media (max-width: 959px) {
  .nav-primary_tel {
    width: 64px;
    min-width: 64px;
    height: var(--_sizes---space--tap-min);
    padding-inline: 0;
    justify-content: center;
    font-size: 0;
  }
  /* Das Icon liegt auch hier als Maske im Pseudo-Element statt als
     Hintergrundbild am Button - 25. Aug. Ein weisses Hintergrundbild
     waere auf der weissen Hover-Flaeche unsichtbar; als Maske folgt es
     `currentColor` und wird mit orange.
     Die Regel oben schliesst das Pseudo-Element unter 960px aus (dort
     war es ein zweites Icon neben dem Hintergrundbild). Da das
     Hintergrundbild jetzt weg ist, wird es hier wieder eingeschaltet -
     als einziges Icon, mittig, weil der Text auf `font-size: 0` steht. */
  .nav-primary_tel::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url("https://cdn.prod.website-files.com/6a8566a5ee577323e74ca7cf/6a8935ac6f5427df931bf3e8_icon-phone.svg") no-repeat 50% 50% / 16px 16px;
    mask: url("https://cdn.prod.website-files.com/6a8566a5ee577323e74ca7cf/6a8935ac6f5427df931bf3e8_icon-phone.svg") no-repeat 50% 50% / 16px 16px;
  }
}
/* Der Telefon-Button ist in BEIDEN Navigationen orange.
   Die mobile Fassung stand auf `neutral-700` - das war die einzige Stelle,
   an der die beiden Buttons unterschiedliche Farben hatten. `action/accent`
   ist derselbe Token, den die Desktop-Fassung ohnehin traegt.
   Anmerkung fuer die Abnahme: `action/accent` erreicht auf 14px nur 3,56:1
   und damit nicht die 4,5:1 der WCAG (qa/TODO.md §3). Beim Icon-Button ist
   das unkritisch, weil kein Text mehr sichtbar ist - beim Textbutton ab
   960px bleibt der Punkt offen. */
.nav-mobile_phone {
  background-color: var(--_colour---action--accent);
}
/* ------------- Telefonnummer im Mobilmenue als Button (23. Sep)
   Im aufgeklappten Menue stand die Nummer als gewoehnlicher Listeneintrag
   unter "Kontakt" - gemessen: `nav-mobile_link`, kein Hintergrund, kein
   Icon, nicht von den Seitenlinks zu unterscheiden.
   Angeglichen an den orangen Telefon-Button der Desktop-Navigation:
   gleiche Farbe (`action/accent`), gleiche Pillenform, gleiches Icon als
   Maske auf `currentColor`.
   Adressiert ueber `[href^="tel:"]` statt einer eigenen Klasse: Der Link
   traegt im Markup dieselbe Klasse wie die Seitenlinks, und das Attribut
   ist das einzige verlaessliche Merkmal. Eine Klasse im Designer zu
   ergaenzen waere sauberer, aber der Link steckt in der
   `nav-mobile`-Komponente und gilt damit fuer alle achtzehn Seiten -
   der Selektor erreicht dasselbe ohne Eingriff ins Markup.
   `margin-top` setzt ihn vom Linkblock ab, damit er als eigenes Element
   liest und nicht als sechster Menuepunkt. */
.nav-mobile_panel .nav-mobile_link[href^="tel:"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--_sizes---space--2);
  align-self: flex-start;
  margin-top: var(--_sizes---space--4);
  padding-inline: var(--_sizes---space--5);
  background-color: var(--_colour---action--accent);
  color: var(--_colour---white);
  border-radius: 999px;
  font-weight: var(--_sizes---font--weight--bold);
  text-decoration: none;
}
.nav-mobile_panel .nav-mobile_link[href^="tel:"]::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("https://cdn.prod.website-files.com/6a8566a5ee577323e74ca7cf/6a8935ac6f5427df931bf3e8_icon-phone.svg") no-repeat 50% 50% / 16px 16px;
  mask: url("https://cdn.prod.website-files.com/6a8566a5ee577323e74ca7cf/6a8935ac6f5427df931bf3e8_icon-phone.svg") no-repeat 50% 50% / 16px 16px;
}
/* ------------------- Grosse Einzelbilder: 1200er Cap ab 1440 (alle Seiten)
   Gemessen: bei 1600 ist das Foto 1360 breit, bei 1920 schon 1680, bei
   2560 dann 2320 - waehrend der Kachelstreifen darunter korrekt bei 1200
   bleibt. Ab 1441px laeuft das Foto also sichtbar breiter als die vier
   Bilder darunter.
   Ursache: `.recruiting_photo` traegt nur `max-width: 100%` und steht in
   keiner Containerliste. Unterhalb 1440 faellt das nicht auf, weil der
   Rand die Breite bestimmt; oberhalb greift bei allen anderen Elementen
   der 1200er Cap - beim Foto nicht.
   Dieselbe Behandlung wie fuer jeden anderen Container: `--container-cap`
   wird nur im 1440er Block gesetzt, darunter bleibt das Foto fluid.
   Gilt fuer ALLE drei grossen Einzelbilder, nicht nur die Startseite -
   das Teamfoto auf /unternehmen hatte denselben Fehler (gemessen 2320
   bei 2560, waehrend die Teamkarten darunter bei 1200 blieben) und das
   Hero-Foto auf /karriere ebenso. Beim ersten Anlauf war nur die
   Startseite behandelt worden: Symptom statt Muster. */
.recruiting_photo,
.recruiting_media,
.u-section > .photo-grid_tile {
  width: 100%;
  max-width: var(--container-cap, none) !important;
  margin-inline: auto;
}
/* `.hero-page_media` bekommt denselben Cap, steht aber weiter unten mit
   eigener Begruendung (Artboard-Breiten als CSS-Cap). Nicht hier
   doppeln - eine Eigenschaft, eine Regel. */
/* ------------- /unternehmen: Teamfoto unter der Chronik ist kein Quadrat
   Gemessen war es 1200x1200 - ein Quadrat, weil `.photo-grid_tile`
   `aspect-ratio: 1/1` traegt. Die Klasse wird auf /karriere fuer das
   Fotogitter benutzt, wo quadratische Kacheln richtig sind; hier haelt
   sie das einzelne Teamfoto.
   Breite und Raender stimmten bereits (1200/883/670/358, buendig) - nur
   die Hoehe war falsch. Aus den Figma-Frames gemessen:
     Desktop  TeamPhoto 1200 x 480  = 2.50
     Tablet   TeamPhoto  672 x 235  = 2.86
     Mobil    TeamPhoto  358 x 120  = 2.98
   Das Verhaeltnis wird also pro Bereich flacher, nicht konstant - ein
   einzelner Wert waere an zwei von drei Breiten falsch.
   Adressiert ueber `.u-section > .photo-grid_tile`, also das Bild als
   DIREKTES Kind der Sektion. Auf /karriere liegen die Kacheln in
   `.u-grid-3.is-photo-grid` und werden davon nicht getroffen - dort
   bleibt 1:1 richtig. Eine Kombiklasse `is-team-grid` gibt es an dieser
   Sektion nicht: im ausgelieferten Markup steht dort schlicht
   `<section class="u-section">`. Ein Selektor darauf waere toter Code
   gewesen. */
.u-section > .photo-grid_tile {
  aspect-ratio: 1200 / 480 !important;
}
@media (max-width: 991px) {
  .u-section > .photo-grid_tile { aspect-ratio: 672 / 235 !important; }
}
@media (max-width: 767px) {
  .u-section > .photo-grid_tile { aspect-ratio: 358 / 120 !important; }
}
/* ------------------ /karriere: Hero-Foto wie das Teamfoto der Startseite
   Gemessen war das Foto oben auf /karriere bei 979px nur 672 breit
   (Rand 154 statt 48) und bei 734px nur 358 (Rand 188 statt 32).
   Ursache: `.hero-page_media` bindet `max-width` an `grid/max-width`.
   Dieser Token hat pro Modus eigene Werte - Desktop 1200, Tablet 672,
   Mobil 358. Die beiden letzteren sind aber keine Caps, sondern
   ERRECHNETE Inhaltsbreiten der Artboards (768 - 2x48 bzw. 390 - 2x16).
   Als CSS-`max-width` eingesetzt frieren sie die Artboard-Breite ein,
   statt mitzuwachsen. dev-spec-responsive-grid.md §4 verbietet genau das:
     "Do not use grid/max-width Tablet (672) or Mobile (358) as a CSS
      max-width. Only the Desktop value (1200) is a real cap."
   Das Teamfoto der Startseite (`.recruiting_photo`) hat diesen Cap nicht
   und fuellt deshalb ueberall die Inhaltsbreite. Hier dieselbe Regel:
   der 1200er Cap greift erst ab 1440, darunter faehrt das Bild auf
   Containerbreite. `--container-cap` ist genau dafuer da und wird nur im
   1440er Block gesetzt. */
.hero-page_media {
  width: 100%;
  max-width: var(--container-cap, none) !important;
}
/* Dieselbe Ursache bei `.u-section-header` - gemessen bei 979px auf
   Startseite, /karriere und /kontakt ebenfalls auf 672 gedeckelt. Der
   Kopf steht damit schmaler als der Inhalt darunter, was besonders bei
   den zentrierten Ueberschriften auffaellt.
   Der Kopf steht bereits in der Containerliste weiter unten und traegt
   dort `max-width: var(--container-cap, none)`. Diese Regel hier ist die
   spezifischere Wiederholung fuer den Fall, dass die Webflow-Bindung
   spaeter erneut gesetzt wird - sie kostet nichts und macht den Cap
   an einer Stelle unmissverstaendlich. */
.u-section-header {
  max-width: var(--container-cap, none) !important;
}
/* ------------------------------------------------------------ §3d Raster
   Spaltenzahl aus der Bereichsvariable statt fest verdrahtet. Damit
   wechselt 992 von 8 auf 12 Spalten - der Bereich, der bisher fehlte. */
.stats-row,
.videoref_row,
.recruiting_strip,
.hero-video_content {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr) !important;
  gap: var(--grid-gutter);
}
/* Spannweiten je Bereich. Unter 992 gilt das 8-Spalten-Raster (§5.1),
   ab 992 das 12-Spalten-Raster (§4.1).
   WICHTIG: `grid-column-start`, nicht die Kurzform `grid-column`. Webflow
   schreibt die Spannweiten als Langform `grid-column-start: span N`. Bei
   gleicher Spezifitaet gewinnt die zuletzt deklarierte Regel - und die
   Kurzform wird von der Langform ueberschrieben, wenn diese spaeter kommt.
   Mit der Kurzform blieben die Werte am 22. Aug wirkungslos: die
   Kennzahlen-Reihe hing weiter an Webflows span 3 im 8-Spalten-Raster. */
.stats-row_item  { grid-column-start: span 3 !important; }
.videoref_item   { grid-column-start: span 6 !important; }
.recruiting_tile { grid-column-start: span 3 !important; }
@media (max-width: 991px) {
  .stats-row_item  { grid-column-start: span 2 !important; }
  .videoref_item   { grid-column-start: span 4 !important; }
  .recruiting_tile { grid-column-start: span 2 !important; }
}
/* 6 Spalten gelten laut Spec §2 erst UNTER 600px, nicht unter 768.
   Der Bereich 600-767 hat 8 Spalten - dort muessen die Spannweiten des
   8er-Rasters gelten, sonst ist `span 6` nur drei Viertel der Zeile.
   Genau das war bei 734px zu sehen: rechte Kante 205px vor dem Rand. */
@media (max-width: 599px) {
  .stats-row_item  { grid-column-start: span 6 !important; }
  .videoref_item   { grid-column-start: span 6 !important; }
  .recruiting_tile { grid-column-start: span 3 !important; }
}
/* Die Hero-Ueberschrift spannt im Design ueber die volle Breite. Webflow
   setzt dafuer `grid-column: 1 / -1`; sie steht damit korrekt im Raster,
   solange das Raster selbst stimmt. Die Spaltenzahl kommt aus
   --grid-columns, deshalb greift hier auch der 992er Wechsel. */
/* --------------------------------------------------- Hero-Slogan, 3. Sep
   Sechs Slogans rotieren (siehe footer.js), 27 bis 62 Zeichen. Ein fester
   Umbruch pro Slogan traegt deshalb nicht: was bei 64px Desktop passt,
   bricht bei 44px Mobil an der falschen Stelle.
   `text-wrap: balance` verteilt die Zeilen gleichmaessig, statt eine lange
   Zeile und eine kurze Restzeile zu erzeugen. Der Browser rechnet das pro
   Breite neu - genau das, was sechs unterschiedlich lange Texte brauchen.
   Wo im JS ein `\n` steht, gewinnt der gesetzte Umbruch (pre-line), und
   `balance` verteilt nur den Rest.
   Ohne Begrenzung liefe der laengste Slogan ueber die halbe Bildbreite und
   das Auge verliert beim Zeilenwechsel die Spur. 20ch sind bei dieser
   Schriftgroesse rund zwei bis vier Zeilen - dieselbe Anmutung wie der
   bisherige dreizeilige Slogan.
   Safari kann `balance` erst ab 17.5; aeltere Browser brechen normal um.
   Kein Defekt, nur weniger ausgewogen - deshalb kein Fallback noetig. */
.hero-video_headline {
  grid-column: 1 / -1;
  text-wrap: balance;
  max-width: 20ch;
}
/* --------------------------- Zweispalter auf dem gemeinsamen Spaltenraster
   `.u-two-col` war `1fr 1fr`: zwei gleiche Haelften ohne Bezug zu den
   Spalten der Nachbarsektionen. Als 6+6 (bzw. 4+4 im 8er-Raster) sieht es
   gleich aus, aber die Mittelkante sitzt auf einer Rasterlinie.
   `--half` statt calc(), weil `span calc(...)` ungueltiges CSS ist. */
:root { --half: 3; }
@media (min-width: 600px) { :root { --half: 4; } }
@media (min-width: 992px) { :root { --half: 6; } }
.u-section > .u-two-col,
.u-section > .u-two-col-reverse {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr) !important;
  gap: var(--grid-gutter);
}
.u-section > .u-two-col > *,
.u-section > .u-two-col-reverse > * {
  grid-column-start: span var(--half);
}
@media (max-width: 599px) {
  .u-section > .u-two-col > *,
  .u-section > .u-two-col-reverse > * {
    grid-column-start: span var(--grid-columns);
  }
}
/* ------------------------- Kennzahlen auf /unternehmen aufs selbe Raster
   Dieselben vier Kennzahlen sind auf der Startseite und auf /unternehmen
   unterschiedlich gebaut: dort `.stats-row` mit `.stats-row_item` (Spans
   3/2/6), hier `.u-grid-4.is-stats` mit blanken `.stat`-Kindern und
   repeat(4)/repeat(2) - ohne Bezug zum Spaltenraster.
   §4.1 verlangt fuer beide `Stat x4` span 3. Also dasselbe Raster und
   dieselben Spannweiten wie auf der Startseite, statt einer zweiten
   Zaehlweise fuer denselben Inhalt. */
.u-grid-4.is-stats {
  grid-template-columns: repeat(var(--grid-columns), 1fr) !important;
  gap: var(--grid-gutter);
}
.u-grid-4.is-stats > * { grid-column-start: span 3; }
@media (max-width: 991px) {
  .u-grid-4.is-stats > * { grid-column-start: span 2; }
}
@media (max-width: 599px) {
  .u-grid-4.is-stats > * { grid-column-start: span 6; }
}
/* ------------------------------- Chronik-Zweispalter, §4.3 asymmetrisch
   `560px 1fr` ist eine feste Pixelspalte neben einer fluiden - unterhalb
   von 1200px schiebt sich das gegen das Raster.
   Nachgerechnet bei 1200px Container (Spalte 78, Gutter 24):
     span 5 = 486   span 6 = 588   span 7 = 690
   §4.3 nennt 560 / 429. 560 liegt am naechsten an span 6, 429 an span 5.
   Also 6 + 5 - und damit bleibt eine Spalte uebrig, weil die gezeichneten
   Breiten zusammen 989 statt 1200 ergeben. Das ist genau der offene Punkt
   aus §6.3 des Conformance-Briefs ("asymmetrische Splits, normalisieren
   oder so lassen?"). Bis das entschieden ist, sitzt die Kante wenigstens
   auf einer Rasterlinie statt auf einem Pixelwert.
   Unter 992 stapelt es ohnehin (siehe D-05 weiter unten). */
@media (min-width: 992px) {
  .timeline_story-item {
    grid-template-columns: repeat(var(--grid-columns), 1fr) !important;
    grid-template-rows: auto auto;
    align-content: center;
    gap: var(--grid-gutter);
  }
  /* Platzierung explizit ueber Rasterlinien, nicht ueber :nth-child.
     Grund: Das Item hat DREI Kinder - Jahr, Bild, Text - weil Webflow sie
     als Geschwister ausgibt. Im Design (3127:25119) sind es ZWEI: das Bild
     und ein `StoryText`-Rahmen, der Jahr und Text zusammenfasst. Diesen
     Rahmen gibt es im CMS-Markup nicht, und CSS kann ihn nicht nachziehen.
     Solange `.timeline_story-key` auf `display: none` stand, ging die
     Positionsrechnung auf: erstes Kind = Bild, zweites = Text. Mit der
     sichtbaren Jahreszahl verschob sich alles um eins - das Jahr bekam
     `span 6` und stand links neben dem Bild, der Text fiel in die Restspalte
     (251px statt 486). Genau das war zu sehen.
     Darum feste Linien: Bild ab 1 ueber sechs Spalten und beide Zeilen, Jahr
     und Text ab Linie 7 ueber sechs - das Jahr in Zeile 1, der Text in Zeile
     2. Beide beginnen damit an derselben Kante, das Jahr steht direkt
     darueber. Reihenfolge im DOM egal.
     23 Aug: Start von Linie 8 auf 7 vorgezogen (Wunsch Jan). Damit sitzt die
     Textkante direkt an der Bildkante - 6 + 6 Spalten fuellen das Raster
     vollstaendig, statt eine Restspalte offen zu lassen. */
  .timeline_story-item > .timeline_story-image {
    grid-area: 1 / 1 / span 2 / span 6;
    align-self: center;
  }
  .timeline_story-item > .timeline_story-key {
    grid-area: 1 / 7 / auto / span 6;
    align-self: end;
  }
  .timeline_story-item > .timeline_story-text {
    grid-area: 2 / 7 / auto / span 6;
    align-self: start;
  }
}
/* ------------------------------- Kartengitter auf dem Spaltenraster
   §5 der Spec empfiehlt `auto-fit` + `minmax()`: die Karte entscheidet,
   wann umgebrochen wird. Das ist gegen Karten-Quetschbugs robust, aber es
   ignoriert das Spaltenraster - bei 734px legt `auto-fit` zwei Spalten zu
   je 335px, und die Kante sitzt neben der Rasterlinie.
   Bewusste Abweichung von §5 auf Wunsch: alle Kartengitter laufen jetzt
   auf demselben Raster wie die uebrigen Sektionen. Aus den Figma-Frames:
     Team      Desktop 5-up  Tablet 3-up  Mobil 2-up
     Fotogitter Desktop 3-up  Tablet 3-up  Mobil 2-up
     Kontakt   Desktop 2-up  Tablet 2-up  Mobil 1-up
   12 / 8 / 6 Spalten teilen sich nicht immer glatt durch die Kartenzahl -
   3 Karten in 8 Spalten sind 2.67. §5.3 haelt genau das fest: dann
   `repeat(n, 1fr)` und den nicht-ganzzahligen Wert akzeptieren, statt
   einen Span zu erzwingen. Deshalb hier Spaltenzahl statt Span. */
.u-dyn-grid-5,
.u-grid-3.is-photo-grid,
.contact-directory_grid {
  display: grid;
  gap: var(--grid-gutter);
}
/* Desktop: 12 Spalten */
.u-dyn-grid-5           { grid-template-columns: repeat(5, 1fr) !important; }
.u-grid-3.is-photo-grid { grid-template-columns: repeat(3, 1fr) !important; }
/* `minmax(0, 1fr)` statt `1fr`: `1fr` ist die Kurzform von `minmax(auto, 1fr)`
   und kann eine Spur damit NICHT unter ihre Min-Content-Breite druecken. In den
   Kontaktkarten steht eine lange E-Mail-Adresse (rene.burtscher@steinhauser-
   fahrzeugbau.at) in einer Zeile - deren Min-Content hob die beiden Spuren auf
   764 und 775px, obwohl das Gitter selbst korrekt auf 1200 gedeckelt ist. Die
   Karten ragten dadurch aus ihrem eigenen Container heraus.
   Die Null als Minimum erlaubt das Schrumpfen auf die echte Rasterbreite: 588. */
.contact-directory_grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
/* Tablet 768-991: 8 Spalten */
@media (max-width: 991px) {
  .u-dyn-grid-5           { grid-template-columns: repeat(3, 1fr) !important; }
  .u-grid-3.is-photo-grid { grid-template-columns: repeat(3, 1fr) !important; }
  /* `minmax(0, …)` auch hier - siehe Desktop-Regel oben. Tablet stand sonst
     auf 541/551px in einem 672px-Gitter und lief seitlich aus der Seite. */
  .contact-directory_grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* Mobil unter 600: 6 Spalten. NICHT unter 768 - der Bereich 600-767 hat
   laut §2 noch 8 Spalten und behaelt deshalb die Tablet-Aufteilung. */
@media (max-width: 599px) {
  .u-dyn-grid-5           { grid-template-columns: repeat(2, 1fr) !important; }
  .u-grid-3.is-photo-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
/* Die Kontaktkarten brechen frueher um als der Rest des Rasters - bei 749
   statt 599 (auf Wunsch, 4. Sep). Deshalb eine eigene Query statt der
   600er-Gruppe oben. Dieselbe Grenze steht weiter unten fuer
   `.w-dyn-items`; das ist seit der CMS-Umstellung der Traeger des Gitters,
   diese Regel hier greift nur ohne Collection List. */
@media (max-width: 749px) {
  .contact-directory_grid { grid-template-columns: minmax(0, 1fr) !important; }
}
/* ==========================================================================
   KONTAKT — Kontaktkarte und Standort-Panel
   Gemessen aus dem Desktop-Frame: Card 3127:25062, Panel 3018:6488.
   Figma ist die Referenz; alle Werte unten stammen aus der Datei, nicht aus
   dem gebauten Zustand.
   ========================================================================== */
/* ------------------------------------------------------------ Karte
   Design: 588x98, Innenabstand 12/24, Radius 14 (radius/sm), neutral-100.
   EINE Zeile: Avatar 74 - Beschreibung - Kontaktblock, Abstand 12 (space/2),
   vertikal zentriert. Der Kontaktblock sitzt rechts und ist rechtsbuendig.
   Gebaut war die gestapelte Variante (206px hoch): das ist `Contact Stacked`
   aus den Tablet- und Mobil-Frames. Auf Desktop gilt die Zeile. */
.contact-card {
  flex-direction: row;
  align-items: center;
  column-gap: var(--_sizes---space--2);
  row-gap: var(--_sizes---space--2);
  padding: var(--_sizes---space--2) var(--_sizes---space--4);
  border-radius: var(--_sizes---radius--sm);
  background-color: var(--_colour---neutral-100);
}
.contact-card_avatar {
  flex: none;
  width: 74px;
  height: 74px;
  border-radius: var(--_colour---radius--pill, 999px);
}
/* Avatar + Rolle/Name. Im Design ist das keine eigene Ebene, sondern folgt
   aus der Zeile - der gebaute Wrapper darf sie darum nicht aufbrechen. */
.contact-card_identity-row {
  flex: 1 1 auto;
  align-items: center;
  column-gap: var(--_sizes---space--2);
  min-width: 0;
  display: flex;
}
/* Beschreibung: Rolle H6 (16 Bold, neutral-700), Name Text XXS Bold
   (14 Bold, #6c6c6c). Abstand 4 = space/xxs. */
.contact-card_identity {
  flex: 1 1 auto;
  flex-direction: column;
  row-gap: var(--_sizes---space--xxs);
  min-width: 0;
  display: flex;
}
.contact-card_role {
  color: var(--_colour---neutral-700);
  font-size: var(--_sizes---font-size--h6);
  font-weight: var(--_sizes---font--weight--bold);
  line-height: normal;
}
.contact-card_name {
  color: var(--_colour---neutral-500);
  font-size: var(--_sizes---font-size--text-xxs);
  font-weight: var(--_sizes---font--weight--bold);
  line-height: normal;
}
/* Kontaktblock: Telefon 16 Bold, E-Mail 14 Bold, beide brand-500,
   RECHTSBUENDIG (counterAxisAlign MAX im Design), Abstand 4.
   Daneben das Download-Icon mit 12px Abstand. */
.contact-card_contact {
  flex: none;
  flex-direction: row;
  align-items: center;
  column-gap: var(--_sizes---space--2);
  text-align: right;
  display: flex;
}
.contact-card_contact-lines {
  flex-direction: column;
  align-items: flex-end;
  row-gap: var(--_sizes---space--xxs);
  display: flex;
}
.contact-card_link {
  min-height: 0;
  color: var(--_colour---action--default);
  font-size: var(--_sizes---font-size--h6);
  font-weight: var(--_sizes---font--weight--bold);
  line-height: normal;
  text-align: right;
  white-space: nowrap;
  display: block;
}
.contact-card_link.is-mail {
  font-size: var(--_sizes---font-size--text-xxs);
}
/* Download-Knopf. Das Icon ist als Data-URI eingebettet - exakt das SVG aus
   der Figma-Datei (32x32, Pfadfarbe brand-500 #34657F), damit es nicht von
   einem zweiten Asset abhaengt. 44px Tap-Target um die 32px Malflaeche. */
/* 4. Sep: von `background-image` auf `mask` umgestellt. Im SVG stand die
   Markenfarbe `#34657F` fest eingebrannt - ein Hover haette ein zweites
   Asset gebraucht. Mit `mask` bestimmt `background-color` die Farbe, also
   reicht im Hover eine Zeile. Gleiche Technik wie `.usecase-card_icon`
   und `.gallery-modal_close`; das `fill` im Pfad ist damit bedeutungslos
   und bleibt nur stehen, damit die Datei-URI unveraendert bleibt. */
.contact-card_download {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2732%27%20height%3D%2732%27%20viewBox%3D%270%200%2032%2032%27%20fill%3D%27none%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M16%2021.0513L10.3077%2015.359L11.713%2013.913L15%2017.2V6H17V17.2L20.287%2013.913L21.6923%2015.359L16%2021.0513ZM8.41033%2026C7.73678%2026%207.16667%2025.7667%206.7%2025.3C6.23333%2024.8333%206%2024.2632%206%2023.5897V19.9743H8V23.5897C8%2023.6923%208.04278%2023.7863%208.12833%2023.8717C8.21367%2023.9572%208.30767%2024%208.41033%2024H23.5897C23.6923%2024%2023.7863%2023.9572%2023.8717%2023.8717C23.9572%2023.7863%2024%2023.6923%2024%2023.5897V19.9743H26V23.5897C26%2024.2632%2025.7667%2024.8333%2025.3%2025.3C24.8333%2025.7667%2024.2632%2026%2023.5897%2026H8.41033Z%27%20fill%3D%27%2334657F%27%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2732%27%20height%3D%2732%27%20viewBox%3D%270%200%2032%2032%27%20fill%3D%27none%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M16%2021.0513L10.3077%2015.359L11.713%2013.913L15%2017.2V6H17V17.2L20.287%2013.913L21.6923%2015.359L16%2021.0513ZM8.41033%2026C7.73678%2026%207.16667%2025.7667%206.7%2025.3C6.23333%2024.8333%206%2024.2632%206%2023.5897V19.9743H8V23.5897C8%2023.6923%208.04278%2023.7863%208.12833%2023.8717C8.21367%2023.9572%208.30767%2024%208.41033%2024H23.5897C23.6923%2024%2023.7863%2023.9572%2023.8717%2023.8717C23.9572%2023.7863%2024%2023.6923%2024%2023.5897V19.9743H26V23.5897C26%2024.2632%2025.7667%2024.8333%2025.3%2025.3C24.8333%2025.7667%2024.2632%2026%2023.5897%2026H8.41033Z%27%20fill%3D%27%2334657F%27%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
  mask-position: 50% 50%;
  -webkit-mask-size: 32px 32px;
  mask-size: 32px 32px;
  background-color: var(--_colour---action--default);
  flex: none;
  width: var(--_sizes---space--tap-min);
  height: var(--_sizes---space--tap-min);
  display: block;
}
/* --------------------------------------------------- Abstand der Sektion
   Design: contact-directory hat padding 64 / 120 / 0 / 120 - oben
   `section-space/page-top`, UNTEN NULL.
   ACHTUNG, hier stand `.u-section.is-contact-directory`, und das konnte nie
   greifen: `contact-directory` ist auf /kontakt das <main>-Element, nicht eine
   Sektion mit `.u-section`. Die Kombiklasse existiert im Markup gar nicht.
   Oben stimmten die 64px daher schon immer (sie kommen aus dieser Klasse),
   unten standen 96 statt 0.
   Klassenselektor ohne `.u-section`, damit die Regel den <main> trifft. */
.contact-directory {
  padding-top: var(--_sizes---section-space--page-top);
  padding-bottom: var(--_sizes---section-space--none);
}
/* ------------------------------------------------------- Standort-Panel
   Design (Panel/Deep Instance): 588x400 neben der Karte, neutral-100,
   Radius 26 (radius/lg), Innenabstand 40 (space/6), Bloecke im Abstand 40.
   Gebaut war ein blankes `.u-section-header` ohne Flaeche - Ueberschriften
   und Text standen frei neben der Karte. */
.u-two-col.is-location > .u-section-header {
  text-align: left;
  background-color: var(--_colour---neutral-100);
  border-radius: var(--_sizes---radius--lg);
  padding: var(--_sizes---space--6);
  row-gap: var(--_sizes---space--6);
  align-items: stretch;
  justify-content: flex-start;
  height: 100%;
}
/* Ueberschriften im Panel: H4 = 24 Bold, Zeilenhoehe relaxed. */
.u-two-col.is-location .heading-md {
  color: var(--_colour---text--default);
  font-size: var(--_sizes---font-size--h4);
  font-weight: var(--_sizes---font--weight--bold);
  line-height: var(--_sizes---font--line-height--relaxed);
  margin: 0;
}
/* Anschrift: Text Small (16 Regular), Zeilenumbrueche aus dem Inhalt.
   16px Abstand zur Ueberschrift = text/gap-md, nicht der 40er Blockabstand. */
.u-two-col.is-location .is-address {
  color: var(--_colour---text--default);
  font-size: var(--_sizes---font-size--text-small);
  font-weight: var(--_sizes---font--weight--regular);
  line-height: var(--_sizes---font--line-height--normal);
  font-style: normal;
  white-space: pre-line;
  margin: calc(var(--_sizes---space--6) - var(--_sizes---text--gap-md)) 0 0;
}
/* Oeffnungszeiten: zweispaltige Zeile, Tagesbereich links, Zeiten rechts.
   Im Design zwei Zeilen mit gemeinsamem Label - die zweite traegt links
   bewusst nichts. */
.u-two-col.is-location .hours-list {
  flex-direction: column;
  row-gap: var(--_sizes---space--1);
  margin-top: calc(var(--_sizes---space--6) - var(--_sizes---text--gap-md));
  display: flex;
}
.u-two-col.is-location .hours-row {
  justify-content: space-between;
  column-gap: var(--_sizes---space--4);
  color: var(--_colour---text--default);
  font-size: var(--_sizes---font-size--text-small);
  line-height: var(--_sizes---font--line-height--normal);
  display: flex;
}
@media (max-width: 991px) {
  /* Kleinere Innenflaeche, sobald der Platz enger wird. */
  .u-two-col.is-location > .u-section-header {
    padding: var(--_sizes---space--5);
  }
}
/* ------------------- Standort: gleiche Hoehe nebeneinander (23. Sep)
   Gemeldet: zwischen 730 und 991px sind Panel und Karte unterschiedlich
   hoch, obwohl sie nebeneinander stehen. Nachgemessen bei 900px: 457 zu
   289 Pixel.
   ZWEI URSACHEN, und die erste stand als falsche Annahme im Kommentar
   darueber ("Unter 992 stapelt `.u-two-col`"):
   1. Gestapelt wird erst unter 600px (`span var(--grid-columns)` in der
      599er-Regel). Zwischen 600 und 991 stehen beide weiterhin
      nebeneinander, je `span 4` im 8er-Raster.
   2. Genau dort setzte die alte Regel `height: auto` am Panel. Das
      Rasterelement streckt sich zwar auf die Zeilenhoehe, der Inhalt
      darin aber nicht mehr - also blieb die graue Flaeche kuerzer als
      die Karte daneben.
   NACHTRAG nach der ersten Messung: `height: 100%` am Panel allein
   genuegte NICHT. Der Container steht unter 992px auf
   `align-items: center` (aus Webflows eigener Regel) - dabei fuellt kein
   Kind die Zeilenhoehe, und die Prozentangabe bezieht sich auf eine
   Hoehe, die das Panel selbst bestimmt. Gemessen bei 760px: Karte 233,
   Panel 260.
   Die eigentliche Stellschraube ist deshalb `align-items: stretch` am
   Container. Dann dehnen sich BEIDE Kinder auf die Zeilenhoehe, und das
   hoehere gibt sie vor. */
@media (min-width: 730px) {
  .u-section > .u-two-col.is-location {
    align-items: stretch;
  }
  .u-two-col.is-location > .u-section-header,
  .u-two-col.is-location > .location_map {
    height: 100%;
  }
}
/* Ab hier untereinander statt nebeneinander - auf Ansage vom 23. Sep.
   Vorher lag die Grenze bei 600px; dazwischen wurden beide Spalten so
   schmal, dass die Anschrift mehrfach umbrach. `span var(--grid-columns)`
   ist dieselbe Technik wie in der 599er-Regel, nur frueher. */
@media (max-width: 729px) {
  .u-section > .u-two-col.is-location > * {
    grid-column-start: span var(--grid-columns);
  }
  .u-two-col.is-location > .u-section-header {
    height: auto;
  }
}
/* ================================================ Contact Stacked (< 992)
   Die Kontaktkarte ist unter 992px eine ANDERE Karte, nicht dieselbe enger.
   Design: `/kontakt — Tablet` 3794:2758 und `/kontakt — Mobile` 3804:2866.
   | | Desktop 588 | Tablet 326 | Mobil 358 |
   | Karte      | horizontal, 98 | vertikal, 150 | vertikal, 139 |
   | Kontakt    | rechts (MAX)   | links (MIN)   | links (MIN)   |
   | E-Mail     | 1 Zeile        | 2 Zeilen      | 1 Zeile       |
   Diese Variante war nie gebaut - unter 992px lief weiterhin die horizontale
   Desktop-Karte. Weil die Karte dort einzeilig bleibt, drueckte die lange
   Adresse `rene.burtscher@steinhauser-fahrzeugbau.at` die Rasterspur auf
   541px in einem 672px-Gitter: 392px horizontaler Ueberlauf der ganzen Seite.
   Das Gitter selbst und die Seitenraender waren immer richtig (768->672,
   390->358, exakt wie in Figma). */
@media (max-width: 991px) {
  /* Von Zeile auf Stapel: IdentityRow oben, Kontaktblock darunter. */
  .contact-card {
    flex-direction: column;
    align-items: stretch;
    row-gap: var(--_sizes---space--3);
  }
  /* Kontaktzeilen linksbuendig statt rechts - im Design `align: MIN`. */
  .contact-card_contact {
    flex: 1 1 auto;
    text-align: left;
  }
  .contact-card_contact-lines {
    align-items: flex-start;
    min-width: 0;
  }
  /* Der Kern der Sache: die Adresse MUSS umbrechen duerfen. Ohne das ist ihr
     Min-Content breiter als die Karte, und keine Breitenangabe am Gitter kann
     das noch einfangen. Im Tablet-Design ist die lange Adresse 34px hoch -
     also zwei Zeilen, und die Karte waechst dort auf 167. */
  .contact-card_link {
    overflow-wrap: anywhere;
    min-width: 0;
  }
}
/* Mobil: engere Abstaende laut 3804:2866 (Karte gap 12, IdentityRow gap 8).
   Die 13px, die das Design fuer Name und E-Mail vorgibt, sind hier bewusst
   NICHT gesetzt: `font-size/text-xxs` skaliert selbst mit dem Breakpoint -
   14px bis 767, darunter 13px. Die Variable erledigt das, eine eigene
   Schriftgroesse hier wuerde sie nur ueberschreiben. */
@media (max-width: 599px) {
  .contact-card {
    row-gap: var(--_sizes---space--2);
  }
  .contact-card_identity-row {
    column-gap: var(--_sizes---space--1);
  }
  .contact-card_contact {
    column-gap: var(--_sizes---space--1);
  }
}
/* Die Kacheln fuellen ihre Rasterzelle vollstaendig - ohne das bleibt
   rechts der Rest stehen, den man im Screenshot bei 734px sieht. */
.photo-grid_tile,
.recruiting_tile,
.videoref_media,
.team-card {
  width: 100% !important;
  max-width: none !important;
}
/* Die Designer-Klasse zentriert den Karteninhalt senkrecht
   (`justify-content: center`). Karten ohne Funktion sind dadurch kuerzer
   und Bild wie Name rutschen nach unten - sie stehen dann tiefer als bei
   den Nachbarn. `flex-start` verankert oben, die Hoehe bleibt gleich. */
.team-card {
  justify-content: flex-start;
}
/* ================================================== Warum bei uns? (/karriere)
   `minmax(0, 1fr)` statt `1fr`: `1fr` heisst `minmax(auto, 1fr)`, die Spalte
   darf also ueber ihren Anteil wachsen, wenn der Inhalt breiter ist. Gemessen
   war die Mitte dadurch 392 statt 380 - "Weiterbildungsmoeglichkeiten" ist
   das laengste Wort der Sektion. Die 0 als Minimum verbietet das.
   Kein `align-items: start`: die Karten sollen je Zeile gleich hoch sein. */
.u-grid-2.is-reasons {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--_sizes---space--4);        /* 24px */
}
.u-grid-2.is-reasons .reason-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--_sizes---space--3);        /* 16px */
  padding: var(--_sizes---space--6);    /* 40px */
  border-radius: 22px;
  background-color: var(--_colour---surface--subtle);   /* #eee */
  text-align: center;
}
/* Icon und Ueberschrift stehen im Entwurf enger beieinander (8px) als der
   Abstand zum Flaechentext (16px) - deshalb der negative Ausgleich statt
   eines zweiten Wrappers. Das Markup bleibt so flach wie es ist. */
.u-grid-2.is-reasons .reason-item [data-reason-icon] {
  display: block;
  width: 24px;
  height: 24px;
  margin-bottom: calc(var(--_sizes---space--1) * -1);   /* -8px */
  color: currentColor;
  flex: none;
}
.u-grid-2.is-reasons .reason-item .heading-sm {
  font-size: var(--_sizes---font-size--h4);   /* 24px */
  line-height: 1.3;
  letter-spacing: 0;
  margin: 0;
}
.u-grid-2.is-reasons .reason-item .body-md {
  font-size: var(--_sizes---font-size--text-small);   /* 16px */
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--_colour---text--muted);   /* #6c6c6c */
  margin: 0;
}
/* 3-up haelt bis 992. Darunter 2-up, ab 640 einspaltig: die Karten sind mit
   40px Innenabstand schmaler als der alte randlose Text und brechen sonst
   unschoen um. */
@media (max-width: 991px) {
  .u-grid-2.is-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .u-grid-2.is-reasons { grid-template-columns: minmax(0, 1fr); }
}
/* ============================================== Karte /kontakt (OpenStreetMap)
   Ersetzt das statische Platzhalterbild in `section/location`.
   Die Kartenwahl steht fest und ist nicht meine: dsgvo-anforderungen.md §4b
   und die Direktive in build/pages/kontakt.yaml legen OpenStreetMap via
   Leaflet fest - kein Google Maps. Google setzt Cookies, sendet in die USA
   und verbietet Karten-Screenshots als Platzhalter; damit faellt dort genau
   die Loesung aus, die hier bannerfrei bleibt.
   Der Ablauf: Platzhalterbild beim Seitenaufruf, interaktive Karte erst nach
   Klick. Vorher geht KEIN Request an einen Dritten. Nur so bleibt die Seite
   ohne Cookie-Banner (§4b, letzter Absatz) - deshalb ist der Platzhalter
   nicht optional. */
/* Der Container behaelt Maße und Radius der alten Bildklasse: 400px hoch,
   Tablet 457, Mobil 233, radius/lg. Er wird jetzt nur zum Positionsanker
   fuer Platzhalter, Consent-Schicht und spaeter die Leaflet-Karte. */
.location_map {
  position: relative;
  overflow: hidden;
}
.location_map-placeholder {
  border-radius: var(--_sizes---radius--lg);
}
/* Die Consent-Schicht liegt ueber dem Platzhalter. Abdunkelung, damit der
   weisse Knopftext auf jedem Kartenausschnitt lesbar bleibt - der Platzhalter
   ist hell und wechselt spaeter vielleicht. */
/* Die Abdunkelung liegt ueber dem ganzen Platzhalter, damit der weisse
   Knopftext auf jedem Kartenausschnitt lesbar bleibt. Knopf und Hinweis
   sitzen zusammen in der Mitte - vorher stand der Hinweis frei auf der
   Karte und ueberlagerte das Pin-Label des Platzhalterbildes. */
.location_map-gate {
  inset: 0;
  gap: var(--_sizes---space--3);
  padding: var(--_sizes---space--4);
  background-color: rgba(16, 30, 38, 0.45);
  border-radius: var(--_sizes---radius--lg);
}
/* Eigene Flaeche fuer den Hinweis, damit er sich nicht mit der Karte
   darunter beisst. Schmal gehalten, damit er wie eine Bildunterschrift
   wirkt und nicht wie ein Absatz. */
.location_map-note {
  padding: var(--_sizes---space--1) var(--_sizes---space--3);
  border-radius: var(--_sizes---radius--sm);
  background-color: rgba(16, 30, 38, 0.65);
}
/* Sieht aus wie button-primary, ist aber ein eigenes Element - die Klasse
   liegt auf einem Link, nicht auf der Button-Komponente. Werte daher aus
   denselben Tokens, nicht abgeschrieben. */
.location_map-consent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--_sizes---space--tap-min);
  padding: var(--_sizes---space--2) var(--_sizes---space--4);
  border-radius: var(--_sizes---radius--pill);
  background-color: var(--_colour---action--default);
  color: var(--_colour---text--on-brand);
  font-family: var(--_sizes---font--family--sans);
  font-size: var(--_sizes---font-size--text-xxs);
  font-weight: var(--_sizes---font--weight--bold);
}
.location_map-note {
  margin: 0;
  color: var(--_colour---text--on-brand);
  font-family: var(--_sizes---font--family--sans);
  font-size: var(--_sizes---font-size--text-xxs);
  max-width: 34ch;
}
/* ---------------------------------------------------- der Pin
   Kein Leaflet-Standardmarker. Das blaue Tropfen-PNG waere hier ein
   Fremdkoerper. Aus den drei Figma-Frames gemessen:
     PinGlow   90x90  rgb(240,78,35) = accent-orange
     PinDot    30x30  rgb(229,93,0)  = action/accent
     PinLabel  radius 999            = radius/pill, Grund rgb(10,14,18)
   Alle Farben und Radien sind vorhandene Tokens. Die 90 und 30 stehen auf
   keiner Skala und bleiben Literale - wie die Videohoehe im Hero. */
.location_map-pin {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Der Glow haengt am PUNKT, nicht am Pin-Container. Vorher lag er auf
   `.location_map-pin::before` - und dessen Mitte liegt zwischen Punkt und
   Label, nicht auf dem Punkt. Ergebnis: sichtbar aussermittiger Schein.
   Jetzt sitzt er als ::before am Punkt selbst; `inset: -30px` macht aus den
   30px Punkt genau die 90px Glow des Designs, ohne Rechnerei. */
.location_map-dot {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: var(--_sizes---radius--pill);
  background-color: var(--_colour---action--accent);
  border: 3px solid var(--_colour---white);
}
.location_map-dot::before {
  content: "";
  position: absolute;
  inset: -30px;
  border-radius: var(--_sizes---radius--pill);
  background-color: var(--_colour---accent-orange);
  opacity: 0.25;
  pointer-events: none;
}
.location_map-label {
  position: relative;
  margin-top: var(--_sizes---space--1);
  padding: var(--_sizes---space--1) var(--_sizes---space--3);
  border-radius: var(--_sizes---radius--pill);
  /* Das Design zeigt rgb(10,14,18). Einen Token mit diesem Wert gibt es
     nicht - `neutral-900` existiert schlicht nicht, die Skala endet bei
     800 (#262626). Das ist der naechstliegende echte Token; ein erfundener
     Variablenname faellt still auf transparent zurueck, und genau das ist
     hier zuerst passiert. */
  background-color: var(--_colour---neutral-800);
  color: var(--_colour---white);
  font-family: var(--_sizes---font--family--sans);
  font-size: var(--_sizes---font-size--text-xxs);
  font-weight: var(--_sizes---font--weight--bold);
  white-space: nowrap;
}
/* ------------------------------------- Leaflets eigene Bedienelemente
   Leaflet bringt sein eigenes Grau-Weiss mit. Ohne Angleichung sitzt ein
   fremdes Bedienelement im Layout. */
.location_map .leaflet-container {
  height: 100%;
  border-radius: var(--_sizes---radius--lg);
  font-family: var(--_sizes---font--family--sans);
  background-color: var(--_colour---brand-100);
}
.location_map .leaflet-control-zoom a {
  border-radius: var(--_sizes---radius--sm);
  color: var(--_colour---brand-500);
  border-color: var(--_colour---border--subtle);
}
.location_map .leaflet-control-attribution {
  font-size: var(--_sizes---font-size--text-xxs);
  background-color: rgba(255, 255, 255, 0.85);
}
/* ===================================== Kontakt: Nachbesserungen 23. Aug
   Sammelblock zu den Rueckmeldungen aus der Abnahme. Alle Werte aus den
   drei Figma-Frames gemessen, nicht geschaetzt. */
/* --- Pin-Label: lesbare Pille -----------------------------------------
   Das Label stand ohne Grund auf der Karte und war je nach Kartenausschnitt
   kaum lesbar. Hintergrund jetzt `neutral-700` - derselbe Ton wie der
   Footer, damit es zum Rest der Seite gehoert und nicht wie ein
   Fremdelement wirkt. */
.location_map-label {
  background-color: var(--_colour---neutral-700);
  box-shadow: 0 2px 8px rgba(16, 30, 38, 0.35);
}
/* --- Kartenfarben: Grau- und Blautoene der Seite -----------------------
   OSM-Standardkacheln sind bunt (gruene Waelder, gelbe Strassen) und
   stehen neben der zurueckhaltenden Palette der Seite. Ein eigener
   Tile-Server waere der saubere Weg, ist hier aber unverhaeltnismaessig.
   Stattdessen ein CSS-Filter auf der Kachelebene: entsaettigt, leicht
   aufgehellt, minimal blaustichig. Der Pin liegt in einer eigenen Ebene
   und bleibt davon unberuehrt - er soll ja gerade herausstechen.
   Bewusst zurueckhaltend dosiert: zu viel Filter macht Strassennamen
   unlesbar, und die Karte muss ihren Zweck erfuellen. */
.location_map .leaflet-tile-pane {
  filter: saturate(0.35) brightness(1.04) contrast(0.95);
}
/* --- Karte und Infopanel gleich hoch ----------------------------------
   Im Design sind MapWrap und Panel beide 588x400 - gleich hoch. Live
   bestimmte die Karte ihre Hoehe selbst (400px fix), das Panel seine
   eigene. Jetzt bestimmt das Panel die Hoehe, weil sein Inhalt variabel
   ist (Adresse, Oeffnungszeiten), und die Karte zieht mit.
   `align-items: stretch` ist der Grid-Default; die Karte braucht nur eine
   Hoehe, die sich daran haengt statt fix zu sein. */
@media (min-width: 992px) {
  .u-two-col.is-location { align-items: stretch; }
  .u-two-col.is-location > .location_map {
    height: 100%;
    min-height: 400px;
  }
}
/* --- Abstaende unter den Titeln ---------------------------------------
   Gemessen im Design: der Block "Oeffnungszeiten" hat `gap: 16` (Desktop),
   14 (Tablet), 12 (Mobil) zwischen Titel und Liste - deutlich weniger als
   live. Der Container `u-section-header` bringt seinen eigenen, groesseren
   Abstand mit; hier wird er fuer die Info-Spalte auf die Designwerte
   zurueckgesetzt. */
/* Gemessen im Live-Stand war es genau verkehrt herum:
     Titel -> Text        40px bzw. 32px
     Text  -> naechster Titel  16px
   Der Text klebte am naechsten Titel und stand weit von seinem eigenen ab.
   Ursache: `.body-md` und `.hours-list` bringen ein eigenes `margin-top`
   mit (24 bzw. 16px), das sich zum Flex-Gap des Panels addiert. Das Gap
   allein zu verkleinern haette nichts gebracht, weil die Margins bleiben.
   Jetzt: das Panel-Gap traegt den KLEINEN Abstand (Titel -> Text), die
   Eigenmargins werden genullt, und der GROSSE Abstand kommt als
   margin-top auf den zweiten Titel. So gehoert der Text sichtbar zu
   seiner Ueberschrift. */
.u-two-col.is-location > .u-section-header {
  gap: var(--_sizes---space--2);
}
.u-two-col.is-location .heading-md {
  margin-top: 0;
  margin-bottom: 0;
}
.u-two-col.is-location .body-md,
.u-two-col.is-location .hours-list {
  margin-top: 0;
}
/* Der groessere Abstand vor jedem Titel ausser dem ersten. */
.u-two-col.is-location > .u-section-header > .heading-md + *,
.u-two-col.is-location > .u-section-header > * + .heading-md {
  margin-top: 0;
}
.u-two-col.is-location > .u-section-header > .heading-md:not(:first-child) {
  margin-top: var(--_sizes---space--5);
}
/* --- Kontaktkarten: Umbruch ab 1280 -----------------------------------
   Vorgabe aus der Abnahme, gedeckt durch den Tablet-Frame: dort wird die
   Card VERTICAL, `ContactBlock` linksbuendig (im Design `MIN` statt `MAX`),
   und das Download-Icon wandert mit nach unten.
   Der Bruch liegt bei 1280, nicht bei 992: zwei Karten nebeneinander mit
   Avatar, Name, Telefon und E-Mail brauchen mehr Platz, als das
   12-Spalten-Raster dort hergibt. */
@media (max-width: 1280px) {
  .contact-card {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--_sizes---space--3);
  }
  .contact-card_contact {
    width: 100%;
    justify-content: flex-start;
  }
  /* Telefon und E-Mail linksbuendig unter den Namen. Im Design steht der
     Block auf MIN, live stand er rechtsbuendig. */
  .contact-card_contact-lines {
    align-items: flex-start;
    text-align: left;
  }
  .contact-card_link { text-align: left; }
}
/* --- Download-Icon --------------------------------------------------
   Voll aufgeklappt sitzt es rechts, vertikal zentriert. Sobald die Karte
   umbricht, rutscht es in die untere linke Ecke - auf dieselbe Zeile wie
   Telefon und E-Mail. Genau so steht es im Tablet-Frame. */
.contact-card_contact {
  display: flex;
  align-items: center;
  gap: var(--_sizes---space--2);
}
/* Die Groesse steht schon weiter oben: 44px Tap-Target um eine 32px
   Malflaeche, Icon als Data-URI aus der Figma-Datei. Hier nur die
   Positionierung - keine zweite Groessenangabe, sonst gaebe es zwei
   Quellen fuer dieselbe Eigenschaft. */
.contact-card_download { margin-left: auto; }
/* --- Kontaktkarten aus dem CMS — 23. Aug -----------------------------
   Das Download-Symbol ist jetzt ein `<a>` statt eines `<div>`, weil es
   auf die vCard verlinkt. Unterstreichung und Linkfarbe zuruecksetzen -
   das Symbol ist eine Flaeche mit Hintergrundbild, kein Text.
   Fehlt die Datei, rendert Webflow den Link ohne `href`. Dann wird das
   Symbol ausgeblendet - genau das sagt der `helpText` am Feld zu.
   4. Sep: Die Bindung zeigt jetzt auf das Feld `vcard-url` (Typ Link) statt
   auf das alte File-Feld `vcard`. Webflow laesst `.vcf` im Designer nicht
   hochladen und verwirft File-Feld-Schreibzugriffe der API stillschweigend -
   deshalb der Umweg ueber eine URL. Das File-Feld ist geloescht.
   Die Regel oben bleibt sinnvoll und greift weiterhin, sobald bei einer
   Person kein Link hinterlegt ist. Siehe qa/vcard-upload-2026-09-04.md. */
a.contact-card_download {
  text-decoration: none;
  color: inherit;
}
a.contact-card_download:not([href]) { display: none; }
/* ------------------------------------------- Hover auf den Kontaktkarten
   4. Sep: Alle drei anklickbaren Dinge einer Karte - Telefon, E-Mail und
   das Download-Symbol - werden im Hover orange (`action/accent`). Vorher
   hatte keines einen Hover-Zustand: der Zeiger wechselte, die Farbe nicht.
   Nur fuer echte Zeigergeraete. Auf Touch bleibt ein :hover nach dem Tippen
   haengen, bis anderswo hingetippt wird - dieselbe Begruendung wie bei den
   Buttons weiter oben.
   Das Symbol traegt seine Farbe seit der Mask-Umstellung in
   `background-color`, Text in `color` - daher zwei Regeln statt einer. */
@media (hover: hover) and (pointer: fine) {
  a.contact-card_link:hover,
  a.contact-card_link:focus-visible {
    color: var(--_colour---action--accent);
  }
  a.contact-card_download:hover,
  a.contact-card_download:focus-visible {
    background-color: var(--_colour---action--accent);
  }
}
/* Der Farbwechsel laeuft mit derselben kurzen Dauer wie an den Buttons.
   Ausserhalb der Media Query, damit die Eigenschaft auch dann definiert
   ist, wenn der Hover-Block nicht greift. */
.contact-card_link,
.contact-card_download {
  transition:
    color calc(var(--_sizes---motion--duration--fast) * 1ms) ease,
    background-color calc(var(--_sizes---motion--duration--fast) * 1ms) ease;
}
/* Die Collection List schiebt `w-dyn-list` und `w-dyn-items` zwischen
   Raster und Karten. Das Gitter zieht deshalb auf `w-dyn-items` um, sonst
   liegen alle Karten untereinander.
   Werte 1:1 aus der Regel oben uebernommen, NICHT neu erfunden:
   `--grid-gutter` (nicht 24 fest, der Wert haengt am Bereich) und
   `minmax(0, 1fr)` statt `1fr`. Das Minimum Null ist hier kein Detail -
   ohne es hebt die lange Adresse rene.burtscher@steinhauser-fahrzeugbau.at
   die Spuren auf 764/775px und die Karten laufen aus dem Container.
   Umbruch auf eine Spalte bei 599, nicht 767: der Bereich 600-767 hat
   laut Raster-Spec §2 noch 8 Spalten und behaelt die Zweiteilung. */
/* Sobald die Liste drinsteckt, darf das aeussere Element KEIN Grid mehr
   sein: es machte weiter zwei 588er-Spalten, die Liste landete in einer
   davon und das innere Gitter teilte diese nochmals - gemessen 282px
   statt 588. Aussen also Block, das Gitter macht `w-dyn-items`. */
.contact-directory_grid:has(> .w-dyn-list) {
  display: block !important;
}
.contact-directory_grid > .w-dyn-list { width: 100%; }
.contact-directory_grid .w-dyn-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gutter);
}
/* 4. Sep: Umbruch auf eine Spalte von 599 auf 749 hochgezogen - auf Wunsch.
   Bei 740px standen die Karten noch zweispaltig; jede Karte war dort rund
   350px breit, und darin liegen Avatar (74px), Rolle/Name und rechts
   Telefon/E-Mail plus Download-Symbol. Die lange E-Mail-Adresse
   (`rene.burtscher@steinhauser-fahrzeugbau.at`) passt in dieser Breite nicht
   mehr in eine Zeile.
   749 statt 750, damit 750px selbst noch zweispaltig ist - `max-width` ist
   einschliessend. */
@media (max-width: 749px) {
  .contact-directory_grid .w-dyn-items { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1280px) {
  .contact-card_contact { align-items: flex-end; }
}
/* --- Rolle nicht in Grossbuchstaben ----------------------------------
   Im Design ist `textCase: ORIGINAL` - "Geschaeftsleitung", nicht
   "GESCHAEFTSLEITUNG". Live stand `text-transform: uppercase`. */
.contact-card_role {
  text-transform: none;
}
/* ==========================================================================
   /fahrzeuge — Seite "Fahrzeuge 02" (Figma 4012:21736)
   Alle Werte aus dem Artboard gelesen, nicht geschaetzt.
     Sektion Einsatzbereiche  padding 96/120, Flaeche neutral-100
     Kopf                     Frame 29, 766 breit, gap 16, unten 32
     UseCaseGrid              1200 breit, 3 Reihen a 3 Karten, gap 14
     UseCaseCard              391x143, radius 14, weiss, padding 15/18
     Medienfeld               197x90 (bzw. 286/229 bei zwei Karten)
     Label                    16 Bold, zentriert, neutral-700, gap 4
   Das Raster ist in Figma als drei Reihen gebaut. Im Web ist es EIN Grid mit
   drei Spalten - gleiche Optik, aber es bricht sauber um, statt drei starre
   Zeilen zu erzwingen.
   ========================================================================== */
.u-section.is-usecases {
  background-color: var(--_colour---neutral-100);
}
/* Der Kopf haengt sonst an `grid/max-width` - derselben Variable mit festen
   Frame-Breiten, die schon die Jobkarte zu schmal gemacht hat. Im Design ist
   der Textblock 766 breit und mittig, der Fliesstext 694. */
.u-section.is-usecases > .u-section-header {
  max-width: 766px;
  margin-inline: auto;
  padding-bottom: var(--_sizes---space--5);
}
.u-section.is-usecases > .u-section-header .body-md {
  max-width: 694px;
  margin-inline: auto;
}
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  max-width: var(--container-cap, none);
  margin-inline: auto;
}
/* Kartenhoehe 139, aus dem Illustrations-Entwurf (3751:19063). Der davor
   gebaute Icon-Entwurf (4396:4476, 77 hoch, 24x24-Strichicons) ist damit
   ueberholt - hier stehen wieder Zeichnungen ueber dem Label.
   Die 139 stehen nirgends als Zahl, sie ergeben sich:
     15 Padding + 78 Zeichnung + 12 Gap + 19 Label + 15 Padding = 139
   Gegen die Metadaten geprueft: Zeichnung y=15 h=78, Label y=105 h=19.
   Der Wert haengt am Label - eine feste `height` waere die zweite Stelle
   mit derselben Zahl und wuerde bei laengeren Labels ueberlaufen statt
   mitzuwachsen. Der Gap ist `text/gap-md` (12), so auch im Entwurf. */
.usecase-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: var(--_sizes---text--gap-md);
  padding: 15px 18px;
  border-radius: var(--_sizes---radius--sm);
  background-color: var(--_colour---white);
  /* Die Karosserieflaechen der Zeichnungen laufen auf diese Farbe (siehe
     `.usecase-card_illus`). Sie muss der Kartenfarbe folgen, sonst steht
     im Hover ein weisser Block auf blauem Grund. */
  --illus-bg: var(--_colour---white);
}
/* Zurueck zu Zeichnungen: im Entwurf 78 hoch, die Breite variiert je
   Motiv (200 bis 280). Das Medienfeld gibt deshalb nur die Hoehe vor und
   laesst die Breite aus dem viewBox folgen. */
.usecase-card_media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 78px;
}
/* Die Zeichnungen liegen INLINE im Markup, nicht als `background-image`.
   Der Grund ist der Hover: die Karte wird blau, die Zeichnung muss weiss
   werden. Ein externes SVG (per `<img>` oder `background`) laesst sich
   vom Stylesheet der Seite aus nicht umfaerben. Die 24x24-Icons davor
   lagen als MASKE, das geht hier nicht - die Motive haben weiss
   gefuellte Karosserien, die eine Maske zu einer schwarzen Silhouette
   zusammenfallen laesst (geprueft, genau so passiert es).
   Inline mit `currentColor` loest beides: die Striche folgen der
   Textfarbe, die Flaechen folgen `--illus-bg` und damit der Karte. */
.usecase-card_illus {
  display: block;
  height: 78px;
  width: auto;
  max-width: 100%;
  color: var(--_colour---neutral-700);
  transition: color calc(var(--_sizes---motion--duration--fast) * 1ms) ease;
}
/* Die Icons liegen als MASKE, nicht als `background-image`.
   Grund ist der Hover: die Karte wird blau, das Icon muss weiss werden.
   Ein `<img>` laesst sich per CSS nicht umfaerben - die alte Loesung hat
   deshalb `filter: invert(1)` benutzt. Das kippt aber jede Farbe, nicht
   nur Schwarz->Weiss, und haengt daran, dass das Icon exakt schwarz ist.
   Mit `mask` bestimmt `background-color` die Farbe. Damit reicht im Hover
   eine einzige Zeile, und das Icon ist in beiden Zustaenden exakt die
   Token-Farbe statt eines Rechenergebnisses. */
.usecase-card_icon {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  background-color: var(--_colour---neutral-700);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
  mask-position: 50% 50%;
  -webkit-mask-size: 24px 24px;
  mask-size: 24px 24px;
  transition: background-color calc(var(--_sizes---motion--duration--fast) * 1ms) ease;
}
/* Der Entwurf setzt das Label auf `lineHeight: AUTO` - Latos Eigenmetrik,
   19px bei 16px. Vorher stand hier `--_sizes---font--line-height--normal`,
   das ist 1.4 und ergibt 22.39px. Genau diese 3.39px fehlten der Karte
   auf die 77 des Entwurfs.
   Warum hier ein Literal und keine Variable: `font/line-height/auto` steht
   zwar in `tokens.json` (Wert "normal"), ist in Webflow aber NICHT als
   Variable angelegt - geprueft in webflow.shared.css, dort gibt es nur
   flat/tight/snug/compact/relaxed/normal. `var(--...--auto)` waere ohne
   Fallback durchgefallen und die Karte still wieder zu hoch geworden. */
.usecase-card_label {
  color: var(--_colour---neutral-700);
  font-family: var(--_sizes---font--family--sans);
  font-size: var(--_sizes---font-size--h6);
  font-weight: var(--_sizes---font--weight--bold);
  line-height: normal;
  text-align: center;
}
/* ------------------------------------------------ Beratung (CTA/Beratung)
   Design: QGrid 1200 breit, gap 19. QuoteCard 600 FIXED, neutral-100,
   radius 26, padding 42. Photo 581 FILL, radius 26.
   600 + 19 + 581 = 1200 - also faktisch zwei gleich breite Spalten. */
.u-section.is-beratung {
  background-color: var(--_colour---white);
}
.beratung-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 19px;
  align-items: stretch;
  width: 100%;
  max-width: var(--container-cap, none);
  margin-inline: auto;
}
/* Im Markup steht das Foto ZUERST - so stimmt die Reihenfolge auf Mobil
   (erst Bild, dann Kontaktinfo) ohne `order`. Auf Desktop dreht das Raster
   die beiden per Spaltenzuweisung um: Karte links, Foto rechts. */
.beratung-card  { grid-column: 1; grid-row: 1; }
.beratung-photo { grid-column: 2; grid-row: 1; }
/* Dieselbe Karte wie `.services-cta_card` auf /services - gleiche Abstaende:
   Titel->Copy und Copy->Knoepfe je `text/gap-xl` = 40px.
   `space-between` ist raus: es verteilt den Rest der 355px Mindesthoehe auf
   die Luecken, wodurch die beiden Abstaende je nach Textlaenge
   auseinanderlaufen. Ein fester Gap haelt sie gleich. */
.beratung-card {
  display: flex;
  flex-direction: column;
  row-gap: var(--_sizes---text--gap-xl);
  min-height: 355px;
  padding: 42px;
  border-radius: var(--_sizes---radius--lg);
  background-color: var(--_colour---neutral-100);
}
/* Im Design ist der Fliesstext 456 breit und `Text Small` (16px), nicht
   `body-md` (18px). Die Ueberschrift ist `H3` (32px, snug), nicht H4. */
.beratung-card .body-sm {
  max-width: 456px;
}
/* Browser-Default-Margins neutralisieren. Ohne das stapeln sich die 10px
   von `<h2>` und `<p>` auf den 40er-Gap - gemessen 50 statt 40. Auf
   /services war der Reset schon da, hier fehlte er. */
.beratung-card > h2,
.beratung-card > p,
.beratung-card .heading-lg,
.beratung-card .body-sm {
  margin: 0;
}
.beratung-card_actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--_sizes---space--2);
}
/* ------------------------------- Umgebrochene CTA-Knoepfe gleich breit
   3. Sep: Passen die beiden Knoepfe nicht mehr nebeneinander, brechen sie
   untereinander - behalten dabei aber ihre Eigenbreite. Gemessen auf
   /fahrzeuge bei 767px: Telefon 178px, E-Mail 144px. Das sieht ausgefranst
   aus. Nebeneinander sind unterschiedliche Breiten in Ordnung (Design), nur
   uebereinander nicht.
   Der Umbruch haengt an der KARTENBREITE, nicht am Viewport - gemessen:
   bei 767px bricht es (Zeile 294px, Knoepfe brauchen 330px), bei 500px
   nicht (Zeile 436px, weil das Grid dort einspaltig ist und die Karte
   breiter wird). Ein `@media`-Breakpoint waere deshalb an mindestens einer
   Breite falsch.
   Loesung ohne Breakpoint: `flex: 1 1 auto` plus `min-width: max-content`.
   `flex-basis: auto` heisst - starte bei der natuerlichen Breite. Passen
   beide Knoepfe samt Gap in die Zeile, bleiben sie nebeneinander;
   `flex-grow: 1` verteilt den Rest, sodass sie die Zeile ausfuellen und
   dabei UNTERSCHIEDLICH breit bleiben duerfen, weil sie von verschieden
   grossen Startbreiten aus wachsen. Genau das zeigt das Design.
   `min-width: max-content` verhindert, dass sie stattdessen schrumpfen und
   der Text umbricht - gemessen auf /services bei 600px war der
   Primaerknopf sonst 60px hoch statt 44, weil das Label zweizeilig wurde.
   Reicht der Platz nicht, bricht die Zeile. Jeder Knopf steht dann allein
   in seiner Zeile, und `flex-grow: 1` zieht ihn auf die volle Breite -
   beide sind exakt gleich breit, ohne Pixelzahl im Stylesheet.
   Erster Anlauf war `flex: 1 1 60%`: zwei Kinder a 60 % passen NIE
   zusammen in eine Zeile, deshalb stapelten sie sich auch auf Desktop
   (gemessen 4. Sep bei 1600px). `auto` statt eines Prozentwerts ist der
   Punkt.
   Gilt fuer beide Varianten der Sektion: `.beratung-card_actions` auf
   /fahrzeuge und den Fahrzeug-Detailseiten, `.services-cta_actions` auf
   /services. Gleiches Bauteil, historisch zwei Klassennamen. */
.beratung-card_actions > .button-primary,
.beratung-card_actions > .button-secondary,
.services-cta_actions > .button-primary,
.services-cta_actions > .button-secondary {
  /* 4. Sep, auf ausdrueckliche Ansage des Auftraggebers: nebeneinander
     GLEICH breit. `flex-basis: 0` statt `auto` - beide Knoepfe starten bei
     Breite 0 und teilen sich den Platz zu gleichen Teilen. Mit `auto`
     wuchsen sie von ihrer Textbreite aus und blieben unterschiedlich.
     ABWEICHUNG VOM ENTWURF, bewusst und abgestimmt: in Figma sind die
     Knoepfe unterschiedlich breit (Sekundaer 147 bei x=197). Bitte NICHT
     "zurueck auf Figma" korrigieren - qa/beratung-buttons-gleiche-breite.md.
     `min-width: max-content` musste weichen: es haelt jeden Knopf bei
     seiner eigenen Textbreite fest, wodurch sie im schmalen Fenster wieder
     ungleich wuerden. Der Umbruchschutz wandert auf `white-space`. */
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
}
.beratung-photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 355px;
  object-fit: cover;
  border-radius: var(--_sizes---radius--lg);
}
/* ---------------------------------------------------------- Tablet
   Ausdruecklich gewuenscht: Fahrzeugraster bleibt 3-spaltig, die
   Beratung bleibt zweispaltig. Nur die Innenabstaende ziehen nach. */
@media (max-width: 991px) {
  .beratung-card {
    padding: var(--_sizes---space--5);
    min-height: 0;
  }
  .beratung-photo {
    min-height: 260px;
  }
}
/* ---------------------------------------------------------- Mobil
   Ausdruecklich gewuenscht: Raster einspaltig, Beratung einspaltig und
   dabei ZUERST das Bild, dann die Kontaktinfo. Die Spaltenzuweisung von
   oben wird aufgehoben, damit die DOM-Reihenfolge wieder greift. */
/* In der 3er-Spalte unter 992px wird die Karte schmaler als das breiteste
   Motiv (280 bei 258 Zeichenflaeche). Mit fester Hoehe wuerde `max-width`
   das Bild stauchen - deshalb dort die Hoehe freigeben und das
   Seitenverhaeltnis fuehren lassen. Das Medienfeld behaelt seine 78, die
   Karte bleibt also 139 hoch. */
@media (max-width: 991px) {
  .usecase-card_illus {
    height: auto;
    max-height: 78px;
  }
}
@media (max-width: 599px) {
  .usecase-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .beratung-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--_sizes---space--4);
  }
  .beratung-card,
  .beratung-photo {
    grid-column: auto;
    grid-row: auto;
  }
  .beratung-card {
    padding: var(--_sizes---space--4);
  }
  .beratung-photo {
    min-height: 220px;
  }
}
/* ================================================== /services — 23. Aug
   Neue Seite, gebaut aus dem Figma-Frame "Services" (3018:7207). Es gibt
   nur einen Desktop-Frame, kein Tablet/Mobil - das Umbruchverhalten kommt
   aus der Vorgabe und folgt den Mustern der uebrigen Seiten.
   Alle Abstaende, Radien und Farben sind im Design an Variablen gebunden
   und hier als dieselben Tokens gesetzt. Gemessen, nicht geschaetzt:
     Hero            padding-top section-space/page-top, Heroshot radius/md
     Section         padding section-space/medium, Grund neutral-100
     Section-Gap     text/gap-xl zwischen Kopf und Grid
     Grid/Row-Gap    text/gap-lg
     Karte           radius/sm, Grund white, padding text/gap-md/space-4,
                     Icon-Text-Abstand text/gap-sm
     CTA-Karte       radius/lg, Grund neutral-100, padding 42 (Literal,
                     steht auf keiner Skala)
     CTA-Foto        radius/lg
     Buttons         bestehende Klassen button-primary/-secondary */
/* --- Hero -------------------------------------------------------------
   Das Video liegt wie das Teamfoto auf /karriere IM Raster, nicht
   full-bleed wie der Hero der Startseite. Deshalb `hero-page_media`-
   Verhalten: Containerbreite, Cap erst ab 1440. Seitenverhaeltnis aus
   dem Frame: 1200x583 = 2.058. */
.u-section.is-services-hero {
  padding-top: var(--_sizes---section-space--page-top);
}
/* H1 im Design: x=120, w=1200 - volle Containerbreite, und
   `textAlignHorizontal: CENTER`. Der Titel ist also zentriert, nicht
   links. Zeilenhoehe 116% aus dem Textstil H1. */
.services-hero_head {
  align-items: center;
  text-align: center;
  margin-bottom: var(--_sizes---text--gap-xl);
}
.services-hero_head .heading-xl,
.services-hero_head h1 {
  margin: 0;
}
.services-hero_media {
  width: 100%;
  max-width: var(--container-cap, none);
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--_sizes---radius--md);
  aspect-ratio: 1200 / 583;
}
.services-hero_video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* --- Headline ueber dem Video (23. Sep) ---------------------------------
   Design 4884:4267: "Sie rufen an. / Wir kuemmern uns.", Textstil H1,
   weiss, links 40 und unten 96 im Heroshot. Markup ist H2 - die Seite hat
   ihre H1 schon ("Services & Reparatur"); nur die OPTIK ist H1, deshalb
   `heading-xl` plus Kombiklasse. Die a11y-Annotation im Frame sagt
   h1 - bewusst ueberstimmt, zwei H1 waeren der Fehler.
   Der Verlauf fehlt im Design. Er ist 1:1 der Scrim der Startseite
   (`.hero-video_scrim`, Webflow-Klasse): neutral-800 deckend links nach
   transparent, 730px breit, hoechstens 70 %; auf Mobil von unten nach
   oben ueber die volle Flaeche. Ohne ihn ist Weiss auf dem hellen
   Videobild nicht lesbar.
   Die Abstaende laufen ueber Tokens mit, statt fest 40/96: space/6 ist
   40 auf Desktop, section-space/medium 96. */
.services-hero_media {
  position: relative;
}
.services-hero_scrim {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 730px;
  max-width: 70%;
  background-image: linear-gradient(90deg,
    var(--_colour---neutral-800) 0%,
    transparent 100%);
  pointer-events: none;
}
.heading-xl.is-services-hero-headline {
  position: absolute;
  left: var(--_sizes---space--6);
  right: var(--_sizes---space--6);
  bottom: var(--_sizes---section-space--medium);
  z-index: 2;
  margin: 0;
  color: var(--_colour---white);
  /* Der Zeilenumbruch steht als \n im Text, wie beim Slogan der
     Startseite. */
  white-space: pre-line;
}
/* Mobil: Der Heroshot waere bei 2.058:1 nur ~175px hoch - zwei Zeilen H1
   (2 x 38 x 1.16 = 88px) plus Abstand passen da nicht hinein. Es gibt
   keinen Mobil-Frame; 4:3 folgt dem Muster der Startseite, deren Hero
   auf Mobil ebenfalls hoeher wird. Der Verlauf dreht wie dort nach
   unten -> oben. */
@media (max-width: 767px) {
  .services-hero_media { aspect-ratio: 4 / 3; }
  .services-hero_scrim {
    width: 100%;
    max-width: 100%;
    background-image: linear-gradient(0deg,
      var(--_colour---neutral-800) 0%,
      transparent 100%);
  }
  .heading-xl.is-services-hero-headline {
    left: var(--_sizes---space--4);
    right: var(--_sizes---space--4);
    bottom: var(--_sizes---space--5);
  }
}
/* --- Leistungen -------------------------------------------------------
   Korrigiert 23. Aug nach erneutem Abgleich mit dem Frame. Vorher stand
   hier "linksbuendig" - das war aus der Breite (560px) geschlossen, nicht
   aus der Ausrichtung gelesen. Gemessen im Design:
     Eyebrow   x=615, w=210  -> Mitte 720 = Frame-Mitte
     H2        x=440, w=560  -> Mitte 720 = Frame-Mitte
   Beide sind zentriert, `textAlignHorizontal: CENTER`. Der Kopf ist also
   ein zentrierter 560er-Block, kein linker. */
.u-section.is-leistungen {
  background-color: var(--_colour---neutral-100);
}
/* Selektor bewusst mit `.u-section >` davor: das Element traegt auch
   `u-section-header`, und die Containerregel dort steht als
   `.u-section > .u-section-header { max-width: ... !important }`. Ein
   einfaches `.leistungen_head` ist weniger spezifisch und verliert auch
   mit `!important` - gemessen: 1200 statt 560. Gleiche Spezifitaet plus
   spaetere Position gewinnt.
   Die Breite ist hier keine Containerbreite, sondern das gezeichnete
   Satzmass des Kopfes (Design: 560px, mittig auf der Frame-Achse). */
.u-section > .leistungen_head,
.leistungen_head {
  align-items: center;
  text-align: center;
  max-width: 560px !important;
  margin-inline: auto !important;
  margin-bottom: var(--_sizes---text--gap-xl);
}
/* Die Sektionsueberschrift ist im Design H2 (40px), nicht H3. `heading-md`
   liefert 32 - hier auf font-size/h2 gehoben. Zeilenhoehe 110% aus dem
   Textstil, Browser-Default-Margins neutralisiert (sonst stapeln sie sich
   auf den Flex-Gap des Kopfes). */
.leistungen_head .heading-md,
.leistungen_head h2 {
  margin: 0;
  font-size: var(--_sizes---font-size--h2);
  line-height: 1.1;
  letter-spacing: var(--_sizes---font--tracking--tight);
}
.leistungen_head .eyebrow { margin: 0; }
/* Zwei Karten pro Zeile am Desktop. Vorgabe: ab Tablet abwaerts eine
   Karte pro Zeile. */
.leistungen_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--_sizes---text--gap-lg);
  width: 100%;
  max-width: var(--container-cap, none);
  margin-inline: auto;
}
@media (max-width: 991px) {
  .leistungen_grid { grid-template-columns: 1fr; }
}
.leistung-card {
  display: flex;
  align-items: flex-start;
  gap: var(--_sizes---text--gap-sm);
  padding: var(--_sizes---text--gap-md) var(--_sizes---space--4);
  border-radius: var(--_sizes---radius--sm);
  background-color: var(--_colour---white);
}
/* Icons als Maske, damit sie ueber `background-color` aus einem Token
   eingefaerbt werden - die SVGs tragen `currentColor` statt einer festen
   Farbe. Im Design sind sie neutral-700.
   11. Sep: alle drei Icons gegen die neuen aus dem Design getauscht
   (Figma 3018:7215, Knoten 4482:4160 / 4035:22559 / 4482:4234). Die
   `-v2`-Dateien sind BYTEGLEICH mit dem Figma-Export - bewusst nicht
   nachbearbeitet.
   Wichtig fuer den naechsten Tausch: Figma liefert zwei SVGs je Knoten.
   Der `export` traegt ein deckendes 36x36-Rechteck samt Seitenhintergrund
   mit; als Maske ergaebe das ein ausgefuelltes Quadrat statt eines Icons.
   Gebraucht wird der Eintrag aus `svgAssets` - nur die Vektoren.
   `Ladeboardwand` ist im Design rechts angeschnitten: die Pfade laufen bis
   x=52 in einer 36 breiten viewBox. Das ist KEIN Exportfehler - Figma
   rendert den Knoten selbst so, und im Abschnittsbild sieht die Kachel
   genauso aus. Nicht "reparieren": eine geweitete viewBox waere ein
   anderes Icon als das entworfene. */
.leistung-card_icon {
  flex: none;
  width: 36px;
  height: 36px;
  background-color: var(--_colour---neutral-700);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
  mask-position: 50% 50%;
  -webkit-mask-size: 36px 36px;
  mask-size: 36px 36px;
}
.leistung-card_icon[data-icon="reparatur"] {
  -webkit-mask-image: url("https://cdn.prod.website-files.com/6a8566a5ee577323e74ca7cf/6aa379fa4d90c35172c48066_icon-reparatur-v2.svg");
  mask-image: url("https://cdn.prod.website-files.com/6a8566a5ee577323e74ca7cf/6aa379fa4d90c35172c48066_icon-reparatur-v2.svg");
}
.leistung-card_icon[data-icon="kuehlservice"] {
  -webkit-mask-image: url("https://cdn.prod.website-files.com/6a8566a5ee577323e74ca7cf/6aa379faae340f392e09e5c0_icon-kuehlservice-v2.svg");
  mask-image: url("https://cdn.prod.website-files.com/6a8566a5ee577323e74ca7cf/6aa379faae340f392e09e5c0_icon-kuehlservice-v2.svg");
}
.leistung-card_icon[data-icon="ladebordwand"] {
  -webkit-mask-image: url("https://cdn.prod.website-files.com/6a8566a5ee577323e74ca7cf/6aa379fad768bdbaab9ae96c_icon-ladebordwand-v2.svg");
  mask-image: url("https://cdn.prod.website-files.com/6a8566a5ee577323e74ca7cf/6aa379fad768bdbaab9ae96c_icon-ladebordwand-v2.svg");
}
.leistung-card_text {
  display: flex;
  flex-direction: column;
  gap: var(--_sizes---text--gap-xs);
}
/* Textstile aus dem Design, nicht aus der Default-Klasse:
     Titel   H4          24 Bold, 130%, text/default
     Copy    Text Small  16 Regular, 140%, neutral-500
   `body-md` liefert 18px/text-default - beides zu gross und zu dunkel. */
.leistung-card_text .heading-sm,
.leistung-card_text h3 {
  margin: 0;
  font-size: var(--_sizes---font-size--h4);
  line-height: 1.3;
}
/* Laufweite aus dem Textstil "Text Small": +1%. */
.leistung-card_text .body-md,
.leistung-card_text p {
  margin: 0;
  font-size: var(--_sizes---font-size--text-small);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--_colour---neutral-500);
}
/* --- Kontaktabschnitt -------------------------------------------------
   Zwei Rechtecke nebeneinander, im Design je 588x355.
   Vorgabe: am Tablet bleiben sie nebeneinander, erst mobil untereinander
   - und dann ZUERST das Bild, dann der Textkasten. Im Markup steht der
   Text zuerst (er ist inhaltlich fuehrend und soll fuer Screenreader und
   Suchmaschinen vorn stehen); die Reihenfolge dreht mobil per `order`. */
.services-cta_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--_sizes---text--gap-lg);
  align-items: stretch;
  width: 100%;
  max-width: var(--container-cap, none);
  margin-inline: auto;
}
/* "Auf Tablet bleiben sie nebeneinander, mobil untereinander." Der
   Tablet-Bereich reicht laut Spec §2 bis 767 hinunter (600-767 hat noch
   8 Spalten) - der Umbruch gehoert also unter 600, nicht unter 768.
   Bei 734px waren sie sonst schon gestapelt. */
@media (max-width: 599px) {
  .services-cta_grid { grid-template-columns: 1fr; }
  .services-cta_photo { order: 1; }
  .services-cta_card  { order: 2; }
}
/* Abstand Titel->Copy und Copy->Knoepfe: beide `text/gap-xl` = 40px.
   Vorher `text/gap-md` (16) - zu eng. Ein einziger Gap statt zweier Werte,
   damit die beiden Abstaende zwangslaeufig gleich bleiben. */
.services-cta_card {
  display: flex;
  flex-direction: column;
  gap: var(--_sizes---text--gap-xl);
  /* 42px steht auf keiner Token-Skala - Literal mit Absicht, wie die
     Videohoehe im Hero. Naechste Tokens waeren 40 (space/6) und
     48 (space/7). */
  padding: 42px;
  border-radius: var(--_sizes---radius--lg);
  background-color: var(--_colour---neutral-100);
}
/* Zitat-Titel ist im Design H3 (32 Bold, 115%), nicht heading-md (24).
   Copy ist Text Small (16/140%) in text/default - anders als die
   Leistungskarten, die neutral-500 nutzen. */
.services-cta_card .heading-md,
.services-cta_card h2 {
  margin: 0;
  font-size: var(--_sizes---font-size--h3);
  line-height: 1.15;
}
.services-cta_card .body-md,
.services-cta_card p {
  margin: 0;
  font-size: var(--_sizes---font-size--text-small);
  line-height: 1.4;
  letter-spacing: 0.01em;
}
/* `margin-top: auto` hat die Knoepfe an den Kartenboden gedrueckt: Abstand
   Titel->Copy 26, Copy->Knoepfe 69. Im Design steht die Karte auf
   SPACE_BETWEEN bei fixen 355px Hoehe - und weil der Inhalt diese Hoehe
   genau ausfuellt, sind beide Abstaende dort gleich gross. Ein gleicher
   Gap ist deshalb die getreue Umsetzung und haelt auch dann, wenn der Text
   sich aendert - anders als SPACE_BETWEEN, das dann wieder auseinanderfaellt. */
.services-cta_actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--_sizes---control--gap-sm);
}
.services-cta_photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--_sizes---radius--lg);
  aspect-ratio: 588 / 355;
}
/* ------------------------------------------- Beratungs-Buttons (Design)
   Beide Knoepfe sind im Artboard ORANGE, nicht blau:
     Primary    Flaeche #e55d00 (action/accent), Text weiss 14 Bold,
                Telefon-Icon 16x16, gap 4, padding 12/24, radius pill
     Secondary  Rand 2px #e55d00, Text #e55d00 14 Bold, transparent
   `action/accent` loest auf `accent-color-AA` = #e55d00 auf - exakt der
   Designwert. `.button-primary.is-accent` gab es bereits (Startseite),
   die Sekundaer-Variante ist neu.
   Achtung: `accent-color-AA` schafft auf 14px-Labels nur 3.56:1 und ist
   damit ein bekannter Accessibility-Blocker (siehe CLAUDE.md). Hier bewusst
   designgetreu gebaut - die Entscheidung gehoert ins Design, nicht ins
   Stylesheet. */
/* Korrigiert 23. Aug. Diese Regeln standen auf `.beratung-card_actions` -
   eine Klasse, die im ausgelieferten HTML NICHT vorkommt (geprueft mit
   grep: 0 Treffer). Sie waren also wirkungslos, und der Sekundaerbutton
   rendert deshalb live in Browser-Linkblau rgb(0,0,238). Jetzt auf der
   tatsaechlichen Klasse `.services-cta_actions`.
   Ebenso ohne `.is-accent`: die Knoepfe im Markup tragen die Modifier-
   Klasse nicht. Die Farben stehen direkt auf der Basisklasse, weil dieser
   Abschnitt im Design durchgehend orange ist. */
/* 25. Aug: Von `.services-cta_actions .button-*` auf die Klassen selbst
   umgestellt. Grund: `/fahrzeuge` hat denselben Button, aber NICHT diesen
   Container - dort erbte er mangels eigener `font-size` die Body-Groesse
   und war sichtbar zu gross. `.button-primary` in Webflow definiert
   Padding und Hoehe, aber keine Schriftgroesse; die steht nur auf
   `.button-primary_label`, und dieses Kind gibt es nur in manchen Instanzen.
   Damit gilt die Buttongeometrie jetzt ueberall gleich, unabhaengig davon,
   in welchem Abschnitt der Button steht. Die ORANGE Farbgebung bleibt an
   `.services-cta_actions` gebunden - sie ist abschnittsspezifisch. */
.button-primary,
.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Im Design sind beide exakt 44 hoch, padding 12/24, radius pill. Der
     transparente Rand am Primaerbutton haelt beide auf derselben Hoehe -
     ohne ihn ist er 4px niedriger (2px Rand oben + unten beim Sekundaer). */
  min-height: var(--_sizes---space--tap-min);
  padding: 12px 24px;
  border-radius: var(--_sizes---radius--pill);
  border: 2px solid #0000;
  box-sizing: border-box;
  font-family: var(--_sizes---font--family--sans);
  font-size: var(--_sizes---font-size--text-xxs);
  font-weight: var(--_sizes---font--weight--bold);
  line-height: normal;
  text-decoration: none;
}
/* 3. Sep: Der transparente Rand oben ist nur fuer den PRIMAERbutton gedacht -
   er haelt ihn auf derselben Hoehe wie den Sekundaerbutton. Er stand aber auf
   beiden Klassen und hat damit `border-color: brand-500` aus Webflow
   ueberschrieben: der Sekundaerbutton war randlos. Im Design hat er einen
   2px-Rand in brand-500 (Figma 3018:6186, "Button Secondary").
   Betraf /karriere und die Recruiting-Sektion der Startseite.
   Die abschnittsspezifischen ORANGEN Varianten weiter unten
   (`.services-cta_actions`, `.is-accent`) stehen spaeter und schlagen das hier. */
.button-secondary {
  border-color: var(--_colour---brand-500);
}
/* Das Label-Kind erbt sonst die Body-Groesse zurueck. */
.button-primary .button-primary_label,
.button-secondary .button-secondary_label {
  font-size: inherit;
  line-height: inherit;
}
/* Abstand Icon/Text gehoert zur Buttongeometrie, nicht zum Abschnitt. */
.button-primary { column-gap: var(--_sizes---space--xxs); }
.services-cta_actions .button-primary {
  background-color: var(--_colour---action--accent);
  color: var(--_colour---white);
}
/* Der Sekundaer-Text sitzt im `.button-secondary_label`-Kind, nicht am
   Link - dort schlaegt die Klasse den Wert am Elternelement. */
.services-cta_actions .button-secondary {
  background-color: #0000;
  border-color: var(--_colour---action--accent);
  color: var(--_colour---action--accent);
}
.services-cta_actions .button-secondary .button-secondary_label {
  color: var(--_colour---action--accent);
}
/* Telefon-Icon `phone_in_talk`, 16x16, itemSpacing 4 - direkt aus dem
   Button-Primary-Symbol im Design exportiert. Als Maske eingebettet, damit
   es die Textfarbe erbt und kein zusaetzliches Asset noetig ist. */
.services-cta_actions .button-primary::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--icon-phone) no-repeat 50% 50% / 16px 16px;
  mask: var(--icon-phone) no-repeat 50% 50% / 16px 16px;
}
/* Hover: beide Knoepfe kehren sich um - weisse Flaeche, oranger Text und
   oranger Rand. Der Primaerbutton hat schon einen 2px-Rand in
   `transparent`, er wird hier nur eingefaerbt; dadurch springt die Hoehe
   nicht. Das Icon erbt `currentColor` und wird automatisch mit orange.
   Kontrast geprueft: #e55d00 auf Weiss = 3.58:1. Das ist derselbe bekannte
   AA-Befund wie beim Ruhezustand (siehe CLAUDE.md, `action/accent`) und
   keine neue Verschlechterung. */
.services-cta_actions .button-primary:hover,
.services-cta_actions .button-primary:focus-visible,
.services-cta_actions .button-secondary:hover,
.services-cta_actions .button-secondary:focus-visible {
  background-color: var(--_colour---white);
  border-color: var(--_colour---action--accent);
  color: var(--_colour---action--accent);
}
.services-cta_actions .button-secondary:hover .button-secondary_label,
.services-cta_actions .button-secondary:focus-visible .button-secondary_label {
  color: var(--_colour---action--accent);
}
:root {
  --icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M13.258 14.102c-1.305 0-2.633-.314-3.984-.942-1.35-.627-2.603-1.518-3.756-2.672-1.154-1.153-2.045-2.406-2.674-3.758C2.215 5.378 1.9 4.051 1.9 2.748c0-.241.081-.443.243-.606.162-.162.363-.243.603-.243h2.334c.2 0 .369.064.505.192.137.129.231.298.284.507l.449 2.03c.028.192.024.363-.011.513a.616.616 0 0 1-.223.387L4.404 7.183c.278.467.573.904.885 1.31.311.407.658.793 1.039 1.161.4.414.818.789 1.254 1.124.435.335.89.628 1.363.879l1.604-1.645a.79.79 0 0 1 .448-.328.75.75 0 0 1 .503-.02l1.904.422a.69.69 0 0 1 .506.279.75.75 0 0 1 .193.5v2.274c0 .242-.082.443-.244.604a.81.81 0 0 1-.601.259ZM3.837 6.154l1.346-1.339-.38-1.777H3.044c.02.451.09.928.213 1.431.122.503.316 1.065.58 1.685Zm6.162 6.066c.442.206.924.374 1.445.505.522.13 1.028.208 1.52.233v-1.767l-1.657-.343-1.308 1.372Z'/%3E%3C/svg%3E");
}
/* ------------------------------------------------ Hover: Fahrzeugkarten
   Die Karten sind Links auf die Detailseiten unter `/fahrzeuge/`.
   Gewuenscht: sie werden auf Hover blau. Umgesetzt wie bei den Pfeilen der
   Chronik - Flaeche `brand-500`, Inhalt weiss. Das ist die eindeutigste
   Lesart von "blau werden" und folgt der Hover-Sprache der Seite.
   Kontrast geprueft: Weiss auf brand-500 = 6.34:1, besteht AA.
   Nur auf Geraeten mit echtem Zeiger, sonst klebt der Zustand nach dem
   Tippen fest - dieselbe Begruendung wie bei allen anderen Hovern hier. */
.usecase-card {
  text-decoration: none;
  transition:
    background-color calc(var(--_sizes---motion--duration--fast) * 1ms) ease,
    color calc(var(--_sizes---motion--duration--fast) * 1ms) ease;
}
@media (hover: hover) and (pointer: fine) {
  .usecase-card:hover {
    background-color: var(--_colour---brand-500);
    /* Die gefuellten Karosserieflaechen ziehen mit auf Blau. Ohne das
       bliebe ein weisser Block in der Zeichnung stehen. */
    --illus-bg: var(--_colour---brand-500);
  }
  .usecase-card:hover .usecase-card_label {
    color: var(--_colour---white);
  }
  /* Die Zeichnungen liegen inline und zeichnen mit `currentColor` (siehe
     `.usecase-card_illus`) - die Striche folgen dieser einen Zeile. */
  .usecase-card:hover .usecase-card_illus {
    color: var(--_colour---white);
  }
}
/* Tastaturbedienung: der Fokusring darf nicht am Hover haengen, sonst ist
   die Karte per Tab unsichtbar erreichbar. */
.usecase-card:focus-visible {
  outline: 2px solid var(--_colour---brand-500);
  outline-offset: 3px;
}
/* ------------------------------ Beratungs-Sekundaerbutton: Label orange
   Gemessen am 25. Aug im gerenderten Browser: Rand #e55d00 (richtig),
   Label aber rgb(52,101,127) = `brand-500`, also BLAU. Figma-Knoten
   3730:14341 gibt fuer das Label `accent-color-aa` #e55d00 vor.
   Ursache ist eine Luecke, keine falsche Farbe: `.button-secondary.is-accent`
   setzt nur `border-color`. Die Textfarbe sitzt nicht am Knopf, sondern am
   inneren `.button-secondary_label`, und das traegt aus Webflow
   `color: var(--_colour---brand-500)`. Der Modifier hat es nie erreicht.
   Fuer `/services` existiert das Gegenstueck bereits
   (`.services-cta_actions .button-secondary .button-secondary_label`), fuer
   die Beratungskarte gab es die Regel NUR im `:hover`-Block darunter -
   deshalb war der Knopf im Ruhezustand blau und wurde erst bei Mausberuehrung
   orange.
   Adressiert ueber `.is-accent` statt ueber die Sektionsklasse: der Modifier
   bezeichnet den Akzent-Zustand, nicht den Ort. Im ausgelieferten Markup
   kommt er derzeit ausschliesslich auf /fahrzeuge vor (geprueft auf allen
   sechs Seiten), greift aber automatisch, wo er spaeter noch gesetzt wird.
   Achtung, unveraendert: #e55d00 auf 14px Bold schafft nur 3.07:1 gegen
   `neutral-100`. Das ist ein bekannter AA-Blocker, siehe
   qa/TODO-accessibility-2026-08-23.md §1. Hier bewusst designgetreu - die
   Korrektur gehoert in den Token, nicht in diese Regel. */
.button-secondary.is-accent .button-secondary_label {
  color: var(--_colour---action--accent);
}
/* --------------------------------------- Hover: Beratungs-Buttons
   NICHT der blaue Standard-Hover der Seite: beide Knoepfe sind orange und
   fuellen sich auf Hover WEISS mit orangem Text. Die Basisregeln fuer
   `button-primary`/`button-secondary` setzen hier blau - deshalb muessen
   diese Regeln spezifischer sein UND spaeter stehen. */
@media (hover: hover) and (pointer: fine) {
  .beratung-card_actions .button-primary.is-accent:hover {
    background-color: var(--_colour---white);
    border-color: var(--_colour---action--accent);
    color: var(--_colour---action--accent);
  }
  /* Das Icon ist ein weisses SVG als <img> - auf weissem Grund unsichtbar.
     Der Filter faerbt es auf #e55d00 ein (per Farbmatrix angenaehert). */
  .beratung-card_actions .button-primary.is-accent:hover .beratung-btn_icon {
    filter: invert(45%) sepia(85%) saturate(2400%) hue-rotate(6deg) brightness(97%) contrast(101%);
  }
  .beratung-card_actions .button-secondary.is-accent:hover {
    background-color: var(--_colour---white);
    border-color: var(--_colour---action--accent);
  }
  .beratung-card_actions .button-secondary.is-accent:hover .button-secondary_label {
    color: var(--_colour---action--accent);
  }
}
/* ==========================================================================
   Typografie-Abgleich gegen die Figma-Textstile — 23. Aug
   Die acht Basisklassen (`heading-xl/lg/md/sm`, `body-lg/md/sm`, `eyebrow`)
   stimmen exakt mit H2/H3/H4/H5, Text Large/Main/Small und Subheadline
   ueberein - geprueft, keine Abweichung.
   Falsch waren EINZELKLASSEN, die eigene Schriftwerte setzen statt eine
   Basisklasse zu nutzen. Sie sind hier auf die Designwerte gezogen. Quelle
   ist jeweils der Stilname am Textknoten in Figma, nicht die Optik.
   Sollwerte aus den Figma-Textstilen:
     H2                 40px / 110% / -1%
     H3                 32px / 115% /  0%
     H6                 16px / AUTO /  0%
     Subheadline        18px / 120% /  9%  UPPER
     Text Small         16px / 140% /  1%
     Text Small · Bold  16px / 140% /  1%  Bold
     Text XXS · Bold    14px / AUTO /  0%  Bold
   ========================================================================== */
/* Navigation: im Design `Text Small` (16/140/1), aktiv `Text Small · Bold`.
   Gebaut war `font-size/text-main` = 18px ohne Laufweite. */
.nav-primary_link {
  font-size: var(--_sizes---font-size--text-small);
  line-height: var(--_sizes---font--line-height--normal);
  letter-spacing: var(--_sizes---font--tracking--wide);
}
/* Footer-Links sind `Text Small` - die Laufweite von 1% fehlte. */
.footer-main_link {
  letter-spacing: var(--_sizes---font--tracking--wide);
  /* Trefferflaeche vergroessern, OHNE die Geometrie anzufassen (18. Sep).
     Gemessen waren die Links 19px hoch (mobil 18px) - unter jeder
     Zielgroessen-Schwelle.
     ERSTER VERSUCH VERWORFEN, und der Grund gehoert hierher: `padding-block`
     mit ausgleichendem negativem `margin-block` klingt neutral, war es aber
     nicht. Nachgemessen am ausgelieferten Stand:
       - Der Footer wuchs mobil von 882 auf 905px, die Seite entsprechend.
         Das negative Margin greift nicht in jedem Container gleich.
       - Der Zeilenabstand betraegt mobil nur 14px; bei 7px oben und unten
         ueberlappten sich benachbarte Trefferflaechen um 1px. Dann trifft
         man den Nachbarn statt des gewollten Links - schlechter als eine
         kleine Flaeche.
       - Ein Teil der Links blieb bei 14px, bekam also gar kein Padding:
         die Rechtslinks im Fusszeilen-Balken haengen in einer anderen
         Struktur.
     Statt dessen ein Pseudo-Element: es liegt UEBER dem Link, vergroessert
     die klickbare Flaeche und nimmt im Layout null Platz ein. Die Geometrie
     bleibt damit Pixel fuer Pixel unveraendert - das ist nachgemessen, nicht
     angenommen.
     Hoehe 30px zentriert auf die Textzeile: bei 19px Textzeile und 14px
     kleinstem Zeilenabstand ragt das Feld je 5.5px ueber die Zeile hinaus
     und bleibt damit unter der Haelfte des Abstands. Keine Ueberlappung,
     auch nicht mobil.
     30px erfuellt WCAG 2.2 AA (2.5.8: 24x24). Die 44px aus
     accessibility-architecture.md §2.6 sind AAA und brauchten groessere
     Zeilenabstaende - das waere eine sichtbare Layoutaenderung und gehoert
     ins Design, nicht hierher. */
  position: relative;
}
.footer-main_link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 30px;
  transform: translateY(-50%);
}
/* Die Spaltentitel im Footer sind 14 Bold mit 2% Laufweite, NICHT die 9%
   der Subheadline. `tracking/widest` war hier schlicht der falsche Token;
   2% hat keinen eigenen - deshalb der Literalwert mit Begruendung. */
.footer-main_column-heading {
  letter-spacing: 0.02em;
}
/* Copyright ist ebenfalls `Text Small`: 140% Zeilenhoehe statt `normal`. */
.footer-main_copyright {
  line-height: var(--_sizes---font--line-height--normal);
  letter-spacing: var(--_sizes---font--tracking--wide);
}
/* H2-Ueberschriften: 110% und -1%. Beide standen auf 0.9 bzw. ohne
   Laufweite - 0.9 ist enger als jeder Stil im Design. */
.closing-cta_headline,
.videoref_headline {
  line-height: var(--_sizes---font--line-height--tight);
  letter-spacing: var(--_sizes---font--tracking--tight);
}
/* `.line-height--tight` ist 1.1 = die 110% aus H2. Das gebaute 0.9 kam
   nicht aus einer Variablen und hat im Design keine Entsprechung. */
/* Fliesstext im Abschluss-CTA ist `Text Small` - Laufweite fehlte. */
.closing-cta_body {
  letter-spacing: var(--_sizes---font--tracking--wide);
}
/* Eyebrow im CTA ist `Subheadline`: 120%, nicht 140%. */
.closing-cta_eyebrow {
  line-height: var(--_sizes---font--line-height--compact);
}
/* Chronik-Text ist `H3`: 32px / 115% / 0. Gebaut stand er auf 1.4.
   (Der Stellentitel stand bis 23. Sep ebenfalls hier. Seit dem neuen
   Kartenaufbau ist er H2 - siehe Abschnitt "Jobkarten".) */
.timeline_story-text {
  line-height: var(--_sizes---font--line-height--snug);
  letter-spacing: var(--_sizes---font--tracking--normal);
}
/* Die Rolle in der Kontaktkarte ist `H6` (16 Bold, KEINE Laufweite).
   Sie trug 9% aus der Zeit, als sie wie ein Eyebrow gestaltet war -
   `text-transform` wurde am 23. Aug bereits zurueckgesetzt, die Laufweite
   blieb stehen. */
.contact-card_role {
  letter-spacing: var(--_sizes---font--tracking--normal);
}
/* `.team-cta_text` (18px Bold) hat keinen eigenen Textknoten im Artboard -
   die Zeile steht nur im gebauten Team-Raster. Von den 14 Figma-Stilen passt
   allein `H5` auf 18 Bold: 120% Zeilenhoehe, keine Laufweite. Entsprechend
   angeglichen; falls der Designer hier etwas anderes vorsieht, ist das die
   eine Stelle, die auf einer Ableitung beruht statt auf einem Stilnamen. */
.team-cta_text {
  line-height: var(--_sizes---font--line-height--compact);
  letter-spacing: var(--_sizes---font--tracking--normal);
}
/* =============================================== Seitentitel (H1) — 23. Aug
   `heading-xl` ist an `font-size/h2` gebunden und rendert deshalb 40px.
   Das ist fuer die SEKTIONSueberschriften richtig - die Klasse traegt
   site-weit zehn `<h2>` ("Unsere neuesten Fahrzeuge", "Die Menschen
   dahinter", ...), und die sind im Design tatsaechlich H2/40.
   Dieselbe Klasse traegt aber auch vier `<h1>` SEITENTITEL:
   /kontakt, /services, /impressum, /datenschutz. Die sind im Design H1.
   Deshalb NICHT die Klasse umbinden - das wuerde jede Sektions-
   ueberschrift der Seite auf 64px aufblasen. Stattdessen ueber das Tag:
   ein `<h1>` ist immer ein Seitentitel, egal welche Klasse es traegt.
   Der Stil ist auf ALLEN Seiten identisch (in Figma geprueft, alle
   H1-Knoten aller Frames):
     Desktop  64px     Tablet  48px     Mobil  38px
     Zeilenhoehe 116%, Laufweite -1% - auf allen Breiten gleich
   Die Startseite (`hero-video_headline`) und /unternehmen + /karriere
   (`heading-xxl`) haben eigene Klassen und stimmten bereits; sie bleiben
   unveraendert, weil die Regel hier nur die Groesse des Tags setzt und
   jene Klassen spezifischer sind. Geprueft: 64px vorher wie nachher.
   23. Sep: Die Headline ueber dem Video auf /services ist die eine
   Ausnahme - ein `<h2>` mit H1-Optik (Design 4884:4267). Sie haengt
   deshalb per Klasse an denselben Regeln, statt die Werte zu kopieren. */
h1.heading-xl,
.heading-xl.is-services-hero-headline {
  font-size: var(--_sizes---font-size--h1);
  line-height: 1.16;
  letter-spacing: var(--_sizes---font--tracking--tight);
}
@media (max-width: 991px) {
  h1.heading-xl,
  .heading-xl.is-services-hero-headline { font-size: 48px; }
}
@media (max-width: 767px) {
  h1.heading-xl,
  .heading-xl.is-services-hero-headline { font-size: 38px; }
}
/* Chronik-Jahreszahlen sind `Text Large` (20 / 120% / 0). Die Zeilenhoehe
   stand auf `normal` - der Browser landet zufaellig nahe 1.2, gebunden war
   sie aber nicht. Jetzt explizit am Token. */
.timeline_year-label {
  line-height: var(--_sizes---font--line-height--compact);
  letter-spacing: var(--_sizes---font--tracking--normal);
}
/* Die Anschrift auf /kontakt ist `Text Small` (16 / 140% / 1%). Die
   Laufweite fehlte - `is-address` setzt Groesse und Gewicht selbst und
   erbt sie deshalb nicht von `body-sm`. */
.u-two-col.is-location .is-address {
  line-height: var(--_sizes---font--line-height--normal);
  letter-spacing: var(--_sizes---font--tracking--wide);
}
/* Die beiden Spans in den Oeffnungszeiten tragen keine eigene Klasse; die
   Werte kommen von `.hours-row`. Dort fehlte die Laufweite von `Text Small`
   (1%) - Groesse und Zeilenhoehe stimmten bereits. */
.u-two-col.is-location .hours-row {
  letter-spacing: var(--_sizes---font--tracking--wide);
}
/* ---------------------------------- Werkstatt-Kacheln: Querformat (23. Aug)
   Gebaut waren sie quadratisch mit Radius 14. Das Design
   (`section/photo-grid [content]`, 3018:6194) zeigt aber **Querformat**:
   384 x 210 bei 1200 Rasterbreite, Radius 22, Abstand 24.
   384/210 = 64/35. Als `aspect-ratio` notiert, damit die Kachel bei jeder
   Spaltenbreite dasselbe Verhaeltnis behaelt statt einer festen Hoehe.
   Der Abstand steht im Design auf 24 (= `layout/grid-gap`), gebaut waren 14
   aus dem Fahrzeugraster - das ist eine andere Sektion. */
.u-grid-3.is-photo-grid {
  gap: var(--_sizes---layout--grid-gap);
}
.photo-grid_tile {
  aspect-ratio: 64 / 35;
  border-radius: var(--_sizes---radius--md);
}
/* ===================================== Mobil: Hero kuerzer, Logos groesser
   23. Aug, beides gemessen auf iPhone-Viewports.
   ------------------------------------------------------------- Hero
   Das Video trug ein INLINE `height:683px` aus dem Embed. Inline schlaegt
   jede Stylesheet-Regel - deshalb blieb Webflows eigenes
   `@media (max-width: 767px) { .hero-video_media { height: 460px } }`
   wirkungslos, und die Sektion stand auf allen Geraeten 739px hoch.
   Gemessen: iPhone SE (667 hoch) lief 132px ueber den unteren Rand hinaus.
   Die 460px sind KEIN gewaehlter Wert - der Mobile-Frame im Design
   (`/ — Mobile`, 3822:3064) gibt genau 460 vor, Tablet 560, Desktop 683.
   Webflows Breakpoint-Regeln stimmen also bereits; sie kommen nur gegen
   den Inline-Wert nicht an. `!important` ist hier deshalb kein Notnagel,
   sondern die einzige Ebene ueber einem Inline-Style. */
@media (max-width: 991px) {
  .hero-video_embed video,
  .hero-video_embed .hero-video_media {
    height: 560px !important;
  }
  .hero-video_scrim { height: 560px; }
}
@media (max-width: 767px) {
  .hero-video_embed video,
  .hero-video_embed .hero-video_media {
    height: 460px !important;
  }
  .hero-video_scrim { height: 460px; }
}
/* ------------------------------------------------------------- Logos
   Die Logohoehe kommt aus dem CMS und wird von `footer.js` als INLINE
   `--logo-h` an jedes Bild geschrieben. Gegen einen Inline-Style kommt
   keine Stylesheet-Regel an - die Verdopplung auf Mobil steht deshalb
   dort im Skript, nicht hier. Ein `@media`-Block mit `--logo-h: 100px`
   war der erste Anlauf und blieb wirkungslos (gemessen per CDP:
   `inlineStyle: --logo-h: 50px`).
   Hier bleibt nur, was die groesseren Logos in der Kachel zentriert. */
@media (max-width: 599px) {
  .logo-strip .w-dyn-item {
    align-items: center;
  }
}
/* ============================ Telefon-Icon im Nav-Button (25. Aug)
   Im Design (`TelPill`, Nav-Light) steht links vom der Nummer das Icon
   `phone_in_talk` in 16x16, Abstand 4 (`space/xxs`), weiss auf
   `action/accent`. Gebaut war der Desktop-Button reine Schrift - das Icon
   gab es nur in der Mobilnavigation.
   Das SVG ist bereits als `icon-phone.svg` hochgeladen; der Pfad im Asset
   ist mit dem Figma-Export identisch (nur andere Rundung der Koordinaten).
   Der Figma-Export selbst waere unbrauchbar: er bringt den halben
   Nav-Kontext mitsamt grauem Hintergrundrechteck mit.
   Warum `::before` und kein Bildelement: Der Linktext haengt am Prop
   `telLabel` (`text`-Setting, prop-gebunden). Ein Kindelement im <a>
   konkurriert mit dieser Textbindung. Das Pseudo-Element laesst die
   Bindung unberuehrt und wird als Flex-Kind sauber ausgelegt - der
   Button ist bereits `display: flex` mit `column-gap: space/xxs`, also
   genau dem Abstand aus dem Design.
   Nur ab 886px: darunter ist der Button laut Block weiter oben ohnehin
   ein reines Icon (Hintergrundbild), dort waere das Pseudo-Element ein
   zweites Icon daneben. */
@media (min-width: 886px) {
  .nav-primary_tel::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    /* Als MASKE, nicht als Hintergrundbild - 25. Aug.
       Die SVG-Datei ist dieselbe wie beim Beratungs-Button auf
       /fahrzeuge, aber dort liegt sie als <img> im Markup und laesst
       sich per `filter` einfaerben. Hier ist sie ein Pseudo-Element,
       auf das `filter` nicht sinnvoll wirkt.
       Die Maske nimmt die Form aus dem SVG und faerbt sie ueber
       `background-color: currentColor` - das Icon folgt damit
       automatisch der Textfarbe, im Ruhezustand weiss, auf Hover
       orange. Kein zweites Asset, kein Filter, keine Farbmatrix. */
    background-color: currentColor;
    -webkit-mask: url("https://cdn.prod.website-files.com/6a8566a5ee577323e74ca7cf/6a8935ac6f5427df931bf3e8_icon-phone.svg") no-repeat 50% 50% / 16px 16px;
    mask: url("https://cdn.prod.website-files.com/6a8566a5ee577323e74ca7cf/6a8935ac6f5427df931bf3e8_icon-phone.svg") no-repeat 50% 50% / 16px 16px;
  }
}
/* --------------------------------- Hover: Telefonbutton in der Navigation
   Dieselbe Umkehrung wie bei den Beratungs-Buttons auf /fahrzeuge (siehe
   dort): weisse Flaeche, oranger Text, oranger Rand. Der Button ist im
   Ruhezustand orange gefuellt.
   Das Icon braucht keine eigene Regel - es haengt als Maske an
   `currentColor` und wird mit dem Text orange.
   `border` im Ruhezustand transparent in derselben Staerke, damit die
   Hoehe beim Hover nicht springt (`border-box` ist Webflow-Default).
   Unter 886px ist der Button ein reines Icon. Auch dort liegt es jetzt
   als Maske statt als Hintergrundbild (siehe Regel oben) - sonst waere es
   auf der weissen Hover-Flaeche ein weisses Icon auf Weiss, also
   unsichtbar. */
/* Gleiche Hoehe wie der Telefonbutton unten auf /fahrzeuge - 25. Aug.
   Gemessen war der Nav-Button 48px hoch, der auf /fahrzeuge 45px. Zwei
   Ursachen, beide hier behoben:
     line-height  nav 19.6px (aus font-size 14 x 1.4), /fahrzeuge `normal`
                  (~16.8px) -> knapp 3px Unterschied
     border       der transparente 2px-Rand fuer den Hover kam oben drauf
   `line-height: normal` gleicht den Text an, `min-height` traegt die
   44px des Tap-Targets. Beide Buttons liegen damit auf 45px.
   Das Padding bleibt bei 16px horizontal (Design der Navigation), waehrend
   /fahrzeuge 24px hat - das betrifft nur die Breite, nicht die Hoehe. */
.nav-primary_tel {
  border: 2px solid #0000;
  line-height: normal;
  /* Horizontales Padding 24px wie beim Telefonbutton unten auf
     /fahrzeuge - auf Wunsch vom 25. Aug. Vorher 16px, dadurch war der
     Nav-Button 172 statt 188px breit. Beide Knoepfe sind damit gleich. */
  padding-inline: var(--_sizes---text--gap-lg);
}
@media (hover: hover) and (pointer: fine) {
  .nav-primary_tel:hover {
    background-color: var(--_colour---white);
    border-color: var(--_colour---action--accent);
    color: var(--_colour---action--accent);
  }
  /* Der Telefonbutton der MOBILEN Navigation bekommt denselben Hover.
     Sein Icon ist ein <img> (nicht Pseudo-Element), deshalb hier der
     Filter wie bei den Beratungs-Buttons - identischer Wert. */
  .nav-mobile_phone:hover {
    background-color: var(--_colour---white);
    border-color: var(--_colour---action--accent);
  }
  .nav-mobile_phone:hover .nav-mobile_phone-icon {
    filter: invert(45%) sepia(85%) saturate(2400%) hue-rotate(6deg) brightness(97%) contrast(101%);
  }
  /* 25. Aug: Der schwebende Bewerben-Button bekommt denselben Hover wie der
     Telefonbutton - weisser Grund, oranger Rand und Text. Bewusst in
     derselben Media-Query: auf Touch-Geraeten bliebe ein :hover nach dem
     Tippen kleben, und der Button steht dort dauerhaft im Blickfeld. */
  .sticky-apply:hover,
  .sticky-apply:focus-visible {
    background-color: var(--_colour---white);
    border-color: var(--_colour---action--accent);
    color: var(--_colour---action--accent);
  }
}
.nav-mobile_phone {
  border: 2px solid #0000;
}
/* Die frueher hier stehende zweite `[data-hero-reveal]`-Regel ist weg.
   Sie ueberschrieb die Dauer der Basisregel (900ms statt Token) und war
   die einzige Stelle, an der die Animation wirklich definiert war - ein
   Wert an zwei Orten, von denen nur der spaetere zaehlte. Jetzt steht
   alles beisammen bei `[data-hero-reveal]` weiter oben.
   `ease/out` (0.16, 1, 0.3, 1) bleibt: die Kurve bremst am Ende stark ab,
   was die lange Dauer ruhig statt zaeh wirken laesst. */
/* ==========================================================================
   /kuehlfahrzeuge — Fahrzeug-Detailseite (Figma 3018:6769)
   Alle Werte aus dem Desktop-Artboard gelesen.
     Hero                 padding 64/120/96, gap 21
     back-Link            gap 8, Icon 24, Text Main Bold, brand-500
     H1                   64px zentriert (heading-xxl)
     Carousel             gap 16; Slide 1200x583 radius 22
     CarouselBar          Caption links (Text Small), Zaehler rechts
     carousel-controls    zwei 64er Pfeile, gap 16, zentriert
     Einsatzbereiche      padding 96/120, Kopf 766 breit, unten 40
     UseCaseGrid          4 Spalten, gap 24; Karte radius 14, padding 15/18
     logo-row             brand-600, padding 96/120, gap 40
   ========================================================================== */
.u-section.is-fz-hero {
  background-color: var(--_colour---white);
  padding-top: var(--_sizes---section-space--page-top);
  padding-bottom: var(--_sizes---section-space--medium);
  row-gap: 21px;
}
/* ------------------------------------------------------------ back-Link
   Design: Pfeil 24px links, Abstand 8, Text `Text Main` Bold in brand-500.
   Der Pfeil ist dasselbe SVG wie in der Chronik, nur gespiegelt - deshalb
   `scaleX(-1)` statt eines zweiten Assets. */
.fz-back {
  display: inline-flex;
  align-items: center;
  column-gap: var(--_sizes---space--1);
  align-self: flex-start;
  width: 100%;
  max-width: var(--container-cap, none);
  margin-inline: auto;
  padding-inline: var(--_sizes---space--1);
  text-decoration: none;
}
.fz-back::before {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  background-image: url("https://cdn.prod.website-files.com/6a8566a5ee577323e74ca7cf/6a894f508775ce81a7ab2111_icon-arrow.svg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 16px 16px;
  transform: scaleX(-1);
}
.fz-back_label {
  color: var(--_colour---action--default);
  font-family: var(--_sizes---font--family--sans);
  font-size: var(--_sizes---font-size--text-main);
  font-weight: var(--_sizes---font--weight--bold);
  line-height: var(--_sizes---font--line-height--normal);
}
.heading-xxl.is-fz-title {
  width: 100%;
  max-width: var(--container-cap, none);
  margin-inline: auto;
  text-align: center;
}
/* ------------------------------------------------------------- Galerie
   Der Track ist der Swiper-Container; `footer.js` haengt dort die
   Steuerung an. Slide 1200x700 laut Design (Frame `Slide` im Symbol
   `Hero-Fahrzeuge`, 23. Sep nachgemessen). Als `aspect-ratio`, damit das
   Verhaeltnis bei jeder Breite haelt.
   Bis 23. Sep stand hier 1200/583 - das war das Mass des KARRIERE-Heros,
   nicht dieser Galerie. */
.fz-gallery {
  display: flex;
  flex-direction: column;
  row-gap: var(--_sizes---space--3);
  width: 100%;
  max-width: var(--container-cap, none);
  margin-inline: auto;
}
/* 23. Sep: Vor- und Nachbarbild sind angeschnitten sichtbar.
   Vorher schnitt der Track am 1200er Raster ab, das Bild verschwand also
   an einer harten Kante hinter dem weissen Seitenhintergrund.
   Der Track wird auf Fensterbreite gezogen und wieder zentriert - statt
   ueberstehen zu LASSEN, wird er tatsaechlich breiter. Darin haelt Swiper
   die Slides auf 1200px (`--fz-slide`), sodass links und rechts genau der
   Platz fuer die Nachbarn frei wird.
   Erster Versuch war `overflow-clip-margin: 50vw` am 1200er Track. Das
   zeigte die Nachbarn zwar, erzeugte aber HORIZONTALES SCROLLEN auf allen
   Breiten (gemessen: 2040px Inhalt bei 1440px Fenster). Ein Clip-Margin
   verhindert das Zeichnen ausserhalb nicht - er erlaubt es gerade. Die
   Seite liess sich seitwaerts wegschieben.
   `100vw` statt `100%`, weil der Track sonst die 1200px des Elternteils
   erbt. Die negative Margin holt ihn aus der Zentrierung heraus, und
   `overflow: hidden` schneidet am Fensterrand ab - dort, wo vorher schon
   geschnitten wurde, nur eben weiter aussen. */
.fz-gallery_track {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
}
/* Die Slide behaelt das Rastermass, der Track ist nur der Rahmen, in dem
   sie sich bewegt.
   Diese Breite wirkt NUR zusammen mit `slidesPerView: 'auto'` im
   Footer-JS. Sonst schreibt Swiper die Breite als Inline-Stil an jede
   Slide (gemessen: `width: 1440px`), und dagegen kommt kein Stylesheet an.
   Die Nachbarn treten zurueck: abgedunkelt, damit das aktive Bild fuehrt. */
.fz-gallery_track .swiper-slide {
  width: min(1200px, 100vw - 2 * var(--_sizes---space--4));
  opacity: 0.38;
  transition: opacity calc(var(--_sizes---motion--duration--base) * 1ms) ease;
}
.fz-gallery_track .swiper-slide-active {
  opacity: 1;
}
.fz-gallery_slide {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 700;
  object-fit: cover;
  border-radius: var(--_sizes---radius--md);
}
/* 23. Sep: Der Zaehler steht ZENTRIERT unter dem Bild, die
   Bildbeschreibung entfaellt. Im Design (`CarouselBar`) sitzt "01 / 05"
   bei x=574,5 in einer 1200er Leiste - also mittig, und sonst steht dort
   nichts.
   Vorher trug die Leiste `justify-content: space-between` mit der
   Beschreibung links und dem Zaehler rechts. Jetzt `center`; das
   `caption`-Element ist aus dem Markup und aus `footer.js` entfernt,
   nicht nur ausgeblendet - ein unsichtbares Element, das ein Skript noch
   befuellt, ist eine Stelle, an der spaeter jemand sucht. */
.fz-gallery_bar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.fz-gallery_counter {
  flex: none;
  color: var(--_colour---text--default);
  font-family: var(--_sizes---font--family--sans);
  font-size: var(--_sizes---font-size--text-small);
  font-weight: var(--_sizes---font--weight--regular);
  line-height: var(--_sizes---font--line-height--normal);
  letter-spacing: var(--_sizes---font--tracking--wide);
  font-variant-numeric: tabular-nums;
}
/* Die Steuerung baut `footer.js`; hier nur Lage und Abstand.
   Im Design steht sie 16 unter der Leiste, zentriert. */
.fz-gallery .carousel_controls {
  display: flex;
  justify-content: center;
  column-gap: var(--_sizes---space--3);
  margin-top: var(--_sizes---space--3);
}
/* ------------------------------------------------------ Einsatzbereiche */
.u-section.is-fz-usecases {
  background-color: var(--_colour---neutral-100);
}
/* Der Abstand zum Raster ist im Design GENAU `text/gap-xl` (40px) - als
   `paddingBottom` am Kopf, Sektions-Gap 0.
   Gebaut kam er dreifach zusammen: `.u-section` bringt selbst `row-gap: 40`
   mit, dazu kamen meine 40px Padding und die 10px Default-Margin des
   `<p>`. Gemessen: 90px statt 40.
   Jetzt traegt nur der Sektions-Gap den Abstand; Padding raus, die
   Absatz-Margin explizit auf 0. */
.u-section.is-fz-usecases > .u-section-header {
  max-width: 766px;
  margin-inline: auto;
  padding-bottom: var(--_sizes---space--0);
  row-gap: var(--_sizes---space--3);
}
/* Webflow setzt an `p` eine Default-Margin von 10px. Innerhalb eines
   Flex-Containers, dessen Abstaende ueber `row-gap` laufen, addiert sie
   sich stumm dazu. */
.u-section.is-fz-usecases > .u-section-header > .body-sm {
  margin-block: var(--_sizes---space--0);
}
.fz-usecase-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--_sizes---layout--grid-gap);
  width: 100%;
  max-width: var(--container-cap, none);
  margin-inline: auto;
}
/* Karte im Design: 282x283. Oben sitzt ein Bild ueber die volle Breite
   (282x212), buendig in den oberen Ecken, darunter mit 8px Abstand der
   Block aus Icon und Label - 18px seitlich, 16px unten.
   Das Padding liegt deshalb NICHT mehr auf der Karte, sondern auf dem
   Textblock: ein Innenabstand an der Karte wuerde das Bild von den
   Raendern loesen, und genau buendig ist es im Design. */
.fz-usecase-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  row-gap: var(--_sizes---space--1);
  padding: 0;
  border-radius: var(--_sizes---radius--sm);
  background-color: var(--_colour---white);
  overflow: hidden;
}
/* 282x212 = 1.3302. `aspect-ratio` statt fester Hoehe, damit das
   Verhaeltnis auch in der 3er- und 2er-Spalte traegt. */
.fz-usecase-card_media {
  display: block;
  width: 100%;
  aspect-ratio: 282 / 212;
  object-fit: cover;
  background-color: var(--_colour---neutral-100);
}
.fz-usecase-card_body {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--_sizes---space--xxs);
  padding: 0 18px 16px;
}
/* Die acht Icons stecken als Data-URI in den Regeln weiter unten - sie
   sind 24x24 Material-Symbols und kommen direkt aus dem Artboard. Als
   Hintergrundbild statt acht Assets: das spart acht Uploads und haelt
   sie im versionierten Stylesheet. */
/* 14. Sep: von `background-image` auf Maske umgestellt. Die Icons kommen
   jetzt aus dem Figma-Export und tragen dort die Farbe eingebrannt; als
   Maske auf `currentColor` folgen sie der Textfarbe der Karte. Die
   einzelnen Motive stehen weiter unten unter `Einsatzbereich-Icons`. */
.fz-usecase-card_icon {
  flex: none;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  color: var(--_colour---neutral-700);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
  mask-position: 50% 50%;
  -webkit-mask-size: 24px 24px;
  mask-size: 24px 24px;
}
.fz-usecase-card_label {
  color: var(--_colour---neutral-700);
  font-family: var(--_sizes---font--family--sans);
  font-size: var(--_sizes---font-size--h6);
  font-weight: var(--_sizes---font--weight--bold);
  line-height: normal;
  text-align: center;
}
/* ------------------------------- Einsatzbereich-Karten: Bild-Hinweis
   Dieselbe Geste wie an den Galerie-Kacheln (Verlauf, Plus-Kreis, Text,
   Klick oeffnet dasselbe Modal) - siehe den Block `Galerie-Kacheln` weiter
   unten. Wunsch vom 4. Sep: gleiches Verhalten auf allen neun
   /fahrzeuge-Detailseiten.
   UNTERSCHIED ZUR GALERIE, und der bestimmt den Aufbau: eine Galerie-Kachel
   IST das Bild, eine Einsatzbereich-Karte ist Bild PLUS Textblock darunter.
   Der Hinweis soll aber nur ueber dem Bild liegen, ausgeloest von der
   ganzen Karte. Traeger ist deshalb ein Wrapper um das <img>
   (`.fz-usecase-card_mediawrap`, per JS eingezogen) - ein <img> kann selbst
   keine Pseudo-Elemente tragen, und die Karte als Traeger wuerde den
   Verlauf ueber den Text unten laufen lassen.
   Ausgeloest wird ueber `.fz-usecase-card:hover`, nicht ueber den Wrapper:
   so zaehlt auch das Ueberfahren von Icon und Label, wie gewuenscht. */
.fz-usecase-card_mediawrap {
  position: relative;
  display: block;
  overflow: hidden;
  cursor: pointer;
}
/* Verlauf. Wie an der Galerie: `translateY(100%)` schiebt ihn unter die
   Unterkante, der Wrapper klippt ihn weg. Anteil 28.5% wie dort - es ist
   derselbe Anteil, keine feste Hoehe, deshalb traegt er auf dem
   niedrigeren Bild unveraendert. */
.fz-usecase-card_mediawrap::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 28.5%;
  background-image: linear-gradient(
    to bottom,
    rgba(16, 30, 38, 0) 0%,
    var(--_colour---brand-900, #101e26) 78%
  );
  pointer-events: none;
  z-index: 1;
}
/* Kreis mit Plus. Technik wie an der Galerie: zwei lineare Verlaeufe als
   Hintergrund bilden das Plus (18x2 und 2x18, mittig), damit kein zweites
   Asset noetig ist.
   MASSE NEU GERECHNET, NICHT KOPIERT. Die Galerie sitzt auf einer 358 hohen
   Kachel und setzt Kreis 51 / Text 24 ueber die Kante. Dieses Bild ist
   282x212 (`aspect-ratio` an `_media`), also nicht einmal zwei Drittel so
   hoch - mit 51px sitzt der Kreis fast auf halber Bildhoehe.
   Umgerechnet auf 212 Hoehe: der Kreismittelpunkt der Galerie liegt bei
   71/358 = 19.8% -> auf 212 sind das 42px, Kreisunterkante also 22px.
   Der Text steht dann auf `space--3` (16px). Beide Werte gerundet auf das
   Raster, damit sie sich mit den Variablen decken. */
.fz-usecase-card_mediawrap::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 44px;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  box-sizing: border-box;
  border: var(--_sizes---border-width--main, 2px) solid var(--_colour---white, #fff);
  border-radius: var(--_sizes---radius--pill, 999px);
  background-color: rgba(255, 255, 255, 0.2);
  background-image:
    linear-gradient(var(--_colour---white, #fff), var(--_colour---white, #fff)),
    linear-gradient(var(--_colour---white, #fff), var(--_colour---white, #fff));
  background-size: 18px 2px, 2px 18px;
  background-position: 50% 50%, 50% 50%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}
/* Der Text. Eigenes Element, weil beide Pseudo-Elemente des Wrappers
   vergeben sind - genau wie bei der Galerie. Wird per JS eingesetzt. */
.fz-usecase-hint_label {
  position: absolute;
  left: 0;
  right: 0;
  /* Literal aus demselben Grund wie am Kreis unten: `space--3` ist
     breakpointabhaengig (16/14/12), der Abstand ist hier aber feste
     Geometrie in einem Bild fester Hoehe. */
  bottom: 16px;
  text-align: center;
  color: var(--_colour---white, #fff);
  font-family: var(--_sizes---font--family--sans, inherit);
  font-size: var(--_sizes---font-size--text-xxs, 14px);
  font-weight: var(--_sizes---font--weight--bold, 700);
  line-height: normal;
  pointer-events: none;
  z-index: 2;
}
/* ---------------------------------------------------- Desktop: Einfahren
   Wie an der Galerie: auf Maus-in von unten einfahren, auf Maus-out hinaus.
   `translateY(100%)` verschiebt um die EIGENE Hoehe - wer zusaetzlich einen
   `bottom`-Abstand hat, muss um diesen mitwandern, sonst bleibt ein Rest
   sichtbar. Das war an der Galerie am 3. Sep der gemeldete Fehler, deshalb
   hier von vornherein `calc(100% + <bottom>)` je Teil. */
@media (hover: hover) and (pointer: fine) {
  .fz-usecase-card_mediawrap::before,
  .fz-usecase-card_mediawrap::after,
  .fz-usecase-hint_label {
    transition: transform calc(var(--_sizes---motion--duration--fast, 180) * 1ms)
                cubic-bezier(0.16, 1, 0.3, 1);
  }
  /* Verlauf sitzt bei bottom: 0 - die eigene Hoehe genuegt. */
  .fz-usecase-card_mediawrap::before {
    transform: translateY(100%);
  }
  /* Kreis: 40 hoch, 44 ueber der Kante. */
  .fz-usecase-card_mediawrap::after {
    transform: translateY(calc(100% + 44px));
  }
  /* Text: 17 hoch, 16 ueber der Kante. */
  .fz-usecase-hint_label {
    transform: translateY(calc(100% + 16px));
  }
  /* Ausloeser ist die KARTE, nicht der Wrapper - Icon und Label unten
     gehoeren zur Flaeche, ueber die gefahren wird. */
  .fz-usecase-card:hover .fz-usecase-card_mediawrap::before,
  .fz-usecase-card:hover .fz-usecase-card_mediawrap::after,
  .fz-usecase-card:hover .fz-usecase-hint_label {
    transform: translateY(0);
  }
}
/* ------------------------------------------ Tablet und Telefon: statisch
   Wie an der Galerie: Plus und Verlauf immer sichtbar, KEIN Text.
   Abgegrenzt ueber das Eingabegeraet, nicht ueber eine Breite. */
@media (hover: none), (pointer: coarse) {
  .fz-usecase-hint_label {
    display: none;
  }
  /* Ohne Text rueckt der Kreis auf dessen Platz nach unten. An der Galerie
     ist das 32 von 51, hier anteilig 24 von 44.
     LITERAL, nicht `space--4` - gemessen am 4. Sep im emulierten Telefon:
     die Variable ist breakpointabhaengig (24 Desktop, 20 unter 992, 16
     unter 768). Der Kreis sass damit auf dem Telefon 8px zu tief, waehrend
     seine Hoehe fest bei 40 bleibt. Dieser Abstand ist eine feste Geometrie
     zu einem festen Kreis, kein mitskalierender Rhythmus - deshalb hier
     eine Zahl. Die Galerie loest dasselbe genauso (dort `32px`). */
  .fz-usecase-card_mediawrap::after {
    bottom: 24px;
  }
}
/* Reduced motion: der Hinweis erscheint, aber ohne Bewegung. */
@media (prefers-reduced-motion: reduce) {
  .fz-usecase-card_mediawrap::before,
  .fz-usecase-card_mediawrap::after,
  .fz-usecase-hint_label {
    transition: none;
  }
}
/* Die Karte ist ein echter Knopf (siehe footer.js) - Fokusring in
   derselben Sprache wie an der Galerie-Kachel. */
.fz-usecase-card:focus-visible {
  outline: 2px solid var(--_colour---brand-500);
  outline-offset: 3px;
}
/* ------------------------------------------------------------ Logo-Zeile
   Wie auf der Startseite, aber auf `brand-600` statt hell und mit eigener
   Collection. Kopf und Streifen 40 auseinander (`text/gap-xl`). */
.u-section.is-fz-logos {
  background-color: var(--_colour---brand-600);
  row-gap: var(--_sizes---text--gap-xl);
}
.u-section.is-fz-logos > .u-section-header {
  row-gap: var(--_sizes---space--3);
}
.fz-logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--_sizes---space--7);
  width: 100%;
  max-width: var(--container-cap, none);
  margin-inline: auto;
}
.fz-logo-strip .w-dyn-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--_sizes---space--7);
}
.fz-logo-strip_item {
  display: block;
  width: auto;
  max-width: 100%;
  height: var(--logo-h, 50px);
  object-fit: contain;
}
/* ---------------------------------------------------------- Tablet/Mobil */
@media (max-width: 991px) {
  .fz-usecase-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .fz-usecase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 23. Sep: Das Umbrechen der Leiste ist entfallen. Es war dafuer da,
     Beschreibung und Zaehler mobil untereinander zu setzen - seit die
     Beschreibung weg ist, steht dort nur noch der zentrierte Zaehler,
     und der braucht keine eigene Regel. */
  .fz-logo-strip,
  .fz-logo-strip .w-dyn-items { gap: var(--_sizes---space--4); }
}
/* ============================ Einsatzbereich-Icons — 14. Sep
   Die 24x24-Icons der Einsatzbereich-Karten auf den neun
   /fahrzeuge-Detailseiten, direkt aus dem Figma-Design exportiert
   (Komponente `Card_Einsatzbereiche`, Instanz `300pt_Icons`).
   Vorher standen hier 19 Regeln mit generischen Schluesseln (`pharma`,
   `koffer`, `plane`), die mehrfach fuer verschiedene Karten herhalten
   mussten - auf /sonderaufbauten trugen alle fuenf Karten dasselbe
   `plane`-Icon. Jetzt traegt jede Karte das Icon aus dem Entwurf.
   ALS MASKE, NICHT ALS HINTERGRUNDBILD. Die Figma-Exporte kommen in
   `#3B3B3A` (= neutral-700); als Maske auf `currentColor` folgt das Icon
   der Textfarbe und laesst sich spaeter im Hover umfaerben, ohne dass
   ein zweites Asset noetig waere. Dieselbe Technik wie bei den
   Service-Icons und den Kontaktkarten.
   SCHLUESSEL SIND SEMANTISCH, nicht nach Kartentitel benannt: mehrere
   Karten teilen sich dasselbe Motiv (dreimal `construction`, viermal
   `snowflake`, dreimal `sync-alt`). Ein Schluessel je Titel haette
   dieselbe Grafik mehrfach in die Datei geschrieben. Die Namen folgen
   den Material-Symbol-Bezeichnungen aus der Figma-Ebene; wo es keine
   gab, ist nach dem Motiv benannt (`tipper`, `crane`, `curtainsider`,
   `wingliner`, `wood`, `dump-truck`).
   KORREKTUR 14. Sep, vom Auftraggeber gemeldet: `Pharma & Medizin` trug
   kurzzeitig das Croissant der Baeckerei-Karte. Die Ursache ist eine
   Falle im Figma-Export - beide Karten sind Instanzen DERSELBEN
   Komponente mit einer Variante (`property1: Health | Bakery`). Der
   Export liefert dann nicht zwei `src`-Attribute, sondern einmal
   `<Component300PtIcons property1="Bakery" />` und daneben zwei
   Konstanten `imgProperty1Health` und `imgProperty1Bakery`. Beim
   Einsammeln wurde die falsche Konstante genommen.
   Merke fuer den naechsten Export: taucht `property1` auf, entscheidet
   die VARIANTE, nicht die Reihenfolge der Konstanten. Gegenprobe ist
   immer der gerenderte Screenshot der Section, nicht der Code.
   11 der 37 Exporte kamen mit einer abweichenden viewBox (z. B.
   `0 0 20.1315 20.1315`), weil Figma den Vektor-Unterknoten ohne seinen
   24er-Rahmen ausgibt. Sie sind proportional auf 24x24 skaliert und
   zentriert - ungeprueft uebernommen haetten sie unterschiedlich grosse
   Icons ergeben.
   /fahrzeuge/wechselrahmen hat KEINE Icons: dort zeigt der Entwurf auf
   allen vier Karten das Steinhauser-Logo (72x24), kein 24er-Icon. Das
   ist bewusst nicht mit aufgenommen - siehe qa-Notiz. */
/* /fahrzeuge/wechselrahmen: dort zeigt der Entwurf auf allen vier Karten
   den Steinhauser-Schriftzug statt eines Motiv-Icons. 72x24 statt 24x24,
   deshalb eine eigene Breite und Maskengroesse. */
.fz-usecase-card_icon[data-icon="steinhauser"] {
  width: 72px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='72' height='24' viewBox='0 0 72 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg clip-path='url(%23clip0_0_66)'%3E %3Cpath d='M4.97757 9.36058H6.75104L7.29532 6.90679H5.00025C4.02961 6.8976 3.33564 7.00328 2.6825 7.48577C1.52589 8.34965 1.32178 9.68224 1.43518 10.7161C1.61207 12.2739 3.25853 13.0321 3.21318 13.7351C3.18143 14.2498 2.85939 14.4014 2.46025 14.4014H0.537103L-0.0117188 16.846H1.63021C1.71639 16.846 1.8071 16.8506 1.90235 16.8552C4.32896 16.9012 5.29961 16.4003 5.87564 14.5577C6.47436 12.6461 5.00479 11.2308 4.49679 10.6334C3.98425 10.0315 4.27907 9.37437 4.97757 9.36058Z' fill='currentColor'/%3E %3Cpath d='M9.0054 9.43816H7.4043L7.93498 6.90625H13.9856L13.4867 9.41059H11.8448L10.2663 16.8501H7.46326L9.0054 9.43816Z' fill='currentColor'/%3E %3Cpath d='M12.5078 16.8501L14.6033 6.90625H19.5835L19.0982 9.29112H16.8802L16.6036 10.6145H18.5403L18.055 12.9488H16.1182L15.837 14.3044H19.012L20.5723 6.90625H23.4071L21.2754 16.8501H12.5078Z' fill='currentColor'/%3E %3Cpath d='M22.4082 16.8501L24.5037 6.90625H27.3521L27.6923 12.5766L28.8807 6.90625H31.3617L29.2662 16.8501H26.5901L26.0186 11.5657L24.8666 16.8501H22.4082Z' fill='currentColor'/%3E %3Cpath d='M41.0735 6.90625L38.2387 13.2337H38.0164L39.3409 6.90625H36.5196L35.7395 10.4767H34.5511L35.3358 6.90625H32.501L30.3828 16.8501H33.1768L34.0613 12.9764H35.2496L34.4196 16.8501H39.3499L39.926 15.4486H41.5543L41.391 16.8501H44.185L44.2168 6.90625H41.0735ZM41.6904 13.3808H40.6335L42.0714 9.406L41.6904 13.3808Z' fill='currentColor'/%3E %3Cpath d='M46.5069 6.90625H49.3145C49.3145 6.90625 48.0264 12.8753 47.8812 13.6473C47.7361 14.4193 48.8337 14.7915 49.1014 13.707C49.3599 12.6226 50.5482 6.90625 50.5482 6.90625H53.3876C53.3876 6.90625 52.7844 9.63116 52.1221 12.9672C51.4599 16.2987 49.6094 17.0155 47.8631 17.0569C46.1169 17.1028 44.5293 16.2987 45.0555 13.753C45.5862 11.2119 46.5069 6.90625 46.5069 6.90625Z' fill='currentColor'/%3E %3Cpath d='M69.7251 6.91544C68.6366 6.91544 65.897 6.91544 65.897 6.91544L64.3367 14.2906H61.2524L61.5608 12.9672H63.4704L63.9693 10.6742H62.0144L62.2956 9.31869H64.5L65.008 6.90625H60.0232L57.9277 16.8501H66.5411L67.3983 13.1234L67.9109 16.8501H70.8228L69.775 12.4526C69.775 12.4526 71.6574 11.8736 71.934 9.99877C72.2924 7.58173 70.8137 6.91544 69.7251 6.91544ZM69.1491 10.2101C68.9223 11.5198 67.743 11.4646 67.743 11.4646L68.251 8.95567C68.251 8.95567 69.3759 8.90053 69.1536 10.2101H69.1491Z' fill='currentColor'/%3E %3Cpath d='M56.9294 9.36058H58.7028L59.2471 6.90679H56.9521C55.9814 6.8976 55.2874 7.00328 54.6343 7.48577C53.4777 8.34965 53.2736 9.68224 53.387 10.7161C53.5593 12.2739 55.2103 13.0321 55.165 13.7351C55.1332 14.2498 54.8112 14.4014 54.412 14.4014H52.4844L51.9355 16.846H53.5775C53.6637 16.846 53.7544 16.8506 53.8496 16.8552C56.2762 16.9012 57.2469 16.4003 57.8229 14.5577C58.4216 12.6461 56.9521 11.2308 56.4441 10.6334C55.9361 10.0315 56.2263 9.37437 56.9248 9.36058H56.9294Z' fill='currentColor'/%3E %3C/g%3E %3Cdefs%3E %3CclipPath%3E %3Crect width='72' height='24' fill='white'/%3E %3C/clipPath%3E %3C/defs%3E %3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='72' height='24' viewBox='0 0 72 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg clip-path='url(%23clip0_0_66)'%3E %3Cpath d='M4.97757 9.36058H6.75104L7.29532 6.90679H5.00025C4.02961 6.8976 3.33564 7.00328 2.6825 7.48577C1.52589 8.34965 1.32178 9.68224 1.43518 10.7161C1.61207 12.2739 3.25853 13.0321 3.21318 13.7351C3.18143 14.2498 2.85939 14.4014 2.46025 14.4014H0.537103L-0.0117188 16.846H1.63021C1.71639 16.846 1.8071 16.8506 1.90235 16.8552C4.32896 16.9012 5.29961 16.4003 5.87564 14.5577C6.47436 12.6461 5.00479 11.2308 4.49679 10.6334C3.98425 10.0315 4.27907 9.37437 4.97757 9.36058Z' fill='currentColor'/%3E %3Cpath d='M9.0054 9.43816H7.4043L7.93498 6.90625H13.9856L13.4867 9.41059H11.8448L10.2663 16.8501H7.46326L9.0054 9.43816Z' fill='currentColor'/%3E %3Cpath d='M12.5078 16.8501L14.6033 6.90625H19.5835L19.0982 9.29112H16.8802L16.6036 10.6145H18.5403L18.055 12.9488H16.1182L15.837 14.3044H19.012L20.5723 6.90625H23.4071L21.2754 16.8501H12.5078Z' fill='currentColor'/%3E %3Cpath d='M22.4082 16.8501L24.5037 6.90625H27.3521L27.6923 12.5766L28.8807 6.90625H31.3617L29.2662 16.8501H26.5901L26.0186 11.5657L24.8666 16.8501H22.4082Z' fill='currentColor'/%3E %3Cpath d='M41.0735 6.90625L38.2387 13.2337H38.0164L39.3409 6.90625H36.5196L35.7395 10.4767H34.5511L35.3358 6.90625H32.501L30.3828 16.8501H33.1768L34.0613 12.9764H35.2496L34.4196 16.8501H39.3499L39.926 15.4486H41.5543L41.391 16.8501H44.185L44.2168 6.90625H41.0735ZM41.6904 13.3808H40.6335L42.0714 9.406L41.6904 13.3808Z' fill='currentColor'/%3E %3Cpath d='M46.5069 6.90625H49.3145C49.3145 6.90625 48.0264 12.8753 47.8812 13.6473C47.7361 14.4193 48.8337 14.7915 49.1014 13.707C49.3599 12.6226 50.5482 6.90625 50.5482 6.90625H53.3876C53.3876 6.90625 52.7844 9.63116 52.1221 12.9672C51.4599 16.2987 49.6094 17.0155 47.8631 17.0569C46.1169 17.1028 44.5293 16.2987 45.0555 13.753C45.5862 11.2119 46.5069 6.90625 46.5069 6.90625Z' fill='currentColor'/%3E %3Cpath d='M69.7251 6.91544C68.6366 6.91544 65.897 6.91544 65.897 6.91544L64.3367 14.2906H61.2524L61.5608 12.9672H63.4704L63.9693 10.6742H62.0144L62.2956 9.31869H64.5L65.008 6.90625H60.0232L57.9277 16.8501H66.5411L67.3983 13.1234L67.9109 16.8501H70.8228L69.775 12.4526C69.775 12.4526 71.6574 11.8736 71.934 9.99877C72.2924 7.58173 70.8137 6.91544 69.7251 6.91544ZM69.1491 10.2101C68.9223 11.5198 67.743 11.4646 67.743 11.4646L68.251 8.95567C68.251 8.95567 69.3759 8.90053 69.1536 10.2101H69.1491Z' fill='currentColor'/%3E %3Cpath d='M56.9294 9.36058H58.7028L59.2471 6.90679H56.9521C55.9814 6.8976 55.2874 7.00328 54.6343 7.48577C53.4777 8.34965 53.2736 9.68224 53.387 10.7161C53.5593 12.2739 55.2103 13.0321 55.165 13.7351C55.1332 14.2498 54.8112 14.4014 54.412 14.4014H52.4844L51.9355 16.846H53.5775C53.6637 16.846 53.7544 16.8506 53.8496 16.8552C56.2762 16.9012 57.2469 16.4003 57.8229 14.5577C58.4216 12.6461 56.9521 11.2308 56.4441 10.6334C55.9361 10.0315 56.2263 9.37437 56.9248 9.36058H56.9294Z' fill='currentColor'/%3E %3C/g%3E %3Cdefs%3E %3CclipPath%3E %3Crect width='72' height='24' fill='white'/%3E %3C/clipPath%3E %3C/defs%3E %3C/svg%3E");
  -webkit-mask-size: 72px 24px;
  mask-size: 72px 24px;
}
.fz-usecase-card_icon[data-icon="bakery-dining"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M20.125 17.475C20.575 17.7083 20.9542 17.6333 21.2625 17.25C21.5708 16.8667 21.6083 16.4667 21.375 16.05L19.6 12.7L18.25 16.375L20.125 17.475ZM14.825 16.425H16.587L19 10.375C19.1 10.1417 19.1375 9.9125 19.1125 9.6875C19.0875 9.4625 18.95 9.29167 18.7 9.175L16.625 8.275C16.3917 8.15833 16.1583 8.15833 15.925 8.275C15.6917 8.39167 15.5667 8.56667 15.55 8.8L14.825 16.425ZM7.419 16.425H9.15L8.45 8.8C8.43333 8.55 8.32083 8.36667 8.1125 8.25C7.90417 8.13333 7.65833 8.14167 7.375 8.275L5.4 9.125C5.18333 9.20833 5.0625 9.39583 5.0375 9.6875C5.0125 9.97917 5.04167 10.2417 5.125 10.475L7.419 16.425ZM3.875 17.475L5.75 16.375L4.4 12.7L2.625 16.175C2.39167 16.6417 2.44167 17.0208 2.775 17.3125C3.10833 17.6042 3.475 17.6583 3.875 17.475ZM10.65 16.425H13.325L14.15 7.325C14.1833 7.09167 14.1208 6.89583 13.9625 6.7375C13.8042 6.57917 13.6083 6.5 13.375 6.5H10.625C10.3583 6.5 10.1583 6.57917 10.025 6.7375C9.89167 6.89583 9.83333 7.09167 9.85 7.325L10.65 16.425ZM3.325 19.1375C2.63517 19.1375 2.05225 18.8913 1.57625 18.3988C1.10042 17.9061 0.8625 17.3148 0.8625 16.625C0.8625 16.413 0.9 16.2062 0.975 16.0045C1.05 15.803 1.13317 15.6046 1.2245 15.4092L3.5065 10.988C3.2565 10.3102 3.2405 9.63942 3.4585 8.97575C3.67633 8.31225 4.09925 7.84317 4.72725 7.5685L6.80225 6.7185C7.06892 6.6185 7.33975 6.55917 7.61475 6.5405C7.88975 6.52183 8.14592 6.5855 8.38325 6.7315C8.50058 6.18617 8.76725 5.73833 9.18325 5.388C9.59908 5.03767 10.0797 4.8625 10.625 4.8625H13.375C13.9203 4.8625 14.4009 5.02517 14.8167 5.3505C15.2327 5.67583 15.4994 6.10283 15.6167 6.6315C15.8667 6.5355 16.1261 6.49683 16.3947 6.5155C16.6634 6.53417 16.9227 6.60183 17.1727 6.7185L19.2727 7.5685C19.9134 7.81383 20.3478 8.26308 20.576 8.91625C20.8043 9.56958 20.7808 10.2102 20.5055 10.838L22.7755 15.3842C22.8462 15.5756 22.9242 15.7648 23.0095 15.9518C23.0948 16.1386 23.1375 16.3297 23.1375 16.525C23.1375 17.2608 22.8746 17.8803 22.3488 18.3833C21.8228 18.8861 21.1898 19.1375 20.45 19.1375C20.2587 19.1375 20.0778 19.099 19.9075 19.022C19.7373 18.945 19.5649 18.8712 19.3902 18.8005L17.8893 18.0625H6.08575L4.66575 18.8005C4.45375 18.8878 4.23767 18.9658 4.0175 19.0345C3.79717 19.1032 3.56633 19.1375 3.325 19.1375Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M20.125 17.475C20.575 17.7083 20.9542 17.6333 21.2625 17.25C21.5708 16.8667 21.6083 16.4667 21.375 16.05L19.6 12.7L18.25 16.375L20.125 17.475ZM14.825 16.425H16.587L19 10.375C19.1 10.1417 19.1375 9.9125 19.1125 9.6875C19.0875 9.4625 18.95 9.29167 18.7 9.175L16.625 8.275C16.3917 8.15833 16.1583 8.15833 15.925 8.275C15.6917 8.39167 15.5667 8.56667 15.55 8.8L14.825 16.425ZM7.419 16.425H9.15L8.45 8.8C8.43333 8.55 8.32083 8.36667 8.1125 8.25C7.90417 8.13333 7.65833 8.14167 7.375 8.275L5.4 9.125C5.18333 9.20833 5.0625 9.39583 5.0375 9.6875C5.0125 9.97917 5.04167 10.2417 5.125 10.475L7.419 16.425ZM3.875 17.475L5.75 16.375L4.4 12.7L2.625 16.175C2.39167 16.6417 2.44167 17.0208 2.775 17.3125C3.10833 17.6042 3.475 17.6583 3.875 17.475ZM10.65 16.425H13.325L14.15 7.325C14.1833 7.09167 14.1208 6.89583 13.9625 6.7375C13.8042 6.57917 13.6083 6.5 13.375 6.5H10.625C10.3583 6.5 10.1583 6.57917 10.025 6.7375C9.89167 6.89583 9.83333 7.09167 9.85 7.325L10.65 16.425ZM3.325 19.1375C2.63517 19.1375 2.05225 18.8913 1.57625 18.3988C1.10042 17.9061 0.8625 17.3148 0.8625 16.625C0.8625 16.413 0.9 16.2062 0.975 16.0045C1.05 15.803 1.13317 15.6046 1.2245 15.4092L3.5065 10.988C3.2565 10.3102 3.2405 9.63942 3.4585 8.97575C3.67633 8.31225 4.09925 7.84317 4.72725 7.5685L6.80225 6.7185C7.06892 6.6185 7.33975 6.55917 7.61475 6.5405C7.88975 6.52183 8.14592 6.5855 8.38325 6.7315C8.50058 6.18617 8.76725 5.73833 9.18325 5.388C9.59908 5.03767 10.0797 4.8625 10.625 4.8625H13.375C13.9203 4.8625 14.4009 5.02517 14.8167 5.3505C15.2327 5.67583 15.4994 6.10283 15.6167 6.6315C15.8667 6.5355 16.1261 6.49683 16.3947 6.5155C16.6634 6.53417 16.9227 6.60183 17.1727 6.7185L19.2727 7.5685C19.9134 7.81383 20.3478 8.26308 20.576 8.91625C20.8043 9.56958 20.7808 10.2102 20.5055 10.838L22.7755 15.3842C22.8462 15.5756 22.9242 15.7648 23.0095 15.9518C23.0948 16.1386 23.1375 16.3297 23.1375 16.525C23.1375 17.2608 22.8746 17.8803 22.3488 18.3833C21.8228 18.8861 21.1898 19.1375 20.45 19.1375C20.2587 19.1375 20.0778 19.099 19.9075 19.022C19.7373 18.945 19.5649 18.8712 19.3902 18.8005L17.8893 18.0625H6.08575L4.66575 18.8005C4.45375 18.8878 4.23767 18.9658 4.0175 19.0345C3.79717 19.1032 3.56633 19.1375 3.325 19.1375Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); }
.fz-usecase-card_icon[data-icon="chair"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M5.019 20.173C4.80633 20.173 4.62825 20.1012 4.48475 19.9575C4.34108 19.8137 4.26925 19.6355 4.26925 19.423V18.423H4C3.30133 18.423 2.71 18.181 2.226 17.697C1.742 17.2132 1.5 16.6218 1.5 15.923V10.923C1.5 10.1858 1.75158 9.58492 2.25475 9.12025C2.75808 8.65542 3.33983 8.423 4 8.423V6.6155C4 5.91667 4.242 5.32533 4.726 4.8415C5.21 4.3575 5.80133 4.1155 6.5 4.1155H17.5C18.1987 4.1155 18.79 4.3575 19.274 4.8415C19.758 5.32533 20 5.91667 20 6.6155V8.423C20.6858 8.423 21.274 8.66025 21.7645 9.13475C22.2548 9.60908 22.5 10.2052 22.5 10.923V15.923C22.5 16.6218 22.258 17.2132 21.774 17.697C21.29 18.181 20.6987 18.423 20 18.423H19.7307V19.423C19.7307 19.6355 19.6622 19.8137 19.525 19.9575C19.3878 20.1012 19.2129 20.173 19.0003 20.173C18.7878 20.173 18.6096 20.1012 18.4658 19.9575C18.3219 19.8137 18.25 19.6355 18.25 19.423V18.423H5.76925V19.423C5.76925 19.6358 5.69733 19.8141 5.5535 19.9578C5.40967 20.1013 5.2315 20.173 5.019 20.173ZM4 16.923H20C20.2833 16.923 20.5208 16.8272 20.7125 16.6355C20.9042 16.4438 21 16.2063 21 15.923V10.923C21 10.6397 20.9042 10.4022 20.7125 10.2105C20.5208 10.0188 20.2833 9.923 20 9.923C19.7167 9.923 19.4792 10.0188 19.2875 10.2105C19.0958 10.4022 19 10.6397 19 10.923V14.673H5V10.923C5 10.6397 4.90417 10.4022 4.7125 10.2105C4.52083 10.0188 4.28333 9.923 4 9.923C3.71667 9.923 3.47917 10.0188 3.2875 10.2105C3.09583 10.4022 3 10.6397 3 10.923V15.923C3 16.2063 3.09583 16.4438 3.2875 16.6355C3.47917 16.8272 3.71667 16.923 4 16.923ZM6.5 13.173H17.5V10.923C17.5 10.518 17.5917 10.1482 17.775 9.8135C17.9583 9.47883 18.2 9.19867 18.5 8.973V6.6155C18.5 6.33217 18.4042 6.09467 18.2125 5.903C18.0208 5.71133 17.7833 5.6155 17.5 5.6155H6.5C6.21667 5.6155 5.97917 5.71133 5.7875 5.903C5.59583 6.09467 5.5 6.33217 5.5 6.6155V8.973C5.8 9.19867 6.04167 9.47883 6.225 9.8135C6.40833 10.1482 6.5 10.518 6.5 10.923V13.173Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M5.019 20.173C4.80633 20.173 4.62825 20.1012 4.48475 19.9575C4.34108 19.8137 4.26925 19.6355 4.26925 19.423V18.423H4C3.30133 18.423 2.71 18.181 2.226 17.697C1.742 17.2132 1.5 16.6218 1.5 15.923V10.923C1.5 10.1858 1.75158 9.58492 2.25475 9.12025C2.75808 8.65542 3.33983 8.423 4 8.423V6.6155C4 5.91667 4.242 5.32533 4.726 4.8415C5.21 4.3575 5.80133 4.1155 6.5 4.1155H17.5C18.1987 4.1155 18.79 4.3575 19.274 4.8415C19.758 5.32533 20 5.91667 20 6.6155V8.423C20.6858 8.423 21.274 8.66025 21.7645 9.13475C22.2548 9.60908 22.5 10.2052 22.5 10.923V15.923C22.5 16.6218 22.258 17.2132 21.774 17.697C21.29 18.181 20.6987 18.423 20 18.423H19.7307V19.423C19.7307 19.6355 19.6622 19.8137 19.525 19.9575C19.3878 20.1012 19.2129 20.173 19.0003 20.173C18.7878 20.173 18.6096 20.1012 18.4658 19.9575C18.3219 19.8137 18.25 19.6355 18.25 19.423V18.423H5.76925V19.423C5.76925 19.6358 5.69733 19.8141 5.5535 19.9578C5.40967 20.1013 5.2315 20.173 5.019 20.173ZM4 16.923H20C20.2833 16.923 20.5208 16.8272 20.7125 16.6355C20.9042 16.4438 21 16.2063 21 15.923V10.923C21 10.6397 20.9042 10.4022 20.7125 10.2105C20.5208 10.0188 20.2833 9.923 20 9.923C19.7167 9.923 19.4792 10.0188 19.2875 10.2105C19.0958 10.4022 19 10.6397 19 10.923V14.673H5V10.923C5 10.6397 4.90417 10.4022 4.7125 10.2105C4.52083 10.0188 4.28333 9.923 4 9.923C3.71667 9.923 3.47917 10.0188 3.2875 10.2105C3.09583 10.4022 3 10.6397 3 10.923V15.923C3 16.2063 3.09583 16.4438 3.2875 16.6355C3.47917 16.8272 3.71667 16.923 4 16.923ZM6.5 13.173H17.5V10.923C17.5 10.518 17.5917 10.1482 17.775 9.8135C17.9583 9.47883 18.2 9.19867 18.5 8.973V6.6155C18.5 6.33217 18.4042 6.09467 18.2125 5.903C18.0208 5.71133 17.7833 5.6155 17.5 5.6155H6.5C6.21667 5.6155 5.97917 5.71133 5.7875 5.903C5.59583 6.09467 5.5 6.33217 5.5 6.6155V8.973C5.8 9.19867 6.04167 9.47883 6.225 9.8135C6.40833 10.1482 6.5 10.518 6.5 10.923V13.173Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); }
.fz-usecase-card_icon[data-icon="construction"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M18.9288 20.5L13.4155 14.9865L14.996 13.4057L20.5095 18.9192L18.9288 20.5ZM5.08075 20.5L3.5 18.9192L10.429 11.9905L8.09425 9.66525L7.47125 10.2885L6.35975 9.16725V11.0922L5.7365 11.7152L2.9135 8.89225L3.5365 8.26925H5.4615L4.35575 7.173L7.2135 4.3155C7.4955 4.03333 7.80092 3.82692 8.12975 3.69625C8.45858 3.56542 8.80058 3.5 9.15575 3.5C9.51092 3.5 9.85292 3.56542 10.1817 3.69625C10.5106 3.82692 10.816 4.03333 11.098 4.3155L9.125 6.2885L10.298 7.4615L9.675 8.0845L12.0095 10.4097L14.4135 8.00575C14.302 7.80325 14.2206 7.594 14.1693 7.378C14.1179 7.16183 14.0923 6.93458 14.0923 6.69625C14.0923 5.79625 14.4025 5.036 15.023 4.4155C15.6435 3.795 16.4038 3.48475 17.3038 3.48475C17.5154 3.48475 17.7177 3.50333 17.9105 3.5405C18.1035 3.57767 18.2974 3.63983 18.4923 3.727L16.2193 6L18 7.78075L20.273 5.50775C20.3705 5.70258 20.4353 5.8965 20.4673 6.0895C20.4993 6.28233 20.5153 6.48458 20.5153 6.69625C20.5153 7.59625 20.205 8.3565 19.5845 8.977C18.964 9.5975 18.2038 9.90775 17.3038 9.90775C17.0654 9.90775 16.8382 9.88467 16.622 9.8385C16.406 9.79233 16.1968 9.70833 15.9943 9.5865L5.08075 20.5Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M18.9288 20.5L13.4155 14.9865L14.996 13.4057L20.5095 18.9192L18.9288 20.5ZM5.08075 20.5L3.5 18.9192L10.429 11.9905L8.09425 9.66525L7.47125 10.2885L6.35975 9.16725V11.0922L5.7365 11.7152L2.9135 8.89225L3.5365 8.26925H5.4615L4.35575 7.173L7.2135 4.3155C7.4955 4.03333 7.80092 3.82692 8.12975 3.69625C8.45858 3.56542 8.80058 3.5 9.15575 3.5C9.51092 3.5 9.85292 3.56542 10.1817 3.69625C10.5106 3.82692 10.816 4.03333 11.098 4.3155L9.125 6.2885L10.298 7.4615L9.675 8.0845L12.0095 10.4097L14.4135 8.00575C14.302 7.80325 14.2206 7.594 14.1693 7.378C14.1179 7.16183 14.0923 6.93458 14.0923 6.69625C14.0923 5.79625 14.4025 5.036 15.023 4.4155C15.6435 3.795 16.4038 3.48475 17.3038 3.48475C17.5154 3.48475 17.7177 3.50333 17.9105 3.5405C18.1035 3.57767 18.2974 3.63983 18.4923 3.727L16.2193 6L18 7.78075L20.273 5.50775C20.3705 5.70258 20.4353 5.8965 20.4673 6.0895C20.4993 6.28233 20.5153 6.48458 20.5153 6.69625C20.5153 7.59625 20.205 8.3565 19.5845 8.977C18.964 9.5975 18.2038 9.90775 17.3038 9.90775C17.0654 9.90775 16.8382 9.88467 16.622 9.8385C16.406 9.79233 16.1968 9.70833 15.9943 9.5865L5.08075 20.5Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); }
.fz-usecase-card_icon[data-icon="crane"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg transform='translate(0.0000 1.4891) scale(1.116279)'%3E %3Cg%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.25 16.832H13.75C14.164 16.832 14.5 16.495 14.5 16.082C14.5 15.668 14.164 15.332 13.75 15.332H7.25C6.836 15.332 6.5 15.668 6.5 16.082C6.5 16.495 6.836 16.832 7.25 16.832Z' fill='currentColor'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.25 16.832H19.75C20.214 16.832 20.659 16.647 20.987 16.319C21.316 15.991 21.5 15.546 21.5 15.082V10.24C21.5 9.65203 21.312 9.07903 20.962 8.60603C20.365 7.79703 19.237 6.27003 18.699 5.54203C18.369 5.09503 17.847 4.83203 17.292 4.83203H13.304C12.892 4.83203 12.558 5.16403 12.554 5.57503L12.506 11.332H5.25C5.169 11.332 5.089 11.345 5.013 11.37L1.197 12.642C0.482 12.88 0 13.549 0 14.302V15.082C0 15.546 0.184 15.991 0.513 16.319C0.841 16.647 1.286 16.832 1.75 16.832C2.25 16.832 2.75 16.832 2.75 16.832C3.164 16.832 3.5 16.495 3.5 16.082C3.5 15.668 3.164 15.332 2.75 15.332H1.75C1.684 15.332 1.62 15.305 1.573 15.258C1.526 15.211 1.5 15.148 1.5 15.082V14.302C1.5 14.195 1.569 14.099 1.671 14.065L5.372 12.832H13.25C13.662 12.832 13.997 12.5 14 12.088L14.048 6.33203H17.292C17.371 6.33203 17.446 6.36903 17.493 6.43303L19.756 9.49703C19.914 9.71203 20 9.97303 20 10.24V15.082C20 15.148 19.974 15.211 19.927 15.258C19.88 15.305 19.816 15.332 19.75 15.332H18.25C17.836 15.332 17.5 15.668 17.5 16.082C17.5 16.495 17.836 16.832 18.25 16.832Z' fill='currentColor'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.25 13.332C3.732 13.332 2.5 14.564 2.5 16.082C2.5 17.599 3.732 18.832 5.25 18.832C6.768 18.832 8 17.599 8 16.082C8 14.564 6.768 13.332 5.25 13.332ZM5.25 14.832C5.94 14.832 6.5 15.392 6.5 16.082C6.5 16.771 5.94 17.332 5.25 17.332C4.56 17.332 4 16.771 4 16.082C4 15.392 4.56 14.832 5.25 14.832Z' fill='currentColor'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.25 13.332C14.732 13.332 13.5 14.564 13.5 16.082C13.5 17.599 14.732 18.832 16.25 18.832C17.768 18.832 19 17.599 19 16.082C19 14.564 17.768 13.332 16.25 13.332ZM16.25 14.832C16.94 14.832 17.5 15.392 17.5 16.082C17.5 16.771 16.94 17.332 16.25 17.332C15.56 17.332 15 16.771 15 16.082C15 15.392 15.56 14.832 16.25 14.832Z' fill='currentColor'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.25 9.33203H13.75C13.336 9.33203 13 9.66803 13 10.082C13 10.495 13.336 10.832 13.75 10.832H20.25C20.664 10.832 21 10.495 21 10.082C21 9.66803 20.664 9.33203 20.25 9.33203Z' fill='currentColor'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.0004 5.94255C14.0004 5.18655 13.6894 4.46355 13.1394 3.94455L9.47239 0.478545C8.78339 -0.172455 7.70239 -0.157455 7.03239 0.512545C6.91139 0.633545 6.78439 0.760545 6.66339 0.882545C6.33339 1.21155 6.14939 1.65855 6.15039 2.12455C6.15139 2.58955 6.33839 3.03555 6.66939 3.36355L9.92639 6.58855C9.97339 6.63555 10.0004 6.69955 10.0004 6.76555V12.0815C10.0004 12.4955 10.3364 12.8315 10.7504 12.8315H13.2504C13.6644 12.8315 14.0004 12.4955 14.0004 12.0815V5.94255ZM12.5004 5.94255V11.3315H11.5004V6.76555C11.5004 6.29855 11.3134 5.85155 10.9814 5.52255L7.72439 2.29755C7.67739 2.25055 7.65039 2.18655 7.65039 2.12055C7.65039 2.05355 7.67639 1.98955 7.72339 1.94255L8.09339 1.57355C8.18939 1.47755 8.34339 1.47555 8.44139 1.56855L12.1094 5.03455C12.3584 5.27055 12.5004 5.59855 12.5004 5.94255Z' fill='currentColor'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.5 3.08203V7.08203C6.5 7.14803 6.474 7.21103 6.427 7.25803C6.38 7.30503 6.316 7.33203 6.25 7.33203H5.75C5.684 7.33203 5.62 7.30503 5.573 7.25803C5.526 7.21103 5.5 7.14803 5.5 7.08203V6.08203C5.5 5.66803 5.164 5.33203 4.75 5.33203C4.336 5.33203 4 5.66803 4 6.08203V7.08203C4 7.54603 4.184 7.99103 4.513 8.31903C4.841 8.64703 5.286 8.83203 5.75 8.83203C5.915 8.83203 6.085 8.83203 6.25 8.83203C6.714 8.83203 7.159 8.64703 7.487 8.31903C7.816 7.99103 8 7.54603 8 7.08203C8 5.62203 8 3.08203 8 3.08203C8 2.66803 7.664 2.33203 7.25 2.33203C6.836 2.33203 6.5 2.66803 6.5 3.08203Z' fill='currentColor'/%3E %3C/g%3E %3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg transform='translate(0.0000 1.4891) scale(1.116279)'%3E %3Cg%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.25 16.832H13.75C14.164 16.832 14.5 16.495 14.5 16.082C14.5 15.668 14.164 15.332 13.75 15.332H7.25C6.836 15.332 6.5 15.668 6.5 16.082C6.5 16.495 6.836 16.832 7.25 16.832Z' fill='currentColor'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.25 16.832H19.75C20.214 16.832 20.659 16.647 20.987 16.319C21.316 15.991 21.5 15.546 21.5 15.082V10.24C21.5 9.65203 21.312 9.07903 20.962 8.60603C20.365 7.79703 19.237 6.27003 18.699 5.54203C18.369 5.09503 17.847 4.83203 17.292 4.83203H13.304C12.892 4.83203 12.558 5.16403 12.554 5.57503L12.506 11.332H5.25C5.169 11.332 5.089 11.345 5.013 11.37L1.197 12.642C0.482 12.88 0 13.549 0 14.302V15.082C0 15.546 0.184 15.991 0.513 16.319C0.841 16.647 1.286 16.832 1.75 16.832C2.25 16.832 2.75 16.832 2.75 16.832C3.164 16.832 3.5 16.495 3.5 16.082C3.5 15.668 3.164 15.332 2.75 15.332H1.75C1.684 15.332 1.62 15.305 1.573 15.258C1.526 15.211 1.5 15.148 1.5 15.082V14.302C1.5 14.195 1.569 14.099 1.671 14.065L5.372 12.832H13.25C13.662 12.832 13.997 12.5 14 12.088L14.048 6.33203H17.292C17.371 6.33203 17.446 6.36903 17.493 6.43303L19.756 9.49703C19.914 9.71203 20 9.97303 20 10.24V15.082C20 15.148 19.974 15.211 19.927 15.258C19.88 15.305 19.816 15.332 19.75 15.332H18.25C17.836 15.332 17.5 15.668 17.5 16.082C17.5 16.495 17.836 16.832 18.25 16.832Z' fill='currentColor'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.25 13.332C3.732 13.332 2.5 14.564 2.5 16.082C2.5 17.599 3.732 18.832 5.25 18.832C6.768 18.832 8 17.599 8 16.082C8 14.564 6.768 13.332 5.25 13.332ZM5.25 14.832C5.94 14.832 6.5 15.392 6.5 16.082C6.5 16.771 5.94 17.332 5.25 17.332C4.56 17.332 4 16.771 4 16.082C4 15.392 4.56 14.832 5.25 14.832Z' fill='currentColor'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.25 13.332C14.732 13.332 13.5 14.564 13.5 16.082C13.5 17.599 14.732 18.832 16.25 18.832C17.768 18.832 19 17.599 19 16.082C19 14.564 17.768 13.332 16.25 13.332ZM16.25 14.832C16.94 14.832 17.5 15.392 17.5 16.082C17.5 16.771 16.94 17.332 16.25 17.332C15.56 17.332 15 16.771 15 16.082C15 15.392 15.56 14.832 16.25 14.832Z' fill='currentColor'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.25 9.33203H13.75C13.336 9.33203 13 9.66803 13 10.082C13 10.495 13.336 10.832 13.75 10.832H20.25C20.664 10.832 21 10.495 21 10.082C21 9.66803 20.664 9.33203 20.25 9.33203Z' fill='currentColor'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.0004 5.94255C14.0004 5.18655 13.6894 4.46355 13.1394 3.94455L9.47239 0.478545C8.78339 -0.172455 7.70239 -0.157455 7.03239 0.512545C6.91139 0.633545 6.78439 0.760545 6.66339 0.882545C6.33339 1.21155 6.14939 1.65855 6.15039 2.12455C6.15139 2.58955 6.33839 3.03555 6.66939 3.36355L9.92639 6.58855C9.97339 6.63555 10.0004 6.69955 10.0004 6.76555V12.0815C10.0004 12.4955 10.3364 12.8315 10.7504 12.8315H13.2504C13.6644 12.8315 14.0004 12.4955 14.0004 12.0815V5.94255ZM12.5004 5.94255V11.3315H11.5004V6.76555C11.5004 6.29855 11.3134 5.85155 10.9814 5.52255L7.72439 2.29755C7.67739 2.25055 7.65039 2.18655 7.65039 2.12055C7.65039 2.05355 7.67639 1.98955 7.72339 1.94255L8.09339 1.57355C8.18939 1.47755 8.34339 1.47555 8.44139 1.56855L12.1094 5.03455C12.3584 5.27055 12.5004 5.59855 12.5004 5.94255Z' fill='currentColor'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.5 3.08203V7.08203C6.5 7.14803 6.474 7.21103 6.427 7.25803C6.38 7.30503 6.316 7.33203 6.25 7.33203H5.75C5.684 7.33203 5.62 7.30503 5.573 7.25803C5.526 7.21103 5.5 7.14803 5.5 7.08203V6.08203C5.5 5.66803 5.164 5.33203 4.75 5.33203C4.336 5.33203 4 5.66803 4 6.08203V7.08203C4 7.54603 4.184 7.99103 4.513 8.31903C4.841 8.64703 5.286 8.83203 5.75 8.83203C5.915 8.83203 6.085 8.83203 6.25 8.83203C6.714 8.83203 7.159 8.64703 7.487 8.31903C7.816 7.99103 8 7.54603 8 7.08203C8 5.62203 8 3.08203 8 3.08203C8 2.66803 7.664 2.33203 7.25 2.33203C6.836 2.33203 6.5 2.66803 6.5 3.08203Z' fill='currentColor'/%3E %3C/g%3E %3C/g%3E%3C/svg%3E"); }
.fz-usecase-card_icon[data-icon="curtainsider"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cg%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.5029 6.97348C20.0579 6.97348 20.5802 7.23644 20.9102 7.68344C21.4482 8.41147 22.5759 9.93892 23.1728 10.7479C23.5227 11.2209 23.7109 11.7938 23.7109 12.3817V17.2235C23.7109 17.6875 23.5272 18.1328 23.1982 18.4608C22.8702 18.7888 22.4249 18.9735 21.9609 18.9735H21.0791C20.752 20.1265 19.6932 20.9735 18.4355 20.9735C17.1779 20.9735 16.1191 20.1265 15.792 18.9735H10.0791C9.75204 20.1265 8.69319 20.9735 7.43555 20.9735C6.1779 20.9735 5.11906 20.1265 4.79199 18.9735H3.96094C3.49694 18.9735 3.05163 18.7888 2.72363 18.4608C2.39463 18.1328 2.21094 17.6875 2.21094 17.2235V17.2186C2.20749 17.1894 2.20508 17.1598 2.20508 17.1297V14.2264C2.20508 13.8122 2.54087 13.4764 2.95508 13.4764H8.22656V13.4735H14.7168L14.7647 7.71665C14.7687 7.30574 15.1028 6.97364 15.5147 6.97348H19.5029ZM7.43555 16.9735C6.74555 16.9735 6.18555 17.5335 6.18555 18.2235C6.18555 18.9125 6.74555 19.4735 7.43555 19.4735C8.12555 19.4735 8.68555 18.9125 8.68555 18.2235C8.68555 17.5335 8.12555 16.9735 7.43555 16.9735ZM18.4355 16.9735C17.7455 16.9735 17.1855 17.5335 17.1855 18.2235C17.1855 18.9125 17.7455 19.4735 18.4355 19.4735C19.1255 19.4735 19.6855 18.9125 19.6855 18.2235C19.6855 17.5335 19.1255 16.9735 18.4355 16.9735ZM16.2217 12.9735L16.2109 14.2293C16.2079 14.6413 15.8729 14.9735 15.4609 14.9735H8.28223C8.26319 14.9749 8.24401 14.9764 8.22461 14.9764H3.71484V16.4188C3.71402 16.4269 3.71095 16.4349 3.71094 16.4432V17.2235C3.71094 17.2895 3.73718 17.3523 3.78418 17.3993C3.83118 17.4463 3.89494 17.4735 3.96094 17.4735H4.79199C5.11895 16.32 6.17778 15.4735 7.43555 15.4735C8.69331 15.4735 9.75214 16.32 10.0791 17.4735H15.792C16.119 16.32 17.1778 15.4735 18.4355 15.4735C19.6933 15.4735 20.7521 16.32 21.0791 17.4735H21.9609C22.0269 17.4735 22.0907 17.4463 22.1377 17.3993C22.1847 17.3523 22.2109 17.2895 22.2109 17.2235V12.9735H16.2217ZM16.2334 11.4735H21.8447L19.7041 8.57407C19.6571 8.51018 19.5818 8.47348 19.5029 8.47348H16.2588L16.2334 11.4735Z' fill='currentColor'/%3E %3Cpath d='M8.83366 5.77023L9.25261 6.18332L9.43229 6.36008L8.56413 7.22824H11.8717V8.31613H8.56413L9.25456 9.00558L9.43229 9.18429L8.83366 9.77316L8.6569 9.94797L8.4821 9.77219L6.65886 7.94894L6.48112 7.77219L6.65886 7.59543L8.4821 5.77219L8.6569 5.5964L8.83366 5.77023Z' fill='currentColor'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.1999 3.02982C13.7522 3.02982 14.1999 3.47754 14.1999 4.02982V12.8579H0.414715L0.414715 4.02982C0.414715 3.51214 0.808047 3.08603 1.31218 3.0347L1.41472 3.02982H13.1999ZM1.91472 11.3579H4.10612V4.52982H1.91472V11.3579ZM5.60612 11.3579H12.6999V4.52982H5.60612V11.3579Z' fill='currentColor'/%3E %3C/g%3E %3C/g%3E %3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cg%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.5029 6.97348C20.0579 6.97348 20.5802 7.23644 20.9102 7.68344C21.4482 8.41147 22.5759 9.93892 23.1728 10.7479C23.5227 11.2209 23.7109 11.7938 23.7109 12.3817V17.2235C23.7109 17.6875 23.5272 18.1328 23.1982 18.4608C22.8702 18.7888 22.4249 18.9735 21.9609 18.9735H21.0791C20.752 20.1265 19.6932 20.9735 18.4355 20.9735C17.1779 20.9735 16.1191 20.1265 15.792 18.9735H10.0791C9.75204 20.1265 8.69319 20.9735 7.43555 20.9735C6.1779 20.9735 5.11906 20.1265 4.79199 18.9735H3.96094C3.49694 18.9735 3.05163 18.7888 2.72363 18.4608C2.39463 18.1328 2.21094 17.6875 2.21094 17.2235V17.2186C2.20749 17.1894 2.20508 17.1598 2.20508 17.1297V14.2264C2.20508 13.8122 2.54087 13.4764 2.95508 13.4764H8.22656V13.4735H14.7168L14.7647 7.71665C14.7687 7.30574 15.1028 6.97364 15.5147 6.97348H19.5029ZM7.43555 16.9735C6.74555 16.9735 6.18555 17.5335 6.18555 18.2235C6.18555 18.9125 6.74555 19.4735 7.43555 19.4735C8.12555 19.4735 8.68555 18.9125 8.68555 18.2235C8.68555 17.5335 8.12555 16.9735 7.43555 16.9735ZM18.4355 16.9735C17.7455 16.9735 17.1855 17.5335 17.1855 18.2235C17.1855 18.9125 17.7455 19.4735 18.4355 19.4735C19.1255 19.4735 19.6855 18.9125 19.6855 18.2235C19.6855 17.5335 19.1255 16.9735 18.4355 16.9735ZM16.2217 12.9735L16.2109 14.2293C16.2079 14.6413 15.8729 14.9735 15.4609 14.9735H8.28223C8.26319 14.9749 8.24401 14.9764 8.22461 14.9764H3.71484V16.4188C3.71402 16.4269 3.71095 16.4349 3.71094 16.4432V17.2235C3.71094 17.2895 3.73718 17.3523 3.78418 17.3993C3.83118 17.4463 3.89494 17.4735 3.96094 17.4735H4.79199C5.11895 16.32 6.17778 15.4735 7.43555 15.4735C8.69331 15.4735 9.75214 16.32 10.0791 17.4735H15.792C16.119 16.32 17.1778 15.4735 18.4355 15.4735C19.6933 15.4735 20.7521 16.32 21.0791 17.4735H21.9609C22.0269 17.4735 22.0907 17.4463 22.1377 17.3993C22.1847 17.3523 22.2109 17.2895 22.2109 17.2235V12.9735H16.2217ZM16.2334 11.4735H21.8447L19.7041 8.57407C19.6571 8.51018 19.5818 8.47348 19.5029 8.47348H16.2588L16.2334 11.4735Z' fill='currentColor'/%3E %3Cpath d='M8.83366 5.77023L9.25261 6.18332L9.43229 6.36008L8.56413 7.22824H11.8717V8.31613H8.56413L9.25456 9.00558L9.43229 9.18429L8.83366 9.77316L8.6569 9.94797L8.4821 9.77219L6.65886 7.94894L6.48112 7.77219L6.65886 7.59543L8.4821 5.77219L8.6569 5.5964L8.83366 5.77023Z' fill='currentColor'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.1999 3.02982C13.7522 3.02982 14.1999 3.47754 14.1999 4.02982V12.8579H0.414715L0.414715 4.02982C0.414715 3.51214 0.808047 3.08603 1.31218 3.0347L1.41472 3.02982H13.1999ZM1.91472 11.3579H4.10612V4.52982H1.91472V11.3579ZM5.60612 11.3579H12.6999V4.52982H5.60612V11.3579Z' fill='currentColor'/%3E %3C/g%3E %3C/g%3E %3C/svg%3E"); }
.fz-usecase-card_icon[data-icon="delivery-truck-speed"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg transform='translate(-0.0000 3.0650) scale(1.072400)'%3E %3Cpath d='M6.048 16.6635C5.18633 16.6635 4.479 16.3537 3.926 15.734C3.37283 15.1142 3.13792 14.3818 3.22125 13.537H1.73C1.48967 13.537 1.28758 13.4547 1.12375 13.2902C0.960083 13.1256 0.87825 12.9225 0.87825 12.681C0.87825 12.4393 0.960083 12.2377 1.12375 12.076C1.28758 11.9145 1.48967 11.8338 1.73 11.8338H4.0435C4.2855 11.5656 4.5775 11.353 4.9195 11.196C5.2615 11.0388 5.63742 10.9603 6.04725 10.9603C6.45708 10.9603 6.83217 11.0389 7.1725 11.1963C7.51267 11.3538 7.80592 11.5663 8.05225 11.8338H13.0323L15.362 1.70925H4.9435C4.695 1.70925 4.49408 1.627 4.34075 1.4625C4.18758 1.298 4.111 1.09508 4.111 0.853751C4.111 0.612417 4.19283 0.40975 4.3565 0.24575C4.52017 0.0819171 4.72417 0 4.9685 0H16.4185C16.6838 0 16.9056 0.10875 17.0838 0.32625C17.2621 0.543916 17.3243 0.785334 17.2703 1.0505L16.4713 4.483H18.7387C19.0111 4.483 19.2667 4.54217 19.5055 4.6605C19.7445 4.77867 19.9447 4.94542 20.106 5.16075L22.0403 7.758C22.1913 7.9655 22.2912 8.18033 22.34 8.4025C22.3888 8.62483 22.3926 8.8575 22.3513 9.1005L21.6083 12.8343C21.5676 13.0359 21.4673 13.2034 21.3075 13.3367C21.1477 13.4702 20.966 13.537 20.7625 13.537H19.3995C19.4828 14.3855 19.2438 15.1188 18.6825 15.7368C18.121 16.3546 17.4095 16.6635 16.548 16.6635C15.6863 16.6635 14.979 16.3537 14.426 15.734C13.8728 15.1142 13.6379 14.3818 13.7213 13.537H8.8995C8.98283 14.3855 8.74383 15.1188 8.1825 15.7368C7.621 16.3546 6.9095 16.6635 6.048 16.6635ZM15.2915 9.60875H20.493L20.655 8.74775L18.7387 6.1865H16.0762L15.2915 9.60875ZM13.2323 10.9338L13.3948 10.2808C13.5031 9.84542 13.6239 9.30908 13.7573 8.67175C13.8304 8.38142 13.8943 8.10442 13.949 7.84075C14.0037 7.57692 14.0578 7.34767 14.1113 7.153L14.2713 6.50075C14.3778 6.06575 14.4987 5.52925 14.634 4.89125C14.7693 4.25325 14.888 3.71558 14.99 3.27825L15.143 2.62225L15.362 1.70925L13.0323 11.8338L13.2323 10.9338ZM0.83275 9.52325C0.58425 9.52325 0.383333 9.44142 0.23 9.27775C0.0766666 9.11408 0 8.91208 0 8.67175C0 8.43125 0.0808333 8.22917 0.2425 8.0655C0.404167 7.90183 0.60925 7.82 0.85775 7.82H4.86375C5.10408 7.82 5.30608 7.90225 5.46975 8.06675C5.63342 8.23142 5.71525 8.4345 5.71525 8.676C5.71525 8.91767 5.63342 9.11933 5.46975 9.281C5.30608 9.4425 5.10408 9.52325 4.86375 9.52325H0.83275ZM2.83275 5.74175C2.58842 5.74175 2.38433 5.6595 2.2205 5.495C2.05683 5.3305 1.975 5.12758 1.975 4.88625C1.975 4.64508 2.05683 4.4425 2.2205 4.2785C2.38433 4.1145 2.58842 4.0325 2.83275 4.0325H7.85775C8.09758 4.0325 8.3005 4.11592 8.4665 4.28275C8.63233 4.44975 8.71525 4.65383 8.71525 4.895C8.71525 5.13633 8.63233 5.33783 8.4665 5.4995C8.3005 5.661 8.09758 5.74175 7.85775 5.74175H2.83275ZM6.0595 14.9603C6.37217 14.9603 6.63975 14.8451 6.86225 14.6148C7.08492 14.3844 7.19625 14.1129 7.19625 13.8003C7.19625 13.4878 7.08633 13.2202 6.8665 12.9975C6.6465 12.7748 6.37392 12.6635 6.04875 12.6635C5.74458 12.6635 5.477 12.7735 5.246 12.9935C5.015 13.2133 4.8995 13.4858 4.8995 13.811C4.8995 14.1153 5.01467 14.3829 5.245 14.6138C5.47533 14.8448 5.74683 14.9603 6.0595 14.9603ZM16.5595 14.9603C16.8722 14.9603 17.1398 14.8451 17.3623 14.6148C17.5849 14.3844 17.6963 14.1129 17.6963 13.8003C17.6963 13.4878 17.5863 13.2202 17.3665 12.9975C17.1465 12.7748 16.8739 12.6635 16.5488 12.6635C16.2446 12.6635 15.977 12.7735 15.746 12.9935C15.515 13.2133 15.3995 13.4858 15.3995 13.811C15.3995 14.1153 15.5147 14.3829 15.745 14.6138C15.9753 14.8448 16.2468 14.9603 16.5595 14.9603Z' fill='currentColor'/%3E %3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg transform='translate(-0.0000 3.0650) scale(1.072400)'%3E %3Cpath d='M6.048 16.6635C5.18633 16.6635 4.479 16.3537 3.926 15.734C3.37283 15.1142 3.13792 14.3818 3.22125 13.537H1.73C1.48967 13.537 1.28758 13.4547 1.12375 13.2902C0.960083 13.1256 0.87825 12.9225 0.87825 12.681C0.87825 12.4393 0.960083 12.2377 1.12375 12.076C1.28758 11.9145 1.48967 11.8338 1.73 11.8338H4.0435C4.2855 11.5656 4.5775 11.353 4.9195 11.196C5.2615 11.0388 5.63742 10.9603 6.04725 10.9603C6.45708 10.9603 6.83217 11.0389 7.1725 11.1963C7.51267 11.3538 7.80592 11.5663 8.05225 11.8338H13.0323L15.362 1.70925H4.9435C4.695 1.70925 4.49408 1.627 4.34075 1.4625C4.18758 1.298 4.111 1.09508 4.111 0.853751C4.111 0.612417 4.19283 0.40975 4.3565 0.24575C4.52017 0.0819171 4.72417 0 4.9685 0H16.4185C16.6838 0 16.9056 0.10875 17.0838 0.32625C17.2621 0.543916 17.3243 0.785334 17.2703 1.0505L16.4713 4.483H18.7387C19.0111 4.483 19.2667 4.54217 19.5055 4.6605C19.7445 4.77867 19.9447 4.94542 20.106 5.16075L22.0403 7.758C22.1913 7.9655 22.2912 8.18033 22.34 8.4025C22.3888 8.62483 22.3926 8.8575 22.3513 9.1005L21.6083 12.8343C21.5676 13.0359 21.4673 13.2034 21.3075 13.3367C21.1477 13.4702 20.966 13.537 20.7625 13.537H19.3995C19.4828 14.3855 19.2438 15.1188 18.6825 15.7368C18.121 16.3546 17.4095 16.6635 16.548 16.6635C15.6863 16.6635 14.979 16.3537 14.426 15.734C13.8728 15.1142 13.6379 14.3818 13.7213 13.537H8.8995C8.98283 14.3855 8.74383 15.1188 8.1825 15.7368C7.621 16.3546 6.9095 16.6635 6.048 16.6635ZM15.2915 9.60875H20.493L20.655 8.74775L18.7387 6.1865H16.0762L15.2915 9.60875ZM13.2323 10.9338L13.3948 10.2808C13.5031 9.84542 13.6239 9.30908 13.7573 8.67175C13.8304 8.38142 13.8943 8.10442 13.949 7.84075C14.0037 7.57692 14.0578 7.34767 14.1113 7.153L14.2713 6.50075C14.3778 6.06575 14.4987 5.52925 14.634 4.89125C14.7693 4.25325 14.888 3.71558 14.99 3.27825L15.143 2.62225L15.362 1.70925L13.0323 11.8338L13.2323 10.9338ZM0.83275 9.52325C0.58425 9.52325 0.383333 9.44142 0.23 9.27775C0.0766666 9.11408 0 8.91208 0 8.67175C0 8.43125 0.0808333 8.22917 0.2425 8.0655C0.404167 7.90183 0.60925 7.82 0.85775 7.82H4.86375C5.10408 7.82 5.30608 7.90225 5.46975 8.06675C5.63342 8.23142 5.71525 8.4345 5.71525 8.676C5.71525 8.91767 5.63342 9.11933 5.46975 9.281C5.30608 9.4425 5.10408 9.52325 4.86375 9.52325H0.83275ZM2.83275 5.74175C2.58842 5.74175 2.38433 5.6595 2.2205 5.495C2.05683 5.3305 1.975 5.12758 1.975 4.88625C1.975 4.64508 2.05683 4.4425 2.2205 4.2785C2.38433 4.1145 2.58842 4.0325 2.83275 4.0325H7.85775C8.09758 4.0325 8.3005 4.11592 8.4665 4.28275C8.63233 4.44975 8.71525 4.65383 8.71525 4.895C8.71525 5.13633 8.63233 5.33783 8.4665 5.4995C8.3005 5.661 8.09758 5.74175 7.85775 5.74175H2.83275ZM6.0595 14.9603C6.37217 14.9603 6.63975 14.8451 6.86225 14.6148C7.08492 14.3844 7.19625 14.1129 7.19625 13.8003C7.19625 13.4878 7.08633 13.2202 6.8665 12.9975C6.6465 12.7748 6.37392 12.6635 6.04875 12.6635C5.74458 12.6635 5.477 12.7735 5.246 12.9935C5.015 13.2133 4.8995 13.4858 4.8995 13.811C4.8995 14.1153 5.01467 14.3829 5.245 14.6138C5.47533 14.8448 5.74683 14.9603 6.0595 14.9603ZM16.5595 14.9603C16.8722 14.9603 17.1398 14.8451 17.3623 14.6148C17.5849 14.3844 17.6963 14.1129 17.6963 13.8003C17.6963 13.4878 17.5863 13.2202 17.3665 12.9975C17.1465 12.7748 16.8739 12.6635 16.5488 12.6635C16.2446 12.6635 15.977 12.7735 15.746 12.9935C15.515 13.2133 15.3995 13.4858 15.3995 13.811C15.3995 14.1153 15.5147 14.3829 15.745 14.6138C15.9753 14.8448 16.2468 14.9603 16.5595 14.9603Z' fill='currentColor'/%3E %3C/g%3E%3C/svg%3E"); }
.fz-usecase-card_icon[data-icon="dump-truck"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg transform='translate(0.0000 3.8053) scale(1.170675)'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.293 0C16.848 0 17.3702 0.262961 17.7002 0.709961C18.2382 1.43799 19.3659 2.96544 19.9629 3.77441C20.3128 4.24737 20.501 4.8203 20.501 5.4082V10.25C20.501 10.714 20.3173 11.1593 19.9883 11.4873C19.6603 11.8153 19.215 12 18.751 12H17.3701C17.043 13.153 15.9842 14 14.7266 14C13.4689 14 12.4101 13.153 12.083 12H8.12012C7.79305 13.153 6.7342 14 5.47656 14C4.21709 14 3.15646 13.1507 2.83105 11.9951C2.80441 11.998 2.7774 12 2.75 12H1.75C1.28604 12 0.840671 11.8153 0.512695 11.4873C0.183728 11.1593 0 10.714 0 10.25V9.46973C4.04647e-06 9.44355 0.00274772 9.41756 0.00390625 9.3916V7.25293C0.00390625 6.83888 0.339858 6.50316 0.753906 6.50293L8.10156 6.5L7.12793 5.71777C6.86968 5.51021 6.8286 5.13232 7.03613 4.87402C7.2437 4.61578 7.62159 4.57469 7.87988 4.78223L10.0176 6.5H11.5068L11.5547 0.743164C11.5587 0.33226 11.8928 0.000155065 12.3047 0H16.293ZM5.47656 10C4.78656 10 4.22656 10.56 4.22656 11.25C4.22656 11.939 4.78656 12.5 5.47656 12.5C6.16656 12.5 6.72656 11.939 6.72656 11.25C6.72656 10.56 6.16656 10 5.47656 10ZM14.7266 10C14.0366 10 13.4766 10.56 13.4766 11.25C13.4766 11.939 14.0366 12.5 14.7266 12.5C15.4166 12.5 15.9766 11.939 15.9766 11.25C15.9766 10.56 15.4166 10 14.7266 10ZM13.001 7.25586C12.998 7.66786 12.663 8 12.251 8H5.07324C5.05421 8.00145 5.03503 8.00293 5.01562 8.00293H1.51562V9.375C1.51562 9.418 1.51086 9.45996 1.50391 9.50098V10.1562C1.50391 10.1823 1.50259 10.208 1.5 10.2334V10.25C1.5 10.316 1.52627 10.3788 1.57324 10.4258C1.62022 10.4728 1.68404 10.5 1.75 10.5H2.75C2.77737 10.5 2.80444 10.501 2.83105 10.5039C3.15665 9.34832 4.2173 8.5 5.47656 8.5C6.73432 8.5 7.79315 9.34653 8.12012 10.5H12.083C12.41 9.34653 13.4688 8.5 14.7266 8.5C15.9843 8.5 17.0432 9.34653 17.3701 10.5H18.751C18.817 10.5 18.8807 10.4728 18.9277 10.4258C18.9747 10.3788 19.001 10.316 19.001 10.25V6H13.0117L13.001 7.25586ZM13.0234 4.5H18.6348L16.4941 1.60059C16.4471 1.5367 16.3719 1.5 16.293 1.5H13.0488L13.0234 4.5Z' fill='currentColor'/%3E %3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg transform='translate(0.0000 3.8053) scale(1.170675)'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.293 0C16.848 0 17.3702 0.262961 17.7002 0.709961C18.2382 1.43799 19.3659 2.96544 19.9629 3.77441C20.3128 4.24737 20.501 4.8203 20.501 5.4082V10.25C20.501 10.714 20.3173 11.1593 19.9883 11.4873C19.6603 11.8153 19.215 12 18.751 12H17.3701C17.043 13.153 15.9842 14 14.7266 14C13.4689 14 12.4101 13.153 12.083 12H8.12012C7.79305 13.153 6.7342 14 5.47656 14C4.21709 14 3.15646 13.1507 2.83105 11.9951C2.80441 11.998 2.7774 12 2.75 12H1.75C1.28604 12 0.840671 11.8153 0.512695 11.4873C0.183728 11.1593 0 10.714 0 10.25V9.46973C4.04647e-06 9.44355 0.00274772 9.41756 0.00390625 9.3916V7.25293C0.00390625 6.83888 0.339858 6.50316 0.753906 6.50293L8.10156 6.5L7.12793 5.71777C6.86968 5.51021 6.8286 5.13232 7.03613 4.87402C7.2437 4.61578 7.62159 4.57469 7.87988 4.78223L10.0176 6.5H11.5068L11.5547 0.743164C11.5587 0.33226 11.8928 0.000155065 12.3047 0H16.293ZM5.47656 10C4.78656 10 4.22656 10.56 4.22656 11.25C4.22656 11.939 4.78656 12.5 5.47656 12.5C6.16656 12.5 6.72656 11.939 6.72656 11.25C6.72656 10.56 6.16656 10 5.47656 10ZM14.7266 10C14.0366 10 13.4766 10.56 13.4766 11.25C13.4766 11.939 14.0366 12.5 14.7266 12.5C15.4166 12.5 15.9766 11.939 15.9766 11.25C15.9766 10.56 15.4166 10 14.7266 10ZM13.001 7.25586C12.998 7.66786 12.663 8 12.251 8H5.07324C5.05421 8.00145 5.03503 8.00293 5.01562 8.00293H1.51562V9.375C1.51562 9.418 1.51086 9.45996 1.50391 9.50098V10.1562C1.50391 10.1823 1.50259 10.208 1.5 10.2334V10.25C1.5 10.316 1.52627 10.3788 1.57324 10.4258C1.62022 10.4728 1.68404 10.5 1.75 10.5H2.75C2.77737 10.5 2.80444 10.501 2.83105 10.5039C3.15665 9.34832 4.2173 8.5 5.47656 8.5C6.73432 8.5 7.79315 9.34653 8.12012 10.5H12.083C12.41 9.34653 13.4688 8.5 14.7266 8.5C15.9843 8.5 17.0432 9.34653 17.3701 10.5H18.751C18.817 10.5 18.8807 10.4728 18.9277 10.4258C18.9747 10.3788 19.001 10.316 19.001 10.25V6H13.0117L13.001 7.25586ZM13.0234 4.5H18.6348L16.4941 1.60059C16.4471 1.5367 16.3719 1.5 16.293 1.5H13.0488L13.0234 4.5Z' fill='currentColor'/%3E %3C/g%3E%3C/svg%3E"); }
.fz-usecase-card_icon[data-icon="health"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M8.3365 20.5V15.6635H3.5V8.34625H8.3365V3.5H15.6538V8.34625H20.5V15.6635H15.6538V20.5H8.3365ZM9.8365 19H14.1538V14.1635H19V9.84625H14.1538V5H9.8365V9.84625H5V14.1635H9.8365V19Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M8.3365 20.5V15.6635H3.5V8.34625H8.3365V3.5H15.6538V8.34625H20.5V15.6635H15.6538V20.5H8.3365ZM9.8365 19H14.1538V14.1635H19V9.84625H14.1538V5H9.8365V9.84625H5V14.1635H9.8365V19Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); }
.fz-usecase-card_icon[data-icon="history"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M12 21C9.7 21 7.69583 20.2375 5.9875 18.7125C4.27917 17.1875 3.3 15.2833 3.05 13H5.1C5.33333 14.7333 6.10417 16.1667 7.4125 17.3C8.72083 18.4333 10.25 19 12 19C13.95 19 15.6042 18.3208 16.9625 16.9625C18.3208 15.6042 19 13.95 19 12C19 10.05 18.3208 8.39583 16.9625 7.0375C15.6042 5.67917 13.95 5 12 5C10.85 5 9.775 5.26667 8.775 5.8C7.775 6.33333 6.93333 7.06667 6.25 8H9V10H3V4H5V6.35C5.85 5.28333 6.8875 4.45833 8.1125 3.875C9.3375 3.29167 10.6333 3 12 3C13.25 3 14.4208 3.2375 15.5125 3.7125C16.6042 4.1875 17.5542 4.82917 18.3625 5.6375C19.1708 6.44583 19.8125 7.39583 20.2875 8.4875C20.7625 9.57917 21 10.75 21 12C21 13.25 20.7625 14.4208 20.2875 15.5125C19.8125 16.6042 19.1708 17.5542 18.3625 18.3625C17.5542 19.1708 16.6042 19.8125 15.5125 20.2875C14.4208 20.7625 13.25 21 12 21Z' fill='currentColor'/%3E %3Ccircle cx='12' cy='12.0039' r='2.30859' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M12 21C9.7 21 7.69583 20.2375 5.9875 18.7125C4.27917 17.1875 3.3 15.2833 3.05 13H5.1C5.33333 14.7333 6.10417 16.1667 7.4125 17.3C8.72083 18.4333 10.25 19 12 19C13.95 19 15.6042 18.3208 16.9625 16.9625C18.3208 15.6042 19 13.95 19 12C19 10.05 18.3208 8.39583 16.9625 7.0375C15.6042 5.67917 13.95 5 12 5C10.85 5 9.775 5.26667 8.775 5.8C7.775 6.33333 6.93333 7.06667 6.25 8H9V10H3V4H5V6.35C5.85 5.28333 6.8875 4.45833 8.1125 3.875C9.3375 3.29167 10.6333 3 12 3C13.25 3 14.4208 3.2375 15.5125 3.7125C16.6042 4.1875 17.5542 4.82917 18.3625 5.6375C19.1708 6.44583 19.8125 7.39583 20.2875 8.4875C20.7625 9.57917 21 10.75 21 12C21 13.25 20.7625 14.4208 20.2875 15.5125C19.8125 16.6042 19.1708 17.5542 18.3625 18.3625C17.5542 19.1708 16.6042 19.8125 15.5125 20.2875C14.4208 20.7625 13.25 21 12 21Z' fill='currentColor'/%3E %3Ccircle cx='12' cy='12.0039' r='2.30859' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); }
.fz-usecase-card_icon[data-icon="local-bar"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M6.5 20.75V19.25H11.25V13.5192L3.67325 5V3.5H20.3268V5L12.75 13.5192V19.25H17.5V20.75H6.5ZM7.45 7H16.55L18.35 5H5.65L7.45 7ZM12 12.1L15.2173 8.5H8.78275L12 12.1Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M6.5 20.75V19.25H11.25V13.5192L3.67325 5V3.5H20.3268V5L12.75 13.5192V19.25H17.5V20.75H6.5ZM7.45 7H16.55L18.35 5H5.65L7.45 7ZM12 12.1L15.2173 8.5H8.78275L12 12.1Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); }
.fz-usecase-card_icon[data-icon="local-florist"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M12 22.275C12 20.1015 12.7244 18.1477 14.1732 16.4137C15.6222 14.6799 17.3885 13.607 19.472 13.195C19.7088 13.1483 19.9438 13.1478 20.1768 13.1935C20.4096 13.2392 20.603 13.3577 20.757 13.549C20.9317 13.7402 21.0367 13.9552 21.072 14.1942C21.1073 14.4332 21.1 14.6754 21.05 14.9208C20.6167 16.9751 19.5341 18.7143 17.8023 20.1385C16.0703 21.5628 14.1362 22.275 12 22.275ZM14.0125 20.2625C15.3458 19.8332 16.4542 19.1762 17.3375 18.2917C18.2208 17.4072 18.8792 16.2975 19.3125 14.9625C17.9792 15.3998 16.8718 16.0633 15.9905 16.953C15.1092 17.8427 14.4498 18.9458 14.0125 20.2625ZM12 22.275C12 20.1015 11.2756 18.1467 9.82675 16.4107C8.37775 14.6749 6.6115 13.601 4.528 13.189C4.29117 13.1423 4.05625 13.1428 3.82325 13.1905C3.59042 13.2382 3.397 13.3577 3.243 13.549C3.06833 13.7402 2.96333 13.9581 2.928 14.2027C2.89267 14.4472 2.9 14.6949 2.95 14.9458C3.38333 16.9961 4.46592 18.7302 6.19775 20.148C7.92975 21.566 9.86383 22.275 12 22.275ZM9.9875 20.2625C8.65417 19.8332 7.54583 19.1762 6.6625 18.2917C5.77917 17.4072 5.12083 16.2975 4.6875 14.9625C6.02083 15.3998 7.12817 16.0633 8.0095 16.953C8.89083 17.8427 9.55017 18.9458 9.9875 20.2625ZM12.0088 8.8565C12.3409 8.8565 12.6248 8.73558 12.8605 8.49375C13.0963 8.25192 13.2143 7.96617 13.2143 7.6365C13.2143 7.30233 13.0973 7.01842 12.8633 6.78475C12.6294 6.55108 12.3414 6.43425 11.9992 6.43425C11.6734 6.43425 11.3907 6.55008 11.1512 6.78175C10.9116 7.01325 10.7918 7.30133 10.7918 7.646C10.7918 7.97 10.9116 8.25275 11.1512 8.49425C11.3907 8.73575 11.6766 8.8565 12.0088 8.8565ZM12 14.5898C11.3742 14.5898 10.8099 14.4056 10.3073 14.0372C9.80458 13.6689 9.43458 13.1851 9.19725 12.5857C9.09325 12.5857 8.98583 12.5899 8.875 12.5982C8.76433 12.6066 8.65742 12.6107 8.55425 12.6107C7.73342 12.6107 7.03092 12.3189 6.44675 11.7353C5.86275 11.1514 5.57075 10.4493 5.57075 9.629C5.57075 9.2865 5.63942 8.94775 5.77675 8.61275C5.91392 8.27775 6.1115 7.95625 6.3695 7.64825C6.12817 7.34042 5.93892 7.0195 5.80175 6.6855C5.66442 6.3515 5.59575 6.01592 5.59575 5.67875C5.59575 4.84725 5.88475 4.13958 6.46275 3.55575C7.04075 2.97192 7.73892 2.68 8.55725 2.68C8.65925 2.68 8.76542 2.68417 8.87575 2.6925C8.98608 2.70083 9.09325 2.705 9.19725 2.705C9.43458 2.10567 9.80458 1.62183 10.3073 1.2535C10.8098 0.885167 11.3738 0.700999 11.9995 0.700999C12.6252 0.700999 13.1904 0.885167 13.6952 1.2535C14.2002 1.62183 14.5723 2.10567 14.8115 2.705C14.9137 2.705 15.0189 2.70083 15.1273 2.6925C15.2356 2.68417 15.3418 2.68 15.4458 2.68C16.2663 2.68 16.9645 2.97233 17.5405 3.557C18.1163 4.14183 18.4042 4.84517 18.4042 5.667C18.4042 6.01 18.3397 6.349 18.2107 6.684C18.0819 7.019 17.8905 7.34042 17.6365 7.64825C17.8738 7.95625 18.0611 8.2775 18.1982 8.612C18.3356 8.9465 18.4042 9.28192 18.4042 9.61825C18.4042 10.4474 18.1163 11.1535 17.5405 11.7365C16.9645 12.3193 16.2663 12.6107 15.4458 12.6107C15.3418 12.6107 15.2357 12.6066 15.1277 12.5982C15.0196 12.5899 14.9132 12.5857 14.8087 12.5857C14.5714 13.1851 14.2007 13.6689 13.6967 14.0372C13.1929 14.4056 12.6273 14.5898 12 14.5898ZM15.3908 11.0092C15.7741 11.0092 16.1044 10.8706 16.3818 10.5932C16.6591 10.3161 16.7977 9.98242 16.7977 9.59225C16.7977 9.30825 16.7227 9.06008 16.5727 8.84775C16.4227 8.63542 16.2233 8.46258 15.9745 8.32925L14.7865 7.75425C14.7488 7.99158 14.6973 8.21375 14.6318 8.42075C14.5663 8.62775 14.4829 8.82525 14.3818 9.01325C14.2803 9.20258 14.1588 9.37958 14.0173 9.54425C13.8758 9.70892 13.7113 9.85792 13.524 9.99125L14.5878 10.7488C14.7013 10.8351 14.8225 10.9001 14.9515 10.9437C15.0805 10.9874 15.2269 11.0092 15.3908 11.0092ZM14.7857 7.5365L15.9742 6.9615C16.2232 6.83217 16.4196 6.6545 16.5633 6.4285C16.7069 6.20267 16.7788 5.95942 16.7788 5.69875C16.7788 5.31358 16.6453 4.98208 16.3785 4.70425C16.1118 4.42642 15.7802 4.2875 15.3835 4.2875C15.2295 4.2875 15.089 4.30875 14.962 4.35125C14.835 4.39358 14.707 4.45525 14.578 4.53625L13.474 5.2995C13.6613 5.43283 13.83 5.5795 13.98 5.7395C14.13 5.8995 14.255 6.0715 14.355 6.2555C14.4755 6.43883 14.5682 6.63567 14.633 6.846C14.6977 7.05633 14.7486 7.2865 14.7857 7.5365ZM10.767 5.1625C11.0017 5.0625 11.2238 4.9875 11.4335 4.9375C11.6432 4.8875 11.832 4.8625 12 4.8625C12.1667 4.8625 12.3552 4.8875 12.5655 4.9375C12.7758 4.9875 12.9997 5.0625 13.237 5.1625L13.412 3.6065C13.4493 3.2525 13.3163 2.95367 13.0128 2.71C12.7093 2.46633 12.3761 2.3445 12.0132 2.3445C11.6504 2.3445 11.3138 2.46808 11.0035 2.71525C10.6932 2.96242 10.5567 3.2585 10.594 3.6035L10.767 5.1625ZM12.0128 12.9522C12.3749 12.9522 12.708 12.8304 13.012 12.5868C13.316 12.3431 13.4493 12.0422 13.412 11.6842L13.237 10.1283C12.9997 10.2283 12.7755 10.3042 12.5645 10.3562C12.3535 10.4082 12.1653 10.4342 12 10.4342C11.8333 10.4342 11.6448 10.4082 11.4345 10.3562C11.2242 10.3042 11.0017 10.2283 10.767 10.1283L10.594 11.6872C10.5567 12.0322 10.6932 12.3293 11.0037 12.5785C11.3142 12.8277 11.6506 12.9522 12.0128 12.9522ZM9.22 7.5365C9.25333 7.2865 9.30333 7.05633 9.37 6.846C9.43667 6.63567 9.52242 6.44 9.62725 6.259C9.72792 6.07417 9.84933 5.90142 9.9915 5.74075C10.1338 5.57992 10.2953 5.43283 10.476 5.2995L9.41675 4.54225C9.30225 4.45575 9.18025 4.39167 9.05075 4.35C8.92125 4.30833 8.7735 4.2875 8.6075 4.2875C8.22467 4.2875 7.89475 4.42583 7.61775 4.7025C7.34075 4.97933 7.20225 5.31292 7.20225 5.70325C7.20225 5.96742 7.27725 6.20983 7.42725 6.4305C7.57725 6.65117 7.77925 6.82817 8.03325 6.9615L9.22 7.5365ZM8.6165 10.9783C8.7705 10.9783 8.90992 10.9574 9.03475 10.9158C9.15958 10.8741 9.29 10.8116 9.426 10.7283L10.526 9.99425C10.3387 9.85758 10.171 9.71017 10.023 9.552C9.875 9.394 9.752 9.22258 9.654 9.03775C9.548 8.85275 9.45817 8.65092 9.3845 8.43225C9.31083 8.21342 9.256 7.98742 9.22 7.75425L8.03325 8.32925C7.77925 8.46258 7.58142 8.64175 7.43975 8.86675C7.29808 9.09158 7.22725 9.33367 7.22725 9.593C7.24392 9.982 7.38008 10.3101 7.63575 10.5773C7.89142 10.8446 8.21833 10.9783 8.6165 10.9783Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M12 22.275C12 20.1015 12.7244 18.1477 14.1732 16.4137C15.6222 14.6799 17.3885 13.607 19.472 13.195C19.7088 13.1483 19.9438 13.1478 20.1768 13.1935C20.4096 13.2392 20.603 13.3577 20.757 13.549C20.9317 13.7402 21.0367 13.9552 21.072 14.1942C21.1073 14.4332 21.1 14.6754 21.05 14.9208C20.6167 16.9751 19.5341 18.7143 17.8023 20.1385C16.0703 21.5628 14.1362 22.275 12 22.275ZM14.0125 20.2625C15.3458 19.8332 16.4542 19.1762 17.3375 18.2917C18.2208 17.4072 18.8792 16.2975 19.3125 14.9625C17.9792 15.3998 16.8718 16.0633 15.9905 16.953C15.1092 17.8427 14.4498 18.9458 14.0125 20.2625ZM12 22.275C12 20.1015 11.2756 18.1467 9.82675 16.4107C8.37775 14.6749 6.6115 13.601 4.528 13.189C4.29117 13.1423 4.05625 13.1428 3.82325 13.1905C3.59042 13.2382 3.397 13.3577 3.243 13.549C3.06833 13.7402 2.96333 13.9581 2.928 14.2027C2.89267 14.4472 2.9 14.6949 2.95 14.9458C3.38333 16.9961 4.46592 18.7302 6.19775 20.148C7.92975 21.566 9.86383 22.275 12 22.275ZM9.9875 20.2625C8.65417 19.8332 7.54583 19.1762 6.6625 18.2917C5.77917 17.4072 5.12083 16.2975 4.6875 14.9625C6.02083 15.3998 7.12817 16.0633 8.0095 16.953C8.89083 17.8427 9.55017 18.9458 9.9875 20.2625ZM12.0088 8.8565C12.3409 8.8565 12.6248 8.73558 12.8605 8.49375C13.0963 8.25192 13.2143 7.96617 13.2143 7.6365C13.2143 7.30233 13.0973 7.01842 12.8633 6.78475C12.6294 6.55108 12.3414 6.43425 11.9992 6.43425C11.6734 6.43425 11.3907 6.55008 11.1512 6.78175C10.9116 7.01325 10.7918 7.30133 10.7918 7.646C10.7918 7.97 10.9116 8.25275 11.1512 8.49425C11.3907 8.73575 11.6766 8.8565 12.0088 8.8565ZM12 14.5898C11.3742 14.5898 10.8099 14.4056 10.3073 14.0372C9.80458 13.6689 9.43458 13.1851 9.19725 12.5857C9.09325 12.5857 8.98583 12.5899 8.875 12.5982C8.76433 12.6066 8.65742 12.6107 8.55425 12.6107C7.73342 12.6107 7.03092 12.3189 6.44675 11.7353C5.86275 11.1514 5.57075 10.4493 5.57075 9.629C5.57075 9.2865 5.63942 8.94775 5.77675 8.61275C5.91392 8.27775 6.1115 7.95625 6.3695 7.64825C6.12817 7.34042 5.93892 7.0195 5.80175 6.6855C5.66442 6.3515 5.59575 6.01592 5.59575 5.67875C5.59575 4.84725 5.88475 4.13958 6.46275 3.55575C7.04075 2.97192 7.73892 2.68 8.55725 2.68C8.65925 2.68 8.76542 2.68417 8.87575 2.6925C8.98608 2.70083 9.09325 2.705 9.19725 2.705C9.43458 2.10567 9.80458 1.62183 10.3073 1.2535C10.8098 0.885167 11.3738 0.700999 11.9995 0.700999C12.6252 0.700999 13.1904 0.885167 13.6952 1.2535C14.2002 1.62183 14.5723 2.10567 14.8115 2.705C14.9137 2.705 15.0189 2.70083 15.1273 2.6925C15.2356 2.68417 15.3418 2.68 15.4458 2.68C16.2663 2.68 16.9645 2.97233 17.5405 3.557C18.1163 4.14183 18.4042 4.84517 18.4042 5.667C18.4042 6.01 18.3397 6.349 18.2107 6.684C18.0819 7.019 17.8905 7.34042 17.6365 7.64825C17.8738 7.95625 18.0611 8.2775 18.1982 8.612C18.3356 8.9465 18.4042 9.28192 18.4042 9.61825C18.4042 10.4474 18.1163 11.1535 17.5405 11.7365C16.9645 12.3193 16.2663 12.6107 15.4458 12.6107C15.3418 12.6107 15.2357 12.6066 15.1277 12.5982C15.0196 12.5899 14.9132 12.5857 14.8087 12.5857C14.5714 13.1851 14.2007 13.6689 13.6967 14.0372C13.1929 14.4056 12.6273 14.5898 12 14.5898ZM15.3908 11.0092C15.7741 11.0092 16.1044 10.8706 16.3818 10.5932C16.6591 10.3161 16.7977 9.98242 16.7977 9.59225C16.7977 9.30825 16.7227 9.06008 16.5727 8.84775C16.4227 8.63542 16.2233 8.46258 15.9745 8.32925L14.7865 7.75425C14.7488 7.99158 14.6973 8.21375 14.6318 8.42075C14.5663 8.62775 14.4829 8.82525 14.3818 9.01325C14.2803 9.20258 14.1588 9.37958 14.0173 9.54425C13.8758 9.70892 13.7113 9.85792 13.524 9.99125L14.5878 10.7488C14.7013 10.8351 14.8225 10.9001 14.9515 10.9437C15.0805 10.9874 15.2269 11.0092 15.3908 11.0092ZM14.7857 7.5365L15.9742 6.9615C16.2232 6.83217 16.4196 6.6545 16.5633 6.4285C16.7069 6.20267 16.7788 5.95942 16.7788 5.69875C16.7788 5.31358 16.6453 4.98208 16.3785 4.70425C16.1118 4.42642 15.7802 4.2875 15.3835 4.2875C15.2295 4.2875 15.089 4.30875 14.962 4.35125C14.835 4.39358 14.707 4.45525 14.578 4.53625L13.474 5.2995C13.6613 5.43283 13.83 5.5795 13.98 5.7395C14.13 5.8995 14.255 6.0715 14.355 6.2555C14.4755 6.43883 14.5682 6.63567 14.633 6.846C14.6977 7.05633 14.7486 7.2865 14.7857 7.5365ZM10.767 5.1625C11.0017 5.0625 11.2238 4.9875 11.4335 4.9375C11.6432 4.8875 11.832 4.8625 12 4.8625C12.1667 4.8625 12.3552 4.8875 12.5655 4.9375C12.7758 4.9875 12.9997 5.0625 13.237 5.1625L13.412 3.6065C13.4493 3.2525 13.3163 2.95367 13.0128 2.71C12.7093 2.46633 12.3761 2.3445 12.0132 2.3445C11.6504 2.3445 11.3138 2.46808 11.0035 2.71525C10.6932 2.96242 10.5567 3.2585 10.594 3.6035L10.767 5.1625ZM12.0128 12.9522C12.3749 12.9522 12.708 12.8304 13.012 12.5868C13.316 12.3431 13.4493 12.0422 13.412 11.6842L13.237 10.1283C12.9997 10.2283 12.7755 10.3042 12.5645 10.3562C12.3535 10.4082 12.1653 10.4342 12 10.4342C11.8333 10.4342 11.6448 10.4082 11.4345 10.3562C11.2242 10.3042 11.0017 10.2283 10.767 10.1283L10.594 11.6872C10.5567 12.0322 10.6932 12.3293 11.0037 12.5785C11.3142 12.8277 11.6506 12.9522 12.0128 12.9522ZM9.22 7.5365C9.25333 7.2865 9.30333 7.05633 9.37 6.846C9.43667 6.63567 9.52242 6.44 9.62725 6.259C9.72792 6.07417 9.84933 5.90142 9.9915 5.74075C10.1338 5.57992 10.2953 5.43283 10.476 5.2995L9.41675 4.54225C9.30225 4.45575 9.18025 4.39167 9.05075 4.35C8.92125 4.30833 8.7735 4.2875 8.6075 4.2875C8.22467 4.2875 7.89475 4.42583 7.61775 4.7025C7.34075 4.97933 7.20225 5.31292 7.20225 5.70325C7.20225 5.96742 7.27725 6.20983 7.42725 6.4305C7.57725 6.65117 7.77925 6.82817 8.03325 6.9615L9.22 7.5365ZM8.6165 10.9783C8.7705 10.9783 8.90992 10.9574 9.03475 10.9158C9.15958 10.8741 9.29 10.8116 9.426 10.7283L10.526 9.99425C10.3387 9.85758 10.171 9.71017 10.023 9.552C9.875 9.394 9.752 9.22258 9.654 9.03775C9.548 8.85275 9.45817 8.65092 9.3845 8.43225C9.31083 8.21342 9.256 7.98742 9.22 7.75425L8.03325 8.32925C7.77925 8.46258 7.58142 8.64175 7.43975 8.86675C7.29808 9.09158 7.22725 9.33367 7.22725 9.593C7.24392 9.982 7.38008 10.3101 7.63575 10.5773C7.89142 10.8446 8.21833 10.9783 8.6165 10.9783Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); }
.fz-usecase-card_icon[data-icon="package"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M11.25 19.5693V12.4308L5 8.8115V15.777C5 15.8282 5.01283 15.8763 5.0385 15.9213C5.06417 15.9661 5.10258 16.0045 5.15375 16.0365L11.25 19.5693ZM12.75 19.5693L18.8462 16.0365C18.8974 16.0045 18.9358 15.9661 18.9615 15.9213C18.9872 15.8763 19 15.8282 19 15.777V8.8115L12.75 12.4308V19.5693ZM11.0963 21.2057L4.404 17.3537C4.11933 17.1897 3.8975 16.9706 3.7385 16.6963C3.5795 16.4218 3.5 16.1204 3.5 15.7923V8.20775C3.5 7.87958 3.5795 7.57825 3.7385 7.30375C3.8975 7.02942 4.11933 6.81025 4.404 6.64625L11.0963 2.79425C11.3808 2.63008 11.682 2.548 12 2.548C12.318 2.548 12.6193 2.63008 12.9038 2.79425L19.596 6.64625C19.8807 6.81025 20.1025 7.02942 20.2615 7.30375C20.4205 7.57825 20.5 7.87958 20.5 8.20775V15.7923C20.5 16.1204 20.4205 16.4218 20.2615 16.6963C20.1025 16.9706 19.8807 17.1897 19.596 17.3537L12.9038 21.2057C12.6193 21.3699 12.318 21.452 12 21.452C11.682 21.452 11.3808 21.3699 11.0963 21.2057ZM15.8557 8.9L18.175 7.56925L12.1537 4.0865C12.1026 4.0545 12.0513 4.0385 12 4.0385C11.9487 4.0385 11.8974 4.0545 11.8463 4.0865L9.675 5.3365L15.8557 8.9ZM12 11.1385L14.325 9.79225L8.15 6.223L5.825 7.56925L12 11.1385Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M11.25 19.5693V12.4308L5 8.8115V15.777C5 15.8282 5.01283 15.8763 5.0385 15.9213C5.06417 15.9661 5.10258 16.0045 5.15375 16.0365L11.25 19.5693ZM12.75 19.5693L18.8462 16.0365C18.8974 16.0045 18.9358 15.9661 18.9615 15.9213C18.9872 15.8763 19 15.8282 19 15.777V8.8115L12.75 12.4308V19.5693ZM11.0963 21.2057L4.404 17.3537C4.11933 17.1897 3.8975 16.9706 3.7385 16.6963C3.5795 16.4218 3.5 16.1204 3.5 15.7923V8.20775C3.5 7.87958 3.5795 7.57825 3.7385 7.30375C3.8975 7.02942 4.11933 6.81025 4.404 6.64625L11.0963 2.79425C11.3808 2.63008 11.682 2.548 12 2.548C12.318 2.548 12.6193 2.63008 12.9038 2.79425L19.596 6.64625C19.8807 6.81025 20.1025 7.02942 20.2615 7.30375C20.4205 7.57825 20.5 7.87958 20.5 8.20775V15.7923C20.5 16.1204 20.4205 16.4218 20.2615 16.6963C20.1025 16.9706 19.8807 17.1897 19.596 17.3537L12.9038 21.2057C12.6193 21.3699 12.318 21.452 12 21.452C11.682 21.452 11.3808 21.3699 11.0963 21.2057ZM15.8557 8.9L18.175 7.56925L12.1537 4.0865C12.1026 4.0545 12.0513 4.0385 12 4.0385C11.9487 4.0385 11.8974 4.0545 11.8463 4.0865L9.675 5.3365L15.8557 8.9ZM12 11.1385L14.325 9.79225L8.15 6.223L5.825 7.56925L12 11.1385Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); }
.fz-usecase-card_icon[data-icon="recycling"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M9.4115 9.45L11.473 6.0635L10.1038 3.79625C9.92308 3.48858 9.65808 3.33475 9.30875 3.33475C8.95942 3.33475 8.69275 3.48875 8.50875 3.79675L6.25575 7.5635L9.4115 9.45ZM18.3448 15.7308L16.2943 12.3192L19.5 10.473L20.975 12.9365C21.139 13.2007 21.231 13.4949 21.251 13.8192C21.2708 14.1436 21.2038 14.4429 21.05 14.7173C20.8962 15.0314 20.6679 15.2788 20.3653 15.4595C20.0628 15.6403 19.7348 15.7308 19.3815 15.7308H18.3448ZM15.6923 22.1923L12 18.5L15.6923 14.8077V16.6537H20.0768L18.7385 19.3307C18.5692 19.6384 18.3383 19.8846 18.046 20.0693C17.7538 20.2538 17.4308 20.346 17.077 20.346H15.6923V22.1923ZM6.75825 20.346C6.45025 20.346 6.16992 20.2666 5.91725 20.1078C5.66475 19.9488 5.47825 19.7375 5.35775 19.474C5.23725 19.226 5.17958 18.9673 5.18475 18.698C5.18975 18.4288 5.2615 18.1787 5.4 17.9477L6.18475 16.6537H10.1538V20.346H6.75825ZM4.475 17.7173L2.975 14.7173C2.8315 14.4366 2.7655 14.1382 2.777 13.822C2.7885 13.506 2.87808 13.2108 3.04575 12.9365L3.4115 12.3192L1.84625 11.3713L6.898 10.102L8.16725 15.1787L6.577 14.2058L4.475 17.7173ZM16.9365 9.82125L11.8828 8.55225L13.475 7.6065L10.5905 2.80775H13.8443C14.1673 2.80775 14.4711 2.88833 14.7558 3.0495C15.0404 3.21067 15.2673 3.42942 15.4365 3.70575L16.6403 5.71725L18.2058 4.74425L16.9365 9.82125Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M9.4115 9.45L11.473 6.0635L10.1038 3.79625C9.92308 3.48858 9.65808 3.33475 9.30875 3.33475C8.95942 3.33475 8.69275 3.48875 8.50875 3.79675L6.25575 7.5635L9.4115 9.45ZM18.3448 15.7308L16.2943 12.3192L19.5 10.473L20.975 12.9365C21.139 13.2007 21.231 13.4949 21.251 13.8192C21.2708 14.1436 21.2038 14.4429 21.05 14.7173C20.8962 15.0314 20.6679 15.2788 20.3653 15.4595C20.0628 15.6403 19.7348 15.7308 19.3815 15.7308H18.3448ZM15.6923 22.1923L12 18.5L15.6923 14.8077V16.6537H20.0768L18.7385 19.3307C18.5692 19.6384 18.3383 19.8846 18.046 20.0693C17.7538 20.2538 17.4308 20.346 17.077 20.346H15.6923V22.1923ZM6.75825 20.346C6.45025 20.346 6.16992 20.2666 5.91725 20.1078C5.66475 19.9488 5.47825 19.7375 5.35775 19.474C5.23725 19.226 5.17958 18.9673 5.18475 18.698C5.18975 18.4288 5.2615 18.1787 5.4 17.9477L6.18475 16.6537H10.1538V20.346H6.75825ZM4.475 17.7173L2.975 14.7173C2.8315 14.4366 2.7655 14.1382 2.777 13.822C2.7885 13.506 2.87808 13.2108 3.04575 12.9365L3.4115 12.3192L1.84625 11.3713L6.898 10.102L8.16725 15.1787L6.577 14.2058L4.475 17.7173ZM16.9365 9.82125L11.8828 8.55225L13.475 7.6065L10.5905 2.80775H13.8443C14.1673 2.80775 14.4711 2.88833 14.7558 3.0495C15.0404 3.21067 15.2673 3.42942 15.4365 3.70575L16.6403 5.71725L18.2058 4.74425L16.9365 9.82125Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); }
.fz-usecase-card_icon[data-icon="report"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16C13 15.7167 12.9042 15.4792 12.7125 15.2875C12.5208 15.0958 12.2833 15 12 15C11.7167 15 11.4792 15.0958 11.2875 15.2875C11.0958 15.4792 11 15.7167 11 16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM11 13H13V7H11V13ZM8.25 21L3 15.75V8.25L8.25 3H15.75L21 8.25V15.75L15.75 21H8.25ZM9.1 19H14.9L19 14.9V9.1L14.9 5H9.1L5 9.1V14.9L9.1 19Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16C13 15.7167 12.9042 15.4792 12.7125 15.2875C12.5208 15.0958 12.2833 15 12 15C11.7167 15 11.4792 15.0958 11.2875 15.2875C11.0958 15.4792 11 15.7167 11 16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM11 13H13V7H11V13ZM8.25 21L3 15.75V8.25L8.25 3H15.75L21 8.25V15.75L15.75 21H8.25ZM9.1 19H14.9L19 14.9V9.1L14.9 5H9.1L5 9.1V14.9L9.1 19Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); }
/* `savings` ist der Layer-Name aus dem Icon-Export, die Figma-Variante
   heisst `Property 1=Pig`. Zwei Namen, EIN Symbol: ein Schwein im Profil,
   fuer die Karte `Metzgerei & Fleisch`.
   Am 18. Sep gegen Figma geprueft, weil der Schluessel nach Sparschwein
   klingt: Variante der Instanz (keine Overrides), Pfaddaten und beide
   Renderings verglichen - identisch. Der Name taeuscht, das Symbol
   stimmt. Nicht "korrigieren". */
.fz-usecase-card_icon[data-icon="savings"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M5.71425 21.1495C5.30392 21.1495 4.91983 21.0142 4.562 20.7435C4.20433 20.473 3.96733 20.1426 3.851 19.7522C3.43433 18.3269 3.09008 17.0967 2.81825 16.0615C2.54625 15.0265 2.3295 14.1165 2.168 13.3315C2.0065 12.5465 1.89233 11.8513 1.8255 11.246C1.7585 10.6405 1.725 10.0585 1.725 9.5C1.725 7.926 2.27292 6.58992 3.36875 5.49175C4.46442 4.39358 5.79983 3.8445 7.375 3.8445H12.5268C12.9868 3.2445 13.5693 2.76117 14.2745 2.3945C14.9797 2.02783 15.7534 1.8445 16.5958 1.8445C17.0681 1.8445 17.4611 2.00433 17.7748 2.324C18.0883 2.6435 18.245 3.0315 18.245 3.488C18.245 3.59433 18.2325 3.70058 18.2075 3.80675C18.1825 3.91292 18.1533 4.01033 18.12 4.099C18.0573 4.26633 17.9988 4.43617 17.9445 4.6085C17.8902 4.781 17.8463 4.97058 17.813 5.17725L19.9805 7.3445H21.4233C21.6638 7.3445 21.8658 7.4275 22.0295 7.5935C22.1932 7.75933 22.275 7.96225 22.275 8.20225V13.955C22.275 14.1508 22.2222 14.324 22.1165 14.4745C22.011 14.6252 21.8649 14.7275 21.6783 14.7815L19.392 15.527L18.076 19.931C17.9648 20.2973 17.7592 20.592 17.459 20.815C17.159 21.038 16.8156 21.1495 16.4288 21.1495H13.6555C13.2083 21.1495 12.8196 21.0036 12.4893 20.7117C12.1591 20.4201 11.9781 20.066 11.9463 19.6495V19.1495H10.018V19.6495C9.986 20.066 9.8055 20.4201 9.4765 20.7117C9.1475 21.0036 8.76025 21.1495 8.31475 21.1495H5.71425ZM5.54125 19.4462H8.3445V17.4462H13.6195V19.4462H16.4228L17.9955 14.203L20.5658 13.3393V9.05375H19.2658L16.0658 5.85375C16.0824 5.57842 16.1283 5.23658 16.2033 4.82825C16.2783 4.41992 16.3824 3.96375 16.5158 3.45975C15.8111 3.64708 15.1858 3.92608 14.6398 4.29675C14.0938 4.66742 13.6947 5.08642 13.4425 5.55375H7.3745C6.2845 5.55375 5.35433 5.93908 4.584 6.70975C3.8135 7.48025 3.42825 8.4105 3.42825 9.5005C3.42825 10.2 3.61058 11.4167 3.97525 13.1505C4.33992 14.8842 4.86192 16.9827 5.54125 19.4462ZM15.994 11.1675C16.303 11.1675 16.5638 11.0617 16.7765 10.85C16.9893 10.6383 17.0958 10.3769 17.0958 10.0658C17.0958 9.75458 16.9892 9.49317 16.776 9.2815C16.5628 9.07 16.3014 8.96425 15.9918 8.96425C15.6821 8.96425 15.4204 9.07 15.2068 9.2815C14.9933 9.49317 14.8865 9.75458 14.8865 10.0658C14.8865 10.3769 14.9934 10.6383 15.2073 10.85C15.4211 11.0617 15.6833 11.1675 15.994 11.1675Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M5.71425 21.1495C5.30392 21.1495 4.91983 21.0142 4.562 20.7435C4.20433 20.473 3.96733 20.1426 3.851 19.7522C3.43433 18.3269 3.09008 17.0967 2.81825 16.0615C2.54625 15.0265 2.3295 14.1165 2.168 13.3315C2.0065 12.5465 1.89233 11.8513 1.8255 11.246C1.7585 10.6405 1.725 10.0585 1.725 9.5C1.725 7.926 2.27292 6.58992 3.36875 5.49175C4.46442 4.39358 5.79983 3.8445 7.375 3.8445H12.5268C12.9868 3.2445 13.5693 2.76117 14.2745 2.3945C14.9797 2.02783 15.7534 1.8445 16.5958 1.8445C17.0681 1.8445 17.4611 2.00433 17.7748 2.324C18.0883 2.6435 18.245 3.0315 18.245 3.488C18.245 3.59433 18.2325 3.70058 18.2075 3.80675C18.1825 3.91292 18.1533 4.01033 18.12 4.099C18.0573 4.26633 17.9988 4.43617 17.9445 4.6085C17.8902 4.781 17.8463 4.97058 17.813 5.17725L19.9805 7.3445H21.4233C21.6638 7.3445 21.8658 7.4275 22.0295 7.5935C22.1932 7.75933 22.275 7.96225 22.275 8.20225V13.955C22.275 14.1508 22.2222 14.324 22.1165 14.4745C22.011 14.6252 21.8649 14.7275 21.6783 14.7815L19.392 15.527L18.076 19.931C17.9648 20.2973 17.7592 20.592 17.459 20.815C17.159 21.038 16.8156 21.1495 16.4288 21.1495H13.6555C13.2083 21.1495 12.8196 21.0036 12.4893 20.7117C12.1591 20.4201 11.9781 20.066 11.9463 19.6495V19.1495H10.018V19.6495C9.986 20.066 9.8055 20.4201 9.4765 20.7117C9.1475 21.0036 8.76025 21.1495 8.31475 21.1495H5.71425ZM5.54125 19.4462H8.3445V17.4462H13.6195V19.4462H16.4228L17.9955 14.203L20.5658 13.3393V9.05375H19.2658L16.0658 5.85375C16.0824 5.57842 16.1283 5.23658 16.2033 4.82825C16.2783 4.41992 16.3824 3.96375 16.5158 3.45975C15.8111 3.64708 15.1858 3.92608 14.6398 4.29675C14.0938 4.66742 13.6947 5.08642 13.4425 5.55375H7.3745C6.2845 5.55375 5.35433 5.93908 4.584 6.70975C3.8135 7.48025 3.42825 8.4105 3.42825 9.5005C3.42825 10.2 3.61058 11.4167 3.97525 13.1505C4.33992 14.8842 4.86192 16.9827 5.54125 19.4462ZM15.994 11.1675C16.303 11.1675 16.5638 11.0617 16.7765 10.85C16.9893 10.6383 17.0958 10.3769 17.0958 10.0658C17.0958 9.75458 16.9892 9.49317 16.776 9.2815C16.5628 9.07 16.3014 8.96425 15.9918 8.96425C15.6821 8.96425 15.4204 9.07 15.2068 9.2815C14.9933 9.49317 14.8865 9.75458 14.8865 10.0658C14.8865 10.3769 14.9934 10.6383 15.2073 10.85C15.4211 11.0617 15.6833 11.1675 15.994 11.1675Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); }
.fz-usecase-card_icon[data-icon="set-meal"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M3 15C2.45 15 1.97917 14.8042 1.5875 14.4125C1.19583 14.0208 1 13.55 1 13V4C1 3.45 1.19583 2.97917 1.5875 2.5875C1.97917 2.19583 2.45 2 3 2H21C21.55 2 22.0208 2.19583 22.4125 2.5875C22.8042 2.97917 23 3.45 23 4V13C23 13.55 22.8042 14.0208 22.4125 14.4125C22.0208 14.8042 21.55 15 21 15H3ZM3 4V13H21V4H3ZM3.075 18.5L3 17L20.975 16.05L21.05 17.55L3.075 18.5ZM3 20.975V19.475H21V20.975H3ZM10.25 11.5C11.4833 11.5 12.6708 11.2833 13.8125 10.85C14.9542 10.4167 15.95 9.75 16.8 8.85C16.9 9.55 17.2667 10.0833 17.9 10.45C18.5333 10.8167 19.2333 11 20 11V6C19.2333 6 18.5333 6.1875 17.9 6.5625C17.2667 6.9375 16.9 7.48333 16.8 8.2C15.9167 7.33333 14.9125 6.66667 13.7875 6.2C12.6625 5.73333 11.4833 5.5 10.25 5.5C8.93333 5.5 7.66667 5.72917 6.45 6.1875C5.23333 6.64583 4.25 7.41667 3.5 8.5C4.25 9.58333 5.23333 10.3542 6.45 10.8125C7.66667 11.2708 8.93333 11.5 10.25 11.5Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M3 15C2.45 15 1.97917 14.8042 1.5875 14.4125C1.19583 14.0208 1 13.55 1 13V4C1 3.45 1.19583 2.97917 1.5875 2.5875C1.97917 2.19583 2.45 2 3 2H21C21.55 2 22.0208 2.19583 22.4125 2.5875C22.8042 2.97917 23 3.45 23 4V13C23 13.55 22.8042 14.0208 22.4125 14.4125C22.0208 14.8042 21.55 15 21 15H3ZM3 4V13H21V4H3ZM3.075 18.5L3 17L20.975 16.05L21.05 17.55L3.075 18.5ZM3 20.975V19.475H21V20.975H3ZM10.25 11.5C11.4833 11.5 12.6708 11.2833 13.8125 10.85C14.9542 10.4167 15.95 9.75 16.8 8.85C16.9 9.55 17.2667 10.0833 17.9 10.45C18.5333 10.8167 19.2333 11 20 11V6C19.2333 6 18.5333 6.1875 17.9 6.5625C17.2667 6.9375 16.9 7.48333 16.8 8.2C15.9167 7.33333 14.9125 6.66667 13.7875 6.2C12.6625 5.73333 11.4833 5.5 10.25 5.5C8.93333 5.5 7.66667 5.72917 6.45 6.1875C5.23333 6.64583 4.25 7.41667 3.5 8.5C4.25 9.58333 5.23333 10.3542 6.45 10.8125C7.66667 11.2708 8.93333 11.5 10.25 11.5Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); }
.fz-usecase-card_icon[data-icon="snowflake"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg transform='translate(0.0000 0.0000) scale(1.192162)'%3E %3Cpath d='M9.25 15.3583L6.1385 18.4635C5.99333 18.6128 5.80658 18.6865 5.57825 18.6845C5.34992 18.6825 5.15483 18.6088 4.993 18.4635C4.831 18.3017 4.75 18.1066 4.75 17.8783C4.75 17.6499 4.831 17.4548 4.993 17.293L9.25 13.0358V10.8815H7.09575L2.9135 15.0575C2.76833 15.2068 2.58158 15.2857 2.35325 15.294C2.12492 15.3023 1.92983 15.2318 1.768 15.0825C1.602 14.9207 1.51583 14.7266 1.5095 14.5003C1.50317 14.2739 1.58933 14.0715 1.768 13.893L4.77325 10.8815H0.79075C0.57075 10.8815 0.384 10.8037 0.2305 10.648C0.0768332 10.4925 0 10.2984 0 10.0658C0 9.84575 0.0778332 9.65483 0.2335 9.493C0.389 9.331 0.583083 9.25 0.81575 9.25H4.77325L1.668 6.1635C1.502 6.00167 1.42 5.80658 1.422 5.57825C1.424 5.34992 1.506 5.15483 1.668 4.993C1.82983 4.831 2.02492 4.75 2.25325 4.75C2.48158 4.75 2.67667 4.831 2.8385 4.993L7.09575 9.25H9.25V7.06475L5.074 2.9135C4.92467 2.76833 4.85 2.58158 4.85 2.35325C4.85 2.12492 4.92467 1.92983 5.074 1.768C5.23583 1.602 5.42992 1.519 5.65625 1.519C5.88258 1.519 6.085 1.602 6.2635 1.768L9.25 4.74825V0.81575C9.25 0.59575 9.32783 0.404834 9.4835 0.243001C9.639 0.0810008 9.83308 0 10.0658 0C10.2858 0 10.4767 0.0810008 10.6385 0.243001C10.8005 0.404834 10.8815 0.59575 10.8815 0.81575V4.74825L13.968 1.668C14.1298 1.502 14.3249 1.42 14.5533 1.422C14.7816 1.424 14.9767 1.506 15.1385 1.668C15.2838 1.82983 15.3565 2.02492 15.3565 2.25325C15.3565 2.48158 15.2755 2.67667 15.1135 2.8385L10.8815 7.06475V9.25H13.0667L17.243 5.068C17.3882 4.92267 17.5749 4.85 17.8033 4.85C18.0316 4.85 18.2267 4.92267 18.3885 5.068C18.5545 5.23383 18.6375 5.42992 18.6375 5.65625C18.6375 5.88258 18.5545 6.07667 18.3885 6.2385L15.3833 9.25H19.3158C19.5358 9.25 19.7267 9.331 19.8885 9.493C20.0505 9.65483 20.1315 9.84575 20.1315 10.0658C20.1315 10.2984 20.0505 10.4925 19.8885 10.648C19.7267 10.8037 19.5358 10.8815 19.3158 10.8815H15.3833L18.4385 13.993C18.6045 14.1382 18.6865 14.3249 18.6845 14.5533C18.6825 14.7816 18.6005 14.9683 18.4385 15.1135C18.2893 15.2922 18.1016 15.3815 17.8753 15.3815C17.6489 15.3815 17.4548 15.3005 17.293 15.1385L13.0667 10.8815H10.8815V13.0358L15.1385 17.343C15.3005 17.4882 15.3815 17.6749 15.3815 17.9033C15.3815 18.1316 15.3005 18.3183 15.1385 18.4635C14.9893 18.6422 14.8016 18.7325 14.5753 18.7345C14.3489 18.7365 14.1548 18.6545 13.993 18.4885L10.8815 15.3583V19.3408C10.8815 19.5608 10.8005 19.7475 10.6385 19.901C10.4767 20.0547 10.2858 20.1315 10.0658 20.1315C9.83308 20.1315 9.639 20.0537 9.4835 19.898C9.32783 19.7425 9.25 19.5484 9.25 19.3158V15.3583Z' fill='currentColor'/%3E %3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg transform='translate(0.0000 0.0000) scale(1.192162)'%3E %3Cpath d='M9.25 15.3583L6.1385 18.4635C5.99333 18.6128 5.80658 18.6865 5.57825 18.6845C5.34992 18.6825 5.15483 18.6088 4.993 18.4635C4.831 18.3017 4.75 18.1066 4.75 17.8783C4.75 17.6499 4.831 17.4548 4.993 17.293L9.25 13.0358V10.8815H7.09575L2.9135 15.0575C2.76833 15.2068 2.58158 15.2857 2.35325 15.294C2.12492 15.3023 1.92983 15.2318 1.768 15.0825C1.602 14.9207 1.51583 14.7266 1.5095 14.5003C1.50317 14.2739 1.58933 14.0715 1.768 13.893L4.77325 10.8815H0.79075C0.57075 10.8815 0.384 10.8037 0.2305 10.648C0.0768332 10.4925 0 10.2984 0 10.0658C0 9.84575 0.0778332 9.65483 0.2335 9.493C0.389 9.331 0.583083 9.25 0.81575 9.25H4.77325L1.668 6.1635C1.502 6.00167 1.42 5.80658 1.422 5.57825C1.424 5.34992 1.506 5.15483 1.668 4.993C1.82983 4.831 2.02492 4.75 2.25325 4.75C2.48158 4.75 2.67667 4.831 2.8385 4.993L7.09575 9.25H9.25V7.06475L5.074 2.9135C4.92467 2.76833 4.85 2.58158 4.85 2.35325C4.85 2.12492 4.92467 1.92983 5.074 1.768C5.23583 1.602 5.42992 1.519 5.65625 1.519C5.88258 1.519 6.085 1.602 6.2635 1.768L9.25 4.74825V0.81575C9.25 0.59575 9.32783 0.404834 9.4835 0.243001C9.639 0.0810008 9.83308 0 10.0658 0C10.2858 0 10.4767 0.0810008 10.6385 0.243001C10.8005 0.404834 10.8815 0.59575 10.8815 0.81575V4.74825L13.968 1.668C14.1298 1.502 14.3249 1.42 14.5533 1.422C14.7816 1.424 14.9767 1.506 15.1385 1.668C15.2838 1.82983 15.3565 2.02492 15.3565 2.25325C15.3565 2.48158 15.2755 2.67667 15.1135 2.8385L10.8815 7.06475V9.25H13.0667L17.243 5.068C17.3882 4.92267 17.5749 4.85 17.8033 4.85C18.0316 4.85 18.2267 4.92267 18.3885 5.068C18.5545 5.23383 18.6375 5.42992 18.6375 5.65625C18.6375 5.88258 18.5545 6.07667 18.3885 6.2385L15.3833 9.25H19.3158C19.5358 9.25 19.7267 9.331 19.8885 9.493C20.0505 9.65483 20.1315 9.84575 20.1315 10.0658C20.1315 10.2984 20.0505 10.4925 19.8885 10.648C19.7267 10.8037 19.5358 10.8815 19.3158 10.8815H15.3833L18.4385 13.993C18.6045 14.1382 18.6865 14.3249 18.6845 14.5533C18.6825 14.7816 18.6005 14.9683 18.4385 15.1135C18.2893 15.2922 18.1016 15.3815 17.8753 15.3815C17.6489 15.3815 17.4548 15.3005 17.293 15.1385L13.0667 10.8815H10.8815V13.0358L15.1385 17.343C15.3005 17.4882 15.3815 17.6749 15.3815 17.9033C15.3815 18.1316 15.3005 18.3183 15.1385 18.4635C14.9893 18.6422 14.8016 18.7325 14.5753 18.7345C14.3489 18.7365 14.1548 18.6545 13.993 18.4885L10.8815 15.3583V19.3408C10.8815 19.5608 10.8005 19.7475 10.6385 19.901C10.4767 20.0547 10.2858 20.1315 10.0658 20.1315C9.83308 20.1315 9.639 20.0537 9.4835 19.898C9.32783 19.7425 9.25 19.5484 9.25 19.3158V15.3583Z' fill='currentColor'/%3E %3C/g%3E%3C/svg%3E"); }
.fz-usecase-card_icon[data-icon="sports-bar"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M7.9905 19H15.3077V9H13.25C12.732 9 12.3118 9.1215 11.9895 9.3645C11.667 9.60733 11.2846 9.96983 10.8422 10.452C10.3936 10.9468 9.94517 11.3692 9.497 11.7192C9.049 12.0692 8.54683 12.3103 7.9905 12.4423V19ZM6.4905 20.5V12.4173C5.62383 12.2033 4.90875 11.7718 4.34525 11.123C3.78175 10.4743 3.5 9.68333 3.5 8.75C3.5 7.918 3.743 7.17792 4.229 6.52975C4.71483 5.88175 5.35775 5.42758 6.15775 5.16725C6.52825 4.38008 7.07025 3.74133 7.78375 3.251C8.49708 2.76067 9.31917 2.5155 10.25 2.5155C10.7948 2.5155 11.315 2.60908 11.8105 2.79625C12.306 2.98342 12.7749 3.26292 13.2172 3.63475C13.3711 3.58858 13.5182 3.553 13.6587 3.528C13.7991 3.503 13.9545 3.4905 14.125 3.4905C15.1417 3.4905 16.0016 3.86133 16.7048 4.603C17.4079 5.34467 17.7595 6.22383 17.7595 7.2405C17.7595 7.5815 17.7265 7.89625 17.6605 8.18475C17.5945 8.47308 17.4923 8.74483 17.3538 9H18.596C19.1205 9 19.5689 9.18458 19.9413 9.55375C20.3138 9.92308 20.5 10.3699 20.5 10.8943V16.5095C20.5 17.0338 20.3138 17.4823 19.9413 17.8548C19.5689 18.2273 19.1205 18.4135 18.596 18.4135H16.8077V20.5H6.4905ZM5 8.75C5 9.3705 5.21983 9.90067 5.6595 10.3405C6.09933 10.7802 6.6295 11 7.25 11C7.81533 11 8.29358 10.8283 8.68475 10.4848C9.07575 10.1411 9.47125 9.75258 9.87125 9.31925C10.3136 8.83725 10.786 8.4135 11.2885 8.048C11.791 7.68267 12.4481 7.5 13.2598 7.5H16.2598C16.2981 6.8025 16.107 6.20992 15.6865 5.72225C15.266 5.23442 14.7455 4.9905 14.125 4.9905C13.7982 4.9905 13.5187 5.02858 13.2865 5.10475C13.0545 5.18108 12.9032 5.2385 12.8327 5.277L12.1635 4.7135C11.961 4.55067 11.7011 4.39358 11.3838 4.24225C11.0664 4.09108 10.6885 4.0155 10.25 4.0155C9.67183 4.0155 9.14267 4.16833 8.6625 4.474C8.18233 4.77983 7.81275 5.20008 7.55375 5.73475L7.24225 6.3885L6.5385 6.625C6.0705 6.7775 5.69708 7.04708 5.41825 7.43375C5.13942 7.82025 5 8.259 5 8.75ZM16.8077 16.9135H18.596C18.7115 16.9135 18.8077 16.875 18.8845 16.798C18.9615 16.7212 19 16.625 19 16.5095V10.8943C19 10.7789 18.9615 10.6843 18.8845 10.6105C18.8077 10.5368 18.7115 10.5 18.596 10.5H16.8077V16.9135Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M7.9905 19H15.3077V9H13.25C12.732 9 12.3118 9.1215 11.9895 9.3645C11.667 9.60733 11.2846 9.96983 10.8422 10.452C10.3936 10.9468 9.94517 11.3692 9.497 11.7192C9.049 12.0692 8.54683 12.3103 7.9905 12.4423V19ZM6.4905 20.5V12.4173C5.62383 12.2033 4.90875 11.7718 4.34525 11.123C3.78175 10.4743 3.5 9.68333 3.5 8.75C3.5 7.918 3.743 7.17792 4.229 6.52975C4.71483 5.88175 5.35775 5.42758 6.15775 5.16725C6.52825 4.38008 7.07025 3.74133 7.78375 3.251C8.49708 2.76067 9.31917 2.5155 10.25 2.5155C10.7948 2.5155 11.315 2.60908 11.8105 2.79625C12.306 2.98342 12.7749 3.26292 13.2172 3.63475C13.3711 3.58858 13.5182 3.553 13.6587 3.528C13.7991 3.503 13.9545 3.4905 14.125 3.4905C15.1417 3.4905 16.0016 3.86133 16.7048 4.603C17.4079 5.34467 17.7595 6.22383 17.7595 7.2405C17.7595 7.5815 17.7265 7.89625 17.6605 8.18475C17.5945 8.47308 17.4923 8.74483 17.3538 9H18.596C19.1205 9 19.5689 9.18458 19.9413 9.55375C20.3138 9.92308 20.5 10.3699 20.5 10.8943V16.5095C20.5 17.0338 20.3138 17.4823 19.9413 17.8548C19.5689 18.2273 19.1205 18.4135 18.596 18.4135H16.8077V20.5H6.4905ZM5 8.75C5 9.3705 5.21983 9.90067 5.6595 10.3405C6.09933 10.7802 6.6295 11 7.25 11C7.81533 11 8.29358 10.8283 8.68475 10.4848C9.07575 10.1411 9.47125 9.75258 9.87125 9.31925C10.3136 8.83725 10.786 8.4135 11.2885 8.048C11.791 7.68267 12.4481 7.5 13.2598 7.5H16.2598C16.2981 6.8025 16.107 6.20992 15.6865 5.72225C15.266 5.23442 14.7455 4.9905 14.125 4.9905C13.7982 4.9905 13.5187 5.02858 13.2865 5.10475C13.0545 5.18108 12.9032 5.2385 12.8327 5.277L12.1635 4.7135C11.961 4.55067 11.7011 4.39358 11.3838 4.24225C11.0664 4.09108 10.6885 4.0155 10.25 4.0155C9.67183 4.0155 9.14267 4.16833 8.6625 4.474C8.18233 4.77983 7.81275 5.20008 7.55375 5.73475L7.24225 6.3885L6.5385 6.625C6.0705 6.7775 5.69708 7.04708 5.41825 7.43375C5.13942 7.82025 5 8.259 5 8.75ZM16.8077 16.9135H18.596C18.7115 16.9135 18.8077 16.875 18.8845 16.798C18.9615 16.7212 19 16.625 19 16.5095V10.8943C19 10.7789 18.9615 10.6843 18.8845 10.6105C18.8077 10.5368 18.7115 10.5 18.596 10.5H16.8077V16.9135Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); }
.fz-usecase-card_icon[data-icon="star-shine"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M21.3 18.7L18.3 15.7L19.7 14.3L22.7 17.3L21.3 18.7ZM17.7 6.7L16.3 5.3L19.3 2.3L20.7 3.7L17.7 6.7ZM6.3 6.7L3.3 3.7L4.7 2.3L7.7 5.3L6.3 6.7ZM2.7 18.7L1.3 17.3L4.3 14.3L5.7 15.7L2.7 18.7ZM8.85 16.825L12 14.925L15.15 16.85L14.325 13.25L17.1 10.85L13.45 10.525L12 7.125L10.55 10.5L6.9 10.825L9.675 13.25L8.85 16.825ZM5.825 21L7.45 13.975L2 9.25L9.2 8.625L12 2L14.8 8.625L22 9.25L16.55 13.975L18.175 21L12 17.275L5.825 21Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M21.3 18.7L18.3 15.7L19.7 14.3L22.7 17.3L21.3 18.7ZM17.7 6.7L16.3 5.3L19.3 2.3L20.7 3.7L17.7 6.7ZM6.3 6.7L3.3 3.7L4.7 2.3L7.7 5.3L6.3 6.7ZM2.7 18.7L1.3 17.3L4.3 14.3L5.7 15.7L2.7 18.7ZM8.85 16.825L12 14.925L15.15 16.85L14.325 13.25L17.1 10.85L13.45 10.525L12 7.125L10.55 10.5L6.9 10.825L9.675 13.25L8.85 16.825ZM5.825 21L7.45 13.975L2 9.25L9.2 8.625L12 2L14.8 8.625L22 9.25L16.55 13.975L18.175 21L12 17.275L5.825 21Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); }
.fz-usecase-card_icon[data-icon="sync-alt"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M7.15375 20.6538L2.5 16L7.15375 11.3463L8.223 12.4L5.373 15.25H20.5V16.75H5.373L8.223 19.6L7.15375 20.6538ZM16.8462 12.6537L15.777 11.6L18.627 8.75H3.5V7.25H18.627L15.777 4.4L16.8462 3.34625L21.5 8L16.8462 12.6537Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M7.15375 20.6538L2.5 16L7.15375 11.3463L8.223 12.4L5.373 15.25H20.5V16.75H5.373L8.223 19.6L7.15375 20.6538ZM16.8462 12.6537L15.777 11.6L18.627 8.75H3.5V7.25H18.627L15.777 4.4L16.8462 3.34625L21.5 8L16.8462 12.6537Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); }
.fz-usecase-card_icon[data-icon="tipper"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.4453 4.24219C12.8595 4.24219 13.1953 4.57797 13.1953 4.99219V12.2578H13.4912L13.5391 6.50098C13.5431 6.0902 13.8774 5.75817 14.2891 5.75781H18.2773C18.8323 5.75781 19.3546 6.02088 19.6846 6.46777C20.2226 7.19575 21.3503 8.72321 21.9473 9.53223C22.2972 10.0052 22.4854 10.5781 22.4854 11.166V16.0078C22.4854 16.4718 22.3017 16.9171 21.9727 17.2451C21.6447 17.573 21.1993 17.7578 20.7354 17.7578H19.8545C19.5274 18.9108 18.4686 19.7578 17.2109 19.7578C15.9533 19.7578 14.8945 18.9108 14.5674 17.7578H8.85449C8.52742 18.9108 7.46858 19.7578 6.21094 19.7578C4.9533 19.7578 3.89445 18.9108 3.56738 17.7578H2.73535C2.27149 17.7577 1.82596 17.573 1.49805 17.2451C1.16916 16.9171 0.985352 16.4717 0.985352 16.0078V15.9971C0.982348 15.9698 0.980469 15.9421 0.980469 15.9141V13.0107C0.980469 12.5965 1.31626 12.2607 1.73047 12.2607H7.00098V12.2578H11.6953V4.99219C11.6953 4.57797 12.0311 4.24219 12.4453 4.24219ZM6.21094 15.7578C5.52094 15.7578 4.96094 16.3178 4.96094 17.0078C4.96094 17.6968 5.52094 18.2578 6.21094 18.2578C6.90094 18.2578 7.46094 17.6968 7.46094 17.0078C7.46094 16.3178 6.90094 15.7578 6.21094 15.7578ZM17.2109 15.7578C16.5209 15.7578 15.9609 16.3178 15.9609 17.0078C15.9609 17.6968 16.5209 18.2578 17.2109 18.2578C17.9009 18.2578 18.4609 17.6968 18.4609 17.0078C18.4609 16.3178 17.9009 15.7578 17.2109 15.7578ZM14.9961 11.7578L14.9854 13.0137C14.9824 13.4257 14.6474 13.7578 14.2354 13.7578H7.05762C7.03858 13.7593 7.01941 13.7607 7 13.7607H2.48926V15.2031C2.48843 15.2113 2.48536 15.2192 2.48535 15.2275V16.0078C2.48535 16.0737 2.51171 16.1366 2.55859 16.1836C2.6055 16.2305 2.66949 16.2577 2.73535 16.2578H3.56738C3.89435 15.1043 4.95318 14.2578 6.21094 14.2578C7.4687 14.2578 8.52753 15.1043 8.85449 16.2578H14.5674C14.8943 15.1043 15.9532 14.2578 17.2109 14.2578C18.4687 14.2578 19.5275 15.1043 19.8545 16.2578H20.7354C20.8013 16.2578 20.8651 16.2305 20.9121 16.1836C20.9591 16.1366 20.9854 16.0738 20.9854 16.0078V11.7578H14.9961ZM15.0078 10.2578H20.6191L18.4785 7.3584C18.4315 7.29463 18.3562 7.25781 18.2773 7.25781H15.0332L15.0078 10.2578Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.4453 4.24219C12.8595 4.24219 13.1953 4.57797 13.1953 4.99219V12.2578H13.4912L13.5391 6.50098C13.5431 6.0902 13.8774 5.75817 14.2891 5.75781H18.2773C18.8323 5.75781 19.3546 6.02088 19.6846 6.46777C20.2226 7.19575 21.3503 8.72321 21.9473 9.53223C22.2972 10.0052 22.4854 10.5781 22.4854 11.166V16.0078C22.4854 16.4718 22.3017 16.9171 21.9727 17.2451C21.6447 17.573 21.1993 17.7578 20.7354 17.7578H19.8545C19.5274 18.9108 18.4686 19.7578 17.2109 19.7578C15.9533 19.7578 14.8945 18.9108 14.5674 17.7578H8.85449C8.52742 18.9108 7.46858 19.7578 6.21094 19.7578C4.9533 19.7578 3.89445 18.9108 3.56738 17.7578H2.73535C2.27149 17.7577 1.82596 17.573 1.49805 17.2451C1.16916 16.9171 0.985352 16.4717 0.985352 16.0078V15.9971C0.982348 15.9698 0.980469 15.9421 0.980469 15.9141V13.0107C0.980469 12.5965 1.31626 12.2607 1.73047 12.2607H7.00098V12.2578H11.6953V4.99219C11.6953 4.57797 12.0311 4.24219 12.4453 4.24219ZM6.21094 15.7578C5.52094 15.7578 4.96094 16.3178 4.96094 17.0078C4.96094 17.6968 5.52094 18.2578 6.21094 18.2578C6.90094 18.2578 7.46094 17.6968 7.46094 17.0078C7.46094 16.3178 6.90094 15.7578 6.21094 15.7578ZM17.2109 15.7578C16.5209 15.7578 15.9609 16.3178 15.9609 17.0078C15.9609 17.6968 16.5209 18.2578 17.2109 18.2578C17.9009 18.2578 18.4609 17.6968 18.4609 17.0078C18.4609 16.3178 17.9009 15.7578 17.2109 15.7578ZM14.9961 11.7578L14.9854 13.0137C14.9824 13.4257 14.6474 13.7578 14.2354 13.7578H7.05762C7.03858 13.7593 7.01941 13.7607 7 13.7607H2.48926V15.2031C2.48843 15.2113 2.48536 15.2192 2.48535 15.2275V16.0078C2.48535 16.0737 2.51171 16.1366 2.55859 16.1836C2.6055 16.2305 2.66949 16.2577 2.73535 16.2578H3.56738C3.89435 15.1043 4.95318 14.2578 6.21094 14.2578C7.4687 14.2578 8.52753 15.1043 8.85449 16.2578H14.5674C14.8943 15.1043 15.9532 14.2578 17.2109 14.2578C18.4687 14.2578 19.5275 15.1043 19.8545 16.2578H20.7354C20.8013 16.2578 20.8651 16.2305 20.9121 16.1836C20.9591 16.1366 20.9854 16.0738 20.9854 16.0078V11.7578H14.9961ZM15.0078 10.2578H20.6191L18.4785 7.3584C18.4315 7.29463 18.3562 7.25781 18.2773 7.25781H15.0332L15.0078 10.2578Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); }
.fz-usecase-card_icon[data-icon="view-in-ar"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M11.0963 19.302L6.15375 16.4462C5.86925 16.2821 5.6475 16.0628 5.4885 15.7885C5.3295 15.5142 5.25 15.2128 5.25 14.8845V9.173C5.25 8.84483 5.3295 8.54358 5.4885 8.26925C5.6475 7.99492 5.86925 7.77567 6.15375 7.6115L11.0963 4.75575C11.3808 4.59175 11.682 4.50975 12 4.50975C12.318 4.50975 12.6193 4.59175 12.9038 4.75575L17.8462 7.6115C18.1307 7.77567 18.3525 7.99492 18.5115 8.26925C18.6705 8.54358 18.75 8.84483 18.75 9.173V14.8845C18.75 15.2128 18.6705 15.5142 18.5115 15.7885C18.3525 16.0628 18.1307 16.2821 17.8462 16.4462L12.9038 19.302C12.6193 19.466 12.318 19.548 12 19.548C11.682 19.548 11.3808 19.466 11.0963 19.302ZM11.25 17.6655V12.45L6.75 9.86525V14.8845C6.75 14.9358 6.76283 14.9839 6.7885 15.0288C6.81417 15.0738 6.85258 15.1122 6.90375 15.1442L11.25 17.6655ZM12.75 17.6655L17.0962 15.1442C17.1474 15.1122 17.1858 15.0738 17.2115 15.0288C17.2372 14.9839 17.25 14.9358 17.25 14.8845V9.86525L12.75 12.45V17.6655ZM2.5 7V4.30775C2.5 3.80908 2.67658 3.38308 3.02975 3.02975C3.38308 2.67658 3.80908 2.5 4.30775 2.5H7V4H4.30775C4.21792 4 4.14417 4.02883 4.0865 4.0865C4.02883 4.14417 4 4.21792 4 4.30775V7H2.5ZM7 21.5H4.30775C3.80908 21.5 3.38308 21.3234 3.02975 20.9703C2.67658 20.6169 2.5 20.1909 2.5 19.6923V17H4V19.6923C4 19.7821 4.02883 19.8558 4.0865 19.9135C4.14417 19.9712 4.21792 20 4.30775 20H7V21.5ZM17 21.5V20H19.6923C19.7821 20 19.8558 19.9712 19.9135 19.9135C19.9712 19.8558 20 19.7821 20 19.6923V17H21.5V19.6923C21.5 20.1909 21.3234 20.6169 20.9703 20.9703C20.6169 21.3234 20.1909 21.5 19.6923 21.5H17ZM20 7V4.30775C20 4.21792 19.9712 4.14417 19.9135 4.0865C19.8558 4.02883 19.7821 4 19.6923 4H17V2.5H19.6923C20.1909 2.5 20.6169 2.67658 20.9703 3.02975C21.3234 3.38308 21.5 3.80908 21.5 4.30775V7H20ZM12 11.1577L16.4693 8.55375L12.1538 6.06725C12.1026 6.03525 12.0513 6.01925 12 6.01925C11.9487 6.01925 11.8974 6.03525 11.8463 6.06725L7.53075 8.55375L12 11.1577Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M11.0963 19.302L6.15375 16.4462C5.86925 16.2821 5.6475 16.0628 5.4885 15.7885C5.3295 15.5142 5.25 15.2128 5.25 14.8845V9.173C5.25 8.84483 5.3295 8.54358 5.4885 8.26925C5.6475 7.99492 5.86925 7.77567 6.15375 7.6115L11.0963 4.75575C11.3808 4.59175 11.682 4.50975 12 4.50975C12.318 4.50975 12.6193 4.59175 12.9038 4.75575L17.8462 7.6115C18.1307 7.77567 18.3525 7.99492 18.5115 8.26925C18.6705 8.54358 18.75 8.84483 18.75 9.173V14.8845C18.75 15.2128 18.6705 15.5142 18.5115 15.7885C18.3525 16.0628 18.1307 16.2821 17.8462 16.4462L12.9038 19.302C12.6193 19.466 12.318 19.548 12 19.548C11.682 19.548 11.3808 19.466 11.0963 19.302ZM11.25 17.6655V12.45L6.75 9.86525V14.8845C6.75 14.9358 6.76283 14.9839 6.7885 15.0288C6.81417 15.0738 6.85258 15.1122 6.90375 15.1442L11.25 17.6655ZM12.75 17.6655L17.0962 15.1442C17.1474 15.1122 17.1858 15.0738 17.2115 15.0288C17.2372 14.9839 17.25 14.9358 17.25 14.8845V9.86525L12.75 12.45V17.6655ZM2.5 7V4.30775C2.5 3.80908 2.67658 3.38308 3.02975 3.02975C3.38308 2.67658 3.80908 2.5 4.30775 2.5H7V4H4.30775C4.21792 4 4.14417 4.02883 4.0865 4.0865C4.02883 4.14417 4 4.21792 4 4.30775V7H2.5ZM7 21.5H4.30775C3.80908 21.5 3.38308 21.3234 3.02975 20.9703C2.67658 20.6169 2.5 20.1909 2.5 19.6923V17H4V19.6923C4 19.7821 4.02883 19.8558 4.0865 19.9135C4.14417 19.9712 4.21792 20 4.30775 20H7V21.5ZM17 21.5V20H19.6923C19.7821 20 19.8558 19.9712 19.9135 19.9135C19.9712 19.8558 20 19.7821 20 19.6923V17H21.5V19.6923C21.5 20.1909 21.3234 20.6169 20.9703 20.9703C20.6169 21.3234 20.1909 21.5 19.6923 21.5H17ZM20 7V4.30775C20 4.21792 19.9712 4.14417 19.9135 4.0865C19.8558 4.02883 19.7821 4 19.6923 4H17V2.5H19.6923C20.1909 2.5 20.6169 2.67658 20.9703 3.02975C21.3234 3.38308 21.5 3.80908 21.5 4.30775V7H20ZM12 11.1577L16.4693 8.55375L12.1538 6.06725C12.1026 6.03525 12.0513 6.01925 12 6.01925C11.9487 6.01925 11.8974 6.03525 11.8463 6.06725L7.53075 8.55375L12 11.1577Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); }
.fz-usecase-card_icon[data-icon="warehouse"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M4 19H6.5V11H17.5V19H20V8.35L12 5.15L4 8.35V19ZM2.5 20.5V7.3365L12 3.5385L21.5 7.3365V20.5H16V12.5H8V20.5H2.5ZM9.27875 20.5V18.7307H11.048V20.5H9.27875ZM11.1155 17.5V15.7307H12.8845V17.5H11.1155ZM12.952 20.5V18.7307H14.7212V20.5H12.952Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M4 19H6.5V11H17.5V19H20V8.35L12 5.15L4 8.35V19ZM2.5 20.5V7.3365L12 3.5385L21.5 7.3365V20.5H16V12.5H8V20.5H2.5ZM9.27875 20.5V18.7307H11.048V20.5H9.27875ZM11.1155 17.5V15.7307H12.8845V17.5H11.1155ZM12.952 20.5V18.7307H14.7212V20.5H12.952Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); }
.fz-usecase-card_icon[data-icon="wingliner"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg transform='translate(0.0000 2.5142) scale(1.003458)'%3E %3Cg%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.2136 12.6454C17.7176 12.6969 18.111 13.123 18.111 13.6405V15.9843L18.1062 16.0868C18.0672 16.4695 17.8116 16.7875 17.4646 16.9189V17.9062L17.4597 18.0087C17.4083 18.5127 16.9821 18.906 16.4646 18.9062H15.3523C14.8347 18.9062 14.4086 18.5128 14.3572 18.0087L14.3523 17.9062V16.9843H9.69604V17.9062L9.69116 18.0087C9.64325 18.479 9.26886 18.8533 8.79858 18.9013L8.69604 18.9062H7.53292C7.01528 18.9062 6.58918 18.5128 6.5378 18.0087L6.53292 17.9062V16.9267C6.17471 16.8006 5.90966 16.4775 5.86983 16.0868L5.86495 15.9843V13.6405C5.86495 13.1229 6.25828 12.6968 6.76241 12.6454L6.86495 12.6405H17.111L17.2136 12.6454ZM7.36495 15.4843H16.611V14.1405H7.36495V15.4843Z' fill='currentColor'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.6267 0.0311652C22.0212 -0.0856836 22.4368 0.136764 22.5573 0.530189L23.8845 4.86515C24.0054 5.26099 23.7822 5.68037 23.3864 5.80167C22.9905 5.92269 22.5712 5.69949 22.4499 5.30363L21.3396 1.6796L18.1149 2.63566V11.2812C18.1149 11.8333 17.6671 12.281 17.1149 12.2812H6.86885C6.3166 12.2812 5.8689 11.8334 5.86885 11.2812V2.65519L2.57784 1.6796L1.46749 5.30363C1.34629 5.69949 0.92685 5.92251 0.530963 5.80167C0.135013 5.68045 -0.0881022 5.26111 0.0329165 4.86515L1.36006 0.530189C1.48063 0.136686 1.89613 -0.0858447 2.29073 0.0311652L6.82784 1.37589L6.86885 1.37492H17.0954L21.6267 0.0311652ZM7.40108 2.87492C7.39077 2.88066 7.37943 2.88431 7.36885 2.88956V10.7812H16.6149V2.91788C16.581 2.90494 16.547 2.89257 16.5153 2.87492H7.40108Z' fill='currentColor'/%3E %3C/g%3E %3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg transform='translate(0.0000 2.5142) scale(1.003458)'%3E %3Cg%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.2136 12.6454C17.7176 12.6969 18.111 13.123 18.111 13.6405V15.9843L18.1062 16.0868C18.0672 16.4695 17.8116 16.7875 17.4646 16.9189V17.9062L17.4597 18.0087C17.4083 18.5127 16.9821 18.906 16.4646 18.9062H15.3523C14.8347 18.9062 14.4086 18.5128 14.3572 18.0087L14.3523 17.9062V16.9843H9.69604V17.9062L9.69116 18.0087C9.64325 18.479 9.26886 18.8533 8.79858 18.9013L8.69604 18.9062H7.53292C7.01528 18.9062 6.58918 18.5128 6.5378 18.0087L6.53292 17.9062V16.9267C6.17471 16.8006 5.90966 16.4775 5.86983 16.0868L5.86495 15.9843V13.6405C5.86495 13.1229 6.25828 12.6968 6.76241 12.6454L6.86495 12.6405H17.111L17.2136 12.6454ZM7.36495 15.4843H16.611V14.1405H7.36495V15.4843Z' fill='currentColor'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.6267 0.0311652C22.0212 -0.0856836 22.4368 0.136764 22.5573 0.530189L23.8845 4.86515C24.0054 5.26099 23.7822 5.68037 23.3864 5.80167C22.9905 5.92269 22.5712 5.69949 22.4499 5.30363L21.3396 1.6796L18.1149 2.63566V11.2812C18.1149 11.8333 17.6671 12.281 17.1149 12.2812H6.86885C6.3166 12.2812 5.8689 11.8334 5.86885 11.2812V2.65519L2.57784 1.6796L1.46749 5.30363C1.34629 5.69949 0.92685 5.92251 0.530963 5.80167C0.135013 5.68045 -0.0881022 5.26111 0.0329165 4.86515L1.36006 0.530189C1.48063 0.136686 1.89613 -0.0858447 2.29073 0.0311652L6.82784 1.37589L6.86885 1.37492H17.0954L21.6267 0.0311652ZM7.40108 2.87492C7.39077 2.88066 7.37943 2.88431 7.36885 2.88956V10.7812H16.6149V2.91788C16.581 2.90494 16.547 2.89257 16.5153 2.87492H7.40108Z' fill='currentColor'/%3E %3C/g%3E %3C/g%3E%3C/svg%3E"); }
.fz-usecase-card_icon[data-icon="wood"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg transform='translate(4.7921 0.0000) scale(1.047664)'%3E %3Cpath d='M13.1388 0.18957C13.3763 0.18957 13.5704 0.383682 13.5704 0.621211V22.2872C13.5704 22.5248 13.3763 22.7179 13.1388 22.7179H0.621211C0.383682 22.7179 0.18957 22.5248 0.18957 22.2872V0.621211C0.18957 0.383682 0.383682 0.18957 0.621211 0.18957H13.1388ZM12.7081 17.003C10.9545 18.096 9.80476 19.88 9.14953 21.8566H12.7081V17.003ZM11.5763 1.05187C11.2077 1.28272 10.866 1.6625 10.5489 2.18469C10.2208 2.72526 9.92407 3.40693 9.65148 4.20324C9.09295 5.83302 8.63667 7.89365 8.10754 10.1007C7.13304 14.1643 5.92063 18.727 3.26965 21.8566H8.24523C8.9769 19.481 10.3897 17.2438 12.7081 16.006V14.2335C12.5996 14.2907 12.4696 14.3528 12.3253 14.4025C11.9852 14.5195 11.5319 14.5895 11.1232 14.3605L11.1212 14.3585C10.4245 13.9542 10.2067 13.1954 10.1818 12.4601C10.1568 11.721 10.3226 10.9512 10.4484 10.4454C10.8709 8.74998 11.736 6.69502 12.7081 4.63586V1.05187H11.5763ZM8.15344 1.05187C7.56087 3.19875 7.14371 5.02787 7.06945 6.65246C6.97891 11.4443 4.89622 14.9914 1.05187 16.7853V21.8566H2.10559C4.92775 18.9484 6.22936 14.2387 7.26965 9.89953C7.79468 7.71036 8.25677 5.61634 8.83605 3.92297C9.23057 2.77026 9.68486 1.76992 10.2902 1.05187H8.15344ZM1.05187 15.8273C4.35492 14.1336 6.12678 11.0179 6.20812 6.63195L6.2091 6.58898L6.21203 6.58215C6.29258 4.9173 6.69898 3.10581 7.26086 1.05187H6.20129C5.9858 1.56475 5.78076 2.17195 5.57336 2.81066C5.35147 3.49402 5.12495 4.21249 4.87902 4.86926C4.69837 5.35194 4.43617 6.01384 4.06945 6.5548C3.70682 7.0897 3.2065 7.55795 2.54016 7.55187L2.52258 7.5509L2.50402 7.54797C2.20125 7.48684 1.98739 7.33829 1.85266 7.12609C1.72251 6.92104 1.6779 6.6743 1.67102 6.43371C1.66413 6.1919 1.69538 5.93732 1.73156 5.70324C1.76912 5.46031 1.80922 5.25269 1.83117 5.06945L1.83215 5.06457C1.99592 3.94818 2.19458 2.52728 1.94836 1.05187H1.05187V15.8273ZM12.7081 6.71887C12.1766 7.93839 11.7252 9.10435 11.4269 10.13L11.2853 10.6534C11.0894 11.4407 11.006 12.103 11.0519 12.6114C11.0972 13.1127 11.264 13.4314 11.5362 13.5987C11.7117 13.6701 11.9092 13.6538 12.1251 13.5665C12.3236 13.4862 12.5226 13.3501 12.7081 13.1954V6.71887ZM2.82043 1.05187C3.05814 2.63162 2.84246 4.10704 2.68371 5.18957C2.5847 5.86605 2.53755 6.26355 2.54309 6.49816C2.5459 6.61603 2.56244 6.66556 2.57238 6.68371C2.57363 6.68599 2.57449 6.68474 2.57824 6.68664C2.77281 6.67529 2.98964 6.56054 3.23742 6.24035C3.49909 5.9022 3.77363 5.36233 4.07141 4.5675C4.29374 3.97311 4.50066 3.31685 4.71203 2.66223C4.89092 2.1082 5.07513 1.55624 5.27062 1.05187H2.82043ZM6.2091 6.62023H6.21008V6.61145C6.20973 6.61454 6.20926 6.61758 6.2091 6.62023Z' fill='currentColor' stroke='currentColor' stroke-width='0.38'/%3E %3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg transform='translate(4.7921 0.0000) scale(1.047664)'%3E %3Cpath d='M13.1388 0.18957C13.3763 0.18957 13.5704 0.383682 13.5704 0.621211V22.2872C13.5704 22.5248 13.3763 22.7179 13.1388 22.7179H0.621211C0.383682 22.7179 0.18957 22.5248 0.18957 22.2872V0.621211C0.18957 0.383682 0.383682 0.18957 0.621211 0.18957H13.1388ZM12.7081 17.003C10.9545 18.096 9.80476 19.88 9.14953 21.8566H12.7081V17.003ZM11.5763 1.05187C11.2077 1.28272 10.866 1.6625 10.5489 2.18469C10.2208 2.72526 9.92407 3.40693 9.65148 4.20324C9.09295 5.83302 8.63667 7.89365 8.10754 10.1007C7.13304 14.1643 5.92063 18.727 3.26965 21.8566H8.24523C8.9769 19.481 10.3897 17.2438 12.7081 16.006V14.2335C12.5996 14.2907 12.4696 14.3528 12.3253 14.4025C11.9852 14.5195 11.5319 14.5895 11.1232 14.3605L11.1212 14.3585C10.4245 13.9542 10.2067 13.1954 10.1818 12.4601C10.1568 11.721 10.3226 10.9512 10.4484 10.4454C10.8709 8.74998 11.736 6.69502 12.7081 4.63586V1.05187H11.5763ZM8.15344 1.05187C7.56087 3.19875 7.14371 5.02787 7.06945 6.65246C6.97891 11.4443 4.89622 14.9914 1.05187 16.7853V21.8566H2.10559C4.92775 18.9484 6.22936 14.2387 7.26965 9.89953C7.79468 7.71036 8.25677 5.61634 8.83605 3.92297C9.23057 2.77026 9.68486 1.76992 10.2902 1.05187H8.15344ZM1.05187 15.8273C4.35492 14.1336 6.12678 11.0179 6.20812 6.63195L6.2091 6.58898L6.21203 6.58215C6.29258 4.9173 6.69898 3.10581 7.26086 1.05187H6.20129C5.9858 1.56475 5.78076 2.17195 5.57336 2.81066C5.35147 3.49402 5.12495 4.21249 4.87902 4.86926C4.69837 5.35194 4.43617 6.01384 4.06945 6.5548C3.70682 7.0897 3.2065 7.55795 2.54016 7.55187L2.52258 7.5509L2.50402 7.54797C2.20125 7.48684 1.98739 7.33829 1.85266 7.12609C1.72251 6.92104 1.6779 6.6743 1.67102 6.43371C1.66413 6.1919 1.69538 5.93732 1.73156 5.70324C1.76912 5.46031 1.80922 5.25269 1.83117 5.06945L1.83215 5.06457C1.99592 3.94818 2.19458 2.52728 1.94836 1.05187H1.05187V15.8273ZM12.7081 6.71887C12.1766 7.93839 11.7252 9.10435 11.4269 10.13L11.2853 10.6534C11.0894 11.4407 11.006 12.103 11.0519 12.6114C11.0972 13.1127 11.264 13.4314 11.5362 13.5987C11.7117 13.6701 11.9092 13.6538 12.1251 13.5665C12.3236 13.4862 12.5226 13.3501 12.7081 13.1954V6.71887ZM2.82043 1.05187C3.05814 2.63162 2.84246 4.10704 2.68371 5.18957C2.5847 5.86605 2.53755 6.26355 2.54309 6.49816C2.5459 6.61603 2.56244 6.66556 2.57238 6.68371C2.57363 6.68599 2.57449 6.68474 2.57824 6.68664C2.77281 6.67529 2.98964 6.56054 3.23742 6.24035C3.49909 5.9022 3.77363 5.36233 4.07141 4.5675C4.29374 3.97311 4.50066 3.31685 4.71203 2.66223C4.89092 2.1082 5.07513 1.55624 5.27062 1.05187H2.82043ZM6.2091 6.62023H6.21008V6.61145C6.20973 6.61454 6.20926 6.61758 6.2091 6.62023Z' fill='currentColor' stroke='currentColor' stroke-width='0.38'/%3E %3C/g%3E%3C/svg%3E"); }
.fz-usecase-card_icon[data-icon="work"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M4.30775 20.5C3.80258 20.5 3.375 20.325 3.025 19.975C2.675 19.625 2.5 19.1974 2.5 18.6923V8.30775C2.5 7.80258 2.675 7.375 3.025 7.025C3.375 6.675 3.80258 6.5 4.30775 6.5H8.5V4.80775C8.5 4.30258 8.675 3.875 9.025 3.525C9.375 3.175 9.80258 3 10.3077 3H13.6922C14.1974 3 14.625 3.175 14.975 3.525C15.325 3.875 15.5 4.30258 15.5 4.80775V6.5H19.6923C20.1974 6.5 20.625 6.675 20.975 7.025C21.325 7.375 21.5 7.80258 21.5 8.30775V18.6923C21.5 19.1974 21.325 19.625 20.975 19.975C20.625 20.325 20.1974 20.5 19.6923 20.5H4.30775ZM4.30775 19H19.6923C19.7693 19 19.8398 18.9679 19.9038 18.9038C19.9679 18.8398 20 18.7693 20 18.6923V8.30775C20 8.23075 19.9679 8.16025 19.9038 8.09625C19.8398 8.03208 19.7693 8 19.6923 8H4.30775C4.23075 8 4.16025 8.03208 4.09625 8.09625C4.03208 8.16025 4 8.23075 4 8.30775V18.6923C4 18.7693 4.03208 18.8398 4.09625 18.9038C4.16025 18.9679 4.23075 19 4.30775 19ZM10 6.5H14V4.80775C14 4.73075 13.9679 4.66025 13.9038 4.59625C13.8398 4.53208 13.7692 4.5 13.6922 4.5H10.3077C10.2307 4.5 10.1603 4.53208 10.0963 4.59625C10.0321 4.66025 10 4.73075 10 4.80775V6.5Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg%3E %3Cpath d='M4.30775 20.5C3.80258 20.5 3.375 20.325 3.025 19.975C2.675 19.625 2.5 19.1974 2.5 18.6923V8.30775C2.5 7.80258 2.675 7.375 3.025 7.025C3.375 6.675 3.80258 6.5 4.30775 6.5H8.5V4.80775C8.5 4.30258 8.675 3.875 9.025 3.525C9.375 3.175 9.80258 3 10.3077 3H13.6922C14.1974 3 14.625 3.175 14.975 3.525C15.325 3.875 15.5 4.30258 15.5 4.80775V6.5H19.6923C20.1974 6.5 20.625 6.675 20.975 7.025C21.325 7.375 21.5 7.80258 21.5 8.30775V18.6923C21.5 19.1974 21.325 19.625 20.975 19.975C20.625 20.325 20.1974 20.5 19.6923 20.5H4.30775ZM4.30775 19H19.6923C19.7693 19 19.8398 18.9679 19.9038 18.9038C19.9679 18.8398 20 18.7693 20 18.6923V8.30775C20 8.23075 19.9679 8.16025 19.9038 8.09625C19.8398 8.03208 19.7693 8 19.6923 8H4.30775C4.23075 8 4.16025 8.03208 4.09625 8.09625C4.03208 8.16025 4 8.23075 4 8.30775V18.6923C4 18.7693 4.03208 18.8398 4.09625 18.9038C4.16025 18.9679 4.23075 19 4.30775 19ZM10 6.5H14V4.80775C14 4.73075 13.9679 4.66025 13.9038 4.59625C13.8398 4.53208 13.7692 4.5 13.6922 4.5H10.3077C10.2307 4.5 10.1603 4.53208 10.0963 4.59625C10.0321 4.66025 10 4.73075 10 4.80775V6.5Z' fill='currentColor'/%3E %3C/g%3E %3C/svg%3E"); }
/* ==========================================================================
   Galerie "Unsere Fahrzeuge": Hinweis auf die Bildergalerie — 3. Sep
   Design: Figma 4332:4168 (Komponente `InstagramTile`).
   Alle Werte aus dem Artboard gelesen, Kachel 282x358:
     Verlauf   282x204, unten buendig (oben 154) — GRADIENT_LINEAR
               rgba(16,30,38,0) 0%  ->  rgba(16,30,38,1) 78%
               `brand-900` existiert in Figma, ist aber NICHT als
               CSS-Variable veroeffentlicht (geprueft) — deshalb das
               Literal #101e26 mit var()-Fallback davor.
     Plus      40x40 Kreis, weisser Rand `border-width/main` (2px),
               Flaeche weiss 20 %, Icon 18x18 weiss
               unten 51px, horizontal zentriert (Mitte 142 zu 141)
     Text      "weitere Bilder ansehen", 14 Bold weiss
               (`font-size/text-xxs`), unten 24px, zentriert
     Abstand   Kreis unten 51, Text unten 24 -> 10px zwischen beiden
               (51 - 17 Texthoehe - 24 = 10)
   UMSETZUNG OHNE MARKUP-AENDERUNG. Die Kachel ist ein nacktes <img> aus
   der Collection List — es gibt kein Element, in das ein Overlay passt,
   und ein <img> kann keine Pseudo-Elemente tragen. Traeger ist deshalb
   das `.w-dyn-item` darum herum: `::before` = Verlauf, `::after` = Kreis
   mit Plus. Der Text kommt aus dem `alt`-Attribut? Nein — er ist fix und
   steht in `content`, damit er nicht vom CMS abhaengt.
   Warum nicht ins Markup: die Kacheln kommen aus dem CMS, jede Republish
   wuerde eingefuegte Elemente ueberschreiben. Pseudo-Elemente ueberleben
   das.
   Gilt fuer ALLE drei Swiper-Galerien (Startseite, /karriere, /services)
   — sie bekommen alle dasselbe Verhalten und spaeter dasselbe Modal.
   Anfangs war /karriere ueber `:not(.static-grid-5)` ausgenommen; auf
   Wunsch vom 3. Sep aufgehoben. */
.instagram-gallery_track .w-dyn-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--_sizes---radius--sm, 14px);
  cursor: pointer;
}
/* Verlauf. `translateY(100%)` schiebt ihn unter die Kachel; da der
   Wrapper `overflow: hidden` traegt, ist er unsichtbar, ohne dass
   `visibility` oder `display` die Animation abwuergen. */
.instagram-gallery_track .w-dyn-item::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  /* 3. Sep: von 57% auf die Haelfte. Der Entwurf zeichnet den Verlauf
     282x204 auf einer 358 hohen Kachel, also 57% - im Browser reichte er
     damit sichtbar zu hoch ins Bild. Auf Wunsch halbiert. */
  height: 28.5%;
  background-image: linear-gradient(
    to bottom,
    rgba(16, 30, 38, 0) 0%,
    var(--_colour---brand-900, #101e26) 78%
  );
  pointer-events: none;
  z-index: 1;
}
/* Kreis mit Plus. Das Plus ist KEIN Hintergrundbild, sondern eine Maske
   auf `currentColor` — so bleibt es scharf und laesst sich ueber die
   Textfarbe steuern, ohne ein zweites Asset. SVG aus dem Design:
   M8 18V10H0V8H8V0H10V8H18V10H10V18H8Z */
.instagram-gallery_track .w-dyn-item::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 51px;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  box-sizing: border-box;
  border: var(--_sizes---border-width--main, 2px) solid var(--_colour---white, #fff);
  border-radius: var(--_sizes---radius--pill, 999px);
  background-color: rgba(255, 255, 255, 0.2);
  pointer-events: none;
  z-index: 2;
}
/* Das Plus-Zeichen liegt IM Kreis. Es braucht ein eigenes Element —
   ::before und ::after sind beide vergeben. Zwei Striche aus
   `box-shadow` auf demselben ::after waeren fragil; stattdessen zwei
   lineare Verlaeufe als Hintergrund des Kreises: senkrecht und
   waagerecht, je 18x2 bzw. 2x18, mittig. Das ist exakt die Form des
   SVG-Pfads, ohne zusaetzlichen Knoten. */
.instagram-gallery_track .w-dyn-item::after {
  background-image:
    linear-gradient(var(--_colour---white, #fff), var(--_colour---white, #fff)),
    linear-gradient(var(--_colour---white, #fff), var(--_colour---white, #fff));
  background-size: 18px 2px, 2px 18px;
  background-position: 50% 50%, 50% 50%;
  background-repeat: no-repeat;
}
/* Der Text. Traeger ist das <img> selbst: sein ::after liegt zwar nicht
   im Bild (ersetzte Elemente haben keine Pseudo-Elemente), aber der
   Wrapper hat nur zwei — deshalb sitzt der Text auf dem `role=listitem`
   ueber `content` eines dritten Traegers: dem Link/Bild-Container gibt
   es nicht, also nutzen wir den Wrapper des Wrappers.
   Praktisch: `.w-dyn-item` ist unser einziger freier Traeger, und beide
   Pseudo-Elemente sind vergeben. Der Text bekommt deshalb `.w-dyn-items`
   NICHT — der umfasst alle Kacheln. Loesung: der Text wird per JS als
   ein <span> eingefuegt (siehe footer.js). Ein CSS-only-Weg ohne
   drittes Pseudo-Element existiert hier nicht. */
.instagram-gallery_track .tile-hint_label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  text-align: center;
  color: var(--_colour---white, #fff);
  font-family: var(--_sizes---font--family--sans, inherit);
  font-size: var(--_sizes---font-size--text-xxs, 14px);
  font-weight: var(--_sizes---font--weight--bold, 700);
  line-height: normal;
  pointer-events: none;
  z-index: 2;
}
/* ============================== Video-Kacheln in der Galerie — 12. Sep
   Eine Kachel mit Video sieht aus wie eine Bildkachel, bis auf zwei
   Dinge: das Plus im Kreis wird zum Play-Dreieck, und beim Ueberfahren
   laeuft eine stumme Kurzfassung statt nur des Verlaufs.
   Warum der BESTEHENDE Kreis umgewidmet wird statt eines neuen Zeichens:
   `::before` (Verlauf) und `::after` (Kreis) sind beide vergeben, ein
   drittes Pseudo-Element gibt es nicht. Der Kreis sitzt bereits an der
   richtigen Stelle und hat die richtige Groesse - nur das Symbol darin
   wechselt. Das haelt Bild- und Videokachel als eine Familie zusammen.
   Das Dreieck entsteht aus zwei Verlaeufen wie das Plus, aber mit
   `clip-path`: ein CSS-Dreieck aus Rahmen waere ein zweites Element,
   und ein SVG ein zweites Asset. Optisch 1px nach rechts, weil ein
   Dreieck im Kreis sonst links aussieht (die Flaeche liegt rechts der
   Mittelachse). */
/* Die CMS-Traeger tragen die Video-URLs als TEXT (gebundene Attribute
   nimmt die Designer-API nicht an, siehe footer.js). Sichtbar waeren das
   drei Zeilen CDN-URL unter jeder Kachel - genau das stand am 12. Sep
   kurzzeitig live.
   `display: none` statt `visibility: hidden` oder Abschieben aus dem
   Bild: der Text soll gar nicht erst Platz belegen, und `aria-hidden`
   allein nimmt ihn nur dem Vorlesegeraet, nicht dem Auge.
   Der Selektor trifft ueber das Attribut, nicht ueber eine Klasse: die
   Traeger kommen aus der Collection List, und Webflow haengt ihnen je
   nach Fuellstand `w-dyn-bind-empty` an oder nicht. */
.instagram-gallery_track [data-video-loop],
.instagram-gallery_track [data-video-full],
.instagram-gallery_track [data-video-vtt],
.instagram-gallery_track [data-kachel-album] {
  display: none !important;
}
/* Das Plus aus der Bildkachel abraeumen - der Kreis bleibt, sein Inhalt
   nicht. Das Dreieck kommt als eigener Traeger darueber: `clip-path` am
   Kreis selbst wuerde auch dessen Rand abschneiden. */
.instagram-gallery_track .w-dyn-item.has-video::after {
  background-image: none;
}
.instagram-gallery_track .w-dyn-item.has-video .tile-video_play {
  position: absolute;
  left: 50%;
  bottom: 51px;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 3;
}
.instagram-gallery_track .w-dyn-item.has-video .tile-video_play::before {
  content: "";
  width: 14px;
  height: 16px;
  margin-left: 2px;            /* optischer Ausgleich im Kreis */
  background-color: var(--_colour---white, #fff);
  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
/* Die Vorschau liegt UEBER dem Poster und ist zunaechst durchsichtig.
   Erst wenn der erste Frame wirklich laeuft (`playing`, gesetzt in
   footer.js), wird sie sichtbar - sonst blitzt beim Start kurz Schwarz
   auf, weil ein <video> ohne Frame schwarz ist, nicht leer. */
.instagram-gallery_track .w-dyn-item.has-video .tile-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
  z-index: 0;                  /* unter Verlauf, Kreis und Hinweis */
}
.instagram-gallery_track .w-dyn-item.has-video.is-video-playing .tile-video {
  opacity: 1;
}
/* Der Hinweistext sagt bei Videos etwas anderes. Gesetzt wird er in
   footer.js; hier steht nur, dass er dieselbe Position behaelt. */
/* Grossansicht: das Video teilt sich die Masse mit dem Bild. Getrennte
   Regel statt einer gemeinsamen Klasse, weil ein <video> zusaetzlich
   `background` braucht - waehrend es laedt, ist es sonst durchsichtig
   und man sieht das abgedunkelte Bild dahinter durchscheinen. */
.gallery-modal_video {
  display: block;
  max-width: min(92vw, 900px);
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: var(--_sizes---radius--md);
  background-color: var(--_colour---brand-900, #101e26);
  object-fit: contain;
}
/* `hidden` muss hier gewinnen. Beide Elemente tragen `display: block`;
   ohne diese Regel waere das versteckte weiterhin sichtbar. */
.gallery-modal_img[hidden],
.gallery-modal_video[hidden] {
  display: none !important;
}
/* Bei reduzierter Bewegung laeuft keine Vorschau (footer.js startet sie
   gar nicht erst). Das Play-Zeichen bleibt - es sagt, dass hinter der
   Kachel ein Video steckt, und genau das soll sichtbar bleiben. */
/* ---------------------------------------------------- Desktop: Einfahren
   Vorgabe: auf Maus-in von unten einfahren, auf Maus-out wieder hinaus.
   Nur in `@media (hover: hover) and (pointer: fine)` — auf Touchgeraeten
   gibt es kein echtes Hover, dort bliebe der Hinweis nach dem ersten
   Tippen haengen. Die Regeln fuer Touch stehen darunter.
   3. Sep - KORREKTUR. Hier stand `translateY(100%)` fuer alle drei Teile
   mit der Begruendung, das schiebe sie unter die Kachelkante. Das gilt
   aber nur fuer den Verlauf, der bei `bottom: 0` sitzt. Gemessen:
     Text    Hoehe 17, bottom 24  ->  100% = 17px  ->  7px blieben sichtbar
     Kreis   Hoehe 40, bottom 51  ->  100% = 40px  -> 11px blieben sichtbar
   Deshalb standen Kreis und Text dauerhaft im Bild, waehrend der Verlauf
   korrekt verschwand - genau das Bild, das der Kunde gemeldet hat.
   `translateY(100%)` verschiebt um die EIGENE Hoehe. Wer einen
   `bottom`-Abstand hat, muss zusaetzlich um diesen Abstand wandern.
   Deshalb `calc(100% + <bottom>)` je Teil. Dauer `motion/duration/fast`,
   Kurve wie ueberall sonst auf der Seite (`ease/out`). */
@media (hover: hover) and (pointer: fine) {
  .instagram-gallery_track .w-dyn-item::before,
  .instagram-gallery_track .w-dyn-item::after,
  .instagram-gallery_track .tile-hint_label {
    transition: transform calc(var(--_sizes---motion--duration--fast, 200) * 1ms)
                cubic-bezier(0.16, 1, 0.3, 1);
  }
  /* Verlauf sitzt bei bottom: 0 - die eigene Hoehe genuegt. */
  .instagram-gallery_track .w-dyn-item::before {
    transform: translateY(100%);
  }
  /* Kreis: 40 hoch, 51 ueber der Kante. */
  .instagram-gallery_track .w-dyn-item::after {
    transform: translateY(calc(100% + 51px));
  }
  /* Text: 17 hoch, 24 ueber der Kante. */
  .instagram-gallery_track .tile-hint_label {
    transform: translateY(calc(100% + 24px));
  }
  /* Das Play-Dreieck der Videokacheln faehrt MIT dem Kreis ein. Es liegt
     in einem eigenen <span>, weil beide Pseudo-Elemente der Kachel
     vergeben sind - und hat deshalb die Bewegung zunaechst nicht
     mitgemacht: der Kreis fuhr ein, das Dreieck stand schon da.
     Dieselben Masse wie der Kreis (40 hoch, 51 ueber der Kante), also
     dieselbe Verschiebung. Das ist zum dritten Mal derselbe Fehler in
     diesem Abschnitt: `translateY(100%)` verschiebt nur um die EIGENE
     Hoehe, der `bottom`-Abstand muss dazu. */
  .instagram-gallery_track .tile-video_play {
    transition: transform calc(var(--_sizes---motion--duration--fast, 200) * 1ms)
                cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(calc(100% + 51px));
  }
  .instagram-gallery_track .w-dyn-item:hover::before,
  .instagram-gallery_track .w-dyn-item:hover::after,
  .instagram-gallery_track .w-dyn-item:hover .tile-hint_label,
  .instagram-gallery_track .w-dyn-item:hover .tile-video_play {
    transform: translateY(0);
  }
  /* Der Kreis wird per `margin-left` zentriert, sein `transform` ist
     also frei — anders als bei Text und Verlauf, die `left/right: 0`
     nutzen. Kein Konflikt, aber der Vollstaendigkeit halber getrennt
     notiert, damit spaetere Aenderungen nicht versehentlich die
     Zentrierung ueberschreiben. */
}
/* ------------------------------------------ Tablet und Telefon: statisch
   Vorgabe: Plus und Verlauf immer sichtbar, KEIN Text.
   Abgegrenzt ueber `hover: none` statt einer Breite: entscheidend ist das
   Eingabegeraet, nicht das Fenster. Ein schmales Desktopfenster behaelt
   damit den Hover, ein grosses Tablet zeigt den statischen Zustand — das
   ist das gewuenschte Verhalten. */
@media (hover: none), (pointer: coarse) {
  .instagram-gallery_track .tile-hint_label {
    display: none;
  }
  /* Ohne Text rueckt der Kreis nach unten an dessen Platz: im Design
     sitzt der Kreis 51px ueber der Kante, der Text 24px. Ohne Text
     waere unten zu viel Luft — deshalb der Kreis auf die 24px des
     Textes plus dessen halbe Hoehe, gerundet auf 32px.
     Das Play-Dreieck braucht hier die VOLLE Kette `.w-dyn-item.has-video
     .tile-video_play`. Mit nur zwei Klassen verliert die Regel gegen die
     Grundregel weiter oben (drei Klassen, `bottom: 51px`) - unabhaengig
     von der Reihenfolge. Gemessen am 12. Sep im emulierten Telefon: das
     Dreieck sass 19px ueber dem Kreis. Gleiche Spezifitaet loest das,
     nicht `!important` - siehe den Befund zu `.leistungen_head` in
     qa/TODO.md. */
  .instagram-gallery_track .w-dyn-item::after,
  .instagram-gallery_track .w-dyn-item.has-video .tile-video_play {
    bottom: 32px;
  }
}
/* Reduced motion: der Hinweis erscheint, aber ohne Bewegung. */
@media (prefers-reduced-motion: reduce) {
  .instagram-gallery_track .w-dyn-item::before,
  .instagram-gallery_track .w-dyn-item::after,
  .instagram-gallery_track .tile-hint_label,
  .instagram-gallery_track .tile-video_play {
    transition: none;
  }
}
/* ============================================================ Bild-Modal
   Klick auf eine Galerie-Kachel zeigt das Bild gross. Gilt fuer ALLE drei
   Galerien (Startseite, /services, /karriere) - der Traeger ist
   `.instagram-gallery_track`, wie beim Hinweis darueber.
   Gebaut als EIN Dialog am <body>, nicht als Modal je Kachel: die Kacheln
   kommen aus dem CMS und werden bei jedem Republish neu geschrieben. Der
   Dialog wird von `footer.js` einmal erzeugt und mit dem jeweiligen Bild
   befuellt - siehe dort.
   <dialog> statt eigenem Overlay: der Browser bringt Fokusfalle, ESC und
   die Hintergrund-Inertheit selbst mit. Das ::backdrop ist die
   Abdunklung; ein eigenes Element dafuer waere ein zweiter Weg zum
   selben Ziel. */
/* Der Dialog fuellt das Sichtfeld und zentriert das Bild darin. Das ist
   noetig, damit der Schliessen-Knopf in der SEITEN-Ecke sitzen kann und
   nicht am Bild klebt: ein auf Bildbreite geschrumpfter Dialog hat keine
   Seitenecke, an der sich der Knopf ausrichten koennte. */
/* `display: flex` NUR im geoeffneten Zustand.
   Ein unbedingtes `display: flex` schlaegt die Browser-Regel
   `dialog:not([open]) { display: none }` und laesst den Dialog auch
   geschlossen im Layout stehen - 100vw x 100vh, unsichtbar nur deshalb,
   weil er transparent ist und ohne ::backdrop auskommt.
   Folgen, am 12. Sep live gemessen: nach dem Schliessen blieb der
   Schliessknopf sichtbar, das `alt` des Bildes stand als Ersatztext
   mitten auf der Seite, und `elementFromPoint` in der Seitenmitte traf
   das Modal-Bild statt den Seiteninhalt - die unsichtbare Flaeche hat
   Klicks geschluckt.
   Der `[open]`-Selektor ist die Loesung, nicht ein `display: none` in
   einer zweiten Regel: so bleibt genau eine Quelle fuer die Sichtbarkeit,
   und der geschlossene Dialog faellt wieder unter die Browser-Regel. */
.gallery-modal[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-modal {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  padding: 0;
  border: 0;
  background-color: transparent;
  overflow: visible;
}
.gallery-modal::backdrop {
  /* brand-900 wie der Kachel-Verlauf, damit die Abdunklung zur Seite
     passt statt neutral-schwarz zu sein. */
  background-color: rgba(16, 30, 38, 0.82);
}
.gallery-modal_img {
  display: block;
  max-width: min(92vw, 900px);
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: var(--_sizes---radius--md);
  object-fit: contain;
}
/* Der Schliessen-Knopf ist derselbe Knopf wie die Karussell-Pfeile -
   `.carousel_arrow` bringt 64x64, Rand `brand-500`, weisse Flaeche und
   Pillenform mit. Hier wird nur das Icon getauscht: das X liegt als
   Maske auf `currentColor`, damit es dieselbe Farbe traegt wie der
   Pfeil und ohne zweites Asset auskommt.
   `background-image: none` hebt den Pfeil der Basisklasse auf - sonst
   laegen beide Symbole uebereinander. */
/* Der Knopf sitzt in der SEITEN-Ecke, nicht auf dem Bild - auf Wunsch
   vom 4. Sep. Bezug ist der Dialog, der jetzt das ganze Sichtfeld
   fuellt; `fixed` waere hier gleichwertig, `absolute` bleibt aber im
   Dialog-Kontext und damit in dessen Top-Layer.
   WICHTIG - `background-image` muss auch im HOVER aufgehoben werden.
   `.carousel_arrow:not(:disabled):hover` setzt dort das weisse Pfeil-SVG,
   und genau dieser Pfeil erschien beim Ueberfahren im X-Knopf. Die Regel
   unten deckt beide Zustaende ab. */
.gallery-modal_close {
  position: absolute;
  top: var(--_sizes---space--4);
  right: var(--_sizes---space--4);
  z-index: 2;
  background-image: none;
  /* Auf hellen Bildpartien braucht der weisse Knopf eine Kante, sonst
     verschwindet er. Derselbe Schatten wie am Sticky-Bewerben-Knopf. */
  box-shadow: 0 2px 12px rgba(16, 30, 38, 0.28);
}
/* KEIN Ring um den Knopf - auf ausdrueckliche Ansage vom 4. Sep.
   `showModal()` setzt den Fokus beim Oeffnen auf den ersten Knopf im
   Dialog, das ist dieser. Der Browser zeichnet dort seinen Fokusring,
   ohne dass jemand die Tastatur benutzt haette.
   Erster Anlauf war `:focus` ohne Ring und `:focus-visible` MIT, um die
   Tastaturbedienung zu erhalten. Der zusaetzliche Ring blieb aber
   sichtbar - deshalb jetzt beide Zustaende ohne Outline.
   Die Tastatur verliert damit nichts Wesentliches: `showModal()` faengt
   den Fokus ohnehin im Dialog ein, und ESC schliesst zusaetzlich.
   NACHTRAG 16. Sep: Hier stand "der Dialog hat genau einen Knopf". Seit
   den Album-Pfeilen sind es drei. Die Regel bleibt trotzdem auf
   `.gallery-modal_close` beschraenkt - genau dieser Knopf bekommt beim
   Oeffnen den Fokus, ohne dass jemand die Tastatur benutzt hat, und nur
   darum ging es. Die Pfeile behalten ihren Fokusring: wer mit Tab
   dorthin geht, hat die Tastatur bewusst in der Hand und soll sehen,
   wo er steht. */
.gallery-modal_close:focus,
.gallery-modal_close:focus-visible {
  outline: none;
}
/* Der Pfeil im Hover kommt aus `.carousel_arrow:not(:disabled):hover`
   (Zeile ~715). Diese Regel steht in einer Media Query und traegt durch
   `:not(:disabled)` eine hoehere Spezifitaet - ein einfaches
   `.gallery-modal_close:hover` verliert dagegen. Gemessen: der weisse
   Pfeil war im Hover weiterhin gesetzt.
   Deshalb hier dieselbe Form und dieselbe Media Query. Kein
   `!important`: die Regel gewinnt jetzt regulaer ueber die Reihenfolge,
   und der naechste Leser sieht am Selektor, warum.
   Dazu die Textfarbe auf Weiss - der Hover faerbt die Flaeche
   `brand-500`, setzt aber kein `color`; unser X haengt an
   `currentColor` und bliebe sonst blau auf blauem Grund. */
@media (hover: hover) and (pointer: fine) {
  .gallery-modal_close:not(:disabled):hover {
    background-image: none;
    color: var(--_colour---white);
  }
}
.gallery-modal_close::before {
  content: "";
  width: 32px;
  height: 32px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5l5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6z'/%3E%3C/svg%3E") no-repeat 50% 50% / 32px 32px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5l5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6z'/%3E%3C/svg%3E") no-repeat 50% 50% / 32px 32px;
}
/* ------------------------------------ Blaettern im Modal — 16. September
   Im Modal fuehren zwei Pfeile durch die Medien, ein Zaehler sagt, wo
   man ist. Auf der Startseite durch die Alben, auf allen uebrigen
   Galerien durch deren eigene Kacheln - siehe footer.js.
   DIESELBEN PFEILE WIE UNTER DER GALERIE — auf Ansage vom 17. Sep.
   Die Klasse `.carousel_arrow` bringt Flaeche, Rand, Radius UND das
   Pfeil-SVG als `background-image` mit; der Hover tauscht es gegen die
   weisse Fassung. Beides kommt jetzt unveraendert durch.
   Vorher stand hier `background-image: none` und darunter ein eigenes
   Chevron als Maske - zwei Symbole fuer dieselbe Geste, und das
   Modal-Chevron sah anders aus als der Karussell-Pfeil direkt darunter.
   Die Maske ist deshalb ersatzlos weg.
   `[hidden]` MUSS hier stehen: `display: flex` schlaegt sonst das
   Standard-`display: none` des Attributs. Am 17. Sep waren die Pfeile
   auf /services deshalb sichtbar, obwohl das Skript sie abgeschaltet
   hatte - man klickte einen Knopf, der bewusst wirkungslos war. */
.gallery-modal_prev,
.gallery-modal_next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  /* Wie am Schliessknopf: auf hellen Bildpartien braucht der weisse
     Knopf eine Kante, sonst verschwindet er. */
  box-shadow: 0 2px 12px rgba(16, 30, 38, 0.28);
}
.gallery-modal_prev[hidden],
.gallery-modal_next[hidden],
.gallery-modal_count[hidden] {
  display: none !important;
}
/* Das SVG zeigt nach rechts. Der Linkspfeil ist dasselbe Symbol
   gespiegelt - genauso loest es `.carousel_arrow[data-carousel="prev"]`
   fuer die Pfeile unter der Galerie. `translateY` muss mitgeschrieben
   werden, sonst geht die senkrechte Zentrierung verloren. */
.gallery-modal_prev {
  left: var(--_sizes---space--4);
  transform: translateY(-50%) scaleX(-1);
}
.gallery-modal_next { right: var(--_sizes---space--4); }
/* Der Hover kommt vollstaendig aus `.carousel_arrow:not(:disabled):hover`
   (Zeile ~737): blaue Flaeche, weisses Pfeil-SVG. Hier steht bewusst
   KEINE eigene Regel mehr.
   Vorher setzte diese Stelle `background-image: none` und haette damit
   genau das weisse Icon unterdrueckt, das den Hover ausmacht - ein Rest
   aus der Zeit, als das Chevron eine eigene Maske war. */
/* Die Pfeile behalten ihren Fokusring - aber nur fuer die Tastatur.
   Nach einem Mausklick bleibt der Fokus auf dem Knopf stehen, und der
   Ring waere dann bloss Rauschen: gemessen am 16. Sep, der linke Pfeil
   trug nach jedem Klick einen orangen Ring.
   `:focus-visible` unterscheidet das - anders als am Schliessknopf, wo
   der Ring ganz weg musste (der bekommt den Fokus beim Oeffnen, ohne
   dass jemand die Tastatur angefasst hat). Hier ist der Fokus immer
   Folge einer Nutzerhandlung, deshalb bleibt die Tastaturmarkierung. */
.gallery-modal_prev:focus:not(:focus-visible),
.gallery-modal_next:focus:not(:focus-visible) {
  outline: none;
}
/* Der Zaehler steht unten mittig. Kein `aria-live`: der Alt-Text des
   neuen Bildes wird ohnehin angesagt, ein zweites Signal je Klick waere
   Laerm - deshalb traegt er im Markup `aria-hidden`. */
.gallery-modal_count {
  position: absolute;
  /* 6vh: das Bild ist `max-height: 88vh` und mittig, laesst unten also
     6vh frei. Der Zaehler sitzt damit UNTER dem Bild statt darauf -
     bei 4:5-Hochformat fuellt das Bild die Hoehe aus, und ein Zaehler
     im Bild verdeckt einen Teil der Aufnahme.
     Die dunkle Pille bleibt trotzdem: der Dialoghintergrund ist zwar
     abgedunkelt, aber ein heller Bildrand kann bis hierher reichen. */
  bottom: max(6vh - 34px, var(--_sizes---space--2));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background-color: rgba(16, 30, 38, 0.62);
  color: var(--_colour---white);
  font-size: 14px;
  line-height: 1.2;
  /* Der Zaehler ist Auskunft, kein Bedienelement - Klicks gehen an das
     Modal darunter, damit "neben das Bild klicken" auch hier schliesst. */
  pointer-events: none;
}
/* Auf schmalen Schirmen ruecken die Pfeile an den Rand und nach unten
   neben den Zaehler: mittig ueber dem Bild verdecken sie bei 4:5 zu
   viel vom Motiv, und der Daumen erreicht sie unten leichter. */
@media (max-width: 767px) {
  .gallery-modal_prev,
  .gallery-modal_next {
    top: auto;
    bottom: var(--_sizes---space--4);
    transform: none;
  }
  /* Die Spiegelung muss hier erneut stehen: `transform: none` oben
     loescht sie mit der Zentrierung, und der Linkspfeil zeigte auf
     Mobil nach rechts (gemeldet 23. Sep). */
  .gallery-modal_prev { left: var(--_sizes---space--3); transform: scaleX(-1); }
  .gallery-modal_next { right: var(--_sizes---space--3); }
}
/* Die Kachel ist anklickbar - das war vorher nur `cursor: pointer` ohne
   Funktion. Jetzt ist es ein echter Knopf fuer Tastatur und Screenreader;
   der Fokusring folgt derselben Sprache wie anderswo auf der Seite. */
.instagram-gallery_track .w-dyn-item:focus-visible {
  outline: 2px solid var(--_colour---brand-500);
  outline-offset: 3px;
}
/* Fahrzeug-Icons der Uebersichtskarten, direkt aus dem Figma-Artboard
   (Knoten 4396:4476). Als Maske, damit der Hover sie weiss faerben kann
   - Begruendung steht an `.usecase-card_icon`.
   Schiebeplane, Wechselrahmen, BE-Combi und Sattelauflieger teilen sich
   im Design denselben Truck-Pfad; er steht deshalb nur einmal hier. */
.usecase-card_icon[data-icon="kuehlfahrzeuge"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2025%2025%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M11.25%2017.3583L8.1385%2020.4635C7.99333%2020.6128%207.80658%2020.6865%207.57825%2020.6845C7.34992%2020.6825%207.15483%2020.6088%206.993%2020.4635C6.831%2020.3017%206.75%2020.1066%206.75%2019.8783C6.75%2019.6499%206.831%2019.4548%206.993%2019.293L11.25%2015.0358V12.8815H9.09575L4.9135%2017.0575C4.76833%2017.2068%204.58158%2017.2857%204.35325%2017.294C4.12492%2017.3023%203.92983%2017.2318%203.768%2017.0825C3.602%2016.9207%203.51583%2016.7266%203.5095%2016.5003C3.50317%2016.2739%203.58933%2016.0715%203.768%2015.893L6.77325%2012.8815H2.79075C2.57075%2012.8815%202.384%2012.8037%202.2305%2012.648C2.07683%2012.4925%202%2012.2984%202%2012.0658C2%2011.8457%202.07783%2011.6548%202.2335%2011.493C2.389%2011.331%202.58308%2011.25%202.81575%2011.25H6.77325L3.668%208.1635C3.502%208.00167%203.42%207.80658%203.422%207.57825C3.424%207.34992%203.506%207.15483%203.668%206.993C3.82983%206.831%204.02492%206.75%204.25325%206.75C4.48158%206.75%204.67667%206.831%204.8385%206.993L9.09575%2011.25H11.25V9.06475L7.074%204.9135C6.92467%204.76833%206.85%204.58158%206.85%204.35325C6.85%204.12492%206.92467%203.92983%207.074%203.768C7.23583%203.602%207.42992%203.519%207.65625%203.519C7.88258%203.519%208.085%203.602%208.2635%203.768L11.25%206.74825V2.81575C11.25%202.59575%2011.3278%202.40483%2011.4835%202.243C11.639%202.081%2011.8331%202%2012.0658%202C12.2858%202%2012.4767%202.081%2012.6385%202.243C12.8005%202.40483%2012.8815%202.59575%2012.8815%202.81575V6.74825L15.968%203.668C16.1298%203.502%2016.3249%203.42%2016.5533%203.422C16.7816%203.424%2016.9767%203.506%2017.1385%203.668C17.2838%203.82983%2017.3565%204.02492%2017.3565%204.25325C17.3565%204.48158%2017.2755%204.67667%2017.1135%204.8385L12.8815%209.06475V11.25H15.0667L19.243%207.068C19.3882%206.92267%2019.5749%206.85%2019.8033%206.85C20.0316%206.85%2020.2267%206.92267%2020.3885%207.068C20.5545%207.23383%2020.6375%207.42992%2020.6375%207.65625C20.6375%207.88258%2020.5545%208.07667%2020.3885%208.2385L17.3833%2011.25H21.3158C21.5358%2011.25%2021.7267%2011.331%2021.8885%2011.493C22.0505%2011.6548%2022.1315%2011.8457%2022.1315%2012.0658C22.1315%2012.2984%2022.0505%2012.4925%2021.8885%2012.648C21.7267%2012.8037%2021.5358%2012.8815%2021.3158%2012.8815H17.3833L20.4385%2015.993C20.6045%2016.1382%2020.6865%2016.3249%2020.6845%2016.5533C20.6825%2016.7816%2020.6005%2016.9683%2020.4385%2017.1135C20.2893%2017.2922%2020.1016%2017.3815%2019.8752%2017.3815C19.6489%2017.3815%2019.4548%2017.3005%2019.293%2017.1385L15.0667%2012.8815H12.8815V15.0358L17.1385%2019.343C17.3005%2019.4882%2017.3815%2019.6749%2017.3815%2019.9032C17.3815%2020.1316%2017.3005%2020.3183%2017.1385%2020.4635C16.9893%2020.6422%2016.8016%2020.7325%2016.5753%2020.7345C16.3489%2020.7365%2016.1548%2020.6545%2015.993%2020.4885L12.8815%2017.3583V21.3407C12.8815%2021.5608%2012.8005%2021.7475%2012.6385%2021.901C12.4767%2022.0547%2012.2858%2022.1315%2012.0658%2022.1315C11.8331%2022.1315%2011.639%2022.0537%2011.4835%2021.898C11.3278%2021.7425%2011.25%2021.5484%2011.25%2021.3158V17.3583Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2025%2025%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M11.25%2017.3583L8.1385%2020.4635C7.99333%2020.6128%207.80658%2020.6865%207.57825%2020.6845C7.34992%2020.6825%207.15483%2020.6088%206.993%2020.4635C6.831%2020.3017%206.75%2020.1066%206.75%2019.8783C6.75%2019.6499%206.831%2019.4548%206.993%2019.293L11.25%2015.0358V12.8815H9.09575L4.9135%2017.0575C4.76833%2017.2068%204.58158%2017.2857%204.35325%2017.294C4.12492%2017.3023%203.92983%2017.2318%203.768%2017.0825C3.602%2016.9207%203.51583%2016.7266%203.5095%2016.5003C3.50317%2016.2739%203.58933%2016.0715%203.768%2015.893L6.77325%2012.8815H2.79075C2.57075%2012.8815%202.384%2012.8037%202.2305%2012.648C2.07683%2012.4925%202%2012.2984%202%2012.0658C2%2011.8457%202.07783%2011.6548%202.2335%2011.493C2.389%2011.331%202.58308%2011.25%202.81575%2011.25H6.77325L3.668%208.1635C3.502%208.00167%203.42%207.80658%203.422%207.57825C3.424%207.34992%203.506%207.15483%203.668%206.993C3.82983%206.831%204.02492%206.75%204.25325%206.75C4.48158%206.75%204.67667%206.831%204.8385%206.993L9.09575%2011.25H11.25V9.06475L7.074%204.9135C6.92467%204.76833%206.85%204.58158%206.85%204.35325C6.85%204.12492%206.92467%203.92983%207.074%203.768C7.23583%203.602%207.42992%203.519%207.65625%203.519C7.88258%203.519%208.085%203.602%208.2635%203.768L11.25%206.74825V2.81575C11.25%202.59575%2011.3278%202.40483%2011.4835%202.243C11.639%202.081%2011.8331%202%2012.0658%202C12.2858%202%2012.4767%202.081%2012.6385%202.243C12.8005%202.40483%2012.8815%202.59575%2012.8815%202.81575V6.74825L15.968%203.668C16.1298%203.502%2016.3249%203.42%2016.5533%203.422C16.7816%203.424%2016.9767%203.506%2017.1385%203.668C17.2838%203.82983%2017.3565%204.02492%2017.3565%204.25325C17.3565%204.48158%2017.2755%204.67667%2017.1135%204.8385L12.8815%209.06475V11.25H15.0667L19.243%207.068C19.3882%206.92267%2019.5749%206.85%2019.8033%206.85C20.0316%206.85%2020.2267%206.92267%2020.3885%207.068C20.5545%207.23383%2020.6375%207.42992%2020.6375%207.65625C20.6375%207.88258%2020.5545%208.07667%2020.3885%208.2385L17.3833%2011.25H21.3158C21.5358%2011.25%2021.7267%2011.331%2021.8885%2011.493C22.0505%2011.6548%2022.1315%2011.8457%2022.1315%2012.0658C22.1315%2012.2984%2022.0505%2012.4925%2021.8885%2012.648C21.7267%2012.8037%2021.5358%2012.8815%2021.3158%2012.8815H17.3833L20.4385%2015.993C20.6045%2016.1382%2020.6865%2016.3249%2020.6845%2016.5533C20.6825%2016.7816%2020.6005%2016.9683%2020.4385%2017.1135C20.2893%2017.2922%2020.1016%2017.3815%2019.8752%2017.3815C19.6489%2017.3815%2019.4548%2017.3005%2019.293%2017.1385L15.0667%2012.8815H12.8815V15.0358L17.1385%2019.343C17.3005%2019.4882%2017.3815%2019.6749%2017.3815%2019.9032C17.3815%2020.1316%2017.3005%2020.3183%2017.1385%2020.4635C16.9893%2020.6422%2016.8016%2020.7325%2016.5753%2020.7345C16.3489%2020.7365%2016.1548%2020.6545%2015.993%2020.4885L12.8815%2017.3583V21.3407C12.8815%2021.5608%2012.8005%2021.7475%2012.6385%2021.901C12.4767%2022.0547%2012.2858%2022.1315%2012.0658%2022.1315C11.8331%2022.1315%2011.639%2022.0537%2011.4835%2021.898C11.3278%2021.7425%2011.25%2021.5484%2011.25%2021.3158V17.3583Z%22%2F%3E%3C%2Fsvg%3E"); }
.usecase-card_icon[data-icon="kofferaufbau"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M3.8552%2018.7387C3.31037%2018.1927%203.03795%2017.5298%203.03795%2016.75H1.3457V6.30775C1.3457%205.80258%201.5207%205.375%201.8707%205.025C2.2207%204.675%202.6482%204.5%203.1532%204.5H16.7687V8.30775H19.4225L22.6532%2012.6348V16.75H20.8457C20.8457%2017.5298%2020.5725%2018.1927%2020.026%2018.7387C19.4796%2019.2847%2018.8162%2019.5577%2018.0357%2019.5577C17.2552%2019.5577%2016.5925%2019.2847%2016.0475%2018.7387C15.5026%2018.1927%2015.2302%2017.5298%2015.2302%2016.75H8.6532C8.6532%2017.532%208.38004%2018.1954%207.8337%2018.7402C7.28737%2019.2852%206.62395%2019.5577%205.84345%2019.5577C5.06279%2019.5577%204.40004%2019.2847%203.8552%2018.7387ZM6.77445%2017.6788C7.02695%2017.4263%207.1532%2017.1167%207.1532%2016.75C7.1532%2016.3833%207.02695%2016.0737%206.77445%2015.821C6.52195%2015.5685%206.21237%2015.4423%205.8457%2015.4423C5.47904%2015.4423%205.16937%2015.5685%204.9167%2015.821C4.6642%2016.0737%204.53795%2016.3833%204.53795%2016.75C4.53795%2017.1167%204.6642%2017.4263%204.9167%2017.6788C5.16937%2017.9314%205.47904%2018.0577%205.8457%2018.0577C6.21237%2018.0577%206.52195%2017.9314%206.77445%2017.6788ZM2.8457%2015.25H3.5687C3.78154%2014.8795%204.08887%2014.5689%204.4907%2014.3183C4.8927%2014.0676%205.34437%2013.9423%205.8457%2013.9423C6.33404%2013.9423%206.78237%2014.066%207.1907%2014.3135C7.59904%2014.561%207.90962%2014.8732%208.12245%2015.25H15.2687V6H3.1532C3.07637%206%203.00587%206.03208%202.9417%206.09625C2.8777%206.16025%202.8457%206.23075%202.8457%206.30775V15.25ZM18.9667%2017.6788C19.2194%2017.4263%2019.3457%2017.1167%2019.3457%2016.75C19.3457%2016.3833%2019.2194%2016.0737%2018.9667%2015.821C18.7142%2015.5685%2018.4046%2015.4423%2018.038%2015.4423C17.6713%2015.4423%2017.3616%2015.5685%2017.109%2015.821C16.8565%2016.0737%2016.7302%2016.3833%2016.7302%2016.75C16.7302%2017.1167%2016.8565%2017.4263%2017.109%2017.6788C17.3616%2017.9314%2017.6713%2018.0577%2018.038%2018.0577C18.4046%2018.0577%2018.7142%2017.9314%2018.9667%2017.6788ZM16.7687%2013.25H21.2495L18.6532%209.80775H16.7687V13.25Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M3.8552%2018.7387C3.31037%2018.1927%203.03795%2017.5298%203.03795%2016.75H1.3457V6.30775C1.3457%205.80258%201.5207%205.375%201.8707%205.025C2.2207%204.675%202.6482%204.5%203.1532%204.5H16.7687V8.30775H19.4225L22.6532%2012.6348V16.75H20.8457C20.8457%2017.5298%2020.5725%2018.1927%2020.026%2018.7387C19.4796%2019.2847%2018.8162%2019.5577%2018.0357%2019.5577C17.2552%2019.5577%2016.5925%2019.2847%2016.0475%2018.7387C15.5026%2018.1927%2015.2302%2017.5298%2015.2302%2016.75H8.6532C8.6532%2017.532%208.38004%2018.1954%207.8337%2018.7402C7.28737%2019.2852%206.62395%2019.5577%205.84345%2019.5577C5.06279%2019.5577%204.40004%2019.2847%203.8552%2018.7387ZM6.77445%2017.6788C7.02695%2017.4263%207.1532%2017.1167%207.1532%2016.75C7.1532%2016.3833%207.02695%2016.0737%206.77445%2015.821C6.52195%2015.5685%206.21237%2015.4423%205.8457%2015.4423C5.47904%2015.4423%205.16937%2015.5685%204.9167%2015.821C4.6642%2016.0737%204.53795%2016.3833%204.53795%2016.75C4.53795%2017.1167%204.6642%2017.4263%204.9167%2017.6788C5.16937%2017.9314%205.47904%2018.0577%205.8457%2018.0577C6.21237%2018.0577%206.52195%2017.9314%206.77445%2017.6788ZM2.8457%2015.25H3.5687C3.78154%2014.8795%204.08887%2014.5689%204.4907%2014.3183C4.8927%2014.0676%205.34437%2013.9423%205.8457%2013.9423C6.33404%2013.9423%206.78237%2014.066%207.1907%2014.3135C7.59904%2014.561%207.90962%2014.8732%208.12245%2015.25H15.2687V6H3.1532C3.07637%206%203.00587%206.03208%202.9417%206.09625C2.8777%206.16025%202.8457%206.23075%202.8457%206.30775V15.25ZM18.9667%2017.6788C19.2194%2017.4263%2019.3457%2017.1167%2019.3457%2016.75C19.3457%2016.3833%2019.2194%2016.0737%2018.9667%2015.821C18.7142%2015.5685%2018.4046%2015.4423%2018.038%2015.4423C17.6713%2015.4423%2017.3616%2015.5685%2017.109%2015.821C16.8565%2016.0737%2016.7302%2016.3833%2016.7302%2016.75C16.7302%2017.1167%2016.8565%2017.4263%2017.109%2017.6788C17.3616%2017.9314%2017.6713%2018.0577%2018.038%2018.0577C18.4046%2018.0577%2018.7142%2017.9314%2018.9667%2017.6788ZM16.7687%2013.25H21.2495L18.6532%209.80775H16.7687V13.25Z%22%2F%3E%3C%2Fsvg%3E"); }
.usecase-card_icon[data-icon="schiebeplanenaufbau"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M6.7023%2020.3276C5.84063%2020.3276%205.1333%2020.0177%204.5803%2019.3981C4.02713%2018.7782%203.79221%2018.0459%203.87555%2017.2011H2.3843C2.14396%2017.2011%201.94188%2017.1188%201.77805%2016.9543C1.61438%2016.7896%201.53255%2016.5866%201.53255%2016.3451C1.53255%2016.1034%201.61438%2015.9017%201.77805%2015.7401C1.94188%2015.5786%202.14396%2015.4978%202.3843%2015.4978H4.6978C4.9398%2015.2296%205.2318%2015.0171%205.5738%2014.8601C5.9158%2014.7029%206.29171%2014.6243%206.70155%2014.6243C7.11138%2014.6243%207.48646%2014.703%207.8268%2014.8603C8.16696%2015.0178%208.46021%2015.2303%208.70655%2015.4978H13.6865L16.0163%205.37331H5.5978C5.3493%205.37331%205.14838%205.29106%204.99505%205.12656C4.84188%204.96206%204.7653%204.75915%204.7653%204.51781C4.7653%204.27648%204.84713%204.07381%205.0108%203.90981C5.17446%203.74598%205.37846%203.66406%205.6228%203.66406H17.0728C17.3381%203.66406%2017.5599%203.77281%2017.738%203.99031C17.9164%204.20798%2017.9785%204.4494%2017.9245%204.71456L17.1255%208.14706H19.393C19.6654%208.14706%2019.921%208.20623%2020.1598%208.32456C20.3988%208.44273%2020.599%208.60948%2020.7603%208.82481L22.6945%2011.4221C22.8455%2011.6296%2022.9455%2011.8444%2022.9943%2012.0666C23.0431%2012.2889%2023.0469%2012.5216%2023.0055%2012.7646L22.2625%2016.4983C22.2219%2016.7%2022.1216%2016.8675%2021.9618%2017.0008C21.802%2017.1343%2021.6203%2017.2011%2021.4168%2017.2011H20.0538C20.1371%2018.0496%2019.8981%2018.7828%2019.3368%2019.4008C18.7753%2020.0186%2018.0638%2020.3276%2017.2023%2020.3276C16.3406%2020.3276%2015.6333%2020.0177%2015.0803%2019.3981C14.5271%2018.7782%2014.2922%2018.0459%2014.3755%2017.2011H9.5538C9.63713%2018.0496%209.39813%2018.7828%208.8368%2019.4008C8.2753%2020.0186%207.5638%2020.3276%206.7023%2020.3276ZM15.9458%2013.2728H21.1473L21.3093%2012.4118L19.393%209.85056H16.7305L15.9458%2013.2728ZM13.8865%2014.5978L14.049%2013.9448C14.1574%2013.5095%2014.2782%2012.9731%2014.4115%2012.3358C14.4847%2012.0455%2014.5486%2011.7685%2014.6033%2011.5048C14.658%2011.241%2014.712%2011.0117%2014.7655%2010.8171L14.9255%2010.1648C15.032%209.72981%2015.153%209.19331%2015.2883%208.55531C15.4236%207.91731%2015.5423%207.37965%2015.6443%206.94231L15.7973%206.28631L16.0163%205.37331L13.6865%2015.4978L13.8865%2014.5978ZM1.48705%2013.1873C1.23855%2013.1873%201.03763%2013.1055%200.884297%2012.9418C0.730964%2012.7781%200.654297%2012.5761%200.654297%2012.3358C0.654297%2012.0953%200.73513%2011.8932%200.896797%2011.7296C1.05846%2011.5659%201.26355%2011.4841%201.51205%2011.4841H5.51805C5.75838%2011.4841%205.96038%2011.5663%206.12405%2011.7308C6.28771%2011.8955%206.36955%2012.0986%206.36955%2012.3401C6.36955%2012.5817%206.28771%2012.7834%206.12405%2012.9451C5.96038%2013.1066%205.75838%2013.1873%205.51805%2013.1873H1.48705ZM3.48705%209.40581C3.24271%209.40581%203.03863%209.32356%202.8748%209.15906C2.71113%208.99456%202.6293%208.79165%202.6293%208.55031C2.6293%208.30915%202.71113%208.10656%202.8748%207.94256C3.03863%207.77856%203.24271%207.69656%203.48705%207.69656H8.51205C8.75188%207.69656%208.9548%207.77998%209.1208%207.94681C9.28663%208.11381%209.36955%208.3179%209.36955%208.55906C9.36955%208.8004%209.28663%209.0019%209.1208%209.16356C8.9548%209.32506%208.75188%209.40581%208.51205%209.40581H3.48705ZM6.7138%2018.6243C7.02646%2018.6243%207.29405%2018.5091%207.51655%2018.2788C7.73921%2018.0485%207.85055%2017.777%207.85055%2017.4643C7.85055%2017.1518%207.74063%2016.8842%207.5208%2016.6616C7.3008%2016.4389%207.02821%2016.3276%206.70305%2016.3276C6.39888%2016.3276%206.1313%2016.4376%205.9003%2016.6576C5.6693%2016.8774%205.5538%2017.1499%205.5538%2017.4751C5.5538%2017.7794%205.66896%2018.047%205.8993%2018.2778C6.12963%2018.5088%206.40113%2018.6243%206.7138%2018.6243ZM17.2138%2018.6243C17.5265%2018.6243%2017.794%2018.5091%2018.0165%2018.2788C18.2392%2018.0485%2018.3505%2017.777%2018.3505%2017.4643C18.3505%2017.1518%2018.2406%2016.8842%2018.0208%2016.6616C17.8008%2016.4389%2017.5282%2016.3276%2017.203%2016.3276C16.8989%2016.3276%2016.6313%2016.4376%2016.4003%2016.6576C16.1693%2016.8774%2016.0538%2017.1499%2016.0538%2017.4751C16.0538%2017.7794%2016.169%2018.047%2016.3993%2018.2778C16.6296%2018.5088%2016.9011%2018.6243%2017.2138%2018.6243Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M6.7023%2020.3276C5.84063%2020.3276%205.1333%2020.0177%204.5803%2019.3981C4.02713%2018.7782%203.79221%2018.0459%203.87555%2017.2011H2.3843C2.14396%2017.2011%201.94188%2017.1188%201.77805%2016.9543C1.61438%2016.7896%201.53255%2016.5866%201.53255%2016.3451C1.53255%2016.1034%201.61438%2015.9017%201.77805%2015.7401C1.94188%2015.5786%202.14396%2015.4978%202.3843%2015.4978H4.6978C4.9398%2015.2296%205.2318%2015.0171%205.5738%2014.8601C5.9158%2014.7029%206.29171%2014.6243%206.70155%2014.6243C7.11138%2014.6243%207.48646%2014.703%207.8268%2014.8603C8.16696%2015.0178%208.46021%2015.2303%208.70655%2015.4978H13.6865L16.0163%205.37331H5.5978C5.3493%205.37331%205.14838%205.29106%204.99505%205.12656C4.84188%204.96206%204.7653%204.75915%204.7653%204.51781C4.7653%204.27648%204.84713%204.07381%205.0108%203.90981C5.17446%203.74598%205.37846%203.66406%205.6228%203.66406H17.0728C17.3381%203.66406%2017.5599%203.77281%2017.738%203.99031C17.9164%204.20798%2017.9785%204.4494%2017.9245%204.71456L17.1255%208.14706H19.393C19.6654%208.14706%2019.921%208.20623%2020.1598%208.32456C20.3988%208.44273%2020.599%208.60948%2020.7603%208.82481L22.6945%2011.4221C22.8455%2011.6296%2022.9455%2011.8444%2022.9943%2012.0666C23.0431%2012.2889%2023.0469%2012.5216%2023.0055%2012.7646L22.2625%2016.4983C22.2219%2016.7%2022.1216%2016.8675%2021.9618%2017.0008C21.802%2017.1343%2021.6203%2017.2011%2021.4168%2017.2011H20.0538C20.1371%2018.0496%2019.8981%2018.7828%2019.3368%2019.4008C18.7753%2020.0186%2018.0638%2020.3276%2017.2023%2020.3276C16.3406%2020.3276%2015.6333%2020.0177%2015.0803%2019.3981C14.5271%2018.7782%2014.2922%2018.0459%2014.3755%2017.2011H9.5538C9.63713%2018.0496%209.39813%2018.7828%208.8368%2019.4008C8.2753%2020.0186%207.5638%2020.3276%206.7023%2020.3276ZM15.9458%2013.2728H21.1473L21.3093%2012.4118L19.393%209.85056H16.7305L15.9458%2013.2728ZM13.8865%2014.5978L14.049%2013.9448C14.1574%2013.5095%2014.2782%2012.9731%2014.4115%2012.3358C14.4847%2012.0455%2014.5486%2011.7685%2014.6033%2011.5048C14.658%2011.241%2014.712%2011.0117%2014.7655%2010.8171L14.9255%2010.1648C15.032%209.72981%2015.153%209.19331%2015.2883%208.55531C15.4236%207.91731%2015.5423%207.37965%2015.6443%206.94231L15.7973%206.28631L16.0163%205.37331L13.6865%2015.4978L13.8865%2014.5978ZM1.48705%2013.1873C1.23855%2013.1873%201.03763%2013.1055%200.884297%2012.9418C0.730964%2012.7781%200.654297%2012.5761%200.654297%2012.3358C0.654297%2012.0953%200.73513%2011.8932%200.896797%2011.7296C1.05846%2011.5659%201.26355%2011.4841%201.51205%2011.4841H5.51805C5.75838%2011.4841%205.96038%2011.5663%206.12405%2011.7308C6.28771%2011.8955%206.36955%2012.0986%206.36955%2012.3401C6.36955%2012.5817%206.28771%2012.7834%206.12405%2012.9451C5.96038%2013.1066%205.75838%2013.1873%205.51805%2013.1873H1.48705ZM3.48705%209.40581C3.24271%209.40581%203.03863%209.32356%202.8748%209.15906C2.71113%208.99456%202.6293%208.79165%202.6293%208.55031C2.6293%208.30915%202.71113%208.10656%202.8748%207.94256C3.03863%207.77856%203.24271%207.69656%203.48705%207.69656H8.51205C8.75188%207.69656%208.9548%207.77998%209.1208%207.94681C9.28663%208.11381%209.36955%208.3179%209.36955%208.55906C9.36955%208.8004%209.28663%209.0019%209.1208%209.16356C8.9548%209.32506%208.75188%209.40581%208.51205%209.40581H3.48705ZM6.7138%2018.6243C7.02646%2018.6243%207.29405%2018.5091%207.51655%2018.2788C7.73921%2018.0485%207.85055%2017.777%207.85055%2017.4643C7.85055%2017.1518%207.74063%2016.8842%207.5208%2016.6616C7.3008%2016.4389%207.02821%2016.3276%206.70305%2016.3276C6.39888%2016.3276%206.1313%2016.4376%205.9003%2016.6576C5.6693%2016.8774%205.5538%2017.1499%205.5538%2017.4751C5.5538%2017.7794%205.66896%2018.047%205.8993%2018.2778C6.12963%2018.5088%206.40113%2018.6243%206.7138%2018.6243ZM17.2138%2018.6243C17.5265%2018.6243%2017.794%2018.5091%2018.0165%2018.2788C18.2392%2018.0485%2018.3505%2017.777%2018.3505%2017.4643C18.3505%2017.1518%2018.2406%2016.8842%2018.0208%2016.6616C17.8008%2016.4389%2017.5282%2016.3276%2017.203%2016.3276C16.8989%2016.3276%2016.6313%2016.4376%2016.4003%2016.6576C16.1693%2016.8774%2016.0538%2017.1499%2016.0538%2017.4751C16.0538%2017.7794%2016.169%2018.047%2016.3993%2018.2778C16.6296%2018.5088%2016.9011%2018.6243%2017.2138%2018.6243Z%22%2F%3E%3C%2Fsvg%3E"); }
.usecase-card_icon[data-icon="wechselrahmen"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M6.7023%2020.3276C5.84063%2020.3276%205.1333%2020.0177%204.5803%2019.3981C4.02713%2018.7782%203.79221%2018.0459%203.87555%2017.2011H2.3843C2.14396%2017.2011%201.94188%2017.1188%201.77805%2016.9543C1.61438%2016.7896%201.53255%2016.5866%201.53255%2016.3451C1.53255%2016.1034%201.61438%2015.9017%201.77805%2015.7401C1.94188%2015.5786%202.14396%2015.4978%202.3843%2015.4978H4.6978C4.9398%2015.2296%205.2318%2015.0171%205.5738%2014.8601C5.9158%2014.7029%206.29171%2014.6243%206.70155%2014.6243C7.11138%2014.6243%207.48646%2014.703%207.8268%2014.8603C8.16696%2015.0178%208.46021%2015.2303%208.70655%2015.4978H13.6865L16.0163%205.37331H5.5978C5.3493%205.37331%205.14838%205.29106%204.99505%205.12656C4.84188%204.96206%204.7653%204.75915%204.7653%204.51781C4.7653%204.27648%204.84713%204.07381%205.0108%203.90981C5.17446%203.74598%205.37846%203.66406%205.6228%203.66406H17.0728C17.3381%203.66406%2017.5599%203.77281%2017.738%203.99031C17.9164%204.20798%2017.9785%204.4494%2017.9245%204.71456L17.1255%208.14706H19.393C19.6654%208.14706%2019.921%208.20623%2020.1598%208.32456C20.3988%208.44273%2020.599%208.60948%2020.7603%208.82481L22.6945%2011.4221C22.8455%2011.6296%2022.9455%2011.8444%2022.9943%2012.0666C23.0431%2012.2889%2023.0469%2012.5216%2023.0055%2012.7646L22.2625%2016.4983C22.2219%2016.7%2022.1216%2016.8675%2021.9618%2017.0008C21.802%2017.1343%2021.6203%2017.2011%2021.4168%2017.2011H20.0538C20.1371%2018.0496%2019.8981%2018.7828%2019.3368%2019.4008C18.7753%2020.0186%2018.0638%2020.3276%2017.2023%2020.3276C16.3406%2020.3276%2015.6333%2020.0177%2015.0803%2019.3981C14.5271%2018.7782%2014.2922%2018.0459%2014.3755%2017.2011H9.5538C9.63713%2018.0496%209.39813%2018.7828%208.8368%2019.4008C8.2753%2020.0186%207.5638%2020.3276%206.7023%2020.3276ZM15.9458%2013.2728H21.1473L21.3093%2012.4118L19.393%209.85056H16.7305L15.9458%2013.2728ZM13.8865%2014.5978L14.049%2013.9448C14.1574%2013.5095%2014.2782%2012.9731%2014.4115%2012.3358C14.4847%2012.0455%2014.5486%2011.7685%2014.6033%2011.5048C14.658%2011.241%2014.712%2011.0117%2014.7655%2010.8171L14.9255%2010.1648C15.032%209.72981%2015.153%209.19331%2015.2883%208.55531C15.4236%207.91731%2015.5423%207.37965%2015.6443%206.94231L15.7973%206.28631L16.0163%205.37331L13.6865%2015.4978L13.8865%2014.5978ZM1.48705%2013.1873C1.23855%2013.1873%201.03763%2013.1055%200.884297%2012.9418C0.730964%2012.7781%200.654297%2012.5761%200.654297%2012.3358C0.654297%2012.0953%200.73513%2011.8932%200.896797%2011.7296C1.05846%2011.5659%201.26355%2011.4841%201.51205%2011.4841H5.51805C5.75838%2011.4841%205.96038%2011.5663%206.12405%2011.7308C6.28771%2011.8955%206.36955%2012.0986%206.36955%2012.3401C6.36955%2012.5817%206.28771%2012.7834%206.12405%2012.9451C5.96038%2013.1066%205.75838%2013.1873%205.51805%2013.1873H1.48705ZM3.48705%209.40581C3.24271%209.40581%203.03863%209.32356%202.8748%209.15906C2.71113%208.99456%202.6293%208.79165%202.6293%208.55031C2.6293%208.30915%202.71113%208.10656%202.8748%207.94256C3.03863%207.77856%203.24271%207.69656%203.48705%207.69656H8.51205C8.75188%207.69656%208.9548%207.77998%209.1208%207.94681C9.28663%208.11381%209.36955%208.3179%209.36955%208.55906C9.36955%208.8004%209.28663%209.0019%209.1208%209.16356C8.9548%209.32506%208.75188%209.40581%208.51205%209.40581H3.48705ZM6.7138%2018.6243C7.02646%2018.6243%207.29405%2018.5091%207.51655%2018.2788C7.73921%2018.0485%207.85055%2017.777%207.85055%2017.4643C7.85055%2017.1518%207.74063%2016.8842%207.5208%2016.6616C7.3008%2016.4389%207.02821%2016.3276%206.70305%2016.3276C6.39888%2016.3276%206.1313%2016.4376%205.9003%2016.6576C5.6693%2016.8774%205.5538%2017.1499%205.5538%2017.4751C5.5538%2017.7794%205.66896%2018.047%205.8993%2018.2778C6.12963%2018.5088%206.40113%2018.6243%206.7138%2018.6243ZM17.2138%2018.6243C17.5265%2018.6243%2017.794%2018.5091%2018.0165%2018.2788C18.2392%2018.0485%2018.3505%2017.777%2018.3505%2017.4643C18.3505%2017.1518%2018.2406%2016.8842%2018.0208%2016.6616C17.8008%2016.4389%2017.5282%2016.3276%2017.203%2016.3276C16.8989%2016.3276%2016.6313%2016.4376%2016.4003%2016.6576C16.1693%2016.8774%2016.0538%2017.1499%2016.0538%2017.4751C16.0538%2017.7794%2016.169%2018.047%2016.3993%2018.2778C16.6296%2018.5088%2016.9011%2018.6243%2017.2138%2018.6243Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M6.7023%2020.3276C5.84063%2020.3276%205.1333%2020.0177%204.5803%2019.3981C4.02713%2018.7782%203.79221%2018.0459%203.87555%2017.2011H2.3843C2.14396%2017.2011%201.94188%2017.1188%201.77805%2016.9543C1.61438%2016.7896%201.53255%2016.5866%201.53255%2016.3451C1.53255%2016.1034%201.61438%2015.9017%201.77805%2015.7401C1.94188%2015.5786%202.14396%2015.4978%202.3843%2015.4978H4.6978C4.9398%2015.2296%205.2318%2015.0171%205.5738%2014.8601C5.9158%2014.7029%206.29171%2014.6243%206.70155%2014.6243C7.11138%2014.6243%207.48646%2014.703%207.8268%2014.8603C8.16696%2015.0178%208.46021%2015.2303%208.70655%2015.4978H13.6865L16.0163%205.37331H5.5978C5.3493%205.37331%205.14838%205.29106%204.99505%205.12656C4.84188%204.96206%204.7653%204.75915%204.7653%204.51781C4.7653%204.27648%204.84713%204.07381%205.0108%203.90981C5.17446%203.74598%205.37846%203.66406%205.6228%203.66406H17.0728C17.3381%203.66406%2017.5599%203.77281%2017.738%203.99031C17.9164%204.20798%2017.9785%204.4494%2017.9245%204.71456L17.1255%208.14706H19.393C19.6654%208.14706%2019.921%208.20623%2020.1598%208.32456C20.3988%208.44273%2020.599%208.60948%2020.7603%208.82481L22.6945%2011.4221C22.8455%2011.6296%2022.9455%2011.8444%2022.9943%2012.0666C23.0431%2012.2889%2023.0469%2012.5216%2023.0055%2012.7646L22.2625%2016.4983C22.2219%2016.7%2022.1216%2016.8675%2021.9618%2017.0008C21.802%2017.1343%2021.6203%2017.2011%2021.4168%2017.2011H20.0538C20.1371%2018.0496%2019.8981%2018.7828%2019.3368%2019.4008C18.7753%2020.0186%2018.0638%2020.3276%2017.2023%2020.3276C16.3406%2020.3276%2015.6333%2020.0177%2015.0803%2019.3981C14.5271%2018.7782%2014.2922%2018.0459%2014.3755%2017.2011H9.5538C9.63713%2018.0496%209.39813%2018.7828%208.8368%2019.4008C8.2753%2020.0186%207.5638%2020.3276%206.7023%2020.3276ZM15.9458%2013.2728H21.1473L21.3093%2012.4118L19.393%209.85056H16.7305L15.9458%2013.2728ZM13.8865%2014.5978L14.049%2013.9448C14.1574%2013.5095%2014.2782%2012.9731%2014.4115%2012.3358C14.4847%2012.0455%2014.5486%2011.7685%2014.6033%2011.5048C14.658%2011.241%2014.712%2011.0117%2014.7655%2010.8171L14.9255%2010.1648C15.032%209.72981%2015.153%209.19331%2015.2883%208.55531C15.4236%207.91731%2015.5423%207.37965%2015.6443%206.94231L15.7973%206.28631L16.0163%205.37331L13.6865%2015.4978L13.8865%2014.5978ZM1.48705%2013.1873C1.23855%2013.1873%201.03763%2013.1055%200.884297%2012.9418C0.730964%2012.7781%200.654297%2012.5761%200.654297%2012.3358C0.654297%2012.0953%200.73513%2011.8932%200.896797%2011.7296C1.05846%2011.5659%201.26355%2011.4841%201.51205%2011.4841H5.51805C5.75838%2011.4841%205.96038%2011.5663%206.12405%2011.7308C6.28771%2011.8955%206.36955%2012.0986%206.36955%2012.3401C6.36955%2012.5817%206.28771%2012.7834%206.12405%2012.9451C5.96038%2013.1066%205.75838%2013.1873%205.51805%2013.1873H1.48705ZM3.48705%209.40581C3.24271%209.40581%203.03863%209.32356%202.8748%209.15906C2.71113%208.99456%202.6293%208.79165%202.6293%208.55031C2.6293%208.30915%202.71113%208.10656%202.8748%207.94256C3.03863%207.77856%203.24271%207.69656%203.48705%207.69656H8.51205C8.75188%207.69656%208.9548%207.77998%209.1208%207.94681C9.28663%208.11381%209.36955%208.3179%209.36955%208.55906C9.36955%208.8004%209.28663%209.0019%209.1208%209.16356C8.9548%209.32506%208.75188%209.40581%208.51205%209.40581H3.48705ZM6.7138%2018.6243C7.02646%2018.6243%207.29405%2018.5091%207.51655%2018.2788C7.73921%2018.0485%207.85055%2017.777%207.85055%2017.4643C7.85055%2017.1518%207.74063%2016.8842%207.5208%2016.6616C7.3008%2016.4389%207.02821%2016.3276%206.70305%2016.3276C6.39888%2016.3276%206.1313%2016.4376%205.9003%2016.6576C5.6693%2016.8774%205.5538%2017.1499%205.5538%2017.4751C5.5538%2017.7794%205.66896%2018.047%205.8993%2018.2778C6.12963%2018.5088%206.40113%2018.6243%206.7138%2018.6243ZM17.2138%2018.6243C17.5265%2018.6243%2017.794%2018.5091%2018.0165%2018.2788C18.2392%2018.0485%2018.3505%2017.777%2018.3505%2017.4643C18.3505%2017.1518%2018.2406%2016.8842%2018.0208%2016.6616C17.8008%2016.4389%2017.5282%2016.3276%2017.203%2016.3276C16.8989%2016.3276%2016.6313%2016.4376%2016.4003%2016.6576C16.1693%2016.8774%2016.0538%2017.1499%2016.0538%2017.4751C16.0538%2017.7794%2016.169%2018.047%2016.3993%2018.2778C16.6296%2018.5088%2016.9011%2018.6243%2017.2138%2018.6243Z%22%2F%3E%3C%2Fsvg%3E"); }
.usecase-card_icon[data-icon="anhaengerzuege"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M19.4238%2020.9038L18.3701%2019.85L19.7201%2018.5H11.5316C11.3829%2019.0935%2011.0647%2019.5752%2010.5768%2019.9453C10.089%2020.3151%209.53799%2020.5%208.92383%2020.5C8.30983%2020.5%207.76308%2020.3151%207.28358%2019.9453C6.80408%2019.5752%206.48166%2019.0935%206.31633%2018.5H5.17383C4.41099%2018.5%203.76199%2018.2323%203.22683%2017.697C2.69149%2017.1618%202.42383%2016.5128%202.42383%2015.75V10.25H8.15458V7.25H2.42383V5.75H14.6161C15.1212%205.75%2015.5488%205.925%2015.8988%206.275C16.2488%206.625%2016.4238%207.05258%2016.4238%207.55775V17H19.6893L18.3701%2015.6808L19.4238%2014.5963L22.5778%2017.75L19.4238%2020.9038ZM9.69308%2010.25H14.9238V7.55775C14.9238%207.48075%2014.8918%207.41025%2014.8278%207.34625C14.7637%207.28208%2014.6931%207.25%2014.6161%207.25H9.69308V10.25ZM9.80958%2018.6355C10.0524%2018.3927%2010.1738%2018.0975%2010.1738%2017.75C10.1738%2017.4025%2010.0524%2017.1073%209.80958%2016.8645C9.56658%2016.6215%209.27133%2016.5%208.92383%2016.5C8.57649%2016.5%208.28133%2016.6215%208.03833%2016.8645C7.79533%2017.1073%207.67383%2017.4025%207.67383%2017.75C7.67383%2018.0975%207.79533%2018.3927%208.03833%2018.6355C8.28133%2018.8785%208.57649%2019%208.92383%2019C9.27133%2019%209.56658%2018.8785%209.80958%2018.6355ZM6.31633%2017C6.48166%2016.4063%206.80408%2015.9246%207.28358%2015.5548C7.76308%2015.1849%208.30983%2015%208.92383%2015C9.53799%2015%2010.089%2015.1849%2010.5768%2015.5548C11.0647%2015.9246%2011.3829%2016.4063%2011.5316%2017H14.9238V11.75H3.92383V15.75C3.92383%2016.0975%204.04533%2016.3927%204.28833%2016.6355C4.53133%2016.8785%204.82649%2017%205.17383%2017H6.31633ZM6.31633%2011.75H3.92383H14.9238H6.31633Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M19.4238%2020.9038L18.3701%2019.85L19.7201%2018.5H11.5316C11.3829%2019.0935%2011.0647%2019.5752%2010.5768%2019.9453C10.089%2020.3151%209.53799%2020.5%208.92383%2020.5C8.30983%2020.5%207.76308%2020.3151%207.28358%2019.9453C6.80408%2019.5752%206.48166%2019.0935%206.31633%2018.5H5.17383C4.41099%2018.5%203.76199%2018.2323%203.22683%2017.697C2.69149%2017.1618%202.42383%2016.5128%202.42383%2015.75V10.25H8.15458V7.25H2.42383V5.75H14.6161C15.1212%205.75%2015.5488%205.925%2015.8988%206.275C16.2488%206.625%2016.4238%207.05258%2016.4238%207.55775V17H19.6893L18.3701%2015.6808L19.4238%2014.5963L22.5778%2017.75L19.4238%2020.9038ZM9.69308%2010.25H14.9238V7.55775C14.9238%207.48075%2014.8918%207.41025%2014.8278%207.34625C14.7637%207.28208%2014.6931%207.25%2014.6161%207.25H9.69308V10.25ZM9.80958%2018.6355C10.0524%2018.3927%2010.1738%2018.0975%2010.1738%2017.75C10.1738%2017.4025%2010.0524%2017.1073%209.80958%2016.8645C9.56658%2016.6215%209.27133%2016.5%208.92383%2016.5C8.57649%2016.5%208.28133%2016.6215%208.03833%2016.8645C7.79533%2017.1073%207.67383%2017.4025%207.67383%2017.75C7.67383%2018.0975%207.79533%2018.3927%208.03833%2018.6355C8.28133%2018.8785%208.57649%2019%208.92383%2019C9.27133%2019%209.56658%2018.8785%209.80958%2018.6355ZM6.31633%2017C6.48166%2016.4063%206.80408%2015.9246%207.28358%2015.5548C7.76308%2015.1849%208.30983%2015%208.92383%2015C9.53799%2015%2010.089%2015.1849%2010.5768%2015.5548C11.0647%2015.9246%2011.3829%2016.4063%2011.5316%2017H14.9238V11.75H3.92383V15.75C3.92383%2016.0975%204.04533%2016.3927%204.28833%2016.6355C4.53133%2016.8785%204.82649%2017%205.17383%2017H6.31633ZM6.31633%2011.75H3.92383H14.9238H6.31633Z%22%2F%3E%3C%2Fsvg%3E"); }
.usecase-card_icon[data-icon="baustellenfahrzeuge"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M4.22473%2019.5137C3.4619%2019.5137%202.8154%2019.2461%202.28523%2018.7109C1.75523%2018.1756%201.49023%2017.5266%201.49023%2016.7639V11.0714C1.49023%2010.5728%201.66682%2010.1469%202.01998%209.79369C2.37315%209.44052%202.79907%209.26394%203.29773%209.26394H8.40373V4.27344H12.9325C13.6953%204.27344%2014.3443%204.5411%2014.8795%205.07644C15.4148%205.6116%2015.6825%206.2606%2015.6825%207.02344V11.1099H16.821V9.84844C16.821%209.61377%2016.8671%209.38752%2016.9592%209.16969C17.0516%208.95169%2017.1798%208.7606%2017.344%208.59644L19.019%206.93694L23.1477%2014.7639H18.5707C18.0914%2014.7639%2017.6815%2014.5937%2017.341%2014.2532C17.0007%2013.9129%2016.8273%2013.4998%2016.821%2013.0139V12.6099H15.667V14.6004C16.0132%2014.8581%2016.2802%2015.1748%2016.468%2015.5504C16.6558%2015.9261%2016.7497%2016.3306%2016.7497%2016.7639C16.7497%2017.5266%2016.4821%2018.1756%2015.9467%2018.7109C15.4116%2019.2461%2014.7626%2019.5137%2013.9997%2019.5137C13.3856%2019.5137%2012.8346%2019.3304%2012.3467%2018.9637C11.8591%2018.597%2011.5274%2018.1169%2011.3517%2017.5234H6.87274C6.69724%2018.1169%206.36557%2018.597%205.87773%2018.9637C5.3899%2019.3304%204.8389%2019.5137%204.22473%2019.5137ZM4.22473%2018.0139C4.57223%2018.0139%204.86998%2017.8924%205.11798%2017.6494C5.36615%2017.4064%205.49023%2017.1113%205.49023%2016.7639C5.49023%2016.4164%205.36873%2016.1212%205.12573%2015.8782C4.88273%2015.6352%204.58757%2015.5137%204.24023%2015.5137C3.89273%2015.5137%203.59748%2015.6352%203.35448%2015.8782C3.11165%2016.1212%202.99023%2016.4164%202.99023%2016.7639C2.99023%2017.1113%203.10907%2017.4064%203.34673%2017.6494C3.58457%2017.8924%203.87723%2018.0139%204.22473%2018.0139ZM14.8852%2017.6494C15.1282%2017.4064%2015.2497%2017.1113%2015.2497%2016.7639C15.2497%2016.4164%2015.1282%2016.1212%2014.8852%2015.8782C14.6424%2015.6352%2014.3472%2015.5137%2013.9997%2015.5137C13.6522%2015.5137%2013.3571%2015.6352%2013.1142%2015.8782C12.8712%2016.1212%2012.7497%2016.4164%2012.7497%2016.7639C12.7497%2017.1113%2012.8712%2017.4064%2013.1142%2017.6494C13.3571%2017.8924%2013.6522%2018.0139%2013.9997%2018.0139C14.3472%2018.0139%2014.6424%2017.8924%2014.8852%2017.6494ZM8.40373%2016.0139V10.7639H3.29773C3.20807%2010.7639%203.1344%2010.7928%203.07673%2010.8504C3.01907%2010.9081%202.99023%2010.9818%202.99023%2011.0714V14.3907C3.17607%2014.26%203.37215%2014.1645%203.57848%2014.1042C3.78498%2014.044%204.00557%2014.0139%204.24023%2014.0139C4.85423%2014.0139%205.40357%2014.1989%205.88823%2014.5687C6.3729%2014.9385%206.6979%2015.4203%206.86323%2016.0139H8.40373ZM9.90348%2016.0139H11.3517C11.5171%2015.4203%2011.8462%2014.9385%2012.3392%2014.5687C12.8321%2014.1989%2013.3856%2014.0139%2013.9997%2014.0139C14.0317%2014.0139%2014.0622%2014.0155%2014.091%2014.0187C14.12%2014.0219%2014.1505%2014.0267%2014.1825%2014.0332V12.6099H9.90348V16.0139ZM20.6747%2013.2639L18.644%209.42544L18.4132%209.66569C18.3876%209.69135%2018.3683%209.72019%2018.3555%209.75219C18.3427%209.78435%2018.3362%209.81644%2018.3362%209.84844V13.0139C18.3426%2013.0844%2018.3682%2013.1437%2018.4132%2013.1917C18.4581%2013.2399%2018.5157%2013.2639%2018.5862%2013.2639H20.6747ZM9.90348%2011.1099H14.1825V7.02344C14.1825%206.67594%2014.061%206.38077%2013.818%206.13794C13.575%205.89494%2013.2798%205.77344%2012.9325%205.77344H9.90348V11.1099ZM8.40373%2016.0139V14.0139V14.3907V10.7639V16.0139ZM9.90348%2016.0139V12.6099V14.0332V14.0139V16.0139Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M4.22473%2019.5137C3.4619%2019.5137%202.8154%2019.2461%202.28523%2018.7109C1.75523%2018.1756%201.49023%2017.5266%201.49023%2016.7639V11.0714C1.49023%2010.5728%201.66682%2010.1469%202.01998%209.79369C2.37315%209.44052%202.79907%209.26394%203.29773%209.26394H8.40373V4.27344H12.9325C13.6953%204.27344%2014.3443%204.5411%2014.8795%205.07644C15.4148%205.6116%2015.6825%206.2606%2015.6825%207.02344V11.1099H16.821V9.84844C16.821%209.61377%2016.8671%209.38752%2016.9592%209.16969C17.0516%208.95169%2017.1798%208.7606%2017.344%208.59644L19.019%206.93694L23.1477%2014.7639H18.5707C18.0914%2014.7639%2017.6815%2014.5937%2017.341%2014.2532C17.0007%2013.9129%2016.8273%2013.4998%2016.821%2013.0139V12.6099H15.667V14.6004C16.0132%2014.8581%2016.2802%2015.1748%2016.468%2015.5504C16.6558%2015.9261%2016.7497%2016.3306%2016.7497%2016.7639C16.7497%2017.5266%2016.4821%2018.1756%2015.9467%2018.7109C15.4116%2019.2461%2014.7626%2019.5137%2013.9997%2019.5137C13.3856%2019.5137%2012.8346%2019.3304%2012.3467%2018.9637C11.8591%2018.597%2011.5274%2018.1169%2011.3517%2017.5234H6.87274C6.69724%2018.1169%206.36557%2018.597%205.87773%2018.9637C5.3899%2019.3304%204.8389%2019.5137%204.22473%2019.5137ZM4.22473%2018.0139C4.57223%2018.0139%204.86998%2017.8924%205.11798%2017.6494C5.36615%2017.4064%205.49023%2017.1113%205.49023%2016.7639C5.49023%2016.4164%205.36873%2016.1212%205.12573%2015.8782C4.88273%2015.6352%204.58757%2015.5137%204.24023%2015.5137C3.89273%2015.5137%203.59748%2015.6352%203.35448%2015.8782C3.11165%2016.1212%202.99023%2016.4164%202.99023%2016.7639C2.99023%2017.1113%203.10907%2017.4064%203.34673%2017.6494C3.58457%2017.8924%203.87723%2018.0139%204.22473%2018.0139ZM14.8852%2017.6494C15.1282%2017.4064%2015.2497%2017.1113%2015.2497%2016.7639C15.2497%2016.4164%2015.1282%2016.1212%2014.8852%2015.8782C14.6424%2015.6352%2014.3472%2015.5137%2013.9997%2015.5137C13.6522%2015.5137%2013.3571%2015.6352%2013.1142%2015.8782C12.8712%2016.1212%2012.7497%2016.4164%2012.7497%2016.7639C12.7497%2017.1113%2012.8712%2017.4064%2013.1142%2017.6494C13.3571%2017.8924%2013.6522%2018.0139%2013.9997%2018.0139C14.3472%2018.0139%2014.6424%2017.8924%2014.8852%2017.6494ZM8.40373%2016.0139V10.7639H3.29773C3.20807%2010.7639%203.1344%2010.7928%203.07673%2010.8504C3.01907%2010.9081%202.99023%2010.9818%202.99023%2011.0714V14.3907C3.17607%2014.26%203.37215%2014.1645%203.57848%2014.1042C3.78498%2014.044%204.00557%2014.0139%204.24023%2014.0139C4.85423%2014.0139%205.40357%2014.1989%205.88823%2014.5687C6.3729%2014.9385%206.6979%2015.4203%206.86323%2016.0139H8.40373ZM9.90348%2016.0139H11.3517C11.5171%2015.4203%2011.8462%2014.9385%2012.3392%2014.5687C12.8321%2014.1989%2013.3856%2014.0139%2013.9997%2014.0139C14.0317%2014.0139%2014.0622%2014.0155%2014.091%2014.0187C14.12%2014.0219%2014.1505%2014.0267%2014.1825%2014.0332V12.6099H9.90348V16.0139ZM20.6747%2013.2639L18.644%209.42544L18.4132%209.66569C18.3876%209.69135%2018.3683%209.72019%2018.3555%209.75219C18.3427%209.78435%2018.3362%209.81644%2018.3362%209.84844V13.0139C18.3426%2013.0844%2018.3682%2013.1437%2018.4132%2013.1917C18.4581%2013.2399%2018.5157%2013.2639%2018.5862%2013.2639H20.6747ZM9.90348%2011.1099H14.1825V7.02344C14.1825%206.67594%2014.061%206.38077%2013.818%206.13794C13.575%205.89494%2013.2798%205.77344%2012.9325%205.77344H9.90348V11.1099ZM8.40373%2016.0139V14.0139V14.3907V10.7639V16.0139ZM9.90348%2016.0139V12.6099V14.0332V14.0139V16.0139Z%22%2F%3E%3C%2Fsvg%3E"); }
.usecase-card_icon[data-icon="be-combi"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M6.7023%2020.3276C5.84063%2020.3276%205.1333%2020.0177%204.5803%2019.3981C4.02713%2018.7782%203.79221%2018.0459%203.87555%2017.2011H2.3843C2.14396%2017.2011%201.94188%2017.1188%201.77805%2016.9543C1.61438%2016.7896%201.53255%2016.5866%201.53255%2016.3451C1.53255%2016.1034%201.61438%2015.9017%201.77805%2015.7401C1.94188%2015.5786%202.14396%2015.4978%202.3843%2015.4978H4.6978C4.9398%2015.2296%205.2318%2015.0171%205.5738%2014.8601C5.9158%2014.7029%206.29171%2014.6243%206.70155%2014.6243C7.11138%2014.6243%207.48646%2014.703%207.8268%2014.8603C8.16696%2015.0178%208.46021%2015.2303%208.70655%2015.4978H13.6865L16.0163%205.37331H5.5978C5.3493%205.37331%205.14838%205.29106%204.99505%205.12656C4.84188%204.96206%204.7653%204.75915%204.7653%204.51781C4.7653%204.27648%204.84713%204.07381%205.0108%203.90981C5.17446%203.74598%205.37846%203.66406%205.6228%203.66406H17.0728C17.3381%203.66406%2017.5599%203.77281%2017.738%203.99031C17.9164%204.20798%2017.9785%204.4494%2017.9245%204.71456L17.1255%208.14706H19.393C19.6654%208.14706%2019.921%208.20623%2020.1598%208.32456C20.3988%208.44273%2020.599%208.60948%2020.7603%208.82481L22.6945%2011.4221C22.8455%2011.6296%2022.9455%2011.8444%2022.9943%2012.0666C23.0431%2012.2889%2023.0469%2012.5216%2023.0055%2012.7646L22.2625%2016.4983C22.2219%2016.7%2022.1216%2016.8675%2021.9618%2017.0008C21.802%2017.1343%2021.6203%2017.2011%2021.4168%2017.2011H20.0538C20.1371%2018.0496%2019.8981%2018.7828%2019.3368%2019.4008C18.7753%2020.0186%2018.0638%2020.3276%2017.2023%2020.3276C16.3406%2020.3276%2015.6333%2020.0177%2015.0803%2019.3981C14.5271%2018.7782%2014.2922%2018.0459%2014.3755%2017.2011H9.5538C9.63713%2018.0496%209.39813%2018.7828%208.8368%2019.4008C8.2753%2020.0186%207.5638%2020.3276%206.7023%2020.3276ZM15.9458%2013.2728H21.1473L21.3093%2012.4118L19.393%209.85056H16.7305L15.9458%2013.2728ZM13.8865%2014.5978L14.049%2013.9448C14.1574%2013.5095%2014.2782%2012.9731%2014.4115%2012.3358C14.4847%2012.0455%2014.5486%2011.7685%2014.6033%2011.5048C14.658%2011.241%2014.712%2011.0117%2014.7655%2010.8171L14.9255%2010.1648C15.032%209.72981%2015.153%209.19331%2015.2883%208.55531C15.4236%207.91731%2015.5423%207.37965%2015.6443%206.94231L15.7973%206.28631L16.0163%205.37331L13.6865%2015.4978L13.8865%2014.5978ZM1.48705%2013.1873C1.23855%2013.1873%201.03763%2013.1055%200.884297%2012.9418C0.730964%2012.7781%200.654297%2012.5761%200.654297%2012.3358C0.654297%2012.0953%200.73513%2011.8932%200.896797%2011.7296C1.05846%2011.5659%201.26355%2011.4841%201.51205%2011.4841H5.51805C5.75838%2011.4841%205.96038%2011.5663%206.12405%2011.7308C6.28771%2011.8955%206.36955%2012.0986%206.36955%2012.3401C6.36955%2012.5817%206.28771%2012.7834%206.12405%2012.9451C5.96038%2013.1066%205.75838%2013.1873%205.51805%2013.1873H1.48705ZM3.48705%209.40581C3.24271%209.40581%203.03863%209.32356%202.8748%209.15906C2.71113%208.99456%202.6293%208.79165%202.6293%208.55031C2.6293%208.30915%202.71113%208.10656%202.8748%207.94256C3.03863%207.77856%203.24271%207.69656%203.48705%207.69656H8.51205C8.75188%207.69656%208.9548%207.77998%209.1208%207.94681C9.28663%208.11381%209.36955%208.3179%209.36955%208.55906C9.36955%208.8004%209.28663%209.0019%209.1208%209.16356C8.9548%209.32506%208.75188%209.40581%208.51205%209.40581H3.48705ZM6.7138%2018.6243C7.02646%2018.6243%207.29405%2018.5091%207.51655%2018.2788C7.73921%2018.0485%207.85055%2017.777%207.85055%2017.4643C7.85055%2017.1518%207.74063%2016.8842%207.5208%2016.6616C7.3008%2016.4389%207.02821%2016.3276%206.70305%2016.3276C6.39888%2016.3276%206.1313%2016.4376%205.9003%2016.6576C5.6693%2016.8774%205.5538%2017.1499%205.5538%2017.4751C5.5538%2017.7794%205.66896%2018.047%205.8993%2018.2778C6.12963%2018.5088%206.40113%2018.6243%206.7138%2018.6243ZM17.2138%2018.6243C17.5265%2018.6243%2017.794%2018.5091%2018.0165%2018.2788C18.2392%2018.0485%2018.3505%2017.777%2018.3505%2017.4643C18.3505%2017.1518%2018.2406%2016.8842%2018.0208%2016.6616C17.8008%2016.4389%2017.5282%2016.3276%2017.203%2016.3276C16.8989%2016.3276%2016.6313%2016.4376%2016.4003%2016.6576C16.1693%2016.8774%2016.0538%2017.1499%2016.0538%2017.4751C16.0538%2017.7794%2016.169%2018.047%2016.3993%2018.2778C16.6296%2018.5088%2016.9011%2018.6243%2017.2138%2018.6243Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M6.7023%2020.3276C5.84063%2020.3276%205.1333%2020.0177%204.5803%2019.3981C4.02713%2018.7782%203.79221%2018.0459%203.87555%2017.2011H2.3843C2.14396%2017.2011%201.94188%2017.1188%201.77805%2016.9543C1.61438%2016.7896%201.53255%2016.5866%201.53255%2016.3451C1.53255%2016.1034%201.61438%2015.9017%201.77805%2015.7401C1.94188%2015.5786%202.14396%2015.4978%202.3843%2015.4978H4.6978C4.9398%2015.2296%205.2318%2015.0171%205.5738%2014.8601C5.9158%2014.7029%206.29171%2014.6243%206.70155%2014.6243C7.11138%2014.6243%207.48646%2014.703%207.8268%2014.8603C8.16696%2015.0178%208.46021%2015.2303%208.70655%2015.4978H13.6865L16.0163%205.37331H5.5978C5.3493%205.37331%205.14838%205.29106%204.99505%205.12656C4.84188%204.96206%204.7653%204.75915%204.7653%204.51781C4.7653%204.27648%204.84713%204.07381%205.0108%203.90981C5.17446%203.74598%205.37846%203.66406%205.6228%203.66406H17.0728C17.3381%203.66406%2017.5599%203.77281%2017.738%203.99031C17.9164%204.20798%2017.9785%204.4494%2017.9245%204.71456L17.1255%208.14706H19.393C19.6654%208.14706%2019.921%208.20623%2020.1598%208.32456C20.3988%208.44273%2020.599%208.60948%2020.7603%208.82481L22.6945%2011.4221C22.8455%2011.6296%2022.9455%2011.8444%2022.9943%2012.0666C23.0431%2012.2889%2023.0469%2012.5216%2023.0055%2012.7646L22.2625%2016.4983C22.2219%2016.7%2022.1216%2016.8675%2021.9618%2017.0008C21.802%2017.1343%2021.6203%2017.2011%2021.4168%2017.2011H20.0538C20.1371%2018.0496%2019.8981%2018.7828%2019.3368%2019.4008C18.7753%2020.0186%2018.0638%2020.3276%2017.2023%2020.3276C16.3406%2020.3276%2015.6333%2020.0177%2015.0803%2019.3981C14.5271%2018.7782%2014.2922%2018.0459%2014.3755%2017.2011H9.5538C9.63713%2018.0496%209.39813%2018.7828%208.8368%2019.4008C8.2753%2020.0186%207.5638%2020.3276%206.7023%2020.3276ZM15.9458%2013.2728H21.1473L21.3093%2012.4118L19.393%209.85056H16.7305L15.9458%2013.2728ZM13.8865%2014.5978L14.049%2013.9448C14.1574%2013.5095%2014.2782%2012.9731%2014.4115%2012.3358C14.4847%2012.0455%2014.5486%2011.7685%2014.6033%2011.5048C14.658%2011.241%2014.712%2011.0117%2014.7655%2010.8171L14.9255%2010.1648C15.032%209.72981%2015.153%209.19331%2015.2883%208.55531C15.4236%207.91731%2015.5423%207.37965%2015.6443%206.94231L15.7973%206.28631L16.0163%205.37331L13.6865%2015.4978L13.8865%2014.5978ZM1.48705%2013.1873C1.23855%2013.1873%201.03763%2013.1055%200.884297%2012.9418C0.730964%2012.7781%200.654297%2012.5761%200.654297%2012.3358C0.654297%2012.0953%200.73513%2011.8932%200.896797%2011.7296C1.05846%2011.5659%201.26355%2011.4841%201.51205%2011.4841H5.51805C5.75838%2011.4841%205.96038%2011.5663%206.12405%2011.7308C6.28771%2011.8955%206.36955%2012.0986%206.36955%2012.3401C6.36955%2012.5817%206.28771%2012.7834%206.12405%2012.9451C5.96038%2013.1066%205.75838%2013.1873%205.51805%2013.1873H1.48705ZM3.48705%209.40581C3.24271%209.40581%203.03863%209.32356%202.8748%209.15906C2.71113%208.99456%202.6293%208.79165%202.6293%208.55031C2.6293%208.30915%202.71113%208.10656%202.8748%207.94256C3.03863%207.77856%203.24271%207.69656%203.48705%207.69656H8.51205C8.75188%207.69656%208.9548%207.77998%209.1208%207.94681C9.28663%208.11381%209.36955%208.3179%209.36955%208.55906C9.36955%208.8004%209.28663%209.0019%209.1208%209.16356C8.9548%209.32506%208.75188%209.40581%208.51205%209.40581H3.48705ZM6.7138%2018.6243C7.02646%2018.6243%207.29405%2018.5091%207.51655%2018.2788C7.73921%2018.0485%207.85055%2017.777%207.85055%2017.4643C7.85055%2017.1518%207.74063%2016.8842%207.5208%2016.6616C7.3008%2016.4389%207.02821%2016.3276%206.70305%2016.3276C6.39888%2016.3276%206.1313%2016.4376%205.9003%2016.6576C5.6693%2016.8774%205.5538%2017.1499%205.5538%2017.4751C5.5538%2017.7794%205.66896%2018.047%205.8993%2018.2778C6.12963%2018.5088%206.40113%2018.6243%206.7138%2018.6243ZM17.2138%2018.6243C17.5265%2018.6243%2017.794%2018.5091%2018.0165%2018.2788C18.2392%2018.0485%2018.3505%2017.777%2018.3505%2017.4643C18.3505%2017.1518%2018.2406%2016.8842%2018.0208%2016.6616C17.8008%2016.4389%2017.5282%2016.3276%2017.203%2016.3276C16.8989%2016.3276%2016.6313%2016.4376%2016.4003%2016.6576C16.1693%2016.8774%2016.0538%2017.1499%2016.0538%2017.4751C16.0538%2017.7794%2016.169%2018.047%2016.3993%2018.2778C16.6296%2018.5088%2016.9011%2018.6243%2017.2138%2018.6243Z%22%2F%3E%3C%2Fsvg%3E"); }
.usecase-card_icon[data-icon="sattelauflieger"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M6.7023%2020.3276C5.84063%2020.3276%205.1333%2020.0177%204.5803%2019.3981C4.02713%2018.7782%203.79221%2018.0459%203.87555%2017.2011H2.3843C2.14396%2017.2011%201.94188%2017.1188%201.77805%2016.9543C1.61438%2016.7896%201.53255%2016.5866%201.53255%2016.3451C1.53255%2016.1034%201.61438%2015.9017%201.77805%2015.7401C1.94188%2015.5786%202.14396%2015.4978%202.3843%2015.4978H4.6978C4.9398%2015.2296%205.2318%2015.0171%205.5738%2014.8601C5.9158%2014.7029%206.29171%2014.6243%206.70155%2014.6243C7.11138%2014.6243%207.48646%2014.703%207.8268%2014.8603C8.16696%2015.0178%208.46021%2015.2303%208.70655%2015.4978H13.6865L16.0163%205.37331H5.5978C5.3493%205.37331%205.14838%205.29106%204.99505%205.12656C4.84188%204.96206%204.7653%204.75915%204.7653%204.51781C4.7653%204.27648%204.84713%204.07381%205.0108%203.90981C5.17446%203.74598%205.37846%203.66406%205.6228%203.66406H17.0728C17.3381%203.66406%2017.5599%203.77281%2017.738%203.99031C17.9164%204.20798%2017.9785%204.4494%2017.9245%204.71456L17.1255%208.14706H19.393C19.6654%208.14706%2019.921%208.20623%2020.1598%208.32456C20.3988%208.44273%2020.599%208.60948%2020.7603%208.82481L22.6945%2011.4221C22.8455%2011.6296%2022.9455%2011.8444%2022.9943%2012.0666C23.0431%2012.2889%2023.0469%2012.5216%2023.0055%2012.7646L22.2625%2016.4983C22.2219%2016.7%2022.1216%2016.8675%2021.9618%2017.0008C21.802%2017.1343%2021.6203%2017.2011%2021.4168%2017.2011H20.0538C20.1371%2018.0496%2019.8981%2018.7828%2019.3368%2019.4008C18.7753%2020.0186%2018.0638%2020.3276%2017.2023%2020.3276C16.3406%2020.3276%2015.6333%2020.0177%2015.0803%2019.3981C14.5271%2018.7782%2014.2922%2018.0459%2014.3755%2017.2011H9.5538C9.63713%2018.0496%209.39813%2018.7828%208.8368%2019.4008C8.2753%2020.0186%207.5638%2020.3276%206.7023%2020.3276ZM15.9458%2013.2728H21.1473L21.3093%2012.4118L19.393%209.85056H16.7305L15.9458%2013.2728ZM13.8865%2014.5978L14.049%2013.9448C14.1574%2013.5095%2014.2782%2012.9731%2014.4115%2012.3358C14.4847%2012.0455%2014.5486%2011.7685%2014.6033%2011.5048C14.658%2011.241%2014.712%2011.0117%2014.7655%2010.8171L14.9255%2010.1648C15.032%209.72981%2015.153%209.19331%2015.2883%208.55531C15.4236%207.91731%2015.5423%207.37965%2015.6443%206.94231L15.7973%206.28631L16.0163%205.37331L13.6865%2015.4978L13.8865%2014.5978ZM1.48705%2013.1873C1.23855%2013.1873%201.03763%2013.1055%200.884297%2012.9418C0.730964%2012.7781%200.654297%2012.5761%200.654297%2012.3358C0.654297%2012.0953%200.73513%2011.8932%200.896797%2011.7296C1.05846%2011.5659%201.26355%2011.4841%201.51205%2011.4841H5.51805C5.75838%2011.4841%205.96038%2011.5663%206.12405%2011.7308C6.28771%2011.8955%206.36955%2012.0986%206.36955%2012.3401C6.36955%2012.5817%206.28771%2012.7834%206.12405%2012.9451C5.96038%2013.1066%205.75838%2013.1873%205.51805%2013.1873H1.48705ZM3.48705%209.40581C3.24271%209.40581%203.03863%209.32356%202.8748%209.15906C2.71113%208.99456%202.6293%208.79165%202.6293%208.55031C2.6293%208.30915%202.71113%208.10656%202.8748%207.94256C3.03863%207.77856%203.24271%207.69656%203.48705%207.69656H8.51205C8.75188%207.69656%208.9548%207.77998%209.1208%207.94681C9.28663%208.11381%209.36955%208.3179%209.36955%208.55906C9.36955%208.8004%209.28663%209.0019%209.1208%209.16356C8.9548%209.32506%208.75188%209.40581%208.51205%209.40581H3.48705ZM6.7138%2018.6243C7.02646%2018.6243%207.29405%2018.5091%207.51655%2018.2788C7.73921%2018.0485%207.85055%2017.777%207.85055%2017.4643C7.85055%2017.1518%207.74063%2016.8842%207.5208%2016.6616C7.3008%2016.4389%207.02821%2016.3276%206.70305%2016.3276C6.39888%2016.3276%206.1313%2016.4376%205.9003%2016.6576C5.6693%2016.8774%205.5538%2017.1499%205.5538%2017.4751C5.5538%2017.7794%205.66896%2018.047%205.8993%2018.2778C6.12963%2018.5088%206.40113%2018.6243%206.7138%2018.6243ZM17.2138%2018.6243C17.5265%2018.6243%2017.794%2018.5091%2018.0165%2018.2788C18.2392%2018.0485%2018.3505%2017.777%2018.3505%2017.4643C18.3505%2017.1518%2018.2406%2016.8842%2018.0208%2016.6616C17.8008%2016.4389%2017.5282%2016.3276%2017.203%2016.3276C16.8989%2016.3276%2016.6313%2016.4376%2016.4003%2016.6576C16.1693%2016.8774%2016.0538%2017.1499%2016.0538%2017.4751C16.0538%2017.7794%2016.169%2018.047%2016.3993%2018.2778C16.6296%2018.5088%2016.9011%2018.6243%2017.2138%2018.6243Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M6.7023%2020.3276C5.84063%2020.3276%205.1333%2020.0177%204.5803%2019.3981C4.02713%2018.7782%203.79221%2018.0459%203.87555%2017.2011H2.3843C2.14396%2017.2011%201.94188%2017.1188%201.77805%2016.9543C1.61438%2016.7896%201.53255%2016.5866%201.53255%2016.3451C1.53255%2016.1034%201.61438%2015.9017%201.77805%2015.7401C1.94188%2015.5786%202.14396%2015.4978%202.3843%2015.4978H4.6978C4.9398%2015.2296%205.2318%2015.0171%205.5738%2014.8601C5.9158%2014.7029%206.29171%2014.6243%206.70155%2014.6243C7.11138%2014.6243%207.48646%2014.703%207.8268%2014.8603C8.16696%2015.0178%208.46021%2015.2303%208.70655%2015.4978H13.6865L16.0163%205.37331H5.5978C5.3493%205.37331%205.14838%205.29106%204.99505%205.12656C4.84188%204.96206%204.7653%204.75915%204.7653%204.51781C4.7653%204.27648%204.84713%204.07381%205.0108%203.90981C5.17446%203.74598%205.37846%203.66406%205.6228%203.66406H17.0728C17.3381%203.66406%2017.5599%203.77281%2017.738%203.99031C17.9164%204.20798%2017.9785%204.4494%2017.9245%204.71456L17.1255%208.14706H19.393C19.6654%208.14706%2019.921%208.20623%2020.1598%208.32456C20.3988%208.44273%2020.599%208.60948%2020.7603%208.82481L22.6945%2011.4221C22.8455%2011.6296%2022.9455%2011.8444%2022.9943%2012.0666C23.0431%2012.2889%2023.0469%2012.5216%2023.0055%2012.7646L22.2625%2016.4983C22.2219%2016.7%2022.1216%2016.8675%2021.9618%2017.0008C21.802%2017.1343%2021.6203%2017.2011%2021.4168%2017.2011H20.0538C20.1371%2018.0496%2019.8981%2018.7828%2019.3368%2019.4008C18.7753%2020.0186%2018.0638%2020.3276%2017.2023%2020.3276C16.3406%2020.3276%2015.6333%2020.0177%2015.0803%2019.3981C14.5271%2018.7782%2014.2922%2018.0459%2014.3755%2017.2011H9.5538C9.63713%2018.0496%209.39813%2018.7828%208.8368%2019.4008C8.2753%2020.0186%207.5638%2020.3276%206.7023%2020.3276ZM15.9458%2013.2728H21.1473L21.3093%2012.4118L19.393%209.85056H16.7305L15.9458%2013.2728ZM13.8865%2014.5978L14.049%2013.9448C14.1574%2013.5095%2014.2782%2012.9731%2014.4115%2012.3358C14.4847%2012.0455%2014.5486%2011.7685%2014.6033%2011.5048C14.658%2011.241%2014.712%2011.0117%2014.7655%2010.8171L14.9255%2010.1648C15.032%209.72981%2015.153%209.19331%2015.2883%208.55531C15.4236%207.91731%2015.5423%207.37965%2015.6443%206.94231L15.7973%206.28631L16.0163%205.37331L13.6865%2015.4978L13.8865%2014.5978ZM1.48705%2013.1873C1.23855%2013.1873%201.03763%2013.1055%200.884297%2012.9418C0.730964%2012.7781%200.654297%2012.5761%200.654297%2012.3358C0.654297%2012.0953%200.73513%2011.8932%200.896797%2011.7296C1.05846%2011.5659%201.26355%2011.4841%201.51205%2011.4841H5.51805C5.75838%2011.4841%205.96038%2011.5663%206.12405%2011.7308C6.28771%2011.8955%206.36955%2012.0986%206.36955%2012.3401C6.36955%2012.5817%206.28771%2012.7834%206.12405%2012.9451C5.96038%2013.1066%205.75838%2013.1873%205.51805%2013.1873H1.48705ZM3.48705%209.40581C3.24271%209.40581%203.03863%209.32356%202.8748%209.15906C2.71113%208.99456%202.6293%208.79165%202.6293%208.55031C2.6293%208.30915%202.71113%208.10656%202.8748%207.94256C3.03863%207.77856%203.24271%207.69656%203.48705%207.69656H8.51205C8.75188%207.69656%208.9548%207.77998%209.1208%207.94681C9.28663%208.11381%209.36955%208.3179%209.36955%208.55906C9.36955%208.8004%209.28663%209.0019%209.1208%209.16356C8.9548%209.32506%208.75188%209.40581%208.51205%209.40581H3.48705ZM6.7138%2018.6243C7.02646%2018.6243%207.29405%2018.5091%207.51655%2018.2788C7.73921%2018.0485%207.85055%2017.777%207.85055%2017.4643C7.85055%2017.1518%207.74063%2016.8842%207.5208%2016.6616C7.3008%2016.4389%207.02821%2016.3276%206.70305%2016.3276C6.39888%2016.3276%206.1313%2016.4376%205.9003%2016.6576C5.6693%2016.8774%205.5538%2017.1499%205.5538%2017.4751C5.5538%2017.7794%205.66896%2018.047%205.8993%2018.2778C6.12963%2018.5088%206.40113%2018.6243%206.7138%2018.6243ZM17.2138%2018.6243C17.5265%2018.6243%2017.794%2018.5091%2018.0165%2018.2788C18.2392%2018.0485%2018.3505%2017.777%2018.3505%2017.4643C18.3505%2017.1518%2018.2406%2016.8842%2018.0208%2016.6616C17.8008%2016.4389%2017.5282%2016.3276%2017.203%2016.3276C16.8989%2016.3276%2016.6313%2016.4376%2016.4003%2016.6576C16.1693%2016.8774%2016.0538%2017.1499%2016.0538%2017.4751C16.0538%2017.7794%2016.169%2018.047%2016.3993%2018.2778C16.6296%2018.5088%2016.9011%2018.6243%2017.2138%2018.6243Z%22%2F%3E%3C%2Fsvg%3E"); }
.usecase-card_icon[data-icon="sonderaufbauten"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M5.00975%2019.7955C4.46475%2019.2507%204.19225%2018.5873%204.19225%2017.8053H3.30775C2.80908%2017.8053%202.38308%2017.6286%202.02975%2017.2753C1.67658%2016.9221%201.5%2016.4962%201.5%2015.9975V10.9975H12.5V7.30525C12.5%206.80658%2012.6766%206.38058%2013.0297%206.02725C13.3831%205.67408%2013.8091%205.4975%2014.3077%205.4975H16.25V4.7475C16.25%204.48983%2016.3362%204.27475%2016.5087%204.10225C16.6811%203.92992%2016.8961%203.84375%2017.1538%203.84375H17.8463C18.1039%203.84375%2018.3189%203.92992%2018.4913%204.10225C18.6638%204.27475%2018.75%204.48983%2018.75%204.7475V5.4975H19.3288C19.7238%205.4975%2020.0786%205.60967%2020.3932%205.834C20.7079%206.05833%2020.9255%206.35967%2021.046%206.738L22.4095%2010.788C22.4428%2010.8815%2022.4662%2010.976%2022.4797%2011.0715C22.4932%2011.167%2022.5%2011.2667%2022.5%2011.3705V17.8053H19.8078C19.8078%2018.5873%2019.5352%2019.2507%2018.9902%2019.7955C18.4454%2020.3403%2017.782%2020.6128%2017%2020.6128C16.218%2020.6128%2015.5546%2020.3403%2015.0098%2019.7955C14.4648%2019.2507%2014.1923%2018.5873%2014.1923%2017.8053H9.80775C9.80775%2018.5873%209.53525%2019.2507%208.99025%2019.7955C8.44542%2020.3403%207.782%2020.6128%207%2020.6128C6.218%2020.6128%205.55458%2020.3403%205.00975%2019.7955ZM7.92875%2018.734C8.18142%2018.4815%208.30775%2018.1719%208.30775%2017.8053C8.30775%2017.4449%208.18142%2017.1368%207.92875%2016.881C7.67625%2016.6253%207.36667%2016.4975%207%2016.4975C6.63333%2016.4975%206.32375%2016.6253%206.07125%2016.881C5.81858%2017.1368%205.69225%2017.4449%205.69225%2017.8053C5.69225%2018.1719%205.81858%2018.4815%206.07125%2018.734C6.32375%2018.9867%206.63333%2019.113%207%2019.113C7.36667%2019.113%207.67625%2018.9867%207.92875%2018.734ZM17.9288%2018.734C18.1814%2018.4815%2018.3078%2018.1719%2018.3078%2017.8053C18.3078%2017.4449%2018.1814%2017.1368%2017.9288%2016.881C17.6763%2016.6253%2017.3667%2016.4975%2017%2016.4975C16.6333%2016.4975%2016.3237%2016.6253%2016.0712%2016.881C15.8186%2017.1368%2015.6923%2017.4449%2015.6923%2017.8053C15.6923%2018.1719%2015.8186%2018.4815%2016.0712%2018.734C16.3237%2018.9867%2016.6333%2019.113%2017%2019.113C17.3667%2019.113%2017.6763%2018.9867%2017.9288%2018.734ZM3%2012.4975V15.9975C3%2016.0873%203.02883%2016.1611%203.0865%2016.2188C3.14417%2016.2764%203.21792%2016.3053%203.30775%2016.3053H4.70775C4.93975%2015.9053%205.25867%2015.5873%205.6645%2015.3513C6.07017%2015.1154%206.51533%2014.9975%207%2014.9975C7.48467%2014.9975%207.92983%2015.1154%208.3355%2015.3513C8.74133%2015.5873%209.06025%2015.9053%209.29225%2016.3053H12.5V12.4975H3ZM14%2016.3053H14.7078C14.9397%2015.9053%2015.2587%2015.5873%2015.6645%2015.3513C16.0702%2015.1154%2016.5153%2014.9975%2017%2014.9975C17.4847%2014.9975%2017.9298%2015.1154%2018.3355%2015.3513C18.7413%2015.5873%2019.0603%2015.9053%2019.2922%2016.3053H21V12.4975H14V16.3053ZM14%2010.9975H20.9L19.627%207.209C19.6077%207.145%2019.5708%207.09375%2019.5163%207.05525C19.4618%207.01675%2019.3993%206.9975%2019.3288%206.9975H14.3077C14.2179%206.9975%2014.1442%207.02633%2014.0865%207.084C14.0288%207.14167%2014%207.21542%2014%207.30525V10.9975ZM1.5%209.9975V8.80525H2.5V6.68975H1.5V5.4975H11.1923V6.68975H10.1923V8.80525H11.1923V9.9975H1.5ZM3.69225%208.80525H5.75V6.68975H3.69225V8.80525ZM6.94225%208.80525H9V6.68975H6.94225V8.80525Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M5.00975%2019.7955C4.46475%2019.2507%204.19225%2018.5873%204.19225%2017.8053H3.30775C2.80908%2017.8053%202.38308%2017.6286%202.02975%2017.2753C1.67658%2016.9221%201.5%2016.4962%201.5%2015.9975V10.9975H12.5V7.30525C12.5%206.80658%2012.6766%206.38058%2013.0297%206.02725C13.3831%205.67408%2013.8091%205.4975%2014.3077%205.4975H16.25V4.7475C16.25%204.48983%2016.3362%204.27475%2016.5087%204.10225C16.6811%203.92992%2016.8961%203.84375%2017.1538%203.84375H17.8463C18.1039%203.84375%2018.3189%203.92992%2018.4913%204.10225C18.6638%204.27475%2018.75%204.48983%2018.75%204.7475V5.4975H19.3288C19.7238%205.4975%2020.0786%205.60967%2020.3932%205.834C20.7079%206.05833%2020.9255%206.35967%2021.046%206.738L22.4095%2010.788C22.4428%2010.8815%2022.4662%2010.976%2022.4797%2011.0715C22.4932%2011.167%2022.5%2011.2667%2022.5%2011.3705V17.8053H19.8078C19.8078%2018.5873%2019.5352%2019.2507%2018.9902%2019.7955C18.4454%2020.3403%2017.782%2020.6128%2017%2020.6128C16.218%2020.6128%2015.5546%2020.3403%2015.0098%2019.7955C14.4648%2019.2507%2014.1923%2018.5873%2014.1923%2017.8053H9.80775C9.80775%2018.5873%209.53525%2019.2507%208.99025%2019.7955C8.44542%2020.3403%207.782%2020.6128%207%2020.6128C6.218%2020.6128%205.55458%2020.3403%205.00975%2019.7955ZM7.92875%2018.734C8.18142%2018.4815%208.30775%2018.1719%208.30775%2017.8053C8.30775%2017.4449%208.18142%2017.1368%207.92875%2016.881C7.67625%2016.6253%207.36667%2016.4975%207%2016.4975C6.63333%2016.4975%206.32375%2016.6253%206.07125%2016.881C5.81858%2017.1368%205.69225%2017.4449%205.69225%2017.8053C5.69225%2018.1719%205.81858%2018.4815%206.07125%2018.734C6.32375%2018.9867%206.63333%2019.113%207%2019.113C7.36667%2019.113%207.67625%2018.9867%207.92875%2018.734ZM17.9288%2018.734C18.1814%2018.4815%2018.3078%2018.1719%2018.3078%2017.8053C18.3078%2017.4449%2018.1814%2017.1368%2017.9288%2016.881C17.6763%2016.6253%2017.3667%2016.4975%2017%2016.4975C16.6333%2016.4975%2016.3237%2016.6253%2016.0712%2016.881C15.8186%2017.1368%2015.6923%2017.4449%2015.6923%2017.8053C15.6923%2018.1719%2015.8186%2018.4815%2016.0712%2018.734C16.3237%2018.9867%2016.6333%2019.113%2017%2019.113C17.3667%2019.113%2017.6763%2018.9867%2017.9288%2018.734ZM3%2012.4975V15.9975C3%2016.0873%203.02883%2016.1611%203.0865%2016.2188C3.14417%2016.2764%203.21792%2016.3053%203.30775%2016.3053H4.70775C4.93975%2015.9053%205.25867%2015.5873%205.6645%2015.3513C6.07017%2015.1154%206.51533%2014.9975%207%2014.9975C7.48467%2014.9975%207.92983%2015.1154%208.3355%2015.3513C8.74133%2015.5873%209.06025%2015.9053%209.29225%2016.3053H12.5V12.4975H3ZM14%2016.3053H14.7078C14.9397%2015.9053%2015.2587%2015.5873%2015.6645%2015.3513C16.0702%2015.1154%2016.5153%2014.9975%2017%2014.9975C17.4847%2014.9975%2017.9298%2015.1154%2018.3355%2015.3513C18.7413%2015.5873%2019.0603%2015.9053%2019.2922%2016.3053H21V12.4975H14V16.3053ZM14%2010.9975H20.9L19.627%207.209C19.6077%207.145%2019.5708%207.09375%2019.5163%207.05525C19.4618%207.01675%2019.3993%206.9975%2019.3288%206.9975H14.3077C14.2179%206.9975%2014.1442%207.02633%2014.0865%207.084C14.0288%207.14167%2014%207.21542%2014%207.30525V10.9975ZM1.5%209.9975V8.80525H2.5V6.68975H1.5V5.4975H11.1923V6.68975H10.1923V8.80525H11.1923V9.9975H1.5ZM3.69225%208.80525H5.75V6.68975H3.69225V8.80525ZM6.94225%208.80525H9V6.68975H6.94225V8.80525Z%22%2F%3E%3C%2Fsvg%3E"); }
/* ==========================================================================
   UEBERNOMMEN AUS DEM LIVE-STAND (v66) am 3. Sep - zweiter Fall.
   Von einer anderen Session direkt deployt, stand nicht in dieser Quelle.
   ========================================================================== */
/* Die Aufgabenliste kommt jetzt aus dem CMS (Rich Text). Webflow rendert
   Rich Text immer als <div class="w-richtext">, die <ul> liegt DARIN - die
   Klasse kann also nicht mehr auf der Liste selbst sitzen.
   Ohne diese Regel zaehlt der Einzug doppelt: space/3 vom Wrapper plus die
   40px aus Webflows ul-Normalisierung. Die Liste stuende 40px zu weit
   rechts. So bleibt der Einzug exakt wie vor der CMS-Umstellung. */
.job-card_tasks.w-richtext ul {
  padding-left: 0;
  margin-bottom: 0;
}
/* Aufzaehlungspunkte fehlten: `padding-left: 0` oben plus das
   voreingestellte `list-style-position: outside` zeichnet den Punkt
   ausserhalb der Inhaltsbox, er lag im Padding des Elternteils.
   `inside` zieht bei Umbruch die zweite Zeile unter den Punkt, deshalb
   `outside` plus eigener Einzug. */
.job-card_tasks.w-richtext ul {
  list-style: disc outside;
  padding-left: 1.1em;
}
.job-card_tasks.w-richtext ul li {
  padding-left: 0;
}
/* ---------------------------------------- JobCard: drei Bloecke (23. Sep)
   Die Karte trug EINEN Rich-Text-Block. Der Entwurf
   (Figma 4826:20482) zeigt je Stelle zwei bis drei Bloecke, jeder mit
   eigener Ueberschrift:
     Fahrzeugbautechniker   Aufgaben + Anforderungen
     Lehre                  Lehrstelle + Mitbringen + Das erwartet dich
     Schlosser              Aufgaben + Anforderungen
   Gebaut als zwei zusaetzliche Paare (Ueberschrift + Rich Text), alle an
   eigene CMS-Felder gebunden. Die Listen tragen dieselbe Klasse wie die
   erste (`job-card_tasks`), damit die Regel oben und die Typografie ohne
   Zutun greifen.
   `:empty` ist der Kern: Bei den beiden Stellen ohne dritten Block bleiben
   Ueberschrift und Liste leer im DOM stehen - Webflow rendert gebundene
   Elemente auch ohne Inhalt. Ohne diese Regel entstuenden dort zwei
   Leerzeilen Abstand. Beim Rich Text greift `:empty` nicht am Element
   selbst, weil Webflow immer ein Wrapper-<div> erzeugt; deshalb die
   Variante ueber das leere Kind. */
/* Blockueberschrift ist H4 (Figma 4826:20489), nicht text-small.
   `margin-bottom: 0` halbiert den Abstand zur Liste: er kam aus Rand
   (12px) PLUS row-gap des Wrappers (12px) = 24px; jetzt traegt ihn der
   row-gap allein. */
.job-card_blocktitle {
  font-size: var(--_sizes---font-size--h4);
  font-weight: var(--_sizes---font--weight--bold);
  line-height: var(--_sizes---font--line-height--relaxed);
  margin-top: var(--_sizes---space--4);
  margin-bottom: 0;
}
/* Der erste Titel sitzt direkt unter der Kurzbeschreibung bzw. am Anfang
   des aufgeklappten Bereichs - dort keinen zusaetzlichen Abstand. */
.job-card_details-inner > .job-card_blocktitle:first-child {
  margin-top: 0;
}
.job-card_blocktitle:empty {
  display: none;
}
.job-card_tasks.w-richtext:not(:has(li)) {
  display: none;
}
/* Abstand zwischen den JobCards.
   `.job-list_items` traegt `grid-row-gap: layout/grid-gap` (= space/4, 24
   auf Desktop) aus Webflow. Seit die Karten aus dem CMS kommen, liegt
   darin aber nur noch EIN Kind - die Collection List. Die Karten selbst
   stecken zwei Ebenen tiefer in `.w-dyn-items`, wo der Gap nicht
   hinreicht: die Karten standen ohne Abstand aufeinander.
   Deshalb dieselbe Variable dort setzen, wo die Karten tatsaechlich
   untereinander liegen. Bewusst die Variable und keine 24 - der Wert
   gehoert dem Token, und der skaliert mit (24 / 20 / 16). */
.job-list_items > .w-dyn-list {
  width: 100%;
}
/* Das Raster der Karten (zwei Spalten, mobil eine) steht seit 23. Sep
   im Abschnitt "Jobkarten" oben - dieselbe Variable als `gap`. */
/* Kennzahlen aus dem CMS. Webflow legt `w-dyn-list` auf dasselbe Element
   wie `.stats-row`, schiebt aber `.w-dyn-items` als Zwischenebene ein. Das
   12-Spalten-Raster von `.stats-row` traefe damit nur diese eine Ebene, und
   die vier Kacheln teilten sich EINE Spalte - gemessen 48px statt 282px.
   Loesung: die Zwischenebene spannt ueber alle Spalten und gibt das Raster
   an die Kacheln weiter. Gleiche Ursache wie bei `job-list_items` oben. */
[data-stats-cms] > .w-dyn-items {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  /* subgrid erbt nur die Spalten. Der Zeilenabstand der Zwischenebene
     bleibt `normal` = 0, und sobald die Kacheln umbrechen (2-up Tablet,
     1-up Mobil), stossen sie ohne Abstand aneinander - gemeldet 23. Sep.
     Desktop ist eine Zeile, dort fiel es nicht auf. Wert laut Design:
     `text/gap-lg`. */
  row-gap: var(--_sizes---text--gap-lg);
}
/* Die Spannweiten stehen im Raster-Abschnitt (§3d) an `.stats-row_item`
   bzw. `.u-grid-4.is-stats > *`. Im CMS-Fall trifft der Kindselektor nur
   den `w-dyn-items`-Wrapper, nicht die Kacheln - sie brauchen dieselben
   Werte eine Ebene tiefer. */
[data-stats-cms="grid4"] .w-dyn-item { grid-column-start: span 3; }
@media (max-width: 991px) {
  [data-stats-cms="grid4"] .w-dyn-item { grid-column-start: span 2; }
}
@media (max-width: 599px) {
  [data-stats-cms="grid4"] .w-dyn-item { grid-column-start: span 6; }
}
/* Ohne subgrid faellt die Zwischenebene auf ein eigenes 4-Spalten-Raster
   zurueck. Die Kacheln duerfen dann keine feste Spannweite mehr tragen,
   sonst rechnen sie gegen ein Raster, das es nicht mehr gibt. */
@supports not (grid-template-columns: subgrid) {
  [data-stats-cms] > .w-dyn-items {
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: var(--_sizes---space--4);
    grid-row-gap: var(--_sizes---text--gap-lg);
  }
  [data-stats-cms] .stats-row_item,
  [data-stats-cms] .w-dyn-item,
  [data-stats-cms] .stat { grid-column: auto; }
  @media screen and (max-width: 767px) {
    [data-stats-cms] > .w-dyn-items { grid-template-columns: 1fr; }
  }
}
/* ================== Kundenvideos vorerst ausgeblendet — 16. Sep
   Die Sektion "Das sagen unsere Kunden" auf der Startseite zeigt zwei
   Platzhalterbilder mit den Bildunterschriften "Kundenname — Firmenname".
   Die echten Videos liefert der Kunde nach; das kann einige Wochen
   dauern. Bis dahin soll die Sektion nicht sichtbar sein.
   BEWUSST NUR CSS, nichts geloescht. Die Komponente `video-reference`
   und ihre einzige Instanz auf der Startseite bleiben unveraendert im
   Designer stehen. Zum Wiedereinblenden genuegt es, diesen Block zu
   entfernen - es muss nichts nachgebaut werden.
   `display: none` und nicht `visibility: hidden` oder `opacity: 0`:
   nur so verschwindet auch der Platz, den die Sektion einnimmt, und der
   Abschnitt liegt nicht mehr in der Vorlesereihenfolge. Ein bloss
   transparenter Abschnitt waere fuer Screenreader weiterhin da.
   Nicht ueber die Sichtbarkeit am Element im Designer geloest, obwohl
   das ginge: die Komponente hat genau eine Instanz, aber die Einstellung
   saesse an der KOMPONENTE und damit an jeder kuenftigen Platzierung.
   Hier steht der Grund im Kommentar, statt als stummer Schalter im
   Designer. */
.videoref {
  display: none;
}
/* ------------------------------------- Album-Datenblock — 16. September
   Die Karussell-Alben der Startseite: jede Kachel steht fuer einen Ordner
   mit mehreren Bildern und Videos, durch die im Modal geblaettert wird.
   Der Block ist die Datenquelle dafuer - eine Collection List ueber alle
   29 Medien, EINMAL je Seite statt einer Unterliste je Kachel. Webflow
   rendert verschachtelte Listen ohnehin nur fuenf Ebenen tief, und ein
   Knoten je Medium ist eine Groessenordnung weniger DOM.
   `display: none` ist hier NICHT nur Kosmetik, sondern der Grund, warum
   die Seite nicht langsamer wird:
   Am 16. Sep gemessen - der Block war sichtbar, alle 29 <img> trugen
   `loading="lazy"`, und Chrome lud trotzdem 16 davon beim Seitenaufruf.
   `lazy` ist eine Heuristik: der Browser laedt grosszuegig vor, was in
   die Naehe des Viewports kommt. Erst `display: none` nimmt die Bilder
   aus dem Layout und damit aus dieser Rechnung.
   Die Bilder holt das Skript spaeter selbst - beim Oeffnen des Modals
   ueber `new Image()`, nicht ueber dieses Markup. Der Block liefert nur
   Text: Album-Slug, Alt-Text und die Video-Adressen.
   Nachmessen, nicht glauben: Startseite mit leerem Cache laden und die
   Bildanfragen zaehlen. Es muessen so viele sein wie Kacheln (6), nicht
   so viele wie Medien (29). */
[data-album-daten] {
  display: none;
}
/* ------------------------ Einsatzbereich-Karten aus dem CMS — 18. September
   Die 42 Karten auf den neun Fahrzeugseiten kommen jetzt aus der
   Collection `Einsatzbereiche` statt als festes Markup. Jede Karte kann
   damit eine eigene Galerie tragen (`Einsatzbereich-Medien`), und der
   Kunde pflegt Karte und Galerie an einer Stelle.
   Am Aussehen aendert sich nichts: die Collection List rendert dieselbe
   Struktur mit denselben Klassen, die Regeln darueber greifen
   unveraendert. Die Liste selbst darf im Raster aber nicht als eigene
   Rasterzelle zaehlen - sonst stuenden alle Karten in EINER Spalte.
   `display: contents` loest das: die Wrapper verschwinden aus dem
   Layout, die Karten werden direkte Kinder des Rasters.
   Zwei versteckte Traeger je Karte, nach demselben Muster wie bei den
   Galerie-Videos: gebundene ATTRIBUTWERTE lehnt die Designer-API ab
   ("value must be a string or a binding"), gebundene TEXTE gehen. Am
   18. Sep erneut geprueft - derselbe Fehler wie am 12. Sep. Das Skript
   liest den Icon-Schluessel aus dem Traeger und setzt ihn als
   `data-icon` auf die Karte. */
.fz-usecase-grid > .w-dyn-list,
.fz-usecase-grid > .w-dyn-list > .w-dyn-items {
  display: contents;
}
[data-einsatz-slug],
[data-einsatz-icon] {
  display: none;
}
/* Der Datenblock mit den Galeriebildern. `display: none` ist hier NICHT
   Kosmetik, sondern der Grund, warum die Seite nicht langsamer wird:
   am 17. Sep am Album-Block gemessen, dass Chrome 16 von 29 Bildern
   beim Seitenaufruf laedt, obwohl alle `loading="lazy"` tragen. `lazy`
   ist eine Heuristik - erst `display: none` nimmt die Bilder aus dem
   Layout und damit aus dieser Rechnung.
   Das Skript holt die Adressen als `src`-ATTRIBUT (nicht `currentSrc`,
   das bei nie geladenen Bildern leer bleibt) und setzt sie erst beim
   Oeffnen des Modals. */
[data-einsatz-daten] {
  display: none;
}