/* Coup de Cœur booking app. Brand tokens from mona-john.de: forest for actions and text, paper, ink, warm hairlines;
   champagne only for hairlines. No inline styles anywhere (CSP style-src 'self'). */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 200; font-display: swap; src: url("fonts/poppins-200-normal-latin.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: "Poppins"; font-style: normal; font-weight: 200; font-display: swap; src: url("fonts/poppins-200-normal-latin-ext.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: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/poppins-300-normal-latin.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: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/poppins-300-normal-latin-ext.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: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/poppins-400-normal-latin.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: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/poppins-400-normal-latin-ext.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; }

:root {
  --bg: #f7f4ed; --bg-warm: #efeae0; --paper: #fcfaf5; --white: #fff; --ink: #1c1a16; --ink-soft: #4a463f; --muted: #6f695f;
  --forest: #34504a; --forest-dark: #28403a; --mocha: #7c5a4c; --champagne: #b3925f; --line: #e2dccd; --field: #8a8377; --error: #b3261e;
  --radius-pill: 999px; --radius-card: 14px; --radius: 10px; --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font: "Poppins", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 300 1rem/1.6 var(--font); overflow-wrap: anywhere; }
html.mode-embed body { background: transparent; }
h1, h2, h3, p, ul, fieldset { margin: 0; }
a { color: var(--forest); text-underline-offset: 0.18em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Layout: the app box carries all vertical space as padding, so the posted embed height is exact. */
.app { max-width: 44rem; margin: 0 auto; padding: clamp(1rem, 4vw, 2rem) clamp(0.75rem, 4vw, 2rem); display: flow-root; }
html.mode-embed .app { padding-top: 0.5rem; padding-bottom: 1rem; }
/* Embedded: the title is screen-reader only (the website shows its own heading), so no header space and no divider above step 1. */
html.mode-embed .app-head { padding: 0; }
html.mode-embed #step-party { border-top: 0; padding-top: 0.5rem; }
.boot { color: var(--muted); padding: 2rem 0; }
.app-head { padding-bottom: 1rem; }
.brand { font: 300 1.45rem/1.2 var(--font); letter-spacing: 0.02em; color: var(--forest); }
.app-title { font-weight: 200; font-size: clamp(1.6rem, 5vw, 2.3rem); line-height: 1.2; letter-spacing: 0.01em; }
.step { border-top: 1px solid var(--line); padding: 1.5rem 0; display: grid; gap: 1rem; }
.step > h2 { font-weight: 300; font-size: 1.3rem; line-height: 1.3; scroll-margin-top: 1rem; }
.step > h2:focus { outline: none; }
.step > h2:focus-visible { outline: 2px solid var(--forest); }
.step-body { display: grid; gap: 1rem; min-width: 0; }
.sub { color: var(--ink-soft); font-size: 0.95rem; }

/* Summary chips and welcome */
.summary { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-bottom: 1rem; }
.sum-chip { min-height: 44px; padding: 0 1rem; border-radius: var(--radius-pill); border: 1px solid var(--champagne); background: var(--white);
  color: var(--forest); font-weight: 400; cursor: pointer; }
.sum-chip::after { content: " ✎"; color: var(--muted); }
.welcome { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--white); padding: 1rem 1.25rem; margin-bottom: 1rem; display: grid; gap: 0.5rem; }
.welcome-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.75rem; font-weight: 400; }
.upcoming { list-style: none; padding: 0; display: grid; gap: 0.25rem; font-size: 0.95rem; color: var(--ink-soft); }
.upcoming h3 { font-size: 0.9rem; font-weight: 400; }

/* Chips and buttons: every target at least 44 px */
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 0.5rem; font-weight: 400; font-size: 0.95rem; }
.chips { display: grid; }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { min-height: 44px; min-width: 44px; padding: 0 1rem; border-radius: var(--radius-pill); border: 1px solid var(--field); background: var(--white);
  color: var(--ink); cursor: pointer; transition: background-color 0.2s var(--ease), color 0.2s var(--ease); }
.chip:hover:not(:disabled) { border-color: var(--forest); }
.chip[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: var(--white); font-weight: 400; }
.chip:disabled { cursor: not-allowed; background: transparent; border-style: dashed; border-color: var(--line); color: var(--muted); text-decoration: line-through; }
.party-chips .chip { min-width: 3rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.5rem 1.6rem; border-radius: var(--radius-pill);
  border: 1px solid var(--forest); background: transparent; color: var(--forest); font-weight: 400; text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color 0.2s var(--ease); }
.btn.primary { background: var(--forest); color: var(--white); }
.btn.primary:hover:not(:disabled) { background: var(--forest-dark); }
.btn.secondary:hover:not(:disabled) { background: var(--bg-warm); }
.btn:disabled { opacity: 0.65; cursor: progress; }
.link { min-height: 44px; padding: 0 0.25rem; border: 0; background: none; color: var(--forest); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.form-actions { display: grid; gap: 0.75rem; justify-items: start; }

/* Notices and errors */
.notice { background: var(--bg-warm); border-radius: var(--radius); padding: 0.75rem 1rem; color: var(--ink); }
.notice:empty { display: none; }
.alert { border-left: 3px solid var(--error); background: #fbf1ef; border-radius: var(--radius); padding: 0.75rem 1rem; display: grid; gap: 0.5rem; }
.alert .contact a { font-weight: 400; }
.ok { border-left: 3px solid var(--forest); background: #eef2ef; border-radius: var(--radius); padding: 0.75rem 1rem; }
.badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.75rem; border-radius: var(--radius-pill); background: #e4ece7; color: var(--forest); font-weight: 400; font-size: 0.9rem; }
.badge::before { content: "✓"; }

/* Form fields */
.field { display: grid; gap: 0.35rem; min-width: 0; }
.field > label { font-weight: 400; font-size: 0.95rem; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { width: 100%; min-height: 48px; padding: 0.6rem 0.8rem; border: 1px solid var(--field);
  border-radius: var(--radius); background: var(--white); color: var(--ink); }
textarea { min-height: 5.5rem; resize: vertical; }
[aria-invalid="true"] { border-color: var(--error) !important; box-shadow: 0 0 0 1px var(--error); }
.hint { color: var(--ink-soft); font-size: 0.875rem; }
.field-error { color: var(--error); font-size: 0.875rem; font-weight: 400; }
.field-error:empty { display: none; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.phone-row { display: grid; grid-template-columns: minmax(6.75rem, auto) minmax(0, 1fr); gap: 0.5rem; }
.check { display: flex; align-items: center; gap: 0.75rem; min-height: 44px; }
.check input { flex: none; width: 1.4rem; height: 1.4rem; margin: 0; accent-color: var(--forest); }
.check label { cursor: pointer; padding: 0.4rem 0; }
.checks { display: grid; gap: 0.25rem; }
.details-form { display: grid; gap: 1.1rem; }
.wishes-box { border: 1px solid var(--line); border-radius: var(--radius-card); padding: 0 1rem; }
.wishes-box > summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; color: var(--forest); font-weight: 400; }
.wishes-box[open] { padding-bottom: 1rem; }
.wishes { display: grid; gap: 1rem; }
.notify { display: grid; gap: 0.75rem; }
.notify-line { color: var(--ink-soft); font-size: 0.95rem; }
.notify-panel { display: grid; gap: 1rem; border-left: 1px solid var(--champagne); padding-left: 1rem; }
.remember { display: grid; gap: 0.25rem; }
.terms { border: 1px solid var(--line); border-radius: var(--radius-card); padding: 1rem; display: grid; gap: 0.6rem; background: var(--white); }
.deposit-due { font-weight: 400; }
.terms-text { font-size: 0.9rem; color: var(--ink-soft); }
.verify { display: grid; gap: 0.6rem; justify-items: start; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Calendar */
.calendar { display: grid; gap: 0.75rem; }
.cal-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 0.5rem; }
.cal-title { text-align: center; font-weight: 300; font-size: 1.1rem; }
.cal-title::first-letter { text-transform: uppercase; }
.icon { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--forest); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.icon:disabled { color: var(--line); cursor: default; }
.cal-grid { display: grid; gap: 3px; }
.cal-grid[aria-busy="true"] { opacity: 0.55; }
.cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.dow { text-align: center; font-size: 0.75rem; color: var(--ink-soft); padding: 0.2rem 0; }
.cell { display: block; min-width: 0; }
.day { width: 100%; min-height: 44px; height: clamp(44px, 11vw, 3.4rem); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--ink); cursor: pointer; }
.day .mark { width: 6px; height: 6px; border-radius: 50%; }
.day.st-open .mark { background: var(--forest); }
.day.st-limited .mark { background: var(--mocha); box-shadow: 0 0 0 1px var(--mocha); width: 4px; height: 4px; }
.day.st-full { background: repeating-linear-gradient(135deg, #f1ece2 0 5px, var(--white) 5px 10px); color: var(--ink-soft); }
.day.st-full .mark { border: 1px solid var(--ink-soft); }
.day.st-closed { background: var(--bg-warm); border-color: transparent; color: #5e594f; }
.day.st-past, .day.st-out_of_range { background: transparent; border-color: transparent; color: var(--muted); }
.day[aria-disabled="true"] { cursor: default; }
.day.is-today { box-shadow: inset 0 0 0 1px var(--champagne); }
.day[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: var(--white); font-weight: 400; }
.day[aria-pressed="true"] .mark { background: var(--white); border-color: var(--white); }
.cal-notes { font-size: 0.9rem; color: var(--ink-soft); }
.cal-notes:empty { display: none; }
.legend { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.8rem; color: var(--ink-soft); }
.lg { display: inline-flex; align-items: center; gap: 0.4rem; }
.swatch { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line); background: var(--white); }
.lg.st-open .swatch { background: radial-gradient(circle, var(--forest) 0 2.5px, var(--white) 3px); }
.lg.st-limited .swatch { background: radial-gradient(circle, var(--mocha) 0 2px, var(--white) 2.5px); }
.lg.st-full .swatch { background: repeating-linear-gradient(135deg, #e2dccd 0 3px, var(--white) 3px 6px); }
.lg.st-closed .swatch { background: var(--bg-warm); }
.lg.st-past .swatch, .lg.st-out_of_range .swatch { background: transparent; border-style: dashed; }

/* Time step */
.waves { display: grid; gap: 1rem; }
.wave { display: grid; gap: 0.5rem; }
.wave-title { font-size: 0.95rem; font-weight: 300; color: var(--ink-soft); }
.alts { margin-top: 0.25rem; }
.skeleton { height: 44px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--bg-warm), var(--paper), var(--bg-warm));
  background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.waitlist { display: grid; gap: 1rem; border: 1px solid var(--line); border-radius: var(--radius-card); padding: 1rem; background: var(--white); }

/* Payment, done, manage */
.pay-box, .done-box { display: grid; gap: 1rem; }
.breakdown { font-size: 1.35rem; font-weight: 200; }
.timer { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.summary-line { font-size: 1.1rem; font-weight: 300; }
.reference { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: 0.95rem; }
.status-pill { display: inline-flex; padding: 0.2rem 0.85rem; border-radius: var(--radius-pill); border: 1px solid var(--forest); color: var(--forest); font-weight: 400; font-size: 0.9rem; }
.status-pill.is-cancelled, .status-pill.is-expired, .status-pill.is-no_show { border-color: var(--error); color: var(--error); }
.manage-box { display: grid; gap: 1rem; }
dialog.confirm { border: 1px solid var(--line); border-radius: var(--radius-card); padding: 1.5rem; width: min(28rem, calc(100vw - 2rem)); background: var(--paper); color: var(--ink); }
dialog.confirm::backdrop { background: rgba(22, 20, 15, 0.45); }
dialog.confirm form { display: grid; gap: 1rem; }

@media (max-width: 30rem) {
  .row2 { grid-template-columns: minmax(0, 1fr); }
  .chip { padding: 0 0.85rem; }
  .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}

/* Booking conditions shown above the button for every booking (owner, 11 Oct 2026). */
.conditions { font-size: 0.875rem; line-height: 1.5; margin: 0.75rem 0 0; opacity: 0.85; }
.terms-box { margin-top: 0.75rem; }
.terms-box summary { cursor: pointer; }

/* ---------- Motion and finish (UI/UX pass, 11 Oct 2026): calm like mona-john.de ----------
   The website's curves: --ease-fade for opacity, --ease for movement. A step fades up when it appears (display none →
   shown restarts the animation), new content fades in, choices answer with a soft press. The reduced-motion rule above
   switches all of it off. */
:root { --ease-fade: cubic-bezier(0.45, 0, 0.3, 1); --dur-in: 0.6s; --dur-ui: 0.25s; }
@keyframes cdc-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cdc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cdc-pop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
.step { animation: cdc-in var(--dur-in) var(--ease-fade) both; }
.wave, .alts, .waitlist, .welcome, .summary, .terms, .notice, .alert, .ok, .pay-box, .manage-box, .conditions, .terms-step {
  animation: cdc-fade 0.45s var(--ease-fade) both; }
.wave:nth-child(2) { animation-delay: 0.06s; }
.wave:nth-child(3) { animation-delay: 0.12s; }
.field-error:not(:empty) { animation: cdc-fade 0.3s var(--ease-fade) both; }
.badge { animation: cdc-pop 0.4s var(--ease) both; }
.done-box > * { animation: cdc-in var(--dur-in) var(--ease-fade) both; }
.done-box > :nth-child(2) { animation-delay: 0.08s; }
.done-box > :nth-child(3) { animation-delay: 0.16s; }
.done-box > :nth-child(4) { animation-delay: 0.24s; }
.done-box > :nth-child(5) { animation-delay: 0.32s; }
.cal-grid { transition: opacity var(--dur-ui) var(--ease-fade); }

/* Choices and buttons: the website's soft transitions, a gentle press, a lift on hover (pointer devices only). */
.chip, .day, .sum-chip, .icon, .btn, .link {
  transition: background-color var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease),
    box-shadow var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease); }
.chip:active:not(:disabled), .sum-chip:active, .icon:active:not(:disabled), .btn:active:not(:disabled),
.day:active:not([aria-disabled="true"]) { transform: scale(0.97); }
.btn { font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; }
.btn.primary { box-shadow: 0 10px 30px -16px rgba(26, 24, 18, 0.55); }
@media (hover: hover) {
  .btn.primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 34px -16px rgba(26, 24, 18, 0.6); }
  .chip:hover:not(:disabled):not([aria-pressed="true"]), .day:hover:not([aria-disabled="true"]):not([aria-pressed="true"]) { background: var(--paper); border-color: var(--forest); }
}
.chip[aria-pressed="true"], .day[aria-pressed="true"] { box-shadow: 0 8px 20px -14px rgba(26, 24, 18, 0.55); }

/* Step numbers like the website's eyebrows: 01 Personen, 02 Datum, 03 Uhrzeit, 04 Deine Daten (hidden steps do not count). */
.app { counter-reset: cdc-step; }
#step-party > h2::before, #step-date > h2::before, #step-time > h2::before, #step-details > h2::before {
  counter-increment: cdc-step; content: counter(cdc-step, decimal-leading-zero); content: counter(cdc-step, decimal-leading-zero) / "";
  display: block; margin-bottom: 0.3rem; font-size: 0.7rem; font-weight: 400; letter-spacing: 0.2em; color: var(--mocha); }
.is-quiet :is(.step, .wave, .alts, .waitlist, .welcome, .summary, .terms, .notice, .alert, .ok, .pay-box, .manage-box,
  .conditions, .terms-step, .badge, .field-error, .done-box > *) { animation: none; }

/* Inside the website the loader sizes the frame to its content, so the app never needs its own scrollbar there. While a
   step fades in and the frame grows, the content is briefly taller than the frame: no scrollbar may flash then (owner,
   Oct 2026). In the phone's full-screen view (.in-overlay) the app scrolls itself and keeps its scrollbar. */
html.mode-embed:not(.in-overlay) { scrollbar-width: none; }
html.mode-embed:not(.in-overlay)::-webkit-scrollbar { display: none; }