/* Napolita Reservierungen v2 – Oberfläche fürs iPad */

:root {
    --paper: #FAF6F6;
    --surface: #FFFFFF;
    --surface-2: rgba(74, 32, 40, .06);
    --ink: #2E2427;
    --ink-2: #6B5C60;
    --ink-3: #85767A;
    --line: rgba(74, 32, 40, .10);
    --rosa: #CB7A80;          /* Logo-Rosa */
    --rosa-strong: #A9545E;   /* Text & Hauptbuttons (ausreichend Kontrast) */
    --rosa-soft: rgba(203, 122, 128, .18);
    --on-primary: #FFFFFF;
    --basil: #2E7A54;
    --basil-soft: rgba(46, 122, 84, .13);
    --pomodoro: #BC3A31;
    --pomodoro-soft: rgba(188, 58, 49, .10);
    --backdrop: rgba(46, 36, 39, .38);
    --shadow-1: 0 1px 2px rgba(46, 36, 39, .06);
    --shadow-2: 0 2px 6px rgba(46, 36, 39, .06), 0 18px 48px rgba(46, 36, 39, .14);
    --radius-s: 10px;
    --radius-m: 14px;
    --radius-l: 22px;
    --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
    --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --tap: 48px;
    --gutter: clamp(16px, 3vw, 32px);
    /* Filialfarben in Diagrammen (geprüft auf Farbsehschwäche): Savigny, Kudamm */
    --series-0: #C0606A;
    --series-1: #2F6FA3;
    /* Liquid Glass */
    --tiles: url("tiles-light.png");
    --wash: linear-gradient(180deg, rgba(251, 246, 246, .66) 0%, rgba(251, 246, 246, .44) 45%, rgba(251, 246, 246, .62) 100%);
    --glass: linear-gradient(160deg, rgba(255, 255, 255, .74) 0%, rgba(255, 255, 255, .56) 55%, rgba(255, 255, 255, .64) 100%);
    --glass-strong: linear-gradient(160deg, rgba(255, 255, 255, .92) 0%, rgba(255, 252, 252, .82) 100%);
    --glass-soft: rgba(255, 255, 255, .55);
    --glass-border: rgba(255, 255, 255, .78);
    --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .3), 0 1px 2px rgba(74, 32, 40, .06), 0 14px 36px rgba(74, 32, 40, .13);
    --glass-blur: blur(22px) saturate(1.8);
    --glass-hi: rgba(255, 255, 255, .7);
    --track: rgba(74, 32, 40, .07);
    --field-bg: rgba(255, 255, 255, .72);
    --field-border: rgba(74, 32, 40, .14);
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --paper: #191315;
        --surface: #241B1E;
        --surface-2: rgba(255, 255, 255, .06);
        --ink: #F5ECED;
        --ink-2: #C2B2B5;
        --ink-3: #8E7E82;
        --line: rgba(255, 255, 255, .09);
        --rosa: #E39AA0;
        --rosa-strong: #EBA7AD;
        --rosa-soft: rgba(227, 154, 160, .16);
        --on-primary: #2A1D20;
        --basil: #7CC9A0;
        --basil-soft: rgba(124, 201, 160, .14);
        --pomodoro: #F08A80;
        --pomodoro-soft: rgba(240, 138, 128, .14);
        --backdrop: rgba(0, 0, 0, .55);
        --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
        --shadow-2: 0 2px 6px rgba(0, 0, 0, .3), 0 18px 48px rgba(0, 0, 0, .45);
        --series-0: #CF727B;
        --series-1: #5E9BD0;
        --tiles: url("tiles-dark.png");
        --wash: linear-gradient(180deg, rgba(20, 13, 15, .30) 0%, rgba(20, 13, 15, .12) 45%, rgba(20, 13, 15, .38) 100%);
        --glass: linear-gradient(160deg, rgba(64, 45, 51, .64) 0%, rgba(36, 25, 29, .56) 60%, rgba(44, 31, 35, .62) 100%);
        --glass-strong: linear-gradient(160deg, rgba(60, 43, 48, .94) 0%, rgba(33, 23, 27, .9) 100%);
        --glass-soft: rgba(255, 255, 255, .06);
        --glass-border: rgba(255, 255, 255, .11);
        --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(0, 0, 0, .3), 0 14px 36px rgba(0, 0, 0, .45);
        --track: rgba(255, 255, 255, .07);
    --glass-hi: rgba(255, 255, 255, .12);
        --glass-hi: rgba(255, 255, 255, .12);
        --field-bg: rgba(0, 0, 0, .22);
        --field-border: rgba(255, 255, 255, .12);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --paper: #191315;
    --surface: #241B1E;
    --surface-2: rgba(255, 255, 255, .06);
    --ink: #F5ECED;
    --ink-2: #C2B2B5;
    --ink-3: #8E7E82;
    --line: rgba(255, 255, 255, .09);
    --rosa: #E39AA0;
    --rosa-strong: #EBA7AD;
    --rosa-soft: rgba(227, 154, 160, .16);
    --on-primary: #2A1D20;
    --basil: #7CC9A0;
    --basil-soft: rgba(124, 201, 160, .14);
    --pomodoro: #F08A80;
    --pomodoro-soft: rgba(240, 138, 128, .14);
    --backdrop: rgba(0, 0, 0, .55);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, .3), 0 18px 48px rgba(0, 0, 0, .45);
    --series-0: #CF727B;
    --series-1: #5E9BD0;
    --tiles: url("tiles-dark.png");
    --wash: linear-gradient(180deg, rgba(20, 13, 15, .30) 0%, rgba(20, 13, 15, .12) 45%, rgba(20, 13, 15, .38) 100%);
    --glass: linear-gradient(160deg, rgba(64, 45, 51, .64) 0%, rgba(36, 25, 29, .56) 60%, rgba(44, 31, 35, .62) 100%);
    --glass-strong: linear-gradient(160deg, rgba(60, 43, 48, .94) 0%, rgba(33, 23, 27, .9) 100%);
    --glass-soft: rgba(255, 255, 255, .06);
    --glass-border: rgba(255, 255, 255, .11);
    --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(0, 0, 0, .3), 0 14px 36px rgba(0, 0, 0, .45);
    --track: rgba(255, 255, 255, .07);
    --glass-hi: rgba(255, 255, 255, .12);
    --field-bg: rgba(0, 0, 0, .22);
    --field-border: rgba(255, 255, 255, .12);
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 400 17px/1.45 var(--font-ui);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

/* Fliesen aus dem Laden als fester Hintergrund (fixed geht auf dem iPad nur so zuverlässig) */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--wash), var(--tiles) 0 0 / 140px 140px repeat, var(--paper);
    pointer-events: none;
}

/* Offenes Overlay: Seite dahinter steht still (Klasse setzt core.js) */
html.is-locked, html.is-locked body { overflow: hidden; }
/* Scrollen in Overlays am Ende nicht an die Seite weiterreichen */
.dialog-backdrop, .sheet-backdrop, .dialog, .detail-body, .sheet-content, .sheet-nav, .tour {
    overscroll-behavior: contain;
}

/* ---------- Liquid Glass: durchscheinende Flächen mit Unschärfe und Lichtkante ---------- */

.topbar, .sheet-list, .panel, .kpi, .tabs, .toolbar .segmented, .daypick, .chip-btn, .daynav .icon-btn, .login,
.dialog, .sheet, .detail, .tour-card, .chart-tip, .search-panel,
.dayhead, .dash-hero, .page-head, .group-title, .sync, .empty, .past-fold > summary, .past-fold-note {
    background: var(--glass);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}
/* Schwebende Fenster etwas dichter, damit Text ruhig lesbar bleibt */
.dialog, .sheet, .detail, .tour-card, .chart-tip, .search-panel { background: var(--glass-strong); }
/* Glas im Glas: keine zweite Unschärfe, nur ein zarter Schleier */
.sheet .panel, .detail-contact, .history-list, .bubble-in, .dialog-facts {
    background: var(--glass-soft);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 var(--glass-hi);
}

@media (prefers-reduced-transparency: reduce) {
    body::before { background: var(--paper); }
    .topbar, .sheet-list, .panel, .kpi, .tabs, .daypick, .chip-btn, .daynav .icon-btn, .login,
    .dialog, .sheet, .detail, .tour-card, .chart-tip, .search-panel,
    .dayhead, .dash-hero, .page-head, .group-title, .sync, .empty, .past-fold > summary, .past-fold-note {
        background: var(--surface);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { max-width: 100%; } /* nie über die eigene Zelle hinaus */

/* Datums- und Uhrzeitfelder: Safari auf dem iPad ignoriert sonst width:100%, lässt leere Felder auf eine
   winzige Box schrumpfen und Text samt Kalender-Symbol ins Nachbarfeld laufen. */
/* :where = niedrigste Priorität, feste Breiten einzelner Felder gewinnen weiterhin */
:where(input[type="date"], input[type="time"]) {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-align: left;
    line-height: 1.2;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value { min-height: 1.2em; margin: 0; text-align: left; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator { margin-left: auto; padding-left: 6px; opacity: .55; cursor: pointer; }
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) input[type="date"]::-webkit-calendar-picker-indicator,
    :root:not([data-theme="light"]) input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1); }
}
button { cursor: pointer; }
[hidden] { display: none !important; }

:focus-visible {
    outline: 3px solid var(--rosa);
    outline-offset: 2px;
}

svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.muted { color: var(--ink-2); }

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--tap);
    padding: 0 22px;
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    background: var(--glass);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: inset 0 1px 0 var(--glass-hi), 0 1px 2px rgba(74, 32, 40, .06);
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: background-color .15s, transform .1s, opacity .15s;
    touch-action: manipulation;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
/* Gefüllte Buttons: farbiges Glas mit Lichtkante oben */
.btn-primary, .btn-accept, .btn-danger {
    border-color: rgba(255, 255, 255, .22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(0, 0, 0, .08), 0 6px 16px var(--btn-glow, rgba(169, 84, 94, .28));
}
.btn-primary { background: linear-gradient(180deg, #BC6670 0%, var(--rosa-strong) 100%); color: var(--on-primary); }
.btn-accept { --btn-glow: rgba(46, 122, 84, .28); background: linear-gradient(180deg, #3A8C63 0%, var(--basil) 100%); color: #fff; }
.btn-danger { --btn-glow: rgba(188, 58, 49, .25); background: linear-gradient(180deg, #CC4B41 0%, var(--pomodoro) 100%); color: #fff; }
.btn-quiet { color: var(--ink); }
.btn-deny { color: var(--pomodoro); }
.btn-block { width: 100%; }
:root[data-theme="dark"] .btn-primary { background: linear-gradient(180deg, #F2B8BD 0%, var(--rosa-strong) 100%); }
:root[data-theme="dark"] .btn-accept { background: linear-gradient(180deg, #96D8B4 0%, var(--basil) 100%); color: #102118; }
:root[data-theme="dark"] .btn-danger { background: linear-gradient(180deg, #F6A39B 0%, var(--pomodoro) 100%); color: #2A1210; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .btn-primary { background: linear-gradient(180deg, #F2B8BD 0%, var(--rosa-strong) 100%); }
    :root:not([data-theme="light"]) .btn-accept { background: linear-gradient(180deg, #96D8B4 0%, var(--basil) 100%); color: #102118; }
    :root:not([data-theme="light"]) .btn-danger { background: linear-gradient(180deg, #F6A39B 0%, var(--pomodoro) 100%); color: #2A1210; }
}

.icon-btn {
    display: inline-grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-2);
    text-decoration: none;
    touch-action: manipulation;
}
.icon-btn:active { background: var(--surface-2); }
@media (hover: hover) { .icon-btn:hover { background: var(--surface-2); color: var(--ink); } }

.chip-btn {
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-2);
}
.chip-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---------- Login ---------- */

.login-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: var(--gutter);
}
.login { width: min(420px, 100%); padding: 32px 30px 30px; border-radius: 30px; text-align: center; }
.login-logo { width: 148px; height: 148px; }
.login h1 {
    margin: 12px 0 32px;
    font: 600 34px/1.1 var(--font-display);
    letter-spacing: -.01em;
}
.login-form { display: grid; gap: 10px; text-align: left; }
.login-form label { font-weight: 600; font-size: 15px; color: var(--ink-2); }
.login-form input {
    min-height: 54px;
    padding: 0 18px;
    border: 1px solid var(--field-border);
    border-radius: var(--radius-m);
    background: var(--field-bg);
    font-size: 18px;
}
.login-form input[aria-invalid="true"] { border-color: var(--pomodoro); }
.login-form .btn { margin-top: 8px; min-height: 54px; font-size: 17px; }
.login-error { margin: 0; color: var(--pomodoro); font-size: 15px; }

/* ---------- Kopfzeile ---------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 14px;
    /* schwebende Glasleiste mit Abstand zum Rand */
    top: calc(10px + env(safe-area-inset-top));
    margin: calc(10px + env(safe-area-inset-top)) var(--gutter) 0;
    padding: 8px 10px 8px 12px;
    border-radius: 26px;
}
.italy .topbar::after {
    content: "";
    position: absolute;
    left: 26px; right: 26px; bottom: -1px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #1F8A4C 0 33.3%, #F4F1EC 33.3% 66.6%, #CE2B37 66.6%);
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand img { width: 44px; height: 44px; flex: none; }

.segmented {
    display: inline-flex;
    padding: 4px;
    border-radius: 999px;
    background: var(--track);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06);
}
.segmented button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-weight: 600;
    color: var(--ink-2);
    transition: background-color .2s, color .2s, box-shadow .2s;
}
.badge {
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--rosa-strong);
    color: var(--on-primary);
    font-size: 13px;
    line-height: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; margin-left: auto; }

/* Bereiche in der Kopfleiste */
.topnav {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    border-radius: 999px;
    background: var(--track);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06);
}
.topnav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px 0 13px;
    border-radius: 999px;
    color: var(--ink-2);
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s, color .2s, box-shadow .2s;
}
.topnav a svg { width: 20px; height: 20px; flex: none; }
.topnav a[aria-current="page"] {
    color: var(--ink);
    background: var(--glass-strong);
    box-shadow: inset 0 1px 0 var(--glass-hi), 0 1px 2px rgba(0, 0, 0, .08), 0 4px 12px rgba(74, 32, 40, .10);
}
.topnav a[aria-current="page"] svg { color: var(--rosa-strong); }
@media (hover: hover) { .topnav a:not([aria-current]):hover { color: var(--ink); } }

.toolbar-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ---------- Werkzeugleiste ---------- */

.board {
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px var(--gutter) calc(48px + env(safe-area-inset-bottom));
}

.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
}

.tabs { display: flex; gap: 2px; padding: 4px; border-radius: 999px; }
.tabs button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink-2);
    transition: background-color .2s, color .2s, box-shadow .2s;
}
.tabs button[aria-selected="true"],
.segmented button[aria-selected="true"],
.segmented button[aria-checked="true"] {
    color: var(--ink);
    background: var(--glass-strong);
    box-shadow: inset 0 1px 0 var(--glass-hi), 0 1px 2px rgba(0, 0, 0, .08), 0 4px 12px rgba(74, 32, 40, .10);
}
.tab-count {
    font: 600 15px/1 var(--font-display);
    color: var(--rosa-strong);
    font-variant-numeric: tabular-nums;
}

.daynav { display: flex; align-items: center; gap: 6px; }
.daypick {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 16px;
    white-space: nowrap;
}
.daypick input {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    cursor: pointer;
}
.daynav.is-all .daypick,
.daynav.is-all #prevDay,
.daynav.is-all #nextDay { opacity: .35; }

/* ---------- Tageskopf ---------- */

/* Text steht nie direkt auf den Fliesen (am Desktop sonst kaum lesbar): Kopf, Datumszeilen und Hinweise liegen auf Glas */
.dayhead {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 24px;
    margin: 22px 0 14px;
    padding: 14px 22px;
    border-radius: var(--radius-l);
}
.dayhead h1 {
    margin: 0;
    font: 600 clamp(28px, 3.4vw, 38px)/1.1 var(--font-display);
    letter-spacing: -.015em;
}
.summary { margin: 0; color: var(--ink-2); font-size: 16px; }
.summary b {
    font: 600 22px/1 var(--font-display);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    margin-right: 4px;
}
.summary span + span { margin-left: 18px; }

/* ---------- Liste ---------- */

.group-title {
    display: table;   /* so breit wie der Text, aber eigene Zeile */
    margin: 26px 0 10px;
    padding: 7px 16px;
    border-radius: 999px;
    font: 600 17px/1.2 var(--font-display);
    color: var(--ink);
}
.group-title:first-child { margin-top: 0; }
.group-title.is-past { color: var(--ink-2); }

/* Vergangene, unbearbeitete Anfragen: eingeklappt unter der Liste */
.past-fold { margin-top: 24px; }
.past-fold > summary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 14px 0 18px;
    border-radius: 999px;
    list-style: none;
    color: var(--ink-2);
    font: 600 16px/1.2 var(--font-display);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.past-fold > summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .past-fold > summary:hover { color: var(--ink); } }
.past-fold-count { min-width: 28px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--surface-2); font: 650 13px/24px var(--font-ui); text-align: center; font-variant-numeric: tabular-nums; }
.past-fold > summary svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.past-fold[open] > summary svg { transform: rotate(180deg); }
.past-fold-note { display: table; max-width: 70ch; margin: 12px 0 10px; padding: 9px 16px; border-radius: var(--radius-m); color: var(--ink-2); font-size: 14px; }
.past-fold .res-actions .btn-quiet { min-height: 40px; padding: 0 16px; }

.sheet-list {
    border-radius: var(--radius-l);
    overflow: hidden;
}

.res {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) 84px auto;
    align-items: center;
    gap: 8px 18px;
    padding: 16px 20px;
    border-top: 1px solid var(--line);
    transition: opacity .25s, transform .25s, background-color .3s;
}
.res:first-child { border-top: 0; }
.res { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.res:active { background: var(--rosa-soft); }
@media (hover: hover) { .res:hover { background: var(--glass-soft); } }
.res.is-leaving { opacity: 0; transform: translateX(24px); }
.res.is-new { background: var(--rosa-soft); }
.res.is-past { opacity: .6; }

.res-time { display: grid; gap: 2px; }
.res-time .t {
    font: 600 34px/1 var(--font-display);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.res.is-open .res-time .t { color: var(--rosa-strong); }
.res-time .d { font-size: 14px; color: var(--ink-3); font-weight: 600; }

.res-main { min-width: 0; }
.res-name {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 650;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.res-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 15px; color: var(--ink-2); }
.res-meta a, .res-meta button {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.res-meta .phone { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--rosa-strong); font-weight: 600; }
.res-meta .phone svg { width: 18px; height: 18px; }

.tag {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    background: var(--surface-2);
    color: var(--ink-2);
}
.tag-ok { background: var(--basil-soft); color: var(--basil); }
.tag-open { background: var(--rosa-soft); color: var(--rosa-strong); }

.res-guests { display: grid; justify-items: center; line-height: 1; }
.res-guests .n { font: 600 30px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.res-guests .l { margin-top: 4px; font-size: 13px; color: var(--ink-3); font-weight: 600; }

.res-actions { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.res-actions .btn { min-width: 124px; }
.res-actions .icon-btn { color: var(--ink-3); }

.empty {
    border-radius: var(--radius-l);
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 56px 24px;
    text-align: center;
}
.empty img { width: 72px; height: 72px; opacity: .9; margin-bottom: 8px; }
.empty h2 { margin: 0; font: 600 24px/1.2 var(--font-display); }
.empty p { margin: 0; color: var(--ink-2); max-width: 44ch; }

.error-box {
    padding: 22px;
    border-radius: var(--radius-l);
    background: var(--pomodoro-soft);
    color: var(--pomodoro);
    font-weight: 600;
}

.skeleton {
    height: 84px;
    margin-bottom: 10px;
    border-radius: var(--radius-m);
    background: linear-gradient(90deg, var(--glass-soft), rgba(255, 255, 255, .7), var(--glass-soft));
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite linear;
}
@keyframes shimmer { to { background-position: -200% 0; } }

.sync { display: table; margin: 18px 0 0 auto; padding: 6px 14px; border-radius: 999px; font-size: 14px; color: var(--ink-2); text-align: right; }
.sync:empty { display: none; }

/* ---------- Dialoge ---------- */

.dialog-backdrop, .sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    /* feste Zeile in Fensterhöhe – sonst wächst das Raster mit dem Inhalt und Overlays ragen aus dem Bildschirm */
    grid-template-rows: minmax(0, 1fr);
    place-items: center;
    padding: 24px;
    background: var(--backdrop);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: fade .18s ease-out;
}
.dialog-backdrop { z-index: 60; }

/* ---------- Suche ---------- */
.search-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 150px;
    min-height: var(--tap);
    padding: 0 18px 0 14px;
    border: 1px solid var(--field-border);
    border-radius: 999px;
    background: var(--field-bg);
    color: var(--ink-3);
    font-weight: 600;
    touch-action: manipulation;
}
.search-btn svg, .search-field svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (hover: hover) { .search-btn:hover { color: var(--ink-2); border-color: var(--rosa); } }

.search-backdrop { place-items: start center; }
.search-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(760px, 100%);
    max-height: 100%;
    margin-top: 2vh;
    border-radius: var(--radius-l);
    overflow: hidden;
    animation: rise .22s cubic-bezier(.2, .8, .2, 1);
}
.search-field {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px 12px 22px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-3);
}
.search-field svg { width: 24px; height: 24px; }
.search-field input {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--ink);
    font: 500 21px/1.3 var(--font-ui);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.search-field input::-webkit-search-cancel-button { display: none; }
.search-field input::placeholder { color: var(--ink-3); }
.search-close { flex: none; }
.search-results { overflow-y: auto; padding: 6px 10px 14px; overscroll-behavior: contain; }
.search-results[aria-busy="true"] { opacity: .6; transition: opacity .2s .15s; }
.search-group {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 14px 12px 6px;
    font: 600 15px/1.2 var(--font-ui);
    color: var(--ink-2);
}
.search-group span { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.search-list { display: grid; gap: 2px; }
.search-hit {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 16px;
    width: 100%;
    padding: 12px;
    border: 0;
    border-radius: var(--radius-m);
    background: transparent;
    color: inherit;
    text-align: left;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
}
.search-hit:active { background: var(--rosa-soft); }
@media (hover: hover) { .search-hit:hover { background: var(--glass-soft); } }
.search-hit:focus-visible { background: var(--glass-soft); }
.search-when { display: grid; gap: 3px; }
.search-when .t { font: 600 24px/1 var(--font-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.search-hit.is-open:not(.is-past) .search-when .t { color: var(--rosa-strong); }
.search-when .d { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.search-hit.is-past .search-when, .search-hit.is-past .search-main { opacity: .72; }
.search-main { display: grid; gap: 3px; min-width: 0; }
.search-name { font-size: 17px; font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; }
.search-contact { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.search-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.search-hit mark { padding: 0 1px; border-radius: 3px; background: var(--rosa-soft); color: inherit; box-shadow: inset 0 -2px 0 var(--rosa); }
.search-tips, .search-empty { padding: 14px 12px 4px; color: var(--ink-2); }
.search-tips p, .search-empty p { margin: 0 0 12px; }
.search-empty-title { color: var(--ink); font-weight: 600; }
.search-tips ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.search-tips li { display: flex; align-items: center; gap: 12px; }
.search-tips .chip-btn { min-width: 104px; justify-content: center; }
.search-more { margin: 12px 12px 0; font-size: 14px; color: var(--ink-3); }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px) scale(.98); } }

.dialog {
    width: min(460px, 100%);
    padding: 28px;
    border-radius: var(--radius-l);
    animation: rise .22s cubic-bezier(.2, .8, .2, 1);
}
.dialog h2 { margin: 0 0 14px; font: 600 26px/1.15 var(--font-display); }
.dialog p { margin: 0 0 22px; color: var(--ink-2); }
.dialog-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    margin: 0 0 16px;
    padding: 14px 16px;
    border-radius: var(--radius-m);
    font-size: 16px;
}
.dialog-facts dt { color: var(--ink-3); font-weight: 600; }
.dialog-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

.dialog-phone { text-align: center; }
.dialog-phone .phone-number { font: 600 28px/1.2 var(--font-display); color: var(--ink); margin-bottom: 18px; }
.dialog-phone img { display: block; margin: 0 auto 12px; border-radius: var(--radius-m); background: #fff; padding: 10px; width: 220px; height: 220px; }
.dialog-phone .dialog-actions { justify-content: center; }

.toast {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom));
    z-index: 70;
    max-width: calc(100% - 32px);
    padding: 14px 22px;
    border-radius: 999px;
    background: rgba(40, 28, 32, .78);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #FBF5F5;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), var(--shadow-2);
    transform: translateX(-50%);
    animation: toast-in .25s cubic-bezier(.2, .8, .2, 1);
}
.toast.is-error { background: var(--pomodoro); color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } }

/* ---------- Detailansicht ---------- */

.res-open {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.res-open:hover { text-decoration: underline; text-decoration-color: var(--rosa); text-underline-offset: 3px; }
.tag-regular { background: var(--surface-2); color: var(--ink); }
.tag-reply { background: var(--rosa-strong); color: var(--on-primary); }

.detail-backdrop { place-items: stretch end; padding: 0; }
.detail {
    display: flex;
    flex-direction: column;
    width: min(560px, 100%);
    height: 100%;
    animation: slide-in .25s cubic-bezier(.2, .8, .2, 1);
}
@keyframes slide-in { from { transform: translateX(40px); opacity: 0; } }
.detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(10px + env(safe-area-inset-top)) 14px 10px 24px;
    border-bottom: 1px solid var(--line);
}
.detail-head-title { font-weight: 600; color: var(--ink-2); }
.detail-body { flex: 1; overflow-y: auto; padding: 22px 24px calc(40px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }

/* Klar getrennte Karten: Reservierung, Gast, Nachrichten, Verlauf */
.detail-card {
    margin-top: 14px;
    padding: 16px 18px 18px;
    border-radius: var(--radius-l);
    background: var(--glass-soft);
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 var(--glass-hi);
}
.detail-card:first-child { margin-top: 0; }
.detail-card-main { background: var(--glass); box-shadow: inset 0 1px 0 var(--glass-hi), 0 6px 18px rgba(74, 32, 40, .08); }
.detail-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.detail-card-head h3 { margin: 0; font-size: 14px; font-weight: 650; color: var(--ink-3); }
.detail-card-head .link-btn { padding: 0; min-height: 0; }
.detail-card h2 { margin: 0 0 4px; font: 600 26px/1.15 var(--font-display); overflow-wrap: anywhere; }
.detail-card .detail-chips { margin-top: 10px; }
.thread-more { justify-self: center; }
.composer .ph-chips { margin-top: 2px; }
.detail-time { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.detail-time .t { font: 600 40px/1 var(--font-display); letter-spacing: -.02em; color: var(--rosa-strong); font-variant-numeric: tabular-nums; }
.detail-time .d { color: var(--ink-2); font-weight: 600; }
.detail-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.detail-contacts { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 14px; }
.detail-contact {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    align-items: baseline;
    gap: 2px 12px;
    padding: 12px 14px;
    border-radius: var(--radius-m);
    text-align: left;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.detail-contact .label { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.detail-contact .value { font-weight: 600; color: var(--rosa-strong); overflow-wrap: anywhere; }
.detail-actions { display: flex; gap: 10px; margin-top: 16px; }
.detail-actions .btn { flex: 1; }

.detail-summary { margin: 0; color: var(--ink-2); font-weight: 600; }

.history-list { list-style: none; margin: 0; padding: 0; border-radius: var(--radius-m); overflow: hidden; }
.history-list li {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) 1fr 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    font-size: 15px;
}
.history-list li:first-child { border-top: 0; }
.history-list li.is-this { background: var(--rosa-soft); }
.h-date { font-weight: 600; font-variant-numeric: tabular-nums; }
.h-meta { color: var(--ink-2); }
.h-status { font-size: 13px; font-weight: 600; color: var(--ink-3); }

.thread { display: grid; gap: 10px; }
.bubble {
    max-width: 88%;
    padding: 12px 14px;
    border-radius: 16px;
}
.bubble header { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-3); font-weight: 600; margin-bottom: 4px; }
.bubble .subject { margin: 0 0 4px; font-weight: 650; font-size: 15px; }
.bubble .text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.45; }
.bubble-out { justify-self: end; background: var(--rosa-soft); border-color: transparent; border-bottom-right-radius: 6px; }
.bubble-in { justify-self: start; border-bottom-left-radius: 6px; }
.bubble-in.is-unread { border-color: var(--rosa-strong); box-shadow: 0 0 0 1px var(--rosa-strong); }
.composer { display: grid; gap: 8px; margin-top: 14px; }
.composer-actions { display: flex; justify-content: flex-end; }

/* ---------- E-Mail im Dialog ---------- */

.dialog.has-mail {
    width: min(580px, 100%);
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
}
.dialog-mail { display: grid; gap: 14px; margin: 0 0 22px; }
.dialog-note { display: grid; gap: 6px; }
.dialog-note label, .settings-label { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.dialog-note small, .form-row small { font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.dialog-note .link-btn { justify-self: start; padding: 0; }
#dialogNote, #createNote, .text-input, .text-area {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--field-border);
    border-radius: var(--radius-s);
    background: var(--field-bg);
    font-size: 17px;
    line-height: 1.4;
    resize: vertical;
}
.text-input { min-height: 48px; padding-top: 0; padding-bottom: 0; }
.mail-preview {
    width: 100%;
    height: 460px;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background: #F6F1F1;
}

/* ---------- Neue Reservierung ---------- */

.btn-new { min-height: 44px; padding: 0 18px 0 14px; margin-right: 6px; }
.btn-new svg { width: 20px; height: 20px; stroke-width: 2.2; }

.dialog-form {
    width: min(640px, 100%);
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.dialog-form .dialog-actions {
    position: sticky;
    bottom: -28px;
    margin: 0 -28px -28px;
    padding: 14px 28px 28px;
    background: var(--glass-strong);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--line);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; margin-bottom: 18px; }
.form-row { display: grid; gap: 6px; align-content: start; min-width: 0; }
.form-row.is-full, .check-row.is-full { grid-column: 1 / -1; }
.form-row label, .form-label { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.form-row small { font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.dialog-form input[type="text"], .dialog-form input[type="tel"], .dialog-form input[type="email"],
.dialog-form input[type="date"], .dialog-form input[type="time"], .dialog-form input[type="number"] {
    width: 100%;
    min-height: 50px;
    padding: 0 14px;
    border: 1px solid var(--field-border);
    border-radius: var(--radius-s);
    background: var(--field-bg);
    font-size: 17px;
    font-variant-numeric: tabular-nums;
}
.dialog-form input[aria-invalid="true"] { border-color: var(--pomodoro); }
.dialog-form .segmented { justify-self: start; }

.stepper { display: flex; align-items: center; gap: 6px; }
.stepper .icon-btn { flex: none; border: 1px solid var(--field-border); background: var(--field-bg); color: var(--ink); }
.dialog-form .stepper input { width: 72px; text-align: center; font: 600 22px/1 var(--font-display); -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Uhrzeit: Tageszeit (Mittag, Nachmittag, Abend) + freie Eingabe, darunter eine Reihe pro Stunde */
.time-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.dialog-form .time-row input { width: 132px; margin-left: auto; }
.dialog-form .time-row .time-parts[hidden] + input { margin-left: 0; }
@media (max-width: 560px) {
    .dialog-form .time-row input { margin-left: 0; }   /* rutscht in eine eigene Zeile – dann links wie die anderen Felder */
}
.time-parts { flex: 1 1 auto; min-width: 0; }
.time-parts button {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-width: 0;
    min-height: 50px;
    padding: 4px 12px;
    line-height: 1.15;
}
.time-parts b { font-weight: 650; }
.time-parts small { font-size: 12px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.time-parts button[aria-checked="true"] b { color: var(--rosa-strong); }
.form-hint { font-size: 14px; color: var(--rosa-strong); font-weight: 600; }
.form-hint:empty { display: none; }
.time-grid { display: grid; gap: 6px; }
.time-grid:empty { display: none; }
.time-grid-row { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 6px; }
.time-grid.is-flow .time-grid-row { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
.time-chip {
    min-height: 42px;
    border: 1px solid var(--field-border);
    border-radius: var(--radius-s);
    background: var(--field-bg);
    font-weight: 600;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}
.time-chip[aria-pressed="true"] { background: var(--rosa-strong); border-color: var(--rosa-strong); color: var(--on-primary); }

.check-row { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.check-row input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--rosa-strong); }
.check-row input:disabled + span { color: var(--ink-3); }
.check-row span { font-weight: 600; }
.check-row small { display: block; margin-top: 2px; font-weight: 400; font-size: 14px; color: var(--ink-2); }

.form-error {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: var(--radius-s);
    background: var(--pomodoro-soft);
    color: var(--pomodoro);
    font-weight: 600;
}

/* ---------- Einstellungen ---------- */

.sheet {
    display: flex;
    flex-direction: column;
    width: min(1040px, 100%);
    height: min(800px, 100%);
    border-radius: var(--radius-l);
    overflow: hidden;
    animation: rise .25s cubic-bezier(.2, .8, .2, 1);
}
.sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px 14px 28px;
    border-bottom: 1px solid var(--line);
}
.sheet-head h2 { margin: 0; font: 600 24px/1.2 var(--font-display); }
.sheet-head-actions { display: flex; align-items: center; gap: 10px; }
.save-state { font-size: 14px; color: var(--ink-3); margin-right: 6px; }
.save-state.is-dirty { color: var(--rosa-strong); font-weight: 600; }

.sheet-body { flex: 1; display: grid; grid-template-columns: 240px 1fr; min-height: 0; }
.sheet-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 12px;
    border-right: 1px solid var(--line);
    overflow-y: auto;
}
.sheet-nav button {
    min-height: var(--tap);
    padding: 0 16px;
    border: 0;
    border-radius: var(--radius-s);
    background: transparent;
    text-align: left;
    font-weight: 600;
    color: var(--ink-2);
}
.sheet-nav button[aria-current="true"] { background: var(--rosa-soft); color: var(--rosa-strong); }

.sheet-content { overflow-y: auto; padding: 26px 30px 48px; -webkit-overflow-scrolling: touch; }
.sheet-content h3 { margin: 0 0 6px; font: 600 24px/1.2 var(--font-display); }
.sheet-content .lead { margin: 0 0 22px; color: var(--ink-2); max-width: 62ch; }
.sheet-content h4 { margin: 28px 0 10px; font-size: 17px; }
/* Überschrift „Einstellungen“: schnelles Tippen (geheimer Weg zum Admin) soll nicht zoomen oder Text markieren */
#settingsTitle { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.sheet-content .section-hint { margin: -4px 0 12px; color: var(--ink-2); font-size: 15px; max-width: 62ch; }

.section-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.panel {
    border-radius: var(--radius-l);
}

.hours-row {
    display: grid;
    grid-template-columns: 130px 72px 1fr;
    align-items: center;
    gap: 12px 16px;
    padding: 12px 18px;
    border-top: 1px solid var(--line);
}
.hours-row:first-child { border-top: 0; }
.hours-day { font-weight: 650; }
.hours-slots { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.hours-closed { color: var(--ink-3); font-weight: 600; }
.slot { display: inline-flex; align-items: center; gap: 6px; }
.slot span { color: var(--ink-3); }
.slot .icon-btn { width: 40px; height: 40px; }
.slot .icon-btn svg { width: 18px; height: 18px; }

.field-time, .field input, .field select, .field textarea {
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--field-border);
    border-radius: var(--radius-s);
    background: var(--field-bg);
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}
.field-time { width: 112px; }
.link-btn {
    min-height: 40px;
    padding: 0 6px;
    border: 0;
    background: none;
    color: var(--rosa-strong);
    font-weight: 600;
    font-size: 15px;
}

.switch { position: relative; display: inline-block; width: 56px; height: 34px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    transition: background-color .2s;
}
.switch span::before {
    content: "";
    position: absolute;
    top: 3px; left: 3px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .2s;
}
.switch input:checked + span { background: var(--basil); border-color: var(--basil); }
.switch input:checked + span::before { transform: translateX(22px); }
.switch input:focus-visible + span { outline: 3px solid var(--rosa); outline-offset: 2px; }

.field-list .field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 24px;
    padding: 16px 20px;
    border-top: 1px solid var(--line);
}
.field-list .field:first-child { border-top: 0; }
.field label, .field .label { font-weight: 650; }
.field small { display: block; margin-top: 2px; color: var(--ink-2); font-size: 14px; font-weight: 400; }
.field-list .field select { min-width: 170px; }
.field input[type="number"] { width: 110px; }
.field.is-stacked { grid-template-columns: 1fr; }
.field textarea { width: 100%; min-height: 84px; padding: 10px 12px; resize: vertical; line-height: 1.4; }

/* Zwei Zeilen: Filiale, Von, Bis – darunter Grund und Button. So hat jedes Feld genug Platz. */
.vacation-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 12px;
    padding: 18px 20px;
}
.vacation-form .field-reason { grid-column: 1 / 3; }
.vacation-form .field { display: grid; gap: 6px; }
.vacation-form label { font-size: 14px; color: var(--ink-2); }
.vacation-form input, .vacation-form select { width: 100%; min-width: 0; }

.vacation-row {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    align-items: center;
    gap: 8px 18px;
    padding: 12px 12px 12px 20px;
    border-top: 1px solid var(--line);
}
.vacation-row:first-child { border-top: 0; }
.vacation-row.is-past { opacity: .55; }
.vacation-dates { font-weight: 650; font-variant-numeric: tabular-nums; }
.vacation-reason { color: var(--ink-2); }
.panel-empty { padding: 22px 20px; color: var(--ink-2); }

.code-box {
    position: relative;
    margin: 0;
    padding: 18px 20px;
    border-radius: var(--radius-m);
    background: var(--ink);
    color: var(--paper);
    font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: pre;
    overflow-x: auto;
}
.button-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

.preview-frame {
    width: 100%;
    height: 640px;
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    background: #fff;
}

.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- E-Mail-Einstellungen ---------- */

.field-list .field .text-input { width: min(320px, 100%); }
.field-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.field-inline .text-input { width: 110px; }
.notice {
    margin: 0 0 18px;
    padding: 12px 16px;
    border-radius: var(--radius-m);
    background: var(--rosa-soft);
    color: var(--ink);
    max-width: 70ch;
}
.notice b { color: var(--rosa-strong); }
.template-editor { display: grid; gap: 14px; padding: 18px 20px; }
.template-editor .row { display: grid; gap: 6px; }
.template-editor .text-area { min-height: 200px; font-size: 16px; }
.ph-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ph-chip {
    min-height: 34px;
    padding: 0 10px;
    border: 1px dashed var(--field-border);
    border-radius: 999px;
    background: var(--field-bg);
    color: var(--rosa-strong);
    font-size: 14px;
    font-weight: 600;
}
.template-when { margin: 0; color: var(--ink-2); font-size: 15px; }
.preview-subject { margin: 0 0 8px; font-size: 15px; color: var(--ink-2); }
.preview-subject b { color: var(--ink); }
.settings-preview { height: 620px; }
.test-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 16px 20px; }
.test-row .text-input { flex: 1; min-width: 220px; }


/* ---------- Kopf von Unterseiten (Newsletter, Admin): Titel, Text und Buttons auf Glas ---------- */

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    margin: 6px 0 16px;
    padding: 18px 22px;
    border-radius: var(--radius-l);
}
.page-head h1 { margin: 0; font: 650 clamp(28px, 3.4vw, 38px)/1.1 var(--font-display); letter-spacing: -.015em; }
.page-head .lead, .page-head .admin-lead { margin: 6px 0 0; color: var(--ink-2); max-width: 62ch; }
.page-head .button-row { margin: 0; }

/* ---------- Dashboard ---------- */

:root { --heat: var(--rosa-strong); }

/* Kopf: Filial-Reiter und Zeitraum oben, der Zeitraum als große Überschrift, darunter die Leiste */
.dash-hero {
    display: grid;
    gap: 14px;
    margin: 6px 0 16px;
    padding: 16px 20px 12px;
    border-radius: var(--radius-l);
}
.dash-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.dash-title-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; padding: 0 4px; }
.dash-title h1 { margin: 0; font: 650 clamp(40px, 6vw, 66px)/.98 var(--font-display); letter-spacing: -.035em; }
.dash-sub { margin: 10px 0 0; color: var(--ink-2); font-size: 16px; max-width: 62ch; }
.dash-step { display: flex; align-items: center; gap: 4px; }
.dash-step .icon-btn:disabled { opacity: .35; }
.dash-step .chip-btn:disabled { opacity: .5; }

/* Filial-Reiter: aktive Filiale in ihrer Farbe, „Beide“ dunkel */
.branch-tabs { display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: var(--track); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.branch-tabs::-webkit-scrollbar { display: none; }
.branch-tabs button {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 8px 0 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-2);
    font-weight: 650;
    touch-action: manipulation;
    transition: background-color .2s, color .2s, box-shadow .2s;
}
@media (hover: hover) { .branch-tabs button:hover { color: var(--ink); background: var(--glass-soft); } }
.bt-name { white-space: nowrap; }
.bt-dots { display: inline-flex; }
.bt-dots i { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
.bt-dots i + i { margin-left: -3px; }
.bt-count { min-width: 30px; height: 26px; padding: 0 9px; border-radius: 999px; background: var(--surface-2); font: 650 14px/26px var(--font-ui); text-align: center; font-variant-numeric: tabular-nums; }
.bt-count:empty { display: none; }
.branch-tabs button[aria-selected="true"] { color: #fff; box-shadow: 0 6px 18px rgba(46, 36, 39, .22); }
.branch-tabs button[aria-selected="true"]:nth-child(1) { background: var(--ink); color: var(--surface); }
.branch-tabs button[aria-selected="true"]:nth-child(2) { background: var(--series-0); background: color-mix(in oklab, var(--series-0) 78%, #000); }
.branch-tabs button[aria-selected="true"]:nth-child(3) { background: var(--series-1); background: color-mix(in oklab, var(--series-1) 78%, #000); }
.branch-tabs button[aria-selected="true"] .bt-count { background: rgba(255, 255, 255, .2); }
.branch-tabs button[aria-selected="true"] .bt-dots i { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }

.period-strip {
    grid-column: 1 / -1;
    display: flex;
    gap: 4px;
    margin: 4px -10px 0;
    padding: 6px 10px 4px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.period-strip::-webkit-scrollbar { display: none; }
.strip-item {
    flex: 1 0 60px;
    max-width: 92px;
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 8px 4px 6px;
    border: 0;
    border-radius: var(--radius-m);
    background: transparent;
    color: var(--ink-2);
    scroll-snap-align: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .strip-item:hover { background: var(--glass-soft); } }
.strip-bar { display: flex; align-items: flex-end; width: 24px; height: 48px; border-radius: 7px; background: var(--track); overflow: hidden; }
.strip-bar i { display: block; width: 100%; border-radius: 7px 7px 2px 2px; background: var(--ink-3); opacity: .6; }
.strip-item.is-future .strip-bar i { opacity: .28; }
.strip-label { margin-top: 3px; font-size: 14px; font-weight: 650; white-space: nowrap; }
.strip-sub { font-size: 11.5px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.strip-item.is-now .strip-label { color: var(--rosa-strong); }
.strip-item[aria-current="true"] { background: var(--rosa-strong); color: var(--on-primary); box-shadow: 0 6px 16px rgba(169, 84, 94, .28); }
.strip-item[aria-current="true"] .strip-label, .strip-item[aria-current="true"] .strip-sub { color: inherit; }
.strip-item[aria-current="true"] .strip-bar { background: rgba(255, 255, 255, .22); }
.strip-item[aria-current="true"] .strip-bar i { background: var(--on-primary); opacity: 1; }

/* Kennzahlen */
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.kpi {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 16px 16px 14px;
    border-radius: var(--radius-l);
    color: inherit;
    text-decoration: none;
}
.kpi-link { -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .kpi-link:hover { box-shadow: var(--glass-shadow), 0 0 0 2px var(--rosa-soft); } }
.kpi-label { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.kpi-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.kpi-value { font: 650 clamp(30px, 3.2vw, 40px)/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.kpi-delta.is-up { background: var(--basil-soft); color: var(--basil); }
.kpi-delta.is-down { background: var(--pomodoro-soft); color: var(--pomodoro); }
.kpi-delta.is-flat { background: var(--surface-2); color: var(--ink-2); }
.kpi-split { display: flex; gap: 2px; height: 6px; margin-top: 4px; border-radius: 999px; background: var(--track); overflow: hidden; }
.kpi-split i { display: block; min-width: 2px; }
.kpi-split i.is-rest { background: var(--ink-3); opacity: .3; }
.kpi-split-legend { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12.5px; color: var(--ink-3); }
.kpi-split-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.kpi-split-legend i { width: 7px; height: 7px; border-radius: 50%; }
.kpi-split-legend b { color: var(--ink-2); font-weight: 650; font-variant-numeric: tabular-nums; }
.kpi-note { margin-top: auto; padding-top: 2px; font-size: 13px; color: var(--ink-3); }

body.is-loading .kpis, body.is-loading .section-tabs, body.is-loading .section-panel { opacity: .5; transition: opacity .2s .1s; }

/* Karten mit Umschaltern */
.card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; margin-bottom: 10px; }
.card-head .muted { margin: 3px 0 0; font-size: 14px; max-width: 62ch; }
.card-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.segmented-sm { padding: 3px; }
.segmented-sm button { min-height: 36px; padding: 0 14px; font-size: 14px; }

/* Hauptreiter: Karten mit Symbol und Live-Wert, der aktive zeigt mit einer Spitze auf den Bereich darunter */
.section-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.section-tabs button {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 1px;
    align-items: center;
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-l);
    background: var(--glass);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
    color: var(--ink);
    text-align: left;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s, box-shadow .2s;
}
.section-tabs button:active { transform: scale(.98); }
.section-tabs svg {
    grid-row: 1 / span 2;
    width: 40px;
    height: 40px;
    padding: 9px;
    border-radius: 12px;
    background: var(--track);
    color: var(--ink-2);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.st-name { font-weight: 650; font-size: 16px; line-height: 1.2; }
.st-teaser { font-size: 12.5px; color: var(--ink-3); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.section-tabs button[aria-selected="true"] { background: var(--glass-strong); box-shadow: var(--glass-shadow), 0 0 0 2px var(--rosa-strong); }
.section-tabs button[aria-selected="true"] svg { background: var(--rosa-strong); color: var(--on-primary); }
.section-tabs button[aria-selected="true"] .st-teaser { color: var(--ink-2); }
.section-tabs button[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -9px;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    border-radius: 3px;
    background: var(--rosa-strong);
    transform: rotate(45deg);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* Bereich mit Unterreitern */
.section-panel { padding: 4px 22px 22px; }
.section-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 0 -22px 16px; padding: 0 22px; border-bottom: 1px solid var(--line); }
.sub-tabs { display: flex; gap: 22px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.sub-tabs::-webkit-scrollbar { display: none; }
.sub-tabs button {
    flex: none;
    min-height: 50px;
    padding: 0 2px;
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    background: none;
    color: var(--ink-3);
    font-weight: 650;
    font-size: 15px;
    touch-action: manipulation;
}
@media (hover: hover) { .sub-tabs button:hover { color: var(--ink-2); } }
.sub-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--rosa-strong); }
.section-tools .segmented { margin: 6px 0; }
.section-head { margin-bottom: 14px; }
.section-head h2 { margin: 0; font: 650 26px/1.1 var(--font-display); letter-spacing: -.01em; }
.section-head .muted { margin: 5px 0 0; font-size: 15px; max-width: 72ch; }
.section-body.is-entering { animation: section-in .22s ease-out; }
@keyframes section-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .section-body.is-entering { animation: none; } }
.section-note { margin: 12px 0 0; color: var(--ink-2); font-size: 15px; }
.section-link { margin-top: 18px; }
.empty-note { margin: 10px 0 4px; color: var(--ink-2); }
.run-chart { margin-top: 22px; }

.lb-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; margin: 10px 0 4px; }
.lb-team { display: grid; gap: 4px; }
.lb-team.is-right { justify-items: end; text-align: right; }
.lb-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; font-size: 18px; }
.lb-name i { width: 12px; height: 12px; border-radius: 50%; }
.lb-points { font: 700 clamp(64px, 10vw, 108px)/.9 var(--font-display); letter-spacing: -.04em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lb-team.is-lead .lb-points { color: var(--ink); }
.lb-colon { font: 700 56px/1 var(--font-display); color: var(--ink-3); padding-bottom: 8px; }
.lb-verdict { margin: 6px 0 18px; text-align: center; font-weight: 650; font-size: 17px; }
.lb-cats { border-top: 1px solid var(--line); }
.lb-cat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 1.4fr) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 11px 4px;
    border-bottom: 1px solid var(--line);
}
.lb-label { display: grid; justify-items: center; gap: 7px; text-align: center; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.lb-bar { display: flex; gap: 2px; width: 100%; max-width: 240px; height: 5px; border-radius: 999px; background: var(--track); overflow: hidden; }
.lb-bar i { display: block; min-width: 2px; }
.lb-val { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; color: var(--ink-2); font-variant-numeric: tabular-nums; min-width: 0; }
.lb-val.is-right { justify-content: flex-end; }
.lb-val.is-win { color: var(--ink); font-weight: 750; }
.lb-crown { font-size: 11px; line-height: 1; color: var(--series-0); }
.lb-val.is-right .lb-crown { color: var(--series-1); }
.lb-cat.is-info .lb-val { font-size: 15px; }
.lb-run { margin-top: 24px; }
.lb-run h3 { margin: 0; font: 650 18px/1.2 var(--font-display); }
.lb-run .muted { margin: 4px 0 10px; font-size: 14px; }
.lb-run-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(42px, 1fr)); gap: 4px; }
.lb-run-cell { display: grid; place-items: center; height: 36px; border-radius: 9px; background: var(--track); color: #fff; font-size: 13px; font-weight: 750; }
.lb-run-cell:not([style]) { color: var(--ink-3); }

.top-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.top-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1.6fr) minmax(130px, 1fr) 96px;
    align-items: center;
    gap: 14px;
    padding: 12px 6px;
    border-bottom: 1px solid var(--line);
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.top-row:active { background: var(--rosa-soft); }
@media (hover: hover) { .top-row:hover { background: var(--glass-soft); } }
.top-rank { font: 650 26px/1 var(--font-display); color: var(--ink-3); text-align: center; font-variant-numeric: tabular-nums; }
.top-rank.is-podium { color: var(--rosa-strong); }
.top-who { display: grid; gap: 3px; min-width: 0; }
.top-name { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 17px; overflow-wrap: anywhere; }
.top-facts { font-size: 13.5px; color: var(--ink-3); }
.top-count { display: flex; align-items: center; gap: 10px; }
.top-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; }
.top-bar i { display: block; height: 100%; border-radius: 999px; }
.top-count b { min-width: 44px; text-align: right; font: 650 19px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.top-branch { display: grid; gap: 3px; font-size: 13px; color: var(--ink-2); }
.top-dot { display: inline-flex; align-items: center; gap: 6px; }
.top-dot i { width: 8px; height: 8px; border-radius: 50%; }
.top-more { display: flex; margin: 16px auto 0; }

.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 10px; max-width: 600px; margin: 6px auto 24px; }
.podium-step { display: grid; justify-items: center; gap: 4px; color: inherit; text-align: center; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.podium-name { font-weight: 650; font-size: 16px; line-height: 1.2; overflow-wrap: anywhere; }
.podium-count { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.podium-block {
    display: grid;
    place-items: start center;
    width: 100%;
    margin-top: 6px;
    padding-top: 12px;
    border-radius: 16px 16px 6px 6px;
    background: var(--surface-2);
    color: var(--ink-3);
    font: 700 30px/1 var(--font-display);
}
.podium-step.is-1 .podium-block { height: 112px; background: var(--rosa-strong); color: var(--on-primary); box-shadow: 0 10px 26px rgba(169, 84, 94, .28); }
.podium-step.is-2 .podium-block { height: 84px; }
.podium-step.is-3 .podium-block { height: 64px; }
.podium-step.is-1 .podium-name { font-size: 18px; }
@media (hover: hover) { .podium-step:hover .podium-name { color: var(--rosa-strong); } }

.big-duo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 4px; }
.big-duo .is-right { text-align: right; }
.big-num { display: block; font: 650 clamp(48px, 7vw, 76px)/.95 var(--font-display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.big-num.is-accent { color: var(--rosa-strong); }
.big-cap { display: block; margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.meter { display: flex; gap: 2px; height: 12px; margin-top: 16px; border-radius: 999px; background: var(--track); overflow: hidden; }
.meter i { display: block; min-width: 2px; }
.meter i.is-rest { background: var(--ink-3); opacity: .3; }
.compare-rows { display: grid; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.compare-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.compare-row .meter { height: 8px; margin: 0; }
.compare-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; }
.compare-name i { width: 10px; height: 10px; border-radius: 50%; }
.compare-val { display: flex; align-items: baseline; gap: 10px; font-variant-numeric: tabular-nums; }
.compare-val span { color: var(--ink-3); font-size: 14px; }

.chart-card { padding: 20px 22px 16px; margin-top: 16px; overflow-x: auto; }
.news-list { overflow-x: auto; }
.chart-card h2 { margin: 0; font: 600 20px/1.2 var(--font-display); }
.chart-card > .muted { margin: 2px 0 12px; font-size: 14px; }
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.chart-grid .chart-card { margin-top: 16px; }

.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 6px; font-size: 14px; color: var(--ink-2); }
.chart-key { display: inline-flex; align-items: center; gap: 8px; }
.chart-key i { width: 14px; height: 3px; border-radius: 2px; }
.chart-plot { position: relative; touch-action: pan-y; }
/* Die allgemeine Icon-Regel (Kontur) gilt nicht für Diagramme */
.chart svg { display: block; width: 100%; height: auto; overflow: visible; stroke: none; fill: none; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .tick { fill: var(--ink-3); font: 500 12px var(--font-ui); font-variant-numeric: tabular-nums; }
.chart .end-label { fill: var(--ink-2); font: 600 13px var(--font-ui); }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { stroke: var(--surface); stroke-width: 2; }
.chart .crosshair { stroke: var(--ink-3); stroke-width: 1; }
.chart .col-hit.is-active { fill: var(--surface-2); }
.chart .area { stroke: none; }
.chart .future-band { fill: var(--track); }
.chart .band-label { fill: var(--ink-3); font: 600 12px var(--font-ui); }
.chart .today-line { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .compare-line { fill: none; stroke: var(--ink-3); stroke-width: 1.75; stroke-dasharray: 5 5; stroke-linecap: round; }
.chart .peak-dot { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.chart .peak-label { fill: var(--ink); font: 650 13px var(--font-ui); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.chart-key.is-compare i { width: 16px; height: 0; border-top: 2px dashed var(--ink-3); background: none; border-radius: 0; }
.chart .heat-cell { fill: var(--track); }
.chart .heat-cell.is-active { stroke: var(--ink); stroke-width: 2; }
.chart .heat-1, .chart .heat-2, .chart .heat-3, .chart .heat-4, .chart .heat-5, .chart .heat-6 { fill: var(--heat); }
.chart .heat-1 { fill-opacity: .14; } .chart .heat-2 { fill-opacity: .28; } .chart .heat-3 { fill-opacity: .44; }
.chart .heat-4 { fill-opacity: .6; } .chart .heat-5 { fill-opacity: .8; } .chart .heat-6 { fill-opacity: 1; }
.heat-legend { display: flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 12.5px; color: var(--ink-3); }
.heat-legend span:first-child { margin-right: 4px; }
.heat-legend span:last-child { margin-left: 4px; }
.heat-legend i { width: 18px; height: 10px; border-radius: 3px; background: var(--heat); }
.heat-legend .heat-1 { opacity: .14; } .heat-legend .heat-2 { opacity: .28; } .heat-legend .heat-3 { opacity: .44; }
.heat-legend .heat-4 { opacity: .6; } .heat-legend .heat-5 { opacity: .8; }
.table-scroll { overflow-x: auto; }
.chart-tip {
    position: absolute;
    z-index: 2;
    min-width: 150px;
    padding: 10px 12px;
    border-radius: var(--radius-s);
    font-size: 14px;
    pointer-events: none;
}
.chart-tip b { display: block; margin-bottom: 4px; }
.chart-tip .row { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.chart-tip .row i { width: 10px; height: 10px; border-radius: 50%; }
.chart-tip .row em { margin-left: auto; padding-left: 12px; font-style: normal; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.chart-tip .row.is-sum { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 600; }
.chart-tip .row.is-compare i { width: 10px; height: 0; border-top: 2px dashed var(--ink-3); border-radius: 0; background: none; }
.chart-tip .row.is-note { color: var(--ink-3); font-size: 13px; }
.chart-details { margin-top: 8px; font-size: 14px; }
.chart-details summary { cursor: pointer; color: var(--rosa-strong); font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.chart-table, .data-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.chart-table th, .chart-table td, .data-table th, .data-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.chart-table td, .data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table thead th { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.cell-strong { display: block; font-weight: 650; }
.cell-sub { display: block; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }

/* ---------- Admin (admin/): Einstellungen als Seite statt als Fenster ---------- */

.admin-lead { margin: 6px 0 0; color: var(--ink-2); max-width: 70ch; }
.admin-page .sheet-backdrop {
    position: static;
    display: block;
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    animation: none;
}
.admin-page .sheet { height: auto; min-height: min(760px, calc(100vh - 220px)); width: 100%; animation: none; }
.admin-page .sheet-content { overflow: visible; }

/* ---------- Newsletter ---------- */

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.news-actions { flex-wrap: wrap; gap: 10px; }
.news-campaigns { padding: 18px 20px 6px; margin-bottom: 16px; }
.news-h2 { margin: 0 0 6px; font: 600 20px/1.2 var(--font-display); }
.campaign-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.campaign-open { flex: 1; min-width: 0; display: grid; gap: 2px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.campaign-open:hover .cell-strong, .campaign-open:focus-visible .cell-strong { text-decoration: underline; text-underline-offset: 3px; }
.campaign-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.campaign-more { margin: 4px 0 10px; }
.nl-image { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.nl-image-thumb { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-m); border: 1px solid var(--line); }
.nl-image-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.nl-image-pick { position: relative; cursor: pointer; }
.nl-image-pick:focus-within { outline: 2px solid var(--rosa-strong); outline-offset: 2px; }
.nl-image-status { font-size: 14px; }
.cv-side { display: grid; gap: 16px; }
.cv-facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; padding: 18px 20px; }
.cv-facts dt { color: var(--ink-2); }
.cv-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.cv-recipients { padding: 16px 20px 8px; }
.cv-recipients-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cv-recipients-head .text-input { max-width: 200px; }
.cv-recipients-head .news-h2 { margin: 0; font-size: 18px; }
.cv-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.cv-list li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 15px; }
.cv-list li:first-child { border-top: 0; }
.cv-list .cell-sub { text-align: right; }
.cv-list li.is-pending { opacity: .5; }
.cv-note { margin: 8px 0 0; font-size: 14px; }
.campaign-row:first-of-type { border-top: 0; }
.news-search { padding: 16px 20px 8px; }
.news-search .text-input { max-width: 420px; }
.news-list .data-table { margin-bottom: 6px; }
.news-list .data-table th:first-child, .news-list .data-table td:first-child { padding-left: 20px; }
.news-list .data-table th:last-child, .news-list .data-table td:last-child { padding-right: 20px; }
.compose-body { flex: 1; }
.compose-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.compose-body .test-row { margin-top: 16px; }
.send-box { display: grid; gap: 10px; margin-top: 16px; padding: 18px 20px; }
.send-text { display: grid; gap: 2px; }
.send-text b { font: 600 20px/1.2 var(--font-display); }
.send-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.progress { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: var(--rosa-strong); border-radius: 999px; transition: width .3s; }
.send-status { margin: 0; font-weight: 600; }

/* ---------- Was ist neu (Tour) ---------- */

.tour { position: fixed; inset: 0; z-index: 90; }
.tour-spot {
    position: fixed;
    border-radius: 18px;
    box-shadow: 0 0 0 9999px rgba(30, 20, 22, .58);
    transition: top .35s cubic-bezier(.2, .8, .2, 1), left .35s cubic-bezier(.2, .8, .2, 1), width .35s cubic-bezier(.2, .8, .2, 1), height .35s cubic-bezier(.2, .8, .2, 1);
    pointer-events: none;
}
.tour-spot.is-center { top: 50% !important; left: 50% !important; width: 0 !important; height: 0 !important; }
.tour-card {
    position: fixed;
    width: min(410px, calc(100% - 24px));
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    padding: 0 22px 18px;
    border-radius: var(--radius-l);
    color: var(--ink);
    transition: top .35s cubic-bezier(.2, .8, .2, 1), left .35s cubic-bezier(.2, .8, .2, 1), opacity .2s;
}
.tour-card.is-busy { opacity: .55; pointer-events: none; }
.tour-card.is-center { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(470px, calc(100% - 24px)); }
.tour-card img { width: 88px; height: 88px; margin: 0 auto 4px; display: block; }
/* Fortschritt über den ganzen Rundgang */
.tour-progress { height: 4px; margin: 0 -22px 16px; background: var(--track); }
.tour-progress span { display: block; height: 100%; background: var(--rosa); border-radius: 0 4px 4px 0; transition: width .35s cubic-bezier(.2, .8, .2, 1); }
.tour-chapter { margin: 0 0 4px; font-size: 14px; font-weight: 650; color: var(--rosa-strong); }
.tour-card h2 { margin: 0 0 8px; font: 600 24px/1.2 var(--font-display); }
.tour-text { margin: 0 0 12px; color: var(--ink-2); }
.tour-points { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 6px; }
.tour-points li { position: relative; padding-left: 20px; color: var(--ink); font-size: 15px; }
.tour-points li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--rosa); }
.tour-card.is-center .tour-chapter, .tour-card.is-center h2, .tour-card.is-center .tour-text { text-align: center; }
.tour-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.tour-actions .link-btn { padding: 0 4px; }
.tour-spacer { flex: 1; }
/* Schmale Karte neben großen Dialogen: Zurück/Weiter teilen sich die Zeile, Beenden darunter */
.tour-card.is-narrow .tour-actions { flex-wrap: wrap; }
.tour-card.is-narrow .tour-spacer { display: none; }
.tour-card.is-narrow .tour-actions .btn { flex: 1; min-width: 0; }
.tour-card.is-narrow .tour-actions .link-btn { order: 1; flex-basis: 100%; min-height: 36px; }

/* ---------- Schmale Bildschirme (iPad hochkant geteilt, Handy) ---------- */

@media (max-width: 900px) {
    /* iPad hochkant: Bereiche ohne Symbole, „+ Reservierung“ nur als Symbol, Drucken ausblenden */
    .topbar { gap: 10px; }
    .topnav a svg { display: none; }
    .topnav a { padding: 0 14px; }
    .btn-new { width: 44px; padding: 0; margin-right: 2px; }
    .btn-new span { display: none; }
    .search-btn { min-width: 0; width: 44px; padding: 0; justify-content: center; }
    .search-btn span { display: none; }
    .topbar-actions #printBtn { display: none; }
    .res { grid-template-columns: 92px minmax(0, 1fr) 64px auto; }
    /* Nur offene Anfragen bekommen ihre Buttons in einer zweiten Zeile */
    .res.is-open .res-actions { grid-column: 2 / -1; justify-content: flex-start; }
    .res-time .t { font-size: 30px; }
    .sheet-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .sheet-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 12px; }
    .sheet-nav button { white-space: nowrap; }
    .vacation-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .section-tabs { display: flex; overflow-x: auto; scrollbar-width: none; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 12px; scroll-padding: 0 var(--gutter); }
    .section-tabs::-webkit-scrollbar { display: none; }
    .section-tabs button { flex: 0 0 190px; }
    .top-row { grid-template-columns: 38px minmax(0, 1fr) 140px; }
    .top-branch { display: none; }
    .chart-grid { grid-template-columns: 1fr; }
    .compose-grid { grid-template-columns: 1fr; }
    .news-table th:nth-child(4), .news-table td:nth-child(4), .news-table th:nth-child(5), .news-table td:nth-child(5) { display: none; }
}

@media (max-width: 640px) {
    .topbar { gap: 6px; margin: calc(8px + env(safe-area-inset-top)) 10px 0; padding: 6px; top: calc(8px + env(safe-area-inset-top)); }
    .brand { display: none; }
    /* Handy: Bereiche nur als Symbole */
    .topnav a { padding: 0 12px; min-height: 40px; }
    .topnav a svg { display: block; }
    .topnav a span { display: none; }
    .segmented { min-width: 0; }
    .segmented button { min-height: 40px; padding: 0 10px; gap: 5px; font-size: 15px; }
    .badge { min-width: 20px; height: 20px; line-height: 20px; padding: 0 6px; font-size: 12px; }
    .topbar-actions #printBtn, .topbar-actions #refreshBtn { display: none; }
    .topbar-actions .icon-btn { width: 40px; height: 40px; }
    .btn-new { width: 40px; min-height: 40px; padding: 0; margin-right: 0; }
    .search-btn { width: 40px; min-height: 40px; }
    .search-backdrop { padding: calc(8px + env(safe-area-inset-top)) 8px 8px; }
    .search-panel { margin-top: 0; }
    .search-field { padding: 8px 8px 8px 16px; gap: 10px; }
    .search-field input { font-size: 18px; }
    .search-hit { grid-template-columns: 86px minmax(0, 1fr); padding: 10px 8px; gap: 4px 12px; }
    .search-meta { grid-column: 2; justify-content: flex-start; }
    .search-when .t { font-size: 20px; }
    .chip-btn { white-space: nowrap; padding: 0 12px; }
    .daypick { padding: 0 12px; }
    .btn-new span { display: none; }
    .form-grid { grid-template-columns: 1fr; }
    .dialog-form { max-height: 94vh; max-height: 94dvh; }
    .dialog-form .dialog-actions { flex-wrap: nowrap; }
    .dialog-form .dialog-actions .btn { padding: 0 16px; }
    .dialog-form .dialog-actions .btn-primary { flex: 1; }
    .res-meta { font-size: 14px; }
    .detail-contacts { grid-template-columns: 1fr; }
    .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
    .kpi { padding: 14px 14px 12px; }
    .dash-hero { padding: 12px 12px 10px; }
    .branch-tabs { width: 100%; }
    .branch-tabs button { flex: 1 1 auto; justify-content: center; padding: 0 10px; }
    .bt-count, .bt-long { display: none; }
    .dash-bar .segmented { width: 100%; }
    .dash-bar .segmented button { flex: 1; justify-content: center; }
    .section-tabs button { flex-basis: 170px; }
    .section-panel { padding: 2px 14px 18px; }
    .section-tools { margin: 0 -14px 14px; padding: 0 14px; }
    .compare-row { grid-template-columns: 90px minmax(0, 1fr) auto; gap: 10px; }
    .podium-name { font-size: 14px; }
    .podium-step.is-1 .podium-name { font-size: 15px; }
    .lb-cat { grid-template-columns: minmax(0, 1fr) minmax(96px, 1.1fr) minmax(0, 1fr); gap: 8px; }
    .lb-val { font-size: 15px; }
    .lb-label { font-size: 13px; }
    .top-row { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; }
    .top-bar { display: none; }
    .top-rank { font-size: 20px; }
    .row-2 { grid-template-columns: 1fr; }
    .guests-table th:nth-child(4), .guests-table td:nth-child(4) { display: none; }
    .news-table th:nth-child(2), .news-table td:nth-child(2), .news-table th:nth-child(3), .news-table td:nth-child(3) { display: none; }
    .campaign-row { flex-wrap: wrap; gap: 8px 12px; }
    .campaign-open { flex-basis: 100%; }
    .campaign-actions { width: 100%; justify-content: space-between; }
    .page-head { padding: 16px; }
    .history-list li { grid-template-columns: 1fr auto; }
    .history-list .h-meta { display: none; }
    .res { grid-template-columns: 62px minmax(0, 1fr) 40px auto; padding: 12px 12px 12px 14px; gap: 6px 10px; }
    .res-actions .icon-btn { width: 40px; height: 40px; }
    .res-name { font-size: 17px; }
    .res.is-open .res-actions { grid-column: 1 / -1; }
    .res-actions .btn { flex: 1; min-width: 0; }
    .res-time .t { font-size: 22px; }
    .res-guests .n { font-size: 22px; }
    .res-guests .l { font-size: 12px; }
    .dialog-backdrop { place-items: end center; padding: 0; }
    .dialog { border-radius: var(--radius-l) var(--radius-l) 0 0; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
    .sheet-backdrop { padding: 0; }
    .sheet { height: 100%; border-radius: 0; }
    .sheet-head { padding-left: 18px; flex-wrap: wrap; }
    .sheet-content { padding: 20px 16px 40px; }
    .hours-row { grid-template-columns: 1fr auto; }
    .hours-slots { grid-column: 1 / -1; }
    .field-list .field { grid-template-columns: 1fr; }
    .vacation-form { grid-template-columns: 1fr 1fr; }
    .vacation-form .field-branch, .vacation-form .field-reason, .vacation-form .btn { grid-column: 1 / -1; }
    .vacation-row { grid-template-columns: 1fr auto; }
    .vacation-reason { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Drucken ---------- */

@media print {
    body { background: #fff; color: #000; font-size: 12pt; }
    .topbar, .toolbar, .res-actions, .sync, .toast, .dialog-backdrop, .sheet-backdrop, .tour { display: none !important; }
    body::before { display: none; }
    .board { padding: 0; max-width: none; }
    .dayhead { margin: 0 0 8pt; }
    .dayhead, .group-title { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
    .sheet-list { border: 1px solid #000; border-radius: 0; }
    .res { grid-template-columns: 70pt 1fr 50pt; padding: 6pt 8pt; border-top: 1px solid #999; break-inside: avoid; }
    .res-time .t { font-size: 18pt; color: #000 !important; }
    .res.is-past { opacity: 1; }
    .res-meta .phone { color: #000; }
}