/* Qualifizierungs-Dialog + meetergo-Buchungs-Popup.
   Aus training-video/index.html herausgeloest, damit /training-video und
   /kundenstimmen dieselbe Quelle nutzen statt zweier driftender Kopien.
   Selektoren haengen an eigenen IDs (#tr-qual, #tr-cal), nicht am
   Seiten-Wrapper — laeuft daher unter #tr-lp wie unter .page. */
/* Beide Popups werden per JS in den Seiten-Body injiziert und liegen damit ausserhalb
   der #tr-lp-Resets. Ohne eigenes border-box addierte sich das padding der Modals auf
   height/max-height drauf — das Popup war dadurch 52px hoeher als der Viewport und unten
   abgeschnitten, ohne dass irgendetwas scrollen konnte. */
#tr-cal,#tr-cal *,#tr-cal *::before,#tr-cal *::after,
#tr-qual,#tr-qual *,#tr-qual *::before,#tr-qual *::after{box-sizing:border-box}

/* ===== MEETERGO BUCHUNGS-POPUP ===== */
#tr-cal{position:fixed;inset:0;z-index:100000;display:none;place-items:start center;padding:18px;overflow-y:auto;overscroll-behavior:contain;background:rgba(2,5,11,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-family:"Inter",system-ui,sans-serif}
#tr-cal.open{display:grid;animation:calfade .25s ease}
#tr-cal .cal-modal{position:relative;width:100%;max-width:940px;margin-block:auto;height:min(88vh,880px);height:min(88dvh,880px);background:#0a1220;border:1px solid rgba(46,163,224,.35);border-radius:18px;box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 1px rgba(0,119,181,.12);overflow:hidden;animation:calrise .3s cubic-bezier(.16,1,.3,1)}
#tr-cal .cal-close{position:absolute;top:12px;right:14px;z-index:3;width:40px;height:40px;border:0;border-radius:10px;background:rgba(255,255,255,.10);color:#eaf2f8;font-size:24px;line-height:1;cursor:pointer;transition:.2s}
#tr-cal .cal-close:hover{background:rgba(255,255,255,.2)}
#tr-cal .meetergo-iframe{width:100%;height:100%}
#tr-cal .meetergo-iframe iframe{width:100%!important;height:100%!important;border:0;display:block}
@keyframes calfade{from{opacity:0}to{opacity:1}}
@keyframes calrise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* ===== QUALIFIZIERUNGS-FORMULAR (Custom) ===== */
#tr-qual{position:fixed;inset:0;z-index:100000;display:none;place-items:start center;padding:18px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:rgba(2,5,11,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-family:"Inter",system-ui,sans-serif}
#tr-qual.open{display:grid;animation:calfade .25s ease}
#tr-qual .q-modal{position:relative;width:100%;max-width:600px;margin-block:auto;max-height:92vh;max-height:92dvh;overflow-y:auto;background:#0a1220;border:1px solid rgba(46,163,224,.35);border-radius:18px;box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 1px rgba(0,119,181,.12);padding:34px 32px 30px;animation:calrise .3s cubic-bezier(.16,1,.3,1)}
#tr-qual .q-close{position:absolute;top:14px;right:16px;width:38px;height:38px;border:0;border-radius:10px;background:rgba(255,255,255,.08);color:#eaf2f8;font-size:22px;line-height:1;cursor:pointer;transition:.2s;z-index:2}
#tr-qual .q-close:hover{background:rgba(255,255,255,.16)}
#tr-qual .q-prog{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin:4px 0 8px}
#tr-qual .q-prog i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#0077b5,#2ea3e0);transition:width .35s ease}
#tr-qual .q-count{font-size:13px;color:#8da3b5;text-align:right;margin-bottom:22px}
#tr-qual .q-step{display:none;animation:qin .4s ease}
#tr-qual .q-step.active{display:block}
@keyframes qin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#tr-qual .q-title{font-size:clamp(20px,3vw,25px);font-weight:800;color:#eaf2f8;letter-spacing:-.01em;line-height:1.3}
#tr-qual .q-sub{color:#8da3b5;font-size:14.5px;margin-top:8px}
#tr-qual .q-opts{display:flex;flex-direction:column;gap:11px;margin-top:24px}
#tr-qual .q-opt{display:flex;align-items:center;gap:14px;text-align:left;width:100%;padding:16px 18px;border-radius:13px;border:1px solid rgba(46,163,224,.28);background:rgba(46,163,224,.06);color:#eaf2f8;font-size:15.5px;font-weight:600;cursor:pointer;transition:.18s;font-family:inherit}
#tr-qual .q-opt:hover{border-color:rgba(127,208,255,.7);background:rgba(46,163,224,.14);transform:translateY(-1px)}
#tr-qual .q-opt.sel{border-color:#2ea3e0;background:rgba(46,163,224,.2);box-shadow:0 0 0 3px rgba(0,119,181,.18)}
#tr-qual .q-opt .k{flex:0 0 26px;height:26px;border-radius:8px;background:linear-gradient(135deg,#0077b5,#2ea3e0);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800}
#tr-qual input[type="text"]{width:100%;margin-top:22px;padding:15px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:#04080f;color:#eaf2f8;font-size:16px;font-family:inherit}
#tr-qual input[type="text"]::placeholder{color:#7d90a5}
#tr-qual input[type="text"]:focus{outline:none;border-color:#2ea3e0}
#tr-qual .q-nav{display:flex;justify-content:space-between;align-items:center;margin-top:26px;gap:14px}
#tr-qual .q-back{background:none;border:0;color:#8da3b5;font-size:14px;cursor:pointer;padding:8px 4px;font-family:inherit}
#tr-qual .q-back:hover{color:#eaf2f8}
#tr-qual .q-next{margin-left:auto;display:inline-flex;align-items:center;gap:9px;padding:15px 34px;border:0;border-radius:99px;color:#fff;font-weight:800;font-size:16px;cursor:pointer;background:linear-gradient(135deg,#0077b5,#2ea3e0);box-shadow:0 10px 30px rgba(0,119,181,.4);transition:.2s;font-family:inherit}
#tr-qual .q-next:hover{transform:scale(1.03)}
#tr-qual .q-err{color:#f87171;font-size:13px;margin-top:10px;display:none}
@media(max-width:560px){#tr-qual{padding:0}#tr-qual .q-modal{max-height:100vh;height:100vh;max-width:100%;border-radius:0;border:0;padding:26px 20px}}
@media(max-width:560px){#tr-cal{padding:0}#tr-cal .cal-modal{height:100vh;max-width:100%;border-radius:0;border:0}}

/* ===== INLINE-MODUS (eigene Terminseite, z.B. /bewerbung) =====
   Die Seite platziert <div id="tr-qual" class="inline"></div>, das Script fuellt
   es. Kein Overlay, kein Backdrop, kein Schliessen-Knopf — der Fragebogen ist
   hier der Seiteninhalt, nicht ein Dialog darueber. */
#tr-qual.inline{position:static;inset:auto;z-index:auto;display:block;padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
#tr-qual.inline .q-modal{max-width:640px;max-height:none;overflow:visible;margin:0 auto;animation:none}
#tr-qual.inline .q-close{display:none}
@media(max-width:560px){#tr-qual.inline .q-modal{border-radius:16px;border:1px solid rgba(46,163,224,.35);height:auto;padding:26px 20px}}