@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/inter-regular.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/inter-700.woff2) format("woff2")}
/* Farben/Schrift wie highspeedvorort.de (Tailwind-Variable --primary, Inter, Grautöne der Standortseiten) */
:root{--primary:#e21a74;--primary-dark:#b8145e;--primary-soft:#fde8f1;--text:#262626;--text2:#393939;--muted:#6b6b6b;--head:#757575;--line:#e5e7eb;--ring:#959ea9;--chip:#e5e7eb;--err:#c81e1e}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Inter,sans-serif;color:var(--text);background:#fff;line-height:1.5;font-size:16px}
a{color:var(--primary)}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:9;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Kopf wie Website: Logo links, Navigation rechts */
.top{background:#fff;position:relative;z-index:2}
.top-in{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 16px}
.logo{height:40px;width:auto;display:block}
.top nav a{color:var(--text);text-decoration:none;font-size:.95rem;padding:10px 4px}
.top nav a:hover{color:var(--primary)}
/* Hero-Fläche mit weißer Karte (Muster der Standortseiten) */
.hero{background:linear-gradient(135deg,#e21a74 0%,#c0125f 55%,#8e0d47 100%);padding:14px 10px 28px}
.card{background:#fff;max-width:520px;margin:0 auto;padding:22px 18px 26px;min-height:420px}
.super{text-transform:uppercase;margin:0;font-size:.95rem;letter-spacing:.01em;color:var(--text2)}
h1{margin:2px 0 14px;font-size:1.75rem;line-height:1.1;font-weight:700;text-transform:uppercase;color:var(--head);overflow-wrap:anywhere;hyphens:auto}
.steps{display:flex;gap:6px;list-style:none;margin:0 0 18px;padding:0;counter-reset:s}
.steps li{flex:1;font-size:.78rem;color:var(--muted);border-top:3px solid var(--line);padding-top:6px;counter-increment:s}
.steps li::before{content:counter(s) ". "}
.steps li.done-s{border-color:#f3a3c6;color:var(--text2)}
.steps li[aria-current]{border-color:var(--primary);color:var(--text);font-weight:700}
.step:focus{outline:none}
.ask{font-size:.95rem;font-weight:400;text-align:center;margin:0 0 12px;color:var(--text)}
.center{text-align:center}.muted{color:var(--muted)}.small{font-size:.85rem;margin:12px 0 0;text-align:center}
.notice{background:#fef2f2;border:1px solid #fecaca;color:#7f1d1d;padding:12px 14px;margin:0 0 16px;text-align:center;font-size:.95rem}
.notice.info{background:var(--primary-soft);border-color:#f7b6d2;color:#5c0b30}
/* Kalender im flatpickr-Stil der Website: runde Tage, freier Tag mit grauem Ring */
#cal{max-width:340px;margin:0 auto}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.month{font-size:1.15rem;font-weight:400;color:rgba(0,0,0,.9)}
.nav{width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.nav:disabled{opacity:.2;cursor:default}
.weekdays,.days{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;row-gap:4px}
.weekdays span{font-size:.8rem;font-weight:700;color:rgba(0,0,0,.54);padding:4px 0}
.day{justify-self:center;width:44px;height:44px;border-radius:50%;border:1px solid transparent;background:transparent;font:inherit;color:rgba(57,57,57,.25);padding:0;position:relative}
.day.avail{color:var(--text2);border-color:var(--ring);cursor:pointer;font-weight:700}
@media (hover:hover){.day.avail:hover{border-color:var(--primary);color:var(--primary)}.time:hover{border-color:var(--primary);color:var(--primary)}.nav:hover:not(:disabled){background:#f3f4f6}}
.day[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:#fff}
.day.today::after{content:"";position:absolute;left:50%;bottom:5px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor;opacity:.6}
.legend{font-size:.8rem;color:var(--muted);text-align:center;margin:12px 0 0;display:flex;align-items:center;justify-content:center;gap:6px}
.lg-dot{display:inline-block;width:16px;height:16px;border-radius:50%;border:1px solid var(--ring)}
/* Schritt 2 */
.back{background:none;border:0;padding:8px 0;margin:0 0 8px;font:inherit;font-size:.9rem;color:var(--muted);cursor:pointer;min-height:44px}
.back:hover{color:var(--primary)}
.badge{display:table;margin:0 auto 14px;background:#757575;color:#fff;padding:6px 12px;font-size:1rem;text-align:center}
.times{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 10px}
.time{min-height:48px;border-radius:999px;border:1px solid var(--line);background:#fff;font:inherit;color:var(--text);cursor:pointer;padding:6px 8px;white-space:nowrap}
.time[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:#fff}
/* Schritt 3 */
.chosen{background:#f9fafb;border-left:4px solid var(--primary);padding:12px 14px;margin:0 0 18px}
.chosen-label{margin:0 0 6px;font-size:.9rem;color:var(--text2)}
.chosen-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chosen-grid .k{display:block;font-weight:700}
.link{background:none;border:0;padding:8px 0 0;font:inherit;font-size:.9rem;color:var(--primary);text-decoration:underline;cursor:pointer;min-height:36px}
.field{margin-bottom:14px}
label{display:block;font-size:.9rem;margin-bottom:4px;color:var(--text)}
.opt{color:var(--muted)}.req{color:var(--primary)}
.hint{font-size:.8rem;color:var(--muted);margin:4px 0 0}
input,textarea{width:100%;font:inherit;font-size:16px;padding:11px 12px;border:1px solid #d1d5db;border-radius:0;background:#fff;color:var(--text);-webkit-appearance:none;appearance:none}
textarea{resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(226,26,116,.18)}
:focus-visible{outline:3px solid rgba(226,26,116,.55);outline-offset:2px}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--err);background:#fffafa}
.err{color:var(--err);font-size:.85rem;margin:4px 0 0}
.err:empty{display:none}
.check{display:flex;gap:10px;align-items:flex-start;margin-bottom:6px}
.check input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--primary);-webkit-appearance:auto;appearance:auto}
.check label{font-size:.88rem;color:var(--text2);margin:0}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.btn{display:block;width:100%;margin-top:16px;min-height:52px;border:0;border-radius:0;background:var(--primary);color:#fff;font:inherit;font-weight:700;font-size:1.05rem;cursor:pointer;text-align:center;text-decoration:none;line-height:52px;padding:0 16px}
@media (hover:hover){.btn:hover{background:var(--primary-dark)}.btn-ghost:hover{background:var(--primary-soft)}}
.btn:disabled{opacity:.6;cursor:progress}
.btn-ghost{background:#fff;color:var(--primary);border:1.5px solid var(--primary);max-width:280px;margin:20px auto 0;line-height:49px}
.done{text-align:center;padding-top:6px}
.check-icon{width:64px;height:64px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.done-h{font-size:1.3rem;margin:0 0 8px}
.done-date{font-size:1.1rem;font-weight:700;color:var(--primary-dark);background:var(--primary-soft);padding:12px;margin:14px 0}
.foot{background:#262626;color:#bdbdbd;text-align:center;font-size:.88rem;padding:24px 16px 32px}
.foot p{margin:4px 0}.foot a{color:#fff}
a.tel{white-space:nowrap}
@media (min-width:420px){.times{grid-template-columns:repeat(3,1fr)}}
@media (min-width:860px){
  .hero{padding:72px 16px 80px}
  .card{padding:32px 40px 36px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
  h1{font-size:2.1rem}
  .logo{height:48px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.more{display:block;margin:10px auto 0;background:none;border:0;font:inherit;font-size:.9rem;color:var(--primary);text-decoration:underline;cursor:pointer;min-height:44px}
