/* =========================================================
   booyage.info – Seitenspezifisch: termin.html
   Wird nur von termin.html geladen (nach booyage-visual.css).
   ========================================================= */
.tm svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Hero ---------- */
.tm .app-hero{padding:64px 0 56px}
.tm .app-hero-grid{grid-template-columns:1fr .95fr;align-items:start}
.tm .hero-side{display:grid;gap:14px}
/* Nächster freier Termin */
.tm .nx{position:relative;overflow:hidden;border-radius:24px;padding:22px;background:var(--navy);color:#fff;box-shadow:0 30px 70px rgba(13,36,56,.28)}
.tm .nx:before{content:"";position:absolute;width:320px;height:320px;right:-120px;top:-160px;border-radius:50%;background:var(--brand);filter:blur(40px);opacity:.5}
.tm .nx>*{position:relative}
.tm .nx-head{display:flex;align-items:center;gap:10px;font-size:.78rem;color:rgba(255,255,255,.7)}
.tm .nx-live{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(47,154,98,.2);color:#8fe3b4;font-weight:800}
.tm .nx-live i{width:7px;height:7px;border-radius:50%;background:#4ade80;animation:nx-blink 1.6s ease-in-out infinite}
@keyframes nx-blink{50%{opacity:.3}}
.tm .nx-main{display:flex;align-items:center;gap:18px;margin:16px 0}
.tm .nx-date{width:86px;flex:none;border-radius:16px;background:#fff;color:var(--ink);text-align:center;padding:8px 6px 10px;box-shadow:0 10px 24px rgba(0,0,0,.2)}
.tm .nx-wd{display:block;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#c7356f}
.tm .nx-day{display:block;font:400 2.4rem/1 var(--serif)}
.tm .nx-mon{display:block;font-size:.7rem;color:var(--muted)}
.tm .nx-t{display:block;font:400 2.2rem/1 var(--serif)}
.tm .nx-time span{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:.8rem;color:rgba(255,255,255,.7)}
.tm .nx-time svg{width:14px;height:14px}
.tm .nx-take{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;padding:11px 16px;border-radius:12px;background:var(--brand);color:#fff;font-weight:800;font-size:.88rem;box-shadow:0 12px 26px rgba(214,52,135,.35);transition:transform .2s ease}
.tm .nx-take:hover{transform:translateY(-1px)}
.tm .nx-take svg{width:16px;height:16px}
.tm .nx-week{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12)}
.tm .nw-col{display:grid;gap:4px;justify-items:center}
.tm .nw-col span{font-size:.66rem;color:rgba(255,255,255,.6);font-weight:700;margin-bottom:2px}
.tm .nw-col i{width:100%;height:7px;border-radius:4px;background:rgba(255,255,255,.1);transition:background .4s ease,transform .4s ease;transition-delay:var(--d)}
.tm .nx.is-ready .nw-col i.f{background:linear-gradient(90deg,#ff5b75,#e72fa0)}
.tm .nx.is-ready .nw-col i.b{background:rgba(255,255,255,.18)}
.tm .nx-legend{display:flex;gap:14px;margin-top:10px;font-size:.68rem;color:rgba(255,255,255,.6)}
.tm .nx-legend span{display:inline-flex;align-items:center;gap:5px}
.tm .nx-legend span:before{content:"";width:12px;height:6px;border-radius:3px}
.tm .lf:before{background:#e72fa0}.tm .lb:before{background:rgba(255,255,255,.25)}
/* So funktioniert es */
.tm .app-hero-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px 22px;box-shadow:0 10px 30px rgba(22,55,79,.05)}
.tm .app-hero-card h3{font-size:1.2rem;margin:4px 0 10px}
.tm .app-facts{display:grid;gap:10px}
.tm .app-fact{display:flex;gap:12px;align-items:flex-start}
.tm .app-fact>i{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#eaf4fa;color:var(--blue)}
.tm .app-fact svg{width:17px;height:17px}
.tm .app-fact strong{display:block;font-size:.9rem;color:var(--ink)}
.tm .app-fact span{font-size:.8rem;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){.tm .hero-side{animation:bv-rise .9s cubic-bezier(.2,.7,.2,1) .15s both}}

/* ---------- Buchung ---------- */
.tm .demo-badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;padding:6px 12px;border-radius:999px;background:#fff4e6;color:#8a5d23;font-size:.76rem;font-weight:800}
.tm .demo-badge:before{content:"";width:7px;height:7px;border-radius:50%;background:#e09a36}
.tm .booking-shell{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start}
.tm .booking-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:26px;box-shadow:var(--shadow)}
.tm .bk-progress{list-style:none;margin:0 0 8px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tm .bk-progress li{position:relative;display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:12px;background:var(--soft);font-size:.82rem;font-weight:750;color:var(--muted);transition:background .3s ease,color .3s ease}
.tm .bk-progress i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:.74rem;background:#fff;border:1.5px solid #d6e2ea;transition:all .3s ease}
.tm .bk-progress li.is-on{background:#eaf4fa;color:var(--ink)}
.tm .bk-progress li.is-on i{border-color:var(--blue);color:var(--blue)}
.tm .bk-progress li.is-done{color:var(--ink)}
.tm .bk-progress li.is-done i{background:var(--brand);border-color:transparent;color:#fff;font-size:0}
.tm .bk-progress li.is-done i:after{content:"✓";font-size:.74rem}
.tm .booking-step{padding:24px 0;border-bottom:1px solid #eef3f7;transition:opacity .3s ease}
.tm .booking-step:last-child{border-bottom:0;padding-bottom:4px}
.tm .step-label{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.tm .step-label span{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--navy);color:#fff;font-weight:800;font-size:.84rem}
.tm .step-label h2{font-size:1.4rem;margin:0}
.tm .booking-step.is-current .step-label span{background:var(--brand)}
.tm .booking-step.has-error .step-label h2{color:#c0392b}
/* Tage */
.tm .date-nav{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}
.tm .dn-btn{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink2)}
.tm .dn-btn svg{width:18px;height:18px}
.tm .date-row{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 2px 10px}
.tm .date-row::-webkit-scrollbar{display:none}
.tm .day{flex:0 0 92px;scroll-snap-align:start;display:grid;justify-items:center;gap:2px;padding:12px 8px 10px;border-radius:16px;border:1.5px solid var(--line);background:#fff;cursor:pointer;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease,background .2s ease}
.tm .day:hover:not(:disabled){border-color:#b9d6e8;transform:translateY(-2px)}
.tm .d-wd{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.tm .d-num{font:400 1.8rem/1.05 var(--serif);color:var(--ink)}
.tm .d-mon{font-size:.72rem;color:var(--muted)}
.tm .d-av{margin-top:4px;font-size:.68rem;font-weight:750;color:#2f9a62}
.tm .d-bar{width:100%;height:4px;border-radius:4px;background:#edf2f6;overflow:hidden;margin-top:3px}
.tm .d-bar i{display:block;height:100%;background:#2f9a62;border-radius:4px}
.tm .day.is-full{opacity:.45;cursor:not-allowed}
.tm .day.is-full .d-av{color:var(--muted)}
.tm .day.is-on{border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,var(--brand) border-box;box-shadow:0 12px 26px rgba(214,52,135,.18)}
.tm .day.is-on .d-av{color:#c7356f}.tm .day.is-on .d-bar i{background:var(--brand)}
.tm .date-picker-line{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:.82rem;color:var(--muted)}
.tm .date-picker-line input{border:1px solid #cad8e2;border-radius:9px;padding:7px 10px;font:inherit;color:var(--ink2);background:#fbfdfe}
/* Uhrzeiten */
.tm .slot-group+.slot-group{margin-top:16px}
.tm .sg-head{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.tm .sg-head b{font-size:.86rem;color:var(--ink)}
.tm .sg-head span{font-size:.76rem;color:var(--muted)}
.tm .sg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.tm .slot{display:grid;gap:1px;padding:11px 10px;border-radius:13px;border:1.5px solid var(--line);background:#fff;cursor:pointer;text-align:left;transition:border-color .2s ease,background .2s ease,transform .15s ease,box-shadow .2s ease}
.tm .slot b{font:400 1.2rem/1.1 var(--serif);color:var(--ink)}
.tm .slot span{font-size:.68rem;color:var(--muted)}
.tm .slot:hover:not(:disabled){border-color:#b9d6e8;transform:translateY(-1px)}
.tm .slot.is-taken{cursor:not-allowed;background:repeating-linear-gradient(135deg,#f6f9fb 0 6px,#eef3f7 6px 12px);border-style:dashed}
.tm .slot.is-taken b{color:#9fb2c1;text-decoration:line-through}
.tm .slot.is-on{background:var(--brand);border-color:transparent;box-shadow:0 12px 24px rgba(214,52,135,.28);transform:translateY(-2px)}
.tm .slot.is-on b,.tm .slot.is-on span{color:#fff}
.tm .slot-empty{margin:0;padding:18px;border-radius:14px;background:var(--soft);color:var(--muted);font-size:.88rem;text-align:center}
/* Angaben */
.tm .app-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tm .app-field.full{grid-column:1/-1}
.tm .app-field label{display:block;font-size:.78rem;font-weight:750;margin-bottom:6px}
.tm .app-field input,.tm .app-field select,.tm .app-field textarea{width:100%;border:1px solid #cad8e2;border-radius:10px;padding:11px 12px;background:#fbfdfe;font:inherit;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.tm .app-field textarea{min-height:100px;resize:vertical}
.tm .app-field input:focus,.tm .app-field select:focus,.tm .app-field textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(45,121,168,.12);background:#fff}
.tm .app-field.has-error input,.tm .app-field.has-error select{border-color:#e05a4f;box-shadow:0 0 0 4px rgba(224,90,79,.1)}
.tm .topic-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.tm .topic-chips button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 11px;font-size:.78rem;font-weight:700;color:var(--ink2);cursor:pointer;transition:all .2s ease}
.tm .topic-chips button:hover{border-color:#b9d6e8}
.tm .topic-chips button.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tm .privacy-check{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:.86rem;color:var(--ink2);cursor:pointer}
.tm .privacy-check input{width:18px;height:18px;margin-top:2px;accent-color:#e72fa0}
.tm .privacy-check.has-error span{color:#c0392b}

/* ---------- Zusammenfassung als Ticket ---------- */
.tm .summary-card{position:sticky;top:100px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:var(--shadow);overflow:hidden}
.tm .summary-card:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--brand)}
.tm .ticket-top{display:flex;gap:12px;align-items:center}
.tm .tt-logo{width:40px;height:40px;border-radius:12px;background:#fff0f6;display:grid;place-items:center}
.tm .tt-logo img{width:15px;height:21px;object-fit:contain}
.tm .ticket-top .eyebrow{margin:0}
.tm .ticket-top h2{font-size:1.3rem;margin:0}
.tm .ticket-big{position:relative;margin:16px -22px;padding:18px 22px;background:var(--soft);border-top:2px dashed #dbe5ec;border-bottom:2px dashed #dbe5ec}
.tm .ticket-big:before,.tm .ticket-big:after{content:"";position:absolute;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:#fff;border:1px solid var(--line)}
.tm .ticket-big:before{left:-12px}.tm .ticket-big:after{right:-12px}
.tm .tb-date{display:block;font:400 1.5rem/1.15 var(--serif);color:var(--ink)}
.tm .tb-time{display:block;margin-top:4px;font-size:.86rem;font-weight:750;color:#c7356f}
.tm .summary-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #eef3f7;font-size:.84rem}
.tm .summary-row span{color:var(--muted)}
.tm .summary-row strong{text-align:right;color:var(--ink);font-weight:750}
.tm .summary-row strong.summary-empty{color:#9fb2c1;font-weight:600}
.tm .sum-check{display:none}
.tm .summary-card .btn{width:100%;margin-top:16px;justify-content:center;opacity:.55;transition:opacity .3s ease}
.tm.tm-ready .summary-card .btn{opacity:1}
.tm .summary-help{font-size:.74rem;color:var(--muted);margin:10px 0 0}
.tm .form-status{margin-top:10px;font-size:.84rem;font-weight:700}
.tm .form-status.is-error{color:#c0392b}.tm .form-status.is-warn{color:#8a5d23}.tm .form-status.is-busy{color:var(--blue)}

/* ---------- Bestätigung ---------- */
.tm .tm-done{max-width:640px;margin:0 auto;text-align:center;background:#fff;border:1px solid var(--line);border-radius:26px;padding:40px 30px;box-shadow:var(--shadow);animation:bv-rise .6s ease}
.tm .td-ring{width:80px;height:80px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff;box-shadow:0 0 0 10px #fde7f1;animation:bv-pop .6s cubic-bezier(.2,.9,.2,1.5)}
.tm .td-ring svg{width:38px;height:38px;stroke-width:2.6}
.tm .tm-done h2{font-size:clamp(1.7rem,3vw,2.3rem)}
.tm .td-sum{font-weight:800;color:#c7356f;margin:8px 0 12px}
.tm .td-note{color:var(--muted);font-size:.9rem;max-width:480px;margin:0 auto 20px}
.tm .tm-done .btns{justify-content:center}
.tm .td-back{margin-top:16px;border:0;background:none;color:var(--blue);font-weight:750;cursor:pointer;text-decoration:underline}

/* ---------- Info & Abschluss ---------- */
.tm .app-info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tm .tm-bar{display:none}

/* ---------- Tablet & Handy ---------- */
@media(max-width:980px){
 .tm .app-hero-grid{grid-template-columns:1fr}
 .tm .booking-shell{grid-template-columns:1fr}
 .tm .summary-card{position:relative;top:auto}
 .tm .app-info-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
 .tm .app-hero{padding:44px 0 40px}
 .tm .booking-card{padding:18px 14px;border-radius:20px}
 .tm .bk-progress span{display:none}
 .tm .bk-progress li{justify-content:center}
 .tm .dn-btn{display:none}
 .tm .date-nav{grid-template-columns:1fr}
 .tm .day{flex-basis:78px}
 .tm .sg-grid{grid-template-columns:repeat(3,1fr)}
 .tm .app-form-grid{grid-template-columns:1fr}
 .tm .nx-main{gap:14px}.tm .nx-t{font-size:1.8rem}
 /* feste Leiste unten: gewählter Termin + nächster Schritt */
 .tm .tm-bar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 16px;border-radius:16px;background:var(--navy);color:#fff;box-shadow:0 16px 40px rgba(13,36,56,.35)}
 .tm .tm-bar b{display:block;font-size:.9rem}
 .tm .tm-bar span{font-size:.74rem;color:rgba(255,255,255,.7)}
 .tm .mb-go{border:0;border-radius:12px;padding:11px 18px;background:var(--brand);color:#fff;font-weight:800;cursor:pointer}
 .tm.tm-finished .tm-bar{display:none}
 .tm main{padding-bottom:84px}
}

/* NEU: weitere Kalender in der Bestätigung */
.tm .td-cal{margin:14px 0 0;font-size:.86rem;color:var(--muted)}
.tm .td-cal a{font-weight:750;color:var(--blue)}

/* NEU: Honeypot-Feld (api/termine.php) – für Menschen unsichtbar, Bots füllen es aus */
.tm .hp-feld{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
/* Bestätigung: Hinweis über dem Formular ausblenden, Schließen-Knopf */
.tm.tm-finished .demo-badge{display:none}
.tm .tm-done .btns{justify-content:center;flex-wrap:wrap;gap:12px}
@media (max-width:560px){.tm .tm-done .btns .btn{width:100%;justify-content:center}}