/* Rezeption (the owner's area, /verwalten) in the „Isch frei?“ language (Slice 7n, design/design_handoff_rezeption).
 * Phone first: Sabine opens it from a notification on the go. Every other page that loads this file
 * (login, mail preview, compose, Einrichten, Abo, /betrieb) takes the same tokens from the last part.
 * CSP: no inline styles anywhere; every state is a class or an attribute. Fonts are self-hosted in /fonts/. */

@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/schibsted-grotesk-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: "Schibsted Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/schibsted-grotesk-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: "Schibsted Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/schibsted-grotesk-latin-500-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: "Schibsted Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/schibsted-grotesk-latin-ext-500-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: "Schibsted Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/schibsted-grotesk-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: "Schibsted Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/schibsted-grotesk-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: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/newsreader-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: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/newsreader-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: "Newsreader"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/newsreader-latin-500-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: "Newsreader"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/newsreader-latin-ext-500-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: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/newsreader-latin-400-italic.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: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/newsreader-latin-ext-400-italic.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; }

/* ---------- Tokens (theme.css overrides --accent / --accent-text per Konto) ---------- */
:root {
  --paper: #FBFAF6; --panel: #F2EFE8; --white: #FFFFFF;
  --ink: #1C1F1B; --ink-2: #3A3934; --ink-3: #4A4840; --muted: #6B685F;
  --line: #E6E2D8; --line-2: #E1DCD0; --field-line: #D6D0C3; --handle: #CBC5B7;
  --chip-on: #E9E5DA; --chip-hover: #F1EEE7; --meter: #E0DBCF;
  --hatch: repeating-linear-gradient(-45deg, #E2DDD1 0 2px, #F0EDE6 2px 7px);
  --hatch-2: repeating-linear-gradient(45deg, #E2DDD1 0 2px, #F0EDE6 2px 7px);
  --blocked: #E3DFD4; --busy-fg: #8F8B80; --past-fg: #C2BEB3;
  --ok: #3F8A5C; --warn: #A66A00; --error: #8A3B1E; --error-soft: #F6E7E0;
  --accent: #2F5D4A; --accent-text: #FFFFFF;
  /* 17 % and 9 % accent on paper, mixed in theme.css per Konto (no color-mix(): iOS before 16.2 lacks it);
     these two are the mix for the default accent, for pages without theme.css */
  --rz-soft: #d8dfd9; --rz-softer: #e9ece7;
  --accent-soft: var(--rz-soft);
  --accent-softer: var(--rz-softer);
  /* letter colour per source: only a hint, the letter itself carries the meaning */
  --src-b: var(--accent); --src-s: #2B2A33;
  --src-f0: #9C4A2E; --src-f1: #245A7A; --src-f2: #7A5A1F; --src-f3: #6B3F7A; --src-f4: #1F6F6A; --src-f5: #7A2D20;
  --r: 10px; --r-s: 6px; --r-p: 18px;
  --serif: 'Newsreader', Georgia, serif;
  --sans: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --page: 1216px; --gutter: 20px; --bar: 72px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 900px) { :root { --gutter: 32px; --bar: 0px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 15px/1.45 var(--sans); -webkit-font-smoothing: antialiased; padding-bottom: calc(var(--bar) + env(safe-area-inset-bottom)); }
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--ink-3); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { line-height: 1.1; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
[hidden] { display: none !important; }
code { font-family: var(--mono); font-size: .9em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.small { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.opt { font-weight: 400; color: var(--muted); }
.lead { font-size: 14.5px; line-height: 1.5; color: var(--ink-3); max-width: 60ch; }
.error, .err { color: var(--error); }
.error { font-weight: 600; }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--mono); }
.msg { white-space: pre-wrap; }

/* ---------- Messages ---------- */
.flash { padding: 12px 14px; border-radius: var(--r); background: var(--accent-soft); color: var(--ink); font-size: 14px; font-weight: 500; }
.flash.bad { background: var(--error-soft); color: var(--error); }
.flash.in-card, .flash.in-section { margin: 0 0 14px; }
.note { padding: 12px 14px; border-radius: var(--r); background: var(--panel); font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.note.warn-note { background: var(--error-soft); color: var(--error); }
.note.warn-note a { color: var(--error); font-weight: 600; }
.note p + p { margin-top: 8px; }
.note .inline { margin-top: 10px; }
.empty { padding: 18px; border-radius: var(--r-p); background: var(--panel); color: var(--ink-3); font-size: 14px; }

/* ---------- Buttons ---------- */
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--r); background: var(--white); box-shadow: inset 0 0 0 1px var(--field-line); color: var(--ink); font-size: 14.5px; font-weight: 500; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: box-shadow .15s var(--ease), filter .15s var(--ease); }
button:hover, .button:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.primary, button.primary, .button.primary { background: var(--accent); color: var(--accent-text); box-shadow: none; font-weight: 600; }
.primary:hover, button.primary:hover, .button.primary:hover { color: var(--accent-text); box-shadow: none; filter: brightness(1.1); }
.ghost { background: var(--white); }
button.small, .button.small { min-height: 40px; padding: 0 14px; font-size: 14px; }
button.warn { background: var(--error); color: var(--white); box-shadow: none; font-weight: 600; }
button.warn:hover { color: var(--white); box-shadow: none; filter: brightness(1.12); }
.quiet, button.quiet { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; background: none; box-shadow: none; color: var(--ink-2); font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.quiet:hover, button.quiet:hover { box-shadow: none; color: var(--ink); }
button:disabled { opacity: .45; cursor: default; }

/* ---------- Fields ---------- */
input, select, textarea { width: 100%; min-height: 46px; margin: 0; padding: 12px 14px; border: 0; border-radius: var(--r); background: var(--white); box-shadow: inset 0 0 0 1px var(--field-line); font-size: 16px; outline: none; -webkit-appearance: none; appearance: none; }
@media (min-width: 900px) { input, select, textarea { font-size: 15px; } }
input:focus, select:focus, textarea:focus { box-shadow: inset 0 0 0 2px var(--ink); }
input[readonly] { color: var(--ink-2); }
textarea { min-height: 12rem; line-height: 1.5; resize: vertical; }
label { display: block; font-size: 13px; font-weight: 500; color: var(--ink-2); }
label > input, label > select, label > textarea { display: block; margin-top: 6px; color: var(--ink); font-weight: 400; }
label > .bad-hint { display: block; margin-top: 6px; }
[aria-invalid="true"], label.bad > input { box-shadow: inset 0 0 0 2px var(--error); }
label.bad { color: var(--error); }
.bad-hint { font-size: 12.5px; font-weight: 400; color: var(--error); }
.check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.check input { width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: auto; appearance: auto; accent-color: var(--accent); }
.check .bad-hint { grid-column: 1 / -1; }

.block-form { display: grid; gap: 18px 20px; }
@media (min-width: 600px) { .block-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .block-form .wide { grid-column: 1 / -1; } }
.block-form > button { justify-self: start; min-height: 50px; padding: 0 26px; font-size: 15.5px; }
.block-form fieldset { margin: 0; padding: 0; border: 0; }
.block-form legend { font-size: 13px; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
.form-box { display: grid; gap: 14px; padding: 18px; border-radius: var(--r-p); background: var(--panel); }
@media (min-width: 600px) { .form-box { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-box > .wide, .form-box > .check, .form-box > p { grid-column: 1 / -1; }

/* consequential actions: a second tap inside <details> */
.danger summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--error); font-size: 14px; font-weight: 500; cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.danger summary::-webkit-details-marker { display: none; }
.danger[open] summary { text-decoration: none; }
.danger-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 12px 14px; border-radius: var(--r); background: var(--error-soft); }
.danger-box p { flex: 1 1 260px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.danger-box form { margin: 0; }

/* ---------- Page shell ---------- */
.demobar { padding: 8px var(--gutter); background: var(--panel); color: var(--ink-2); font-size: 13px; text-align: center; }
.demobar strong { font-weight: 600; margin-right: 6px; }
.top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; max-width: calc(var(--page) + 2 * var(--gutter)); margin: 0 auto; padding: 24px var(--gutter) 14px; }
.kicker { margin: 0 0 4px; font-size: 13px; font-weight: 500; color: var(--muted); }
.top h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.05; letter-spacing: -0.012em; }
@media (min-width: 900px) { .top { padding-top: 28px; padding-bottom: 18px; } .top h1 { font-size: 34px; } }
.top-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.top-actions form { margin: 0; }
.sync { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); }
.sync::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.sync.late::before { background: var(--warn); }

/* between a Konto's Unterkünfte (hosted, P3) */
.units { display: flex; gap: 6px; max-width: calc(var(--page) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) 12px; overflow-x: auto; scrollbar-width: none; }
.unit { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--field-line); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; }
.unit:hover { background: var(--chip-hover); }
.unit.current { background: var(--ink); color: var(--paper); box-shadow: none; }
.unit .count { background: none; color: inherit; min-width: 0; padding: 0; opacity: .75; }
.setup-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; max-width: var(--page); margin: 0 var(--gutter) 14px; padding: 14px 18px; border-radius: var(--r-p); background: var(--panel); }
@media (min-width: calc(1216px + 64px)) { .setup-cta { margin-left: auto; margin-right: auto; } }
.setup-cta p { font-size: 14px; }
.setup-cta .small { color: var(--ink-3); font-size: 13.5px; }
.setup-cta.bad { background: var(--error-soft); }
.setup-meter { display: flex; gap: 3px; margin-bottom: 8px; }
.setup-meter span { width: 22px; height: 5px; border-radius: 3px; background: var(--field-line); }
.setup-meter .done { background: var(--accent); }

/* Three views. Phone: a bar at the bottom, like an app. Laptop: a sticky row under the header. */
.tabs { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; padding: 8px 12px calc(12px + env(safe-area-inset-bottom)); background: var(--paper); box-shadow: 0 -1px 0 var(--line); }
.tabs a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 8px; border-radius: var(--r); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.tabs a:hover { background: var(--chip-hover); }
.tabs a[aria-current="page"] { background: var(--chip-on); font-weight: 600; }
@media (min-width: 900px) {
  .tabs { position: sticky; top: 0; bottom: auto; display: flex; gap: 4px; padding: 10px max(var(--gutter), calc((100% - var(--page)) / 2)); box-shadow: 0 1px 0 var(--line); }
  .tabs a { min-height: 40px; padding: 0 14px; font-size: 15px; }
}
.count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: var(--accent-text); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

.wrap { max-width: calc(var(--page) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) 56px; }
.view { padding-top: 20px; scroll-margin-top: 64px; }
@media (min-width: 900px) { .view { padding-top: 26px; } }
/* No JS: the three views stand one below the other, each with its own heading. */
.view + .view { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--ink); }
.js-views .view { display: none; }
.js-views .view.on { display: block; }
.js-views .view + .view { margin-top: 0; padding-top: 20px; border-top: 0; }
@media (min-width: 900px) { .js-views .view + .view { padding-top: 26px; } }
.view-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.view-head h2 { margin: 0 0 6px; font-family: var(--serif); font-weight: 400; font-size: 30px; letter-spacing: -0.01em; }
.view-head p { font-size: 14.5px; color: var(--ink-3); }
.js-views #kalender .view-head { display: none; }
section { scroll-margin-top: 72px; }
h2.serif, .sec-title { margin: 0 0 6px; font-family: var(--serif); font-weight: 400; font-size: 26px; letter-spacing: -0.01em; }
h4.serif { margin: 8px 0 0; font-family: var(--serif); font-weight: 500; font-size: 21px; }

/* ---------- Belegung ---------- */
#belegung { display: flex; flex-direction: column; gap: 20px; }
.bel-rail-cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; font-size: 12.5px; color: var(--muted); }
.bel-rail-cap a { color: var(--ink-3); }
.bel-rail { display: flex; gap: 4px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; list-style: none; }
.bel-rail::-webkit-scrollbar { display: none; }
.bel-rail li { flex: none; width: 56px; }
@media (min-width: 900px) { .bel-rail { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin: 0; padding: 0; } .bel-rail li { width: auto; } }
.chip { height: 62px; padding: 8px 7px; border-radius: var(--r); display: flex; flex-direction: column; justify-content: space-between; color: var(--ink); text-decoration: none; }
.chip:hover { background: var(--chip-hover); color: var(--ink); }
.chip.on { background: var(--chip-on); }
.chip-m { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.chip-n { font-size: 17px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.meter { display: block; height: 3px; border-radius: 2px; background: var(--meter); overflow: hidden; }
.meter > span { display: block; height: 3px; background: var(--accent); }
/* meter width without style="": ten steps */
.m0 { width: 0; } .m1 { width: 10%; } .m2 { width: 20%; } .m3 { width: 30%; } .m4 { width: 40%; } .m5 { width: 50%; } .m6 { width: 60%; } .m7 { width: 70%; } .m8 { width: 80%; } .m9 { width: 90%; } .m10 { width: 100%; }

.bmonths { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px 28px; }
@media (min-width: 560px) { .bmonths { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .bmonths { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bmonths-past { margin-bottom: 8px; }
.bmonth { scroll-margin-top: 72px; }
.bmonth h3 { margin: 0 0 6px; padding-left: 2px; font-family: var(--serif); font-weight: 500; font-size: 21px; letter-spacing: -0.005em; white-space: nowrap; }
.bgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px 2px; justify-items: center; }
.bwd { height: 24px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; color: var(--muted); text-decoration: none; }

/* A day. h2 is the evening (its night), filling the tile; h1 is the morning, the top-left triangle.
   Same stay on both: no seam. Nothing in the morning: h1 is paper, so the day reads „Anreise, bis Mittag frei“,
   exactly as the guest widget shows it. */
.bd { position: relative; width: 100%; max-width: 44px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border-radius: var(--r); overflow: hidden; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); text-decoration: none; }
.bd.pad { visibility: hidden; }
.bd.past { color: var(--past-fg); font-weight: 400; }
.bd .dn { position: relative; z-index: 1; }
.h1, .h2 { position: absolute; inset: 0; }
.h1 { clip-path: polygon(0 0, 100% 0, 0 100%); }
.q-frei { background: var(--paper); }
.q-b { background: var(--accent-soft); }
.q-s { background: var(--blocked); }
.q-f0, .q-f2, .q-f4 { background: var(--hatch); }
.q-f1, .q-f3, .q-f5 { background: var(--hatch-2); }
.bd.taken:not(.half) .dn { color: var(--ink-3); }
.bd.taken:not(.half):has(> .h2.q-b) .dn { color: var(--accent); font-weight: 600; }
/* Wechseltag: a paper hairline along the split */
.split { position: absolute; inset: 0; background: linear-gradient(135deg, transparent calc(50% - 1px), var(--paper) calc(50% - 1px), var(--paper) calc(50% + 1px), transparent calc(50% + 1px)); }
.mk { position: absolute; z-index: 1; font-size: 9.5px; font-weight: 600; line-height: 1; color: var(--muted); }
.mk1 { top: 3px; left: 4px; }
.mk2 { right: 4px; bottom: 3px; }
.bd:has(> .h1.q-b) .mk1, .bd:has(> .h2.q-b) .mk2 { color: var(--src-b); }
.bd:has(> .h1.q-s) .mk1, .bd:has(> .h2.q-s) .mk2 { color: var(--src-s); }
.bd:has(> .h1.q-f0) .mk1, .bd:has(> .h2.q-f0) .mk2 { color: var(--src-f0); }
.bd:has(> .h1.q-f1) .mk1, .bd:has(> .h2.q-f1) .mk2 { color: var(--src-f1); }
.bd:has(> .h1.q-f2) .mk1, .bd:has(> .h2.q-f2) .mk2 { color: var(--src-f2); }
.bd:has(> .h1.q-f3) .mk1, .bd:has(> .h2.q-f3) .mk2 { color: var(--src-f3); }
.bd:has(> .h1.q-f4) .mk1, .bd:has(> .h2.q-f4) .mk2 { color: var(--src-f4); }
.bd:has(> .h1.q-f5) .mk1, .bd:has(> .h2.q-f5) .mk2 { color: var(--src-f5); }
/* A past stay: its pattern, faded, so the eye stays on what is ahead */
.bd.was { color: var(--busy-fg); }
.bd.was .h1, .bd.was .h2 { opacity: .45; }
.bd.was .h1.q-frei, .bd.was .h2.q-frei { opacity: 1; }
.bd.was .mk { opacity: .6; }
/* today: the widget's accent dot */
.bd.today::before { content: ''; position: absolute; z-index: 1; bottom: 4px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
/* ring on top of the layers: hover, keyboard, the stay that is open in the panel */
.bd::after { content: ''; position: absolute; z-index: 2; inset: 0; border-radius: inherit; pointer-events: none; }
a.bd:hover::after { box-shadow: inset 0 0 0 1.5px var(--ink); }
a.bd:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; z-index: 3; }
.bd.sel::after { box-shadow: inset 0 0 0 2px var(--ink); }

.bel-foot { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.blegend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--ink-3); }
.blegend li { display: flex; align-items: center; gap: 7px; }
.bsw { flex: none; width: 22px; height: 22px; border-radius: var(--r-s); display: inline-flex; align-items: flex-end; justify-content: flex-end; padding: 0 3px 2px 0; font-size: 9.5px; font-weight: 600; line-height: 1; color: var(--muted); }
.bsw.q-frei { box-shadow: inset 0 0 0 1px var(--field-line); color: transparent; }
.bsw.q-half { background: linear-gradient(135deg, var(--paper) 50%, transparent 50%), var(--hatch); }
.bsw.q-b { color: var(--src-b); } .bsw.q-s { color: var(--src-s); }
.bsw.q-f0 { color: var(--src-f0); } .bsw.q-f1 { color: var(--src-f1); } .bsw.q-f2 { color: var(--src-f2); }
.bsw.q-f3 { color: var(--src-f3); } .bsw.q-f4 { color: var(--src-f4); } .bsw.q-f5 { color: var(--src-f5); }
.bel-counts { font-size: 12.5px; color: var(--muted); }

/* Termine: rows, not cards */
.bel-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-top: 10px; }
.bel-list { list-style: none; margin: 0; padding: 0; }
.bel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; padding: 12px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 80px; }
.bel:target { background: var(--accent-softer); box-shadow: -8px 0 0 var(--accent-softer), 8px 0 0 var(--accent-softer); }
.bel-when { flex: 0 0 100%; font-size: 14.5px; }
.bel-when strong { font-weight: 600; }
.bel-when .nights, .nights { margin-left: 8px; color: var(--muted); font-weight: 400; }
.bel-src { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; color: var(--ink-2); }
.bel-src .bsw, .bel-card-src .bsw { width: 18px; height: 18px; border-radius: 5px; padding: 0 2px 1px 0; }
.bel-note { flex: 1 1 100%; font-size: 13.5px; color: var(--ink-3); }
.bel-note .lbl { font-weight: 600; color: var(--ink-2); }
.bel-go { font-size: 13.5px; }
@media (min-width: 700px) {
  .bel { display: grid; grid-template-columns: 17.5rem minmax(0, 1fr) auto; column-gap: 20px; }
  .bel-when { grid-column: 1; white-space: nowrap; } .bel-src { grid-column: 2; }
  .bel-note { grid-column: 2; } .bel > .note-edit { grid-column: 3; grid-row: 1; justify-self: end; } .bel-go { grid-column: 3; grid-row: 2; justify-self: end; }
  .bel > .flash { grid-column: 1 / -1; }
}
.bel > .note-edit[open] { grid-column: 1 / -1; grid-row: auto; justify-self: stretch; }
/* „Für die Reinigung“ (Slice 7r): under the note, in the text column, not on top of the note's fold */
@media (min-width: 700px) { .bel > .clean-edit { grid-column: 2; grid-row: auto; justify-self: start; } }
.bel > .clean-edit[open] { grid-column: 1 / -1; justify-self: stretch; }
.bel-card-clean { font-size: 13.5px; }

/* quiet „Weitere …“ fold */
.more > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink-2); font-size: 14px; font-weight: 500; cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: ''; width: 7px; height: 7px; margin-top: -4px; border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor; transform: rotate(45deg); }
.more[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.more > summary .opened, .more[open] > summary .closed { display: none; }
.more[open] > summary .opened { display: inline; }
.more[open] > summary { margin-bottom: 12px; }

/* her note on a stay: read first, changed behind a fold */
.note-edit summary { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink-2); font-size: 13.5px; font-weight: 500; cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.note-edit summary::-webkit-details-marker { display: none; }
.note-edit[open] summary { text-decoration: none; }
.note-form { display: grid; gap: 8px; margin: 4px 0 6px; }
.note-form textarea { min-height: 5.5rem; }
.note-form button { justify-self: start; }

/* Sperren, now under the calendar */
.blocks { list-style: none; margin: 0; padding: 0; }
.blocks li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.blocks li em { font-style: normal; color: var(--muted); }
.blocks form { margin: 0; }
#sperren .block-form { margin-top: 14px; }
.platforms { margin-bottom: 14px; }
.platform-links { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Day panel (admin.js unhides it) ---------- */
.bel-panel[hidden] { display: none; }
.bel-panel { display: flex; flex-direction: column; gap: 0; background: var(--panel); }
.bel-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.bel-panel-head h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.1; }
.bel-panel-head h3:focus { outline: none; }
.bel-close { flex: none; width: 44px; min-height: 44px; padding: 0; margin: -8px -10px 0 0; border-radius: 50%; background: none; box-shadow: none; font-size: 18px; line-height: 1; }
.bel-close:hover { background: var(--chip-on); box-shadow: none; }
.bel-panel.showing .bel-panel-empty { display: none; }
.bel-next { list-style: none; margin: 12px 0 0; padding: 0; }
.bel-next li { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line-2); }
.bel-next .d { font-size: 13px; font-weight: 600; }
.bel-next .w { display: flex; flex-direction: column; gap: 1px; font-size: 14px; font-weight: 500; }
.bel-next .w small { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.bel-panel-go { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; margin-top: 4px; border-top: 1px solid var(--line-2); }
.bel-panel-empty .small { margin-top: 14px; }
.bel-card { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); font-size: 13.5px; }
.bel-card p { margin: 0; line-height: 1.45; color: var(--ink-2); }
.bel-card-src { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.bel-card .bel-when { font-size: 16px; }
.bel-card .bel-when strong { display: block; }
.bel-card .bel-when .nights { display: block; margin: 0; font-size: 13px; }
.bel-card dl { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 5px 10px; margin: 2px 0 0; }
.bel-card dt { color: var(--muted); }
.bel-card dd { margin: 0; overflow-wrap: anywhere; }
.bel-card .bel-note, .bel-card .msg.bel-note { padding: 10px 12px; border-radius: var(--r); background: var(--white); color: var(--ink); }
.bel-card-go { margin-top: 4px; }
.bel-card-note { font-size: 13.5px; }

@media (max-width: 899px) {
  .bel-panel { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; max-height: 72vh; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--gutter) calc(24px + env(safe-area-inset-bottom)); border-radius: var(--r-p) var(--r-p) 0 0; box-shadow: 0 -14px 28px rgba(28, 31, 27, .08); transform: translateY(100%); visibility: hidden; transition: transform .22s var(--ease), visibility 0s linear .22s; }
  .bel-panel.open { transform: none; visibility: visible; transition: transform .22s var(--ease); }
  .bel-panel-head { position: sticky; top: 0; z-index: 1; padding-top: 24px; background: var(--panel); }
  .bel-panel-head::before { content: ''; position: absolute; top: 10px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--handle); }
  .bel-panel-empty { display: none; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .bel-panel, .bel-panel.open { transition: none; } }
@media (min-width: 900px) {
  #belegung.has-panel { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 40px; row-gap: 20px; align-items: start; }
  #belegung.has-panel > * { grid-column: 1; }
  #belegung.has-panel > .bel-panel { grid-column: 2; grid-row: 1 / span 20; position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; padding: 22px; border-radius: var(--r-p); }
  .bel-close { display: none; }
  .bel-panel.showing .bel-close { display: inline-flex; }
}

/* ---------- Anfragen ---------- */
#anfragen > .note { margin-bottom: 24px; max-width: 760px; }
#anfragen > .req-group + .req-group { margin-top: 24px; }
.req-group h3 { margin: 0 0 12px; font-size: 13px; font-weight: 500; color: var(--muted); }
.req { display: flex; flex-direction: column; gap: 16px; margin-bottom: 12px; padding: 20px; border-radius: var(--r-p); background: var(--panel); scroll-margin-top: 80px; max-width: 760px; }
@media (min-width: 900px) { .req { padding: 22px; } }
.req:target { box-shadow: 0 0 0 3px var(--paper), 0 0 0 4.5px var(--accent); }
.req header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.req-ref { font-size: 12.5px; color: var(--muted); }
.req-ref code { font-family: inherit; font-size: inherit; }
.req h4 { margin: 0 0 4px; font-family: var(--serif); font-weight: 400; font-size: 25px; letter-spacing: -0.01em; }
@media (min-width: 900px) { .req h4 { font-size: 26px; } }
.req .sub { font-size: 14.5px; color: var(--ink-2); }
.req-who { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.req-name { font-size: 15px; font-weight: 600; }
.req-contact { font-size: 14px; overflow-wrap: anywhere; }
.req-price { text-align: right; }
.req-price .lbl { display: block; white-space: nowrap; font-size: 12px; font-weight: 500; color: var(--muted); }
.req-price strong { font-size: 18px; font-weight: 600; }
.req-price .small { display: block; }
.req-msg { padding: 12px 14px; border-radius: var(--r); background: var(--white); }
.req-msg .small { margin-bottom: 3px; }
.req-msg .msg { font-size: 14.5px; line-height: 1.5; }
.req-log { font-size: 13px; color: var(--ink-3); }
.tag { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--chip-on); color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.tag.new { background: var(--accent); color: var(--accent-text); }
.tag.offer { background: var(--white); color: var(--ink-2); }
.tag.ok { background: var(--accent-soft); color: var(--accent); }
.tag.paid { background: var(--accent-soft); color: var(--accent); }
.tag.paid::before { content: ''; width: 9px; height: 5px; margin-top: -3px; border-left: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(-45deg); }
.tag.no { background: var(--chip-on); color: var(--muted); }
.req-abgelehnt, .req-storniert { background: none; box-shadow: inset 0 0 0 1px var(--line); }
.req-abgelehnt h4, .req-storniert h4 { font-size: 21px; color: var(--ink-3); }
.actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.actions form { margin: 0; }
@media (max-width: 599px) { .actions > .primary:first-child { flex: 1 0 100%; min-height: 48px; } .actions > .button, .actions > .decide:not([open]) { flex: 1 1 40%; } .actions > .decide > summary { width: 100%; } }
.decide summary { list-style: none; }
.decide summary::-webkit-details-marker { display: none; }
.decide[open] { flex-basis: 100%; }
.decide .opened, .decide[open] .closed { display: none; }
.decide[open] .opened { display: inline; }
.decide[open] summary, .decide[open] summary:hover { margin-bottom: 8px; background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--field-line); filter: none; font-weight: 500; }
.decide-box { display: grid; gap: 12px; margin: 0; padding: 16px; border-radius: var(--r); background: var(--white); }
.decide-box label { max-width: 13rem; }
.decide-box p { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.decide-box button { justify-self: start; }
.req-more { padding-top: 10px; border-top: 1px solid var(--line-2); }
.req-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); cursor: pointer; list-style: none; }
.req-more > summary::-webkit-details-marker { display: none; }
.req-more > summary::after { content: ''; width: 7px; height: 7px; margin: -4px 4px 0 0; border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor; transform: rotate(45deg); }
.req-more[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.req-more-body { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.req dl { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 5px 14px; margin: 0 0 6px; font-size: 13.5px; }
.req dt { color: var(--muted); }
.req dd { margin: 0; overflow-wrap: anywhere; }
.hint { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
#buchung-neu { margin-top: 24px; max-width: 760px; }
#buchung-neu > .small { margin: 0 0 14px; max-width: 60ch; }

/* ---------- Einstellungen ---------- */
.set-layout { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 900px) { .set-layout { display: grid; grid-template-columns: 260px minmax(0, 680px); gap: 48px; align-items: start; } .set-index { position: sticky; top: 76px; } }
.set-index ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.set-index a { position: relative; display: flex; flex-direction: column; gap: 1px; min-height: 56px; justify-content: center; padding: 8px 28px 8px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.set-index a::after { content: ''; position: absolute; right: 8px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-right: 1.7px solid var(--muted); border-top: 1.7px solid var(--muted); transform: rotate(45deg); }
.set-index .t { font-size: 15px; font-weight: 500; }
.set-index .v { font-size: 12.5px; color: var(--muted); }
.set-index .v.warn { color: var(--error); font-weight: 500; }
@media (min-width: 900px) {
  .set-index a { min-height: 0; padding: 9px 12px; border-bottom: 0; border-radius: var(--r); }
  .set-index a::after { display: none; }
  .set-index a:hover { background: var(--chip-hover); }
  .set-index a[aria-current="true"] { background: var(--chip-on); }
  .set-index .t { font-size: 14.5px; }
}
.set-body > section { display: flex; flex-direction: column; gap: 20px; }
.set-body > section + section { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.set-body > section > h2 { margin: 0 0 -12px; font-family: var(--serif); font-weight: 400; font-size: 28px; letter-spacing: -0.01em; }
.set-body > section > h2 + .lead { margin-top: 0; }
.set-body > section h3 { margin: 8px 0 -8px; font-family: var(--serif); font-weight: 500; font-size: 21px; }
.set-back { display: none; }
.set-save { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.set-save .small { flex: 1 1 280px; }
/* With JS: one section at a time. Phone: the list, or one section with a way back. Laptop: list beside the section. */
.js-views .set-body > section { display: none; }
.js-views .set-body > section.on { display: flex; }
.js-views .set-body > section + section { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 899px) {
  .js-views #einstellungen.has-sec .set-index, .js-views #einstellungen.has-sec .view-head { display: none; }
  .js-views .set-back { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; min-height: 44px; margin: -8px 0 -8px; color: var(--ink-3); font-size: 14px; font-weight: 500; text-decoration: none; }
  .js-views .set-back::before { content: ''; width: 7px; height: 7px; border-left: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor; transform: rotate(45deg); }
}
@media (min-width: 900px) { .js-views .set-layout { padding-top: 0; } }

.placeholders { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.placeholders li { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border-radius: 8px; background: var(--panel); font-size: 13px; color: var(--muted); }
.placeholders code { color: var(--ink); }

/* Verbindungen */
.feeds { list-style: none; margin: 0; padding: 0; }
.feeds li { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 14px 0 14px 22px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-3); }
.feeds li:last-child { border-bottom: 1px solid var(--line); }
.feeds li::before { content: ''; position: absolute; left: 2px; top: 21px; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.feeds li.warn::before { background: var(--warn); }
.feeds li strong { font-size: 15px; font-weight: 600; color: var(--ink); }
.feeds .err { font-size: 13px; }
.sync-now { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.sync-now form { margin: 0; }
.links { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.links li, .links.single { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; align-items: center; }
.links .lbl { grid-column: 1 / -1; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.links input { font-family: var(--mono); font-size: 12.5px; }
.links .copy { width: 104px; }
.renew button { color: var(--error); }

/* Handy */
.push-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 18px; border-radius: var(--r-p); background: var(--panel); }
.push .push-state { font-size: 15px; font-weight: 600; max-width: 40ch; }
.push .push-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.push-forms { display: flex; flex-wrap: wrap; gap: 8px; }
.push-forms form { margin: 0; }
.app-install { display: flex; flex-direction: column; gap: 12px; }
.app-install [hidden], .browsers [hidden] { display: none; }
.browsers { display: flex; flex-direction: column; }
.browsers .more { border-top: 1px solid var(--line); }
.browsers .more:last-child { border-bottom: 1px solid var(--line); }
.browsers .more summary { display: flex; justify-content: space-between; width: 100%; min-height: 48px; color: var(--ink); font-size: 14.5px; text-decoration: none; }
.browsers .more[open] > summary { margin-bottom: 4px; }
.browsers .mine-tag { color: var(--accent); font-weight: 600; }
.steps { margin: 0 0 14px; padding-left: 22px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.steps li + li { margin-top: 6px; }
.browsers .more > .small { margin: -6px 0 14px; }

/* Einrichtung list (hosted) */
.setup-list { list-style: none; margin: 0; padding: 0; }
.setup-list li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.konten { list-style: none; margin: 0; padding: 0; }
.konten li { padding: 14px 0; border-top: 1px solid var(--line); }
.konten li:last-child { border-bottom: 1px solid var(--line); }
.konten li > p + p { margin-top: 2px; }

/* ---------- Other pages that load this file ---------- */
/* login */
.login { max-width: 380px; margin: 14vh auto 0; padding: 0 var(--gutter); display: flex; flex-direction: column; gap: 16px; }
.login h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 32px; letter-spacing: -0.012em; }
.login h1 .mark { width: 1.1em; height: 1.1em; margin-right: .3em; vertical-align: -.22em; }
.login .sub { margin-top: -12px; font-size: 13px; font-weight: 500; color: var(--muted); order: -1; }
.login form { display: grid; gap: 16px; }
.login form > button { min-height: 50px; font-size: 15.5px; }
.login-help { margin-top: 12px; color: var(--muted); font-size: 13px; }
.zugang summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; cursor: pointer; text-decoration: underline; }

/* mail preview, compose */
.mailwrap { display: flex; flex-direction: column; gap: 14px; max-width: 720px; padding-top: 12px; }
.back { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; min-height: 44px; color: var(--ink-3); font-size: 14px; font-weight: 500; text-decoration: none; }
.back::before { content: ''; width: 7px; height: 7px; border-left: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor; transform: rotate(45deg); }
.mail { border-radius: var(--r-p); background: var(--white); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.mailhead { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 10px; margin: 0; padding: 12px 18px; background: var(--panel); font-size: 13.5px; }
.mailhead dt { color: var(--muted); }
.mailhead dd { margin: 0; overflow-wrap: anywhere; }
.mailbody { display: flex; flex-direction: column; gap: 12px; padding: 18px; font-size: 14.5px; line-height: 1.55; }
.price { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 15.5px; }
.payopts { display: grid; gap: 12px; }
@media (min-width: 620px) { .payopts { grid-template-columns: 1fr 1fr; } }
.payopt { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--r); background: var(--panel); }
.payopt h4 { margin: 0; font-size: 14.5px; font-weight: 600; }
.meldung { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--r); background: var(--accent-softer); }
.meldung h4 { margin: 0; font-size: 14.5px; font-weight: 600; }
.qr { width: 160px; height: 160px; background: var(--white); }
.qr svg, .qr img { display: block; width: 100%; height: 100%; }
.sig { margin-top: 8px; }
.compose h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 30px; letter-spacing: -0.01em; }
.compose .sub { margin-top: -8px; font-size: 14px; color: var(--ink-2); }
.guestmsg { padding: 12px 14px; border-radius: var(--r); background: var(--panel); }
.guestmsg .small { margin-bottom: 3px; }
.compose-form { display: grid; gap: 16px; }
.compose-form > button { justify-self: start; min-height: 50px; padding: 0 26px; font-size: 15.5px; }
/* the confirmation is out: a check in the accent colour before the message */
.flash.sent { position: relative; display: flex; align-items: center; gap: 12px; }
.flash.sent::before { content: ''; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); }
.flash.sent::after { content: ''; position: absolute; left: 23px; top: 50%; width: 10px; height: 5px; margin-top: -4px; border-left: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text); transform: rotate(-45deg); }

/* Einrichten (hosted assistant), Abo: the same tokens, kept close to the old layout */
.setup-nav { max-width: calc(var(--page) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.setup-steps { display: flex; gap: 4px; margin: 0; padding: 4px 0 12px; list-style: none; overflow-x: auto; scrollbar-width: none; box-shadow: 0 1px 0 var(--line); }
.setup-steps li { flex: none; }
.setup-steps a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 6px; border-radius: 999px; color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; }
.setup-steps a:hover { background: var(--chip-hover); }
.setup-steps .n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--field-line); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.setup-steps .done .n { background: var(--accent-soft); box-shadow: none; color: var(--accent); }
.setup-steps .here a { background: var(--chip-on); }
.setup-steps .here .n { background: var(--accent); box-shadow: none; color: var(--accent-text); }
@media (max-width: 599px) { .setup-steps .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .setup-steps a { padding: 0 6px; } }
.setup { display: flex; flex-direction: column; gap: 16px; }
/* on a laptop the steps and the Abo read as one column, not the full page width */
.setup > * { max-width: 760px; }
.setup > .preview { max-width: none; }
.setup h2 { margin: 8px 0 0; font-family: var(--serif); font-weight: 400; font-size: 28px; }
.setup-next button { min-width: 12rem; }
.help { border-radius: var(--r); background: var(--panel); }
.help summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 6px 14px; font-weight: 500; cursor: pointer; list-style: none; }
.help summary::-webkit-details-marker { display: none; }
.help summary::after { content: ''; flex: none; width: 7px; height: 7px; margin: -4px 4px 0 0; border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor; transform: rotate(45deg); }
.help[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.help-body { padding: 0 14px 12px; font-size: 14px; }
.help-body ol { margin: 0 0 10px; padding-left: 20px; }
.choice { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 400; color: var(--ink); }
.choice input { width: 20px; height: 20px; min-height: 0; padding: 0; box-shadow: none; -webkit-appearance: auto; appearance: auto; accent-color: var(--accent); }
.colours { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.colour input[type="color"] { height: 48px; padding: 4px; cursor: pointer; }
.look-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.preview { display: block; width: 100%; height: 640px; border: 0; border-radius: var(--r-p); box-shadow: 0 0 0 1px var(--line); background: var(--white); }
.photos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.photos li { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: start; padding: 10px; border-radius: var(--r); background: var(--panel); }
.photos img { width: 120px; height: 80px; object-fit: cover; border-radius: var(--r-s); background: var(--line); }
.photo-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.photo-actions form { margin: 0; }
.abo section { margin-top: 28px; }
.abo-preis { width: 100%; max-width: 32rem; border-collapse: collapse; }
.abo-preis th, .abo-preis td { padding: 10px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.abo-preis td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.abo-preis .sum th, .abo-preis .sum td { font-weight: 600; border-bottom: 0; }
.abo-order button { min-width: 16rem; }
.abo-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* brand, once, bottom right; hosted only, never on Sabine's page (D72), no link until P6 */
.brand { display: flex; justify-content: flex-end; max-width: calc(var(--page) + 2 * var(--gutter)); margin: 0 auto; padding: 16px var(--gutter) 24px; }
.brand a, .brand > span { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-family: var(--serif); font-style: italic; font-size: 15px; text-decoration: none; }
.brand a:hover { color: var(--ink); }
.brand svg { flex: none; }

/* ---------- Slice 7n: beyond the handoff ---------- */
/* „Als Nächstes“ above the calendar: on a phone always (the panel there is only the sheet for a tapped day),
   on a laptop only without JS, because with JS the panel beside the grid carries the same list. */
.bel-next-box { padding: 16px 18px 18px; border-radius: var(--r-p); background: var(--panel); }
.bel-next-box h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.1; }
.bel-next-box .bel-next { margin-top: 8px; }
.bel-next-box .bel-next li:first-child { border-top: 0; }
.bel-next-box .bel-panel-go { flex-direction: row; flex-wrap: wrap; padding-top: 14px; }
.bel-next-box .bel-panel-go .button { flex: 1 1 8rem; padding: 0 10px; }
/* on a phone three rows are enough: the calendar should start on the first screen */
@media (max-width: 899px) { .bel-next-box .bel-next li:nth-child(n+4) { display: none; } }
.bel-next-empty { margin-top: 8px; font-size: 14px; color: var(--ink-3); }
/* Slice 7q: the Doppelbuchungs-Alarm's red line under „Als Nächstes“ (D79). */
.bel-alarm { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bel-alarm li { padding: 10px 12px; border-radius: 8px; background: var(--error-soft); color: var(--error); font-size: 14px; line-height: 1.4; }
.bel-alarm a { color: inherit; font-weight: 600; }
@media (min-width: 900px) { #belegung.has-panel > .bel-next-box { display: none; } }
/* a phone header that leaves room for the calendar */
@media (max-width: 899px) {
  .top { padding-top: 16px; padding-bottom: 6px; gap: 6px 16px; }
  .top-actions { gap: 0 16px; width: 100%; }
  .top-actions .sync { flex: 1 0 100%; }
}
/* Slice 7o: a narrow phone keeps the card's head and dates on as few lines as it can */
.req header { flex-wrap: wrap; }
.req-ref { white-space: nowrap; }
/* when the price wraps under the name it stays at the right edge, where the eye looks for it */
.req-price { margin-left: auto; }
/* „Überweisung ist eingegangen“ as the first, primary step: as wide as a primary link on a phone */
@media (max-width: 599px) { .actions > form:first-child { flex: 1 0 100%; } .actions > form:first-child > .primary { width: 100%; min-height: 48px; } }
.req dd code { font-family: inherit; font-size: inherit; }
@media (max-width: 359px) { .req h4 { font-size: 22px; } }
/* classes from before the redesign that the markup still carries */
.app-one-tap, .app-done { margin: 0; }
.app-done { font-weight: 600; }
.browsers .more.mine summary { font-weight: 600; }
.setup-skip { margin-top: 16px; }
.bel-free .bel-card-go { margin-top: 4px; }
.form-box > .tax-start { margin: 0; }

/* ---------- Slice 7p: Wiederkommen-Karte (A6, four to an A4 sheet) ---------- */
.karte-wrap .flash { margin-bottom: 14px; }
.karte-wrap .lead { margin: 0 0 18px; }
.karte-wrap h2 { margin-top: 32px; }
.karte-sheet { margin-top: 12px; }
.karte { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  width: 100%; max-width: 330px; aspect-ratio: 105 / 148; padding: 28px 24px; text-align: center;
  background: var(--white); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r); }
.karte + .karte { display: none; }
.karte p { margin: 0; }
.karte-name { font-family: var(--serif); font-size: 26px; line-height: 1.15; }
.karte-satz { font-family: var(--serif); font-size: 17px; line-height: 1.35; color: var(--ink-2); overflow-wrap: anywhere; }
.karte-satz.en { font-size: 14px; color: var(--muted); }
.karte-qr { width: 132px; height: 132px; margin-top: 6px; }
.karte-url { font-size: 13px; color: var(--ink-3); overflow-wrap: anywhere; }
.print-now { margin-left: 6px; }
@page { size: A4; margin: 0; }
@media print {
  body { background: #fff; margin: 0; padding: 0; }
  .no-print, .demobar, .brand { display: none !important; }
  .karte-wrap { max-width: none; margin: 0; padding: 0; }
  /* a hair under 297 mm: a sheet of exactly A4 rounds over onto an empty second page */
  .karte-sheet { display: grid; grid-template-columns: 105mm 105mm; grid-template-rows: 148mm 148mm; width: 210mm; height: 296mm; margin: 0; overflow: hidden; }
  .karte, .karte + .karte { display: flex; max-width: none; width: 105mm; height: 148mm; aspect-ratio: auto; padding: 14mm 12mm; gap: 5mm;
    border: 0; border-radius: 0; outline: .2mm dashed #bbb; outline-offset: -.1mm; break-inside: avoid; }
  .karte-name { font-size: 20pt; }
  .karte-satz { font-size: 12.5pt; }
  .karte-satz.en { font-size: 10pt; }
  .karte-qr { width: 38mm; height: 38mm; margin-top: 2mm; }
  .karte-url { font-size: 10pt; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Putzplan (Slice 7r): the cleaner's page without login, and her page to hand it out ---------- */
.putz-wrap .lead { margin: 0; }
.putz-list { list-style: none; margin: 0; padding: 0; }
.putz-day { padding: 14px 0; border-bottom: 1px solid var(--line); }
.putz-day h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 6px; font-family: var(--sans); font-size: 17px; font-weight: 600; }
.putz-kind { padding: 2px 9px; border-radius: 999px; background: var(--chip-on); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.putz-kind.wechsel { background: var(--accent); color: var(--accent-text); }
.putz-day p { margin: 3px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.putz-day .putz-note { margin-top: 6px; padding: 8px 10px; border-radius: var(--r); background: var(--panel); color: var(--ink); overflow-wrap: anywhere; }
.putz-link { width: 100%; font-size: 13px; }
.putz-actions { display: flex; flex-wrap: wrap; gap: 8px; }