@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:swap;src:url('/fonts/source-serif-4.woff2') format('woff2')}@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:200 900;font-display:swap;src:url('/fonts/source-serif-4-italic.woff2') format('woff2')}@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/inter.woff2') format('woff2')}@font-face{font-family:'Inter';font-style:italic;font-weight:100 900;font-display:swap;src:url('/fonts/inter-italic.woff2') format('woff2')}@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/fraunces.woff2') format('woff2')}@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;src:url('/fonts/fraunces-italic.woff2') format('woff2')}
*{box-sizing:border-box}
:root{
  color-scheme:light;
  /* Marken-Fundament — dieselbe warme Papier-Haut wie die öffentliche Seite
     (hd-foundation / theme.css: cream #F4EFE6, accent #AD5337, border #E1D8C6),
     nur dichter gesetzt fürs Arbeiten. Kein „Beinah-Terracotta" mehr. */
  --bg:#f4efe6;--surface:#ffffff;--surface-soft:#faf6ef;
  --ink:#1f1b16;--muted:#7a6f62;--faint:#a99b88;
  --line:#e1d8c6;--line-strong:#d3c7b2;--accent:#ad5337;--accent-ink:#8f4026;
  --accent-soft:#f4e7e1;
  --ok:#1f7a4d;--warn:#a8641c;--breach:#b3362b;
  --note-bg:#fbf3df;--note-line:#ecd9a8;
  --tint-blue-bg:#e8f0fb;--tint-blue-fg:#23538f;
  --tint-amber-bg:#f6ead9;--tint-amber-fg:#8a531b;
  --tint-violet-bg:#f3ecfb;--tint-violet-fg:#6a4a9e;
  --tint-green-bg:#e6f4ec;--tint-green-fg:#1f7a4d;
  --tint-gray-bg:#efe9df;--tint-gray-fg:#7a6f62;
  --tint-red-bg:#fbe7e5;--tint-red-fg:#b3362b;
  /* Zwei Stimmen: Inter arbeitet, Source Serif 4 trägt (beide selbst gehostet,
     same-origin über /fonts/*.woff2 — dieselben Dateien wie die Seite). */
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-display:'Source Serif 4',Georgia,'Times New Roman',serif;
  --measure:68ch;
  --radius:9px;--shadow:0 1px 2px rgba(31,27,22,.05),0 6px 20px rgba(31,27,22,.05);
}
/* EINE Welt — hell, wie die öffentliche Seite (Lutz 14.07.: „wie website
   frontend"). Kein dunkles Thema, keine System-Ableitung: color-scheme:light
   an der Wurzel hält das Cockpit auch bei Gerät-Dunkelmodus warm und hell. */
html{font-size:13.5px}
body{margin:0;font-family:var(--font-body);background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer}

/* ── Marken-Stimme ───────────────────────────────────────────────────────────
   Source Serif 4 trägt, was Präsenz verdient — Raum- und Akten-Titel, große
   Zahlen, leere Zustände, der Empfang. Alles Arbeitende bleibt Inter: dicht,
   ruhig, schnell. So klingt das Werkzeug wie die Seite, ohne ihr Tempo. Räume
   setzen nur ihre eigene Größe; die Schrift kommt von hier. */
.detail-head h1,.st-kopf h1,.login-card h1,.drawer-head h2,#kbd-help h2,#kbd-help .panel h2{
  font-family:var(--font-display);font-weight:560;letter-spacing:-.014em;color:var(--ink)}
.kpi-v,.stat-row .stat .v{font-family:var(--font-display);letter-spacing:-.012em}
.empty-t{font-family:var(--font-display);font-weight:560;font-size:1.06rem}
.side-name{font-family:var(--font-display)}
/* Lesesatz: Fließtext bricht auf Buchbreite um (wie hd-p der Seite) — Zeilen
   laufen nicht mehr über die ganze Spalte. Tabellen/Formulare bleiben breit. */
.msg .body,.msg.system .body,.msg.automation .body,.hannes-card .hc-body{max-width:var(--measure)}
.msg .body{line-height:1.62}
input,select,textarea{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:6px;padding:.42rem .6rem}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:0;border-color:var(--accent)}
.btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--accent);color:#fff;border:0;border-radius:7px;padding:.46rem .9rem;font-weight:600;box-shadow:0 1px 2px rgba(31,27,22,.12);transition:transform .14s ease,background .2s ease,box-shadow .2s ease}
.btn:hover{background:var(--accent-ink);text-decoration:none}
.btn:not(.small):hover{transform:translateY(-1px);box-shadow:0 5px 16px color-mix(in srgb,var(--accent) 28%,transparent)}
.btn:active{transform:none}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong);box-shadow:none}
.btn.ghost:hover{background:var(--surface);border-color:var(--accent)}
.btn.small{padding:.28rem .6rem;font-size:.92em;box-shadow:none}
.btn.danger{background:var(--breach)}
/* ghost+danger = DEZENTE Gefahr (rote Kontur, kein gefüllter Alarm-Knopf) —
   Löschen neben Bearbeiten soll warnen, nicht schreien. */
.btn.ghost.danger{background:transparent;color:var(--breach);border-color:color-mix(in srgb,var(--breach) 45%,transparent)}
.btn.ghost.danger:hover{background:color-mix(in srgb,var(--breach) 8%,transparent);border-color:var(--breach)}
/* Datei-Feld: das nackte „Choose Files" bekommt einen Marken-Knopf. */
input[type=file]{padding:.32rem .4rem;font-size:.94em;background:var(--surface-soft);color:var(--muted)}
/* S7a (iPad): Eingaben nie unter 16px — verhindert Safaris Auto-Zoom beim Fokus. */
@media (pointer:coarse){input,select,textarea{font-size:16px}}
input[type=file]::file-selector-button{font:inherit;font-weight:600;cursor:pointer;margin-right:.7rem;background:var(--accent);color:#fff;border:0;border-radius:6px;padding:.34rem .8rem}
input[type=file]::file-selector-button:hover{background:var(--accent-ink)}
kbd{background:var(--surface);border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:4px;padding:0 .35em;font-size:.85em;font-family:inherit}

/* Grundgerüst: Sidebar links, Frame (Topbar + Inhalt) rechts */
body{display:flex;min-height:100vh;min-height:100dvh}
.frame{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.ic{width:18px;height:18px;flex:none}
.ic-s{width:13px;height:13px}
.ic-xl{width:34px;height:34px}
.ibtn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:7px;background:none;border:0;color:var(--muted);padding:0}
.ibtn:hover{background:var(--bg);color:var(--ink);text-decoration:none}

/* Topbar */
.topbar{display:flex;align-items:center;gap:.9rem;height:54px;padding:0 1.1rem;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.topbar form.search{flex:1;max-width:30rem}
.topbar form.search input{width:100%;background:var(--bg)}
.topbar .spacer{flex:1}
.topbar .next-ticket{white-space:nowrap}
.burger{display:none;flex-direction:column;justify-content:center;gap:4px;background:none;border:0;padding:.45rem .3rem;margin-left:-.3rem}
.burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px}

/* Sidebar — Räume nach Insel-Muster (Sektionen, Icons, Badges, Collapse, Fuß) */
/* iPad-Safari: 100dvh statt 100vh — die dynamische Leiste frisst sonst den Fuß. */
.side{width:232px;flex:none;display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--line);position:sticky;top:0;height:100vh;height:100dvh;z-index:45}
.side-head{display:flex;align-items:center;gap:.6rem;padding:.75rem .8rem;border-bottom:1px solid var(--line);min-height:54px}
.side-brand{display:flex;align-items:center;gap:.6rem;min-width:0;color:var(--ink);flex:1}
.side-brand:hover{text-decoration:none}
.side-logo{max-height:30px;max-width:140px;object-fit:contain}
.side-brand.has-logo .side-mark{display:none}
body.side-collapsed .side-brand.has-logo .side-mark{display:inline-flex}
.side-mark{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;border-radius:8px;background:var(--accent);color:#fff;font-weight:700;font-size:.88em;letter-spacing:.02em}
.side-name{font-weight:700;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-collapse{margin-left:auto}
.side-collapse .ic{transition:transform .18s ease}
.side-nav{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:.6rem .55rem 1rem}
.side-sect{font-size:.74em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:1rem .5rem .25rem;white-space:nowrap}
.side-nav a{display:flex;align-items:center;gap:.6rem;padding:.42rem .55rem;border-radius:7px;color:var(--muted);font-weight:600;white-space:nowrap;margin:.05rem 0}
.side-nav a:hover{background:var(--bg);color:var(--ink);text-decoration:none}
.side-nav a[aria-current]{color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 10%,transparent);box-shadow:inset 2.5px 0 0 var(--accent)}
.side-nav a .lbl{flex:1;overflow:hidden;text-overflow:ellipsis}
.nbadge{background:var(--accent);color:#fff;border-radius:99px;font-size:.76em;font-weight:700;padding:.05rem .45rem;font-variant-numeric:tabular-nums}
.side-foot{border-top:1px solid var(--line);padding:.6rem .7rem;display:flex;align-items:center;gap:.55rem}
.side-avatar{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;border-radius:50%;background:color-mix(in srgb,var(--accent) 16%,var(--bg));color:var(--accent-ink);font-weight:700;font-size:.8em}
.side-user{min-width:0;flex:1;display:grid;line-height:1.25}
.side-user .u-name{font-weight:600;font-size:.92em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-user .u-mail{color:var(--faint);font-size:.8em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Eingeklappt: nur Icons, Tooltips über title-Attribut */
body.side-collapsed .side{width:60px}
body.side-collapsed .side-name,body.side-collapsed .side-user,body.side-collapsed .side-sect,body.side-collapsed .side-nav a .lbl{display:none}
body.side-collapsed .side-head{justify-content:center;padding:.75rem .4rem}
body.side-collapsed .side-brand{flex:none}
body.side-collapsed .side-brand .side-logo{display:none}
body.side-collapsed .side-collapse{margin:0}
body.side-collapsed .side-collapse .ic{transform:rotate(180deg)}
body.side-collapsed .side-nav{padding:.6rem .4rem 1rem}
body.side-collapsed .side-nav a{justify-content:center;padding:.5rem .3rem;position:relative}
body.side-collapsed .nbadge{position:absolute;top:2px;right:2px;padding:.02rem .3rem;font-size:.68em}
body.side-collapsed .side-foot{flex-direction:column;padding:.6rem .3rem}
/* Sheet-Schleier (mobil) */
.sheet-veil{display:none}

/* Bottom-Bar (mobil): die Kernräume, immer erreichbar */
.bottombar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:65;background:var(--surface);border-top:1px solid var(--line);padding:.3rem .4rem calc(.3rem + env(safe-area-inset-bottom))}
.bottombar a,.bottombar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:.25rem 0;border:0;background:none;color:var(--muted);font-size:.68em;font-weight:600;border-radius:8px}
.bottombar a[aria-current]{color:var(--accent-ink)}
.bottombar .ic{width:21px;height:21px}
.bottombar .bb-badge{position:absolute;transform:translate(11px,-3px);background:var(--accent);color:#fff;border-radius:99px;font-size:.6rem;font-weight:700;padding:0 .3rem;font-variant-numeric:tabular-nums}
.bottombar a,.bottombar button{position:relative}

/* Layout */
.layout{display:flex;min-height:calc(100vh - 54px);min-height:calc(100dvh - 54px)}
.sidebar{width:230px;flex:none;padding:1rem .8rem;border-right:1px solid var(--line)}
.main{flex:1;min-width:0;padding:1.1rem 1.4rem 3rem}
.side-title{font-size:.78em;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);margin:.9rem .45rem .3rem}
.views{list-style:none;margin:0;padding:0}
.views a{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.34rem .55rem;border-radius:6px;color:var(--ink)}
.views a:hover{background:var(--surface);text-decoration:none}
.views a.active{background:var(--surface);box-shadow:var(--shadow);font-weight:600}
.views .count{color:var(--muted);font-size:.88em;font-variant-numeric:tabular-nums}

/* Posteingang */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 .8rem}
.toolbar select{padding:.3rem .5rem}
.list-meta{color:var(--muted);font-size:.92em;margin-left:auto;font-variant-numeric:tabular-nums}
.tickets{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.tickets th{font-size:.78em;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:600;text-align:left;padding:.5rem .7rem;border-bottom:1px solid var(--line)}
.tickets td{padding:.52rem .7rem;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
.tickets tr:last-child td{border-bottom:0}
.tickets tbody tr{cursor:pointer}
.tickets tbody tr:hover{background:color-mix(in srgb,var(--accent) 4%,var(--surface))}
.tickets tbody tr.kbd-focus{background:color-mix(in srgb,var(--accent) 9%,var(--surface));box-shadow:inset 2.5px 0 0 var(--accent)}
.tickets .subj{white-space:normal;min-width:16rem}
.tickets .subj a{color:var(--ink);font-weight:600}
/* Links in Listen tragen Tinte statt Akzent-Rost — sonst wirken ganze Spalten wie Warnungen. */
.tickets td a,table.plain td a{color:var(--ink)}
/* Studio-Planer: Tageskopf über der Tages-Tabelle (Kalender-Anmutung). */
.tag-head{font-family:var(--font-display);font-weight:560;font-size:1.02rem;color:var(--ink);margin:1.4rem 0 .5rem}
.tag-head:first-of-type{margin-top:.4rem}
.tag-tab{margin-bottom:.2rem}
.tickets .ap-zeit{font-variant-numeric:tabular-nums;white-space:nowrap}
.tickets .ap-art{white-space:normal;min-width:11rem}
.tickets td a:hover,table.plain td a:hover{color:var(--accent-ink)}
.tickets .num{color:var(--faint);font-variant-numeric:tabular-nums}
.tickets .who-cell{max-width:13rem;overflow:hidden;text-overflow:ellipsis}
.tickets .mut{color:var(--muted);font-size:.93em}
.badge{display:inline-block;border-radius:99px;padding:.1rem .6rem;font-size:.85em;font-weight:600;white-space:nowrap;background:var(--tint-gray-bg);color:var(--tint-gray-fg)}
.badge.ok{background:var(--tint-green-bg);color:var(--tint-green-fg)}
.badge.warn{background:var(--tint-amber-bg);color:var(--tint-amber-fg)}
.st-open{background:var(--tint-blue-bg);color:var(--tint-blue-fg)}
.st-spam{background:var(--tint-red-bg,#f6e3e0);color:var(--tint-red-fg,#8c2f22)}
.st-in_progress{background:var(--tint-amber-bg);color:var(--tint-amber-fg)}
.st-waiting{background:var(--tint-violet-bg);color:var(--tint-violet-fg)}
.st-resolved{background:var(--tint-green-bg);color:var(--tint-green-fg)}
.st-closed{background:var(--tint-gray-bg);color:var(--tint-gray-fg)}
.pr-low{background:var(--tint-gray-bg);color:var(--tint-gray-fg)}
.pr-medium{background:var(--tint-blue-bg);color:var(--tint-blue-fg)}
.pr-high{background:var(--tint-amber-bg);color:var(--tint-amber-fg)}
.pr-urgent{background:var(--tint-red-bg);color:var(--tint-red-fg)}
.ap-confirmed{background:var(--tint-green-bg);color:var(--tint-green-fg)}
.ap-cancelled{background:var(--tint-red-bg);color:var(--tint-red-fg)}
.ap-completed{background:var(--tint-gray-bg);color:var(--tint-gray-fg)}
.ap-no_show{background:var(--tint-amber-bg);color:var(--tint-amber-fg)}
.sla-dot{display:inline-block;width:9px;height:9px;border-radius:50%}
.sla-ok{background:var(--ok)}
.sla-warn{background:var(--warn)}
.sla-breach{background:var(--breach);box-shadow:0 0 0 3px color-mix(in srgb,var(--breach) 22%,transparent)}
.sla-none{background:var(--line-strong)}
.bulkbar{display:none;align-items:center;gap:.5rem;background:var(--ink);color:#fff;border-radius:var(--radius);padding:.5rem .8rem;margin:0 0 .8rem;position:sticky;top:106px;z-index:20}
.bulkbar.visible{display:flex;flex-wrap:wrap}
.bulkbar select{background:#352e27;color:#fff;border-color:#4a423a}
.bulkbar .n{font-weight:700;font-variant-numeric:tabular-nums}
.pager{display:flex;gap:.6rem;align-items:center;margin-top:.9rem;color:var(--muted);font-size:.94em}

/* Detail */
.detail{display:flex;gap:1.3rem;align-items:flex-start}
.thread-col{flex:1;min-width:0}
.meta-col{width:300px;flex:none;display:flex;flex-direction:column;gap:.9rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:.85rem 1rem}
.card h3{margin:0 0 .55rem;font-size:.82em;text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}
.card .row{display:flex;justify-content:space-between;gap:.6rem;padding:.18rem 0;font-size:.97em}
.card .row .k{color:var(--muted)}
/* Eigene Felder (Modul #3, P5) — geteilte Render-Helfer (customFieldInputs/
   customFieldDisplay) im Helpdesk-Schale; gleiche Klassen wie in den
   CRM-/Projekt-Seiten, damit die Karte überall identisch sitzt. */
.ko-card{margin:.4rem 0 0;display:grid;gap:.1rem}
.ko-card h3{margin:.2rem 0 .35rem;font-size:.82em;text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}
/* Eigene-Felder-Sektionen (Modul #3, P7c): Überschrift im Editor (.cf-group-head)
   und in der Akte (.cf-section) — leicht abgesetzt, bündelt die Gruppe optisch. */
.cf-group{display:grid;gap:.1rem;margin:.35rem 0 0;padding-top:.35rem;border-top:1px solid var(--line)}
.cf-group-head,.cf-section{font-size:.78em;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:.3rem 0 .2rem}
.cf-section{border-top:1px dashed var(--line);padding-top:.35rem}
.ko-field{display:flex;justify-content:space-between;gap:.6rem;padding:.18rem 0;font-size:.97em}
.ko-field .k{color:var(--muted)}
.detail-head{margin:0 0 1rem}
.detail-head h1{font-size:1.5rem;margin:.1rem 0 .4rem;line-height:1.2}
.detail-head .sub{color:var(--muted);display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.crumb{color:var(--muted);font-size:.92em}
.msg{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin:0 0 .75rem;overflow:hidden}
.msg .head{display:flex;gap:.6rem;align-items:baseline;padding:.5rem .9rem;border-bottom:1px solid var(--line);font-size:.92em}
.msg .head .who{font-weight:600}
.msg .head .when{color:var(--faint);margin-left:auto;white-space:nowrap}
.msg .body{padding:.7rem .9rem;white-space:pre-wrap;overflow-wrap:break-word}
.msg.customer{border-left:3px solid var(--accent)}
.msg.agent{border-left:3px solid var(--ok)}
.msg.note{background:var(--note-bg);border-color:var(--note-line);border-left:3px solid var(--warn)}
.msg.system,.msg.automation{background:transparent;border:0;box-shadow:none;margin:.1rem 0 .55rem}
.msg.system .body,.msg.automation .body{padding:.1rem .4rem;color:var(--muted);font-size:.92em;white-space:pre-wrap}
.msg.system .head,.msg.automation .head{display:none}
.msg .att{padding:.3rem .9rem .6rem;display:flex;gap:.5rem;flex-wrap:wrap}
.msg .att a{font-size:.9em;border:1px solid var(--line-strong);border-radius:99px;padding:.12rem .6rem}
.msg .pick{float:right;margin-left:.5rem}
.composer{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-top:1rem}
.composer .tabs{display:flex;gap:0;border-bottom:1px solid var(--line)}
.composer .tabs button{background:none;border:0;padding:.55rem 1rem;font-weight:600;color:var(--muted);border-bottom:2px solid transparent}
.composer .tabs button.active{color:var(--ink);border-bottom-color:var(--accent)}
.composer .tabs button.note-tab.active{border-bottom-color:var(--warn)}
.composer .pad{padding:.8rem}
.composer textarea{width:100%;min-height:7.5rem;resize:vertical}
.composer.note-mode .pad{background:var(--note-bg)}
.composer .foot{display:flex;align-items:center;gap:.6rem;padding:0 .8rem .8rem}
.composer .foot .hint{color:var(--faint);font-size:.88em;margin-left:auto}
.hannes-card{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius);box-shadow:var(--shadow);padding:.8rem .9rem;margin:0 0 .75rem}
.hannes-card .hc-head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.45rem}
.hannes-card .hc-head .who{font-weight:700}
.hannes-card .hc-badge{font-size:.78em;font-weight:600;border-radius:99px;padding:.08rem .55rem;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.hannes-card .hc-badge.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:#8a5a00}
.hannes-card .hc-body{white-space:pre-wrap;overflow-wrap:break-word;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:.6rem .75rem;margin:.35rem 0 .55rem}
.hannes-card .hc-meta{color:var(--faint);font-size:.85em;margin-bottom:.5rem}
.hannes-card .hc-actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.level-pick{display:grid;gap:.5rem;margin:.4rem 0 .8rem}
.level-pick label{display:flex;gap:.6rem;align-items:flex-start;border:1px solid var(--line-strong);border-radius:10px;padding:.6rem .75rem;cursor:pointer}
.level-pick label:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.level-pick input{margin-top:.2rem}
.level-pick .lp-title{font-weight:600}
.level-pick .lp-hint{color:var(--muted);font-size:.9em}
.stat-row{display:flex;gap:1.2rem;flex-wrap:wrap;margin:.4rem 0 .8rem}
.stat-row .stat{min-width:8rem}
.stat-row .stat .v{font-size:1.5rem;font-weight:700;line-height:1.2}
.stat-row .stat .k{color:var(--muted);font-size:.88em}
.inline-form{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.inline-form input,.inline-form select{flex:1;min-width:0}
.stack{display:grid;gap:.45rem}
.muted{color:var(--muted)}
.small{font-size:.92em}
.right{margin-left:auto}
hr.sep{border:0;border-top:1px solid var(--line);margin:.6rem 0}

/* ── Einstellungen (Premium-Aufräumung, Lutz 14.07.) ─────────────────────────
   Zwei klare Ebenen: Gruppen = warmes Segment-Control (kein schwarzer Blob),
   Sektionen = ruhige Unterstrich-Tabs (kein Gestrichel). Formulare gestapelt,
   Labels ausgerichtet über voller Feldbreite. */
.settings-nav{display:flex;gap:.3rem;flex-wrap:wrap;margin:0 0 1rem}
.settings-nav a{color:var(--ink)}
/* Gruppen-Ebene: Segment-Control auf einer Schiene. */
.settings-nav.set-gruppen{gap:.25rem;margin:0 0 .7rem;padding:.3rem;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);width:max-content;max-width:100%}
.settings-nav.set-gruppen a{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .85rem;border-radius:8px;color:var(--muted);font-weight:600;background:transparent}
.settings-nav.set-gruppen a .ic{width:15px;height:15px;color:var(--faint)}
.settings-nav.set-gruppen a:hover{background:var(--bg);color:var(--ink);text-decoration:none}
.settings-nav.set-gruppen a:hover .ic{color:var(--muted)}
.settings-nav.set-gruppen a.active{background:var(--accent-soft);color:var(--accent-ink)}
.settings-nav.set-gruppen a.active .ic{color:var(--accent-ink)}
/* Sektions-Ebene: Unterstrich-Tabs unter einer feinen Trennlinie. */
.settings-nav.set-sektionen{gap:.1rem;margin:0 0 1.3rem;border-bottom:1px solid var(--line);padding:0}
.settings-nav.set-sektionen a{position:relative;padding:.45rem .75rem;color:var(--muted);font-weight:600;font-size:.94em;border-radius:7px 7px 0 0}
.settings-nav.set-sektionen a:hover{color:var(--ink);background:var(--surface);text-decoration:none}
.settings-nav.set-sektionen a.active{color:var(--accent-ink)}
.settings-nav.set-sektionen a.active::after{content:"";position:absolute;left:.55rem;right:.55rem;bottom:-1px;height:2px;background:var(--accent);border-radius:2px}
/* Einstellungen-Übersicht: gleich hohe Bereichskarten, ruhiger Kopf. */
.set-intro{margin:.15rem 0 0;color:var(--muted)}
.settings-grid.set-uebersicht{align-items:stretch}
.set-karte{display:flex;flex-direction:column}
.set-karte h3{display:flex;align-items:center;gap:.5rem;margin:0 0 .35rem;color:var(--ink);font-size:.98rem;text-transform:none;letter-spacing:0;font-weight:700}
.set-karte h3 .ic{width:17px;height:17px;color:var(--accent)}
.set-karte>.muted{flex:1}
.set-links{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.8rem}
.set-links a{border:1px solid var(--line);border-radius:8px;padding:.28rem .7rem;color:var(--ink);font-size:.92em;font-weight:500;background:var(--surface)}
.set-links a:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink);text-decoration:none}
/* Settings-Karten-Köpfe (Sektionen) lesbarer als die Ticket-Mikro-Labels. */
.settings .card>h3:first-child{color:var(--muted);font-size:.8em}
/* Formulare: Label über dem Feld, volle Breite, ruhiger Rhythmus. */
.settings .stack{gap:.75rem}
.settings .stack label{display:grid;gap:.3rem;margin:0;font-size:.85em;font-weight:600;color:var(--muted);max-width:32rem}
.settings .stack label input,.settings .stack label select,.settings .stack label textarea{width:100%;font-weight:400;color:var(--ink)}
.settings .stack>input,.settings .stack>select,.settings .stack>textarea{max-width:32rem}
.settings .stack .btn{justify-self:start;margin-top:.15rem}
.avatar{border-radius:50%;object-fit:cover;flex:none;display:inline-block;vertical-align:middle}
.avatar-ini{border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;font-weight:700;vertical-align:middle}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(21rem,1fr));gap:1rem;align-items:start}
table.plain{width:100%;border-collapse:collapse}
table.plain th{text-align:left;font-size:.8em;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);padding:.3rem .4rem;border-bottom:1px solid var(--line)}
table.plain td{padding:.34rem .4rem;border-bottom:1px solid var(--line);vertical-align:top}
table.plain tr:last-child td{border-bottom:0}
.stars{color:var(--warn);letter-spacing:.1em}

/* Login */
.login-wrap{flex:1;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:1.5rem}
.login-card{width:100%;max-width:23rem;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:12px;box-shadow:0 10px 40px rgba(33,28,23,.10),var(--shadow);padding:2.1rem 2rem}
.login-logo{max-height:44px;max-width:200px;object-fit:contain;margin:0 0 .8rem}
.login-card .kicker{margin:0 0 .15rem;font-size:.78em;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.login-card h1{margin:0 0 .3rem;font-size:1.35rem;line-height:1.25}
.login-card .sub{color:var(--muted);margin:0 0 1.3rem}
.login-card label{display:grid;gap:.3rem;margin:0 0 .9rem;font-size:.94em;color:var(--muted)}
.login-card .btn{width:100%;justify-content:center;padding:.6rem}
.login-error{display:none;background:var(--tint-red-bg);color:var(--tint-red-fg);border-radius:6px;padding:.55rem .8rem;margin:0 0 .9rem;font-size:.94em}

/* Hilfe-Overlay */
#kbd-help{display:none;position:fixed;inset:0;background:rgba(33,28,23,.45);z-index:90;place-items:center}
#kbd-help.visible{display:grid}
#kbd-help .panel{background:var(--surface);border-radius:12px;box-shadow:var(--shadow);padding:1.4rem 1.6rem;max-width:26rem;width:100%}
#kbd-help h2{margin:0 0 .8rem;font-size:1.05rem}
#kbd-help .row{display:flex;justify-content:space-between;padding:.22rem 0;color:var(--muted)}
.flash{background:var(--tint-green-bg);color:var(--tint-green-fg);border-radius:6px;padding:.5rem .9rem;margin:0 0 .9rem}
.flash.err{background:var(--tint-red-bg);color:var(--tint-red-fg)}
/* Toasts (CP7): EIN Meldungssystem — der Server-Flash wird beim Laden in den
   Toast-Stapel gehoben (hxToast), JS-Meldungen kommen direkt dazu. */
/* Studio-Offline (S7b): Statuszeile der Outbox — unten links, nie im Weg. */
#hx-syncleiste{position:fixed;left:1rem;bottom:1rem;z-index:200;background:var(--accent);color:#fff;border:0;border-radius:999px;padding:.55rem 1.05rem;font:inherit;font-size:.85rem;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.18);cursor:pointer}
#hx-syncleiste.offline{background:var(--ink)}
@media (max-width:900px){#hx-syncleiste{bottom:4.2rem}}
/* Tipp-Blase (S8): title-Inhalte für Touch — Hover gibt es dort nicht. */
#tipbub{position:fixed;z-index:230;transform:translateX(-50%);max-width:min(22rem,86vw);background:var(--ink);color:#fff;border-radius:8px;padding:.5rem .75rem;font-size:.9em;line-height:1.4;box-shadow:0 10px 30px rgba(0,0,0,.22);pointer-events:none;animation:toast-in .18s ease}
#tipbub.out{opacity:0;transition:opacity .24s ease}
#toasts{position:fixed;top:.9rem;right:.9rem;z-index:220;display:flex;flex-direction:column;gap:.5rem;max-width:min(26rem,92vw)}
.toast{display:flex;align-items:flex-start;gap:.6rem;background:var(--tint-green-bg);color:var(--tint-green-fg);border-radius:8px;padding:.6rem .9rem;box-shadow:0 10px 30px rgba(0,0,0,.18);animation:toast-in .18s ease}
.toast.err{background:var(--tint-red-bg);color:var(--tint-red-fg)}
.toast .tx{flex:1;min-width:0;overflow-wrap:anywhere}
.toast .toast-x{background:none;border:0;color:inherit;cursor:pointer;font-size:1.05em;line-height:1;padding:0}
.toast.out{opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s}
@keyframes toast-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* Klickbare Listen-Zeilen (Klick-Doktrin) — EIN Muster für alle Räume. */
tr[data-href]{cursor:pointer}
tr[data-href]:hover{background:color-mix(in srgb,var(--accent) 4%,var(--surface))}
/* Bausteine (CP0a): KpiBar, SmartButtons, KontextChips, EmptyState, Skeleton,
   Crumbs, Drawer — die Insel-Anatomie als geteilte Klassen. */
.kpibar{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:.7rem;margin:0 0 1rem}
.kpi{display:grid;gap:.1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:.7rem .9rem;color:var(--ink)}
.kpi:hover{text-decoration:none;border-color:var(--line-strong);box-shadow:0 3px 14px rgba(33,28,23,.10)}
.kpi.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow)}
.kpi-v{font-size:1.45rem;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.kpi-v.tone-ok{color:var(--ok)}
.kpi-v.tone-warn{color:var(--warn)}
.kpi-v.tone-breach{color:var(--breach)}
.kpi-k{color:var(--muted);font-size:.88em;font-weight:600}
.kpi-h{color:var(--faint);font-size:.8em}
.smartbar{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem}
.smartbtn{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--line-strong);border-radius:8px;padding:.4rem .8rem;color:var(--ink);font-weight:500;background:var(--surface)}
.smartbtn b{font-variant-numeric:tabular-nums}
.smartbtn:hover{text-decoration:none;border-color:var(--accent);color:var(--accent-ink)}
.smartbtn .ic{width:15px;height:15px;color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:.32rem;border:1px solid var(--line-strong);border-radius:99px;padding:.1rem .6rem .1rem .45rem;font-size:.9em;font-weight:500;color:var(--ink);background:var(--surface);vertical-align:middle}
.chip:hover{text-decoration:none;border-color:var(--accent);color:var(--accent-ink)}
.chip .ic-s{color:var(--muted)}
.chip:hover .ic-s{color:var(--accent-ink)}
.chip-kunde .ic-s{color:var(--tint-blue-fg)}
.chip-termin .ic-s{color:var(--tint-green-fg)}
.chip-ticket .ic-s{color:var(--accent)}
.chip-gutschein .ic-s{color:var(--tint-violet-fg)}
.chip-rechnung .ic-s,.chip-beleg .ic-s{color:var(--tint-amber-fg)}
.chip-signatur .ic-s,.chip-einwilligung .ic-s{color:var(--tint-green-fg)}
.chiprow{display:flex;flex-wrap:wrap;gap:.45rem;margin:.1rem 0 1rem}
.filterbar{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:0 0 .9rem;padding:.45rem .7rem;background:color-mix(in srgb,var(--accent) 6%,var(--surface));border:1px solid var(--line);border-radius:var(--radius)}
.filterbar-l{color:var(--muted);font-size:.9em}
.filterbar-x{display:inline-flex;align-items:center;gap:.3rem;color:var(--muted);font-size:.9em;margin-left:auto}
.filterbar-x .ic-s{width:13px;height:13px}
.empty{display:grid;justify-items:center;gap:.45rem;padding:2.6rem 1rem;color:var(--muted);text-align:center;background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--radius)}
.empty .ic-xl{color:var(--faint)}
.empty-t{margin:0;font-weight:600;color:var(--ink)}
.empty-h{margin:0;font-size:.92em;max-width:26rem}
.skel{position:relative;overflow:hidden;background:color-mix(in srgb,var(--ink) 7%,transparent);border-radius:6px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 60%,transparent),transparent);animation:skel 1.3s infinite}
@keyframes skel{to{transform:translateX(100%)}}
.skel-table,.skel-detail{display:grid;gap:.5rem}
.skel-row{height:2.1rem}
.skel-line{height:.95rem}
.skel-line.w-40{width:40%}
.skel-line.w-70{width:70%}
.skel-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:.7rem}
.skel-card{height:4.6rem}
.crumbs{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;color:var(--muted);font-size:.92em;margin:0 0 .5rem}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent-ink)}
.crumb-sep{color:var(--faint)}
.crumb-i[aria-current]{color:var(--ink);font-weight:600}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(30rem,92vw);background:var(--surface);border-left:1px solid var(--line);box-shadow:-12px 0 34px rgba(33,28,23,.18);z-index:95;transform:translateX(102%);transition:transform .22s ease;display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.drawer-head h2{margin:0;font-size:1.05rem;flex:1}
.drawer-body{padding:1rem;overflow-y:auto}
.drawer-veil{display:none;position:fixed;inset:0;background:rgba(33,28,23,.4);z-index:94}
.drawer-veil.open{display:block}

/* ⌘K-Palette (CP0b): Springe-zu über Räume, Aktionen und Datensätze */
#cmdk{display:none;position:fixed;inset:0;z-index:120}
#cmdk.visible{display:block}
.cmdk-veil{position:absolute;inset:0;background:rgba(33,28,23,.45)}
.cmdk-panel{position:relative;margin:10vh auto 0;width:min(38rem,94vw);background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 60px rgba(0,0,0,.30);overflow:hidden;display:flex;flex-direction:column}
.cmdk-inrow{display:flex;align-items:center;gap:.6rem;padding:.75rem 1rem;border-bottom:1px solid var(--line)}
.cmdk-inrow .ic{color:var(--muted)}
.cmdk-inrow input{flex:1;border:0;background:none;font-size:1.08em;padding:0}
.cmdk-inrow input:focus{outline:none}
#cmdk-list{max-height:52vh;overflow-y:auto;padding:.4rem;overscroll-behavior:contain}
.cmdk-g{font-size:.74em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:.55rem .6rem .2rem}
.cmdk-item{display:flex;align-items:baseline;gap:.6rem;padding:.42rem .6rem;border-radius:7px;color:var(--ink);cursor:pointer}
.cmdk-item:hover{text-decoration:none}
.cmdk-item.on{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.cmdk-item .cl{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-item .cs{color:var(--muted);font-size:.9em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-item .cw{margin-left:auto;color:var(--faint);font-size:.85em;white-space:nowrap;font-variant-numeric:tabular-nums}
.cmdk-chip{font-size:.72em;font-weight:700;border-radius:5px;padding:.06rem .4rem;letter-spacing:.03em;flex:none;align-self:center;background:var(--tint-gray-bg);color:var(--tint-gray-fg)}
.cmdk-chip.t-raum{background:var(--tint-gray-bg);color:var(--tint-gray-fg)}
.cmdk-chip.t-aktion{background:var(--tint-amber-bg);color:var(--tint-amber-fg)}
.cmdk-chip.t-zuletzt{background:var(--tint-gray-bg);color:var(--tint-gray-fg)}
.cmdk-chip.t-kunde{background:var(--tint-blue-bg);color:var(--tint-blue-fg)}
.cmdk-chip.t-termin{background:var(--tint-green-bg);color:var(--tint-green-fg)}
.cmdk-chip.t-ticket{background:var(--tint-violet-bg);color:var(--tint-violet-fg)}
.cmdk-leer{padding:1rem .8rem;color:var(--muted);text-align:center}
.cmdk-foot{display:flex;gap:1rem;padding:.5rem 1rem;border-top:1px solid var(--line);color:var(--faint);font-size:.85em}
/* NotificationBell (CP7): Glocke in der Topbar, Panel mit klickbaren Zeilen. */
.bellwrap{position:relative}
.bell-btn{position:relative}
.bell-badge{position:absolute;top:-4px;right:-5px;background:var(--accent);color:#fff;border-radius:99px;font-size:.66em;font-weight:700;min-width:15px;height:15px;line-height:15px;text-align:center;padding:0 3px}
#bell-panel{display:none;position:absolute;right:0;top:calc(100% + .5rem);width:min(23rem,92vw);background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 50px rgba(0,0,0,.22);z-index:130;overflow:hidden}
#bell-panel.visible{display:block}
.bp-h{font-size:.74em;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);padding:.55rem .85rem .2rem}
a.bp-row{display:flex;align-items:baseline;gap:.55rem;padding:.45rem .85rem;color:var(--ink)}
a.bp-row:hover{background:color-mix(in srgb,var(--accent) 6%,var(--surface));text-decoration:none}
.bp-row .t{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bp-row .s{color:var(--muted);font-size:.88em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bp-row .w{margin-left:auto;color:var(--faint);font-size:.82em;white-space:nowrap;font-variant-numeric:tabular-nums}
.bp-leer{padding:.9rem;color:var(--muted);text-align:center}
.bp-foot{border-top:1px solid var(--line);padding:.45rem .85rem;font-size:.85em}

/* ── S8 iPad-Pass: Touch-Ziele ≥44px, Tabellen als eigene Scroll-Container.
   Greift NUR auf Touch-Geräten (pointer:coarse) — Desktop (Maus) bleibt
   pixel-identisch (der S6-Spaltenmess-Prüfer läuft ohne Touch). ── */
@media (pointer:coarse){
  /* Icon-Knöpfe (⚙, Glocke, Collapse, Zeilen-Aktionen) auf Apple-Maß 44×44. */
  .ibtn{width:44px;height:44px}
  button{min-height:44px;min-width:44px}
  .btn.small{padding:.3rem .7rem}
  /* Sidebar-Punkte, Ansichts-Leiste, Tabs: volle Fingerhöhe. */
  .side-nav a,.views a{min-height:44px}
  .settings-nav a,.gb-tab,.rp-nav a,.cf-tabs a{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
  /* Daten-Zeilen (Zeile = Ziel) und Finanz-/KPI-Zeilen: Fingerhöhe.
     tbody-Spezifität: Raum-CSS (z. B. table.ko td) lädt NACH der Schale. */
  .tickets tbody td,table.plain tbody td,table.inv tbody td,table.ko tbody td,table.mh tbody td{padding-top:.8rem;padding-bottom:.8rem}
  a.fk,a.kpi,a.db-kpi,a.gb-kpi,a.smartbtn{min-height:44px}
  .pager a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
  .sh-confpop label{min-height:44px}
  /* Kompakte Pillen + Krumen: sichtbare Gestalt bleibt, die Treffer-Fläche
     wächst unsichtbar auf mindestens 44×44 (zentrierte ::after-Zone). */
  .chip,.sh-ipad,.sh-lauf,.crumb a,.crumbs a{position:relative}
  .chip::after,.sh-ipad::after,.sh-lauf::after,.crumb a::after,.crumbs a::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;min-width:44px;min-height:44px}
  /* Breite Tabellen scrollen im eigenen Rahmen statt die Seite zu fluten
     (Momentum-Scroll; das Spaltenlayout innen bleibt unverändert). */
  .tickets,table.plain,table.inv,table.ko,table.mh{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

@media (max-width:980px){
  .sidebar{display:none}
  .detail{flex-direction:column}
  .meta-col{width:100%}
  html{font-size:14.5px}
  .tickets td.hide-m,.tickets th.hide-m{display:none}
  .topbar{flex-wrap:wrap;height:auto;padding:.55rem 1rem;row-gap:.4rem}
  .topbar form.search{order:9;flex-basis:100%;max-width:none}
  .burger{display:inline-flex}
  .tickets .subj{min-width:0}
  .tickets .subj a{overflow-wrap:anywhere}
  .tickets td,.tickets th{padding:.45rem .4rem}
  /* Sidebar wird zum Sheet (Burger/Menü), Kernräume wandern in die Bottom-Bar */
  .side{position:fixed;top:0;left:0;bottom:0;width:min(19rem,86vw);transform:translateX(-102%);transition:transform .22s ease;box-shadow:14px 0 40px rgba(33,28,23,.22)}
  body.side-collapsed .side{width:min(19rem,86vw)}
  body.side-collapsed .side-name,body.side-collapsed .side-user,body.side-collapsed .side-sect,body.side-collapsed .side-nav a .lbl{display:initial}
  body.side-collapsed .side-nav a{justify-content:flex-start;padding:.42rem .55rem}
  body.side-collapsed .side-foot{flex-direction:row}
  body.side-collapsed .side-brand.has-logo .side-mark{display:none}
  body.side-collapsed .side-brand .side-logo{display:initial}
  .side-collapse{display:none}
  body.nav-open .side{transform:none}
  body.nav-open .sheet-veil{display:block;position:fixed;inset:0;background:rgba(33,28,23,.42);z-index:44}
  .side-nav a{padding:.58rem .6rem;font-size:1.02em}
  .bottombar{display:flex}
  .frame{padding-bottom:64px;overflow-x:hidden}
  .tickets,table.plain{display:block;overflow-x:auto}
  input,select,textarea{max-width:100%}
  .drawer{width:100vw}
  body.nav-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  body.nav-open .burger span:nth-child(2){opacity:0}
  body.nav-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  #bell-panel{position:fixed;left:.6rem;right:.6rem;top:58px;width:auto}
}