/* KapFixIT Startseite: Feinschliff nach Apple HIG (Stand 21.10.2026)
   Wird als letzte Stildatei geladen. Ändert nichts an Partnerkarten (partner.css) und nichts am hellen Schema (welt-tag).

   1. Glas nur für Bedienung: Inhaltskarten werden ruhiges, dickes Material ohne Glanzkante.
   2. Handy: Pause, Anrufleiste und KI sitzen in einer gemeinsamen Zeile, Kopf und Fuß bekommen einen Ausblendrand.
   3. Preis und Hinweis statt Pille: edle Preiszeile mit Akzentstrich (Klasse kfx-preis im HTML).
   4. Tippflächen: Karussellpunkte, Fußlinks und Menülinks auf Apple-Mindestgröße.
   5. Kleinstschrift angehoben, eigene Darstellung bei "Mehr Kontrast". */

/* ---------- 1. Inhaltskarten: dickes Material statt Liquid Glass ---------- */
#kfx-root:not(.welt-tag) :is(.kfx-panel,.kfx-reviews>figure,.kfx-steps>li,.kfx-kachel){
  background:
    radial-gradient(90% 70% at 100% 100%,rgba(97,81,207,.10),transparent 62%) padding-box,
    linear-gradient(rgba(14,16,22,.80),rgba(14,16,22,.80)) padding-box,
    linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05) 45%,rgba(255,255,255,.10)) border-box!important;
  -webkit-backdrop-filter:blur(26px) saturate(1.15)!important;
  backdrop-filter:blur(26px) saturate(1.15)!important;
  box-shadow:0 24px 60px rgba(0,0,0,.45)!important}
/* Station 04 behält ihren PadIco-Ton, nur leiser */
#kfx-root:not(.welt-tag) [data-stop="4"] .kfx-panel{
  background:
    radial-gradient(90% 70% at 100% 100%,rgba(226,68,43,.14),transparent 62%) padding-box,
    linear-gradient(rgba(14,16,22,.80),rgba(14,16,22,.80)) padding-box,
    linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05) 45%,rgba(226,68,43,.35)) border-box!important;
  box-shadow:0 24px 60px rgba(0,0,0,.45)!important}
/* Mausfolgender Glanz nur noch auf Bedienelementen, nicht auf Textkarten */
#kfx-root:not(.welt-tag) :is(.kfx-panel,.kfx-reviews>figure,.kfx-steps>li,.kfx-kachel)::after{display:none!important}

/* ---------- 2a. Ausblendrand oben und unten (Scroll-Kante wie bei iOS) ----------
   Hängt am Ebenen-Container (position:relative; z-index:1), in dem Kopfleiste (z 20), Anrufleiste (z 30)
   und Karten liegen. So liegt der Rand über den Karten, aber unter den Leisten. */
#kfx-root>div:has(>header)::before,#kfx-root>div:has(>header)::after{
  content:"";position:fixed;left:0;right:0;pointer-events:none;z-index:19;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#kfx-root>div:has(>header)::before{top:0;height:104px;
  background:linear-gradient(rgba(10,12,16,.88),rgba(10,12,16,.55) 55%,rgba(10,12,16,0));
  -webkit-mask:linear-gradient(#000 60%,transparent);mask:linear-gradient(#000 60%,transparent)}
#kfx-root>div:has(>header)::after{bottom:0;height:0}
@media (max-width:900px){
  #kfx-root>div:has(>header)::after{height:112px;
    background:linear-gradient(rgba(10,12,16,0),rgba(10,12,16,.6) 45%,rgba(10,12,16,.9));
    -webkit-mask:linear-gradient(transparent,#000 40%);mask:linear-gradient(transparent,#000 40%)}
}
#kfx-root.welt-tag>div:has(>header)::before{background:linear-gradient(rgba(245,242,236,.9),rgba(245,242,236,0))}
#kfx-root.welt-tag>div:has(>header)::after{background:linear-gradient(rgba(245,242,236,0),rgba(245,242,236,.9))}

/* ---------- 2b. Handy: eine einzige Bedienzeile unten ---------- */
@media (max-width:900px){
  #kfx-root .kfx-callbar,.kfx-callbar{left:68px!important;right:70px!important;
    bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;padding:5px!important;gap:6px!important}
  .kfx-callbar>a{min-height:46px!important;font-size:15px!important;gap:6px!important;padding:0 8px!important}
  .kfx-callbar>a svg{flex:none}
  .kfx-auto{left:12px!important;bottom:calc(16px + env(safe-area-inset-bottom,0px))!important}
  .kfxc:not([data-offen="true"]){right:12px!important;bottom:calc(14px + env(safe-area-inset-bottom,0px))!important}
  .kfxc-start{min-height:52px!important}
  .kfx-fuss{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important}
}
@media (max-width:359px){
  .kfx-callbar>a svg{display:none}
}

/* ---------- 3. Preiszeile statt Pille ---------- */
#kfx-root .kfx-preis{
  position:relative;display:inline-flex;align-items:baseline;gap:.28em;flex-wrap:wrap;
  font-family:'Archivo',system-ui,sans-serif!important;font-stretch:108%;
  font-size:15px!important;font-weight:500!important;letter-spacing:0;line-height:1.25;
  color:var(--text2)!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;
  padding:2px 0 2px 16px!important}
#kfx-root .kfx-preis::before{
  content:"";position:absolute;left:0;top:3px;bottom:3px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,#67C7F4,#6151CF 60%,#743BBE)}
#kfx-root .kfx-preis .kfx-nb{
  font-size:22px;font-weight:800;font-stretch:112%;letter-spacing:-.01em;color:var(--text)}
/* PadIco-Zeile im PadIco-Ton */
#kfx-root [data-stop="4"] .kfx-preis::before{
  background:linear-gradient(180deg,#FF8A6B,#E2442B)}
#kfx-root.welt-tag .kfx-preis .kfx-nb{color:var(--text)}

/* ---------- 4. Tippflächen ---------- */
/* Karussellpunkte: sichtbarer Punkt bleibt klein, die Trefferfläche wird 44 px hoch */
#kfx-root .kfx-karussell-punkte{gap:0!important}
#kfx-root .kfx-karussell-punkte button{box-sizing:content-box!important;padding:17px 10px!important;background-clip:content-box!important;
  border-radius:14.5px/21.5px!important}
#kfx-root .kfx-karussell-punkte button::after{top:17px!important;bottom:17px!important;left:10px!important;right:10px!important;border-radius:4.5px!important}
/* Der Schein des aktiven Punkts sitzt am sichtbaren Punkt, nicht an der großen Trefferfläche (Farbe weiter aus partner.css) */
#kfx-root .kfx-karussell .kfx-karussell-punkte button[aria-current="true"]{box-shadow:none!important;
  filter:drop-shadow(0 0 4px rgba(var(--kfx-vorn,103,199,244),.9)) drop-shadow(0 0 10px rgba(var(--kfx-vorn,103,199,244),.6))}
/* Fußlinks: auf Touchgeräten 44 px hoch */
@media (pointer:coarse){
  .kfx-foot a{line-height:1.4!important;padding:12px 0!important}
}
/* Menülinks am Desktop: mindestens 28 px hoch (macOS-Standard) */
.kfx-nav>a{display:inline-flex;align-items:center;min-height:32px;padding:0 4px}

/* ---------- 5. Lesbarkeit ---------- */
#kfx-root [style*="font-size: 9.5px"],#kfx-root [style*="font-size: 10.5px"],.kfxc-wer,.kfxc-start small{font-size:11px!important}
@media (prefers-contrast:more){
  #kfx-root :is(.kfx-panel,.kfx-reviews>figure,.kfx-steps>li,.kfx-kachel){
    background:#0E1016!important;border:1px solid rgba(255,255,255,.45)!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  #kfx-root{--text2:#E6EAF0;--leise:#C9D0DA}
  #kfx-root.welt-tag :is(.kfx-panel,.kfx-reviews>figure,.kfx-steps>li,.kfx-kachel){background:#FFFFFF!important;border-color:rgba(0,0,0,.5)!important}
}

/* ---------- 6. Unterseiten (Leistungen, Ratgeber, Rechtliches, Papuga, Academy), ab 21.10.2026 ----------
   Dort liegt die Kopfleiste direkt in #kfx-root (Startseite: in einem eigenen Ebenen-Container, siehe 2a).
   Der Ausblendrand hängt deshalb an #kfx-root: über den Karten, unter Kopfleiste (z 20) und Anrufleiste (z 30). */
#kfx-root:has(>header)::before,#kfx-root:has(>header)::after{
  content:"";position:fixed;left:0;right:0;pointer-events:none;z-index:19;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#kfx-root:has(>header)::before{top:0;height:104px;
  background:linear-gradient(rgba(10,12,16,.88),rgba(10,12,16,.55) 55%,rgba(10,12,16,0));
  -webkit-mask:linear-gradient(#000 60%,transparent);mask:linear-gradient(#000 60%,transparent)}
#kfx-root:has(>header)::after{bottom:0;height:0}
@media (max-width:900px){
  #kfx-root:has(>header)::after{height:112px;
    background:linear-gradient(rgba(10,12,16,0),rgba(10,12,16,.6) 45%,rgba(10,12,16,.9));
    -webkit-mask:linear-gradient(transparent,#000 40%);mask:linear-gradient(transparent,#000 40%)}
}
#kfx-root.welt-tag:has(>header)::before{background:linear-gradient(rgba(245,242,236,.9),rgba(245,242,236,0))}
#kfx-root.welt-tag:has(>header)::after{background:linear-gradient(rgba(245,242,236,0),rgba(245,242,236,.9))}
/* Handy: Anrufleiste und KI-Knopf in einer Zeile (auf Unterseiten gibt es keinen Pause-Knopf) */
@media (max-width:900px){
  #kfx-root :is(.u-callbar,.p-callbar){left:12px!important;right:70px!important;
    bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;padding:5px!important;gap:6px!important}
  #kfx-root :is(.u-callbar,.p-callbar)>a{min-height:46px!important;font-size:15px!important;padding:0 8px!important}
  #kfx-root :is(.u-fuss,.p-fuss){padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important}
}
/* Tippflächen: Fußlinks auf Touchgeräten 44 px hoch, Menülinks am Desktop mindestens 32 px */
@media (pointer:coarse){
  #kfx-root :is(.u-foot,.p-foot) a{line-height:1.4!important;padding:12px 0!important}
}
#kfx-root nav:is(.u-nav,.p-nav)>a{display:inline-flex;align-items:center;min-height:32px;padding:0 4px}
/* Kopfleiste bleibt beim Scrollen oben stehen: overflow:hidden am Rahmen hat das verhindert,
   clip schneidet genauso ab, ohne das Mitlaufen zu blockieren */
#kfx-root:has(>header){overflow:clip!important}
/* Brotkrumen-Links: Trefferfläche mindestens 28 px hoch */
#kfx-root nav[aria-label="Brotkrumen"] a{display:inline-flex;align-items:center;min-height:28px}
/* Papuga-Kontaktwege (WhatsApp, E-Mail): Trefferfläche 44 px hoch */
#kfx-root .lt-weg{display:inline-flex;align-items:center;min-height:44px}