/* KapFixIT Startseite: ein Look für alles. Stand 20.10.2026.
   Alle Karten (Stationen, Ablauf, Bewertungen, Fragen, KI, Kontakt) bekommen dasselbe Kristallglas,
   alle Knöpfe kommen aus genau zwei Sorten: Hauptknopf (leuchtender Kristall) und Glasknopf.
   Die Seite hat viele Inline-Stile, deshalb hier mit !important und der ID #kfx-root. */

@property --kfx-licht{syntax:'<color>';inherits:false;initial-value:rgba(255,255,255,0)}

/* ---------- 1. Karten: Kristallglas, Radius 24 ---------- */
#kfx-root .kfx-panel,
#kfx-root .kfx-reviews>figure,
#kfx-root .kfx-steps>li,#kfx-root .kfx-kachel{
  position:relative;
  border:1px solid transparent!important;
  border-radius:24px!important;
  background:
    radial-gradient(520px circle at var(--mx,50%) var(--my,-60%),var(--kfx-licht),transparent 65%) padding-box,
    radial-gradient(120% 80% at 0% 0%,rgba(255,255,255,.11),transparent 46%) padding-box,
    radial-gradient(90% 70% at 100% 100%,rgba(97,81,207,.18),transparent 62%) padding-box,
    linear-gradient(rgba(12,14,20,.62),rgba(12,14,20,.62)) padding-box,
    linear-gradient(145deg,rgba(255,255,255,.60),rgba(255,255,255,.10) 26%,rgba(255,255,255,.03) 58%,rgba(103,199,244,.48)) border-box!important;
  -webkit-backdrop-filter:blur(18px) saturate(175%)!important;
  backdrop-filter:blur(18px) saturate(175%)!important;
  box-shadow:0 30px 70px rgba(0,0,0,.50),0 2px 8px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -16px 36px rgba(0,0,0,.22)!important;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease,--kfx-licht .45s ease;
}
/* Lichtkante, die der Maus folgt (Position setzt glanz.js) */
#kfx-root .kfx-panel::after,
#kfx-root .kfx-reviews>figure::after,
#kfx-root .kfx-steps>li::after,#kfx-root .kfx-kachel::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,-60%),rgba(255,255,255,.95),rgba(103,199,244,.55) 35%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .45s ease;
}
#kfx-root .kfx-panel:hover,
#kfx-root .kfx-reviews>figure:hover,
#kfx-root .kfx-steps>li:hover,#kfx-root .kfx-kachel:hover{--kfx-licht:rgba(255,255,255,.075)}
#kfx-root .kfx-panel:hover::after,
#kfx-root .kfx-reviews>figure:hover::after,
#kfx-root .kfx-steps>li:hover::after,#kfx-root .kfx-kachel:hover::after{opacity:1}
#kfx-root .kfx-reviews>figure:hover,
#kfx-root .kfx-steps>li:hover,#kfx-root .kfx-kachel:hover{transform:translateY(-5px);
  box-shadow:0 40px 80px rgba(0,0,0,.55),0 0 50px -10px rgba(103,199,244,.35),inset 0 1px 0 rgba(255,255,255,.32),inset 0 -16px 36px rgba(0,0,0,.22)!important}

/* Station 04 trägt die PadIco-Farbe */
#kfx-root [data-stop="4"] .kfx-panel{
  background:
    radial-gradient(520px circle at var(--mx,50%) var(--my,-60%),var(--kfx-licht),transparent 65%) padding-box,
    radial-gradient(120% 80% at 0% 0%,rgba(255,255,255,.11),transparent 46%) padding-box,
    radial-gradient(90% 70% at 100% 100%,rgba(226,68,43,.20),transparent 62%) padding-box,
    linear-gradient(rgba(12,14,20,.62),rgba(12,14,20,.62)) padding-box,
    linear-gradient(145deg,rgba(255,255,255,.60),rgba(255,255,255,.10) 26%,rgba(255,140,110,.10) 58%,rgba(226,68,43,.75)) border-box!important;
  box-shadow:0 30px 70px rgba(0,0,0,.50),0 0 60px -12px rgba(226,68,43,.45),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -16px 36px rgba(0,0,0,.22)!important;
}

/* Kleine Kacheln in der KI-Karte: vertieftes Glas */
#kfx-root #ki li{
  border:1px solid transparent!important;border-radius:16px!important;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02)) padding-box,
    linear-gradient(145deg,rgba(255,255,255,.30),rgba(255,255,255,.04) 45%,rgba(175,163,255,.30)) border-box!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}

/* Kennzeichen vor den Überschriften: leuchtende Raute im Logo-Verlauf */
#kfx-root [style*="width: 10px; height: 10px; background: var(--akzent)"]{
  background:linear-gradient(160deg,#61B2ED 0%,#6151CF 55%,#743BBE 100%)!important;
  border-radius:3px;transform:rotate(45deg) scale(.9);
  box-shadow:0 0 0 1px rgba(255,255,255,.35),0 0 14px rgba(103,199,244,.85)}

/* Preis-Chips: Pille mit Verlaufsrand */
#kfx-root span[style*="border: 1.5px solid var(--akzent)"]{
  border:1px solid transparent!important;border-radius:999px!important;padding:9px 16px!important;
  background:linear-gradient(rgba(103,199,244,.13),rgba(103,199,244,.13)) padding-box,linear-gradient(rgba(12,14,22,.86),rgba(12,14,22,.86)) padding-box,
    linear-gradient(120deg,#67C7F4,#AFA3FF 60%,#743BBE) border-box!important;
  color:#CDEEFC!important;box-shadow:0 0 24px -6px rgba(103,199,244,.6)}
#kfx-root [data-stop="4"] span[style*="border: 1.5px solid var(--akzent)"]{
  background:linear-gradient(rgba(226,68,43,.16),rgba(226,68,43,.16)) padding-box,linear-gradient(rgba(22,12,12,.86),rgba(22,12,12,.86)) padding-box,
    linear-gradient(120deg,#FF9A80,#E2442B) border-box!important;
  color:#FFD2C7!important;box-shadow:0 0 24px -6px rgba(226,68,43,.6)}

/* Hervorgehobene Wörter und die große Nummer: Text im Logo-Verlauf */
#kfx-root h1 span[style*="color: var(--akzent)"],
#kfx-root h2 span[style*="color: var(--akzent)"],
#kfx-root .kfx-phone,
#kfx-root .kfx-steps>li>div:first-child{
  background:linear-gradient(120deg,#8FD5F7 0%,#AFA3FF 55%,#C59BFF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
  -webkit-text-fill-color:transparent}
#kfx-root .kfx-phone{filter:drop-shadow(0 0 24px rgba(103,199,244,.35))}
#kfx-root .kfx-steps>li>div:first-child{font-size:46px!important;font-weight:600;line-height:1;letter-spacing:-.04em;display:inline-block}

/* Bewertungen: fünf Sterne oben, großes Anführungszeichen unten rechts */
#kfx-root .kfx-reviews blockquote::after{
  content:"\201C";content:"\201C"/"";position:absolute;right:24px;top:16px;font:800 84px/1 'Archivo',system-ui,sans-serif;pointer-events:none;
  background:linear-gradient(160deg,#61B2ED,#6151CF 55%,#743BBE);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;opacity:.55}

/* Häufige Fragen: Zeilen mit Glas-Plus, das sich zum Kreuz dreht */
#kfx-root details{border-top:1px solid rgba(255,255,255,.09)!important;padding:4px 0!important}
#kfx-root summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 4px;border-radius:12px}
#kfx-root summary::-webkit-details-marker{display:none}
#kfx-root summary::after{content:"";flex:none;width:32px;height:32px;border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EEF1F4' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/15px no-repeat,
    radial-gradient(90% 70% at 30% 0%,rgba(255,255,255,.22),transparent 60%),rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 6px 16px rgba(0,0,0,.35);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
#kfx-root details[open] summary::after{transform:rotate(45deg);box-shadow:inset 0 0 0 1px rgba(103,199,244,.7),0 0 18px rgba(103,199,244,.45)}
#kfx-root summary:hover::after{box-shadow:inset 0 0 0 1px rgba(103,199,244,.7),0 0 18px rgba(103,199,244,.35)}

/* ---------- 2. Knöpfe: genau zwei Sorten ---------- */
/* Hauptknopf: Kristall, von innen im Logo-Verlauf beleuchtet, mit umlaufender Lichtkante.
   Die Lichtkante ist eine gedrehte Fläche hinter dem Knopf (nur transform, das rechnet die Grafikkarte allein). */
#kfx-root .kfx-knopf-haupt{
  position:relative;overflow:hidden;isolation:isolate;cursor:pointer;
  color:#fff!important;text-shadow:0 1px 2px rgba(10,8,40,.55);
  border:0!important;border-radius:999px!important;
  background:linear-gradient(140deg,#8FD5F7,#6151CF 45%,#AFA3FF 80%,#743BBE)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:0 20px 50px -12px rgba(116,59,190,1),0 0 48px -6px rgba(103,199,244,.75)!important;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease!important;
}
#kfx-root .kfx-knopf-haupt::before{
  content:"";position:absolute;left:50%;top:50%;width:max(300%,400px);aspect-ratio:1;z-index:-2;pointer-events:none;
  background:conic-gradient(#67C7F4,#FFFFFF 10%,#AFA3FF 22%,#743BBE 40%,#6151CF 58%,#67C7F4 76%,#FFFFFF 88%,#67C7F4);
  transform:translate(-50%,-50%) rotate(0deg)}
#kfx-root .kfx-knopf-haupt::after{
  content:"";position:absolute;inset:1.5px;border-radius:inherit;z-index:-1;pointer-events:none;
  background:
    linear-gradient(100deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%) -200% 0/250% 100% no-repeat,
    linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0) 52%),
    radial-gradient(80% 120% at 50% 120%,rgba(103,199,244,.35),transparent 70%),
    linear-gradient(160deg,#3F78C0 0%,#4F40B8 55%,#5F2DA6 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);transition:background-position 0s}
#kfx-root .kfx-knopf-haupt:hover::after,#kfx-root .kfx-knopf-haupt:focus-visible::after{
  background-position:300% 0,0 0,0 0,0 0;transition:background-position .9s ease-out}
#kfx-root .kfx-knopf-haupt svg{color:#fff!important}
#kfx-root .kfx-knopf-haupt:hover,#kfx-root .kfx-knopf-haupt:focus-visible{
  color:#fff!important;transform:translateY(-2px) scale(1.02);
  box-shadow:0 24px 56px -12px rgba(116,59,190,1),0 0 60px -6px rgba(103,199,244,.9)!important}
#kfx-root .kfx-knopf-haupt:active{transform:translateY(0) scale(.98)}
@keyframes kfxRand{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* Die Lichtkante läuft zwei Runden, sobald der Knopf ins Bild kommt (Klasse im-bild setzt glanz.js),
   und dauerhaft, solange die Maus darauf liegt. Danach ruht sie, damit nichts die Seite dauernd neu zeichnen lässt. */
#kfx-root .kfx-knopf-haupt.im-bild::before{animation:kfxRand 3.2s cubic-bezier(.5,0,.5,1) .3s 2}
#kfx-root .kfx-knopf-haupt:hover::before,#kfx-root .kfx-knopf-haupt:focus-visible::before{animation:kfxRand 2.4s linear infinite}

/* Glasknopf: klares Glas, Kante leuchtet beim Darüberfahren auf */
#kfx-root .kfx-knopf-glas,
#kfx-root .kfx-karussell-pfeil{
  position:relative;cursor:pointer;color:var(--text)!important;
  border:1px solid transparent!important;border-radius:999px!important;
  background:
    radial-gradient(90% 80% at 25% 0%,rgba(255,255,255,.18),transparent 60%) padding-box,
    linear-gradient(rgba(18,21,28,.52),rgba(18,21,28,.52)) padding-box,
    linear-gradient(140deg,rgba(255,255,255,.72),rgba(255,255,255,.12) 30%,rgba(255,255,255,.04) 60%,rgba(175,163,255,.62)) border-box!important;
  -webkit-backdrop-filter:blur(12px) saturate(180%)!important;backdrop-filter:blur(12px) saturate(180%)!important;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.35)!important;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,background .3s ease!important;
}
#kfx-root .kfx-knopf-glas:hover,#kfx-root .kfx-knopf-glas:focus-visible,
#kfx-root .kfx-karussell-pfeil:hover,#kfx-root .kfx-karussell-pfeil:focus-visible{
  color:var(--text)!important;transform:translateY(-2px);
  background:
    radial-gradient(90% 80% at 25% 0%,rgba(255,255,255,.24),transparent 60%) padding-box,
    linear-gradient(rgba(24,28,40,.56),rgba(24,28,40,.56)) padding-box,
    linear-gradient(140deg,#FFFFFF,#67C7F4 35%,rgba(97,81,207,.6) 70%,#AFA3FF) border-box!important;
  box-shadow:0 18px 40px -10px rgba(0,0,0,.65),0 0 30px -6px rgba(103,199,244,.6),inset 0 1px 0 rgba(255,255,255,.45)!important}
#kfx-root .kfx-knopf-glas svg{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
#kfx-root .kfx-knopf-glas:hover svg:last-child{transform:translateX(3px)}
#kfx-root .kfx-knopf-klein{padding:0 20px!important;min-height:46px!important}
/* WhatsApp bleibt grün erkennbar */
#kfx-root .kfx-knopf-glas:is(.kfx-wa,.u-wa,.p-wa){
  background:
    radial-gradient(90% 80% at 25% 0%,rgba(255,255,255,.16),transparent 60%) padding-box,
    linear-gradient(rgba(14,30,22,.55),rgba(14,30,22,.55)) padding-box,
    linear-gradient(140deg,#B7F7CF,#25D366 45%,rgba(37,211,102,.35)) border-box!important;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.6),0 0 26px -8px rgba(37,211,102,.7),inset 0 1px 0 rgba(255,255,255,.3)!important}
#kfx-root .kfx-knopf-glas:is(.kfx-wa,.u-wa,.p-wa):hover{box-shadow:0 18px 40px -10px rgba(0,0,0,.65),0 0 34px -4px rgba(37,211,102,.8),inset 0 1px 0 rgba(255,255,255,.4)!important}
/* PadIco-Knopf mit PadIco-Kante */
#kfx-root [data-stop="4"] .kfx-knopf-glas{
  background:
    radial-gradient(90% 80% at 25% 0%,rgba(255,255,255,.16),transparent 60%) padding-box,
    linear-gradient(rgba(30,16,14,.55),rgba(30,16,14,.55)) padding-box,
    linear-gradient(140deg,#FFC2B4,#E2442B 50%,rgba(226,68,43,.4)) border-box!important}
#kfx-root [data-stop="4"] .kfx-knopf-glas:hover{box-shadow:0 18px 40px -10px rgba(0,0,0,.65),0 0 32px -6px rgba(226,68,43,.75),inset 0 1px 0 rgba(255,255,255,.4)!important}

/* Schnellkontakt-Leiste am Handy: schwebende Glaspille */
#kfx-root :is(.kfx-callbar,.u-callbar,.p-callbar){
  border:1px solid transparent!important;border-radius:999px!important;
  background:radial-gradient(90% 60% at 15% 0%,rgba(255,255,255,.16),transparent 55%) padding-box,
    linear-gradient(rgba(18,21,28,.62),rgba(18,21,28,.62)) padding-box,
    linear-gradient(140deg,rgba(255,255,255,.70),rgba(255,255,255,.12) 26%,rgba(255,255,255,.03) 58%,rgba(175,163,255,.55)) border-box!important;
  -webkit-backdrop-filter:blur(14px) saturate(190%)!important;backdrop-filter:blur(14px) saturate(190%)!important;
  box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.38)!important}

/* Fokus immer sichtbar */
#kfx-root .kfx-knopf-haupt:focus-visible,#kfx-root .kfx-knopf-glas:focus-visible{outline:2px solid #67C7F4;outline-offset:3px}

/* ---------- 3. Helles Schema ---------- */
#kfx-root.welt-tag .kfx-panel,
#kfx-root.welt-tag .kfx-reviews>figure,
#kfx-root.welt-tag .kfx-steps>li,#kfx-root.welt-tag .kfx-kachel{
  background:
    radial-gradient(520px circle at var(--mx,50%) var(--my,-60%),var(--kfx-licht),transparent 65%) padding-box,
    linear-gradient(160deg,rgba(255,255,255,.90),rgba(255,255,255,.74)) padding-box,
    linear-gradient(145deg,#FFFFFF,rgba(255,255,255,.45) 40%,rgba(90,65,192,.40)) border-box!important;
  box-shadow:0 26px 60px rgba(10,8,30,.35),inset 0 1px 0 #fff!important}
#kfx-root.welt-tag [data-stop="4"] .kfx-panel{
  background:
    radial-gradient(520px circle at var(--mx,50%) var(--my,-60%),var(--kfx-licht),transparent 65%) padding-box,
    linear-gradient(160deg,rgba(255,255,255,.90),rgba(255,255,255,.74)) padding-box,
    linear-gradient(145deg,#FFFFFF,rgba(255,255,255,.45) 40%,rgba(226,68,43,.7)) border-box!important;
  box-shadow:0 26px 60px rgba(10,8,30,.35),0 0 50px -12px rgba(226,68,43,.45),inset 0 1px 0 #fff!important}
#kfx-root.welt-tag .kfx-panel:hover,
#kfx-root.welt-tag .kfx-reviews>figure:hover,
#kfx-root.welt-tag .kfx-steps>li:hover,#kfx-root.welt-tag .kfx-kachel:hover{--kfx-licht:rgba(103,199,244,.16)}
#kfx-root.welt-tag #ki li{
  background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.6)) padding-box,
    linear-gradient(145deg,rgba(90,65,192,.35),rgba(90,65,192,.08) 50%,rgba(90,65,192,.3)) border-box!important}
#kfx-root.welt-tag span[style*="border: 1.5px solid var(--akzent)"]{
  background:linear-gradient(rgba(90,65,192,.08),rgba(90,65,192,.08)) padding-box,linear-gradient(#fff,#fff) padding-box,
    linear-gradient(120deg,#3A7BD5,#5A41C0 60%,#743BBE) border-box!important;color:#3E2A9A!important;box-shadow:none}
#kfx-root.welt-tag [data-stop="4"] span[style*="border: 1.5px solid var(--akzent)"]{
  background:linear-gradient(rgba(226,68,43,.08),rgba(226,68,43,.08)) padding-box,linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,#FF7A5C,#C2321B) border-box!important;color:#A3260F!important}
#kfx-root.welt-tag h1 span[style*="color: var(--akzent)"],
#kfx-root.welt-tag h2 span[style*="color: var(--akzent)"],
#kfx-root.welt-tag .kfx-phone,
#kfx-root.welt-tag .kfx-steps>li>div:first-child{background-image:linear-gradient(120deg,#2F6FC4 0%,#5A41C0 55%,#743BBE 100%)}
#kfx-root.welt-tag .kfx-phone{filter:none}
#kfx-root.welt-tag details{border-top-color:rgba(20,18,16,.12)!important}
#kfx-root.welt-tag summary::after{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141210' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/15px no-repeat,rgba(90,65,192,.08);
  box-shadow:inset 0 0 0 1px rgba(90,65,192,.3)}
#kfx-root.welt-tag .kfx-knopf-glas,
#kfx-root.welt-tag .kfx-karussell-pfeil{
  background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,255,255,.72)) padding-box,
    linear-gradient(140deg,#FFFFFF,rgba(90,65,192,.45)) border-box!important;
  box-shadow:0 12px 30px -10px rgba(10,8,30,.45),inset 0 1px 0 #fff!important}
#kfx-root.welt-tag .kfx-knopf-glas:hover,
#kfx-root.welt-tag .kfx-karussell-pfeil:hover{
  background:linear-gradient(160deg,#FFFFFF,rgba(255,255,255,.85)) padding-box,
    linear-gradient(140deg,#67C7F4,#5A41C0) border-box!important;
  box-shadow:0 16px 36px -10px rgba(10,8,30,.5),0 0 26px -6px rgba(90,65,192,.5),inset 0 1px 0 #fff!important}
#kfx-root.welt-tag .kfx-knopf-glas:is(.kfx-wa,.u-wa,.p-wa){
  background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(236,252,242,.8)) padding-box,linear-gradient(140deg,#25D366,#128C4A) border-box!important}
#kfx-root.welt-tag [data-stop="4"] .kfx-knopf-glas{
  background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,240,236,.8)) padding-box,linear-gradient(140deg,#FF7A5C,#C2321B) border-box!important}
#kfx-root.welt-tag :is(.kfx-callbar,.u-callbar,.p-callbar){
  background:linear-gradient(160deg,rgba(255,255,255,.88),rgba(255,255,255,.7)) padding-box,
    linear-gradient(140deg,#FFFFFF,rgba(90,65,192,.4)) border-box!important;box-shadow:0 20px 50px rgba(10,8,30,.35),inset 0 1px 0 #fff!important}

/* ---------- 4. Handy, Leistung, Barrierefreiheit ---------- */
@media (max-width:900px){
  #kfx-root .kfx-panel,#kfx-root .kfx-reviews>figure,#kfx-root .kfx-steps>li,#kfx-root .kfx-kachel{
    border-radius:22px!important;-webkit-backdrop-filter:blur(14px) saturate(165%)!important;backdrop-filter:blur(14px) saturate(165%)!important}
  #kfx-root .kfx-steps>li>div:first-child{font-size:38px!important}
}
/* Während der Flug fährt, ruhen die Lichteffekte der Knöpfe */
html.kfx-faehrt #kfx-root .kfx-knopf-haupt::before{animation-play-state:paused}
/* Leistung: Dauer-Animationen nur noch über transform und opacity, die macht die Grafikkarte allein.
   Vorher liefen Schatten- und Farbanimationen in der Kopfleiste, die bei jedem Bild das Glas neu rechnen ließen. */
#kfx-root :is(.kfx-rate,.u-rate,.p-rate){animation:none!important;position:relative}
#kfx-root :is(.kfx-rate,.u-rate,.p-rate)::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 2px rgba(97,81,207,.9),0 0 16px rgba(97,81,207,.6);opacity:0;animation:kfxRateRing 3.2s ease-out 1.5s 4}
#kfx-root :is(.kfx-rate,.u-rate,.p-rate):hover::after{animation:kfxRateRing 1.6s ease-out infinite}
@keyframes kfxRateRing{0%{opacity:.95;transform:scale(1)}60%,100%{opacity:0;transform:scale(1.14,1.3)}}
#kfx-root :is(.kfx-star,.u-star,.p-star){animation:none!important;fill:#AFA3FF}
#kfx-root :is(.kfx-rate,.u-rate,.p-rate) svg{animation:kfxSternWippe 6s ease-in-out 2}
#kfx-root :is(.kfx-rate,.u-rate,.p-rate):hover svg{animation:kfxSternWippe 3s ease-in-out infinite}
@keyframes kfxSternWippe{0%,100%{transform:rotate(-10deg) scale(.9)}25%{transform:rotate(8deg) scale(1.15)}50%{transform:rotate(-6deg) scale(.95)}75%{transform:rotate(10deg) scale(1.12)}}
#kfx-root :is(.kfx-wa,.u-wa,.p-wa){animation:none!important}
#kfx-root :is(.kfx-wa,.u-wa,.p-wa).im-bild{animation:kfxWaWackel 4s ease-in-out 1s 3!important}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #kfx-root .kfx-panel,#kfx-root .kfx-reviews>figure,#kfx-root .kfx-steps>li,#kfx-root .kfx-kachel,#kfx-root .kfx-knopf-glas,#kfx-root :is(.kfx-callbar,.u-callbar,.p-callbar){
    background:rgba(16,18,21,.95)!important;border:1px solid rgba(255,255,255,.16)!important}
}
@media (prefers-reduced-transparency:reduce){
  #kfx-root .kfx-panel,#kfx-root .kfx-reviews>figure,#kfx-root .kfx-steps>li,#kfx-root .kfx-kachel,#kfx-root .kfx-knopf-glas,#kfx-root :is(.kfx-callbar,.u-callbar,.p-callbar){
    background:#101215!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:1px solid rgba(255,255,255,.16)!important}
  #kfx-root.welt-tag .kfx-panel,#kfx-root.welt-tag .kfx-reviews>figure,#kfx-root.welt-tag .kfx-steps>li,#kfx-root.welt-tag .kfx-kachel,#kfx-root.welt-tag .kfx-knopf-glas,#kfx-root.welt-tag :is(.kfx-callbar,.u-callbar,.p-callbar){
    background:#FFFFFF!important;border:1px solid rgba(20,18,16,.18)!important}
}
@media (prefers-reduced-motion:reduce){
  #kfx-root .kfx-knopf-haupt::before{animation:none!important}
  #kfx-root .kfx-knopf-haupt:hover::after{transition:none}
  #kfx-root .kfx-panel,#kfx-root .kfx-reviews>figure,#kfx-root .kfx-steps>li,#kfx-root .kfx-kachel,#kfx-root .kfx-knopf-glas,#kfx-root .kfx-knopf-haupt{transition:none!important}
  #kfx-root .kfx-reviews>figure:hover,#kfx-root .kfx-steps>li:hover,#kfx-root .kfx-kachel:hover,#kfx-root .kfx-knopf-glas:hover,#kfx-root .kfx-knopf-haupt:hover{transform:none}
}

/* ---------- 5. Kunden-Karussell: Bühne mit Lichtkegel, Boden, Spiegelung ---------- */
#kfx-root .kfx-karussell-licht,#kfx-root .kfx-karussell-boden{position:absolute;left:50%;pointer-events:none;z-index:0}
#kfx-root .kfx-karussell-licht{top:-170px;width:min(1100px,140vw);height:720px;transform:translateX(-50%);
  background:radial-gradient(90px 34px at 50% 0%,rgba(255,255,255,.85),rgba(175,163,255,.45) 40%,transparent 100%),
    conic-gradient(at 50% 0%,transparent 160deg,rgba(103,199,244,.16) 168deg,rgba(175,163,255,.42) 180deg,rgba(103,199,244,.16) 192deg,transparent 200deg);
  -webkit-mask:linear-gradient(180deg,#000 0%,#000 55%,transparent 92%);mask:linear-gradient(180deg,#000 0%,#000 55%,transparent 92%);
}
#kfx-root .kfx-karussell-boden{top:384px;width:min(900px,98vw);height:150px;transform:translate(-50%,-50%);
  background:radial-gradient(30% 34% at 50% 50%,rgba(205,195,255,.8),transparent 75%),radial-gradient(50% 50% at 50% 50%,rgba(110,90,240,.95),rgba(103,199,244,.42) 42%,transparent 72%)}
#kfx-root .kfx-karussell-boden::after{content:"";position:absolute;left:4%;right:4%;top:50%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(175,163,255,.8) 25%,#FFFFFF 50%,rgba(103,199,244,.8) 75%,transparent);
  box-shadow:0 0 18px rgba(175,163,255,.9)}
/* Lichtstaub im Kegel */
#kfx-root .kfx-karussell-licht i{position:absolute;bottom:22%;width:3px;height:3px;border-radius:50%;background:#fff;
  box-shadow:0 0 8px 2px rgba(175,163,255,.9);opacity:0;animation:kfxStaub var(--d,7s) linear var(--v,0s) infinite paused}
#kfx-root .kfx-karussell.im-bild .kfx-karussell-licht i{animation-play-state:running}
html.kfx-faehrt #kfx-root .kfx-karussell-licht i{animation-play-state:paused}
@keyframes kfxStaub{0%{opacity:0;transform:translate(0,0)}15%{opacity:.9}85%{opacity:.6}100%{opacity:0;transform:translate(var(--x,10px),-300px)}}
#kfx-root .kfx-karussell .kfx-karussell-feld{z-index:1;height:470px}
@media (max-width:760px){#kfx-root .kfx-karussell .kfx-karussell-feld{height:440px}#kfx-root .kfx-karussell-boden{top:372px}}
#kfx-root .kfx-karussell .kfx-karussell-feld>a:not(.ist-vorn){filter:saturate(.7) brightness(.62)}

/* Karten im Karussell: gleicher Radius wie alle Karten, Spiegelung im Boden */
#kfx-root .kfx-karussell .kfx-karussell-feld>a{border-radius:24px!important;width:min(350px,80vw);
  -webkit-box-reflect:below 14px linear-gradient(transparent 58%,rgba(255,255,255,.16))}
#kfx-root .kfx-karussell .kfx-karussell-feld>a.kippt{transition:transform .14s linear,opacity .6s ease,box-shadow .5s ease!important}
#kfx-root .kfx-karussell .kfx-karussell-feld>a>span:first-child{position:relative;overflow:hidden;border-radius:12px!important;
  box-shadow:0 8px 22px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.06)}
/* Glanzstreifen über das Logo, sobald die Karte nach vorn kommt */
#kfx-root .kfx-karussell .kfx-karussell-feld>a>span:first-child::after{content:"";position:absolute;top:-40%;bottom:-40%;left:-70%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.9),transparent);transform:skewX(-20deg) translateX(0);opacity:0}
#kfx-root .kfx-karussell .kfx-karussell-feld>a.ist-vorn>span:first-child::after{animation:kfxLogoGlanz 1.1s .45s cubic-bezier(.3,.6,.3,1) both}
@keyframes kfxLogoGlanz{0%{opacity:1;transform:skewX(-20deg) translateX(0)}100%{opacity:1;transform:skewX(-20deg) translateX(520%)}}
/* Licht auf der vorderen Karte folgt der Maus */
#kfx-root .kfx-karussell .kfx-karussell-feld>a::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.16),transparent 60%);opacity:0;transition:opacity .35s ease}
#kfx-root .kfx-karussell .kfx-karussell-feld>a.ist-vorn::before{opacity:.55}
#kfx-root .kfx-karussell .kfx-karussell-feld>a.ist-vorn.kippt::before{opacity:1}
#kfx-root .kfx-karussell .kfx-karussell-feld>a.ist-vorn{
  box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 1px rgba(103,199,244,.6),0 0 80px -6px rgba(103,199,244,.40),0 0 140px -20px rgba(97,81,207,.55)!important}
#kfx-root .kfx-karussell .kfx-karussell-feld>a[href*="padico"].ist-vorn{
  box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 1px rgba(226,68,43,.65),0 0 80px -6px rgba(226,68,43,.40),0 0 140px -20px rgba(226,68,43,.4)!important}

/* Steuerung: Glasknöpfe, aktiver Punkt zeigt die Zeit bis zum nächsten Kunden */
#kfx-root .kfx-karussell-steuer{position:relative;z-index:1}
#kfx-root .kfx-karussell-pfeil{width:50px;height:50px}
#kfx-root .kfx-karussell-punkte button{position:relative;overflow:hidden;background:rgba(255,255,255,.28)}
#kfx-root.welt-tag .kfx-karussell-punkte button{background:rgba(20,18,16,.22)}
#kfx-root .kfx-karussell-punkte button[aria-current="true"]{width:42px;background:rgba(255,255,255,.22);box-shadow:0 0 16px rgba(103,199,244,.55)}
#kfx-root .kfx-karussell-punkte button[aria-current="true"]::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,#61B2ED,#AFA3FF);transform-origin:left center}
#kfx-root .kfx-karussell.takt .kfx-karussell-punkte button[aria-current="true"]::after{animation:kfxTakt var(--kfx-takt,3800ms) linear both}
#kfx-root .kfx-karussell.pausiert .kfx-karussell-punkte button[aria-current="true"]::after{animation-play-state:paused}
@keyframes kfxTakt{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (prefers-reduced-motion:reduce){
  #kfx-root .kfx-karussell-licht{animation:none}
  #kfx-root .kfx-karussell-licht i{display:none}
  #kfx-root :is(.kfx-rate,.u-rate,.p-rate)::after,#kfx-root :is(.kfx-rate,.u-rate,.p-rate) svg,#kfx-root :is(.kfx-wa,.u-wa,.p-wa){animation:none!important}
  #kfx-root .kfx-karussell .kfx-karussell-feld>a>span:first-child::after{display:none}
}

/* Lichtkegel und Seitenkarten dürfen nicht zum seitlichen Scrollen führen */
#kfx-root #kunden{overflow-x:clip}

/* ---------- 6. Kacheln im Raum: leicht schräg, drehen sich zur Maus ----------
   glanz.js gibt jeder passenden Kachel die Klasse kfx-3d und setzt --rx, --ry, --tz.
   In Ruhe stehen die Kacheln wie eine leicht gebogene Wand zur Bildmitte. Nur mit Maus und breitem Fenster. */
#kfx-root .kfx-3d{
  transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(var(--tz,0px))!important;
  transition:transform 1.1s cubic-bezier(.16,.84,.24,1),box-shadow .45s ease,--kfx-licht .45s ease!important;
  will-change:transform}
#kfx-root .kfx-3d.kfx-3d-aktiv{transition:transform .14s linear,box-shadow .3s ease,--kfx-licht .3s ease!important}
#kfx-root .kfx-3d.kfx-3d-aktiv{box-shadow:0 46px 90px rgba(0,0,0,.55),0 0 60px -10px rgba(103,199,244,.45),inset 0 1px 0 rgba(255,255,255,.34),inset 0 -16px 36px rgba(0,0,0,.22)!important}
#kfx-root.welt-tag .kfx-3d.kfx-3d-aktiv{box-shadow:0 40px 80px rgba(10,8,30,.4),0 0 50px -10px rgba(90,65,192,.45),inset 0 1px 0 #fff!important}
@media (prefers-reduced-motion:reduce){#kfx-root .kfx-3d{transform:none!important}}

/* ---------- 7. Unterseiten (Leistungen, Ratgeber, Rechtliches) ---------- */
#kfx-root .kfx-kachel{border-radius:22px!important}
/* Empfohlene Preiskarte: Rand im Logo-Verlauf und Schein */
#kfx-root .kfx-kachel[style*="border: 1.5px solid var(--akzent)"]{
  background:
    radial-gradient(520px circle at var(--mx,50%) var(--my,-60%),var(--kfx-licht),transparent 65%) padding-box,
    radial-gradient(120% 80% at 0% 0%,rgba(255,255,255,.12),transparent 46%) padding-box,
    radial-gradient(90% 70% at 100% 100%,rgba(97,81,207,.30),transparent 62%) padding-box,
    linear-gradient(rgba(12,14,20,.66),rgba(12,14,20,.66)) padding-box,
    linear-gradient(140deg,#8FD5F7,#6151CF 50%,#AFA3FF) border-box!important;
  box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 60px -10px rgba(97,81,207,.6),inset 0 1px 0 rgba(255,255,255,.3)!important}
#kfx-root.welt-tag .kfx-kachel[style*="border: 1.5px solid var(--akzent)"]{
  background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,255,255,.78)) padding-box,linear-gradient(140deg,#3A7BD5,#5A41C0 55%,#743BBE) border-box!important}
/* Vertrauens-Zeile im Kopf: einzelne Glaspillen statt einem Balken */
#kfx-root .u-trust{background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-radius:0!important;gap:10px!important}
#kfx-root .u-trust>li{padding:9px 15px;border-radius:999px;border:1px solid transparent;
  background:linear-gradient(rgba(18,21,28,.55),rgba(18,21,28,.55)) padding-box,linear-gradient(140deg,rgba(255,255,255,.55),rgba(255,255,255,.06) 45%,rgba(175,163,255,.45)) border-box;
  -webkit-backdrop-filter:blur(12px) saturate(170%);backdrop-filter:blur(12px) saturate(170%);box-shadow:0 10px 26px -10px rgba(0,0,0,.6)}
#kfx-root.welt-tag .u-trust>li{background:linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,.85)) padding-box,linear-gradient(140deg,#fff,rgba(90,65,192,.35)) border-box}
/* Kopfbereich der Unterseiten: Verlauf hinter dem Text, damit er über dem Film lesbar bleibt */
#kfx-root main>section:first-child{isolation:isolate}
#kfx-root main>section:first-child::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--grund-rgb),.78) 0%,rgba(var(--grund-rgb),.5) 45%,rgba(var(--grund-rgb),0) 75%)}
@media (max-width:900px){#kfx-root main>section:first-child::before{background:linear-gradient(180deg,rgba(var(--grund-rgb),.35),rgba(var(--grund-rgb),.75))}}
/* Abschnitts-Kennzeichen "// Preise" und Ratgeber-Kicker leuchten wie auf der Startseite */
#kfx-root .p-eyebrow{text-shadow:0 0 18px rgba(103,199,244,.45)}
/* Fließtext in Ratgeber-Artikeln bekommt eine ruhige Glasfläche, damit er über dem Film gut lesbar ist */
#kfx-root .p-prose{position:relative}
#kfx-root .p-art{border-radius:26px;padding:clamp(18px,3vw,40px);
  background:linear-gradient(rgba(var(--grund-rgb),.80),rgba(var(--grund-rgb),.80)) padding-box,
    linear-gradient(145deg,rgba(255,255,255,.35),rgba(255,255,255,.05) 35%,rgba(103,199,244,.30)) border-box;
  border:1px solid transparent;-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 30px 70px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.18)}
#kfx-root.welt-tag .p-art{background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.9)) padding-box,linear-gradient(145deg,#fff,rgba(90,65,192,.3)) border-box}
@media (prefers-reduced-transparency:reduce){#kfx-root .p-art,#kfx-root .u-trust>li{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--grund)}}
/* Problem-Listen ("Kenn ich. Löse ich."): kleine Glaskacheln statt Linien */
#kfx-root .kfx-kachel-klein{padding:18px 20px!important;line-height:1.5}
#kfx-root .kfx-kachel-klein>strong{display:block;margin-bottom:4px;font-size:17px}

@keyframes kfxWaWackel{0%,72%,100%{transform:rotate(0)}75%{transform:rotate(-3deg)}78%{transform:rotate(3deg)}81%{transform:rotate(-2.5deg)}84%{transform:rotate(2deg)}87%{transform:rotate(-1deg)}90%{transform:rotate(0)}}

/* ---------- 8. Leistung auf Unterseiten ----------
   Dort gibt es bis zu 50 Kacheln. Echte Hintergrund-Unschärfe auf jeder Kachel macht das Scrollen zäh.
   Der Film läuft deshalb in halber Auflösung (wirkt von selbst wie Milchglas), die Kacheln bekommen
   eine kräftigere Tönung statt eigener Unschärfe. Optisch fast gleich, beim Scrollen deutlich flüssiger. */
#kfx-root .kfx-kachel,#kfx-root .p-art,#kfx-root .u-trust>li{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
#kfx-root .kfx-kachel:not([style*="border: 1.5px solid var(--akzent)"]){
  background:
    radial-gradient(520px circle at var(--mx,50%) var(--my,-60%),var(--kfx-licht),transparent 65%) padding-box,
    radial-gradient(120% 80% at 0% 0%,rgba(255,255,255,.10),transparent 46%) padding-box,
    radial-gradient(90% 70% at 100% 100%,rgba(97,81,207,.16),transparent 62%) padding-box,
    linear-gradient(rgba(14,16,23,.78),rgba(14,16,23,.78)) padding-box,
    linear-gradient(145deg,rgba(255,255,255,.58),rgba(255,255,255,.10) 26%,rgba(255,255,255,.03) 58%,rgba(103,199,244,.46)) border-box!important;
  box-shadow:0 20px 44px -10px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.26),inset 0 -12px 28px rgba(0,0,0,.18)!important}
#kfx-root .kfx-kachel[style*="border: 1.5px solid var(--akzent)"]{
  background:
    radial-gradient(520px circle at var(--mx,50%) var(--my,-60%),var(--kfx-licht),transparent 65%) padding-box,
    radial-gradient(120% 80% at 0% 0%,rgba(255,255,255,.12),transparent 46%) padding-box,
    radial-gradient(90% 70% at 100% 100%,rgba(97,81,207,.32),transparent 62%) padding-box,
    linear-gradient(rgba(14,16,23,.80),rgba(14,16,23,.80)) padding-box,
    linear-gradient(140deg,#8FD5F7,#6151CF 50%,#AFA3FF) border-box!important}
#kfx-root .p-art{background:linear-gradient(rgba(var(--grund-rgb),.88),rgba(var(--grund-rgb),.88)) padding-box,
    linear-gradient(145deg,rgba(255,255,255,.35),rgba(255,255,255,.05) 35%,rgba(103,199,244,.30)) border-box}
#kfx-root .u-trust>li{background:linear-gradient(rgba(18,21,28,.8),rgba(18,21,28,.8)) padding-box,linear-gradient(140deg,rgba(255,255,255,.55),rgba(255,255,255,.06) 45%,rgba(175,163,255,.45)) border-box}
#kfx-root.welt-tag .kfx-kachel:not([style*="border: 1.5px solid var(--akzent)"]){
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,-60%),var(--kfx-licht),transparent 65%) padding-box,
    linear-gradient(160deg,rgba(255,255,255,.94),rgba(255,255,255,.82)) padding-box,
    linear-gradient(145deg,#FFFFFF,rgba(255,255,255,.45) 40%,rgba(90,65,192,.40)) border-box!important;
  box-shadow:0 20px 44px -10px rgba(10,8,30,.4),inset 0 1px 0 #fff!important}
#kfx-root.welt-tag .p-art{background:linear-gradient(rgba(255,255,255,.93),rgba(255,255,255,.93)) padding-box,linear-gradient(145deg,#fff,rgba(90,65,192,.3)) border-box}
#kfx-root.welt-tag .u-trust>li{background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.9)) padding-box,linear-gradient(140deg,#fff,rgba(90,65,192,.35)) border-box}

/* ---------- 9. DORTMUND in Neon über der Stadt (Startseite) ----------
   Warme Leuchtröhren in Gelb-Orange, jede Röhre mit leicht anderem Farbton wie echte Neonschrift.
   Ohne JavaScript leuchten sie einfach. Mit JavaScript sind sie erst aus und dunkel und zünden dann
   Buchstabe für Buchstabe flackernd (glanz.js). Das M ist die "kaputte Röhre" und flackert ab und zu nach. */
#kfx-root .kfx-neon{position:relative;display:block;margin:0 0 22px -.04em;pointer-events:none;user-select:none;
  text-align:left;white-space:nowrap;font:300 clamp(30px,4.2vw,64px)/1 'Archivo',system-ui,sans-serif;font-stretch:125%;letter-spacing:.16em}
#kfx-root .kfx-neon>span{display:inline-block;--h:40;
  color:hsl(var(--h) 100% 71%);
  text-shadow:0 0 1px hsl(var(--h) 100% 88%),0 0 4px hsl(var(--h) 100% 62%),0 0 10px hsl(var(--h) 100% 55%),0 0 22px hsl(var(--h) 100% 50%),0 0 44px hsl(calc(var(--h) - 12) 100% 46%),0 0 80px hsl(calc(var(--h) - 16) 100% 42%)}
#kfx-root .kfx-neon>span:nth-child(1){--h:44}#kfx-root .kfx-neon>span:nth-child(2){--h:37}
#kfx-root .kfx-neon>span:nth-child(3){--h:42}#kfx-root .kfx-neon>span:nth-child(4){--h:35}
#kfx-root .kfx-neon>span:nth-child(5){--h:39}#kfx-root .kfx-neon>span:nth-child(6){--h:45}
#kfx-root .kfx-neon>span:nth-child(7){--h:36}#kfx-root .kfx-neon>span:nth-child(8){--h:41}
/* Ausgeschaltete Röhre: dunkles Glas, nur ein Hauch Restlicht */
#kfx-root .kfx-neon>span.aus{color:hsl(var(--h) 35% 17%);text-shadow:0 0 1px hsla(var(--h),80%,60%,.18)}
/* Warmer Schein der Röhren auf den Himmel, kommt mit dem Einschalten */
#kfx-root .kfx-neon::after{content:"";position:absolute;left:30%;top:50%;width:min(760px,140%);height:300%;transform:translate(-50%,-50%);z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,170,40,.16),rgba(255,120,20,.07) 45%,transparent 72%);transition:opacity .8s ease}
#kfx-root .kfx-neon.dunkel::after{opacity:0}
@media (max-width:900px){#kfx-root .kfx-neon{font-size:8.6vw;letter-spacing:.1em;margin-bottom:18px}}
@media (prefers-reduced-motion:reduce){#kfx-root .kfx-neon>span.aus{color:hsl(var(--h) 100% 71%)}}

/* ---------- 10. Bewertungssterne: drehen sich nacheinander, färben sich von Schwarz zu Dortmund-Gelb,
   werden zum Schluss einmal groß. Startet jedes Mal, wenn die Bewertung ins Bild kommt (glanz.js). ---------- */
#kfx-root .kfx-sterne{display:flex!important;gap:5px;font-size:18px;line-height:1;letter-spacing:0!important;margin-bottom:14px}
#kfx-root .kfx-reviews .kfx-sterne{margin-bottom:16px}
#kfx-root .kfx-sterne>span{display:inline-block;color:var(--kfx-stern,#FFC400);text-shadow:0 0 12px rgba(255,170,0,.55);transform-origin:50% 55%}
#kfx-root .kfx-sterne.drehen>span{animation:kfxSternDreh 1.6s cubic-bezier(.3,.7,.3,1) both;animation-delay:calc(var(--i) * .15s)}
@keyframes kfxSternDreh{
  0%{transform:rotate(0deg) scale(.8);color:#111111;text-shadow:0 0 1px rgba(255,255,255,.6)}
  50%{color:#FF8A00;text-shadow:0 0 10px rgba(255,138,0,.6)}
  62%{transform:rotate(360deg) scale(1)}
  80%{transform:rotate(360deg) scale(1.75);color:#FDE100;text-shadow:0 0 22px rgba(253,210,0,.95)}
  100%{transform:rotate(360deg) scale(1);color:var(--kfx-stern,#FFC400);text-shadow:0 0 12px rgba(255,170,0,.55)}}
#kfx-root.welt-tag .kfx-sterne{--kfx-stern:#E39A00}
@media (prefers-reduced-motion:reduce){#kfx-root .kfx-sterne.drehen>span{animation:none}}

/* ---------- 11. Menü fürs Handy (glanz.js baut Knopf und Menü aus der vorhandenen Leiste) ---------- */
.kfx-menue-knopf{display:none;width:44px;height:44px;border-radius:50%;padding:0;cursor:pointer;flex:none;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--text);
  border:1px solid transparent;
  background:radial-gradient(90% 80% at 30% 0%,rgba(255,255,255,.18),transparent 60%) padding-box,linear-gradient(rgba(18,21,28,.5),rgba(18,21,28,.5)) padding-box,
    linear-gradient(140deg,rgba(255,255,255,.7),rgba(255,255,255,.1) 40%,rgba(175,163,255,.6)) border-box}
.kfx-menue-knopf>span{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .2s}
.kfx-menue-knopf[aria-expanded="true"]>span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.kfx-menue-knopf[aria-expanded="true"]>span:nth-child(2){opacity:0}
.kfx-menue-knopf[aria-expanded="true"]>span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.kfx-menue-knopf:focus-visible{outline:2px solid #67C7F4;outline-offset:2px}
@media (max-width:900px){.kfx-menue-knopf{display:flex}}
.welt-tag .kfx-menue-knopf{background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,255,255,.72)) padding-box,linear-gradient(140deg,#fff,rgba(90,65,192,.45)) border-box}

.kfx-menue{position:fixed;left:12px;right:12px;top:calc(84px + env(safe-area-inset-top,0px));z-index:40;max-height:calc(100dvh - 190px);overflow:auto;
  padding:10px;border-radius:26px;border:1px solid transparent;
  background:radial-gradient(90% 60% at 15% 0%,rgba(255,255,255,.16),transparent 55%) padding-box,
    linear-gradient(rgba(16,18,26,.90),rgba(16,18,26,.90)) padding-box,
    linear-gradient(140deg,rgba(255,255,255,.70),rgba(255,255,255,.12) 26%,rgba(255,255,255,.03) 58%,rgba(175,163,255,.55)) border-box;
  -webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  box-shadow:0 34px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.35);
  transform-origin:top right;animation:kfxMenueAuf .32s cubic-bezier(.2,.8,.2,1)}
.kfx-menue[hidden]{display:none}
@keyframes kfxMenueAuf{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
.kfx-menue-liste{display:flex;flex-direction:column}
.kfx-menue-liste a{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 16px;border-radius:16px;
  font:700 18px/1.2 'Archivo',system-ui,sans-serif;color:var(--text,#EEF1F4);text-decoration:none}
.kfx-menue-liste a::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);opacity:.5}
.kfx-menue-liste a+a{border-top:1px solid rgba(255,255,255,.07)}
.kfx-menue-liste a:active,.kfx-menue-liste a:hover{background:linear-gradient(90deg,rgba(97,81,207,.45),rgba(103,199,244,.18))}
.kfx-menue a[aria-current]{color:#8FD5F7}
.kfx-menue-titel{margin:14px 16px 8px;font:600 11px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--leise,#A0A9B6)}
.kfx-menue-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 8px 6px}
.kfx-menue-chips a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;font:600 14px/1 'Archivo',system-ui,sans-serif;
  color:var(--text,#EEF1F4);text-decoration:none;border:1px solid transparent;
  background:linear-gradient(rgba(255,255,255,.06),rgba(255,255,255,.06)) padding-box,linear-gradient(140deg,rgba(255,255,255,.45),rgba(255,255,255,.06) 50%,rgba(103,199,244,.45)) border-box}
.kfx-menue-bewerten{display:flex;align-items:center;justify-content:center;min-height:48px;margin:12px 8px 4px;border-radius:999px;
  font:700 15px/1 'Archivo',system-ui,sans-serif;color:#fff;text-decoration:none;
  background:linear-gradient(160deg,#3F78C0,#4F40B8 55%,#5F2DA6);box-shadow:0 12px 30px -10px rgba(116,59,190,.9),inset 0 1px 0 rgba(255,255,255,.4)}
.welt-tag .kfx-menue{background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(255,255,255,.9)) padding-box,linear-gradient(140deg,#fff,rgba(90,65,192,.4)) border-box;box-shadow:0 30px 70px rgba(10,8,30,.35)}
.welt-tag .kfx-menue-liste a+a{border-top-color:rgba(20,18,16,.08)}
.welt-tag .kfx-menue a[aria-current]{color:#5A41C0}
.welt-tag .kfx-menue-chips a{background:linear-gradient(rgba(90,65,192,.06),rgba(90,65,192,.06)) padding-box,linear-gradient(140deg,rgba(90,65,192,.4),rgba(90,65,192,.1)) border-box}
.kfx-menue a:focus-visible{outline:2px solid #67C7F4;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.kfx-menue{animation:none}.kfx-menue-knopf>span{transition:none}}

/* ---------- 12. Bewertungen: sechs Stimmen, am Handy als Wischreihe ---------- */
#kfx-root .kfx-reviews blockquote{font-size:17px!important}
@media (max-width:900px){
  #kfx-root .kfx-reviews{display:grid!important;grid-auto-flow:column;grid-auto-columns:84%;grid-template-columns:none!important;
    overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:6px 18px 14px;margin-left:-18px!important;margin-right:-18px;scrollbar-width:none}
  #kfx-root .kfx-reviews::-webkit-scrollbar{display:none}
  #kfx-root .kfx-reviews>figure{scroll-snap-align:center}
}

/* ---------- 13. Ladebildschirm ("Vorhang") der Startseite ----------
   Nur beim ersten Besuch je Sitzung (Klasse kfx-vorhang-an setzt das Skript im Kopf), Steuerung in vorhang.js.
   Die Seite darunter wird ganz normal aufgebaut, der Vorhang liegt nur darüber. */
.kfx-vorhang{display:none}
html.kfx-vorhang-an .kfx-vorhang{display:flex}
.kfx-vorhang{position:fixed;inset:0;z-index:1000;align-items:center;justify-content:center;flex-direction:column;gap:22px;padding:24px;
  color:#EEF1F4;font-family:'Archivo',system-ui,sans-serif;text-align:center;
  background:
    radial-gradient(34% 40% at 10% 14%,rgba(97,178,237,.55),transparent 70%),
    radial-gradient(30% 38% at 58% 44%,rgba(97,81,207,.45),transparent 72%),
    radial-gradient(40% 46% at 94% 90%,rgba(116,59,190,.6),transparent 70%),
    radial-gradient(26% 30% at 36% 100%,rgba(103,199,244,.35),transparent 70%),
    #06070A;
  transition:opacity .6s ease,transform .6s cubic-bezier(.3,.6,.2,1)}
.kfx-vorhang.geht{opacity:0;transform:scale(1.06);pointer-events:none}
.kfx-vorhang-karte{position:relative;width:min(420px,100%);padding:30px 28px 24px;border-radius:28px;border:1px solid transparent;
  background:radial-gradient(90% 60% at 15% 0%,rgba(255,255,255,.16),transparent 55%) padding-box,
    linear-gradient(rgba(18,21,28,.55),rgba(18,21,28,.55)) padding-box,
    linear-gradient(140deg,rgba(255,255,255,.7),rgba(255,255,255,.12) 26%,rgba(255,255,255,.03) 58%,rgba(175,163,255,.55)) border-box;
  -webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
  box-shadow:0 40px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.35)}
.kfx-vorhang-logo{display:flex;align-items:center;justify-content:center;gap:12px}
.kfx-vorhang-logo img{height:52px;width:auto;filter:drop-shadow(0 0 18px rgba(103,199,244,.5));animation:kfxVorhangPuls 1.6s ease-in-out infinite}
.kfx-vorhang-logo b{font-weight:800;font-stretch:118%;font-size:26px;letter-spacing:-.01em}
.kfx-vorhang-slogan{margin-top:6px;font:400 12px/1 'JetBrains Mono',monospace;color:#A3ACB8}
.kfx-vorhang-spruch{margin:26px 0 14px;min-height:24px;font-size:18px;font-weight:600;transition:opacity .18s ease,transform .18s ease}
.kfx-vorhang-spruch.wechsel{opacity:0;transform:translateY(6px)}
.kfx-vorhang-balken{position:relative;height:8px;border-radius:99px;overflow:hidden;background:rgba(0,0,0,.35);box-shadow:inset 0 1px 3px rgba(0,0,0,.6)}
.kfx-vorhang-balken i{position:absolute;inset:0;border-radius:inherit;transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(90deg,#61B2ED,#6151CF 55%,#743BBE);box-shadow:0 0 14px rgba(103,199,244,.7)}
.kfx-vorhang-balken i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  background-size:200% 100%;animation:kfxVorhangGlanz 1.2s linear infinite}
.kfx-vorhang-zahl{margin-top:10px;font:600 12px/1 'JetBrains Mono',monospace;color:#A3ACB8}
.kfx-vorhang-weiter{margin-top:4px;min-height:40px;padding:0 18px;border-radius:999px;cursor:pointer;color:#EEF1F4;font:600 13px/1 'Archivo',system-ui,sans-serif;
  border:1px solid rgba(255,255,255,.22);background:rgba(18,21,28,.45)}
.kfx-vorhang-weiter:hover,.kfx-vorhang-weiter:focus-visible{border-color:#67C7F4;outline:none;box-shadow:0 0 18px rgba(103,199,244,.4)}
@keyframes kfxVorhangPuls{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes kfxVorhangGlanz{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.kfx-vorhang{display:none!important}}
/* Notbremse: Falls vorhang.js nicht lädt, verschwindet der Vorhang nach 7 Sekunden von selbst */
html.kfx-vorhang-an .kfx-vorhang{animation:kfxVorhangNotaus .3s linear 7s forwards}
@keyframes kfxVorhangNotaus{to{opacity:0;visibility:hidden}}

/* ---------- 14. Handy: Vertrauenspunkte als eine Glas-Infokarte statt einzelner Pillen,
   Hauptknöpfe im Kopf über die volle Breite. Wie die Zahlenleiste der Startseite. ---------- */
@media (max-width:900px){
  #kfx-root .u-trust{display:grid!important;grid-template-columns:1fr 1fr;gap:0!important;padding:0!important;overflow:hidden;
    border-radius:22px!important;border:1px solid transparent!important;
    background:radial-gradient(110% 70% at 0% 0%,rgba(255,255,255,.10),transparent 50%) padding-box,
      linear-gradient(rgba(14,16,23,.80),rgba(14,16,23,.80)) padding-box,
      linear-gradient(145deg,rgba(255,255,255,.55),rgba(255,255,255,.08) 30%,rgba(255,255,255,.03) 60%,rgba(103,199,244,.45)) border-box!important;
    box-shadow:0 20px 44px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.22)!important}
  #kfx-root .u-trust>li{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;
    padding:14px 15px!important;font-size:12.5px;line-height:1.35;color:var(--leise)}
  #kfx-root .u-trust>li:nth-child(odd){border-right:1px solid rgba(255,255,255,.08)!important}
  #kfx-root .u-trust>li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.08)!important}
  #kfx-root .u-trust>li:last-child:nth-child(odd){grid-column:1/-1;border-right:0!important}
  #kfx-root .u-trust>li strong{display:block;margin:2px 0;font-size:16px;font-weight:800;font-stretch:112%;letter-spacing:-.01em;color:var(--text)!important}
  #kfx-root.welt-tag .u-trust{background:linear-gradient(160deg,rgba(255,255,255,.94),rgba(255,255,255,.82)) padding-box,
    linear-gradient(145deg,#fff,rgba(90,65,192,.35)) border-box!important;box-shadow:0 16px 36px -12px rgba(10,8,30,.35)!important}
  #kfx-root.welt-tag .u-trust>li:nth-child(odd){border-right-color:rgba(20,18,16,.1)!important}
  #kfx-root.welt-tag .u-trust>li:nth-child(n+3){border-top-color:rgba(20,18,16,.1)!important}
  /* Lange Wörter wie "vorbeikomme" passen auf schmale Handys, Leiterbahn-Grafik im Kopf fällt weg (lag über dem Text) */
  #kfx-root .u-h1{font-size:clamp(34px,10.6vw,48px)!important}
  #kfx-root main>section:first-child>svg{display:none}
  /* Hauptknöpfe im Kopf: gleich breit, Text mittig */
  #kfx-root :is(.u-hero,.kfx-hero) :is(.kfx-knopf-haupt,.kfx-knopf-glas){flex:1 1 100%;justify-content:center}
}

/* ---------- 15. Feinschliff nach der Gesamtprüfung (alle 79 Seiten, Handy, Tablet, Rechner) ---------- */
/* Vertrauenspunkte der Leistungsseiten: auch am Rechner eine Glasleiste wie die Zahlenleiste der Startseite */
@media (min-width:901px){
  #kfx-root .u-trust{display:grid!important;grid-auto-flow:column;grid-auto-columns:1fr;gap:0!important;padding:0!important;overflow:hidden;max-width:720px;
    border-radius:20px!important;border:1px solid transparent!important;
    background:radial-gradient(110% 70% at 0% 0%,rgba(255,255,255,.10),transparent 50%) padding-box,
      linear-gradient(rgba(14,16,23,.80),rgba(14,16,23,.80)) padding-box,
      linear-gradient(145deg,rgba(255,255,255,.55),rgba(255,255,255,.08) 30%,rgba(255,255,255,.03) 60%,rgba(103,199,244,.45)) border-box!important;
    box-shadow:0 20px 44px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.22)!important}
  #kfx-root .u-trust>li{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;
    padding:14px 16px!important;font-size:12.5px;line-height:1.35;color:var(--leise)}
  #kfx-root .u-trust>li+li{border-left:1px solid rgba(255,255,255,.08)!important}
  #kfx-root .u-trust>li strong{display:block;margin:2px 0;font-size:17px;font-weight:800;font-stretch:112%;letter-spacing:-.01em;color:var(--text)!important}
  #kfx-root.welt-tag .u-trust{background:linear-gradient(160deg,rgba(255,255,255,.94),rgba(255,255,255,.82)) padding-box,
    linear-gradient(145deg,#fff,rgba(90,65,192,.35)) border-box!important;box-shadow:0 16px 36px -12px rgba(10,8,30,.35)!important}
  #kfx-root.welt-tag .u-trust>li+li{border-left-color:rgba(20,18,16,.1)!important}
}
/* Lange deutsche Wörter ("Fachchinesisch", "Ansprechpartner") brechen sauber statt über den Rand zu laufen */
/* Keine Silbentrennung. Überschriften brechen ausgewogen um (keine einzelnen Wörter in der letzten Zeile),
   Fließtext ohne Schusterjungen. Ist ein Wort trotzdem zu breit, verkleinert glanz.js nur diese Überschrift. */
#kfx-root :is(h1,h2,h3,summary,.kfx-h2,.u-h2,.p-h1,.p-h2,.r-cta-titel){hyphens:manual;-webkit-hyphens:manual;overflow-wrap:normal;text-wrap:balance}
#kfx-root :is(p,li,blockquote,dd){hyphens:manual;-webkit-hyphens:manual;text-wrap:pretty}
/* Fachbegriffe, Preise, Telefonnummern und E-Mail bleiben zusammen (Markierung setzt das Umbau-Skript) */
#kfx-root .kfx-nb{white-space:nowrap}
@media (max-width:900px){
  #kfx-root .kfx-h2{font-size:clamp(28px,8.6vw,36px)!important}
  #kfx-root .u-h2{font-size:clamp(25px,7.6vw,32px)!important}
  #kfx-root .p-h1{font-size:clamp(32px,10vw,48px)!important}
  #kfx-root .p-h2{font-size:clamp(25px,7.6vw,32px)!important}
}
/* Zwei oder mehr Knöpfe nebeneinander (Kontakt, Kopf, Ratgeber-Kasten): am Handy gleich breit untereinander */
@media (max-width:600px){
  #kfx-root :is(div,nav):has(> :is(.kfx-knopf-haupt,.kfx-knopf-glas):not(.kfx-chip) ~ :is(.kfx-knopf-haupt,.kfx-knopf-glas):not(.kfx-chip)):not(:is(.u-callbar,.p-callbar,.kfx-callbar)) > :is(.kfx-knopf-haupt,.kfx-knopf-glas):not(.kfx-chip){flex:1 1 100%;justify-content:center}
}
/* Ratgeber: "Lieber machen lassen?"-Kasten und Tabellen im Glas */
#kfx-root .r-cta.kfx-kachel{padding:26px!important}
#kfx-root .r-knoepfe .kfx-knopf-haupt,#kfx-root .r-knoepfe .kfx-knopf-glas{min-height:48px;padding:0 22px}
#kfx-root .kfx-tabelle{padding:0!important;overflow-x:auto!important}
#kfx-root .kfx-tabelle th{background:rgba(255,255,255,.05)!important;border-bottom-color:rgba(255,255,255,.09)!important}
#kfx-root .kfx-tabelle td{border-bottom-color:rgba(255,255,255,.07)!important}
#kfx-root.welt-tag .kfx-tabelle th{background:rgba(90,65,192,.06)!important;border-bottom-color:rgba(20,18,16,.1)!important}
#kfx-root.welt-tag .kfx-tabelle td{border-bottom-color:rgba(20,18,16,.08)!important}
/* Textlinks mit Pfeil in Kacheln (z. B. Apps): kleine Glasknöpfe mit ausreichender Tippfläche */
#kfx-root .kfx-knopf-pfeil{display:inline-flex!important;align-items:center;align-self:flex-start;min-height:44px!important;padding:0 18px!important;color:var(--text)!important;text-decoration:none!important}
/* Anfrage-Formular */
#kfx-root .kfx-kachel-form{border-radius:24px!important}
/* Werksausweis: am Tablet nicht riesig, Foto mit runden Ecken */
@media (max-width:1100px){#kfx-root .lq-karte{max-width:420px;width:100%;justify-self:center;margin-left:auto;margin-right:auto}}
#kfx-root .lq-karte img{border-radius:14px!important}
/* Große Telefonnummer im Kontakt: genug Tippfläche */
#kfx-root .kfx-phone{padding:6px 0}
#kfx-root summary{padding-right:8px!important}
/* Themen-Chips ("Das ist nur ein Ausschnitt"): kompakte Glaspillen, die sich umbrechen */
#kfx-root .kfx-chip{min-height:40px!important;padding:0 14px!important;font-size:14px!important;flex:0 0 auto!important}
/* Kleine Info-Pillen ohne Link (Stadtteile, Vertrauenspunkte der Firmen-Seite): Glas statt dunkler Strich */
#kfx-root :is(li,span)[style*="border-radius: 999px; border: 1px solid var(--linie)"]{
  border:1px solid transparent!important;
  background:linear-gradient(rgba(18,21,28,.62),rgba(18,21,28,.62)) padding-box,
    linear-gradient(140deg,rgba(255,255,255,.45),rgba(255,255,255,.06) 50%,rgba(103,199,244,.40)) border-box!important;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12)}
#kfx-root.welt-tag :is(li,span)[style*="border-radius: 999px; border: 1px solid var(--linie)"]{
  background:linear-gradient(rgba(255,255,255,.88),rgba(255,255,255,.88)) padding-box,linear-gradient(140deg,#fff,rgba(90,65,192,.35)) border-box!important}
@media (max-width:600px){
  /* Vertrauenspunkte als 2x2-Kacheln statt Pillen untereinander */
  #kfx-root .p-wrap>span[style*="min-height: 38px"][style*="border-radius: 999px"]{flex:0 0 calc(50% - 4px);max-width:calc(50% - 4px);min-width:0;white-space:normal;box-sizing:border-box;border-radius:14px!important;min-height:52px!important;align-items:center;line-height:1.25}
  /* Startseite "Wofür bist du hier?": eine Glas-Liste mit Pfeilen statt drei Pillen */
  #kfx-root nav[aria-label="Für wen"]{display:grid!important;gap:0!important;padding:6px;border-radius:22px;border:1px solid transparent;
    background:radial-gradient(110% 70% at 0% 0%,rgba(255,255,255,.10),transparent 50%) padding-box,
      linear-gradient(rgba(14,16,23,.78),rgba(14,16,23,.78)) padding-box,
      linear-gradient(145deg,rgba(255,255,255,.55),rgba(255,255,255,.08) 30%,rgba(255,255,255,.03) 60%,rgba(103,199,244,.45)) border-box;
    box-shadow:0 20px 44px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.2)}
  #kfx-root nav[aria-label="Für wen"]>span{padding:10px 12px 6px;margin:0!important}
  #kfx-root nav[aria-label="Für wen"]>a{position:relative;justify-content:flex-start;flex-wrap:wrap;min-height:52px!important;padding:8px 40px 8px 12px!important;
    border:0!important;border-radius:14px!important;background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  #kfx-root nav[aria-label="Für wen"]>a .lq-spec{display:none}
  #kfx-root nav[aria-label="Für wen"]>a+a{border-top:1px solid rgba(255,255,255,.08)!important;border-radius:0!important}
  #kfx-root nav[aria-label="Für wen"]>a::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:translateY(-50%) rotate(45deg);opacity:.5}
  #kfx-root.welt-tag nav[aria-label="Für wen"]{background:linear-gradient(160deg,rgba(255,255,255,.94),rgba(255,255,255,.82)) padding-box,linear-gradient(145deg,#fff,rgba(90,65,192,.35)) border-box}
  #kfx-root.welt-tag nav[aria-label="Für wen"]>a+a{border-top-color:rgba(20,18,16,.1)!important}
  #kfx-root .kfx-h2{font-size:clamp(26px,7.8vw,34px)!important}
}
/* Zeile direkt unter dem Kopfbereich (Firmen-Seite) liegt über dem Kopf, nicht darunter */
#kfx-root main>section:first-child+.p-wrap{position:relative;z-index:1}