/* KapFixIT Startseite: Flug durch Dortmund als fester Hintergrund, Auto-Fahrt-Knopf, Partner-Akzent PadIco.
   Der Flug bleibt in Hell und Dunkel gleich, nur die Karten folgen dem Schema. */
.kfx-flug{position:fixed;inset:0;z-index:0;pointer-events:none;background:#06070A}
.kfx-flug canvas,.kfx-flug-poster{position:absolute;inset:0;width:100%;height:100%;display:block}
.kfx-flug-poster{object-fit:cover;opacity:1;transition:opacity .9s ease}
.kfx-flug canvas{opacity:0;transition:opacity .9s ease}
.kfx-flug canvas.is-ready{opacity:1}
.kfx-flug canvas.is-ready~picture .kfx-flug-poster{opacity:0}
.kfx-abdunkeln{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,transparent 35%,rgba(6,7,10,.55) 100%),
    linear-gradient(180deg,rgba(6,7,10,.35) 0%,transparent 25%,transparent 60%,rgba(6,7,10,.7) 100%)}
.kfx-laden{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:180px;height:6px;border-radius:99px;
  background:rgba(0,0,0,.35);overflow:hidden;transition:opacity .4s}
.kfx-laden i{display:block;height:100%;width:0;background:linear-gradient(90deg,#61B2ED,#6151CF,#743BBE)}
@media (prefers-reduced-motion:reduce){.kfx-flug canvas,.kfx-laden{display:none}.kfx-flug-poster{opacity:1!important}}

/* Auto-Fahrt: Knopf unten mittig, auf dem Handy über der Schnellkontakt-Leiste. */
.kfx-auto{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:31;
  display:inline-flex;align-items:center;gap:10px;padding:8px 18px 8px 8px;border-radius:999px;cursor:pointer;overflow:hidden;
  font:700 14px/1 'Archivo',system-ui,sans-serif;color:#EEF1F4;border:1px solid rgba(255,255,255,.22);
  background:rgba(16,18,21,.62);-webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
  box-shadow:0 18px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.3);transition:opacity .4s,transform .4s}
.kfx-auto.kfx-weg{opacity:0;pointer-events:none;transform:translate(-50%,12px)}
.kfx-auto-icon{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(160deg,#61B2ED,#6151CF 55%,#743BBE)}
.kfx-auto-icon svg{width:12px;height:12px;fill:#fff}
.kfx-auto-balken{position:absolute;left:0;bottom:0;height:2px;width:0;background:linear-gradient(90deg,#61B2ED,#743BBE);transition:width .3s linear}
.kfx-auto:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* Handy: nur das runde Symbol links unten, gegenüber der Chat-Blase, damit keine Karte verdeckt wird. */
@media (max-width:900px){
  .kfx-auto{left:12px;transform:none;bottom:calc(84px + env(safe-area-inset-bottom,0px));padding:7px;gap:0}
  .kfx-auto.kfx-weg{transform:translateY(12px)}
  .kfx-auto #kfx-auto-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .kfx-auto-icon{width:34px;height:34px}}

/* Station 04: PadIco ist eine eigene Firma, die Karte trägt deren Akzentfarbe. */
[data-stop="4"] .kfx-panel{box-shadow:0 0 0 1px rgba(226,68,43,.55),0 0 42px rgba(226,68,43,.22)}

/* Hero lesbar machen: Überschrift kleiner, weicher Verlauf in der Grundfarbe hinter dem Text.
   var(--grund-rgb) sorgt dafür, dass es im hellen und im dunklen Schema passt. */
#hero-titel.kfx-h1{font-size:min(78px,5.3vw)}
@media (max-width:900px){#hero-titel.kfx-h1{font-size:46px}}
@media (max-width:420px){#hero-titel.kfx-h1{font-size:40px}}
[data-stop="0"]::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--grund-rgb),.82) 0%,rgba(var(--grund-rgb),.62) 34%,rgba(var(--grund-rgb),.18) 58%,rgba(var(--grund-rgb),0) 70%),
    linear-gradient(0deg,rgba(var(--grund-rgb),.55) 0%,rgba(var(--grund-rgb),0) 30%)}
@media (max-width:900px){[data-stop="0"]::before{background:linear-gradient(180deg,rgba(var(--grund-rgb),.25) 0%,rgba(var(--grund-rgb),.72) 35%,rgba(var(--grund-rgb),.72) 100%)}}
[data-stop="0"] p{text-shadow:0 1px 14px rgba(var(--grund-rgb),.9)}

/* Kunden: Überschrift mittig, darunter das Karussell. Hinterlegt wie der Hero, damit alles lesbar ist. */
#kunden{min-height:auto!important}
#kunden>.kfx-wrap{justify-content:center!important;gap:34px!important;padding-top:110px!important;padding-bottom:110px!important}
#kunden>.kfx-wrap>div:first-child{max-width:720px!important;margin:0 auto;text-align:center}
#kunden>.kfx-wrap>div:first-child>div:first-child{justify-content:center}
#kunden::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 45%,rgba(var(--grund-rgb),.72) 0%,rgba(var(--grund-rgb),.35) 60%,rgba(var(--grund-rgb),0) 100%)}
#kunden .kfx-h2{font-size:min(56px,4.4vw)}
@media (max-width:900px){#kunden .kfx-h2{font-size:34px}}

/* Kunden-Karussell im Coverflow-Stil. Ohne JavaScript bleibt das bisherige Raster. */
.kfx-karussell{position:relative;outline:none}
.kfx-karussell:focus-visible{outline:2px solid var(--akzent);outline-offset:8px;border-radius:24px}
.kfx-karussell .kfx-karussell-feld{display:block!important;position:relative;height:430px;perspective:1500px;transform-style:preserve-3d;touch-action:pan-y;user-select:none}
.kfx-karussell .kfx-karussell-feld>a{position:absolute!important;left:50%;top:50%;width:min(340px,78vw);box-sizing:border-box;
  transition:transform .75s cubic-bezier(.2,.75,.2,1),opacity .6s ease,box-shadow .5s ease!important;will-change:transform;backface-visibility:hidden;-webkit-user-drag:none}
.kfx-karussell .kfx-karussell-feld>a img{-webkit-user-drag:none;pointer-events:none}
.kfx-karussell .kfx-karussell-feld>a:not(.ist-vorn){filter:saturate(.75) brightness(.8)}
.kfx-karussell .kfx-karussell-feld>a.ist-vorn{box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(103,199,244,.55),0 0 60px rgba(103,199,244,.25)!important}
.kfx-karussell .kfx-karussell-feld>a[href*="padico"].ist-vorn{box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(226,68,43,.6),0 0 60px rgba(226,68,43,.28)!important}
.kfx-karussell .kfx-karussell-feld>a:hover{transform:none}
.kfx-karussell-steuer{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:18px}
.kfx-karussell-pfeil{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--text);
  border:1px solid var(--linie2);background:rgba(var(--grund-rgb),.6);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:border-color .2s,transform .2s}
.kfx-karussell-pfeil:hover{border-color:var(--akzent);transform:scale(1.06)}
.kfx-karussell-punkte{display:flex;gap:8px}
.kfx-karussell-punkte button{width:9px;height:9px;padding:0;border-radius:99px;border:0;cursor:pointer;background:var(--linie2);transition:width .35s ease,background .35s ease}
.kfx-karussell-punkte button[aria-current="true"]{width:28px;background:var(--akzent)}
.kfx-karussell-pfeil:focus-visible,.kfx-karussell-punkte button:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}
.kfx-nur-vorlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:760px){.kfx-karussell .kfx-karussell-feld{height:410px}}
.kfx-karussell-ruhig .kfx-karussell-feld>a{transition:opacity .3s ease!important}

/* Während der Flug läuft (html.kfx-faehrt): Liquid-Verzerrung aus, einfacher Glas-Blur bleibt.
   Die Verzerrung müsste sonst bei jedem neuen Hintergrundbild komplett neu berechnet werden. */
html.kfx-faehrt .lq-brechung,html.kfx-faehrt .lq-3{-webkit-backdrop-filter:blur(10px) saturate(180%)!important;backdrop-filter:blur(10px) saturate(180%)!important}