:root{
  --red:#c41c2d; --red-dark:#a21424; --ink:#202124; --muted:#6f7278;
  --line:#e7e8eb; --soft:#f5f5f7; --white:#fff;
  --shadow:0 14px 40px rgba(0,0,0,.08); --radius:22px;
}
*{box-sizing:border-box}
html{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:#f1f2f4;color:var(--ink)}
body{margin:0;min-height:100vh}
.topbar{background:linear-gradient(135deg,#b51627,#d12335);color:#fff;padding:18px 20px;box-shadow:0 3px 12px rgba(0,0,0,.12)}
.brand{max-width:880px;margin:auto;display:flex;align-items:center;gap:13px}
.logo-wrap{width:58px;height:58px;background:#fff;border-radius:12px;padding:5px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(0,0,0,.10)}
.brand-logo{display:block;width:100%;height:100%;object-fit:contain;border-radius:8px}
.company{font-weight:800;font-size:1.02rem;line-height:1.2}
.company-sub{font-size:.8rem;opacity:.88;margin-top:2px}
.wrap{width:min(880px,calc(100% - 28px));margin:0 auto;padding:34px 0 30px}
.hero{text-align:center;padding:10px 8px 24px}
h1{font-size:clamp(2rem,6vw,3rem);margin:8px 0 12px;line-height:1.05}
.hero p{max-width:640px;margin:0 auto;color:var(--muted);font-size:1rem;line-height:1.6}
.card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.info-strip.single{display:grid;grid-template-columns:1fr;background:#202124;color:#fff}
.info-strip.single>div{padding:17px 12px;text-align:center}
.info-strip.single strong{font-size:1rem}
form{padding:28px}
.section-title{display:flex;gap:12px;align-items:flex-start;margin-bottom:18px}
.section-title.spaced{margin-top:31px}
.section-title>span{width:30px;height:30px;display:grid;place-items:center;background:var(--red);color:white;border-radius:50%;font-weight:800;flex:0 0 auto}
.section-title h2{font-size:1.05rem;margin:2px 0 2px}
.section-title p{color:var(--muted);font-size:.82rem;margin:0}
.grid{display:grid;gap:16px}
.grid.two{grid-template-columns:1fr 1fr}
.field{display:block;margin-bottom:16px}
.field>span,.slot-field legend{display:block;font-size:.84rem;font-weight:750;margin:0 0 7px}
input,select{width:100%;height:49px;border:1px solid #d9dbe0;border-radius:12px;padding:0 13px;font:inherit;background:#fff;color:var(--ink);outline:none;transition:.15s}
input:focus,select:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(196,28,45,.10)}
input.invalid,select.invalid{border-color:#b00020}
.hint{display:block;margin-top:6px;color:var(--muted);font-size:.73rem}
.error{display:none;margin-top:6px;color:#b00020;font-size:.73rem}
.error.show{display:block}
.slot-field{border:0;padding:0;margin:2px 0 24px}
.slots{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.slots label{cursor:pointer}
.slots input{position:absolute;opacity:0;pointer-events:none}
.slots span{display:block;text-align:center;border:1px solid #d9dbe0;border-radius:13px;padding:11px 8px;font-weight:800;background:#fff;transition:.15s}
.slots small{font-weight:500;color:var(--muted);font-size:.7rem}
.slots input:checked+span{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 6px 18px rgba(196,28,45,.22)}
.slots input:checked+span small{color:#fff}
.slots input:focus-visible+span{outline:3px solid rgba(196,28,45,.22)}
.alternative{border:1px solid var(--line);border-radius:14px;margin:2px 0 22px;background:#fbfbfc}
.alternative summary{cursor:pointer;padding:14px 15px;font-weight:750;font-size:.85rem}
.alternative summary span{color:var(--muted);font-weight:500}
.details-inner{padding:4px 15px 2px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.78rem;line-height:1.45;color:#555960;margin:3px 0 20px}
.check input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--red);flex:0 0 auto}
.primary{width:100%;border:0;border-radius:14px;background:var(--red);color:#fff;min-height:54px;padding:0 18px;font-size:.95rem;font-weight:850;display:flex;align-items:center;justify-content:space-between;cursor:pointer;box-shadow:0 10px 22px rgba(196,28,45,.22);transition:.15s}
.primary:hover{background:var(--red-dark);transform:translateY(-1px)}
.primary:disabled{opacity:.65;cursor:wait;transform:none}
.notice{font-size:.75rem;color:var(--muted);line-height:1.5;text-align:center;margin:13px 0 0}
.notice-important{margin:18px 0 0;padding:15px 17px;font-size:1rem;line-height:1.55;color:#202124;background:#f5f5f7;border-radius:12px;text-align:center}
.notice-important strong{font-size:1.08rem}
.important-note{margin:6px 0 22px;border:2px solid #c41c2d;background:#fff7f8;border-radius:14px;padding:16px 17px;box-shadow:0 6px 16px rgba(196,28,45,.08)}
.important-note-title{color:#c41c2d;font-size:.9rem;font-weight:900;text-transform:uppercase;letter-spacing:.03em;margin-bottom:7px}
.important-note p{margin:0;color:#3d3f43;font-size:.84rem;line-height:1.55}
.contact-card{margin:18px 0 0;background:#fff;border-radius:16px;padding:18px 20px;display:flex;gap:12px 18px;flex-wrap:wrap;align-items:center;justify-content:center;text-align:center;border:1px solid #e6e7e9}
.contact-card strong{width:100%}
.contact-card a{color:var(--red);font-weight:800;text-decoration:none}
.contact-card span{font-size:.78rem;color:var(--muted)}
footer{padding:20px 18px calc(22px + env(safe-area-inset-bottom));display:flex;gap:16px;justify-content:center;color:#777b81;font-size:.72rem}
footer a{color:inherit}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);background:#202124;color:#fff;border-radius:12px;padding:12px 16px;font-size:.82rem;opacity:0;pointer-events:none;transition:.2s;z-index:20;max-width:calc(100% - 30px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* Kalender */
.calendar{border:1px solid #d9dbe0;border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 5px 16px rgba(0,0,0,.04)}
.calendar-head{display:grid;grid-template-columns:46px 1fr 46px;align-items:center;gap:8px;padding:12px;background:#202124;color:#fff}
.cal-title{text-align:center;font-size:.95rem}
.cal-nav{width:38px;height:38px;border:0;border-radius:10px;background:#fff;color:#202124;font-size:1.7rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.cal-nav:hover{background:#f0f0f2}
.cal-weekdays,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-weekdays{padding:9px 8px 4px;color:#70747a;font-size:.72rem;font-weight:800;text-align:center}
.cal-grid{gap:5px;padding:6px 8px 10px}
.cal-day,.cal-empty{min-height:42px}
.cal-day{border:0;border-radius:10px;background:#f2f3f5;color:#a1a4a9;font:inherit;font-size:.82rem;cursor:not-allowed}
.cal-day.allowed{background:#fff;color:#202124;border:1px solid #d9dbe0;cursor:pointer;font-weight:850}
.cal-day.allowed:hover{border-color:#c41c2d;background:#fff6f7}
.cal-day.selected{background:#c41c2d;color:#fff;border-color:#c41c2d;box-shadow:0 5px 12px rgba(196,28,45,.22)}
.cal-day.past{opacity:.45}
.selected-date{margin-top:10px;padding:10px 12px;border-radius:10px;background:#f5f5f7;font-size:.82rem;font-weight:750;color:#44474c}
.clear-alt{margin-top:8px;border:0;background:transparent;color:#c41c2d;font-size:.75rem;font-weight:750;cursor:pointer;padding:2px 0}

@media(max-width:720px){
  .slots{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .wrap{width:min(100% - 18px,880px);padding-top:22px}
  form{padding:22px 17px}
  .grid.two{grid-template-columns:1fr;gap:0}
  .hero p{font-size:.91rem}
  .topbar{padding:14px}
  .company{font-size:.92rem}
  .cal-day,.cal-empty{min-height:39px}
  .calendar-head{grid-template-columns:42px 1fr 42px;padding:9px}
  .cal-nav{width:34px;height:34px}
  .cal-grid{gap:4px;padding:5px 6px 9px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}


/* Transparente, nicht buchbare Tage */
.cal-day.transparent-day{
  background:transparent;
  border:1px solid transparent;
  color:rgba(32,33,36,.14);
  box-shadow:none;
  cursor:not-allowed;
}
.cal-day.transparent-day.past{
  color:rgba(32,33,36,.08);
}
.old-calendar .cal-day,
.old-calendar .cal-empty{
  min-height:38px;
}


/* Ausklappbarer Kalender für bisherigen Termin */
.calendar-dropdown{
  border:1px solid #d9dbe0;
  border-radius:12px;
  background:#fff;
  overflow:hidden;
}
.calendar-dropdown summary{
  list-style:none;
  min-height:49px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  cursor:pointer;
  font:inherit;
  color:var(--ink);
  user-select:none;
}
.calendar-dropdown summary::-webkit-details-marker{
  display:none;
}
.calendar-dropdown summary::after{
  content:"⌄";
  font-size:1.2rem;
  color:#44474c;
  margin-left:12px;
  transition:transform .15s ease;
}
.calendar-dropdown[open] summary::after{
  transform:rotate(180deg);
}
.calendar-dropdown[open]{
  box-shadow:0 0 0 3px rgba(196,28,45,.10);
  border-color:var(--red);
}
.old-date-field .calendar{
  border:0;
  border-top:1px solid #ececef;
  border-radius:0;
  box-shadow:none;
}
.old-calendar .cal-day,
.old-calendar .cal-empty{
  min-height:38px;
}
.cal-day.transparent-day{
  background:transparent;
  border:1px solid transparent;
  color:rgba(32,33,36,.14);
  box-shadow:none;
  cursor:not-allowed;
}
.cal-day.transparent-day.past{
  color:rgba(32,33,36,.08);
}