@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/plex-sans-var.woff2) format('woff2')}
@font-face{font-family:'Silkscreen';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/silkscreen-700.woff2) format('woff2')}
:root{--bg:#050505;--line:rgba(255,255,255,.1);--txt:#f2f2f2;--mut:#b9b9b9;--surface:#0e0e10;--field:#121214;--accent:#f29b30;--err:#ff9a8a;--grad:linear-gradient(90deg,#f29b30,#f2441d)}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;font-family:'IBM Plex Sans',system-ui,sans-serif;color:var(--txt);line-height:1.5;overflow-x:clip;position:relative;isolation:isolate}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 35% at 50% 0%,rgba(242,68,29,.09),transparent 70%),linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(180deg,#050505 0%,#121315 100%);background-size:100% 100%,40px 40px,40px 40px,100% 100%}
a{color:inherit}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Kopf: Logo, Zurück, Position, Fortschritt */
.f-header{position:sticky;top:0;z-index:10;background:rgba(5,5,5,.96);border-bottom:1px solid var(--line)}
.f-header-inner{max-width:640px;margin:0 auto;padding:6px 12px 10px;display:grid;grid-template-columns:5.5rem 1fr 5.5rem;align-items:center;column-gap:8px;row-gap:6px}
.f-logo{display:block;justify-self:center;width:148px;height:auto}
.f-back{justify-self:start;display:inline-flex;align-items:center;gap:4px;min-width:44px;min-height:44px;padding:0 8px 0 4px;background:none;border:0;border-radius:6px;color:var(--mut);font:inherit;font-size:15px;cursor:pointer}
.f-back:hover{color:#fff}
.f-back.is-hidden{visibility:hidden}
.f-pos{justify-self:end;font-size:13px;color:var(--mut);white-space:nowrap}
.f-progress{grid-column:1/-1;height:6px;background:rgba(255,255,255,.09);border-radius:99px;overflow:hidden}
.f-progress-bar{height:100%;width:0;background:var(--grad);border-radius:inherit;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.f-status{grid-column:1/-1;margin:0;font-size:14px;color:var(--mut);text-align:center}

/* Inhalt */
.f-main{flex:1;width:100%;max-width:640px;margin:0 auto;padding:22px 16px 28px}
.f-step{animation:f-in .2s ease both}
@keyframes f-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.f-title{margin:0 0 6px;font-size:clamp(22px,6.2vw,30px);line-height:1.22;font-weight:600;letter-spacing:-.01em;outline:none}
.f-title label{cursor:inherit}
.f-hint{margin:0 0 16px;color:var(--mut);font-size:15.5px}
fieldset{margin:0;padding:0;border:0;min-width:0}
legend{padding:0;width:100%}

/* Antwortkarten */
.f-options{display:grid;gap:10px;margin-top:16px}
.f-option{position:relative;display:flex;align-items:center;gap:14px;min-height:56px;padding:13px 16px;background:var(--surface);border:1.5px solid rgba(255,255,255,.18);border-radius:10px;font-size:17px;font-weight:500;line-height:1.3;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:border-color .15s ease,background-color .15s ease}
.f-option:hover{border-color:rgba(242,155,48,.65)}
.f-option input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.f-dot{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.45);display:grid;place-items:center;transition:border-color .15s ease}
.f-dot::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .15s ease}
.f-option.is-selected{border-color:var(--accent);background:rgba(242,155,48,.12)}
.f-option.is-selected .f-dot{border-color:var(--accent)}
.f-option.is-selected .f-dot::after{transform:scale(1)}
.f-option.is-confirming{animation:f-confirm .2s ease}
@keyframes f-confirm{50%{transform:scale(.985)}}
.f-option:has(input:focus-visible){outline:3px solid #fff;outline-offset:2px}

/* Eingabefelder */
.f-fields{display:grid;gap:14px;margin-top:16px}
.f-label{display:block;margin:0 0 6px;font-size:15px;font-weight:600}
.f-input{display:block;width:100%;min-height:54px;padding:12px 14px;font:inherit;font-size:18px;color:var(--txt);background:var(--field);border:1.5px solid rgba(255,255,255,.24);border-radius:10px;scroll-margin:96px 0 140px}
.f-input::placeholder{color:#808080}
.f-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(242,155,48,.35)}
.f-input[aria-invalid="true"]{border-color:var(--err)}
select.f-input{appearance:none;-webkit-appearance:none;padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,#bbb 50%),linear-gradient(135deg,#bbb 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.f-phone{display:grid;grid-template-columns:minmax(0,8.2rem) minmax(0,1fr);gap:8px}
.f-error{display:flex;gap:6px;margin:8px 0 0;color:var(--err);font-size:15px;line-height:1.35}
.f-error[hidden]{display:none}
.f-error::before{content:'!';flex:none;display:grid;place-items:center;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--err);color:#1a0b08;font-size:12px;font-weight:700}

/* Aktionen */
.f-actions{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:22px}
.f-note{margin:0;color:var(--mut);font-size:14px}
.f-note a{color:#d6d6d6}
.f-alert{margin:0 0 4px;padding:12px 14px;border:1px solid rgba(255,154,138,.5);border-radius:10px;background:rgba(255,120,100,.08);color:#ffd2ca;font-size:15px}
.f-alert[hidden]{display:none}
.f-banner{margin:0 0 18px;padding:12px 14px;border:1px solid rgba(242,155,48,.35);border-radius:10px;background:rgba(242,155,48,.08);font-size:15px}
.f-banner a{color:var(--accent);font-weight:600}

.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:12px 16px;margin-bottom:12px;font-family:'Silkscreen',monospace;font-weight:700;text-transform:uppercase;font-size:clamp(14px,4.4vw,18px);line-height:1.3;color:#fff;text-shadow:2px 2px 0 #612b1b;text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer;border:4px solid transparent;border-radius:0;background:linear-gradient(90deg,#C92E12,#D66D16) top left/100% 4px no-repeat padding-box,linear-gradient(180deg,#C92E12,#D66D16) top left/4px 100% no-repeat padding-box,linear-gradient(90deg,#FF9A78,#FFD07A) bottom left/100% 4px no-repeat padding-box,linear-gradient(180deg,#FF9A78,#FFD07A) top right/4px 100% no-repeat padding-box,linear-gradient(90deg,#F2441D,#F29B30) padding-box,linear-gradient(90deg,#961F0B,#A94B0D) border-box;transition:transform .06s steps(2)}
.btn::before{content:'';position:absolute;z-index:-1;left:-4px;right:-4px;bottom:-12px;height:8px;background:linear-gradient(90deg,#651407,#742E08)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(2px)}
.btn:focus-visible{outline:3px solid #fff;outline-offset:6px}
.btn[aria-disabled="true"],.btn:disabled{cursor:progress;filter:saturate(.6) brightness(.85);transform:none}
.btn-small{font-size:clamp(13px,4vw,16px)}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 18px;border:1.5px solid rgba(255,255,255,.28);border-radius:10px;background:transparent;color:var(--txt);font:inherit;font-size:16px;font-weight:600;text-decoration:none;cursor:pointer}
.btn-ghost:hover{border-color:var(--accent)}
.btn-ghost:focus-visible,.f-back:focus-visible,.f-footer a:focus-visible,.f-note a:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* Abschluss- und Infoseiten */
.f-end{padding-top:12px}
.f-end .f-title{margin-bottom:12px}
.f-end p{margin:0 0 14px;color:#d9d9d9;font-size:17px}
.f-end .f-actions{margin-top:26px}

/* Terminbuchung */
.f-wide{max-width:960px}
.f-lead{margin:0 0 10px;color:#d9d9d9;font-size:17px}
.f-cta-line{margin:18px 0 14px;font-size:18px;font-weight:600}
.f-cal{position:relative;min-height:700px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.f-cal-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--surface);color:var(--mut);font-size:16px;text-align:center;padding:20px}
.f-cal-loading[hidden]{display:none}
.f-spinner{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--accent);animation:f-spin .9s linear infinite}
@keyframes f-spin{to{transform:rotate(360deg)}}
.f-cal .calendly-inline-widget,.f-cal iframe{width:100%;height:700px;border:0;display:block}
.f-fallback{margin:14px 0 0;font-size:15px;color:var(--mut)}
.f-fallback a{color:var(--accent);font-weight:600}
.f-details{margin:18px 0;padding:16px 18px;border:1px solid rgba(242,155,48,.35);border-radius:10px;background:rgba(242,155,48,.07)}
.f-details dt{font-size:14px;color:var(--mut)}
.f-details dd{margin:0 0 10px;font-size:17px;font-weight:600}
.f-details dd:last-child{margin-bottom:0}
.f-links{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}

/* Seite /anfrage/ mit eingebettetem Heyflow – Kopfzeile identisch zur Landingpage (ohne Navigation) */
html:has(.f-flow){scrollbar-gutter:stable}
.site-header{position:sticky;top:0;z-index:1000;background:rgba(5,5,5,.96);border-bottom:1px solid var(--line)}
.header-inner{max-width:1100px;margin:0 auto;height:64px;padding:0 20px;display:flex;align-items:center;justify-content:center}
.logo-link{display:block;text-decoration:none}
.logo-link:focus-visible{outline:3px solid #fff;outline-offset:4px}
.logo{display:block;width:min(240px,64vw);height:auto}
@media(min-width:768px){.header-inner{height:84px;justify-content:space-between}.logo{width:320px}}
.f-flow{max-width:760px;min-height:70vh;padding-left:12px;padding-right:12px}
.f-flow heyflow-wrapper{display:block;width:100%}
.site-footer{border-top:1px solid var(--line);padding:22px 0;color:#b4b4b4;font-size:14px}
.footer-inner{width:100%;max-width:1100px;margin:0 auto;padding:0 20px;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between}
.footer-links{display:flex;gap:18px}
.footer-links a{text-decoration:none}
.footer-links a:hover{color:#fff}

.f-footer{padding:14px 16px 18px;text-align:center;font-size:13px;color:#8d8d8d}
.f-footer a{display:inline-block;padding:6px 8px;color:#a5a5a5;text-decoration:none}
.f-footer a:hover{color:#fff}
.f-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

@media(min-width:640px){
  .f-header-inner{padding:8px 20px 12px}
  .f-logo{width:180px}
  .f-main{padding-top:40px}
  .btn{width:auto;min-width:260px;align-self:flex-start;padding:12px 24px}
  .f-end .btn{align-self:flex-start}
}
@media(max-width:639px){
  .f-cal,.f-cal .calendly-inline-widget,.f-cal iframe{height:920px;min-height:920px}
}
@media(max-height:620px){
  .f-main{padding-top:12px}
  .f-hint{margin-bottom:10px}
  .f-options{gap:8px;margin-top:10px}
  .f-option{min-height:50px;padding:10px 14px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}