/* Terminbuchung nach dem Umsetzungs-Protokoll vom 02.08.2026.
   Stile unveraendert aus der Design-Vorlage; ergaenzt um die
   Regeln fuer das Cal-Embed. */
.bk-overlay{position:fixed;inset:0;background:rgba(35,33,80,.55);backdrop-filter:blur(4px);z-index:200;display:none;align-items:center;justify-content:center;padding:24px}
.bk-overlay.offen{display:flex}
.bk-modal{display:flex;border-radius:26px;overflow:hidden;box-shadow:0 40px 100px rgba(20,18,55,.4);background:#F6F3EC;width:min(1060px,100%);max-height:92vh}
.bk-steps{flex:0 0 280px;background:var(--ink);color:#fff;padding:30px 26px 24px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.bk-steps .bk-sdots{position:absolute;top:14px;left:18px;width:120px;height:70px;background-image:radial-gradient(rgba(220,211,245,.4) 1.6px,transparent 1.6px);background-size:15px 15px;pointer-events:none}
.bk-steps .bk-sring{position:absolute;right:-70px;bottom:-70px;width:190px;height:190px;border-radius:50%;border:2.5px solid rgba(216,242,110,.35);pointer-events:none}
.bk-steps h4{font-family:'Schibsted Grotesk',sans-serif;font-size:19px;font-weight:800;letter-spacing:-.01em;margin:4px 0 26px;position:relative}
.bk-step{display:flex;gap:14px;align-items:flex-start;padding-bottom:26px;position:relative;opacity:.45;transition:opacity .3s;cursor:default}
.bk-step::before{content:"";position:absolute;left:15px;top:34px;bottom:2px;width:2px;background:rgba(255,255,255,.15)}
.bk-step:last-of-type::before{display:none}
.bk-step .bk-num{width:32px;height:32px;flex:none;border-radius:11px;border:1.5px solid rgba(255,255,255,.3);display:grid;place-items:center;font-family:'Schibsted Grotesk',sans-serif;font-weight:800;font-size:13px;transition:all .3s;background:transparent;color:#fff}
.bk-step .bk-stxt b{display:block;font-size:14px;font-weight:700;margin-top:5px;color:#fff}
.bk-step .bk-stxt span{font-size:11.5px;color:#C9C5EE;display:block;line-height:1.4}
.bk-step.aktiv{opacity:1}
.bk-step.aktiv .bk-num{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.bk-step.fertig{opacity:.9;cursor:pointer}
.bk-step.fertig:hover{opacity:1}
.bk-step.fertig .bk-num{background:transparent;border-color:var(--lime);color:var(--lime)}
.bk-steps .bk-sfuss{margin-top:auto;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#C9C5EE;border-top:1px solid rgba(255,255,255,.15);padding-top:16px;line-height:1.8;position:relative}
.bk-panel{flex:1;padding:34px 38px 26px;min-width:0;overflow-y:auto;display:flex;flex-direction:column;line-height:1.5}
.bk-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px;gap:12px}
.bk-pill{background:#fff;border:1.5px solid var(--lila);color:var(--lila-tief);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:8px 16px;white-space:nowrap}
.bk-close{flex:0 0 42px;width:42px;height:42px;border-radius:13px;border:1.5px solid var(--linie);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:transform .2s var(--ease),border-color .2s}
.bk-close:hover{transform:rotate(90deg);border-color:var(--lila-tief)}
.bk-close svg{width:18px;height:18px}
.bk-panel h2{font-family:'Schibsted Grotesk',sans-serif;font-size:28px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px;line-height:1.1}
.bk-sub{color:var(--grau);font-size:15px;margin-bottom:20px}
.bk-crumbs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.bk-crumb{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1.5px solid var(--lila);color:var(--lila-tief);font-size:13px;font-weight:700;border-radius:999px;padding:7px 14px}
.bk-crumb svg{width:12px;height:12px;stroke:var(--lila-tief)}
.bk-grid{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:18px}
.bk-grid>*{min-width:0}
.bk-card{background:#fff;border-radius:20px;padding:24px 24px 18px;position:relative;border:1.5px solid transparent;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.bk-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(35,33,80,.12);border-color:var(--lila)}
.bk-card.rot{border-color:var(--signal)}
.bk-card.rot:hover{box-shadow:0 12px 30px rgba(232,80,58,.14)}
.bk-tag{position:absolute;top:-13px;left:20px;background:var(--lime);color:var(--ink);font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;border-radius:999px;padding:6px 12px;display:inline-flex;align-items:center;gap:6px}
.bk-tag.lila{background:var(--lila-tief);color:#fff}
.bk-tag.rot{background:var(--signal);color:#fff}
.bk-puls{width:7px;height:7px;border-radius:50%;background:#fff;animation:bkpu 1.4s ease-in-out infinite}
@keyframes bkpu{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.bk-ic{width:46px;height:46px;border-radius:14px;background:var(--lime);display:flex;align-items:center;justify-content:center;margin-bottom:13px}
.bk-ic.rot{background:var(--signal)}
.bk-ic svg{width:22px;height:22px;stroke:var(--ink)}
.bk-ic.rot svg{stroke:#fff}
.bk-card h3{font-family:'Schibsted Grotesk',sans-serif;font-size:18px;font-weight:800;margin-bottom:9px;letter-spacing:-.01em}
.bk-card .bk-desc{font-size:14px;color:var(--grau);line-height:1.5;margin-bottom:13px}
.bk-card ul{list-style:none;display:flex;flex-direction:column;gap:7px;margin:0 0 14px}
.bk-card li{display:flex;gap:9px;font-size:13.5px;color:var(--grau);line-height:1.45;white-space:nowrap;overflow:hidden}
.bk-card li svg{flex:0 0 14px;width:14px;height:14px;stroke:var(--lime-tief);margin-top:3px}
.bk-fuss{border-top:1px solid var(--linie);padding-top:13px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.bk-preis .bk-ab{font-family:'Schibsted Grotesk',sans-serif;font-size:19px;font-weight:800}
.bk-preis .bk-note{font-size:9.5px;font-weight:700;letter-spacing:.11em;color:#6B6790;text-transform:uppercase;margin-top:4px}
.bk-go{flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:var(--lime);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer}
.bk-go.rot{background:var(--signal)}
.bk-go svg{width:16px;height:16px;stroke:var(--ink)}
.bk-go.rot svg{stroke:#fff}
.bk-basis{background:#fff;border-radius:18px;padding:20px 22px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
.bk-inclus{display:inline-flex;align-items:center;gap:6px;background:var(--lime);color:var(--ink);font-size:10px;font-weight:800;border-radius:999px;padding:5px 11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;white-space:nowrap}
.bk-inclus svg{width:10px;height:10px;stroke:var(--ink)}
.bk-basis h3{font-family:'Schibsted Grotesk',sans-serif;font-size:16.5px;font-weight:800;margin-bottom:6px;line-height:1.35;letter-spacing:-.01em}
.bk-basis p{font-size:13.5px;color:var(--grau);line-height:1.55}
.bk-basis .bk-r{text-align:right;white-space:nowrap;padding-top:4px}
.bk-basis .bk-r .bk-ab{font-family:'Schibsted Grotesk',sans-serif;font-size:21px;font-weight:800}
.bk-basis .bk-r .bk-note{font-size:10px;font-weight:700;letter-spacing:.12em;color:#6B6790;text-transform:uppercase;margin-top:4px}
.bk-h{font-family:'Schibsted Grotesk',sans-serif;font-size:15px;font-weight:800;margin-bottom:4px}
.bk-s{font-size:13px;color:var(--grau);margin-bottom:13px;line-height:1.55}
.bk-liste{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.bk-opt{background:#fff;border-radius:16px;padding:15px 18px;display:flex;align-items:center;gap:14px;border:1.5px solid transparent;cursor:pointer;transition:border-color .15s,background .15s}
.bk-opt:hover{border-color:var(--lila)}
.bk-opt.gewaehlt{border-color:var(--lila-tief);background:#F4F0FC}
.bk-opt.inaktiv{opacity:.5;cursor:default}
.bk-opt.inaktiv:hover{border-color:transparent}
.bk-box{flex:0 0 22px;width:22px;height:22px;border-radius:7px;border:2px solid #C9C3E4;display:flex;align-items:center;justify-content:center;background:#fff}
.bk-opt.gewaehlt .bk-box{background:var(--lila-tief);border-color:var(--lila-tief)}
.bk-opt.inaktiv .bk-box{border-style:dashed;background:transparent}
.bk-box svg{width:12px;height:12px;stroke:#fff;display:none}
.bk-opt.gewaehlt .bk-box svg{display:block}
.bk-info{flex:1;min-width:0}
.bk-info b{display:block;font-size:14px;font-weight:700}
.bk-info span{font-size:12.5px;color:#6B6790;line-height:1.4}
.bk-ap{font-family:'Schibsted Grotesk',sans-serif;font-weight:800;font-size:14.5px;white-space:nowrap;text-align:right}
.bk-ap small{display:block;font-size:9px;font-weight:700;letter-spacing:.1em;color:#6B6790;text-transform:uppercase;margin-top:2px}
.bk-organ{background:#F4F0FC;border:1.5px solid var(--lila);border-radius:16px;padding:14px 18px;margin-top:-4px}
.bk-organ .bk-olbl{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--lila-tief);margin-bottom:9px}
.bk-chips{display:flex;flex-wrap:wrap;gap:8px}
.bk-ochip{border:1.5px solid var(--lila);background:#fff;border-radius:999px;padding:8px 15px;font-size:13px;font-weight:700;color:var(--grau);cursor:pointer;transition:all .15s;font-family:'Inter',sans-serif}
.bk-ochip.an{background:var(--lila-tief);border-color:var(--lila-tief);color:#fff}
.bk-organ .bk-hint{font-size:11.5px;color:#6B6790;margin-top:9px;line-height:1.5}
.bk-au{background:#fff;border-radius:18px;padding:20px 22px;margin-bottom:16px;display:flex;gap:14px;align-items:flex-start}
.bk-au .bk-auic{flex:0 0 42px;width:42px;height:42px;border-radius:13px;background:var(--lila);display:flex;align-items:center;justify-content:center}
.bk-au .bk-auic svg{width:20px;height:20px;stroke:var(--ink)}
.bk-au h3{font-family:'Schibsted Grotesk',sans-serif;font-size:15.5px;font-weight:800;margin-bottom:5px;letter-spacing:-.01em}
.bk-au p{font-size:13px;color:var(--grau);line-height:1.55}
.bk-au .bk-r{margin-left:auto;text-align:right;white-space:nowrap;padding-top:2px}
.bk-au .bk-r .bk-ab{font-family:'Schibsted Grotesk',sans-serif;font-size:18px;font-weight:800}
.bk-au .bk-r .bk-note{font-size:9.5px;font-weight:700;letter-spacing:.11em;color:#6B6790;text-transform:uppercase;margin-top:3px}
.bk-dash{border:1.5px dashed #CFC9E6;border-radius:16px;background:#fff;padding:14px 18px;display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}
.bk-dash .bk-i{flex:0 0 18px;width:18px;height:18px;border:2px solid var(--lila-tief);border-radius:50%;color:var(--lila-tief);font-weight:800;font-size:11px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.bk-dash p{font-size:12.5px;color:var(--grau);line-height:1.55}
.bk-dash b{color:var(--ink)}
.bk-boden{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:14px;flex-wrap:wrap}
.bk-zurueck{background:#fff;border:1.5px solid var(--linie);border-radius:13px;padding:0 20px;height:48px;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Inter',sans-serif;transition:border-color .3s,color .3s,transform .3s var(--ease)}
.bk-zurueck:hover{border-color:var(--lila-tief);color:var(--lila-tief);transform:translateX(-1px)}
.bk-weiter{background:var(--lime);border:1.5px solid transparent;border-radius:13px;padding:0 24px;height:50px;font-size:15px;font-weight:800;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:'Schibsted Grotesk',sans-serif;white-space:nowrap;transition:border-color .3s,box-shadow .3s,transform .25s var(--ease),opacity .2s}
.bk-weiter:not(:disabled):hover{border-color:var(--lime-tief);box-shadow:0 3px 7px rgba(92,110,23,.12);transform:translateY(-1px)}
.bk-weiter:not(:disabled):active{transform:translateY(0) scale(.99)}
.bk-weiter svg,.bk-zurueck svg{width:16px;height:16px;flex-shrink:0}
.bk-weiter:disabled{opacity:.4;cursor:not-allowed}
.bk-recht{font-size:12px;color:#6B6790}
.bk-recht a{color:var(--lila-tief);font-weight:600}
.bk-legal{flex:none;text-align:center;font-size:12px;color:#6B6790;padding:12px 4px 2px;line-height:1.6}
.bk-legal a{color:var(--lila-tief);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.bk-summe{font-size:13px;color:var(--grau);display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.bk-summe b{font-family:'Schibsted Grotesk',sans-serif;font-size:15px;color:var(--ink)}
.bk-dauer{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1.5px solid var(--lila);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap}
.bk-dauer svg{width:12px;height:12px;stroke:var(--lila-tief);flex-shrink:0}
.bk-sumbar{background:#fff;border-radius:16px;padding:14px 20px;display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.bk-sumbar .bk-nm{font-family:'Schibsted Grotesk',sans-serif;font-weight:800;font-size:14.5px}
.bk-sumbar .bk-pr{margin-left:auto;font-family:'Schibsted Grotesk',sans-serif;font-weight:800;color:var(--lila-tief);font-size:16px;white-space:nowrap}
.bk-cal{background:#fff;border-radius:18px;padding:22px;border:1px solid var(--linie);margin-bottom:16px}
.bk-cal .bk-wer{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.bk-cal .bk-ava{width:34px;height:34px;border-radius:50%;background:var(--lila);color:var(--ink);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;font-family:'Schibsted Grotesk',sans-serif;overflow:hidden}
.bk-ava img{width:100%;height:100%;object-fit:cover;display:block}
.bk-cal .bk-wer span{font-size:13px;color:#6B6790;font-weight:600}
.bk-cal h3{font-family:'Schibsted Grotesk',sans-serif;font-size:19px;font-weight:800;margin-bottom:4px;letter-spacing:-.01em}
.bk-cal .bk-cd{font-size:13.5px;color:var(--grau);margin-bottom:14px}
.bk-meta{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.bk-meta div{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--grau)}
.bk-meta svg{width:14px;height:14px;stroke:#6B6790;margin-top:2px;flex-shrink:0}
.bk-monat{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.bk-monat b{font-family:'Schibsted Grotesk',sans-serif;font-size:15px}
.bk-monat .bk-pfeile{display:flex;gap:6px}
.bk-monat .bk-pfeile button{width:30px;height:30px;border-radius:8px;border:1px solid var(--linie);background:#fff;color:#6B6790;cursor:default}
.bk-kal{display:grid;grid-template-columns:repeat(7,minmax(0, 1fr));gap:6px}
.bk-kal .bk-wd{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:#6B6790;text-transform:uppercase;text-align:center;padding:4px 0}
.bk-tag2{aspect-ratio:1.15;border-radius:10px;background:#F1EEF8;border:none;font-size:13.5px;font-weight:700;color:var(--ink);cursor:pointer;font-family:'Schibsted Grotesk',sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.bk-tag2 .bk-vdot{width:4px;height:4px;border-radius:50%;background:var(--lila-tief)}
.bk-tag2:hover{background:#E7E2F4}
.bk-tag2.aus{background:transparent;color:#C6C2DC;cursor:default}
.bk-tag2.aus:hover{background:transparent}
.bk-tag2.an{background:var(--ink);color:#fff}
.bk-tag2.leer{background:transparent;cursor:default}
.bk-slh{font-family:'Schibsted Grotesk',sans-serif;font-size:13px;font-weight:800;margin:16px 0 10px}
.bk-slots{display:grid;grid-template-columns:repeat(4,minmax(0, 1fr));gap:8px}
.bk-slot{border:1.5px solid #DED9EE;background:#fff;border-radius:11px;padding:11px 6px;text-align:center;font-size:13.5px;font-weight:700;cursor:pointer;font-family:'Schibsted Grotesk',sans-serif;color:var(--ink)}
.bk-slot:hover{border-color:var(--lila-tief)}
.bk-slot.an{border-color:var(--ink);background:var(--ink);color:#fff}
.bk-dayhead{display:flex;gap:12px;align-items:center}
.bk-dayback{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--linie);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;flex:none;transition:border-color .2s,transform .2s var(--ease)}
.bk-dayback:hover{border-color:var(--lila-tief);transform:translateX(-2px)}
.bk-dayback svg{width:15px;height:15px}
.bk-daylist{display:flex;flex-direction:column;gap:9px;max-height:430px;overflow-y:auto;padding:2px}
.bk-dayslot{width:100%;min-height:44px;border:1.5px solid #DED9EE;background:#fff;border-radius:11px;padding:11px 6px;text-align:center;font-size:13.5px;font-weight:700;cursor:pointer;font-family:'Schibsted Grotesk',sans-serif;color:var(--ink);transition:border-color .15s,color .15s}
.bk-dayslot:hover{border-color:var(--lila-tief);color:var(--lila-tief)}
.bk-feld{margin-bottom:13px}
.bk-feld label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
.bk-feld input,.bk-feld textarea{width:100%;border:1.5px solid #DED9EE;border-radius:10px;padding:12px 13px;font-size:15px;font-family:'Inter',sans-serif;color:var(--ink);background:#fff;resize:vertical}
.bk-feld input:focus,.bk-feld textarea:focus{outline:none;border-color:var(--lila-tief)}
.bk-consent{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1.5px solid var(--linie);border-radius:14px;padding:14px 16px;margin:6px 0 14px;cursor:pointer}
.bk-consent .bk-cb{flex:0 0 21px;width:21px;height:21px;border-radius:6px;border:2px solid #C9C3E4;background:#fff;display:flex;align-items:center;justify-content:center;margin-top:1px}
.bk-consent.an .bk-cb{background:var(--lila-tief);border-color:var(--lila-tief)}
.bk-consent .bk-cb svg{width:11px;height:11px;stroke:#fff;display:none}
.bk-consent.an .bk-cb svg{display:block}
.bk-consent p{font-size:12.5px;color:var(--grau);line-height:1.55}
.bk-consent b{color:var(--ink)}
.bk-tos{font-size:11.5px;color:#6B6790;margin-bottom:14px}
.bk-tos a{color:var(--lila-tief);font-weight:600}
.bk-cala{display:flex;justify-content:flex-end;gap:10px}
.bk-calz{background:#fff;border:1.5px solid var(--linie);border-radius:10px;padding:0 18px;height:46px;font-size:14px;font-weight:700;color:var(--grau);cursor:pointer;font-family:'Inter',sans-serif;transition:border-color .2s,color .2s}
.bk-calz:hover{border-color:var(--lila-tief);color:var(--lila-tief)}
.bk-calc{background:var(--ink);color:#fff;border:none;border-radius:10px;padding:0 22px;height:46px;font-size:14px;font-weight:800;cursor:pointer;font-family:'Schibsted Grotesk',sans-serif}
.bk-calc:disabled{opacity:.4;cursor:not-allowed}
.bk-done{position:relative;text-align:center;padding:14px 6px 6px;overflow:hidden;flex:none}
.bk-check{width:80px;height:80px;border-radius:50%;background:var(--lime);display:flex;align-items:center;justify-content:center;margin:8px auto 20px;position:relative;z-index:2}
.bk-check svg{width:35px;height:35px;stroke:var(--ink)}
.bk-done h2{margin-bottom:12px}
.bk-done .bk-dp{color:var(--grau);font-size:14.5px;max-width:520px;margin:0 auto 8px;line-height:1.6;position:relative;z-index:2}
.bk-tab{background:#fff;border-radius:16px;padding:6px 22px;max-width:560px;margin:18px auto;text-align:left;position:relative;z-index:2;box-shadow:0 8px 26px rgba(35,33,80,.08)}
.bk-tab div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px dashed #E5E1F1;font-size:13.5px;color:var(--grau)}
.bk-tab div:last-child{border-bottom:none}
.bk-tab b{color:var(--ink);text-align:right;font-family:'Schibsted Grotesk',sans-serif}
.bk-vlink{background:var(--ink);border-radius:16px;padding:20px 22px;max-width:560px;margin:28px auto;text-align:left;position:relative;z-index:2}
.bk-vlink .bk-vl{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8d8abd;margin-bottom:8px}
.bk-vlink .bk-vrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bk-vlink .bk-url{color:#fff;font-weight:800;font-size:14.5px;font-family:'Schibsted Grotesk',sans-serif;word-break:break-all}
.bk-vlink .bk-copy{background:var(--lime);border:none;border-radius:999px;padding:8px 16px;font-size:12.5px;font-weight:800;color:var(--ink);cursor:pointer;font-family:'Schibsted Grotesk',sans-serif}
.bk-vlink .bk-vnote{color:#8d8abd;font-size:11.5px;margin-top:8px}
.bk-dinfo{border:1px solid var(--linie);border-radius:14px;background:#fff;padding:13px 18px;max-width:560px;margin:0 auto 14px;font-size:12.5px;color:var(--grau);line-height:1.55;text-align:left;position:relative;z-index:2}
.bk-dlink{display:block;color:var(--lila-tief);font-weight:700;font-size:13.5px;text-decoration:underline;margin-bottom:16px;position:relative;z-index:2}
.bk-schl{background:#fff;border:1.5px solid var(--linie);border-radius:999px;padding:0 26px;height:50px;font-size:14.5px;font-weight:800;color:var(--ink);cursor:pointer;font-family:'Schibsted Grotesk',sans-serif;position:relative;z-index:2}
.bk-spam{font-size:13px;color:var(--grau);margin:18px auto 12px;max-width:520px;position:relative;z-index:2}
.bk-resend{display:inline-flex;align-items:center;gap:6px;color:var(--grau);font-weight:700;font-size:13px;text-decoration:underline;margin-bottom:0;position:relative;z-index:2;cursor:pointer}
.bk-schlwrap{position:relative;z-index:2;margin-top:26px;padding-bottom:10px}
.bk-done canvas{pointer-events:none}
.bk-panel{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.bk-konfetti{position:absolute;top:-12px;border-radius:2px;z-index:1;pointer-events:none;animation:bkfall linear forwards}
@keyframes bkfall{to{transform:translateY(620px) rotate(540deg);opacity:0}}
.bk-wa{background:#fff;border-radius:18px;padding:26px;text-align:center}
.bk-wa p{color:var(--grau);font-size:14.5px;margin-bottom:16px;line-height:1.6}
.bk-wabtn{background:var(--lime);border:none;border-radius:13px;padding:0 24px;height:50px;font-size:14.5px;font-weight:800;color:var(--ink);cursor:pointer;font-family:'Schibsted Grotesk',sans-serif}
/* Cannabis: Kreuz-Punkte in Karten-Listen */
.bk-card li.x svg{stroke:var(--signal)}
/* Cannabis: Fragebogen PEG / PHQ-2 – Schritt-für-Schritt */
.bk-fprog{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#6B6790}
.bk-fbar{height:6px;background:#E9E5F5;border-radius:99px;overflow:hidden;margin-bottom:20px}
.bk-fbar i{display:block;height:100%;background:var(--lila-tief);border-radius:99px;transition:width .35s var(--ease)}
.bk-frage{background:#fff;border-radius:18px;padding:24px 24px 22px;margin-bottom:14px}
.bk-frage .bk-flbl{display:inline-flex;align-items:center;gap:7px;background:var(--lila);color:var(--ink);font-size:10px;font-weight:800;border-radius:999px;padding:5px 12px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:12px}
.bk-fsub{font-size:12.5px;color:#6B6790;line-height:1.5}
.bk-fqt{font-family:'Schibsted Grotesk',sans-serif;font-size:17px;font-weight:800;color:var(--ink);margin:12px 0 20px;line-height:1.4;letter-spacing:-.01em}
.bk-fqt b{color:var(--lila-tief)}
.bk-slwrap{display:flex;align-items:center;gap:16px}
.bk-slval{flex:none;width:58px;height:58px;border-radius:16px;background:var(--lila);color:var(--ink);display:grid;place-items:center;font-family:'Schibsted Grotesk',sans-serif;font-weight:800;font-size:23px}
.bk-range{flex:1;-webkit-appearance:none;appearance:none;height:10px;border-radius:99px;background:#E9E5F5;outline:none;cursor:pointer}
.bk-range::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:var(--lila-tief);border:4px solid #fff;box-shadow:0 3px 10px rgba(35,33,80,.28);cursor:grab}
.bk-range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--lila-tief);border:4px solid #fff;box-shadow:0 3px 10px rgba(35,33,80,.28);cursor:grab}
.bk-sends{display:flex;justify-content:space-between;font-size:11px;color:#6B6790;font-weight:600;margin-top:10px}
.bk-popt{display:flex;flex-direction:column;gap:9px}
.bk-po{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;border:1.5px solid #DED9EE;background:#fff;border-radius:13px;padding:12px 16px;font-size:14px;font-weight:700;color:var(--grau);cursor:pointer;font-family:'Inter',sans-serif;text-align:left;line-height:1.35;transition:border-color .12s,background .12s,color .12s}
.bk-po::before{content:"";flex:none;width:19px;height:19px;border-radius:50%;border:2px solid #CFC8E8;background:#fff;transition:all .12s}
.bk-po:hover{border-color:var(--lila-tief)}
.bk-po.an{background:var(--lila-tief);border-color:var(--lila-tief);color:#fff}
.bk-po.an::before{border-color:#fff;box-shadow:inset 0 0 0 4px var(--lila-tief)}
.bk-skip{flex-wrap:wrap;align-items:center}
.bk-skip p{flex:1;min-width:200px}
.bk-skipbtn{flex:none;margin-left:auto;background:#fff;border:1.5px solid var(--lila);color:var(--lila-tief);border-radius:11px;padding:9px 15px;font-size:12.5px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-family:'Schibsted Grotesk',sans-serif;white-space:nowrap;transition:border-color .15s}
.bk-skipbtn:hover{border-color:var(--lila-tief)}
.bk-skipbtn svg{width:13px;height:13px}
.bk-fdone{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;color:var(--lime-tief);margin-top:4px}
.bk-fdone svg{width:12px;height:12px;stroke:var(--lime-tief)}
@media (max-width:1080px){.bk-grid{grid-template-columns:minmax(0, 1fr)}}
@media (max-width:760px){
  .bk-overlay{padding:0}
  .bk-modal{width:100%;height:100dvh;max-height:100dvh;border-radius:0;flex-direction:column}
  .bk-steps{flex:none;flex-direction:row;align-items:center;gap:10px;padding:16px 18px;overflow:visible}
  .bk-steps h4,.bk-steps .bk-sfuss,.bk-steps .bk-sdots,.bk-steps .bk-sring,.bk-step .bk-stxt{display:none}
  .bk-step{padding:0;margin:0;align-items:center;flex-shrink:0}
  .bk-step::before{left:auto;right:-8px;top:15px;bottom:auto;width:6px;height:2px}
  .bk-panel{padding:22px 18px calc(20px + env(safe-area-inset-bottom));flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}
  .bk-panel h2{font-size:22px}
  .bk-sub{font-size:14px;margin-bottom:16px}
  .bk-top{margin-bottom:14px}
  .bk-pill{font-size:10px;padding:8px 12px;letter-spacing:.09em}
  .bk-close{flex-basis:38px;width:38px;height:38px}
  .bk-grid{grid-template-columns:minmax(0, 1fr);gap:18px}
  .bk-card{padding:22px 20px 16px}
  .bk-basis{flex-direction:column;gap:12px;padding:18px}
  .bk-basis .bk-r{text-align:left;padding-top:0;display:flex;align-items:baseline;gap:10px}
  .bk-au{flex-wrap:wrap}
  .bk-au .bk-r{margin-left:56px;text-align:left;flex:1 1 100%;display:flex;align-items:baseline;gap:10px;padding-top:0}
  .bk-opt{flex-wrap:wrap;row-gap:10px;padding:15px 16px}
  .bk-info{flex:1 1 calc(100% - 40px)}
  .bk-ap{flex:1 1 100%;margin-left:36px;text-align:left;display:flex;align-items:baseline;gap:8px}
  .bk-ap small{margin-top:0}
  .bk-boden{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px;padding-top:12px}
  .bk-boden .bk-summe{order:1;justify-content:space-between;width:100%;margin:0}
  .bk-boden .bk-weiter{order:2;width:100%;min-height:52px;margin:0}
  .bk-boden .bk-zurueck{order:3;width:100%;min-height:48px;margin:0}
  .bk-legal{padding:22px 4px calc(4px + env(safe-area-inset-bottom))}
  .bk-slots{grid-template-columns:minmax(0, 1fr)}
  .bk-slot{width:100%;min-height:46px}
  .bk-slwrap{gap:12px}
  .bk-slval{width:50px;height:50px;font-size:20px;border-radius:14px}
  .bk-range::-webkit-slider-thumb{width:34px;height:34px}
  .bk-po{min-height:54px;font-size:13.5px;padding:12px 14px}
  .bk-fqt{font-size:16px}
  .bk-frage{padding:20px 16px 18px}
  .bk-skipbtn{width:100%;justify-content:center;margin-left:0;margin-top:6px;min-height:46px}
  .bk-chips{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:8px}
  .bk-ochip{width:100%;min-height:42px;padding:8px 6px}
  .bk-kal{gap:4px}
  .bk-tag2{font-size:12px;border-radius:8px}
  .bk-cal{padding:18px 16px}
  .bk-cala{flex-direction:column-reverse}
  .bk-cala button{width:100%;min-height:48px}
  .bk-sumbar{padding:13px 16px}
  .bk-tab div{flex-direction:column;gap:2px;align-items:flex-start}
  .bk-tab b{text-align:left}
}


/* =====================================================================
   Ergaenzungen fuer das Cal-Embed im neuen Buchungstool
   ---------------------------------------------------------------------
   Die Design-Vorlage brachte einen eigenen Kalender mit. An seiner
   Stelle steht jetzt das Cal-Embed; diese Regeln geben ihm Platz und
   zeigen einen Ladehinweis, solange es noch nicht da ist.
   ===================================================================== */
.dl-cal-huelle {
  position: relative;
  min-height: 520px;
  margin: 4px 0 18px;
  border-radius: 16px;
  overflow: hidden;
}
.dl-cal-laedt {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: var(--grau, #4A487A);
  pointer-events: none;
}
#dlCalEmbed { min-height: 520px; }
#dlCalEmbed iframe { width: 100%; border: 0; }

/* Kontaktwege, wenn Cal nicht erreichbar ist */
.dl-cal-wege {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

@media (max-width: 640px) {
  .dl-cal-huelle, #dlCalEmbed { min-height: 620px; }
}

/* =====================================================================
   Info-Kachel – Zusatzleistungen mit nur_hinweis = 1
   ---------------------------------------------------------------------
   Diese Kacheln sind reine Anzeige: die Krankschreibung, spaeter auch
   Atteste und Bescheinigungen. Sie sind nicht auswaehlbar und gehen in
   keine Summe ein. Damit man das sieht, bevor man klickt, setzen sie
   sich von den waehlbaren Kacheln ab: halbtransparenter Grund,
   gestrichelter Rahmen, kein Schatten.

   .bk-au bleibt unangetastet und liefert weiterhin das Layout (Flex,
   Symbol, Preisspalte, Umbruch auf schmalen Schirmen). Hier stehen nur
   die Flaechenwerte – deshalb eine zweite Klasse statt einer
   Ueberschreibung von .bk-au.

   Abgrenzung zur „Gut zu wissen"-Box (.bk-dash, _source/tb2.css:98):
   die ist ebenfalls gestrichelt, aber deckend weiss. Der Unterschied
   ist die Halbtransparenz – deshalb bleibt .bk-dash unveraendert.
   ===================================================================== */
.kachel-info {
  background: rgba(255, 255, 255, .55);
  border: 1.5px dashed #CFC9E4;
  box-shadow: none;
}

/* Zwei Werte aus der Ziel-Datei
   (docs/vorgaben/zieldatei-buchungsfenster-akutsprechstunde-desktop.html),
   die .bk-au von sich aus anders setzt:

   .kachel-info p b { color: var(--ink) }  – der fette Satzanfang
      „Entscheidet Ihr Arzt im Termin:" steht dort in Tintenblau, waehrend
      .bk-au p den ganzen Absatz grau faerbt und das <b> das erbt.
   stroke="#6D5BD0"                        – das Symbol der Ziel-Kachel ist
      lila gezeichnet, .bk-au .bk-auic svg zeichnet in Tintenblau.

   Beide Regeln stehen hier und nicht in tb2.css: die Design-Vorlage
   bleibt unveraendert, und die waehlbaren .bk-au-Kacheln behalten ihr
   bisheriges Aussehen. */
.kachel-info p b { color: var(--ink, #232150); }
.kachel-info .bk-auic svg { stroke: var(--lila-tief, #6D5BD0); }

/* Keine Bedienung: die Kachel traegt weder onclick noch tabindex, hier
   kommt nur der passende Zeiger dazu. Kein Hover, kein Fokusrahmen. */
.kachel-info, .kachel-info * { cursor: default; }

/* =====================================================================
   F-07 – Zustimmungen kompakt auf der Bestaetigung
   ---------------------------------------------------------------------
   Zwei Zeilen im Stil der Cal-Bestaetigungskarte: links das Label,
   rechts der Wert. Sie erscheinen nur, wenn die Nutzlast von Cal die
   Zustimmung wirklich mitbringt (dlZustimmung in dl-booking2.js) –
   deshalb steht hier kein Rueckfalltext, sondern nur Aussehen.
   ===================================================================== */
.bk-zust {
  max-width: 560px;
  margin: 18px auto 4px;
  text-align: left;
  position: relative;
  z-index: 2;
}
.bk-zz {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 9px 0;
  border-top: 1px solid var(--linie, #E4DFD4);
  font-size: 13.5px;
}
.bk-zz span { flex: 0 0 190px; color: var(--grau, #4A487A); }
.bk-zz b { color: var(--ink, #232150); font-weight: 700; }

@media (max-width: 640px) {
  .bk-zz { flex-direction: column; gap: 2px; }
  .bk-zz span { flex: none; }
}

/* =====================================================================
   F-07 (3a) – „Zum Kalender hinzufügen"
   ---------------------------------------------------------------------
   Vier Ziele in einer Reihe, in der Breite der Zustimmungszeilen
   darüber (max-width 560px), damit die Bestätigungskarte eine Kante
   behält. Auf schmalen Schirmen bricht die Reihe um, statt zu
   schrumpfen: „Google Kalender" muss lesbar bleiben.

   Google und Outlook sind <a>, Apple und .ics sind <button>. Beide
   sehen gleich aus – für die Bedienung ist der Unterschied belanglos,
   für die Technik nicht: ein Verweis lässt sich in einem neuen Tab
   öffnen, eine Datei entsteht erst beim Klick.

   Farben: Grund weiß, Rahmen und Schrift im Tintenblau der Marke.
   Gerechnet nach WCAG 2.1:
     #232150 auf #FFFFFF   14,95:1   Ruhezustand
     #322F73 auf #F2F0FA   10,40:1   Hover
     #4A487A auf #FFFFFF    8,40:1   Überschrift der Gruppe
   Die geforderten 4,5:1 sind in allen drei Zuständen überschritten.
   ===================================================================== */
/* Der Name .bk-kal ist doppelt belegt: die Design-Vorlage nutzt ihn fuer
   das Wochenraster des alten Kalenders (display:grid, 7 Spalten). Ohne die
   beiden Ruecksetzungen erbt diese Gruppe dieses Raster – die Ueberschrift
   landet in Spalte 1 und bricht mitten im Wort, die Schaltflaechen stapeln
   sich in Spalte 2. */
.bk-kal {
  display: block;
  grid-template-columns: none;
  max-width: 560px;
  margin: 18px auto 4px;
  text-align: left;
  position: relative;
  z-index: 2;
}
.bk-kal-t {
  margin: 0 0 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--grau, #4A487A);
  border-top: 1px solid var(--linie, #E4DFD4);
  padding-top: 14px;
}
.bk-kal-z {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bk-kal-b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 1.5px solid var(--linie, #E4DFD4);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--ink, #232150);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.bk-kal-b:hover {
  background: #F2F0FA;
  border-color: var(--lila-tief, #6D5BD0);
  color: #322F73;
}
.bk-kal-b:focus-visible {
  outline: 2px solid var(--lila-tief, #6D5BD0);
  outline-offset: 2px;
}

/* Der Zusatz („ Kalender", „-Datei") trägt die Bedeutung für den
   Screenreader mit, kostet auf schmalen Schirmen aber eine Zeile.
   Dort entfällt er – die Knöpfe heißen dann Google · Apple ·
   Outlook · .ics, wie im Feedback-Protokoll v18 abgebildet. */
@media (max-width: 560px) {
  .bk-kal-x { display: none; }
  .bk-kal-b { padding: 9px 12px; }
}
@media (max-width: 380px) {
  .bk-kal-z { gap: 6px; }
  .bk-kal-b { font-size: 13px; padding: 8px 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .bk-kal-b { transition: none; }
}

/* =====================================================================
   Was hier NICHT steht – und warum (F-04, F-06, F-10)
   ---------------------------------------------------------------------
   Das Cal-Formular liegt in einem iframe auf app.cal.eu. Eine fremde
   Herkunft: kein Stylesheet dieser Datei erreicht seinen Inhalt, keine
   Regel kann dort etwas verstecken oder vergroessern. Das ist die
   Trennung des Browsers, keine fehlende Zeile.
   Regeln wie
       #dlCalEmbed iframe .cal-button-back { display: none }
   waeren wirkungslos – sie wuerden nur so aussehen, als sei der Punkt
   erledigt. Deshalb stehen sie nicht hier.

   Die Einbettung selbst laesst genau zwei Eingriffe zu (Quelle:
   cal.com, packages/embeds/embed-core/src/types.ts, Typ UiConfig):
   eine kurze, ausdruecklich klein gehaltene styles-Liste und
   cssVarsPerTheme. Ueber cssVarsPerTheme laeuft F-06 – siehe
   dlCalVars() in dl-booking2.js.

   Damit bleiben offen und sind Cal-Konto-Aufgaben:
     F-04  Feldhoehen 48 px / 52 px
     F-10  Cal-eigener „Zurueck"-Knopf neben „Bestaetigen"
   Beide stehen mit Begruendung in docs/CAL-KONTO-AUFGABEN-V18.md.

   Was von hier aus SEHR WOHL geht, ist der Rahmen um die Einbettung –
   und der Fokusring auf ihm, solange jemand im Kalender tippt. Die
   Farbe ist das Lila der Marke, wie in F-06 fuer den Fokus gefordert.
   ===================================================================== */
.dl-cal-huelle:focus-within {
  outline: 2px solid var(--lila-tief, #6D5BD0);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .dl-cal-huelle { transition: none; }
}

/* =====================================================================
   F-15 · Krankschreibungs-Kachel: Luft zwischen Titel und Text
   ---------------------------------------------------------------------
   Die Zieldatei v2 setzt 9 px und Zeilenhoehe 1,6; im Bestand waren es
   5 px und 1,55 – der Satz lief an die Ueberschrift heran.
   Gilt fuer alle Info-Kacheln (nur_hinweis), nicht nur die AU.
   ===================================================================== */
.bk-au h3 { margin-bottom: 9px; }
.bk-au p { line-height: 1.6; }

/* =====================================================================
   Audit-Befund 6 · Text der Leistungskacheln bricht statt abzuschneiden
   ---------------------------------------------------------------------
   _source/tb2.css setzt an .bk-card li white-space:nowrap zusammen mit
   overflow:hidden. Bei 320 px Breite fehlten je nach Zeile 14 bis 29 px –
   ohne text-overflow:ellipsis endete der Satz mitten im Wort, ohne dass
   man es als Kürzung erkannt hätte („Blutbild, Leber-, Nieren- und
   Schilddrüsenwe"). Es gibt keinen Grund, diese Listen einzeilig zu
   halten: sie stehen untereinander und dürfen wachsen.

   overflow bleibt sichtbar, damit ein Umbruch nicht doch wieder unter
   die Kachelkante rutscht. Das Symbol behält seine feste Spalte
   (flex:0 0 14px in tb2.css), der Text bricht daneben um.
   ===================================================================== */
.bk-card li {
  white-space: normal;
  overflow: visible;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  align-items: flex-start;
}

/* =====================================================================
   Audit-Befund 5 · Buchungsdialog und die Aussparung des Geräts
   ---------------------------------------------------------------------
   Ab 760 px füllt .bk-modal mit height:100dvh den ganzen Schirm. Die
   Schrittleiste .bk-steps sitzt dann ganz oben – auf Geräten mit
   Aussparung also hinter Uhrzeit, Kamera und Statusleiste. Nach unten
   war die Safe-Area schon berücksichtigt (.bk-panel padding-bottom),
   nach oben und zu den Seiten nicht.

   max(18px, env(...)) statt 18px + env(...): im Hochformat ist der
   seitliche Wert 0, dann bleibt es bei den bisherigen 18 px. Im
   Querformat, wo die Aussparung seitlich liegt, wächst der Abstand auf
   genau so viel, wie das Gerät meldet – ohne doppelten Rand.

   Der Fallback 0px in env() ist nötig: Browser ohne Kenntnis der
   Funktion verwerfen sonst die ganze Deklaration.
   ===================================================================== */
@media (max-width: 760px) {
  .bk-steps {
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    padding-left: max(18px, env(safe-area-inset-left, 0px));
    padding-right: max(18px, env(safe-area-inset-right, 0px));
  }
  .bk-panel {
    padding-left: max(18px, env(safe-area-inset-left, 0px));
    padding-right: max(18px, env(safe-area-inset-right, 0px));
  }
}