/* SkyXTalente – Anfrage-Strecke & Dankeseite mit Terminkalender (Lime/Schwarz) */
.funnel-page{background:#050505;color:#fff;min-height:100vh}
.funnel-header{position:relative;z-index:5;height:84px;border-bottom:1px solid rgba(255,255,255,.06)}
.funnel-header-inner{height:100%;display:flex;align-items:center;justify-content:space-between}
.funnel-back-home{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:#d9d9d9;transition:color .3s}
.funnel-back-home svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.funnel-back-home:hover{color:#c2f200}

.funnel-main{position:relative;overflow:hidden;padding:56px 0 90px;min-height:calc(100vh - 84px)}
.funnel-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 45% at 10% 0%,rgba(194,242,0,.16),transparent 70%),radial-gradient(50% 40% at 95% 10%,rgba(194,242,0,.08),transparent 70%),linear-gradient(180deg,#141414,#050505 70%)}
.funnel-wrap{position:relative;z-index:1;max-width:880px}
.funnel-intro{text-align:center;margin-bottom:34px}
.funnel-intro h1{font-size:clamp(30px,4.4vw,52px);margin:14px 0 14px}
.funnel-intro p{max-width:600px;margin:0 auto;color:#d8d8d8;font-size:16.5px;line-height:1.5}
.funnel-kicker{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#c2f200;background:rgba(194,242,0,.08);border:1px solid rgba(194,242,0,.25);padding:6px 12px;border-radius:999px}
.funnel-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:#c2f200;box-shadow:0 0 0 0 rgba(194,242,0,.6);animation:kickPulse 1.8s infinite}
@keyframes kickPulse{70%{box-shadow:0 0 0 8px rgba(194,242,0,0)}100%{box-shadow:0 0 0 0 rgba(194,242,0,0)}}

/* Karte */
.funnel-card{position:relative;background:#fff;color:#0b0b0b;border-radius:24px;padding:34px 40px 30px;box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(194,242,0,.15);animation:cardUp .7s var(--ease) both}
@keyframes cardUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.funnel-progress{display:flex;align-items:center;gap:16px;margin-bottom:30px}
.funnel-progress-bar{flex:1;height:8px;border-radius:99px;background:#efefef;overflow:hidden}
.funnel-progress-bar span{display:block;height:100%;width:20%;border-radius:inherit;background:linear-gradient(90deg,#d8ff40,#c2f200 60%,#a8d600);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);transition:width .6s var(--ease)}
.funnel-progress-label{font:700 14px/1 var(--head);color:#555;min-width:44px;text-align:right}

/* Schritte */
.fstep{border:0;margin:0;padding:0;min-width:0;display:none}
.fstep.is-active{display:block;animation:stepIn .5s var(--ease) both}
.fstep.is-back{animation-name:stepInBack}
@keyframes stepIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes stepInBack{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
.fstep-title{display:block;width:100%;font:800 clamp(21px,2.4vw,28px)/1.15 var(--head);text-transform:uppercase;letter-spacing:-.01em;margin-bottom:22px;padding:0}
.fstep-hint{margin:-12px 0 16px;font-size:14px;color:#666}
.options{display:grid;gap:14px}
.options-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.options-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.opt{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:150px;padding:20px 12px;border-radius:18px;border:1.5px solid #e5e5e5;background:linear-gradient(180deg,#fff,#f7f7f7);cursor:pointer;text-align:center;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s,background .3s}
.opt input,.chip-opt input,.mode input{position:absolute;opacity:0;pointer-events:none}
.opt:hover{transform:translateY(-4px);border-color:#0b0b0b;box-shadow:0 18px 30px -20px rgba(0,0,0,.35)}
.opt-ic{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#f0f0f0;transition:background .3s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.opt-ic svg{width:28px;height:28px;fill:none;stroke:#0b0b0b;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.opt-big{font:800 38px/1 var(--head);letter-spacing:-.03em}
.opt-t{font-weight:600;font-size:15.5px;line-height:1.25}
.opt:has(input:checked){border-color:#0b0b0b;background:#c2f200;box-shadow:0 18px 34px -18px rgba(150,190,0,.9)}
.opt:has(input:checked) .opt-ic{background:#0b0b0b;transform:scale(1.08) rotate(-6deg)}
.opt:has(input:checked) .opt-ic svg{stroke:#c2f200}
.opt::after{content:"";position:absolute;right:12px;top:12px;width:22px;height:22px;border-radius:50%;background:#0b0b0b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2f200' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/13px no-repeat;transform:scale(0);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.opt:has(input:checked)::after{transform:scale(1)}
.opt:has(input:focus-visible),.chip-opt:has(input:focus-visible),.mode label:has(input:focus-visible){outline:3px solid #0b0b0b;outline-offset:3px}

.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.chip-opt span{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;border:1.5px solid #e2e2e2;background:#fafafa;font-size:15px;font-weight:500;cursor:pointer;transition:all .25s var(--ease)}
.chip-opt span::before{content:"+";font-weight:700;color:#888;transition:transform .3s}
.chip-opt:hover span{border-color:#0b0b0b}
.chip-opt input:checked + span{background:#c2f200;border-color:#0b0b0b;color:#0b0b0b}
.chip-opt input:checked + span::before{content:"✓";color:#0b0b0b}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field-full{grid-column:1/-1}
.field span{font-size:13.5px;font-weight:600;color:#333}
.field input{height:52px;border-radius:12px;border:1.5px solid #dedede;background:#fafafa;padding:0 16px;font:500 16px var(--body);color:#0b0b0b;transition:border-color .25s,box-shadow .25s,background .25s;outline:none;width:100%}
.field input:focus{border-color:#0b0b0b;background:#fff;box-shadow:0 0 0 4px rgba(194,242,0,.55)}
.field input.invalid{border-color:#d93025;box-shadow:0 0 0 4px rgba(217,48,37,.12)}
.field-inline{max-width:420px}
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:20px;font-size:13.5px;line-height:1.45;color:#444;cursor:pointer}
.consent input{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:22px;height:22px;margin-top:1px;border-radius:6px;border:1.5px solid #bdbdbd;background:#fff;display:grid;place-items:center;cursor:pointer;transition:all .2s}
.consent input:checked{background:#c2f200;border-color:#0b0b0b}
.consent input:checked::after{content:"";width:6px;height:11px;border:solid #0b0b0b;border-width:0 2.5px 2.5px 0;transform:translateY(-1px) rotate(45deg)}
.consent input.invalid{border-color:#d93025}
.consent a{text-decoration:underline}
.fstep-error{min-height:20px;margin:12px 0 0;font-size:14px;font-weight:600;color:#d93025}
.fstep-nav{margin-top:14px}
.fstep-nav .btn-primary{height:54px}
.trust{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:13px;color:#666}
.trust svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:#0b0b0b;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.funnel-footer{margin-top:18px;min-height:26px}
.funnel-prev{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:600;color:#555;transition:color .25s}
.funnel-prev svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.funnel-prev:hover{color:#0b0b0b}
.funnel-prev[hidden]{display:none}
.funnel-card.sending{pointer-events:none}
.funnel-card.sending .btn-primary span{opacity:.6}

.funnel-trust{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 34px;margin-top:30px;font-size:14px;color:#cfcfcf}
.funnel-trust li{display:flex;align-items:center;gap:8px}
.funnel-trust li::before{content:"";width:18px;height:18px;border-radius:50%;background:#c2f200 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b0b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/11px no-repeat}
.funnel-trust b{color:#c2f200;font-weight:700}

/* Dankeseite */
.thanks-check{display:inline-block;width:72px;height:72px}
.thanks-check svg{width:100%;height:100%}
.thanks-check circle{fill:#c2f200;transform-origin:center;animation:popIn .6s cubic-bezier(.34,1.56,.64,1) both}
.thanks-check path{fill:none;stroke:#0b0b0b;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:drawCheck .5s .45s var(--ease) forwards}
.thanks-check.big{width:84px;height:84px;margin-bottom:12px}
@keyframes popIn{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes drawCheck{to{stroke-dashoffset:0}}
.booking-steps{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:26px;font-size:13px;font-weight:600;color:#999}
.booking-steps i{width:34px;height:2px;background:#e5e5e5}
.bs{padding:6px 12px;border-radius:999px;background:#f2f2f2}
.bs.done{background:#0b0b0b;color:#c2f200}
.bs.active{background:#c2f200;color:#0b0b0b}
.booking-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:34px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.cal-head h2{font:800 20px/1 var(--head);text-transform:uppercase;letter-spacing:-.01em}
.cal-nav{width:40px;height:40px;border-radius:50%;border:1.5px solid #e2e2e2;display:grid;place-items:center;transition:all .25s}
.cal-nav svg{width:18px;height:18px;fill:none;stroke:#0b0b0b;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cal-nav:hover:not(:disabled){background:#0b0b0b;border-color:#0b0b0b}
.cal-nav:hover:not(:disabled) svg{stroke:#c2f200}
.cal-nav:disabled{opacity:.3;cursor:default}
.cal-week,.cal-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-week span{text-align:center;font-size:12px;font-weight:700;color:#999;text-transform:uppercase;padding-bottom:6px}
.cal-day{aspect-ratio:1;border-radius:12px;display:grid;place-items:center;font:600 15px/1 var(--body);color:#c4c4c4;position:relative;transition:all .25s var(--ease)}
.cal-day.avail{color:#0b0b0b;background:#f4f8e4;cursor:pointer}
.cal-day.avail::after{content:"";position:absolute;bottom:6px;width:5px;height:5px;border-radius:50%;background:#8fb300}
.cal-day.avail:hover{background:#0b0b0b;color:#c2f200;transform:translateY(-2px)}
.cal-day.today{box-shadow:inset 0 0 0 1.5px #0b0b0b}
.cal-day.selected{background:#c2f200!important;color:#0b0b0b!important;box-shadow:0 10px 20px -10px rgba(150,190,0,.9),inset 0 0 0 2px #0b0b0b;transform:scale(1.05)}
.cal-day.selected::after{background:#0b0b0b}
.cal-legend{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:12.5px;color:#777}
.cal-legend .dot{width:10px;height:10px;border-radius:3px;background:#f4f8e4;box-shadow:inset 0 0 0 1px #c6dd6e}
.slots h3{font:800 17px/1.25 var(--head);text-transform:uppercase;margin:8px 0 16px}
.slot-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:330px;overflow:auto;padding:2px 4px 2px 2px}
.slots-empty{grid-column:1/-1;font-size:14.5px;color:#777;line-height:1.5;background:#f7f7f7;border-radius:14px;padding:18px}
.slot{height:46px;border-radius:12px;border:1.5px solid #e2e2e2;background:#fff;font:600 15px/1 var(--body);color:#0b0b0b;transition:all .25s var(--ease);opacity:0;animation:slotIn .35s var(--ease) forwards}
@keyframes slotIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.slot:hover{border-color:#0b0b0b;transform:translateY(-2px)}
.slot.selected{background:#0b0b0b;border-color:#0b0b0b;color:#c2f200}
.slot-summary{margin-top:18px;padding-top:18px;border-top:1px solid #eee;animation:stepIn .4s var(--ease) both}
.slot-summary > p{display:flex;gap:10px;align-items:flex-start;font-weight:600;font-size:15px;line-height:1.4;margin-bottom:14px}
.slot-summary > p svg{width:22px;height:22px;flex:0 0 auto;fill:none;stroke:#0b0b0b;stroke-width:1.8;stroke-linecap:round}
.mode{display:flex;gap:8px;margin-bottom:16px}
.mode label{position:relative}
.mode span{display:inline-block;padding:9px 16px;border-radius:999px;border:1.5px solid #e2e2e2;font-size:14px;font-weight:600;cursor:pointer;transition:all .25s}
.mode input:checked + span{background:#c2f200;border-color:#0b0b0b}
.slot-summary .btn-primary{width:100%;justify-content:space-between}
.booked{text-align:center;padding:44px 40px}
.booked .h-card{margin-bottom:10px}
.booked-when-wrap{margin-bottom:14px}
.booked-when{font:700 18px/1.6 var(--head);background:linear-gradient(180deg,transparent 52%,#c2f200 52%,#c2f200 90%,transparent 90%);padding:0 .2em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.booked p:not(.booked-when-wrap){color:#444;max-width:460px;margin:0 auto}
.booked-actions{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:26px}
.link-back{font-size:14.5px;font-weight:600;text-decoration:underline;color:#333}
.funnel-card[hidden]{display:none}

@media (max-width:760px){
  .funnel-main{padding:34px 0 60px}
  .funnel-card{padding:24px 18px 22px;border-radius:20px}
  .options-4,.options-3{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .options-3 .opt:last-child{grid-column:1/-1}
  .opt{min-height:118px;padding:16px 10px;border-radius:16px}
  .opt-ic{width:48px;height:48px}.opt-ic svg{width:24px;height:24px}
  .opt-big{font-size:30px}
  .opt-t{font-size:14.5px}
  .fields{grid-template-columns:1fr}
  .chip-opt span{padding:10px 14px;font-size:14px}
  .booking-grid{grid-template-columns:1fr;gap:26px}
  .slot-list{max-height:none}
  .funnel-back-home span{display:none}
  .funnel-header{height:70px}
  .booked{padding:34px 20px}
  .funnel-trust{flex-direction:column;align-items:center;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .fstep.is-active,.funnel-card,.slot,.slot-summary{animation:none;opacity:1}
  .thanks-check circle,.thanks-check path{animation:none;stroke-dashoffset:0}
}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.slot.taken{opacity:.45;text-decoration:line-through;cursor:not-allowed}
.slot:disabled:hover{transform:none;border-color:#e2e2e2}
