/* ki-spezial.systems — Premium-Feinschliff fuer alle p24-Seiten (09.10.2026)
 *
 * Liegt NACH ki-p24.css und p24-system.css. Aendert keine Farben, Raster
 * oder Schriften — nur Uebergaenge, Druck-Rueckmeldung, Fokus, Einstiegs-
 * choreografie und Lesedetails. Alles Bewegte ist unter
 * prefers-reduced-motion abgeschaltet; ohne JavaScript bleibt jeder Inhalt
 * sichtbar (die Einblendung in Rastern setzt erst, wenn ki-premium.js
 * <html class="prem"> gesetzt hat, und startet immer vom sichtbaren Zustand).
 */

:root{
    --e-out:cubic-bezier(.22,1,.36,1);      /* kraeftiges ease-out: sofortige Reaktion, weiches Ende */
    --e-io:cubic-bezier(.77,0,.175,1);      /* fuer Bewegung auf der Flaeche */
    --t-tap:140ms;                           /* Druck */
    --t-ui:200ms;                            /* Hover, Farbe, Rahmen */
    --t-card:260ms;                          /* Karten heben sich */
}

/* ---------- Druck-Rueckmeldung auf allem, was wie ein Knopf aussieht ----------
   scale als eigene Eigenschaft, damit skewX/translateY der Grundregeln
   unberuehrt bleiben. */
.hdr .cta,.lead .call,.lead .ghost,.kblock .kcta a.kb1,.cta-band .box a.main,
.cta-band .box a.sec2,.fragebar,.sprungleiste a,.fm button,.fm .btn,.btn,button.cta{
    transition:background-color var(--t-ui) ease,border-color var(--t-ui) ease,color var(--t-ui) ease,
               scale var(--t-tap) var(--e-out),box-shadow var(--t-ui) ease}
.hdr .cta:active,.lead .call:active,.lead .ghost:active,.kblock .kcta a.kb1:active,
.cta-band .box a.main:active,.cta-band .box a.sec2:active,.fragebar:active,.fm button:active,.btn:active{
    scale:.975}

/* ---------- Farbwechsel nie hart: Textverweise ---------- */
.hdr .it,.util a,.fl a,.fline a,.hcol a .t,.hcol .ar,.cell h3,.faq-list summary,.faq-list summary .tg,
.kblock .kcta a.kb2,.glossary-link,.lead .crumb a,.sintro a,.cta-band p a,.fragebar .ar,a.cell .go{
    transition:color var(--t-ui) ease,border-color var(--t-ui) ease,translate var(--t-ui) var(--e-out)}

/* ---------- Karten: heben sich eine Spur, Symbolflaeche fuellt sich ---------- */
.cell{transition:border-color var(--t-card) var(--e-out),box-shadow var(--t-card) var(--e-out),
      transform var(--t-card) var(--e-out),background-color var(--t-card) ease}
.icb{transition:background-color var(--t-card) ease,border-color var(--t-card) ease}
@media (hover:hover) and (pointer:fine){
    a.cell:hover{transform:translateY(-3px);box-shadow:0 14px 32px -12px rgba(10,15,20,.18)}
    .dk a.cell:hover{transform:none;box-shadow:none}
    a.cell:hover .icb{background:rgba(0,177,235,.22);border-color:var(--cyan)}
    a.cell:hover .go,.hcol a:hover .ar,.fragebar:hover .ar{translate:4px 0}
    .hdr .cta:hover,.lead .call:hover,.cta-band .box a.main:hover{box-shadow:0 10px 24px -10px rgba(0,177,235,.55)}
}
/* Auf dem Telefon kein Hover, aber ein Tipp-Echo */
@media (hover:none){
    a.cell,.hcol a,.fl a,.faq-list summary{transition:background-color 120ms ease}
    a.cell:active{background:rgba(0,177,235,.06)}
    .hcol a:active,.faq-list summary:active{background:rgba(0,177,235,.08)}
    .dk a.cell:active,.dk .hcol a:active{background:rgba(255,255,255,.05)}
}

/* ---------- Fokus: sichtbar und mit Kontrast auf Hell wie auf Dunkel ----------
   Das Markencyan haelt auf Weiss keine 3:1; --acc ist je Flaeche gesetzt
   (#005f83 auf Hell, #6cc4e6 auf Dunkel). */
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.hdr .cta:focus-visible,.lead .call:focus-visible,.cta-band .box a.main:focus-visible,.sprunglink:focus-visible{
    outline-color:#fff;outline-offset:2px}

/* ---------- FAQ: Antwort gleitet ein, Pluszeichen dreht weich ---------- */
.faq-list summary{transition:color var(--t-ui) ease,background-color var(--t-ui) ease}
@media (hover:hover){.faq-list details:not([open]) summary:hover{background:var(--panel)}}
.faq-list summary .tg{transition:transform var(--t-ui) var(--e-out),color var(--t-ui) ease}
.faq-list details[open] .a{animation:prem-faq 280ms var(--e-out) both}
@keyframes prem-faq{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}

/* ---------- Lesedetails ---------- */
.lead h1,.kblock h2,.cell h3,.pkette h3{text-wrap:balance}
.dk,.hero,.cta-band,footer.dk{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
section[id],div[id].sec{scroll-margin-top:24px}
::selection{background:rgba(0,177,235,.28);color:inherit}
.dk ::selection{background:rgba(0,177,235,.4);color:#fff}

/* ---------- Einstieg: der Hero baut sich in einer Bewegung auf ----------
   Nur translate/opacity, eigene Eigenschaft (kollidiert nicht mit skewX).
   Alles in <1 s abgeschlossen; Hintergrundbild und Konsole bleiben als
   LCP-Kandidaten unbewegt. */
@keyframes prem-in{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
.hero .lead>*{animation:prem-in 640ms var(--e-out) both}
.hero .lead>:nth-child(1){animation-delay:0ms}
.hero .lead>:nth-child(2){animation-delay:60ms}
.hero .lead>:nth-child(3){animation-delay:120ms}
.hero .lead>:nth-child(4){animation-delay:200ms}
.hero .lead>:nth-child(5){animation-delay:280ms}
.hero .lead>:nth-child(6){animation-delay:340ms}
.hero .lead>:nth-child(n+7){animation-delay:400ms}
.hero .hcol{animation:prem-in 640ms var(--e-out) both;animation-delay:260ms}
.hero .hcol+.hcol{animation-delay:340ms}
.hero .boardwrap,.hero .scenecard{animation:prem-in 720ms var(--e-out) both;animation-delay:380ms}
.hero .modelband,.hero .term{animation:prem-in 520ms var(--e-out) both;animation-delay:520ms}

/* ---------- Raster: Zellen folgen einander, sobald sie ins Bild kommen ----------
   Standard ist sichtbar; ki-premium.js setzt .prem-i und beim Eintritt .in,
   erst dann laeuft die Einblendung vom sichtbaren Rand her. */
html.prem .prem-i.in{animation:prem-in 560ms var(--e-out) both;animation-delay:calc(var(--i,0) * 45ms)}

/* ---------- Lichtstreifen der Fragenleiste ohne Layoutarbeit ----------
   Die Grundregel bewegt `left` (zaehlt als Layout-Shift, CLS 0,05); hier
   dieselbe Bahn ueber transform. 40 % Breite, Weg von -45 % bis 110 % der
   Leiste = 387,5 % der eigenen Breite. */
.fragebar::after{left:-45%;animation:prem-streif 5s ease-in-out infinite;will-change:transform}
@keyframes prem-streif{60%,100%{transform:translateX(387.5%)}}

/* ---------- Cookie-Hinweis: Markenblau nur als Flaeche ----------
   Das Bauteil bringt #00B1EB als Linkfarbe und Weiss auf Cyan mit (2,5:1).
   Gleiche Regel wie ueberall: Text auf Hell --acc, Beschriftung auf Blau #04222d. */
.cookie-banner .cookie-banner-main p a{color:var(--acc,#005f83)}
.cookie-banner .cookie-btn.cookie-btn-accept{color:#04222d}

/* ---------- Zusammengefuehrt aus der on-premise-Politur (10.10.2026) ----------
   Nur, was auf jeder Seite gleich gilt; Seitenbesonderes (Vergleichsband der
   letzten Spalte, Spezifikationsblatt, Summenzeile, Prozessschiene) bleibt
   im <style> der jeweiligen Seite. */
/* Konsole: Boden fuer die Hoehe; ki-premium.js misst die laengste Szene und
   hebt min-height exakt an, sonst springt die Seite beim Streamen (CLS 0,13). */
.kichat .kb{min-height:224px}
/* Wischhinweis aus p24-mobil.js: #75787b bei opacity .55 sind 2,3:1 — muted deckend haelt 4,7:1 */
.scrollhinweis{color:var(--muted);opacity:1}
/* Vergleichstabellen: Zeichen in fester Spalte, Zeile hebt sich unter dem Zeiger */
.vs-table .m-ok,.vs-table .m-part,.vs-table .m-no{display:inline-block;width:1.5em;margin-right:2px}
.vs-table tbody tr td{transition:background-color 150ms ease}
@media (hover:hover) and (pointer:fine){
    .vs-table tbody tr:hover td{background:rgba(0,177,235,.045)}
    a.cell:hover h3{color:var(--acc)}
}
/* Kostenboxen: Tabellenziffern, damit das Hochzaehlen (ki-premium.js) nicht wackelt */
.kibox .kr b{font-variant-numeric:tabular-nums}
@media print{html.prem .prem-i.in,.hero .lead>*,.hero .hcol{animation:none}}

/* ---------- Kopfzeile unter 900 px schon vor dem Menueskript in Endform ----------
   menu-ki.js bringt seine Mobilregeln als <style> mit und laeuft deferred;
   bis dahin stand die Desktop-Leiste umgebrochen bei 130 px, danach 69 px —
   der Seiteninhalt sprang um 61 px nach oben (CLS 0,065 bei 390 px). Dieselben
   Masse wie im 899-px-Block des Skripts; die statische Leiste ist dort ohnehin
   ausgeblendet, sobald das Skript die Klappleiste gebaut hat. */
@media (max-width:1320px) and (min-width:900px){
    /* Tablet-Band: die Desktop-Leiste bleibt, aber niedriger (76 px), ohne Telefon;
       vorher sprang der Inhalt hier um 33 px (CLS 0,52 bis 0,56 auf jeder Seite). */
    .hdr .hin{flex-wrap:nowrap;height:76px;padding-top:0;padding-bottom:0;align-items:center}
    .hdr nav:not(.mnav){display:flex;align-items:center;height:76px;flex:0 1 auto;min-width:0;order:0}
    .hdr nav:not(.mnav) .it{font-size:15px;padding:0 11px;height:76px}
    .hdr .logo img{height:44px;width:auto}
    .hdr .cta{font-size:14.5px;padding:12px 16px}
    .hdr .tel{display:none}
}
@media (max-width:1100px) and (min-width:900px){
    /* wie der 1100-px-Block des Skripts: Leiste hinter dem KI-Check, waagerecht wischbar */
    .hdr nav:not(.mnav){order:3;width:100%;height:64px;overflow-x:auto}
    .hdr nav:not(.mnav) .it{height:64px}
    .hdr .logo{margin-right:14px}
}
@media (max-width:1080px) and (min-width:900px){
    .hdr nav:not(.mnav) .it{font-size:14px;padding:0 8px}
    .hdr .logo img{height:38px}
    .hdr .cta{font-size:13.5px;padding:11px 13px}
}
@media (max-width:899px){
    .hdr .hin{flex-wrap:nowrap;height:68px;padding:0 20px;align-items:center;gap:12px}
    .hdr .logo{margin-right:auto;display:flex;align-items:center;min-height:44px}
    .hdr .logo img{height:34px;width:auto}
    .hdr nav:not(.mnav),.hdr .sp,.hdr .tel,.hdr .cta{display:none}
}

/* ---------- Ruhe ---------- */
@media (prefers-reduced-motion:reduce){
    .hero .lead>*,.hero .hcol,.hero .boardwrap,.hero .scenecard,.hero .modelband,.hero .term,
    html.prem .prem-i.in,.faq-list details[open] .a,.fragebar::after{animation:none}
    .cell,.icb,.faq-list summary .tg{transition-duration:0s}
    a.cell:hover{transform:none}
    a.cell:hover .go,.hcol a:hover .ar,.fragebar:hover .ar{translate:0}
    .hdr .cta:active,.lead .call:active,.lead .ghost:active,.kblock .kcta a.kb1:active,
    .cta-band .box a.main:active,.cta-band .box a.sec2:active,.fragebar:active,.fm button:active,.btn:active{scale:1}
}