/* OKNXT Unterseite Kalender (Präfix kl-). Baut auf site.css, abschnitte.css und agenten-seite.css auf (Abstände 150 px wie überall).
   Software-Ansichten hell, OKNXT-Farben. Alle Namen und Termine erfunden. --w und --dreh sind seitenweit Winkel, hier nicht verwenden. */

.kl-seite{--h-grund:#F2F4F9;--h-linie:#E2E7F1;--h-text:#161B2E;--h-text-2:#667089;--h-text-3:#98A1B5;
  --kl-blau:#2F6BFF;--kl-cyan:#00A8C0;--kl-gruen:#16A36A;--kl-bern:#F59E0B;--kl-rot:#E5484D;--kl-pink:#D6338A;--kl-violett:#7B3BFF;
  --c-buero:#2F6BFF;--c-team:#00A8C0;--c-notar:#D6338A;--c-besicht:#16A36A;--c-privat:#8A93A8;--c-kollege:#7B3BFF;--c-neu:#F59E0B}
.kl-hell{color:var(--h-text)}

/* ---------- Wochenansicht ---------- */
.kl-woche{--zeile:34px;display:grid;gap:0;border-radius:12px;background:var(--kl-f1,#fff);border:1px solid var(--h-linie);overflow:hidden}
.kl-kopfzeile{display:grid;grid-template-columns:44px repeat(5,minmax(0,1fr));border-bottom:1px solid var(--h-linie)}
.kl-kw{display:grid;place-items:center;font:600 .5rem/1 "JetBrains Mono",monospace;color:var(--h-text-3)}
.kl-kopfzeile>span:not(.kl-kw){display:grid;justify-items:center;gap:2px;padding:7px 0;border-left:1px solid var(--kl-raster,#EEF1F6)}
.kl-kopfzeile small{font-size:.54rem;color:var(--h-text-2)}
.kl-kopfzeile b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:.72rem}
.kl-kopfzeile .heute b{color:#fff;background:linear-gradient(140deg,var(--cyan),var(--blau))}
.kl-kopfzeile .heute{background:var(--kl-heute,#F5F8FF)}
.kl-raster{position:relative;display:grid;grid-template-columns:44px 1fr}
.kl-stunden{position:relative;height:calc(var(--zeile) * 11)}
.kl-stunden span{position:absolute;right:6px;top:calc(var(--h) * var(--zeile) - 5px);font-size:.5rem;color:var(--h-text-3)}
.kl-flaeche{position:relative;height:calc(var(--zeile) * 11);background:
  repeating-linear-gradient(180deg,var(--kl-raster,#EEF1F6) 0 1px,transparent 1px var(--zeile)),
  linear-gradient(90deg,transparent calc(80% - .5px),var(--kl-heute,#F5F8FF) calc(80% - .5px));
  background-size:100% 100%,100% 100%}
.kl-flaeche::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--kl-raster,#EEF1F6) 0 1px,transparent 1px 20%)}
.kl-ev{position:absolute;z-index:1;left:calc(var(--tag) * 20% + 3px);width:calc(20% - 6px);top:calc(var(--von) * var(--zeile) + 1px);height:calc(var(--dauer) * var(--zeile) - 3px);
  display:grid;align-content:start;gap:1px;padding:4px 6px;border-radius:6px;overflow:hidden;color:#fff;background:var(--c);box-shadow:0 4px 10px -6px color-mix(in srgb,var(--c) 80%,#000)}
.kl-ev b{font-size:.56rem;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kl-ev small{font-size:.48rem;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kl-ev-buero{--c:var(--c-buero)}.kl-ev-team{--c:var(--c-team)}.kl-ev-notar{--c:var(--c-notar)}.kl-ev-besicht{--c:var(--c-besicht)}
.kl-ev-privat{--c:var(--c-privat)}.kl-ev-kollege{--c:var(--c-kollege);background:repeating-linear-gradient(135deg,var(--c) 0 6px,color-mix(in srgb,var(--c) 85%,#fff) 6px 12px)}.kl-ev-neu{--c:var(--c-neu)}
.kl-jetzt{position:absolute;z-index:2;left:0;right:0;top:calc(var(--von) * var(--zeile));height:0;border-top:1.5px dashed var(--kl-rot)}
.kl-jetzt::before{content:"";position:absolute;left:-4px;top:-4.5px;width:7px;height:7px;border-radius:50%;background:var(--kl-rot)}
/* Termine erscheinen: fallen in ihr Feld */
.kl-ev{transition:opacity .45s ease,transform .6s cubic-bezier(.34,1.4,.5,1)}
.kl-warten .kl-ev,.kl-ev.aus{opacity:0;transform:translateY(-14px) scale(.9)}
.kl-ev.neu-da{animation:kl-neu 1.2s ease}
@keyframes kl-neu{30%{box-shadow:0 0 0 3px rgba(245,158,11,.35),0 10px 20px -8px rgba(245,158,11,.7)}}

/* ---------- Bausteine ---------- */
.kl-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.kl-leiste>b{font-size:.84rem}
.kl-heute-knopf{padding:5px 10px;border-radius:8px;border:1px solid var(--h-linie);background:var(--kl-f1,#fff);font-size:.66rem;font-weight:600}
.kl-ansichten{display:inline-flex;gap:2px;margin-left:auto;padding:2px;border-radius:8px;background:var(--kl-grau,#E6EAF2)}
.kl-ansichten em{padding:4px 8px;border-radius:6px;font-size:.6rem;font-style:normal;color:var(--h-text-2)}
.kl-ansichten em.an{background:var(--kl-f3,#fff);color:var(--h-text);font-weight:600}
.kl-schalter{position:relative;flex:none;width:30px;height:17px;border-radius:999px;background:var(--kl-schalter-aus,#D5DBE7);transition:background .3s}
.kl-schalter i{position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.an>.kl-schalter,.kl-schalter.an{background:var(--kl-gruen)}
.an>.kl-schalter i,.kl-schalter.an i{transform:translateX(13px)}
.kl-zeiger{position:absolute;z-index:9;left:0;top:0;width:26px;height:26px;pointer-events:none;opacity:0;transform:translate(var(--zx,60%),var(--zy,60%));transition:transform .95s cubic-bezier(.65,0,.35,1),opacity .4s}
.kl-zeiger.da{opacity:1}
.kl-zeiger svg{width:26px;height:26px;fill:#161B2E;stroke:#fff;stroke-width:1.6;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}
.kl-zeiger i{position:absolute;left:3px;top:2px;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:2px solid #2F6BFF;opacity:0}
.kl-zeiger.klick i{animation:kl-ring .6s ease-out}
.kl-zeiger.klick svg{animation:kl-druck .3s ease}
@keyframes kl-ring{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.4)}}
@keyframes kl-druck{50%{transform:scale(.82)}}
.kl-anbieter{display:inline-flex;align-items:center;gap:9px;padding:8px 12px 8px 8px;border-radius:12px;background:var(--kl-f1,#fff);border:1px solid var(--h-linie);color:var(--h-text)}
.kl-anbieter>i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:#fff}
.kl-anbieter>i svg{width:16px;height:16px}
.kl-anb-g>i{background:conic-gradient(from 45deg,#4285F4 0 25%,#34A853 0 50%,#FBBC05 0 75%,#EA4335 0)}
.kl-anb-m>i{background:linear-gradient(140deg,#0A64D6,#28A8EA)}
.kl-anbieter b{display:block;font-size:.74rem}
.kl-anbieter small{display:flex;align-items:center;gap:5px;font-size:.6rem;color:var(--kl-gruen-t,#11804F)}
.kl-anbieter small::before{content:"";width:6px;height:6px;border-radius:50%;background:#16A36A}

/* ---------- K1 · Einstieg ---------- */
.kl-start{position:relative;padding:clamp(28px,5vh,64px) var(--seitenrand) 0}
.kl-start-innen{max-width:var(--ab-breite);margin:0 auto;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(24px,4vw,56px);align-items:center;min-height:calc(100svh - var(--oben-hoehe,100px) - 40px)}
.kl-start .h1{max-width:12ch;font-size:clamp(2.3rem,4.2vw,4rem)}
.kl-start .unterzeile{max-width:42ch}
.kl-fakten{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.kl-fakten li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-size:.84rem;color:var(--text-2);border:1px solid var(--linie-stark);background:color-mix(in srgb,var(--panel) 80%,transparent)}
.kl-fakten li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--verlauf);box-shadow:0 0 8px rgba(47,107,255,.8)}
.kl-start .einstieg-aktionen{display:flex;margin-top:30px}
.kl-buehne{position:relative;perspective:1800px;padding:56px 0 64px}
.kl-buehne::before{content:"";position:absolute;inset:-4% -8%;background:radial-gradient(50% 50% at 55% 50%,rgba(47,107,255,.4),transparent 70%),radial-gradient(35% 40% at 85% 80%,rgba(155,5,254,.28),transparent 70%);filter:blur(20px);pointer-events:none;opacity:0;transition:opacity 1.6s ease .2s}
.kl-an.kl-buehne::before{opacity:1}
.kl-schirm{--rx:18deg;--ry:-18deg;position:relative;display:grid;gap:10px;padding:12px;border-radius:20px;background:var(--h-grund);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.9),0 0 0 1px rgba(143,164,255,.25),0 0 90px -30px rgba(92,203,255,.6);
  transform:rotateX(var(--rx)) rotateY(var(--ry));opacity:0;translate:0 60px;transition:transform 1.1s cubic-bezier(.22,1,.36,1),opacity 1s ease,translate 1.3s cubic-bezier(.22,1,.36,1)}
.kl-an .kl-schirm{--rx:6deg;--ry:-10deg;opacity:1;translate:0 0}
.kl-buehne.kl-folgt .kl-schirm{transition:transform .5s cubic-bezier(.22,1,.36,1),opacity 1s ease,translate 1.3s cubic-bezier(.22,1,.36,1)}
.kl-held .kl-ev{transition-delay:calc(.9s + var(--n) * .12s)}
.kl-sync{position:absolute;z-index:3;display:flex;align-items:center;gap:0;opacity:0;transition:opacity .6s ease 1.8s,translate .9s cubic-bezier(.22,1,.36,1) 1.8s}
.kl-sync-g{left:-6%;top:6px;translate:0 -12px}
.kl-sync-m{right:-4%;bottom:6px;translate:0 12px;flex-direction:row-reverse}
.kl-an .kl-sync{opacity:1;translate:0 0}
.kl-sync .kl-anbieter{box-shadow:0 20px 40px -18px rgba(0,0,0,.9),0 0 30px -10px rgba(47,107,255,.7)}
.kl-bahn{position:relative;width:70px;height:2px;margin:0 2px;background:linear-gradient(90deg,rgba(92,203,255,.15),rgba(92,203,255,.6),rgba(92,203,255,.15))}
.kl-sync-g .kl-bahn{transform:rotate(30deg);transform-origin:0 50%}
.kl-sync-m .kl-bahn{transform:rotate(30deg);transform-origin:100% 50%}
.kl-bahn i{position:absolute;top:-2.5px;left:0;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 10px 2px rgba(47,107,255,.9);animation:kl-lauf 2.4s linear infinite}
.kl-bahn i:nth-child(2){animation-delay:.8s;animation-direction:reverse}.kl-bahn i:nth-child(3){animation-delay:1.6s}
@keyframes kl-lauf{0%{left:0;opacity:0}15%,85%{opacity:1}100%{left:calc(100% - 7px);opacity:0}}

/* ---------- K2 · Abgleich ---------- */
.kl-abgleich{position:relative;display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(16px,2vw,24px);max-width:1080px;margin:0 auto;align-items:start}
.kl-verb,.kl-fenster{padding:16px;border-radius:22px;background:var(--h-grund);border:1px solid rgba(255,255,255,.55);box-shadow:0 50px 100px -50px rgba(0,0,0,.95)}
.kl-fenster{display:grid;gap:12px;box-shadow:0 50px 100px -50px rgba(0,0,0,.95),0 0 120px -40px rgba(92,203,255,.45)}
.kl-verb-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kl-status{padding:4px 9px;border-radius:999px;font-size:.62rem;font-weight:600;color:var(--kl-gruen-t,#11804F);background:var(--kl-gruen-bg,#E3F8EE)}
.kl-verb-titel{margin:16px 2px 8px;font-size:.58rem;font-weight:600;color:var(--h-text-2)}
.kl-kal-liste{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.kl-kal,.kl-koll{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;background:var(--kl-f1,#fff);border:1px solid var(--h-linie);transition:border-color .3s,box-shadow .3s}
.kl-kal>span:nth-child(2),.kl-koll>span:nth-child(2){flex:1;min-width:0;display:grid;line-height:1.25}
.kl-kal b,.kl-koll b{font-size:.74rem}
.kl-kal small,.kl-koll small{font-size:.6rem;color:var(--h-text-2)}
.kl-punkt{flex:none;width:10px;height:10px;border-radius:3px}
.kl-p-buero{background:var(--c-buero)}.kl-p-team{background:var(--c-team)}.kl-p-notar{background:var(--c-notar)}.kl-p-privat{background:var(--c-privat)}
.kl-koll>i{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font:700 .56rem/1 "Manrope",sans-serif;font-style:normal;color:#fff;background:var(--a)}
.kl-kal.an,.kl-koll.an{border-color:var(--kl-an-rand,#C9D8FF)}
.kl-gesynct{display:inline-flex;align-items:center;gap:7px;margin-left:auto;font-size:.66rem;color:var(--h-text-2)}
.kl-gesynct i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;color:#fff;background:linear-gradient(140deg,var(--cyan),var(--blau))}
.kl-gesynct i svg{width:11px;height:11px}
.kl-gesynct.dreht i svg{animation:kl-dreh .9s linear infinite}
.kl-gesynct.fertig span{color:var(--kl-gruen-t,#11804F);font-weight:600}
@keyframes kl-dreh{to{transform:rotate(1turn)}}
.kl-ab-woche{--zeile:30px}
.kl-flug{position:absolute;z-index:8;width:12px;height:12px;border-radius:50%;background:#F59E0B;box-shadow:0 0 16px 4px rgba(245,158,11,.8);pointer-events:none}

/* ---------- K3 · Neuer Termin ---------- */
.kl-nt{position:relative;max-width:860px;margin:0 auto}
.kl-dialog{position:relative;padding:18px 20px 16px;border-radius:20px;background:#fff;border:1px solid rgba(255,255,255,.6);box-shadow:0 50px 100px -40px rgba(0,0,0,.95),0 0 120px -40px rgba(155,5,254,.45);transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .5s}
.kl-dialog.gespeichert{transform:scale(.98)}
.kl-d-kopf{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px}
.kl-d-kopf b{font-size:1.05rem}
.kl-d-kopf span{font-size:1.3rem;color:var(--h-text-3)}
.kl-d-reiter{display:flex;gap:16px;margin-bottom:14px;border-bottom:1px solid var(--h-linie)}
.kl-d-reiter em{padding:0 0 9px;font-size:.78rem;font-style:normal;color:var(--h-text-2)}
.kl-d-reiter em.an{color:var(--h-text);font-weight:700;box-shadow:inset 0 -2px 0 var(--blau)}
.kl-d-raster{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.kl-feld{display:grid;gap:5px;margin-bottom:11px}
.kl-feld small{font-size:.68rem;color:var(--h-text-2)}
.kl-eingabe{display:flex;align-items:center;gap:8px;min-height:38px;padding:8px 11px;border-radius:10px;border:1px solid var(--h-linie);background:#FAFBFD;font-size:.8rem;transition:border-color .3s,box-shadow .3s}
.kl-eingabe svg{flex:none;width:15px;height:15px;color:var(--h-text-3)}
.kl-eingabe em{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kl-eingabe.aktiv{border-color:#9DB6FF;box-shadow:0 0 0 3px rgba(47,107,255,.12)}
.kl-eingabe.aktiv em::after{content:"";display:inline-block;width:1.5px;height:1em;margin-left:1px;vertical-align:-2px;background:var(--blau);animation:kl-cursor .7s steps(2) infinite}
@keyframes kl-cursor{50%{opacity:0}}
.kl-d-optionen{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:6px 0 14px}
.kl-check{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;color:var(--h-text-2)}
.kl-check::before{content:"";width:14px;height:14px;border-radius:4px;border:1.5px solid #C3CCE0}
.kl-check svg{width:12px;height:12px}
.kl-check.an::before{display:none}
.kl-check.an svg:first-child{width:14px;height:14px;padding:1px;border-radius:4px;color:#fff;background:var(--kl-gruen);stroke-width:3}
.kl-check:not(.an) svg{order:2}
.kl-farben{display:flex;gap:5px;margin-left:auto}
.kl-farben i{width:16px;height:16px;border-radius:50%;background:var(--f)}
.kl-farben i.an{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--f)}
.kl-d-fuss{display:flex;justify-content:flex-end;align-items:center;gap:16px;padding-top:12px;border-top:1px solid var(--h-linie);font-size:.82rem}
.kl-speichern{padding:10px 18px;border:0;border-radius:10px;font:700 .84rem/1 "Manrope",sans-serif;color:#fff;background:linear-gradient(100deg,#00B4F9,#2F6BFF 55%,#9B05FE);cursor:pointer;transition:transform .2s}
.kl-speichern.drueckt{animation:kl-druck .35s ease}
.kl-toast{position:absolute;left:50%;bottom:-18px;display:inline-flex;align-items:center;gap:8px;margin:0;padding:9px 15px;border-radius:999px;transform:translateX(-50%);background:#161B2E;color:#fff;font-size:.76rem;white-space:nowrap;box-shadow:0 18px 36px -14px rgba(22,27,46,.7);animation:kl-toast 3.4s ease both}
.kl-toast[hidden]{display:none}
.kl-toast svg{width:14px;height:14px;padding:3px;box-sizing:content-box;border-radius:50%;background:linear-gradient(140deg,var(--cyan),var(--violett))}
@keyframes kl-toast{0%{opacity:0;transform:translate(-50%,10px)}12%,82%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,6px)}}

/* ---------- K4 · Selbstbuchung ---------- */
.kl-sb{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(16px,2vw,24px);max-width:1080px;margin:0 auto;align-items:stretch}
.kl-einst-box,.kl-buchung{padding:18px;border-radius:22px;background:var(--h-grund);border:1px solid rgba(255,255,255,.55);box-shadow:0 50px 100px -50px rgba(0,0,0,.95)}
.kl-buchung{display:grid;gap:12px;align-content:start;box-shadow:0 50px 100px -50px rgba(0,0,0,.95),0 0 120px -40px rgba(22,163,106,.4)}
.kl-einst-box .kl-verb-titel{margin-top:0}
.kl-einst-box ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.kl-einst{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:13px;background:var(--kl-f1,#fff);border:1px solid var(--h-linie);transition:border-color .3s,box-shadow .3s}
.kl-einst>span:first-child{flex:1;display:grid;gap:3px}
.kl-einst b{font-size:.8rem}
.kl-einst small{font-size:.7rem;line-height:1.45;color:var(--h-text-2)}
.kl-einst.leuchtet{border-color:#9DB6FF;box-shadow:0 0 0 3px rgba(47,107,255,.1)}
.kl-b-kopf{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;background:var(--kl-f1,#fff);border:1px solid var(--h-linie)}
.kl-b-kopf img{width:76px;height:54px;max-width:none;object-fit:cover;border-radius:9px}
.kl-b-kopf span{display:grid;gap:2px}
.kl-b-kopf small{font:600 .56rem/1.2 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--kl-gruen)}
.kl-b-kopf b{font-size:.92rem}
.kl-b-kopf em{font-style:normal;font-size:.72rem;color:var(--h-text-2)}
.kl-b-wer{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kl-b-av{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font:700 .64rem/1 "Manrope",sans-serif;font-style:normal;color:#fff;background:linear-gradient(140deg,#5CCBFF,#2F6BFF);transition:background .4s}
.kl-b-wer>span:nth-child(2){display:grid;line-height:1.25}
.kl-b-wer small{font-size:.6rem;color:var(--h-text-2)}
.kl-b-name{font-size:.84rem}
.kl-nachweis{display:inline-flex;align-items:center;gap:8px;margin-left:auto;padding:7px 11px;border-radius:10px;border:1.5px dashed var(--kl-gestrichelt,#C3CCE0);background:var(--kl-f1,#fff);font-size:.72rem;color:var(--h-text-2);transition:all .4s}
.kl-nachweis i{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;color:var(--h-text-2);background:var(--kl-grau-2,#EEF1F6);transition:all .4s}
.kl-nachweis i svg{width:12px;height:12px}
.kl-nachweis.ok{border-style:solid;border-color:var(--kl-gruen-rand,#A9E5C7);background:var(--kl-gruen-bg,#EAFBF2);color:var(--kl-gruen-t,#11804F)}
.kl-nachweis.ok i{color:#fff;background:var(--kl-gruen)}
.kl-slots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.kl-slot{display:grid;gap:2px;justify-items:center;padding:12px 6px;border-radius:12px;border:1.5px solid var(--h-linie);background:var(--kl-f1,#fff);transition:all .45s cubic-bezier(.22,1,.36,1)}
.kl-slot b{font-size:.92rem;font-variant-numeric:tabular-nums}
.kl-slot small{font-size:.58rem;color:var(--h-text-2)}
.kl-slot.waehlbar{border-color:var(--kl-gruen-rand,#7FD8AE);background:var(--kl-gruen-zart,#F0FBF5);box-shadow:0 0 0 3px rgba(22,163,106,.1)}
.kl-slot.waehlbar small{color:var(--kl-gruen-t,#11804F);font-weight:600}
.kl-slot.gesperrt{opacity:.38;background:var(--kl-gesperrt,#F2F4F8)}
.kl-slot.gesperrt b{text-decoration:line-through;text-decoration-color:var(--kl-gestrichelt,#B8BFCE)}
.kl-slot.gebucht{color:#fff;border-color:transparent;background:linear-gradient(140deg,#16A36A,#0FA3A3);box-shadow:0 10px 22px -12px rgba(22,163,106,.9)}
.kl-slot.gebucht small{color:rgba(255,255,255,.9)}
.kl-slot.gerade{animation:kl-gebucht .7s cubic-bezier(.34,1.56,.64,1)}
@keyframes kl-gebucht{40%{transform:scale(1.08)}}
.kl-b-fuss{display:flex;align-items:center;gap:12px}
.kl-b-leiste{flex:1;display:grid;grid-template-columns:repeat(8,1fr);gap:3px}
.kl-b-leiste i{height:6px;border-radius:3px;background:var(--kl-bahn,#DCE3F0);transition:background .4s}
.kl-b-leiste i.voll{background:linear-gradient(90deg,#16A36A,#0FA3A3)}
.kl-b-info{font-size:.6rem;color:var(--h-text-2)}
.kl-b-info b{font-family:"Manrope",sans-serif;font-size:.84rem;color:var(--h-text)}

/* ---------- Schmalere Bildschirme ---------- */
@media (max-width:900px){
  .kl-start-innen{grid-template-columns:1fr;min-height:0}
  .kl-abgleich,.kl-sb{grid-template-columns:1fr}
  .kl-sync-g{left:0}.kl-sync-m{right:0}
}
@media (max-width:640px){
  .kl-schirm{--rx:0deg;--ry:0deg;padding:10px}
  .kl-an .kl-schirm{--rx:0deg;--ry:0deg}
  .kl-woche{--zeile:28px}
  .kl-ev small{display:none}
  .kl-bahn{display:none}
  .kl-sync .kl-anbieter small{display:none}
  .kl-d-raster{grid-template-columns:1fr}
  .kl-farben{margin-left:0}
  .kl-slots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kl-nachweis{margin-left:0}
  .kl-toast{white-space:normal;width:88%;text-align:center}
}
@media (min-width:901px) and (max-height:860px){
  .kl-start .h1{font-size:clamp(2.2rem,3.5vw,3.3rem)}
  .kl-fakten{margin-top:18px}
  .kl-start .einstieg-aktionen{margin-top:22px}
  .kl-woche{--zeile:30px}
}
@media (prefers-reduced-motion:reduce){
  .kl-seite *,.kl-seite *::before,.kl-seite *::after{transition:none!important;animation:none!important}
  .kl-schirm,.kl-sync{opacity:1;translate:0 0}
  .kl-warten .kl-ev,.kl-ev.aus{opacity:1;transform:none}
}

/* ---------- Dunkle Abschnitte im Stil der übrigen Website (Karten wie auf KI-Agenten): Abgleich, Selbstbuchung ---------- */
.kl-dunkel{--h-grund:var(--panel);--h-linie:rgba(255,255,255,.09);--h-text:#F6F4EE;--h-text-2:#A7AAB6;--h-text-3:#6F7281;
  --kl-f1:#161A24;--kl-f3:#2A3042;--kl-raster:rgba(255,255,255,.06);--kl-heute:rgba(110,140,255,.07);--kl-grau:rgba(255,255,255,.06);--kl-grau-2:rgba(255,255,255,.06);
  --kl-schalter-aus:rgba(255,255,255,.16);--kl-gruen-t:#4ADE9A;--kl-gruen-bg:rgba(74,222,154,.12);--kl-gruen-rand:rgba(74,222,154,.4);--kl-gruen-zart:rgba(74,222,154,.08);
  --kl-an-rand:rgba(143,164,255,.45);--kl-gestrichelt:rgba(255,255,255,.22);--kl-gesperrt:rgba(255,255,255,.03);--kl-bahn:rgba(255,255,255,.1);color:var(--h-text)}
.kl-verb.kl-dunkel,.kl-fenster.kl-dunkel,.kl-einst-box.kl-dunkel,.kl-buchung.kl-dunkel{background:var(--panel);border:1px solid var(--linie);box-shadow:var(--schatten)}
.kl-dunkel .kl-ev{box-shadow:0 4px 10px -6px rgba(0,0,0,.8)}
.kl-dunkel .kl-slot.gesperrt{opacity:.5}

/* Handy: Termine zeigen ihren Titel ganz (zwei Zeilen, Silbentrennung) statt „Objekt…“, Zeilen etwas höher (18.10.2026) */
@media (max-width:640px){
  .kl-woche{--zeile:32px}
  .kl-kopfzeile{grid-template-columns:32px repeat(5,minmax(0,1fr))}
  .kl-raster{grid-template-columns:32px 1fr}
  .kl-stunden span{right:4px}
  .kl-ev{left:calc(var(--tag) * 20% + 2px);width:calc(20% - 4px);padding:3px 4px;border-radius:5px}
  .kl-ev{display:block}
  .kl-ev b{display:block;font-size:.54rem;line-height:1.22;max-height:2.44em;white-space:normal;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}
  .kl-ev small{display:block;font-size:.48rem}
}
/* Handy: Abgleich kompakt, damit Schalter und Kalender zusammen ins Bild passen (vorher 1.330 px, der Kalender lag unter dem Bild) (18.10.2026) */
@media (max-width:640px){
  .kl-verb{padding:12px}
  .kl-verb-titel{margin:12px 2px 6px}
  .kl-kal-liste{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
  .kl-kal,.kl-koll{gap:6px;padding:7px 7px 7px 8px;border-radius:10px}
  .kl-kal b,.kl-koll b{font-size:.64rem;line-height:1.2}
  .kl-kal small,.kl-koll small{font-size:.54rem;line-height:1.2}
  .kl-koll>i{width:20px;height:20px;font-size:.5rem}
  .kl-kal .kl-schalter,.kl-koll .kl-schalter{width:26px;height:15px}
  .kl-kal .kl-schalter i,.kl-koll .kl-schalter i{width:11px;height:11px}
  .kl-kal.an>.kl-schalter i,.kl-koll.an>.kl-schalter i{transform:translateX(11px)}
  .kl-fenster{padding:12px;gap:10px}
  .kl-ab-woche{--zeile:28px}
  .kl-gesynct{min-width:150px;justify-content:flex-end}
}
/* Handy: Selbstbuchung kompakter, Zeitfenster bleiben gleich hoch, auch wenn der Name wechselt (18.10.2026) */
@media (max-width:640px){
  .kl-einst-box,.kl-buchung{padding:12px}
  .kl-einst{gap:10px;padding:10px 11px}
  .kl-einst b{font-size:.76rem}
  .kl-einst small{font-size:.66rem;line-height:1.4}
  .kl-slots{gap:6px}
  .kl-slot{padding:9px 6px}
  .kl-slot small{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* Handy/Safari: runde Ecken der Woche auch für die hereinfallenden Termine (overflow:hidden reicht dort nicht) (18.10.2026) */
@media (max-width:640px){
  .kl-woche{clip-path:inset(0 round 12px)}
}