/* ============================================================
   KlimaCraft – Software-Bilder zum Anklicken, Fenster „Probier das
   live aus“, kleine Live-Links (Runde 6, 01.11.2026). Gehört zu
   assets/js/kd-bildklick.js. Farben und Schrift aus Stil 2026.
   ============================================================ */

/* ---------- Bilder: wirken klickbar und sind es ---------- */
.kdb-an{cursor:pointer}
.kdb-an .a-pkt{transition:background .15s,color .15s,transform .15s}
.kdb-an .a-pkt:not(.an):hover{background:#f1f5f9;color:#0f172a}
.kdb-an :is(.kd-nav>span,.kd-pill,.kd-btn,.kd-auf,.kd-zl,.kd-mz,.kd-klick,.p-blk,.kd-zp,.kd-chip,.kf-kette>span){cursor:pointer}
.kdb-an .kd-nav>span.kd-an{cursor:pointer}
.kdb-an .kdb-druck{transform:scale(.96);transition:transform .12s}
.kdb-an.e-handy .h-glas{transition:transform .2s}
.kdb-an.e-handy:hover .h-glas{transform:translateY(-2px)}

.kdb-ebene{position:absolute;inset:0;z-index:30;pointer-events:none;overflow:hidden;border-radius:inherit}
.kdb-welle{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:rgba(37,99,235,.32);pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .kdb-welle{animation:kdbWelle .6s ease-out forwards}
  .kc-app.kdb-rein{animation:kdbRein .35s ease}
}
@keyframes kdbWelle{to{transform:scale(4.2);opacity:0}}
@keyframes kdbRein{from{opacity:.25}to{opacity:1}}

/* Platzhalter: diese Ansicht gibt es nur in der Live-Demo */
.kdb-dim-seite .a-inhalt,.kdb-dim-reiter .kd-nav~*{opacity:.22;transition:opacity .25s}
.kdb-laedt .e-skala{opacity:.55;transition:opacity .2s}
.kdb-platz{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%) scale(.97);width:max-content;max-width:min(330px,86%);
  display:grid;gap:6px;justify-items:center;text-align:center;padding:18px 22px;border-radius:16px;background:#fff;border:1px solid var(--e-line,#E3E8EF);
  box-shadow:0 24px 50px -24px rgba(11,18,32,.45);font-family:'Noto Sans KC','Noto Sans',system-ui,sans-serif;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.kdb-platz.zeigt{opacity:1;transform:translate(-50%,-50%);pointer-events:auto}
.kdb-platz b{font:600 17px/1.25 var(--kc-kopf,'Geist',system-ui,sans-serif);color:var(--e-ink,#0B1220)}
.kdb-platz span{font-size:13.5px;line-height:1.45;color:var(--e-slate,#5B6573)}
.kdb-livelink{display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:14px;color:var(--e-akz,#2563EB);text-decoration:none;margin-top:4px}
.kdb-livelink:hover{color:var(--e-akz-d,#1D4ED8);text-decoration:underline;text-underline-offset:3px}

/* kleiner Hinweis unten im Bild */
.kdb-hinweis{position:absolute;left:50%;bottom:14px;transform:translate(-50%,-50%) translateY(8px);max-width:calc(100% - 24px);width:max-content;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 8px;padding:9px 14px;border-radius:12px;background:#0B1220;color:#fff;
  font:500 13px/1.35 'Noto Sans KC','Noto Sans',system-ui,sans-serif;box-shadow:0 18px 40px -18px rgba(11,18,32,.7);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.kdb-hinweis.zeigt{opacity:1;transform:translate(-50%,-50%);pointer-events:auto}
.kdb-hinweis .kdb-livelink{color:#93C5FD;margin:0;font-size:13px}

/* Tastatur: Knopf hinter jedem Bild, nur mit Fokus sichtbar */
.kdb-tast{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.kdb-tast:focus-visible{width:auto;height:auto;margin:0;clip:auto;overflow:visible;left:50%;bottom:12px;transform:translateX(-50%);z-index:40;
  padding:10px 16px;border-radius:10px;background:var(--e-knopf,#2563EB);color:#fff;font:600 14px/1.2 system-ui,sans-serif;outline:3px solid #BFDBFE;outline-offset:2px}

/* ---------- Fenster „Probier das live aus“ ---------- */
.kdb-schleier{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(11,18,32,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s;overscroll-behavior:contain}
.kdb-schleier[hidden]{display:none}
.kdb-schleier.zeigt{opacity:1}
.kdb-fenster{position:relative;width:100%;max-width:470px;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow:auto;
  padding:30px 30px 20px;border-radius:20px;background:#fff;box-shadow:0 40px 90px -30px rgba(11,18,32,.65);
  font-family:'Noto Sans KC','Noto Sans',system-ui,sans-serif;color:var(--e-ink,#0B1220);transform:translateY(12px) scale(.985);transition:transform .22s}
.kdb-schleier.zeigt .kdb-fenster{transform:none}
.kdb-zu{position:absolute;top:12px;right:12px;width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:#64748B;cursor:pointer}
.kdb-zu:hover{background:#F1F5F9;color:#0B1220}
.kdb-zu svg{width:18px;height:18px}
.kdb-marke{display:inline-flex;align-items:flex-start;gap:8px;max-width:calc(100% - 30px);padding:6px 11px;border-radius:12px;background:var(--e-akz-hell,#EFF6FF);
  color:#1E3A8A;font-size:12.5px;line-height:1.4;font-weight:500}
.kdb-marke i{flex:none;width:7px;height:7px;margin-top:5px;border-radius:50%;background:var(--e-akz,#2563EB)}
.kdb-fenster h2{margin:16px 0 8px;font:700 27px/1.15 var(--kc-kopf,'Geist',system-ui,sans-serif);letter-spacing:-.02em;color:var(--e-ink,#0B1220)}
.kdb-fenster p{margin:0;font-size:15.5px;line-height:1.55;color:var(--e-ink2,#334155)}
.kdb-fakten{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--e-slate,#5B6573)}
.kdb-fakten li{display:inline-flex;align-items:center;gap:6px}
.kdb-fakten li::before{content:"✓";font-size:12px;font-weight:700;color:#059669}
.kdb-knoepfe{display:grid;gap:12px;margin-top:22px}
.kdb-knoepfe .e-btn{width:100%;justify-content:center}
.kdb-termin{justify-self:center;font-size:15px;font-weight:600;color:var(--e-ink2,#334155);text-decoration:none;border-bottom:1px solid #CBD5E1;padding:2px 0}
.kdb-termin:hover{color:var(--e-ink,#0B1220);border-bottom-color:currentColor}
.kdb-weiter{display:block;margin:16px auto 0;padding:8px 12px;border:0;background:transparent;font:500 13.5px/1.2 inherit;font-family:inherit;color:#64748B;cursor:pointer;border-radius:8px}
.kdb-weiter:hover{color:#0B1220;background:#F8FAFC}
@media (max-width:600px){
  .kdb-schleier{align-items:flex-end;padding:0}
  .kdb-fenster{max-width:none;border-radius:20px 20px 0 0;padding:24px 20px calc(16px + env(safe-area-inset-bottom));max-height:88vh;max-height:88dvh}
  .kdb-fenster h2{font-size:23px;margin-top:14px}
  .kdb-fenster p{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.kdb-schleier,.kdb-fenster,.kdb-platz,.kdb-hinweis{transition:none}}

/* ---------- „Live ausprobieren“ klein neben dem Termin (Wertleiter) ---------- */
.kdb-kopf-live{font-size:14px;font-weight:600;color:var(--e-ink2,#334155);text-decoration:none;white-space:nowrap;padding:8px 4px;border-bottom:1px solid transparent}
.kdb-kopf-live:hover{color:var(--e-akz,#2563EB)}
@media (max-width:1199px){.kdb-kopf-live{display:none}}
body .mobilenav a.kdb-menue-live{align-self:center;font-size:15px;font-weight:600;color:var(--e-akz,#2563EB);padding:10px 0 4px;text-decoration:none;border-bottom:0}
.kdb-live-zeile{margin-top:16px;font-size:14.5px;color:var(--e-slate,#5B6573);text-align:center}
.kdb-live-zeile a{color:var(--e-ink2,#334155);font-weight:600;text-decoration:none;border-bottom:1px solid #CBD5E1;padding-bottom:1px}
.kdb-live-zeile a:hover{color:var(--e-akz,#2563EB);border-bottom-color:currentColor}
.final .kdb-live-zeile{margin-top:18px;color:rgba(226,232,240,.8)}
.final .kdb-live-zeile a{color:#fff;border-bottom-color:rgba(255,255,255,.4)}
.final .kdb-live-zeile a:hover{color:#BFDBFE;border-bottom-color:currentColor}