/* ===================================================================
   OPTIMUSE — Elementschicht
   ===================================================================

   Herausgeloest aus ci.css v2.3 des CI-Guides: alle Regeln, deren
   Selektor eine .w-Klasse (Website-Element) oder .fx-Klasse
   (Effektschicht) nennt. 234 Regeln, 88 Klassen, wortgleich uebernommen.

   Warum herausgeloest und nicht verlinkt: die Seite ruft keinen fremden
   Host auf — das ist ihre Grundregel, und ein <link> auf
   optimuse-ci-guide.netlify.app waere genau das.

   Warum nicht die ganze ci.css: die Datei ist 80 KB und beschreibt zu
   drei Vierteln das Chrome des Guides selbst (linke Leiste, Galerien,
   Moduswechsel, Elementevitrine). Davon braucht diese Seite nichts.

   BEFUND, der beim Uebernehmen zaehlt: die w-Regeln tragen absichtlich
   Palettenwerte statt Token — der Guide sagt dazu, sie zeigen
   optimuse.com und duerfen beim Moduswechsel nicht mitkippen. Fuer eine
   Seite, die es nur in Dark Mode gibt, ist das richtig so.

   Und: die senkrechten Abschnittsabstaende sind in der Vitrine
   gestaucht. ci.css nennt den echten Wert im Kommentar — 130 px oben,
   140 px unten. Diese Datei laesst die gestauchten Werte stehen; lp.css
   stellt sie zurueck.
   =================================================================== */

/* Aus dem Guide-Chrome nachgezogen: .w-vergleich steht in einem
   waagrecht scrollenden Kasten, und die Zweispaltigkeit bricht auf
   schmalen Fenstern um. Beide Regeln nennen keine .w-Klasse im
   Selektor und waeren sonst herausgefallen. */
.scroll-x{overflow-x:auto;margin:18px 0}
.w-zweispalt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}

/* -------------------------------------------------------------------
   Die Website-Elemente, nachgebaut nach den gemessenen Werten.
   Praefix w- fuer "Website", damit sie nie mit dem Guide-Chrome
   verwechselt werden. Sie tragen Palettenwerte statt Token: sie sind
   Exponate und muessen in beiden Modi gleich aussehen.

   Gemessen an optimuse.com: Hoehe 56, Radius 6, PP Monument Extended
   16/25,6 Versalien, Uebergang 0,4s ease-in-out. Der Ueberfahr-Zustand
   waechst als Flaeche von unten ein — auf der Website ueber ein
   ::after, hier ueber background-size, weil das Ergebnis dasselbe ist
   und ohne zusaetzliches Element auskommt.
   ------------------------------------------------------------------- */

.w-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:16px;line-height:25.6px;
  text-transform:uppercase;letter-spacing:0;text-decoration:none;
  border-radius:6px;box-sizing:content-box;
  padding:15px 21px;min-height:26px;
  transition:background-color .4s ease-in-out,color .4s ease-in-out,border-color .4s ease-in-out;
}
.w-btn:hover{text-decoration:none}
.w-voll{background:#7488F6;color:#FFFFFF;border:0}
.w-voll:hover,.w-voll.ist-hover{background:#FFFFFF;color:#171B25}
.w-rand{background:transparent;color:#FFFFFF;border:2px solid #FFFFFF;padding:13px 19px}
.w-rand:hover,.w-rand.ist-hover{background:#FFFFFF;color:#171B25}
.w-invers{background:#FFFFFF;color:#171B25;border:0}
.w-invers:hover,.w-invers.ist-hover{background:#7488F6;color:#FFFFFF}
.w-klein{font-size:13px;line-height:20px;padding:9px 14px}
/* Feld und Knopf als eine Einheit, wie im Fuss der Website */
.w-feldgruppe{display:flex;width:100%;max-width:340px}
.w-feld{
  flex:1;min-width:0;
  background:#FFFFFF;color:#0F0F0F;border:0;
  border-radius:6px 0 0 6px;
  padding:16px 20px;height:50px;
  font:400 14px/1.2 var(--text);
}
.w-feld::placeholder{color:rgba(15,15,15,.45)}
.w-feld:focus{outline:none;box-shadow:inset 0 0 0 2px #7488F6}
.w-anschluss{border-radius:0 6px 6px 0;padding:0 18px;min-height:50px;font-size:13px}
.w-link{color:#7488F6;text-decoration:none}
.w-link:hover{color:#FFFFFF;text-decoration:none}
/* Der Fuss. Gemessen bei 1440 px: Flaeche #0F0F0F ueber die volle Breite,
   Inhalt 1200 px, Innenabstand 100 px oben und 60 px unten. Hier auf die
   Buehne verkleinert — die Verhaeltnisse stimmen, die absoluten Werte
   stehen daneben in der Massliste. */
.w-fuss{
  width:100%;background:#0F0F0F;color:#FFFFFF;
  padding:18px 16px 12px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
}
.w-fuss-sp b{
  display:block;font:700 11px/11px var(--text);color:#FFFFFF;margin-bottom:9px;
}
.w-fuss-sp span{
  display:block;font:500 11px/16px var(--text);color:rgba(255,255,255,.8);
}
.w-fuss-recht{
  grid-column:1/-1;margin-top:4px;padding-top:10px;
  border-top:1px solid rgba(255,255,255,.15);
  display:flex;flex-wrap:wrap;gap:14px;
  font:500 10px/10px var(--text);color:rgba(255,255,255,.8);
}
/* -------------------------------------------------------------------
   Die Abzuege von optimuse.com
   -------------------------------------------------------------------
   Gemessen bei 1440 px. Schriftgroessen, Radien, Knopfmasse, Bild- und
   Kachelmasse stehen in Originalgroesse. Nur die senkrechten
   Abschnittsabstaende sind gestaucht — 130 px oben und 140 px unten je
   Abschnitt ergaeben eine Seite von ueber 60 000 px. Der echte Wert
   steht in der Massliste jedes Elements.

   Alle Werte hier sind Palettenwerte, keine Token: der Abzug zeigt die
   Website und darf beim Moduswechsel nicht mitkippen.
   ------------------------------------------------------------------- */

.w-inhalt{display:block;width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.w-abschnitt{display:block;padding:58px 0;background:#0F0F0F;color:#FFFFFF}
.w-abschnitt.hell{background:#FFFFFF;color:#171B25}
.w-eyebrow{
  display:block;font:400 13px/26px var(--text);letter-spacing:.12em;
  text-transform:uppercase;color:#7488F6;margin-bottom:10px;
}
.w-h2{font:400 48px/61px var(--text);letter-spacing:-1px;margin:0 0 18px;max-width:670px}
.w-h3{font:400 34px/40px var(--text);margin:0 0 14px}
.w-h4{font:400 24px/38px var(--text);letter-spacing:-.5px;margin:0 0 10px}
.w-text{font:400 20px/32px var(--text);margin:0 0 16px;max-width:795px;color:inherit}
.w-abschnitt.hell .w-text{color:#171B25}
/* 12–16 Seitenkoepfe ------------------------------------------------ */
.w-hero{
  position:relative;display:grid;align-items:center;
  background:#0F0F0F;color:#FFFFFF;overflow:hidden;
}
.w-hero .w-inhalt{position:relative;z-index:2;padding-block:44px}
.w-hero--gross{min-height:300px}
.w-hero--regulaer{min-height:250px}
.w-hero--klein{min-height:200px}
.w-hero--xklein{min-height:150px}
.w-hero--ohne{min-height:150px;background:#0F0F0F}
.w-hero h1{font:700 60px/70px var(--text);letter-spacing:-1px;margin:0;max-width:800px}
.w-hero--klein h1{font-size:54px;line-height:63.7px}
.w-hero--xklein h1{font-size:48px;line-height:61px;font-weight:400}
.w-hero p{font:400 20px/32px var(--text);margin:16px 0 0;max-width:640px;color:rgba(255,255,255,.8)}
.w-hero .w-bild{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(118deg,#0F0F0F 0%,#1b2236 52%,#2b3550 100%);
}
.w-hero .w-bild::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(15,15,15,.92) 0%,rgba(15,15,15,.55) 60%,rgba(15,15,15,.2) 100%);
}
.w-hero .w-videomarke{
  position:absolute;right:18px;bottom:14px;z-index:3;
  font:400 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
/* 17 Brotkrumen ----------------------------------------------------- */
.w-brot{display:block;background:#0F0F0F;padding:20px 0}
.w-brot ol{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.w-brot li{font:400 13px/26px var(--text);color:rgba(255,255,255,.8)}
.w-brot li+li::before{content:"/";padding-right:8px;color:rgba(255,255,255,.4)}
.w-brot a{color:#FFFFFF;text-decoration:none}
/* 21 Textkasten mit Schatten ---------------------------------------- */
.w-schattenbox{
  display:block;background:#0F0F0F;border-radius:6px;padding:30px 34px;
  box-shadow:0 1px 1px rgba(0,0,0,.1),0 2px 6px rgba(0,0,0,.28);
}
/* 23/24 Bento-Raster ------------------------------------------------ */
.w-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.w-bento .k{
  background:#171B25;border-radius:10px;padding:24px 22px;
  display:flex;flex-direction:column;gap:9px;min-height:170px;
}
.w-bento .k.breit{grid-column:span 2}
.w-bento .k b{font:400 13px/26px var(--text);letter-spacing:.12em;text-transform:uppercase;color:#7488F6}
.w-bento .k p{margin:0;font:400 16px/25px var(--text);color:rgba(255,255,255,.8)}
.w-bento .k .schritt{
  font:700 34px/40px var(--text);color:#FFFFFF;
}
/* 25 Bildkarten ----------------------------------------------------- */
.w-bildkarten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.w-bildkarte{background:#FFFFFF;border-radius:6px;overflow:hidden;color:#171B25}
.w-bildkarte .bild{display:block;height:150px;background:linear-gradient(135deg,#0F0F0F,#7488F6)}
.w-bildkarte .txt{padding:22px 24px 26px}
.w-bildkarte .txt b{display:block;font:400 24px/32px var(--text);letter-spacing:-.5px;margin-bottom:8px}
.w-bildkarte .txt p{margin:0;font:400 16px/25px var(--text);color:#4a4f5c}
/* 26 Leistungsraster ------------------------------------------------ */
.w-leistung{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.w-leistung .k{padding:30px 40px 25px;background:#171B25;border-radius:6px}
.w-leistung .k b{display:block;font:400 13px/26px var(--text);letter-spacing:.12em;text-transform:uppercase;color:#7488F6;margin-bottom:10px}
.w-leistung .k p{margin:0;font:400 16px/25px var(--text);color:rgba(255,255,255,.8)}
/* 27 Wertekacheln — der einzige helle Abschnitt --------------------- */
.w-werte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.w-werte .k b{display:block;font:400 34px/40px var(--text);color:#171B25;margin-bottom:10px}
.w-werte .k p{margin:0;font:400 16px/25px var(--text);color:#4a4f5c}
/* 29/30 Kundenlaufband ---------------------------------------------- */
.w-laufband{display:block;background:#0F0F0F;padding:25px 0;overflow:hidden}
.w-laufband .reihe{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.w-laufband img{width:88px;height:88px;object-fit:contain;flex:0 0 auto}
/* 31 Ergebniszahlen -------------------------------------------------- */
.w-zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.w-zahlen .k b{display:block;font:700 48px/48px var(--text);color:#FFFFFF}
.w-zahlen .k span{display:block;margin-top:8px;font:400 16px/25px var(--text);color:rgba(255,255,255,.8)}
/* 32 Zitat ----------------------------------------------------------- */
.w-zitat{max-width:900px}
.w-zitat p{margin:0 0 20px;font:400 34px/44px var(--text);letter-spacing:-.5px;color:#FFFFFF}
.w-zitat .quelle{font:400 16px/25px var(--text);color:rgba(255,255,255,.8)}
/* 34/35 Team ---------------------------------------------------------- */
.w-team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.w-teamkarte .bild{
  display:block;aspect-ratio:1/1;border-radius:6px;
  background:linear-gradient(140deg,#2b3550,#0F0F0F);
}
.w-teamkarte b{display:block;margin-top:14px;font:400 20px/26px var(--text);color:#FFFFFF}
.w-teamkarte span{display:block;margin-top:4px;font:400 13px/26px var(--text);letter-spacing:.1em;text-transform:uppercase;color:#7488F6}
/* 37 Karte mit Kontakt ------------------------------------------------ */
.w-ort{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:230px}
.w-ort .links{padding:34px 36px;background:#0F0F0F}
.w-ort .karte{
  background:
    repeating-linear-gradient(0deg,#171B25 0 1px,transparent 1px 34px),
    repeating-linear-gradient(90deg,#171B25 0 1px,transparent 1px 34px),
    #10131b;
  position:relative;
}
.w-ort .karte::after{
  content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;
  transform:translate(-50%,-50%);border-radius:50%;background:#7488F6;
  box-shadow:0 0 0 7px rgba(116,136,246,.25);
}
.w-ort .kontakt{display:flex;gap:11px;margin-top:14px;font:400 18px/33.8px var(--text);color:#FFFFFF}
/* 38 Zeitstrahl -------------------------------------------------------- */
.w-zeit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.w-zeit .k{background:#171B25;border-radius:6px;padding:26px 28px}
.w-zeit .k b{display:block;font:700 34px/40px var(--text);color:#7488F6;margin-bottom:8px}
.w-zeit .k p{margin:0;font:400 16px/25px var(--text);color:rgba(255,255,255,.8)}
/* 39/40 Mockup ---------------------------------------------------------- */
.w-mockup{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.w-mockup.rechts .bild{order:2}
.w-mockup .bild{
  border-radius:6px;aspect-ratio:16/10;
  background:linear-gradient(140deg,#171B25,#0F0F0F 60%);
  position:relative;overflow:hidden;
}
.w-mockup .bild::after{
  content:"";position:absolute;inset:18%;
  border:1px solid rgba(116,136,246,.5);border-radius:4px;
  background:repeating-linear-gradient(135deg,rgba(116,136,246,.12) 0 6px,transparent 6px 12px);
}
/* 41/42 Video ------------------------------------------------------------ */
.w-video{
  position:relative;border-radius:6px;overflow:hidden;aspect-ratio:16/7;
  background:linear-gradient(140deg,#1b2236,#0F0F0F);display:grid;place-items:center;
}
.w-video .play{
  width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.14);
  display:grid;place-items:center;border:1px solid rgba(255,255,255,.4);
}
.w-video .play::after{
  content:"";border-left:16px solid #FFFFFF;border-top:10px solid transparent;
  border-bottom:10px solid transparent;margin-left:4px;
}
.w-video .titel{
  position:absolute;left:24px;bottom:20px;font:700 24px/33.6px var(--text);color:#FFFFFF;
}
/* 43–45 Blog -------------------------------------------------------------- */
.w-blogliste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.w-blogkarte{background:#171B25;border-radius:6px;overflow:hidden}
.w-blogkarte .bild{display:block;height:130px;background:linear-gradient(135deg,#2b3550,#7488F6)}
.w-blogkarte .txt{padding:20px 22px 24px}
.w-blogkarte .meta{
  display:flex;flex-wrap:wrap;gap:12px;margin-bottom:9px;
  font:400 13px/26px var(--text);color:rgba(255,255,255,.8);
}
.w-blogkarte .meta .name{font-weight:700;color:#FFFFFF}
.w-blogkarte b{display:block;font:400 24px/32px var(--text);letter-spacing:-.5px;color:#FFFFFF;margin-bottom:8px}
.w-blogkarte p{margin:0 0 14px;font:400 16px/25px var(--text);color:rgba(255,255,255,.8)}
.w-blaettern{display:flex;gap:8px;justify-content:center;margin-top:24px}
.w-blaettern span{
  min-width:38px;height:38px;display:grid;place-items:center;border-radius:6px;
  border:1px solid rgba(255,255,255,.2);font:400 14px/1 var(--text);color:rgba(255,255,255,.8);
}
.w-blaettern span.an{background:#7488F6;border-color:#7488F6;color:#FFFFFF}
/* 46–49 Artikel ------------------------------------------------------------ */
.w-artikelmeta{display:flex;flex-wrap:wrap;gap:14px;font:400 13px/26px var(--text);color:#FFFFFF}
.w-artikelmeta .name{font-weight:700}
.w-artikelmeta .zeit{font-weight:500;color:rgba(255,255,255,.8)}
.w-lesespalte{max-width:795px;font:400 20px/38px var(--text);color:#FFFFFF}
.w-toc{border-left:2px solid #7488F6;padding:4px 0 4px 18px;margin:0 0 20px}
.w-toc b{display:block;font:400 20px/26px var(--text);margin-bottom:8px}
.w-toc a{display:block;font:400 16px/28px var(--text);color:rgba(255,255,255,.8);text-decoration:none}
.w-autorkasten{
  background:#FFFFFF;border-radius:6px;padding:34px 36px 30px;color:#171B25;
  display:flex;gap:22px;align-items:flex-start;
}
.w-autorkasten .bild{
  width:76px;height:76px;flex:0 0 auto;border-radius:50%;
  background:linear-gradient(140deg,#2b3550,#7488F6);
}
.w-autorkasten b{display:block;font:400 24px/32px var(--text);margin-bottom:6px}
.w-autorkasten p{margin:0;font:400 16px/25px var(--text);color:#4a4f5c}
/* 52 CTA-Band --------------------------------------------------------------- */
.w-ctaband{display:block;background:#7488F6;padding:42px 0;color:#FFFFFF}
.w-ctaband .zeile{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.w-ctaband .zeile > div{flex:1 1 380px}
.w-ctaband b{display:block;font:400 34px/38.8px var(--text);margin-bottom:8px}
.w-ctaband p{margin:0;font:400 16px/25px var(--text);color:#FFFFFF}
/* 58 Akkordeon -------------------------------------------------------------- */
.w-akkordeon{max-width:1200px}
.w-akkordeon .zeile{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px 70px 16px 0;border-bottom:2px solid rgba(255,255,255,.15);
  font:400 20px/26px var(--text);color:#FFFFFF;position:relative;
}
.w-akkordeon .zeile i{
  position:absolute;right:0;font-style:normal;color:#7488F6;font-size:22px;line-height:1;
}
.w-akkordeon .antwort{
  padding:14px 70px 20px 0;font:400 16px/28px var(--text);color:rgba(255,255,255,.8);
  border-bottom:2px solid rgba(255,255,255,.15);
}
/* Rahmen-Abzuege: Kopfleiste, Menue, Burger, Cookie ------------------ */
.w-kopfleiste{
  display:flex;align-items:center;gap:22px;width:100%;
  padding:14px 18px;border-radius:6px;
}
.w-kopfleiste.dunkel{background:#0F0F0F}
.w-kopf-menue{
  flex:1;font:400 13px/1.3 var(--text);letter-spacing:.06em;
  text-transform:uppercase;color:#FFFFFF;
}
.w-menue{display:block;position:relative;color:#FFFFFF}
.w-menue-punkt{
  display:inline-block;margin-right:22px;
  font:400 13px/1.3 var(--text);letter-spacing:.06em;text-transform:uppercase;
}
.w-menue-punkt i{font-style:normal;color:#7488F6;padding-left:5px}
.w-menue-punkt.an{color:#7488F6}
.w-menue-klappe{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;
  margin-top:16px;padding:18px 20px;background:#0F0F0F;border-radius:6px;
  border:1px solid rgba(255,255,255,.12);max-width:520px;
}
.w-menue-klappe .sp b{
  display:block;margin-bottom:8px;
  font:400 11px/1.3 var(--text);letter-spacing:.12em;text-transform:uppercase;color:#7488F6;
}
.w-menue-klappe .sp span{display:block;font:400 15px/26px var(--text);color:rgba(255,255,255,.85)}
.w-sprache{display:inline-flex;gap:10px;align-items:center;font:400 13px/26px var(--text);color:rgba(255,255,255,.7)}
.w-sprache b{color:#FFFFFF;font-weight:700}
.w-burger{
  display:inline-grid;gap:6px;width:40px;height:34px;align-content:center;
  padding:0 6px;
}
.w-burger .strich{display:block;height:2px;background:#FFFFFF;border-radius:var(--radius-pille)}
.w-sprungmarke{
  display:inline-block;background:#7488F6;color:#FFFFFF;
  padding:10px 16px;border-radius:6px;
  font:400 14px/1 var(--text);
}
.w-nachoben{
  display:inline-grid;place-items:center;width:46px;height:46px;
  background:#7488F6;color:#FFFFFF;border-radius:6px;font-size:20px;line-height:1;
}
.w-cookie{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:#171B25;border-radius:6px;padding:18px 20px;
}
.w-cookie .txt{flex:1 1 280px;font:400 15px/24px var(--text);color:rgba(255,255,255,.88)}
/* --- Glas: Tiefe ohne Schatten -------------------------------------
   Eine Flaeche aus Weiss mit 4 % Deckkraft, eine Haarlinie mit 12 %
   und Unschaerfe dahinter. Beides sind Abstufungen aus Deckkraft, wie
   Abschnitt 03 es verlangt — kein neuer Farbwert. */
.fx-glas{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
          backdrop-filter:blur(14px) saturate(130%);
}
.fx-glas.hell{background:rgba(15,15,15,.04);border-color:rgba(15,15,15,.12)}
/* --- Verlaufsschrift aus der Signal-Blue-Skala ---------------------
   Die Skala ist als Infografik-Werkzeug dokumentiert. Hier traegt sie
   genau eine Aussage pro Seite — mehr waere ein zweiter Akzent. */
.fx-verlauf{
  background:linear-gradient(100deg,#A9B4F9 0%,#7488F6 28%,#5D55EA 52%,#495DCC 74%,#7488F6 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:fx-fluss 14s linear infinite;
}
.fx-verlauf-metall{
  background:linear-gradient(135deg,#C8CBD4,#EEF0F4 26%,#9AA0AD 52%,#D6D9E0 78%,#C8CBD4);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:fx-fluss 18s linear infinite;
}
/* --- Keyvisual als Textur ------------------------------------------
   Das Markenmuster als ruhige Flaeche hinter einem Abschnitt. Gebaut
   aus demselben Gitter wie das Keyvisual: Spalten alle 112, Zeilen
   alle 44, Knoten auf den Gitterpunkten. Deckkraft so niedrig, dass
   es traegt statt konkurriert. */
.fx-gitter{position:relative;isolation:isolate}
.fx-gitter::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.10) 1px, transparent 1.6px),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.055) 1px, transparent 1.6px);
  background-size:112px 88px, 112px 88px;
  background-position:0 0, 56px 44px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 78%);
}
/* --- Lichtband: ein Streifen Signal Blue laeuft ueber die Flaeche --- */
.fx-licht{position:relative;overflow:hidden}
.fx-licht::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:22%;
  background:linear-gradient(90deg,transparent,rgba(116,136,246,.30),transparent);
  transform:translateX(-120%);pointer-events:none;
}
.fx-licht:hover::after,.fx-licht:focus-within::after{
  animation:fx-lichtband 1.1s var(--kurve) forwards;
}
.fx-licht.dauer::after{animation:fx-lichtband 5.5s var(--kurve) infinite}
/* --- Knotenpuls: der Keyvisual-Knoten als Signal -------------------- */
.fx-knoten{position:relative;display:inline-grid;place-items:center;width:18px;height:18px}
.fx-knoten::before{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--signal);
}
.fx-knoten::after{
  content:"";position:absolute;width:9px;height:9px;border-radius:50%;
  background:var(--signal);animation:fx-puls 2.6s var(--kurve) infinite;
}
/* --- Einblenden beim Scrollen -------------------------------------- */
.fx-auf{opacity:0}
.fx-auf.sichtbar{animation:fx-auf .6s var(--kurve) forwards}
/* --- Anheben beim Ueberfahren: Rand und Helligkeit, kein Schatten --- */
.fx-heben{
  transition:transform var(--tempo) var(--kurve),
             border-color var(--tempo) var(--kurve),
             background-color var(--tempo) var(--kurve);
}
.fx-heben:hover{transform:translateY(-3px);border-color:rgba(116,136,246,.55)}
/* --- Laufband, das tatsaechlich laeuft ------------------------------ */
.fx-lauf{display:block;overflow:hidden;position:relative}
.fx-lauf .spur{display:flex;width:max-content;animation:fx-laufband 38s linear infinite}
.fx-lauf:hover .spur{animation-play-state:paused}
.fx-lauf::before,.fx-lauf::after{
  content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.fx-lauf::before{left:0;background:linear-gradient(90deg,#0F0F0F,transparent)}
.fx-lauf::after{right:0;background:linear-gradient(270deg,#0F0F0F,transparent)}
/* --- Fokusring: der Befund aus Abschnitt 12, hier als Vorschlag ----- */
.fx-fokus:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:var(--radius)}
/* -------------------------------------------------------------------
   Vorgeschlagene Bausteine — aus der Bibliothek von Emma Woelk
   uebernommen und in die OPTIMUSE-Palette uebersetzt. Sie kommen auf
   optimuse.com noch nicht vor und sind in der Bibliothek als Vorschlag
   gekennzeichnet.
   ------------------------------------------------------------------- */

/* Marker im Satz: waechst beim Sichtbarwerden von links ein */
.w-marker{
  position:relative;display:inline;
  background:linear-gradient(transparent 58%, rgba(116,136,246,.30) 58%);
  background-size:0% 100%;background-repeat:no-repeat;
  transition:background-size var(--tempo) var(--kurve);
}
.w-marker.sichtbar,.eb-buehne:hover .w-marker{background-size:100% 100%}
/* Hinweiskasten: ein Ton, Signal Blue — Statusfarben bleiben im Produkt */
.w-hinweis{
  display:flex;gap:16px;align-items:flex-start;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
  border-left:2px solid #7488F6;border-radius:var(--radius);
  padding:20px 22px;max-width:720px;
}
.w-hinweis b{display:block;font:400 18px/26px var(--text);color:#FFFFFF;margin-bottom:6px}
.w-hinweis p{margin:0;font:400 16px/26px var(--text);color:rgba(255,255,255,.8)}
.w-hinweis .marke{flex:0 0 auto;padding-top:4px}
/* Grosse Ziffer auf der Karte */
.w-ziffer{
  display:block;font:700 64px/1 var(--text);letter-spacing:-2px;margin-bottom:10px;
  background:linear-gradient(120deg,#A9B4F9,#7488F6 45%,#5D55EA);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Hakenliste */
.w-haken{display:grid;gap:12px;max-width:620px}
.w-haken > span{display:flex;gap:12px;align-items:flex-start;font:400 16px/28px var(--text);color:rgba(255,255,255,.88)}
.fx-haken{
  flex:0 0 auto;width:18px;height:18px;margin-top:5px;display:block;
  background:#7488F6;
  -webkit-mask:var(--m-check) center/12px no-repeat;
          mask:var(--m-check) center/12px no-repeat;
}
/* Passt / Passt nicht */
.w-gegen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.w-gegen > span{
  display:grid;gap:8px;padding:20px 22px;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.14);border-left-width:2px;
  font:400 15px/25px var(--text);color:rgba(255,255,255,.8);
}
.w-gegen .ja{border-left-color:#7488F6}
.w-gegen .nein{border-left-color:rgba(255,255,255,.35)}
.w-gegen b{font:400 13px/26px var(--text);letter-spacing:.12em;text-transform:uppercase;color:#FFFFFF}
.w-gegen .ja b{color:#7488F6}
/* Stimmen-Raster */
.w-stimmen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.w-stimmen .k{padding:24px 24px 22px;display:grid;gap:14px;align-content:start}
.w-stimmen p{margin:0;font:400 18px/28px var(--text);color:#FFFFFF}
.w-stimmen .q{font:400 13px/26px var(--text);color:rgba(255,255,255,.7)}
/* Vorher / Nachher */
.w-vn{display:flex;align-items:stretch;gap:16px;flex-wrap:wrap}
.w-vn .s{
  flex:1 1 220px;display:grid;gap:5px;padding:22px 24px;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.14);
}
.w-vn .s.an{border-color:#7488F6}
.w-vn .t{font:400 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.w-vn b{font:700 34px/40px var(--text);color:#FFFFFF}
.w-vn .s.an b{color:#7488F6}
.w-vn .d{font:400 14px/22px var(--text);color:rgba(255,255,255,.7)}
.w-vn .pfeil{align-self:center;color:#7488F6;font-size:26px;line-height:1}
/* Fortschritt in Schritten */
.w-fortschritt{display:flex;flex-wrap:wrap;gap:0;align-items:center}
.w-fortschritt .s{
  display:flex;align-items:center;gap:10px;padding-right:22px;position:relative;
  font:400 15px/26px var(--text);color:rgba(255,255,255,.55);
}
.w-fortschritt .s i{
  width:14px;height:14px;border-radius:50%;flex:0 0 auto;
  border:2px solid rgba(255,255,255,.3);display:block;position:relative;
}
.w-fortschritt .s.fertig{color:#FFFFFF}
.w-fortschritt .s.fertig i{background:#7488F6;border-color:#7488F6}
.w-fortschritt .s.jetzt{color:#FFFFFF}
.w-fortschritt .s.jetzt i{border-color:#7488F6}
.w-fortschritt .s.jetzt i::after{
  content:"";position:absolute;inset:-2px;border-radius:50%;background:#7488F6;
  animation:fx-puls 2.6s var(--kurve) infinite;
}
.w-fortschritt .s:not(:last-child)::after{
  content:"";width:36px;height:1px;background:rgba(255,255,255,.15);margin-right:22px;
}
/* Spotlight */
.w-spotlight{display:block;background:#0F0F0F}
.w-spot-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.w-spot-raster .k{padding:26px 24px;display:grid;gap:9px;align-content:start}
.w-spot-raster b{font:400 24px/32px var(--text);letter-spacing:-.5px;color:#FFFFFF}
.w-spot-raster p{margin:0;font:400 16px/25px var(--text);color:rgba(255,255,255,.8)}
/* Bildgalerie */
.w-galerie{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.w-galerie .b{
  aspect-ratio:1/1;border-radius:var(--radius);border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(140deg,#1b2236,#0F0F0F 70%);display:block;
}
/* CTA-Karte mit Lichtband */
.w-ctakarte{
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  padding:30px 32px;
}
.w-ctakarte > span:first-child{flex:1 1 340px}
.w-ctakarte b{display:block;font:400 26px/34px var(--text);color:#FFFFFF;margin-bottom:8px}
.w-ctakarte p{margin:0;font:400 16px/25px var(--text);color:rgba(255,255,255,.8)}
/* Preiskarten */
.w-preise{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.w-preise .k{
  position:relative;display:grid;gap:8px;align-content:start;
  padding:28px 26px 26px;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.14);
}
.w-preise .k.an{border-color:#7488F6}
.w-preise .tipp{
  position:absolute;top:-10px;left:26px;
  background:#7488F6;color:#FFFFFF;border-radius:var(--radius-pille);
  font:400 9px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;
}
.w-preise b{font:400 13px/26px var(--text);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.w-preise .p{font:700 34px/40px var(--text);color:#FFFFFF}
.w-preise .k.an .p{color:#7488F6}
.w-preise .d{font:400 15px/25px var(--text);color:rgba(255,255,255,.7)}
/* Vergleichstabelle */
.w-vergleich{width:100%;border-collapse:collapse;font:400 15px/25px var(--text);color:rgba(255,255,255,.85)}
.w-vergleich th,.w-vergleich td{padding:12px 16px;text-align:left;border-bottom:1px solid rgba(255,255,255,.12)}
.w-vergleich th{font:400 13px/26px var(--text);letter-spacing:.1em;text-transform:uppercase;color:#FFFFFF}
.w-vergleich .an{background:rgba(116,136,246,.08);color:#FFFFFF}
.w-vergleich thead .an{color:#7488F6}
/* Schlagwort-Laufband */
.w-schlagband{display:block;background:#0F0F0F;padding:18px 0}
.w-schlagband .w{
  flex:0 0 auto;padding:0 26px;
  font:400 13px/26px var(--text);letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.8);white-space:nowrap;
}

/* --- Keyframes der Effektschicht, wortgleich aus ci.css v2.3 ----------
   Beim Herausloesen der Bibliothek wurden nur Regeln uebernommen, deren
   Selektor eine w-/fx-Klasse nennt. Ein @keyframes-Block hat keinen
   Selektor — alle sechs sind durchgerutscht. Folge: .fx-lauf .spur,
   .fx-licht, .fx-puls und .fx-fluss verwiesen auf Animationen, die es
   nicht gab; das Laufband stand still, der Lichtstreifen kam nie. */
@keyframes fx-fluss      { from{background-position:200% 0} to{background-position:0 0} }
@keyframes fx-laufband   { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes fx-lichtband  { 0%{transform:translateX(-120%)} 100%{transform:translateX(320%)} }
@keyframes fx-puls       { from{transform:scale(1);opacity:.85} to{transform:scale(4.2);opacity:0} }
@keyframes fx-auf        { from{opacity:0;transform:translateY(16px);filter:blur(7px)} to{opacity:1;transform:none;filter:none} }
@keyframes fx-schimmer   { 0%,100%{opacity:.55} 50%{opacity:1} }