/* Buchungsseite im Calendly-Look. Maße, Farben und Abstände aus der vermessenen Calendly-Seite (calendly-spec/SPEC.md).
   Layout-Modus per JS an <html>: m-desk (>= 1000 px), m-tab (650-999 px), m-phone (< 650 px) – wie Calendly. */

/* Schrift: Figtree (SIL OFL 1.1, public/fonts/LICENSE-figtree.txt), size-adjust je Schnitt an Proxima Nova angeglichen */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; ascent-override: 90%; descent-override: 30%; line-gap-override: 0%; size-adjust: 97.5%; src: url(/fonts/figtree-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; ascent-override: 90%; descent-override: 30%; line-gap-override: 0%; size-adjust: 97.5%; src: url(/fonts/figtree-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; ascent-override: 90%; descent-override: 30%; line-gap-override: 0%; size-adjust: 98.2%; src: url(/fonts/figtree-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; ascent-override: 90%; descent-override: 30%; line-gap-override: 0%; size-adjust: 98.2%; src: url(/fonts/figtree-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap; ascent-override: 90%; descent-override: 30%; line-gap-override: 0%; size-adjust: 99%; src: url(/fonts/figtree-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap; ascent-override: 90%; descent-override: 30%; line-gap-override: 0%; size-adjust: 99%; src: url(/fonts/figtree-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree Fallback"; src: local("Arial"); size-adjust: 96.8%; }

:root {
  --text: #0a2540; --text-secondary: #476788; --text-action: #004eba;
  --primary: #0069ff; --primary-hover: #005fe6; --primary-active: #004ab3;
  --action: #006bff; --action-hover: #004eba; --focus-ring: #0099ff; --icon: #0b3558;
  --page-bg: #fafafa; --divider: #d4e0ed; --input-border: #a6bbd1; --input-border-hover: #476788;
  --bookable-bg: #f4f8ff; --pill-hover-bg: #e6f0ff; --pill-hover-text: #004796;
  --error-border: #d53c00; --error-text: #b03200;
  --font: "Figtree", "Figtree Fallback", "Avenir", Roboto, "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--page-bg); color: var(--text); font: 400 14px/21px var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html.embedded, html.embedded body { background: transparent; }
[hidden] { display: none !important; }
button, input, textarea, select { font-family: var(--font); }
button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font-size: 14px; line-height: 21px; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
a { color: var(--text-action); text-decoration: none; }
svg { display: block; flex-shrink: 0; overflow: visible; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---------- Seite und Karte ---------- */
.page { display: flex; flex-direction: column; min-height: 100vh; }
.page-wrap { display: flex; justify-content: center; margin: 66px 0 30px; padding: 0 5%; }
@media (min-height: 797px) { .page-wrap { min-height: 700px; } }
@media (max-height: 796px) { .page-wrap { flex: 1 1 auto; } }
html.embedded .page { min-height: 0; }
html.embedded .page-wrap { flex: none; min-height: 700px; margin: 4px 0 24px; }
html.embedded.m-tab .page-wrap { min-height: 0; }
html.embedded.m-phone .page-wrap { min-height: 0; margin: 0; }
.card { position: relative; display: flex; flex: 1 1 auto; width: 100%; max-width: 800px; min-height: 550px; background: #fff; border: 1px solid var(--divider); border-radius: 8px; box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .08); transition: all .22s ease-out; }
.m-desk .card.has-times { min-width: 900px; max-width: 1060px; }

/* ---------- Seitenleiste (Gastgeber, Termin) ---------- */
.side { position: relative; width: 50%; min-width: 300px; padding-bottom: 25px; border-right: 1px solid var(--divider); transition: all .22s ease-out; }
.m-desk .card.has-times .side { width: 35%; }
.side-inner { display: flex; flex-direction: column; gap: 30px; height: 100%; }
.side-content { flex: 1 0 auto; min-height: 550px; padding-top: 25px; }
.back-row { display: flex; }
.back { display: flex; align-items: center; justify-content: center; flex: none; width: 43px; height: 43px; border: 1px solid var(--divider); border-radius: 50%; background-clip: padding-box; color: var(--text-action); font-size: 24px; line-height: 36px; }
.back:hover, .back:focus { background-color: var(--bookable-bg); outline: none; }
.back:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.back-row .back { margin: 0 0 24px 30px; }
.host-block { margin-bottom: 24px; }
.logo { display: block; width: 65px; height: 65px; margin: 0 0 7px 30px; border-radius: 50%; object-fit: cover; }
.host { padding: 0 10px 0 30px; color: var(--text-secondary); font-weight: 700; font-size: 16px; line-height: 24px; }
.title { padding: 0 10px 0 30px; color: var(--text); font-weight: 700; font-size: 28px; line-height: 32px; }
.details-wrap { padding: 0 30px; margin-bottom: 20px; }
.details { color: var(--text-secondary); font-weight: 700; font-size: 14px; line-height: 21px; }
.d-item { display: flex; align-items: center; margin-bottom: 12px; text-align: left; }
.d-item:last-child, .d-item.last { margin-bottom: 0; }
.d-ico { display: flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; margin-right: 8px; }
.d-ico24 { display: inline-block; flex: none; width: 24px; height: 24px; margin-right: 8px; }
.d-when .d-ico24 { color: var(--text-secondary); }
.desc-space { max-width: 400px; height: 24px; }
.hint { margin: 0 30px; padding: 10px 12px; border-radius: 8px; background: var(--bookable-bg); color: var(--text); font-weight: 400; font-size: 14px; line-height: 21px; }
.side-foot { display: flex; align-items: center; align-self: start; gap: 22px; height: 22px; padding: 0 10px 0 30px; }
.privacy-link { display: inline-flex; padding: 0 2px; margin: 0 -2px; color: var(--text-action); font-weight: 600; font-size: 14px; line-height: 21px; }
.privacy-link:hover { text-decoration: underline; }
.privacy-link:focus-visible { outline: none; border-radius: 4px; box-shadow: 0 0 0 2px var(--focus-ring); }

/* ---------- Hauptbereich ---------- */
.main { position: relative; display: flex; flex-direction: column; flex: 1 1 50%; width: 50%; min-width: 0; transition: all .22s ease-out; }
.loading { display: flex; justify-content: center; padding: 160px 0; }
.spinner { width: 36px; height: 36px; border: 3px solid var(--pill-hover-bg); border-top-color: var(--action); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.error { margin: 20px 32px 0; padding: 10px 14px; border: 1px solid var(--error-border); border-radius: 8px; background: #fff; color: var(--error-text); font-size: 14px; line-height: 21px; }
.m-head, .m-foot { display: none; }

/* Schritt 1/2: Kalender und Uhrzeiten */
.spotpicker { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; height: 100%; margin: 0 auto; width: 100%; padding-top: 28px; }
.card.has-times .spotpicker { min-width: 585px; }
.sp-title { width: 100%; margin: 0 0 20px; padding: 0 120px 0 32px; color: var(--text); font-weight: 700; font-size: 22px; line-height: 33px; text-align: left; }
.dates-title, .times-title, .times-dur { display: none; }
.sp-row { display: flex; flex: 1 1 300px; width: 100%; min-height: 0; }
.dates { max-width: 100%; width: 100%; padding-bottom: 55px; }
.card.has-times .dates, .card.has-day .dates { flex: 1 0 350px; width: auto; }
.calendar { margin: 0 19px; overflow: hidden; }
.cal-head { position: relative; display: flex; align-items: center; justify-content: center; margin: 6px 6px 15px; }
.chev-wrap { margin: 0 5px; }
.chev { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: var(--text-action); }
.chev:disabled { color: var(--text-secondary); cursor: default; pointer-events: none; }
.month-label { display: flex; justify-content: center; width: 125px; margin: 0 5px; color: var(--text); font-weight: 700; font-size: 14px; line-height: 21px; }
.cal-table-wrap { position: relative; min-height: 313px; }
.cal-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0 8px; }
.cal-table th { padding: 0; color: var(--text-secondary); font-weight: 600; font-size: 12px; line-height: 12px; text-align: center; }
.days td { padding: 0; height: 44px; }
.day { position: relative; display: block; width: 44px; height: 44px; margin: 0 auto; padding: 1px 0 0; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--text-secondary); font-size: 16px; line-height: 24px; text-align: center; cursor: default; }
.day:disabled { color: var(--text-secondary); pointer-events: none; }
.day.free { background: var(--bookable-bg); color: var(--text-action); cursor: pointer; }
.day:not(.selected):hover, .day:not(.selected):focus { background: var(--bookable-bg); color: var(--text-action); }
.day.selected, .day.selected:hover { background: var(--action); color: #fff; }
.day:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.day .dot { position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; margin-top: 13px; border-radius: 50%; background: currentColor; transform: translate(-50%, -50%); }
.tz-wrap { position: relative; padding: 0 32px; }
.tz { position: relative; text-align: left; }
.tz-label { margin: 0; color: var(--text); font-weight: 700; font-size: 14px; line-height: 1.4; }
.tz-pill { position: relative; max-width: 100%; padding: 6px 9px 5px; border-radius: 18px; font-size: 14px; cursor: pointer; }
.tz-pill:hover, .tz-pill:focus-within { background: rgba(10, 37, 64, .1); }
.tz-btn { display: flex; align-items: center; color: var(--text); font-weight: 400; font-size: 14px; line-height: 21px; text-align: center; }
.tz-btn .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tz-btn .time { flex-shrink: 0; margin: 0 4px 0 3px; white-space: nowrap; }
.tz-pill select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }

.times { display: flex; flex-direction: column; flex: 1 1 40%; height: 100%; min-width: 0; }
.times-subtitle { height: 38px; margin: 0 0 10px; color: var(--text); font-weight: 400; font-size: 16px; line-height: 38px; white-space: nowrap; }
.times-list { flex: 1 1 100px; overflow: auto; padding: 0 16px 15px 8px; }
.times-list::-webkit-scrollbar { width: 16px; }
.times-list::-webkit-scrollbar-thumb { border: 4px solid transparent; border-radius: 8px; background-color: var(--text-secondary); background-clip: padding-box; }
.list { margin-top: 8px; overflow: hidden; white-space: nowrap; }
.spot { margin: 10px 2px; font-size: 16px; }
.time-btn, .confirm { position: relative; display: inline-block; vertical-align: top; height: 52px; padding: 13px 10px; border-radius: 4px; font-weight: 700; font-size: 16px; line-height: 24px; text-align: center; transition: width .3s ease, transform .3s ease; }
.time-btn { width: 100%; border: 1px solid var(--action); background: transparent; color: var(--text-action); }
.time-btn::after { content: ""; position: absolute; top: -7px; bottom: -7px; left: 0; width: 100%; }
.time-btn:hover, .time-btn:focus { border-width: 2px; border-color: var(--action); outline: none; }
.time-btn .t { width: 45px; margin: 0 auto; line-height: 10px; }
.time-btn.selected, .time-btn.selected:hover { width: 48.5%; border: 2px solid transparent; background: rgba(10, 37, 64, .5); color: #fff; cursor: default; }
.confirm { width: 48.5%; margin-left: 3%; border: 0; background: var(--action); color: #fff; box-shadow: 0 1px 6px 0 rgba(10, 37, 64, .1); transform: translateX(40px); }
.confirm.visible { transform: translateX(0); }
.confirm:hover { background: var(--action-hover); }
.confirm:focus { outline: 2px solid var(--action); }
.confirm:focus:not(:focus-visible) { outline: none; }

/* Schritt 3: Formular */
.form-col { max-width: 860px; padding: 25px 30px; }
.form-inner { max-width: 400px; }
.form-h2 { color: var(--text); font-weight: 700; font-size: 22px; line-height: 28px; transition: font-size .2s ease-in-out, line-height .2s ease-in-out; }
.fields { display: flex; flex-direction: column; gap: 20px; }
.label-row { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.label-row label { display: flex; gap: 4px; color: var(--text); font-weight: 600; font-size: 14px; line-height: 20px; }
.label-row .req { font-weight: 400; }
.input-wrap { margin: 4px 0; }
input, textarea { display: block; width: 100%; height: 40px; margin: 0; padding: 8px 12px; border: 1px solid var(--input-border); border-radius: 8px; background: #fff; color: var(--text); font: 400 14px/1.4 var(--font); font-feature-settings: "dlig" 1; -webkit-appearance: none; appearance: none; }
input:hover, textarea:hover { border-color: var(--input-border-hover); }
input:focus, textarea:focus { padding: 7px 11px; border: 2px solid var(--focus-ring); box-shadow: none; outline: none; }
input::placeholder, textarea::placeholder { color: var(--text-secondary); }
input.error, input.error:focus, textarea.error { border-color: var(--error-border); }
textarea { height: auto; min-height: 40px; resize: vertical; }
.pill-wrap { margin-top: -10px; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 32px; min-height: 32px; padding: 6px 12px; border: 1px solid var(--text-action); border-radius: 9999px; background: transparent; color: var(--text-action); }
.pill span { font-weight: 600; font-size: 14px; line-height: 16px; }
.pill:hover { background: var(--pill-hover-bg); color: var(--pill-hover-text); }
.guests-label { margin-bottom: 4px; }
.guest-box { display: flex; flex-wrap: wrap; align-items: flex-start; min-height: 84px; margin-bottom: 10px; padding: 10px 15px; border: 1px solid #ccc; border-radius: 8px; background: #fff; cursor: text; }
.guest-box:focus-within { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.guest-box input, .guest-box input:hover, .guest-box input:focus { flex: 1 1 auto; height: auto; min-height: 22px; padding: 5px 0; border: none; border-radius: 0; box-shadow: none; color: #333; }
.guests-hint { display: block; color: var(--text); font-size: 14px; line-height: 21px; }
.phone-wrap { position: relative; }
.flag-box { position: absolute; top: 0; left: 0; width: 46px; height: 40px; }
.flag { position: absolute; width: 20px; height: 12px; margin: 14px 13px; box-shadow: 0 0 1px 0 #888; }
input.phone-input { padding-left: 60px; }
input.phone-input:focus { padding: 7px 11px 7px 60px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.legal { margin: 10px 0 20px; color: var(--text); font-size: 14px; line-height: 21px; }
.legal a { display: inline-flex; padding: 0 2px; margin: 0 -2px; color: var(--primary); font-weight: 700; }
.legal a:focus-visible { outline: none; border-radius: 4px; box-shadow: 0 0 0 2px var(--focus-ring); }
.submit { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 16px; border: 1px solid var(--primary); border-radius: 9999px; background: var(--primary); color: #fff; }
.submit span { display: flex; gap: 8px; font-weight: 600; font-size: 14px; line-height: 20px; }
.submit:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.submit:active { background: var(--primary-active); border-color: var(--primary-active); }
.submit:disabled { background: #e7edf6; border-color: #e7edf6; color: #a6bbd1; pointer-events: none; }
.ext-note { display: block; margin-top: 10px; color: var(--text); font-size: 11.2px; line-height: 16.8px; }
.chosen { margin: 20px 0 24px; color: var(--text); font-size: 16px; line-height: 24px; }
.done-text { margin-top: 20px; font-size: 16px; line-height: 24px; }

/* Ansichten */
#app:not(.view-form):not(.view-reschedule) .d-when, #app:not(.view-form):not(.view-reschedule) .d-tz { display: none; }
.view-form .desc-space, .view-reschedule .desc-space, .view-done .desc-space { display: none; }
.view-form .d-item, .view-reschedule .d-item { margin-bottom: 12px; }
.view-form .d-item:last-child, .view-reschedule .d-item:last-child { margin-bottom: 0; }

/* ---------- Tablet (650-999 px): Infos oben, darunter Kalender ---------- */
.m-tab .page-wrap { padding: 0; }
.m-tab .card { flex-direction: column; width: 95%; max-width: 680px; }
.m-tab .side { width: auto; min-width: 0; border-right: 0; border-bottom: 1px solid var(--divider); text-align: center; }
.m-tab .side-content { min-height: 0; }
.m-tab .side-foot { display: none; }
.m-tab .back-row { display: block; height: 0; }
.m-tab .back-row .back { position: absolute; top: 17px; left: 17px; margin: 0; }
.m-tab .logo { display: block; margin: 0 auto 7px; }
.m-tab .host, .m-tab .title { padding: 0 calc((100% - 440px) / 2); }
.m-tab .details-wrap { padding: 0 30px; }
.m-tab .details { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; }
.m-tab .d-item, .m-tab .view-form .d-item, .m-tab .view-form .d-item:last-child { display: inline-flex; margin: 0 16px 8px; }
.m-tab .d-when { align-items: flex-start; }
.m-tab .desc-space { margin: 0 auto; }
.m-tab .main { flex: none; width: auto; }
.m-tab .spotpicker { min-height: 600px; height: auto; }
.m-tab .sp-title { max-width: 400px; margin: 0 auto 20px; padding: 0 32px; }
.m-tab .sp-row { flex: none; max-width: 400px; margin: 0 auto; }
.m-tab .card.has-day .sp-row { max-width: 100%; }
.m-tab .times { height: auto; }
.m-tab .times-subtitle { position: sticky; top: 0; z-index: 1; background: #fff; }
.m-tab .times-list { flex: none; overflow: visible; }
.m-tab .m-foot { display: flex; justify-content: center; margin-top: auto; padding: 14px 15px 15px; }
.m-tab .form-col { width: 100%; margin: 0 auto; padding: 25px 15px; }
.m-tab .form-inner { margin: 0 auto; }

/* ---------- Handy (< 650 px): ohne Kartenrahmen, Uhrzeiten als eigene Ansicht ---------- */
.m-phone .page-wrap { margin: 0; padding: 0; min-height: 0; flex: none; }
.m-phone .card { flex-direction: column; max-width: none; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
.m-phone .side { width: auto; min-width: 0; border-right: 0; border-bottom: 1px solid var(--divider); text-align: center; }
.m-phone .side-content { min-height: 0; }
.m-phone .side-foot { display: none; }
.m-phone .logo { margin: 0 auto 7px; }
.m-phone .host { padding: 0 45px; }
.m-phone .title { padding: 0 25px; font-size: 26px; }
.m-phone .details-wrap { max-width: 340px; margin: 0 25px 20px; padding: 0 23px; }
.m-phone .d-item { margin-bottom: 16px; }
.m-phone .d-item:last-child { margin-bottom: 0; }
.m-phone .desc-space { max-width: 340px; margin: 0 25px; }
.m-phone .main { flex: 1 0 auto; width: auto; min-height: 600px; }
.m-phone .spotpicker { flex: none; height: auto; padding-top: 25px; }
.m-phone .sp-title { display: none; }
.m-phone .dates-title { display: block; margin: 0 0 10px; color: var(--text); font-weight: 700; font-size: 22px; line-height: 33px; text-align: center; }
.m-phone .sp-row { flex: none; max-width: 400px; margin: 0 auto; }
.m-phone .dates { padding-bottom: 0; }
.m-phone .calendar { max-width: 340px; margin: 0 25px; padding: 0 10px; }
.m-phone .cal-table-wrap { min-height: 280px; }
.m-phone .cal-table { border-spacing: 4px; }
.m-phone .tz-wrap { max-width: 320px; margin: 0 35px; padding: 0; }
.m-phone .m-foot { display: flex; flex-direction: column; align-items: center; max-width: 350px; width: calc(100% - 40px); margin: auto 20px 0; padding: 16px 15px 20px; }
.m-phone .m-foot .privacy-link { line-height: 22px; }
/* Handy, Uhrzeiten */
.m-phone .view-times .side, .m-phone .view-times .dates, .m-phone .view-times .times-subtitle { display: none; }
.m-phone .view-times .m-head { position: sticky; top: 0; z-index: 1; display: block; padding: 25px 0; border-bottom: 1px solid var(--divider); background: #fff; text-align: center; }
.m-head .back { position: absolute; top: 17px; left: 17px; }
.m-head-wd { margin: 0 0 5px; color: var(--text); font-weight: 700; font-size: 22px; line-height: 1.2; }
.m-head-date { margin: 0 0 10px; color: var(--text); font-size: 14px; line-height: 21px; }
.m-head-tz { display: inline-block; }
.m-phone .view-times .main { min-height: 0; }
.m-phone .view-times .spotpicker { padding-top: 15px; }
.m-phone .view-times .sp-row { max-width: 100%; }
.m-phone .view-times .times { display: block; width: 100%; padding: 0 15px; }
.m-phone .times-title { display: block; margin: 0 0 5px; color: var(--text); font-weight: 700; font-size: 21px; line-height: 31.5px; text-align: center; }
.m-phone .times-list { flex: none; overflow: visible; padding: 0 0 15px; }
.m-phone .times-dur { display: block; margin: 12px 0; font-size: 14px; line-height: 21px; text-align: center; }
.m-phone .view-times .m-foot { width: 100%; max-width: none; margin: 0; }
/* Handy, Formular: reduzierte Kopfzeile */
.m-phone .back-row { display: block; height: 0; }
.m-phone .back-row .back { position: absolute; top: 17px; left: 17px; margin: 0; }
.m-phone .view-form .logo, .m-phone .view-form .host, .m-phone .view-reschedule .logo, .m-phone .view-reschedule .host, .m-phone .view-done .logo, .m-phone .view-done .host { display: none; }
.m-phone .view-form .host-block, .m-phone .view-reschedule .host-block, .m-phone .view-done .host-block { padding: 0 25px; }
.m-phone .view-form .details-wrap, .m-phone .view-reschedule .details-wrap, .m-phone .view-done .details-wrap { max-width: 430px; margin: 0 0 20px; padding: 0 15px; }
.m-phone .view-form .d-item, .m-phone .view-reschedule .d-item { margin-bottom: 16px; }
.m-phone .view-form .d-item:last-child, .m-phone .view-reschedule .d-item:last-child { margin-bottom: 0; }
.m-phone .view-form .main, .m-phone .view-reschedule .main, .m-phone .view-done .main { min-height: 0; }
.m-phone .form-col { padding: 25px 15px 0; }
.m-phone .pill-wrap .pill, .m-phone .submit { display: flex; width: 100%; }
.m-phone .view-form .m-foot, .m-phone .view-reschedule .m-foot, .m-phone .view-done .m-foot { align-items: flex-start; width: auto; max-width: 430px; margin: 32px 0 0; padding: 0 15px 25px; }

/* ---------- Server-Seiten (Absage, Meldungen) im selben Karten-Look ---------- */
.msg-page .page-wrap { flex: none; min-height: 0; }
.msg-card { flex-direction: column; align-self: flex-start; max-width: 560px; min-height: 0; }
.msg-body { padding: 25px 30px 30px; }
.msg-body .logo { margin: 0 0 7px; }
.msg-body .host { padding: 0; }
.msg-body .title { padding: 0; margin: 0 0 16px; }
.msg-body p { margin: 0 0 16px; font-size: 14px; line-height: 21px; }
.msg-body .d-item { margin: 0 0 16px; color: var(--text-secondary); font-weight: 700; }
.msg-body .field { margin: 20px 0; }
.msg-body .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.btn-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 16px; border: 1px solid var(--text-action); border-radius: 9999px; background: transparent; color: var(--text-action); font-weight: 600; font-size: 14px; line-height: 20px; }
.btn-secondary:hover { background: var(--pill-hover-bg); color: var(--pill-hover-text); }
a.submit { font-weight: 600; font-size: 14px; line-height: 20px; }
@media (max-width: 649px) {
  .msg-page .page-wrap { margin: 0; padding: 0; }
  .msg-card { border: 0; border-radius: 0; box-shadow: none; }
  .msg-body { padding: 25px 15px; }
}