/* lsmg.dev — die eigenen Bausteine.
   ───────────────────────────────────────────────────────────────────────────
   Die GRUNDLAGE kommt aus `lsmg.css`, unverändert von lightsignalmedia.group:
   Farben, Schrift, Abstände, Knöpfe, Eyebrows, Kopfleiste, Fussbereich, Modale.
   Diese Datei ergänzt nur, was es dort nicht gibt — Katalog, Marken-Kacheln,
   Zahlenband und den Anfrage-Assistenten.

   ⚠ WAS HIER NICHT HINEINGEHÖRT: eigene Farben, eigene Schriftgrößen für
   Überschriften, eigene Knopfformen. Sobald hier ein Farbwert steht, der nicht
   aus `var(--…)` kommt, laufen die beiden Auftritte wieder auseinander — genau
   das war der Zustand vorher (blaue Akzente, fette Überschriften, 92 KB
   eigenes CSS).

   Die Formensprache der Hauptseite in drei Sätzen:
     · Abschnitte trennen LINIEN, keine Kästen.
     · Gelb ist für Eyebrows, Aufzählungspunkte und Handlungsaufrufe reserviert.
     · Überschriften sind dünn (200) mit einem fetten Teil.
*/

/* ═══ Kopfleiste: ein Knopf IN der Navigation ════════════════════════════
   Die Hauptseite hat keinen `.btn` in der `.nav` — lsmg.dev schon (Telefon).
   Dort gewinnt `.nav a` (0,1,1) gegen `.btn--y` (0,1,0): der Knopf bekam
   helle Schrift auf gelbem Grund und war unlesbar. Dieselbe Falle wie beim
   Hosting-Menü der Hauptseite, nur andersherum.
   Nicht mit `!important` erschlagen, sondern mit genug Spezifität. */
.hd .nav a.btn--y,.hd .nav a.btn--y span{color:#000}
.hd .nav a.btn--y:hover{color:#000}
.hd .nav a.btn--y svg{color:#000;opacity:.8}
/* Der Verweis auf die Dachmarke ist eine Nebenaktion — er soll die beiden
   Hauptziele (Übersicht, Anruf) nicht überstrahlen. */
.hd .nav a.acct__login{font-size:11px}

/* ═══ Hero ═══════════════════════════════════════════════════════════════ */
.phero{padding:clamp(90px,13vh,150px) 0 clamp(50px,7vh,80px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(30px,5vw,70px);align-items:center}
.hero__text h1{font-family:var(--font);font-weight:200;
  font-size:clamp(38px,6.4vw,80px);line-height:1.04;letter-spacing:-.03em;margin:14px 0 0}
.hero__text h1 .hl{font-weight:700;color:var(--text)}
.hero__sub{color:var(--text-2);font-size:clamp(15px,1.5vw,17px);line-height:1.7;
  max-width:56ch;margin:20px 0 0}
.hero__sub strong{color:var(--text);font-weight:700}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__reassure{font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);margin:22px 0 0}

/* Leuchtturm mit Signalkegel — das Bildmotiv der Marke. */
.hero__visual{display:grid;place-items:center;min-height:min(46vh,420px)}
.lh-stage{position:relative;width:min(100%,340px);aspect-ratio:1;display:grid;place-items:center}
.lh-ring{position:absolute;inset:6%;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,rgba(254,221,0,.16),transparent 62%);
  border:1px solid var(--line-2)}
.lh-beam{position:absolute;left:50%;top:38%;width:78%;height:20%;
  background:linear-gradient(90deg,rgba(254,221,0,.42),transparent 78%);
  transform-origin:0 50%;transform:rotate(-9deg);filter:blur(9px);pointer-events:none}
.lh-img{position:relative;width:62%;height:auto;aspect-ratio:1;object-fit:contain}

@media(max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:34px}
  .hero__visual{order:-1;min-height:0}
  .lh-stage{width:min(100%,240px)}
}

/* ═══ Abschnitte ═════════════════════════════════════════════════════════ */
.section{padding:clamp(52px,8vh,92px) 0}
/* „deep" war eine eigene Hintergrundfarbe. Jetzt dieselbe abgesetzte Fläche
   wie `.capsbg` auf der Hauptseite — randlos über die volle Breite. */
.section--deep,.section--warm{position:relative}
.section--deep::before,.section--warm::before{content:"";position:absolute;
  inset:0 calc(50% - 50vw);background:var(--ink-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);z-index:0}
.section--deep>*,.section--warm>*{position:relative;z-index:1}
.wrap--wide{width:min(1480px,calc(100vw - 48px));margin-inline:auto}

/* ═══ Marken der Gruppe ══════════════════════════════════════════════════ */
.fhero-mount{margin-bottom:clamp(30px,4vw,48px)}
.fhero__eyebrow,.fcard__eyebrow{font-size:11px;font-weight:700;letter-spacing:.28em;
  text-transform:uppercase;color:var(--text-3)}
.fhero__logo,.fcard__logo{display:block;max-width:100%;height:auto}
.fhero__name{font-family:var(--font);font-weight:200;
  font-size:clamp(26px,3.6vw,44px);line-height:1.1;letter-spacing:-.02em;margin:12px 0 0}
.fhero__pitch{color:var(--text-2);font-size:15px;line-height:1.7;max-width:62ch;margin:14px auto 0}
.fhero__more,.fcard__more{display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--yellow);
  text-decoration:none;margin-top:16px}
.fhero__more:hover,.fcard__more:hover{text-decoration:underline}

/* Die Marken-Kacheln: Linie oben statt Kasten — dieselbe Kachelform wie
   `.caps__i` und der Team-Block auf der Hauptseite. */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:30px 36px}
.fcard{border-top:1px solid var(--line);padding-top:18px;display:flex;
  flex-direction:column;gap:10px;text-decoration:none;color:inherit}
.fcard__top{display:flex;align-items:center;gap:12px}
.fcard__ic,.fhero__ic{flex:0 0 auto;width:34px;height:34px;border-radius:9px;
  display:grid;place-items:center;background:var(--panel);border:1px solid var(--line-2);
  color:var(--yellow);font-size:15px}
.fcard__name{font-size:18px;font-weight:700;color:var(--text)}
.fcard__pitch{color:var(--text-2);font-size:14px;line-height:1.62;margin:0}
/* Markenfarbe NUR als schmaler Streifen — nicht als Flächenfarbe: die Kachel
   soll zur Seite gehören, die Marke sich darin nur zu erkennen geben. */
.fcard[data-brandcolor]{border-top-color:var(--brandcolor,var(--line))}

/* ═══ Zahlenband ═════════════════════════════════════════════════════════
   Der Streifen lief mit weniger Luft als eine normale `.section` (40–64 statt
   52–92) und stiess unten direkt an die Filterleiste — die Folge war ein
   gedraengter Block aus Zahlen, Suchfeld und Chips ohne erkennbare Zaesur.
   Jetzt eher mehr als eine Sektion, damit die Zahlen fuer sich stehen. */
.statsband{padding:clamp(60px,9vh,108px) 0}
/* FORM WIE AUF lightsignalmedia.group (`.ab__facts` + `.widerow`):
   EINE durchgehende Linie ueber dem ganzen Band statt einer je Zahl — das war
   der sichtbare Unterschied — und der Block laeuft breiter als der Fliesstext
   (bis 1480 px), damit die Zahlen Platz haben. Die Masse sind woertlich von
   dort uebernommen: 52 px Abstand, 52 px Polster, gap 30/32.
   `--bt-w` und die Rechnung dahinter stehen als `.widerow` in der gemeinsamen
   `lsmg.css`; hier ausgeschrieben, weil `.stats` sonst zwei Klassen braeuchte
   und die Liste von `catalog.js` erzeugt wird. */
.stats{list-style:none;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:30px 32px;
  --bt-w:max(100%,min(1480px,calc(100vw - 96px)));width:var(--bt-w);
  margin:52px 0 0 calc(50% - var(--bt-w)/2);
  padding-top:52px;border-top:1px solid var(--line)}
.stat__num{display:block;font-family:var(--font);font-weight:200;
  font-size:clamp(34px,3.9vw,54px);line-height:1;letter-spacing:-.03em;color:var(--text)}
.stat__label{display:block;font-size:13px;color:var(--text-3);letter-spacing:.05em;margin-top:14px}

/* ═══ Katalog ════════════════════════════════════════════════════════════
   ⚠ Diese Klassen erzeugt `catalog.js` zur LAUFZEIT — sie stehen in keiner
   HTML-Datei. Wer nur das Markup durchsucht, findet sie nicht und lässt sie
   beim Umbau weg; die Folge war eine Trefferliste ohne Raster, in der die
   Karten übereinanderlagen. Gegenprobe: im Browser die tatsächlich gesetzten
   Klassen gegen die geladenen Regeln halten, nicht die Quelldateien. */
/* Die Leiste klebt beim Scrollen oben fest — sie darf trotzdem atmen. Mit
   16 px Polster und 6 px Abstand nach unten sass das Suchfeld praktisch auf den
   Zahlen und der erste Gruppenkopf praktisch auf den Chips. */
.cat-controls{position:sticky;top:64px;z-index:20;background:var(--ink);
  border-bottom:1px solid var(--line);padding:26px 0 22px;margin-bottom:20px}
.cat-controls>*{width:min(var(--wrap),calc(100vw - 48px));margin-inline:auto}
.cat-search{position:relative;display:flex;align-items:center;gap:10px;
  border:1px solid var(--line);border-radius:999px;padding:0 16px;
  background:var(--panel);transition:border-color .18s var(--ease)}
.cat-search:focus-within{border-color:var(--yellow)}
.cat-search i{color:var(--text-3);font-size:14px}
.cat-search input{flex:1;min-width:0;background:none;border:0;outline:none;
  color:var(--text);font:inherit;font-size:15px;padding:13px 0}
.cat-search input::placeholder{color:var(--text-3)}
.cat-search__clear{background:none;border:0;color:var(--text-3);cursor:pointer;
  font-size:16px;line-height:1;padding:6px}
.cat-search__clear:hover{color:var(--yellow)}

.cat-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
/* Filterknöpfe wie `.fchip` auf der Hauptseite — dieselbe Pillenform. */
.chip{font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-2);background:transparent;
  border:1px solid var(--line);padding:9px 15px;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;transition:.18s var(--ease)}
.chip:hover{border-color:var(--text-2);color:var(--text)}
.chip.on,.chip[aria-pressed="true"]{background:var(--yellow);color:#000;border-color:var(--yellow)}
.chip i{font-size:12px}

.cat-group{margin-bottom:clamp(46px,6.5vh,78px)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:26px}
/* Die Akzentvariante kommt als Zweitklasse mit (`katcard--teal`) und setzt nur
   `--pc`. Alles Weitere leitet sich daraus ab: Oberkante, Icon, Hover. */
.katcard--gold{--pc:var(--yellow)}
.katcard--teal{--pc:#20C997}
.katcard--coral{--pc:#E8452C}
.katcard--blue{--pc:var(--blue)}

/* Zahlenband: siehe `.stats` weiter unten — die Linie steht ueber dem ganzen
   Band, nicht mehr ueber jeder einzelnen Zahl. */
.stat{border-top:0;padding-top:0}

/* Einblenden beim Scrollen — den Zustand `is-in` setzt `header/header.js`
   (IntersectionObserver), nicht das gemeinsame `header.js`.

   ⚠ `scripting: enabled` ist kein Schmuck: Der Startwert ist `opacity:0`, und
   gesetzt wird `is-in` NUR von JavaScript. Ohne die Abfrage bliebe der
   Kontaktbereich bei abgeschaltetem JS für immer unsichtbar — eine Seite, die
   ihre Telefonnummer versteckt, weil eine Animation nicht laufen konnte.
   Dieselbe Familie wie der IntersectionObserver im verborgenen Tab: der
   Beobachter feuert nicht, und der Inhalt wartet ewig. */
@media (scripting: enabled){
  .einblend{opacity:0;transform:translateY(12px);
    transition:opacity .45s var(--ease),transform .45s var(--ease)}
  .einblend.is-in{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){ .einblend{opacity:1;transform:none;transition:none} }

.cat-group__head{margin:clamp(50px,7vh,84px) 0 4px;padding-top:32px;
  border-top:1px solid var(--line)}
/* ⚠ Das Icon steckt IM <h2>, unmittelbar vor dem Text — so baut es `catalog.js`.
   Ohne eigene Masse erbt es die Schriftgroesse der Ueberschrift und klebt am
   ersten Buchstaben. Deshalb: die Ueberschrift selbst wird zum Flex-Behaelter
   (Abstand über `gap`, keine Ränder am Icon), und das Icon bekommt feste Masse
   im selben Kästchen-Stil wie die Marken- und Katalogkarten. */
.cat-group__head h2{font-family:var(--font);font-weight:200;
  font-size:clamp(24px,3.2vw,38px);line-height:1.15;letter-spacing:-.02em;
  margin:0 0 10px;display:flex;align-items:center;gap:14px}
.cat-group__ic{flex:0 0 auto;display:grid;place-items:center;
  width:34px;height:34px;border-radius:9px;
  background:var(--panel);border:1px solid var(--line-2);
  color:var(--yellow);font-size:14px}
.cat-group__blurb{color:var(--text-3);font-size:14px;line-height:1.65;
  margin:0 0 30px;max-width:70ch}
.cat-empty{text-align:center;color:var(--text-3);padding:56px 0}
.cat-empty i{font-size:26px;color:var(--yellow);display:block;margin-bottom:14px}

/* ---- Marken-Kacheln (`.bp__f` im `.bteaser`) --------------------------------
   Form, Raster und Hover kommen aus der gemeinsamen `lsmg.css` — dieselbe
   Kachel wie der Marken-Teaser auf lightsignalmedia.group. Was dort als
   Inline-Style im Markup steht (Kicker, Name, „Mehr erfahren"), steht hier als
   Klasse: so zieht die Farbe aus `--pc` der Modifier-Klasse und muss nicht in
   jedes einzelne Element geschrieben werden.
   Auf der Hauptseite ist die Kachel ein `<a>` mit Ziel; hier ist sie ein
   `<article>`, das ein Fenster oeffnet — deshalb `cursor:pointer` von Hand. */
.bteaser .bp__f{cursor:pointer}
.bteaser .bp__f:focus-visible{outline:none;background:rgba(255,255,255,.058);
  border-color:var(--line);transform:translateY(-3px)}
.bp__f-kick{display:block;font-size:11px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--pc,var(--yellow));margin-bottom:8px}
.bteaser .bp__f>b{font-size:24px;font-weight:700;color:var(--text);line-height:1.2}
.bp__f-text{color:var(--text-2);font-size:14px;line-height:1.62;margin-top:9px}
.bp__f-more{display:block;margin-top:auto;padding-top:14px;
  color:var(--pc,var(--yellow));font-weight:700;font-size:13px}

/* Produktkarten — Panel mit farbiger Oberkante.
   Vorher waren es blosse Linien mit Text darunter; bei dreissig Eintraegen
   verschwamm das Raster zu einer grauen Flaeche, in der nichts hervorstach.
   Die Form ist NICHT neu erfunden: `.bteaser .bp__f` auf lightsignalmedia.group
   macht es genau so — getoenter Grund, feiner Rahmen, kraeftige Oberkante in
   der Markenfarbe, Anheben beim Ueberfahren. Damit wird das Raster praechtiger
   UND bleibt dieselbe Sprache wie die Hauptseite. */
.katcard{display:flex;flex-direction:column;gap:10px;cursor:pointer;text-align:left;
  font:inherit;color:inherit;background:rgba(255,255,255,.026);
  border:1px solid var(--line-2);border-top:3px solid var(--pc,var(--yellow));
  border-radius:14px;padding:20px 20px 16px;
  transition:background .18s var(--ease),border-color .18s var(--ease),
             transform .18s var(--ease),box-shadow .18s var(--ease)}
.katcard:hover,.katcard:focus-visible{background:rgba(255,255,255,.058);
  border-color:var(--line);border-top-color:var(--pc,var(--yellow));
  transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.28)}
.katcard:focus-visible{outline:none}
.katcard__top{display:flex;align-items:center;gap:11px}
/* Das Icon traegt die Markenfarbe jetzt als Flaeche, nicht nur als Strich.
   `color-mix` faellt bei alten Browsern weg — dann bleibt der Panel-Grund
   stehen, die Karte sieht ruhiger aus, aber nichts bricht. */
.katcard__ic{flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:grid;
  place-items:center;background:var(--panel);border:1px solid var(--line-2);
  color:var(--pc,var(--yellow));font-size:15px;
  transition:background .18s var(--ease),border-color .18s var(--ease)}
@supports (background:color-mix(in srgb,red 10%,transparent)){
  .katcard__ic{background:color-mix(in srgb,var(--pc,var(--yellow)) 13%,transparent);
    border-color:color-mix(in srgb,var(--pc,var(--yellow)) 34%,transparent)}
  .katcard:hover .katcard__ic{background:color-mix(in srgb,var(--pc,var(--yellow)) 22%,transparent);
    border-color:color-mix(in srgb,var(--pc,var(--yellow)) 55%,transparent)}
}
.katcard__name{font-size:17px;font-weight:700;color:var(--text);line-height:1.3}
.katcard__pitch{color:var(--text-2);font-size:13.5px;line-height:1.62;margin:0}
.katcard__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.katcard__tags span{font-size:11px;color:var(--text-3);border:1px solid var(--line-2);
  border-radius:999px;padding:3px 9px}
/* Die Kategoriezeile sitzt am Fuss der Karte — `margin-top:auto` schiebt sie
   nach unten, damit sie in allen Karten einer Reihe auf derselben Hoehe steht,
   egal wie lang der Text darueber ist. */
.katcard__cat{margin-top:auto;padding-top:13px;border-top:1px solid var(--line-2);
  display:flex;align-items:center;gap:7px;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3)}
.katcard__cat i{color:var(--pc,var(--yellow));font-size:11px}
.katcard__flag{align-self:flex-start;font-size:10px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:#000;background:var(--pc,var(--yellow));
  border-radius:999px;padding:3px 9px}

/* ═══ Über-Abschnitt ═════════════════════════════════════════════════════ */
.ueber__head{max-width:70ch}
.ueber__claim{font-family:var(--font);font-weight:200;
  font-size:clamp(28px,4.2vw,50px);line-height:1.1;letter-spacing:-.02em;margin:12px 0 0}
.ueber__claim .hl{font-weight:700}
.ueber__lead{color:var(--text-2);font-size:15.5px;line-height:1.75;max-width:66ch;margin:18px 0 0}
.ueber__lead strong{color:var(--text);font-weight:700}
.facts{list-style:none;margin:clamp(34px,5vh,52px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:28px 32px}
.fact{border-top:1px solid var(--line);padding-top:18px}
.fact__ic{display:block;color:var(--yellow);font-size:15px;margin-bottom:12px}
.fact__k{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
.fact__v{display:block;font-size:15px;color:var(--text)}

/* ═══ Kontakt ════════════════════════════════════════════════════════════ */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(30px,5vw,64px);align-items:start}
.contact__text h2{font-family:var(--font);font-weight:200;
  font-size:clamp(26px,3.6vw,44px);line-height:1.12;letter-spacing:-.02em;margin:12px 0 0}
.contact__text .lead{color:var(--text-2);font-size:15.5px;line-height:1.7;max-width:52ch;margin:16px 0 0}
/* Der Anruf-Block ist der Handlungsaufruf des Abschnitts — als einziger hier
   mit gelber Fläche, wie die Hauptknöpfe der Hauptseite. */
.callout{display:inline-flex;align-items:center;gap:14px;margin-top:26px;
  padding:14px 22px 14px 16px;border-radius:999px;background:var(--yellow);color:#000;
  text-decoration:none;transition:.18s var(--ease)}
.callout:hover{transform:translateY(-1px);box-shadow:0 10px 26px -10px rgba(254,221,0,.5)}
.callout__ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:rgba(0,0,0,.14);font-size:14px}
.callout__txt small{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;opacity:.66}
.callout__txt b{display:block;font-size:18px;font-weight:800;letter-spacing:-.01em}
.contact__alt{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:18px;font-size:14px}
.contact__alt a{color:var(--text-2);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.contact__alt a:hover{color:var(--yellow)}
.contact__alt i{color:var(--yellow)}
.ticks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:9px}
.ticks li{position:relative;padding-left:16px;font-size:13.5px;color:var(--text-2);line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:.52em;width:6px;height:6px;
  border-radius:50%;background:var(--yellow);box-shadow:0 0 0 3px rgba(254,221,0,.12)}

.contact__form{border-top:1px solid var(--line);padding-top:22px}
.contact__or{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--yellow);margin:0 0 18px}
.contact__hint{font-size:13px;color:var(--text-2);margin:12px 0 0;min-height:1.2em}
.contact__legal{color:var(--text-3);margin:12px 0 0}
.contact__legal a{color:var(--text-2)}
.contact__alt-cta{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line-2);
  font-size:13.5px;color:var(--text-3);display:flex;flex-wrap:wrap;align-items:center;gap:12px}

@media(max-width:860px){ .contact{grid-template-columns:1fr} }

/* ═══ Anfrage-Assistent ══════════════════════════════════════════════════
   ⚠ Die Klassennamen stammen aus dem BUENDEL (`wizard.js`), nicht aus dem
   Markup — im ersten Anlauf standen hier geratene Namen (`steps`, `step`,
   `wz__step-n`), und die Seite lief voellig ohne Gestaltung. Die echten Namen
   holt man sich aus dem DOM der laufenden Seite, nicht aus den Quelldateien.
   Gegenprobe: gesetzte Klassen gegen geladene Regeln schneiden. */

/* Kopfzeile der Seite — der Assistent bringt eine EIGENE mit, zusaetzlich zur
   Kopfleiste aus dem Header-Slot. Zwei Leisten uebereinander sind keine
   Gestaltungsfrage, sondern ein Fehler: die eigene wird ausgeblendet. */
.anf-top{display:none}
/* ⚠ Die Kopfleiste ist `position:fixed` und liegt UEBER dem Seitenanfang. Auf
   der Startseite faellt das nicht auf, weil der Hero genug Innenabstand hat —
   hier stand die Ueberschrift zur Haelfte hinter der Leiste und schien als
   gelber Balken durch. Der obere Abstand ist also kein Weissraum nach Geschmack,
   sondern der Platz, den die Leiste einnimmt. */
/* Der Assistent liegt NICHT in einem `.wrap` — die Breitenbegrenzung kam aus
   der alten `anfrage.css`. Nach deren Stilllegung lief der Inhalt über die
   volle Fensterbreite (1905 px gemessen). Also hier selbst begrenzen, mit
   derselben Variable wie der Rest des Auftritts. */
.anf-main{padding:clamp(96px,14vh,132px) 0 clamp(50px,8vh,90px);
  width:min(var(--wrap),calc(100vw - 48px));margin-inline:auto}
.anf-top,.anf-foot{width:min(var(--wrap),calc(100vw - 48px));margin-inline:auto}
.anf-eyebrow{font-size:11px;font-weight:700;letter-spacing:.28em;
  text-transform:uppercase;color:var(--text-3)}
.anf-h1{font-family:var(--font);font-weight:200;font-size:clamp(28px,4.4vw,52px);
  line-height:1.08;letter-spacing:-.03em;margin:12px 0 0}
.anf-h1 b,.anf-h1 .hl{font-weight:700}
.anf-sub,.anf-intro{color:var(--text-2);font-size:15.5px;line-height:1.7;
  max-width:62ch;margin:18px 0 0}
.anf-back{display:inline-flex;align-items:center;gap:8px;font-size:13px;
  color:var(--text-3);text-decoration:none}
.anf-back:hover{color:var(--yellow)}
.anf-foot{border-top:1px solid var(--line);padding:22px 0;color:var(--text-3);
  font-size:13px;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.anf-foot a{color:var(--text-2)}
.anf-foot__sep{opacity:.4}
.anf-noscript{border-left:3px solid var(--yellow);padding:12px 16px;
  background:rgba(254,221,0,.06);border-radius:0 10px 10px 0}

/* Schrittanzeige — waagerecht, wie die Kasse der Hauptseite. */
.wizard{margin-top:clamp(28px,4vh,44px)}
.wz__steps{list-style:none;margin:0 0 clamp(28px,4vh,44px);padding:0 0 18px;
  display:flex;flex-wrap:wrap;gap:10px 26px;border-bottom:1px solid var(--line)}
.wz__step{display:inline-flex;align-items:center;gap:10px;color:var(--text-3)}
.wz__step-n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line);font-family:var(--mono);font-size:11px;flex:0 0 auto}
.wz__step-t{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.wz__step.is-active{color:var(--text)}
.wz__step.is-active .wz__step-n{background:var(--yellow);border-color:var(--yellow);
  color:#000;font-weight:700}
.wz__step.is-done .wz__step-n{border-color:var(--yellow);color:var(--yellow)}

.wz__body{min-height:min(52vh,460px)}
.wz__pane{display:block}
.wz__title{font-family:var(--font);font-weight:200;font-size:clamp(22px,3vw,34px);
  line-height:1.15;letter-spacing:-.02em;margin:0 0 8px}
.wz__title b{font-weight:700}
.wz__sub{color:var(--text-2);font-size:14.5px;line-height:1.65;max-width:60ch;margin:0 0 26px}

/* Auswahlkarten — Linie oben, wie alle Kacheln des Auftritts. */
.wz__cards{display:grid;gap:22px 26px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.wz__cards--3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.wz__card{border:0;border-top:1px solid var(--line);padding:18px 0 0;
  background:none;text-align:left;font:inherit;color:inherit;cursor:pointer;
  display:flex;flex-direction:column;gap:8px;transition:border-color .18s var(--ease)}
.wz__card:hover{border-top-color:var(--yellow)}
.wz__card i{color:var(--yellow);font-size:17px}
.wz__card b,.wz__card-name{display:block;font-size:16px;font-weight:700;color:var(--text)}
.wz__card span,.wz__card-blurb{display:block;color:var(--text-3);font-size:13px;line-height:1.55}
/* Gewaehlt: gelbe Kante und ein Haken — nicht die ganze Flaeche einfaerben. */
.wz__card.is-sel,.wz__card[aria-pressed="true"]{border-top-color:var(--yellow)}

/* Fussleiste: zurueck links, weiter rechts — dieselbe Ordnung wie in der Kasse. */
.wz__nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:clamp(30px,4vh,48px);padding-top:22px;border-top:1px solid var(--line)}
.wz__nav-meta{flex:1;text-align:center;font-size:12.5px;color:var(--text-3)}
.wz__btn{font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;border-radius:999px;padding:13px 24px;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;transition:.18s var(--ease);border:1px solid}
.wz__btn--primary{background:var(--yellow);color:#000;border-color:var(--yellow)}
.wz__btn--primary:hover{transform:translateY(-1px);box-shadow:0 10px 26px -10px rgba(254,221,0,.5)}
.wz__btn--ghost{background:none;color:var(--text-2);border-color:var(--line)}
.wz__btn--ghost:hover{border-color:var(--text-2);color:var(--text)}
.wz__btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
/* Der Haken steht im Markup jeder Karte und war IMMER sichtbar — er soll die
   Auswahl bestaetigen, nicht sie vortaeuschen. Standardmaessig weg. */
/* ⚠ Mit `.wz__check` allein (0,1,0) gewinnt die Icon-Schrift-Regel `.fa-solid`
   bei gleicher Spezifitaet, weil sie spaeter geladen wird — der Haken blieb
   sichtbar. Ein Vorfahre mehr genuegt, `!important` braucht es nicht. */
.wizard .wz__check{display:none;color:var(--yellow)}
.wizard .wz__card.is-sel .wz__check,
.wizard .wz__card[aria-pressed="true"] .wz__check{display:inline-block}
.wz__req{color:var(--yellow)}
.wz__req{font-size:12px}
.wz__done{text-align:center;padding:40px 0}
.wz__done-ic{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  margin:0 auto 22px;background:rgba(254,221,0,.14);color:var(--yellow);font-size:26px;
  border:1px solid color-mix(in srgb,var(--yellow) 35%,transparent)}
.wz__done-meta{color:var(--text-3);font-size:13px;margin-top:14px}

@media(max-width:640px){
  .wz__steps{gap:8px 16px}
  .wz__step-t{display:none}
  .wz__nav{gap:10px}
  .wz__nav-meta{order:3;flex-basis:100%;text-align:left}
}

/* ═══ Kleinkram ══════════════════════════════════════════════════════════ */
.factbar{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;margin:26px 0 0;padding:0;
  font-size:13px;color:var(--text-3)}
.entwurf-note{border-left:3px solid var(--yellow);padding:10px 14px;
  background:rgba(254,221,0,.06);border-radius:0 8px 8px 0;font-size:13.5px;color:var(--text-2)}

/* ═══ Produkt-Fenster ════════════════════════════════════════════════════
   Der Katalog oeffnet je Eintrag ein Fenster (`catalog.js`, Klasse `is-open`).
   Es hatte NULL Regeln: `position:static`, kein Ueberlagerungsgrund — der
   Inhalt stand einfach im Seitenfluss unter den Karten.

   Aufbau wie `.pmdl` auf lightsignalmedia.group: fest ueber der Seite, dunkler
   Grund dahinter, Kasten mit 820px Hoechstbreite, Schliessen-Knopf als Quadrat
   mit Umriss. Nur die Klassennamen unterscheiden sich (`pmodal` statt `pmdl`),
   weil `catalog.js` sie erzeugt. */
.pmodal{position:fixed;inset:0;z-index:210;display:none;
  align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto;
  background:rgba(6,6,9,.82)}
.pmodal.is-open{display:flex}
.pmodal__box{position:relative;width:min(820px,100%);background:var(--ink-2);
  border:1px solid var(--line);box-shadow:0 40px 90px -20px rgba(0,0,0,.85);
  padding:34px 36px 30px}
/* Die Markenfarbe der Karte kommt als Zweitklasse mit (`katcard--teal`) und
   faerbt hier nur die obere Kante — wie bei den Karten selbst. */
.pmodal__box[class*="katcard--"]{border-top:2px solid var(--pc,var(--yellow))}

.pmodal__close{position:absolute;top:20px;right:20px;background:none;
  border:1px solid var(--line);color:var(--text-2);width:38px;height:38px;
  font-size:16px;line-height:1;cursor:pointer;transition:.15s var(--ease)}
.pmodal__close:hover{border-color:var(--yellow);color:var(--yellow)}

.pmodal__cat{display:inline-flex;align-items:center;gap:9px;
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:6px}
.pmodal__cat i{color:var(--yellow);font-size:12px}
.pmodal__name{font-family:var(--font);font-weight:200;
  font-size:clamp(26px,3.4vw,40px);line-height:1.12;letter-spacing:-.02em;
  margin:8px 0 0;display:flex;align-items:center;gap:14px;padding-right:44px}
.pmodal__ic{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;
  border-radius:10px;background:var(--panel);border:1px solid var(--line-2);
  color:var(--yellow);font-size:16px}
.pmodal__pitch{color:var(--text-2);font-size:15.5px;line-height:1.7;
  max-width:64ch;margin:16px 0 0}

.pmodal__body{margin-top:24px;padding-top:22px;border-top:1px solid var(--line);
  color:var(--text-2);font-size:14.5px;line-height:1.75}
.pmodal__body p{margin:0 0 14px}
.pmodal__body em{color:var(--text);font-style:normal;font-weight:600}
.pmodal__body strong{color:var(--text)}

/* Aufzaehlungen mit gelbem Punkt — dieselbe Form wie im Leistungsverzeichnis
   der Hauptseite. */
.pmodal__points{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.pmodal__points li{position:relative;padding-left:16px;font-size:14px;
  line-height:1.55;color:var(--text-2)}
.pmodal__points li::before{content:"";position:absolute;left:0;top:.52em;
  width:6px;height:6px;border-radius:50%;background:var(--yellow);
  box-shadow:0 0 0 3px rgba(254,221,0,.12)}

.pmodal__parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px 26px;margin-top:22px}
.pmodal__part{border-top:1px solid var(--line);padding-top:14px;font-size:14px;
  font-weight:700;color:var(--text)}
.pmodal__part-sub{display:block;font-weight:400;font-size:13px;color:var(--text-3);
  line-height:1.55;margin-top:5px}
.pmodal__media{margin-top:22px}
.pmodal__media img{width:100%;height:auto;display:block;border:1px solid var(--line-2)}

.pmodal__foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}

@media(max-width:640px){
  .pmodal{padding:0}
  .pmodal__box{min-height:100dvh;border:0;padding:26px 20px 30px}
  .pmodal__name{font-size:24px;padding-right:40px}
}

/* ═══ Rechtstexte (Impressum, Datenschutz) ═══════════════════════════════
   Drei Klassen ohne Regel, gefunden beim Smoke-Test — Fliesstext lief ueber
   die volle Breite, was nach 90 Zeichen je Zeile unlesbar wird. */
/* Der obere Abstand ist Pflicht, nicht Geschmack: die Kopfleiste ist `fixed`
   und legt sich sonst ueber die ersten Zeilen — auf den Rechtstexten traf es
   die Ueberschrift. */
.narrow{width:min(74ch,calc(100vw - 48px));margin-inline:auto;
  padding-top:clamp(96px,14vh,132px);padding-bottom:clamp(40px,6vh,70px)}
/* Steht der Text schon in einem Kopfbereich mit Abstand, nicht doppelt polstern. */
.ph .narrow{padding-top:0}
.ph{padding:clamp(96px,14vh,132px) 0 clamp(40px,6vh,70px)}

/* ═══ Rechtstexte-Seite ══════════════════════════════════════════════════
   `.lg`, `.lg__grid`, `.lg__nav`, `.lg__doc` kommen aus der gemeinsamen
   `lsmg.css` — dieselbe Seitenleiste wie auf lightsignalmedia.group. Nur der
   obere Abstand fehlt dort, weil die Hauptseite ihre Rechtstexte in eine
   `.view`-Sektion mit eigenem Innenabstand legt. Ohne ihn verschwindet die
   Ueberschrift hinter der fixierten Kopfleiste. */
.lg{padding-top:clamp(96px,14vh,132px);padding-bottom:clamp(50px,8vh,90px)}
/* Die Seitenleiste klebt unter der Kopfleiste, nicht am Fensterrand. */
.lg__nav{top:96px}
/* ⚠ `legal.js` ruft nach dem Zeichnen `scrollIntoView({block:'start'})` — das
   setzt die Ueberschrift genau dorthin, wo die fixierte Kopfleiste liegt. Kein
   Innenabstand der Welt hilft dagegen, weil danach gescrollt wird.
   `scroll-margin-top` ist die Eigenschaft, die der Browser bei genau diesem
   Sprung beruecksichtigt. */
#lgDoc,.lg__doc{scroll-margin-top:110px}

/* ═══ Container, die nur Struktur tragen ═════════════════════════════════
   Beim Smoke-Test blieben sechs Klassen ohne Regel. Vier davon sind reine
   Behaelter — sie brauchen keine eigene Gestaltung, nur die Maße des
   Auftritts. Formularfelder nutzen jetzt `.fld` aus der gemeinsamen `lsmg.css`
   (dort um `textarea` und `select` erweitert), statt dass hier ein zweiter
   Baustein mit derselben Aufgabe entsteht. */
.flagships,.ueber{position:relative}
/* Der Dachmarken-Block steht mittig — er ist die Einleitung zu den Marken,
   nicht selbst eine Kachel. */
.fhero,.fhero-wrap{text-align:center;max-width:76ch;margin-inline:auto}
.fhero-wrap{display:flex;flex-direction:column;align-items:center;gap:6px}
.fhero__logo{margin-inline:auto;max-width:120px}
.phero__sub{color:var(--text-2);font-size:clamp(15px,1.5vw,17px);line-height:1.7;
  max-width:56ch;margin:20px 0 0}
.phero__sub strong{color:var(--text);font-weight:700}