/* KapFixIT Crystal Glass, Stand 14.10.2026.
   Liegt ueber der 3D-Zechenstadt und ersetzt nichts an welt.js.
   Drei Glasebenen: lq-1 Flaechen, lq-2 Inhaltskarten, lq-3 Schwebendes. */
:root{
  --kfx-a1:.30; --kfx-a2:.52; --kfx-a3:.58;
  --kfx-blau:#61B2ED; --kfx-lila:#6151CF; --kfx-violett:#743BBE;
  --kfx-himmel:#67C7F4; --kfx-violett-text:#AFA3FF;
  --kfx-verlauf:linear-gradient(160deg,#61B2ED 0%,#6151CF 55%,#743BBE 100%);
}
.lq-1,.lq-2,.lq-3{position:relative;border:1px solid transparent!important}
.lq-1{
  background:
    linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015) 40%) padding-box,
    linear-gradient(rgba(8,10,14,var(--kfx-a1)),rgba(8,10,14,var(--kfx-a1))) padding-box,
    linear-gradient(150deg,rgba(255,255,255,.42),rgba(255,255,255,.07) 30%,rgba(255,255,255,.02) 62%,rgba(175,163,255,.30)) border-box!important;
  backdrop-filter:blur(30px) saturate(160%)!important;
  -webkit-backdrop-filter:blur(30px) saturate(160%)!important;
  box-shadow:0 50px 120px rgba(0,0,0,.6),0 8px 24px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.20)!important;
}
.lq-2{
  background:
    radial-gradient(110% 70% at 0% 0%,rgba(255,255,255,.09),transparent 45%) padding-box,
    linear-gradient(rgba(12,14,20,var(--kfx-a2)),rgba(12,14,20,var(--kfx-a2))) padding-box,
    linear-gradient(145deg,rgba(255,255,255,.50),rgba(255,255,255,.09) 28%,rgba(255,255,255,.02) 60%,rgba(103,199,244,.38)) border-box!important;
  backdrop-filter:blur(22px) saturate(180%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(180%)!important;
  box-shadow:0 26px 60px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.24),inset 0 -14px 34px rgba(0,0,0,.20)!important;
}
.lq-3{
  background:
    radial-gradient(90% 60% at 15% 0%,rgba(255,255,255,.16),transparent 55%) padding-box,
    linear-gradient(rgba(18,21,28,var(--kfx-a3)),rgba(18,21,28,var(--kfx-a3))) 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;
  backdrop-filter:blur(10px) saturate(200%) brightness(1.08)!important;
  -webkit-backdrop-filter:blur(10px) saturate(200%) brightness(1.08)!important;
  box-shadow:0 34px 80px rgba(0,0,0,.55),0 6px 18px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.40),inset 0 -1px 0 rgba(255,255,255,.08),inset 0 0 30px rgba(255,255,255,.04)!important;
}
/* Lichtbrechung nur auf kleinen schwebenden Flaechen, sonst kostet es Leistung */
.lq-brechung{backdrop-filter:url(#kfx-liquid) blur(10px) saturate(200%) brightness(1.08)!important}
/* Glanz: erstes Kind jeder Glasflaeche */
.lq-spec{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(255,255,255,.13),transparent 32%),
    radial-gradient(60% 40% at 100% 100%,rgba(103,199,244,.10),transparent 70%)}
.lq-1>*:not(.lq-spec),.lq-2>*:not(.lq-spec),.lq-3>*:not(.lq-spec){position:relative;z-index:1}

/* Radien nach Standard */
.lq-karte{border-radius:22px!important}
.lq-leiste{border-radius:999px!important}
.lq-dialog{border-radius:28px!important}

/* Hauptknopf im Logo-Verlauf, nur einer pro Ansicht */
.kfx-primaer{
  background:var(--kfx-verlauf)!important;
  color:#0B0D10!important;
  border:1px solid rgba(255,255,255,.28)!important;
  border-radius:12px!important;
  box-shadow:0 18px 40px -14px rgba(116,59,190,.85),inset 0 1px 0 rgba(255,255,255,.45)!important;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease;
}
.kfx-primaer:hover,.kfx-primaer:focus-visible{transform:translateY(-2px);
  box-shadow:0 24px 54px -14px rgba(116,59,190,.95),inset 0 1px 0 rgba(255,255,255,.55)!important}
.kfx-primaer svg{color:#0B0D10}

/* Zweitknopf als Glaspille */
.kfx-zweit{border-radius:12px!important}

/* Kundenkacheln: Glas statt flacher Flaeche, Logokasten bleibt weiss */
.kfx-kunden > a{border-radius:18px!important;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.kfx-kunden > a:hover{transform:translateY(-4px)}

/* Zahlenleiste im Einstieg */
.kfx-stats{border-radius:18px!important;overflow:hidden}

/* Handy: weniger Unschaerfe, sonst wird es zaeh */
@media (max-width:820px){
  .lq-1{backdrop-filter:blur(16px) saturate(150%)!important;-webkit-backdrop-filter:blur(16px) saturate(150%)!important}
  .lq-2{backdrop-filter:blur(14px) saturate(160%)!important;-webkit-backdrop-filter:blur(14px) saturate(160%)!important}
  .lq-3{backdrop-filter:blur(12px) saturate(170%)!important;-webkit-backdrop-filter:blur(12px) saturate(170%)!important}
  .lq-brechung{backdrop-filter:blur(12px) saturate(170%)!important}
}
/* Ohne Glasunterstuetzung bleibt alles lesbar */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .lq-1,.lq-2,.lq-3{background:rgba(16,18,21,.94)!important;border:1px solid rgba(255,255,255,.12)!important}
}
@media (prefers-reduced-transparency: reduce){
  .lq-1,.lq-2,.lq-3{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    background:#101215!important;border:1px solid rgba(255,255,255,.14)!important}
}
@media (prefers-reduced-motion: reduce){
  .kfx-primaer,.kfx-kunden > a{transition:none}
}
/* Helles Schema: Glas bleibt, nur heller getoent */
.welt-tag .lq-1,.welt-tag .lq-2,.welt-tag .lq-3{
  background:linear-gradient(160deg,rgba(255,255,255,.72),rgba(255,255,255,.55)) padding-box,
    linear-gradient(145deg,rgba(255,255,255,.95),rgba(90,65,192,.25)) border-box!important;
  box-shadow:0 20px 50px rgba(60,50,40,.18),inset 0 1px 0 rgba(255,255,255,.9)!important;
}
.welt-tag .lq-spec{background:linear-gradient(180deg,rgba(255,255,255,.5),transparent 40%)}

/* ---------------------------------------------------------------
   Unterseiten, Ratgeber und Blog
   Dort gibt es keine lq-Klassen. Die Flaechen werden an ihrem
   Hintergrund erkannt, so bleibt das Markup der 72 Seiten unberuehrt.
--------------------------------------------------------------- */
.p-card,.r-box,.r-toc,.u-trust,
[style*="background: var(--karte)"],
[style*="background:var(--karte)"],
[style*="rgba(var(--grund-rgb),0.88)"],
[style*="rgba(var(--grund-rgb),0.9)"]{
  background:
    radial-gradient(110% 70% at 0% 0%,rgba(255,255,255,.09),transparent 45%) padding-box,
    linear-gradient(rgba(12,14,20,.52),rgba(12,14,20,.52)) padding-box,
    linear-gradient(145deg,rgba(255,255,255,.50),rgba(255,255,255,.09) 28%,rgba(255,255,255,.02) 60%,rgba(103,199,244,.38)) border-box!important;
  border:1px solid transparent!important;
  border-radius:18px!important;
  backdrop-filter:blur(20px) saturate(175%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(175%)!important;
  box-shadow:0 24px 56px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -14px 32px rgba(0,0,0,.18)!important;
}
/* Schwebendes: Kopfleiste, Pillen, Fussleiste am Handy */
[style*="rgba(var(--grund-rgb),0.74)"],
[style*="rgba(var(--grund-rgb),0.6)"],
[style*="rgba(var(--grund-rgb),0.5)"]{
  background:
    radial-gradient(90% 60% at 15% 0%,rgba(255,255,255,.16),transparent 55%) padding-box,
    linear-gradient(rgba(18,21,28,.58),rgba(18,21,28,.58)) 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;
  border:1px solid transparent!important;
  backdrop-filter:blur(14px) saturate(190%) brightness(1.06)!important;
  -webkit-backdrop-filter:blur(14px) saturate(190%) brightness(1.06)!important;
  box-shadow:0 30px 70px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.34)!important;
}
/* Helles Schema fuer Unterseiten, Ratgeber und Blog: Flaechen werden hell, Text kommt ueber --text */
.welt-tag .p-card,.welt-tag .r-box,.welt-tag .r-toc,.welt-tag .u-trust,
.welt-tag [style*="background: var(--karte)"],
.welt-tag [style*="background:var(--karte)"],
.welt-tag [style*="rgba(var(--grund-rgb),0.88)"],
.welt-tag [style*="rgba(var(--grund-rgb),0.9)"],
.welt-tag [style*="rgba(var(--grund-rgb),0.74)"],
.welt-tag [style*="rgba(var(--grund-rgb),0.6)"],
.welt-tag [style*="rgba(var(--grund-rgb),0.5)"]{
  background:
    linear-gradient(160deg,rgba(255,255,255,.94),rgba(255,255,255,.80)) padding-box,
    linear-gradient(145deg,rgba(255,255,255,.95),rgba(90,65,192,.25)) border-box!important;
  border:1px solid transparent!important;
  box-shadow:0 20px 50px rgba(60,50,40,.14),inset 0 1px 0 rgba(255,255,255,.9)!important;
}
/* Karten heben sich leicht an */
.p-card,.u-trust{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.p-card:hover,.u-trust:hover{transform:translateY(-3px)}
/* Hauptknopf der Unterseiten im Logo-Verlauf */
[style*="background: var(--akzent)"]:is(a,button):not(.kfx-skip){
  background:var(--kfx-verlauf)!important;color:#0B0D10!important;
  border:1px solid rgba(255,255,255,.28)!important;border-radius:12px!important;
  box-shadow:0 18px 40px -14px rgba(116,59,190,.85),inset 0 1px 0 rgba(255,255,255,.45)!important;
}
@media (max-width:820px){
  .p-card,.r-box,.r-toc,.u-trust,
  [style*="background: var(--karte)"],
  [style*="rgba(var(--grund-rgb),0.88)"]{backdrop-filter:blur(13px) saturate(160%)!important;-webkit-backdrop-filter:blur(13px) saturate(160%)!important}
  [style*="rgba(var(--grund-rgb),0.74)"],
  [style*="rgba(var(--grund-rgb),0.6)"]{backdrop-filter:blur(12px) saturate(170%)!important;-webkit-backdrop-filter:blur(12px) saturate(170%)!important}
}
@media (prefers-reduced-transparency: reduce){
  .p-card,.r-box,.r-toc,.u-trust,
  [style*="background: var(--karte)"],
  [style*="rgba(var(--grund-rgb),0.88)"],
  [style*="rgba(var(--grund-rgb),0.74)"],
  [style*="rgba(var(--grund-rgb),0.6)"]{background:#101215!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:1px solid rgba(255,255,255,.14)!important}
}