/* Shared with the IONOS draft: cream, wine, DM Sans and Times headings.
   Loaded last on both entry pages so component states share one palette. */
:root,
.voucher-page {
  --cream: #faf5e9;
  --paper: #fffdf8;
  --sand: #f0e6d4;
  --wine: #772f3c;
  --wine-dark: #5a1f2b;
  --rose: #f4e8e8;
  --brown: #372e29;
  --line: #d9cebb;
  --muted: #6c5e52;
  background: var(--cream);
  color: var(--brown);
  font-family: DM, Arial, sans-serif;
}
body { font-size: 16px; }
.wrap { max-width: 1280px; padding-inline: 50px; }
h1, h2, h3, legend, .step legend,
.planner-mode legend, .planner-weekdays legend, .planner-times legend,
.voucher-page h1, .voucher-page h2,
.repeat-period h3, .metric strong {
  font-family: "Times New Roman", Georgia, serif;
  font-weight: 400;
  font-synthesis: none;
}
h1, .voucher-page h1 {
  font-size: clamp(38px, 4.2vw, 56px);
  line-height: 1.08;
  letter-spacing: -.025em;
}
h2 { font-size: 30px; line-height: 1.2; }
h3 { font-size: 24px; }
.step legend { font-size: 24px; line-height: 1.3; margin-bottom: 22px; }
.eyebrow { color: var(--wine); font-size: 12px; letter-spacing: .16em; }
.intro, .voucher-page .intro { max-width: none; padding: 48px 0 36px; }
.intro > p:last-child { font-size: 17px; max-width: 760px; }
.hint, .empty, dt, .explain { color: var(--muted); }
.hint { font-size: 14px; }

/* Calm, continuous masthead instead of a separate dashboard's pill navigation. */
.environment {
  background: var(--sand);
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  padding: 7px max(20px, calc((100vw - 1180px) / 2));
}
.header, .voucher-page .header {
  min-height: 80px;
  padding-block: 12px;
  gap: 28px;
  border-bottom: 1px solid var(--line);
}
.brand-logo img { width: auto; height: 48px; }
.view-tabs {
  background: transparent;
  padding: 0;
  gap: 12px;
  border-radius: 0;
  align-items: center;
  flex-wrap: wrap;
}
.view-tabs a {
  color: var(--muted);
  border-radius: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
}
.view-tabs a:hover, .view-tabs a:focus,
.view-tabs a[aria-current], .voucher-page .view-tabs a[aria-current] {
  background: transparent;
  color: var(--wine);
  border-bottom-color: var(--wine);
}
.view-tabs .website-link { font-size: 13px; }
.admin-page .nav-voucher { display: none; }
.layout { gap: 36px; }
.layout > *, .voucher-layout > *, .step { min-width: 0; }
.voucher-amount { min-width: 0; width: 100%; }
.voucher-amount input { min-width: 0; }
.card, .slot, .request, .metrics, .calendar-panel, .outbox-panel,
.privacy-item, .privacy-metrics > div, .planner-exceptions,
.planning-calendar, .planner-time-row, .date-picker, .time, .date-card,
.voucher-page .card, .summary, .voucher-checkout, .booking-voucher {
  border-radius: 2px;
  border-color: var(--line);
}
.card, .slot, .request, .metrics, .calendar-panel, .outbox-panel,
.voucher-page .card, .date-picker, .planning-calendar, .planner-time-row {
  background: var(--paper);
}
.card, .voucher-page .card { padding: 30px; }
.step + .step { border-color: var(--line); margin-top: 32px; padding-top: 28px; }
button, .booking-voucher-link {
  border-radius: 1px;
  transition: background-color .15s, border-color .15s, color .15s;
}
button:hover:not(:disabled):not(.secondary):not([aria-pressed]):not(.calendar-day):not([data-pick-day]) {
  filter: brightness(.94);
}
.secondary:hover:not(:disabled) { background: var(--rose); }
input:not([type=checkbox]):not([type=radio]), select,
.party-fields input, .voucher-amount input {
  border-color: var(--line);
  border-radius: 1px;
  background: var(--paper);
  color: var(--brown);
}
input:focus-visible, select:focus-visible, button:focus-visible,
a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: 4px;
}
button:disabled { opacity: .48; }
.counter button, .picker-nav button, .planning-month-nav button {
  background: var(--sand);
  color: var(--brown);
  border-color: var(--line);
}
.party-fields > .field { font-size: 14px; }
.party-fields .hint { font-size: 13px; }
.summary, .voucher-checkout {
  background: var(--sand);
  color: var(--brown);
  border: 1px solid var(--line);
  border-top: 3px solid var(--wine);
  padding: 28px;
}
.summary h2, .voucher-checkout h2 { color: var(--brown); font-size: 30px; line-height: 1.2; }
.summary .eyebrow { color: var(--wine); }
.summary dt { color: var(--muted); }
.summary dl > div { border-color: #d3c6b0; }
.summary .important { color: var(--muted); border-color: var(--wine); }
.explain h3 { font-size: 23px; color: var(--brown); }
.explain li { font-size: 14px; padding-block: 6px; }
.notice, .planner-preview, pre.mail, .planner-fixed-date {
  background: var(--sand); color: var(--brown); border-radius: 2px;
}
.notice { border-color: var(--wine); }
.success, dialog { background: var(--paper); border-color: var(--line); border-radius: 2px; }

/* Requests use wine; green is reserved for confirmed places. */
.recommended-dates, .privacy-notice, .privacy-exception-note,
.privacy-due, .privacy-unclear, .privacy-exception, .privacy-mailcheck,
.planner-availability {
  background: var(--rose);
  color: var(--wine-dark);
  border-color: var(--wine);
  border-radius: 2px;
}
.recommended-dates h3 { font-size: 23px; }
.recommended-dates button {
  background: var(--paper); color: var(--wine); border-color: #b78991;
}
.recommended-time { border-color: var(--wine); background: var(--rose); }
.recommend-badge { color: white; background: var(--wine); border-radius: 1px; }
.slot.has-requests { border: 2px solid var(--wine); background: var(--paper); }
.slot.has-requests > .eyebrow, .has-requests .slot-quick-counts > strong {
  color: var(--wine);
}
.requested-count, .slot-expanded .requested-count {
  background: var(--wine); color: white; border-radius: 2px;
}
.requested-count span, .slot-expanded .requested-count span { color: white; }
.badge { color: var(--wine); background: var(--rose); }
.confirmed-count { color: #35634a; }
.confirmed-count.unconfirmed-count { color: var(--muted); }
.slot.established { border-top-color: #35634a; }
.slot-summary { color: var(--brown); }
.metrics { border-block: 1px solid var(--line); }
.metric strong { font-size: 36px; color: var(--wine); }
.day-heading { font-size: 30px; }
.section-heading h2, .outbox-summary h2 { font-size: 28px; }
.calendar-panel > summary { font-family: "Times New Roman", Georgia, serif; font-size: 27px; font-weight: 400; }
.calendar-toggle-label { font-family: DM, Arial, sans-serif; }
.compact-slots .slot-time { font-size: 20px; }
.slot-repeat-action button { color: var(--wine); }

.picker-grid button, .planning-days button { background: var(--cream); color: var(--brown); border-radius: 2px; }
.picker-grid button:disabled, .planning-days button:disabled { background: transparent; }
.date-card[aria-pressed=true], .time:has(input:checked),
.planner-date-range button[aria-pressed=true],
.planner-weekdays label:has(:checked),
.planner-quick-times button[aria-pressed=true],
.planner-duration-options button[aria-pressed=true] {
  background: var(--rose);
  color: var(--wine-dark);
  border-color: var(--wine);
  box-shadow: inset 0 0 0 1px var(--wine);
}
.picker-grid button[aria-pressed=true], .planning-days button[aria-pressed=true],
.repeat-presets [aria-pressed=true] { background: var(--wine); color: white; box-shadow: none; }
.planning-days button:hover:not(:disabled):not([aria-pressed=true]) { background: var(--rose); border-color: var(--wine); }
.calendar, .calendar-day { background: var(--paper); }
.calendar-weekdays, .calendar-day.other-month { background: var(--sand); }
.calendar-day:hover, .calendar-day.selected { background: var(--rose); }
.calendar-time { background: var(--rose); border-color: var(--wine); color: var(--wine-dark); }
.calendar-time.confirmed { background: #e7efe8; border-color: #35634a; color: #2d5140; }
.calendar-time.closed { background: #eeeae4; border-color: #837c73; color: var(--muted); }
.calendar-day { border-radius: 0; }
.planner-heading h2 { font-size: 30px; }
.planner-layout h3, .repeat-period h3 { font-size: 23px; }
.planner-step { background: var(--rose); color: var(--wine); border-radius: 2px; }
.planner-time-control > button, .planner-weekdays label {
  background: var(--sand); color: var(--brown); border-color: var(--line); border-radius: 2px;
}
.planner-time-control > input { border-color: var(--line); border-radius: 2px; }
.planner-quick-times button, .planner-duration-options button,
.admin-day-picker > button, .repeat-until {
  background: var(--paper); color: var(--wine); border-color: var(--line);
}
.admin-day-picker > button span { color: var(--wine); }
.planner-date-range span, .planning-week { color: var(--muted); }
.planner-date-range button { background: var(--paper); }
.mail-item { background: var(--paper); border-radius: 2px; }
.mail-alternative { border-left-color: var(--wine); }
.mail-alternative .mail-kind { color: var(--wine); }
.mail-alternative .mail-icon { background: var(--rose); color: var(--wine); }
.mail-state, .privacy-status { border-radius: 2px; }
.operations-notice { background: var(--rose); color: var(--wine-dark); border-color: var(--wine); border-radius: 2px; }
.party-error, .planner-error, .mail-attention, .mail-error { background: #fae7e3; color: #902c29; border-radius: 2px; }

.booking-voucher { background: var(--sand); padding: 32px; margin-top: 48px; }
.booking-voucher h2 { font-size: 32px; }
.booking-voucher-link { background: var(--wine); }
.voucher-option { background: var(--paper); border-radius: 1px; }
.voucher-option:has(input:checked) { background: var(--rose); }
.voucher-preview { width: 100%; min-height: 0; background: var(--wine); border-color: var(--wine); color: var(--cream); }
.voucher-page .voucher-checkout button:disabled { background: #d9cdbf; color: #5a4c43; border-color: #bcad9b; opacity: 1; }
footer { font-size: 12px; line-height: 1.7; border-color: var(--line); padding-top: 24px; margin-top: 64px!important; }
footer nav { flex-wrap: wrap; }
footer a:hover { color: var(--wine); }
@media (max-width: 1000px) {
  .wrap { padding-inline: 30px; }
  .layout, .voucher-layout { gap: 24px; }
  .view-tabs { gap: 4px; }
  .view-tabs a { padding-inline: 8px; }
}
@media (max-width: 760px) {
  .wrap { padding-inline: 20px; }
  .header, .voucher-page .header, .header:has(.brand-logo) { padding-block: 14px; gap: 14px; }
  .brand-logo img { height: 48px; width: auto; }
  .view-tabs { gap: 2px 8px; }
  .view-tabs a { padding: 7px 3px; font-size: 13px; }
  .view-tabs .website-link { font-size: 12px; }
  .intro, .voucher-page .intro { padding: 32px 0 26px; }
  h1, .voucher-page h1 { font-size: clamp(36px, 7vw, 46px); }
  .intro > p:last-child { font-size: 16px; }
  .layout { grid-template-columns: 1fr; gap: 26px; }
  .card, .voucher-page .card, .summary, .voucher-checkout { padding: 22px; }
  .step legend { font-size: 22px; }
  .step + .step { margin-top: 28px; padding-top: 24px; }
  .party-fields { gap: 12px; }
  .party-fields > .field { font-size: 13px; }
  .metrics { gap: 16px 24px; }
  .section-heading h2, .outbox-summary h2, .day-heading { font-size: 27px; }
  .booking-voucher { padding: 24px; margin-top: 32px; }
  .booking-voucher h2 { font-size: 29px; }
  footer { margin-top: 44px!important; }
}
@media (max-width: 480px) {
  .view-tabs, .voucher-page .view-tabs { width: 100%; justify-content: space-between; }
  .voucher-page .view-tabs a { flex: none; }
  .header { gap: 8px; }
  .card, .voucher-page .card { padding: 18px; }
  .summary, .voucher-checkout { padding: 24px; }
  .planning-month-nav strong { font-size: 15px; }
}

/* The visibility control stays beside the password on small screens too. */
.password-control { display: flex; gap: 8px; align-items: stretch; min-width: 0; }
.password-control input { flex: 1; width: 0; min-width: 0; }
.password-control button { flex: 0 0 auto; min-width: 100px; padding-inline: 12px; font-size: 14px; }

/* A clear alternative for guests whose preferred time is not offered. */
.booking-help { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px 30px; margin:0 0 32px; background:var(--wine); color:var(--cream); }
.booking-help h2 { margin:0; font-size:clamp(28px,3vw,36px); color:inherit; }
.booking-help p { margin:10px 0 0; max-width:720px; font-size:17px; line-height:1.6; }
.booking-help-call { display:flex; flex-direction:column; flex:0 0 auto; min-height:48px; padding:12px 20px; background:var(--cream); color:var(--wine); text-decoration:none; text-align:center; border:1px solid var(--cream); }
.booking-help-call span { font-size:13px; }
.booking-help-call strong { font-size:20px; white-space:nowrap; }
.booking-help-call:hover { background:var(--sand); }
.booking-help-call:focus-visible { outline:3px solid var(--cream); outline-offset:4px; }
.series-auto-state { padding:12px 14px; background:var(--rose); color:var(--brown); font-size:14px; }
.series-auto-state strong,.series-auto-state span { display:block; }
.series-auto-state strong { margin-bottom:4px; }
@media(max-width:700px) { .booking-help { flex-direction:column; align-items:stretch; padding:22px; gap:18px; } .booking-help-call { width:100%; } }
.booking-choices{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 28px}.booking-choices a{border:1px solid #772f3c;padding:14px 22px;text-decoration:none;color:#772f3c}.booking-choices a[aria-current=page]{background:#772f3c;color:#faf5e9}.group-offer-info{background:#f1e7d2;padding:18px 22px;margin:20px 0;color:#372e29}.group-offer-info p{margin:8px 0}.group-time-controls{display:flex;gap:8px;max-width:300px}.group-time-controls input{width:130px;text-align:center}.group-quick-times{margin-top:12px}.group-admin{margin:28px 0;padding:24px;border:1px solid #d5c6b5;background:#fffaf0}.group-admin h2{margin-top:0}.group-request{background:#fffdf7;border:1px solid #d5c6b5;margin:12px 0}.group-request summary{display:flex;flex-wrap:wrap;gap:12px;padding:18px;cursor:pointer;color:#772f3c}.group-request summary strong{flex:1 1 220px}.group-request-body{padding:0 18px 18px}.group-notes{white-space:pre-wrap;overflow-wrap:anywhere}.group-request-body p{overflow-wrap:anywhere}#group-form textarea{width:100%;padding:14px;font:inherit;border:1px solid #d5c6b5;background:#fff}#group-form .planning-calendar,#group-confirm-form .planning-calendar{margin:16px 0}#group-form [hidden]{display:none!important}@media(max-width:600px){.booking-choices a{flex:1 1 auto;text-align:center}.group-admin{padding:16px}.group-request summary{display:grid;gap:6px}}

.group-phone-card{border:1px solid #d5c6b5;border-top:4px solid #772f3c;padding:32px;background:#fffaf0;max-width:900px}.group-phone-card h2{margin:0 0 18px}.group-phone-card>p{max-width:68ch}.group-call-button{display:inline-flex;align-items:center;justify-content:center;margin:12px 0;padding:18px 24px;background:#772f3c;color:#faf5e9!important;text-decoration:none;font-weight:600;border:1px solid #772f3c}.group-call-button:hover{background:#632532}.group-call-button:focus-visible{outline:3px solid #372e29;outline-offset:4px}.school-entry{margin:32px 0;max-width:900px;padding:24px 0;border-top:1px solid #d5c6b5}.school-entry h2{margin-top:0}@media(max-width:600px){.group-phone-card{padding:22px}.group-call-button{display:flex;padding:16px 12px;text-align:center}}
/* Einzelbuchungen bleiben direkt im jeweiligen Workshop bedienbar. */
.slot-bookings{margin-top:20px}.slot-bookings h3{font-family:DM,Arial,sans-serif;font-size:16px;font-weight:600;margin:0 0 8px}.slot-booking-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line)}.slot-booking-row>div{min-width:0;flex:1;overflow-wrap:anywhere}.slot-booking-row strong{font-size:15px}.slot-booking-row small{display:block;font-size:13px;color:var(--muted)}.slot .slot-booking-row .small{flex:0 0 auto;padding:8px 13px}.slot-cancelled{margin-top:16px}.slot-cancelled summary{font-size:13px;color:var(--muted)}
.group-reservation{padding:18px 20px;border-top:1px solid var(--line);background:var(--cream)}.group-reservation h3{font-size:20px;margin:0 0 8px}.group-reservation .slot-booking-row{flex-direction:column;align-items:stretch}.group-reservation .actions{display:flex;flex-direction:column;gap:8px}.slot .group-reservation .small{width:100%;white-space:normal}.reservation-queue{border-left:4px solid var(--wine)}
@media(max-width:540px){.slot-booking-row{align-items:flex-start;flex-direction:column;gap:8px}.slot .slot-booking-row .small{width:100%}}