/* KapFixIT Startseite 2026, Schriften lokal (keine Google-Server) */
@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/assets/kfx26/fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/assets/kfx26/fonts/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:400;src:url(/assets/kfx26/fonts/jetbrains-mono-400.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:600;src:url(/assets/kfx26/fonts/jetbrains-mono-600.woff2) format('woff2')}
body{margin:0;background:#0E0D0B;color:#F3EEE6;font-family:'Archivo',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--text,#F3EEE6)}a:hover{color:var(--hover,#FFC3A4)}
.welt-zeche{--grund:#0E0D0B;--grund-rgb:14,13,11;--karte:#191714;--foto:#141210;--linie:#2E2A26;--linie2:#4A443D;--text:#F3EEE6;--text2:#CFC7BB;--leise:#A8A096;--akzent:#FF6B2C;--auf-akzent:#0E0D0B;--ok:#9BE38F;--hover:#FFC3A4;--schatten:0 2px 24px rgba(0,0,0,0.8)}
.welt-pruef{--grund:#101215;--grund-rgb:16,18,21;--karte:#181B20;--foto:#14171B;--linie:#2A2F37;--linie2:#434A55;--text:#EEF1F4;--text2:#C5CBD3;--leise:#97A0AC;--akzent:#67C7F4;--auf-akzent:#0B0D10;--ok:#8FE3B0;--hover:#A9E1FA;--schatten:0 2px 24px rgba(0,0,0,0.8)}
.welt-grau{--grund:#0F0F0F;--grund-rgb:15,15,15;--karte:#181818;--foto:#141414;--linie:#2B2B2B;--linie2:#474747;--text:#F2F2F0;--text2:#C9C9C6;--leise:#9B9B98;--akzent:#F2F2F0;--auf-akzent:#0F0F0F;--ok:#9BE38F;--hover:#FFFFFF;--schatten:0 2px 24px rgba(0,0,0,0.8)}
.welt-tag{--grund:#F2EDE4;--grund-rgb:242,237,228;--karte:#FFFFFF;--foto:#E9E2D6;--linie:#DDD4C6;--linie2:#BDB2A2;--text:#141210;--text2:#3D3731;--leise:#6B6258;--akzent:#5A41C0;--auf-akzent:#FFFFFF;--ok:#1F7A45;--hover:#3E2A9A;--schatten:0 2px 18px rgba(242,237,228,0.9)}
.kfx-canvas{position:fixed;top:0;left:0;width:100%;height:100%;display:block;z-index:0}
.kfx-wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 40px;box-sizing:border-box}
.kfx-nav{display:flex}
.kfx-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,0.45fr) minmax(0,0.85fr);gap:32px;align-items:end}
.kfx-h1{font-size:min(96px,6.1vw)}
.kfx-h2{font-size:52px}
.kfx-stop{min-height:900px;display:flex;align-items:center;position:relative}
.kfx-panel{padding:40px}
.kfx-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.kfx-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.kfx-reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.kfx-kunden{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1100px){.kfx-kunden{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.kfx-kunden{grid-template-columns:minmax(0,1fr)}}
.kfx-feat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
.kfx-phone{font-size:66px;white-space:nowrap}
.kfx-callbar{display:none}
.kfx-call{transition:border-color .2s ease}.kfx-call-icon{color:var(--akzent)}
.kfx-call:hover,.kfx-call:focus-visible{border-color:var(--akzent);animation:kfxPuls 1.3s ease-out infinite}
@keyframes kfxPuls{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--akzent) 55%,transparent)}75%{box-shadow:0 0 0 12px color-mix(in srgb,var(--akzent) 0%,transparent)}100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--akzent) 0%,transparent)}}
.kfx-star{transform-box:fill-box;transform-origin:center;animation:kfxStern 6s ease-in-out infinite}
@keyframes kfxStern{0%{fill:#67C7F4;transform:rotate(-10deg) scale(.88)}25%{fill:#4E7DD6;transform:rotate(8deg) scale(1.18)}50%{fill:#5A41C0;transform:rotate(-6deg) scale(.95)}75%{fill:#AB34CE;transform:rotate(10deg) scale(1.15)}100%{fill:#67C7F4;transform:rotate(-10deg) scale(.88)}}
.kfx-rate{animation:kfxRate 3.2s ease-out infinite}
@keyframes kfxRate{0%{box-shadow:0 0 0 0 rgba(90,65,192,0.5);border-color:#5A41C0}60%{box-shadow:0 0 0 9px rgba(90,65,192,0);border-color:var(--linie)}100%{box-shadow:0 0 0 0 rgba(90,65,192,0);border-color:var(--linie)}}
@media (prefers-reduced-motion: reduce){.kfx-call:hover,.kfx-call:focus-visible{animation:none}.kfx-star{animation:none;fill:#5A41C0}.kfx-rate{animation:none}}
@media (max-width:900px){.kfx-callbar{display:flex}.kfx-fuss{padding-bottom:84px}}
@media (max-width:1100px){.kfx-h1{font-size:72px}.kfx-hero{grid-template-columns:minmax(0,1.2fr) minmax(0,0.8fr)}.kfx-hero-gap{display:none}}
@media (max-width:900px){.kfx-nav{display:none}.kfx-hero{grid-template-columns:minmax(0,1fr)}.kfx-h1{font-size:52px}.kfx-h2{font-size:36px}.kfx-wrap{padding:0 18px}.kfx-panel{padding:26px}.kfx-stop{min-height:760px}.kfx-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.kfx-steps,.kfx-reviews{grid-template-columns:minmax(0,1fr)}.kfx-feat{grid-template-columns:minmax(0,1fr)}.kfx-phone{font-size:31px}.kfx-hide-sm{display:none}}
.kfx-wa{border-color:#25D366!important;animation:kfxWaPuls 2.4s ease-in infinite,kfxWaWackel 4s ease-in-out infinite}.kfx-wa:hover,.kfx-wa:focus-visible{background:rgba(37,211,102,0.14)}@keyframes kfxWaPuls{0%{box-shadow:inset 0 0 0 0 rgba(37,211,102,0)}35%{box-shadow:inset 0 0 0 1px rgba(37,211,102,0.6),inset 0 0 10px 2px rgba(37,211,102,0.45)}100%{box-shadow:inset 0 0 0 0 rgba(37,211,102,0),inset 0 0 26px 14px rgba(37,211,102,0)}}@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)}}@media (prefers-reduced-motion: reduce){.kfx-wa{animation:none}}
html{scroll-padding-top:96px}
.kfx-canvas{opacity:0;transition:opacity .9s ease}.kfx-canvas.is-ready{opacity:1}
.kfx-skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--akzent);color:var(--auf-akzent);padding:10px 16px;border-radius:6px;font-weight:700;text-decoration:none}.kfx-skip:focus{top:12px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}
.kfx-foot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
@media (max-width:900px){.kfx-foot{grid-template-columns:repeat(2,minmax(0,1fr))}}
[data-zeige-hell]{display:none}.welt-tag [data-zeige-hell]{display:contents}.welt-tag [data-zeige-dunkel]{display:none}

/* Handy: 3D-Stadt nach dem ersten Bildschirm dimmen (Klasse setzt mobil.js) */
@media (max-width:820px){.kfx-canvas{transition:opacity .6s ease}html.kfx-gedimmt .kfx-canvas.is-ready{opacity:.3}}
@media (max-width:820px) and (prefers-reduced-motion:reduce){.kfx-canvas{transition:none}}

/* Standbild der Stadt: steht sofort da und blendet weich in die echte 3D-Stadt über.
   Ohne WebGL oder im Datensparmodus bleibt es als ruhiger Hintergrund stehen. */
.kfx-poster{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--grund) url(/assets/kfx26/stadt-dunkel.webp) center/cover no-repeat;transition:opacity .9s ease}
.welt-tag .kfx-poster{background-image:url(/assets/kfx26/stadt-hell.webp)}
.kfx-canvas.is-ready~.kfx-poster{opacity:0}
@media (max-width:760px){.kfx-poster{background-image:url(/assets/kfx26/stadt-handy-dunkel.webp)}.welt-tag .kfx-poster{background-image:url(/assets/kfx26/stadt-handy-hell.webp)}}
@media (max-width:820px){html.kfx-gedimmt .kfx-poster{opacity:.3}html.kfx-gedimmt .kfx-canvas.is-ready~.kfx-poster{opacity:0}}
@media (prefers-reduced-motion:reduce){.kfx-poster{transition:none}}