/* Schrift Inter (SIL Open Font License) vom eigenen Server – kein Aufruf bei Google, keine IP-Weitergabe */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('assets/fonts/inter-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('assets/fonts/inter-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('assets/fonts/inter-greek-ext.woff2') format('woff2'); unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('assets/fonts/inter-greek.woff2') format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('assets/fonts/inter-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('assets/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('assets/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --brand: #0FA99B;
  --brand-d: #0B8578;
  --brand-50: #E6F7F5;
  --accent: #1B2638;
  --accent-d: #0F1724;
  --bg: #F5F6F8;
  --panel: #FFFFFF;
  --panel-2: #F9FAFB;
  --text: #111827;
  --text-2: #374151;
  --muted: #6B7280;
  --faint: #9CA3AF;
  --line: #E5E7EB;
  --line-2: #F0F1F3;
  --ok: #15803D;
  --warn: #B45309;
  --err: #B91C1C;
  --sick: #7E22CE;
  --info: #1D4ED8;
  --r: 12px;
  --r-lg: 16px;
  --sh: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --sh-lg: 0 12px 32px rgba(16, 24, 40, .12);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0E13; --panel: #12161D; --panel-2: #171C24; --text: #F3F4F6; --text-2: #D1D5DB; --muted: #9CA3AF; --faint: #6B7280;
    --line: #232A35; --line-2: #1B212A; --brand-50: rgba(46, 230, 212, .16); --sh: 0 1px 2px rgba(0, 0, 0, .3); --sh-lg: 0 12px 32px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0B0E13; --panel: #12161D; --panel-2: #171C24; --text: #F3F4F6; --text-2: #D1D5DB; --muted: #9CA3AF; --faint: #6B7280;
  --line: #232A35; --line-2: #1B212A; --brand-50: rgba(46, 230, 212, .16); --sh: 0 1px 2px rgba(0, 0, 0, .3); --sh-lg: 0 12px 32px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .overlay { background: rgba(0, 0, 0, .62); } }
:root[data-theme="dark"] .overlay { background: rgba(0, 0, 0, .62); }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 14px/1.5 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
input, select, textarea { font: inherit; color: var(--text); }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -.01em; }
svg.i { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg.i.sm { width: 15px; height: 15px; }
svg.i.lg { width: 22px; height: 22px; }
.muted { color: var(--muted); } .faint { color: var(--faint); }
.small { font-size: 12.5px; } .tiny { font-size: 11.5px; } .bold { font-weight: 650; } .num { font-variant-numeric: tabular-nums; }
.row { display: flex; align-items: center; gap: 10px; } .between { justify-content: space-between; } .wrap { flex-wrap: wrap; } .grow { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 14px; } .gap-s { gap: 6px; } .hidden { display: none !important; }
.ellipsis { overflow-wrap: break-word; min-width: 0; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; white-space: normal; } /* bewusst kein „…“: Texte brechen um statt abgeschnitten zu werden (break-word: der Kasten schrumpft nicht auf Buchstabenbreite) */
.kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; border: 1px solid var(--line); background: var(--panel-2); font-size: 11px; font-weight: 600; color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; word-break: break-all; color: var(--muted); }

/* ---------- App-Rahmen ---------- */
.app { display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: 60px 1fr; min-height: 100vh; }
.main, .topbar { min-width: 0; }
.rail { grid-row: 1 / 3; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 14px 12px; position: sticky; top: 0; height: 100vh; }
.rail .logo { display: flex; align-items: center; gap: 10px; padding: 6px 10px 20px; font-weight: 800; font-size: 17px; letter-spacing: -.02em; }
.rail .logo .mark { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(140deg, var(--brand), var(--brand-g, var(--brand-d))); display: grid; place-items: center; color: var(--on-brand, #fff); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.rail .section { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 650; padding: 14px 10px 6px; }
.nav { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 9px; color: var(--text-2); font-weight: 550; width: 100%; text-align: left; }
.nav:hover { background: var(--panel-2); }
.nav.on { background: var(--brand-50); color: var(--brand-d); }
.nav .count { margin-left: auto; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; padding: 0 7px; border-radius: 999px; line-height: 18px; }
.rail .foot { margin-top: auto; border-top: 1px solid var(--line); padding-top: 12px; }
.userchip { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; width: 100%; text-align: left; }
.userchip:hover { background: var(--panel-2); }

.topbar { grid-column: 2; display: flex; align-items: center; gap: 14px; padding: 0 28px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 10; }
.search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--muted); width: 320px; }
/* Kopfzeile: Suche gibt Platz ab, Stempel-Knöpfe bleiben; wird es trotzdem eng, wischt die Kopfzeile seitlich statt die ganze Seite */
.topbar .search { flex: 0 1 320px; width: auto; min-width: 40px; }
.topbar { overflow-x: auto; scrollbar-width: none; } .topbar::-webkit-scrollbar { display: none; }
.topbar > * { flex-shrink: 0; } .topbar > .search { flex-shrink: 1; }
@media (max-width: 1180px) { .topbar .search { flex: 0 0 40px; padding: 0; justify-content: center; } .topbar .search > span { display: none; } }
.search span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timebar { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.status-pill { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); font-weight: 600; }
.status-pill .dot { width: 8px; height: 8px; border-radius: 50%; }
.status-pill .t { font-variant-numeric: tabular-nums; font-weight: 700; }
.main { grid-column: 2; padding: 28px; max-width: 1440px; width: 100%; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.head h1 { font-size: 24px; font-weight: 750; }
.head .sub { color: var(--muted); margin-top: 2px; }

/* ---------- Bausteine ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh); }
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); }
.panel-h h3 { font-size: 14.5px; font-weight: 700; }
.panel-b { padding: 16px 18px; }
.grid { display: grid; gap: 18px; }
.g-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.c-3 { grid-column: span 3; } .c-4 { grid-column: span 4; } .c-5 { grid-column: span 5; } .c-6 { grid-column: span 6; } .c-7 { grid-column: span 7; } .c-8 { grid-column: span 8; } .c-12 { grid-column: span 12; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 9px; font-weight: 600; background: var(--panel); border: 1px solid var(--line); color: var(--text-2); white-space: nowrap; }
.btn:hover { background: var(--panel-2); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-d); }
.btn.danger { color: var(--err); }
.btn.warn { background: var(--warn); border-color: var(--warn); color: #fff; }
.btn.stop { background: var(--err); border-color: var(--err); color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.sm { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }
.btn.lg { height: 48px; padding: 0 22px; font-size: 15px; border-radius: 11px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn .kbd { margin-left: 4px; background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.3); color: inherit; }
.tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 650; background: var(--panel-2); color: var(--text-2); border: 1px solid var(--line); white-space: nowrap; }
.tag.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 9%, transparent); border-color: transparent; }
.tag.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); border-color: transparent; }
.tag.err { color: var(--err); background: color-mix(in srgb, var(--err) 9%, transparent); border-color: transparent; }
.tag.sick { color: var(--sick); background: color-mix(in srgb, var(--sick) 10%, transparent); border-color: transparent; }
.tag.brand { color: var(--brand-d); background: var(--brand-50); border-color: transparent; }
.tag.role { color: #fff; background: var(--c); border-color: transparent; font-weight: 700; letter-spacing: .01em; box-shadow: 0 1px 2px color-mix(in srgb, var(--c) 40%, transparent); }
.seg { display: inline-flex; padding: 3px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; gap: 2px; }
.seg button { height: 30px; padding: 0 12px; border-radius: 7px; font-weight: 600; color: var(--muted); font-size: 13px; }
.seg button.on { background: var(--panel); color: var(--text); box-shadow: var(--sh); }
.inboxseg { margin: 0 0 14px; } .inboxseg button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; font-size: 14px; }
.inboxseg .count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--brand); color: var(--on-brand, #fff); font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.input { height: 38px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); padding: 0 11px; outline: none; width: 100%; }
textarea.input { height: auto; padding: 9px 11px; resize: vertical; }
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.chip { min-height: 30px; height: auto; padding: 4px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); font-weight: 600; font-size: 12.5px; color: var(--text-2); max-width: 100%; white-space: normal; overflow-wrap: break-word; text-align: left; line-height: 1.3; }
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12.5px; flex-shrink: 0; position: relative; }
.avatar .st { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--panel); }
.note { display: flex; gap: 10px; padding: 11px 13px; border-radius: 10px; font-size: 13px; border: 1px solid; align-items: flex-start; }
.note.info { background: color-mix(in srgb, var(--info) 6%, transparent); border-color: color-mix(in srgb, var(--info) 22%, transparent); color: var(--text-2); }
.note.ok { background: color-mix(in srgb, var(--ok) 7%, transparent); border-color: color-mix(in srgb, var(--ok) 28%, transparent); color: var(--text-2); }
.note.ok > svg { color: var(--ok); }
.note.plain { background: var(--panel-2); border-color: var(--line); color: var(--text-2); }
.note.warn { background: color-mix(in srgb, var(--warn) 7%, transparent); border-color: color-mix(in srgb, var(--warn) 28%, transparent); color: var(--warn); font-weight: 550; }
.note.err { background: color-mix(in srgb, var(--err) 7%, transparent); border-color: color-mix(in srgb, var(--err) 28%, transparent); color: var(--err); font-weight: 550; }
.empty { padding: 34px 16px; text-align: center; color: var(--muted); }
.empty svg { width: 32px; height: 32px; color: var(--faint); margin-bottom: 8px; }

/* Kennzahlen */
.kpi { padding: 16px 18px; }
.kpi .l { color: var(--muted); font-size: 12.5px; font-weight: 550; display: flex; align-items: center; gap: 7px; }
.kpi .v { font-size: 26px; font-weight: 750; letter-spacing: -.02em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.kpi .d { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Stempel-Zentrale */
.clockpanel { display: grid; grid-template-columns: 1.25fr 1fr; }
.clockpanel .left { padding: 26px 28px; border-right: 1px solid var(--line-2); }
.clockpanel .right { padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; background: var(--panel-2); border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.timer { font-size: 58px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; }
.actions .btn { height: 52px; font-size: 15px; justify-content: space-between; padding: 0 16px; }
.kv { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.kv span:first-child { color: var(--muted); }
.bar { height: 8px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.timeline { position: relative; height: 34px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line-2); overflow: hidden; }
.timeline .seg-w { position: absolute; top: 6px; bottom: 6px; background: var(--brand); border-radius: 5px; }
.timeline .seg-p { position: absolute; top: 6px; bottom: 6px; background: repeating-linear-gradient(45deg, var(--warn) 0 4px, transparent 4px 8px); opacity: .55; border-radius: 5px; }
.timeline .now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--err); }
.ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); margin-top: 6px; }

/* Tabellen */
.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); font-weight: 650; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel-2); position: sticky; top: 0; }
.table td { padding: 11px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tr.click { cursor: pointer; } .table tr.click:hover td { background: var(--panel-2); }
.table input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--brand); }
.bulkbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--brand-50); border-bottom: 1px solid var(--line); }

/* Kalender */
.cal { display: grid; grid-template-columns: 44px repeat(7, minmax(0, 1fr)); }
.cal .h { font-size: 11.5px; font-weight: 650; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; padding: 8px; }
.cal .kw { font-size: 11.5px; color: var(--faint); font-weight: 600; display: grid; place-items: center; border-top: 1px solid var(--line-2); }
.cal .d { min-height: 92px; border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); padding: 8px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; position: relative; transition: background .1s; min-width: 0; }
.cal .d:hover { background: var(--panel-2); }
.cal .d .n { font-weight: 650; font-size: 13px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; }
.cal .d.today .n { background: var(--brand); color: #fff; }
.cal .d.sel { box-shadow: inset 0 0 0 2px var(--brand); }
.cal .d.free { background: repeating-linear-gradient(135deg, transparent 0 7px, var(--line-2) 7px 8px); }
.cal .d.free .n { color: var(--faint); }
.ev { font-size: 11.5px; font-weight: 600; padding: 2px 6px; border-radius: 5px; display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; }
.ev.work { background: var(--brand-50); color: var(--brand-d); }
.ev.viol { background: color-mix(in srgb, var(--err) 10%, transparent); color: var(--err); }
.ev.vac { background: color-mix(in srgb, var(--ok) 11%, transparent); color: var(--ok); }
.ev.pend { background: color-mix(in srgb, var(--warn) 11%, transparent); color: var(--warn); }
.ev.sick { background: color-mix(in srgb, var(--sick) 11%, transparent); color: var(--sick); }
.ev.hol { background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); }
.legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }

/* Antrags-Assistent */
.types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.type { text-align: left; padding: 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--panel); display: flex; gap: 12px; align-items: flex-start; position: relative; }
.type:hover { border-color: color-mix(in srgb, var(--c) 50%, var(--line)); }
.type.on { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 14%, transparent); }
.type .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 11%, transparent); flex-shrink: 0; }
.type .sug { position: absolute; top: 10px; right: 10px; font-size: 10.5px; font-weight: 700; color: var(--c); }

/* Overlay / Dialog */
.overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .42); backdrop-filter: blur(2px); display: grid; place-items: center; z-index: 50; animation: fade .12s; padding: 20px; }
.dialog { background: var(--panel); width: min(760px, 100%); max-height: 90vh; overflow: auto; border-radius: 18px; box-shadow: var(--sh-lg); animation: pop .16s ease; }
.dialog.sm { width: min(440px, 100%); }
.dialog.lg { width: min(960px, 100%); }
.dialog.xl { width: min(1280px, 100%); max-height: 96vh; }
.dialog-h { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line-2); position: sticky; top: 0; background: var(--panel); z-index: 2; }
.dialog-h h2 { font-size: 17px; font-weight: 700; }
.dialog-b { padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; }
.legal h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 4px; } .legal p { margin: 0 0 14px; line-height: 1.55; } .legal p:last-child { margin-bottom: 0; } .legal a { color: inherit; text-decoration: underline; } .legal .legal-date { font-size: 12.5px; color: var(--muted); }
.dialog-f { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--line-2); position: sticky; bottom: 0; background: var(--panel); }
@keyframes pop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* Befehlspalette */
.palette { width: min(620px, 100%); align-self: start; margin-top: 12vh; }
.palette input { border: 0; outline: 0; height: 56px; font-size: 16px; padding: 0 20px; width: 100%; background: transparent; border-bottom: 1px solid var(--line); color: var(--text); }
.palette .res { max-height: 380px; overflow: auto; padding: 6px; }
.palette .it { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 9px; width: 100%; text-align: left; }
.palette .it.on, .palette .it:hover { background: var(--brand-50); }
.palette .grp { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 650; padding: 10px 12px 4px; }

/* Chat */
.chat { display: grid; grid-template-columns: 300px minmax(0, 1fr) 280px; height: calc(100vh - 60px - 130px); min-height: 520px; overflow: hidden; }
.chat .col { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.chat .col + .col { border-left: 1px solid var(--line); }
.chat .list { overflow: auto; flex: 1; }
.citem { display: flex; gap: 11px; padding: 11px 14px; width: 100%; text-align: left; border-bottom: 1px solid var(--line-2); }
.citem:hover { background: var(--panel-2); } .citem.on { background: var(--brand-50); }
/* Chat-Suche: Treffer in Nachrichten */
.csearch-hits { display: flex; flex-direction: column; }
.chit-h { padding: 10px 14px 4px; font-size: 12px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.chit { display: flex; flex-direction: column; gap: 2px; padding: 9px 14px; width: 100%; text-align: left; border-bottom: 1px solid var(--line-2); }
.chit:hover { background: var(--panel-2); }
.chit-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chit mark { background: none; color: var(--brand); font-weight: 700; }
.carchive { border-top: 1px solid var(--line); margin-top: 8px; }
.carchive summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; font-weight: 650; font-size: 13px; color: var(--text-2); list-style: none; }
.carchive summary::-webkit-details-marker { display: none; } .carchive summary > span:first-of-type { flex: 1; } .carchive summary svg:last-child { transition: transform .15s; }
.carchive[open] summary svg:last-child { transform: rotate(90deg); }
.msgs { flex: 1; overflow: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 2px; background: var(--panel-2); }
.msg { display: flex; gap: 10px; padding: 6px 8px; border-radius: 8px; }
.msg:hover { background: var(--panel); }
.msg .body { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.msg.special { border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 6%, var(--panel)); margin: 6px 0; padding: 10px 12px; }
.sys { text-align: center; font-size: 12px; color: var(--faint); margin: 8px 0; }
.dsep { display: flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 650; color: var(--faint); margin: 12px 0 6px; }
.dsep::before, .dsep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.composer { border-top: 1px solid var(--line); padding: 12px 16px; display: flex; gap: 8px; align-items: flex-end; background: var(--panel); }
.composer textarea { flex: 1; min-width: 0; min-height: 40px; max-height: 150px; resize: none; overflow-y: auto; line-height: 1.4; }
.composer-hint { font-size: 11.5px; color: var(--faint); padding: 4px 16px 8px; background: var(--panel); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.msgstate { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; margin-top: 4px; }
.msgstate.err { color: var(--err); } .msgstate.readtick { margin-top: 2px; } .msgstate.readtick.seen { color: var(--brand); } .msgstate .linkbtn { min-height: 0; }
.msg.is-pending .body { opacity: .7; }
/* Anhänge, Antworten, Abstimmungen im Chat */
.msg { position: relative; }
.msg .msgact { position: absolute; right: 8px; top: 4px; opacity: 0; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.msg:hover .msgact, .msg:focus-within .msgact { opacity: 1; }
.msg .msgact.del { right: 42px; }
.msg .msgact.del:hover { color: var(--err); }
.msg.hl { background: color-mix(in srgb, var(--brand) 14%, var(--panel)); transition: background .4s; }
.reply-q { display: flex; flex-direction: column; gap: 1px; text-align: left; border: 0; border-left: 3px solid var(--brand); background: color-mix(in srgb, var(--brand) 7%, var(--panel)); border-radius: 6px; padding: 5px 9px; margin: 2px 0 6px; max-width: 100%; cursor: pointer; font: inherit; color: inherit; }
.reply-q b { font-size: 12px; color: var(--brand); } .reply-q span { font-size: 12.5px; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.reply-q.static { cursor: default; margin: 0; flex: 1; min-width: 0; }
.replybar { display: flex; align-items: center; gap: 8px; padding: 8px 16px 0; background: var(--panel); border-top: 1px solid var(--line); }
.att-img { display: block; border: 0; padding: 0; background: var(--panel); border-radius: 12px; overflow: hidden; max-width: min(320px, 100%); position: relative; cursor: zoom-in; margin-top: 4px; }
.att-img img { display: block; width: 100%; max-height: 320px; object-fit: cover; min-height: 80px; }
.att-img .att-wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--faint); pointer-events: none; }
.att-img img[src] + .att-wait { display: none; } .att-img.err::after { content: "Foto nicht verfügbar"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); background: var(--panel); }
.att-doc, .att-card { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 10px 12px; margin-top: 4px; max-width: 420px; text-align: left; font: inherit; color: inherit; text-decoration: none; cursor: pointer; }
.att-card { cursor: default; flex-wrap: wrap; } .att-doc > svg, .att-card > svg { flex-shrink: 0; }
.att-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 200px; }
.att-actions { display: flex; gap: 6px; flex-wrap: wrap; flex: 0 0 auto; } .att-actions a.btn, a.att-doc { text-decoration: none; }
.att-doc b, .att-card b { word-break: break-word; } .att-doc small, .att-card small { color: var(--muted); font-size: 12px; word-break: break-word; }
.att-poll { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; max-width: 420px; }
.poll-opt { display: flex; flex-direction: column; gap: 5px; border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 8px 10px; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.poll-opt.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--panel)); } .poll-opt:disabled { cursor: default; opacity: .8; }
.poll-bar { display: block; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--brand) 18%, var(--panel)); overflow: hidden; } .poll-bar i { display: block; height: 100%; background: var(--brand); border-radius: 3px; transition: width .3s; }
.attach-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .attach-menu .type { --c: var(--brand); }
.composer.off { color: var(--muted); }
@media (max-width: 760px) { .msg .msgact { opacity: 1; } .attach-menu { grid-template-columns: 1fr; } }

/* Anmeldung */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(380px, 42%) 1fr; }
.login .brandside { background: linear-gradient(150deg, var(--brand) 0%, var(--brand-g, var(--brand-d)) 100%); color: #fff; padding: 48px 52px; display: flex; flex-direction: column; gap: 28px; position: relative; overflow: hidden; }
.login .brandside::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 380px; height: 380px; border-radius: 50%; border: 60px solid rgba(255,255,255,.06); }
.login .brandside h1 { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.feat { display: flex; gap: 14px; align-items: flex-start; }
.feat .ic { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.14); display: grid; place-items: center; flex-shrink: 0; }
.login .formside { padding: 48px clamp(24px, 5vw, 72px); display: flex; flex-direction: column; gap: 22px; max-width: 900px; }
.owner { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 20px; }
.ring { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.person { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); text-align: left; }
.person:hover { border-color: var(--brand); box-shadow: var(--sh); }

#toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 10px); background: #111827; color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 600; opacity: 0; transition: .2s; pointer-events: none; z-index: 60; display: flex; gap: 8px; align-items: center; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
/* Hinweis bei neuer Chat-Nachricht: oben rechts, gleitet herein und verschwindet von selbst */
#chatnote { position: fixed; top: 76px; right: 24px; z-index: 45; width: min(380px, calc(100vw - 32px)); display: flex; align-items: flex-start; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--r); box-shadow: var(--sh-lg); opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .25s; }
#chatnote.on { opacity: 1; transform: none; }
#chatnote .cn-open { flex: 1; min-width: 0; display: flex; gap: 10px; align-items: center; padding: 10px 4px 10px 12px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
#chatnote .cn-x { background: none; border: 0; color: var(--muted); padding: 8px; cursor: pointer; border-radius: 8px; }
#chatnote .cn-x:hover { color: var(--text); }

/* Handy: Wischen bleibt, Desktop-Elemente aus */
.only-mobile { display: none; }
.slide { position: relative; height: 60px; border-radius: 999px; background: var(--brand); color: #fff; overflow: hidden; user-select: none; touch-action: none; margin-top: 18px; }
.slide .knob { position: absolute; left: 4px; top: 4px; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: var(--brand); display: grid; place-items: center; box-shadow: 0 4px 10px rgba(0,0,0,.2); }
.slide .label { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; padding-left: 50px; white-space: nowrap; }
.slide.stop { background: var(--err); } .slide.stop .knob { color: var(--err); }
.mobilenav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--panel); border-top: 1px solid var(--line); justify-content: space-around; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); z-index: 20; }
.mobilenav .nav { flex-direction: column; gap: 2px; font-size: 10.5px; padding: 6px 8px; width: auto; }
@media (max-width: 1180px) {
  .chat { grid-template-columns: 260px minmax(0, 1fr); } .chat .info { display: none; }
  .c-3 { grid-column: span 6; } .c-4, .c-5, .c-7, .c-8 { grid-column: span 12; }
  .types { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: 56px 1fr; }
  .rail { display: none; } .topbar, .main { grid-column: 1; } .topbar { padding: 0 14px; } .main { padding: 16px 14px 90px; }
  .search { width: auto; } .search span, .search .kbd { display: none; }
  .c-3, .c-6 { grid-column: span 12; }
  .only-desktop { display: none !important; } .only-mobile { display: block; }
  .clockpanel { grid-template-columns: 1fr; } .clockpanel .left { border-right: 0; } .clockpanel .right { border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .timer { font-size: 44px; }
  .login { grid-template-columns: 1fr; } .login .brandside { padding: 28px 22px; } .login .brandside .feats { display: none; } .login .formside { padding: 22px 16px; }
  .chat { grid-template-columns: minmax(0, 1fr); height: auto; } .chat.open .clist { display: none; } .chat:not(.open) .conv { display: none; }
  .mobilenav { display: flex; }
  .types { grid-template-columns: 1fr 1fr; }
  .cal .d { min-height: 62px; padding: 4px; } .ev span { display: none; }
}
@media print { .rail, .topbar, .mobilenav, .no-print { display: none !important; } .app { display: block; } }

/* ===== v7: Anmeldung ===== */
.search input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; color: var(--text); }
.rail .railscroll { overflow: auto; flex: 1; margin: 0 -4px; padding: 0 4px; }
.rail .logo .mark { flex-shrink: 0; }
.rail .logo img { flex-shrink: 0; }
.signin { display: grid; grid-template-columns: 1.1fr 1fr; overflow: hidden; }
.signin .who { padding: 26px 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; background: linear-gradient(160deg, var(--brand-50), transparent 70%); }
.signin .ring { width: 86px; height: 86px; margin-bottom: 4px; }
.statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin-top: 10px; }
.statgrid > div { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; min-width: 0; }
.statgrid b { font-size: 16px; } .statgrid span { font-size: 11px; color: var(--muted); line-height: 1.3; overflow-wrap: anywhere; } .statgrid b { overflow-wrap: anywhere; line-height: 1.2; }
.pinside { padding: 26px 28px; border-left: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 14px; justify-content: center; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.keypad button { height: 50px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font-size: 19px; font-weight: 650; transition: .08s; display: grid; place-items: center; }
.keypad button:hover { border-color: var(--brand); background: var(--brand-50); }
.keypad button:active { transform: scale(.96); }
.keypad button.fn { font-size: 12.5px; color: var(--muted); }
.input.lg { height: 48px; font-size: 16px; }
.person.on { border-color: var(--brand); background: var(--brand-50); }
details.panel > summary { list-style: none; } details.panel > summary::-webkit-details-marker { display: none; }
details[open] > summary svg { transform: rotate(90deg); }

/* Übersicht */
.btn.info { background: var(--info); border-color: var(--info); color: #fff; }
/* Überstunden gesamt: Karte (Desktop) bzw. Zeile oben in der Stempelkarte (Handy), grün im Plus, rot im Minus */
.saldocard { --sc: var(--muted); border-left: 4px solid var(--sc); }
.saldocard.pos, .saldorow.pos { --sc: var(--ok); } .saldocard.neg, .saldorow.neg { --sc: var(--err); }
.saldocard .l { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.saldocard .v { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--sc); margin-top: 4px; line-height: 1.1; }
.saldocard .d { font-size: 12px; color: var(--muted); margin-top: 2px; }
.saldorow { --sc: var(--muted); display: none; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--sc) 35%, var(--line)); background: color-mix(in srgb, var(--sc) 8%, var(--panel)); }
.saldorow .l { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.saldorow .v { font-size: 20px; color: var(--sc); }
@media (max-width: 860px) { .saldorow.only-mobile { display: flex; } }
.svcbox { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.shiftdot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.ev.plan { background: color-mix(in srgb, var(--c) 12%, transparent); color: color-mix(in srgb, var(--c) 80%, var(--text)); border: 1px dashed color-mix(in srgb, var(--c) 45%, transparent); }
.linkbtn { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Live */
.sitecards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.sitecard { padding: 14px 16px; text-align: left; cursor: pointer; transition: .12s; }
.sitecard:hover { border-color: var(--brand); box-shadow: var(--sh-lg); }
.sitecover-s { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; flex: none; }
.sitecover-l { width: 100%; max-height: 200px; object-fit: cover; border-radius: 10px; display: block; }
.mapthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sitesw .input { flex: 1; min-width: 0; }
.avstack { display: flex; } .avstack .avatar { margin-right: -6px; border: 2px solid var(--panel); }

/* Mitarbeiter: weicher Übergang Suche → Liste */
.softpanel { overflow: hidden; }
.toolbar { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; padding: 16px 18px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border-bottom: 1px solid var(--line-2); }
.search.big { height: 44px; width: min(460px, 100%); border-radius: 12px; padding: 0 14px; box-shadow: var(--sh); }
.search.big:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.groupblock { padding: 6px 18px 18px; }
.grouphead { display: flex; gap: 8px; align-items: center; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 12px 2px 10px; position: sticky; top: 60px; background: var(--panel); z-index: 1; }
.grouphead::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.empcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.empcard { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); transition: .12s; min-width: 0; }
.empcard:hover { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); box-shadow: var(--sh-lg); transform: translateY(-1px); }
/* Lange Namen: der Name bekommt Platz, Schilder rutschen in die nächste Zeile – nie Buchstabe für Buchstabe */
.empcard .row.between { flex-wrap: wrap; gap: 4px 8px; } .empcard .row.between > b.ellipsis { flex: 1 1 150px; }
.citem .row.between { flex-wrap: wrap; gap: 2px 8px; } .citem .row.between > .ellipsis { flex: 1 1 120px; }
.dialog-h h2, .profilehead h1, .who-name, .who-user, .head h1 { overflow-wrap: break-word; min-width: 0; }
.kv span:last-child { white-space: normal; overflow-wrap: break-word; } .kv .num { white-space: nowrap; }
.mobilenav .nav span { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.1; text-align: center; overflow-wrap: break-word; }
.swatch { width: 24px; height: 24px; border-radius: 7px; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.swatch.lg { width: 34px; height: 34px; border-radius: 9px; }
.swatch.on { border-color: var(--text); }
.dropzone { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px; border: 2px dashed var(--line); border-radius: 14px; cursor: pointer; text-align: center; color: var(--text-2); transition: .12s; }
.dropzone:hover, .dropzone.over { border-color: var(--brand); background: var(--brand-50); }

/* Einsatzorte */
.sitegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.sitebig { text-align: left; overflow: hidden; padding: 0; transition: .12s; display: flex; flex-direction: column; }
.sitebig:hover { border-color: var(--brand); box-shadow: var(--sh-lg); }
.sitebig.off { opacity: .6; }
.sitebig.add { align-items: center; justify-content: center; gap: 8px; min-height: 220px; border-style: dashed; color: var(--muted); }
.mapthumb { height: 120px; background: var(--panel-2); position: relative; overflow: hidden; border-bottom: 1px solid var(--line-2); }
.mapthumb iframe { width: 100%; height: 160%; border: 0; pointer-events: none; margin-top: -20%; }
.mapthumb.empty { display: grid; place-items: center; color: var(--faint); }
.map { width: 100%; height: 260px; border: 1px solid var(--line); border-radius: 12px; }
.map.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--faint); background: var(--panel-2); }
.hit { display: flex; gap: 8px; align-items: flex-start; text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; }
.hit:hover { border-color: var(--brand); background: var(--brand-50); }
input[type=range] { accent-color: var(--brand); width: 100%; }
.toggle { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.toggle input { display: none; }
.toggle > span { width: 38px; height: 22px; border-radius: 999px; background: var(--line); position: relative; flex-shrink: 0; transition: .15s; margin-top: 1px; }
.toggle > span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: .15s; }
.toggle input:checked + span { background: var(--brand); } .toggle input:checked + span::after { left: 19px; }

/* Einsatzplan */
.planwrap { overflow: auto; }
.plan { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 900px; }
.plan th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); font-weight: 650; padding: 10px 8px; border-bottom: 1px solid var(--line); background: var(--panel-2); text-align: left; position: sticky; top: 0; }
.plan th.today { color: var(--brand); }
.plan td { padding: 6px; border-bottom: 1px solid var(--line-2); border-left: 1px solid var(--line-2); vertical-align: top; }
.plan td:first-child { border-left: 0; padding: 8px 12px; min-width: 190px; }
.plan td.pe { cursor: pointer; } .plan td.pe:hover { background: var(--panel-2); }
.pcell { min-height: 54px; border-radius: 8px; padding: 6px 8px; display: flex; flex-direction: column; font-size: 11.5px; background: color-mix(in srgb, var(--c) 12%, transparent); border-left: 3px solid var(--c); min-width: 0; max-width: 150px; }
.pcell b { font-size: 12px; } .pcell span { color: var(--text-2); }
.pcell.empty { background: none; border: 1px dashed var(--line); align-items: center; justify-content: center; color: var(--faint); font-size: 16px; opacity: 0; }
.plan td.pe:hover .pcell.empty { opacity: 1; }
.plan td.pe .pcell.shift:hover { background: color-mix(in srgb, var(--c) 22%, transparent); }
.pcell.abs { flex-direction: row; gap: 6px; align-items: center; color: color-mix(in srgb, var(--c) 85%, var(--text)); font-weight: 650; min-height: 34px; margin-bottom: 4px; }
.pcell.abs:only-child { min-height: 54px; margin-bottom: 0; }
.pcell.abs small { display: block; font-weight: 500; font-size: 10.5px; opacity: .8; }
.pcell.abs.pend { background: transparent; border: 1px dashed color-mix(in srgb, var(--c) 60%, transparent); border-left: 3px dashed var(--c); }
.planfilter { margin: 0 0 12px; gap: 6px; }
.planabs { margin-bottom: 12px; }
.absgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; padding: 4px 16px 16px; }
.absitem { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); }
.tag.abs { background: color-mix(in srgb, var(--c) 16%, transparent); color: color-mix(in srgb, var(--c) 85%, var(--text)); }
.tag.abs.pend { background: transparent; border: 1px dashed color-mix(in srgb, var(--c) 60%, transparent); }
.shiftpick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shiftpick .type .ic { width: 12px; height: 12px; margin-top: 4px; }

/* Export */
.step { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; margin-right: 9px; }
.pickl { max-height: 360px; overflow: auto; border-top: 1px solid var(--line-2); }
.pick { display: flex; align-items: center; gap: 10px; padding: 8px 18px; cursor: pointer; border-bottom: 1px solid var(--line-2); }
.pick:hover { background: var(--panel-2); } .pick.on { background: var(--brand-50); }
.pick input { width: 16px; height: 16px; accent-color: var(--brand); }
label.chip { display: inline-flex; align-items: center; cursor: pointer; }
.fmtgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tablewrap { overflow: auto; }
.table.compact td, .table.compact th { padding: 8px 10px; }
.table .r { text-align: right; }
.table tr.totals td { font-weight: 700; background: var(--panel-2); border-top: 1px solid var(--line); }
.warnc { color: var(--warn); font-weight: 600; }
.filepeek { margin: 0; padding: 12px 14px; background: #0F172A; color: #CBD5E1; border-radius: 10px; font: 11.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; overflow: auto; max-height: 260px; white-space: pre; }

/* Einstellungen */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; }
.tabs button { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button.on { color: var(--brand); border-bottom-color: var(--brand); }
.presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.preset { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 10px; font-weight: 600; font-size: 12.5px; text-align: left; }
.preset span { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; }
.preset.on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
input[type=color] { width: 44px; height: 38px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); padding: 3px; cursor: pointer; flex-shrink: 0; }
.logobox { width: 96px; height: 96px; border-radius: 16px; border: 1px solid var(--line); display: grid; place-items: center; background: #fff; color: var(--faint); flex-shrink: 0; overflow: hidden; }
.logobox img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.sticky { position: sticky; top: 80px; }
.pv-login { border-radius: 12px; padding: 18px; color: #fff; background: linear-gradient(150deg, var(--brand), var(--brand-g, var(--brand-d))); }
.pv-app { display: grid; grid-template-columns: 130px 1fr; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pv-rail { border-right: 1px solid var(--line); padding: 10px 8px; display: flex; flex-direction: column; gap: 4px; background: var(--panel); }
.pv-rail .mark { width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(140deg, var(--brand), var(--brand-g, var(--brand-d))); display: grid; place-items: center; color: #fff; }
.pv-main { padding: 14px; background: var(--bg); }
.modgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-flow: row dense; gap: 12px; }
.svccat { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1.5px dashed color-mix(in srgb, var(--brand) 40%, var(--line)); border-radius: 14px; }
.modcard { border: 1.5px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: .12s; }
.modcard.on { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); background: var(--brand-50); }
.modcard.locked { cursor: default; } .modcard.locked .switch i { opacity: .55; }
.switch input { display: none; }
.switch i { display: block; width: 38px; height: 22px; border-radius: 999px; background: var(--line); position: relative; transition: .15s; }
.switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: .15s; }
.switch input:checked + i { background: var(--brand); } .switch input:checked + i::after { left: 19px; }
.chip.removable { display: inline-flex; align-items: center; gap: 6px; padding-right: 6px; }
.chip.removable button { color: inherit; opacity: .75; display: grid; } .chip.removable button:hover { opacity: 1; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stepcard { display: flex; gap: 10px; align-items: flex-start; }
@media (max-width: 1180px) { .steps, .fmtgrid { grid-template-columns: 1fr 1fr; } .signin { grid-template-columns: 1fr; } .pinside { border-left: 0; border-top: 1px solid var(--line-2); } }
@media (max-width: 860px) { .steps, .fmtgrid, .shiftpick { grid-template-columns: 1fr; } .grouphead { top: 56px; } .empcards { grid-template-columns: 1fr; } }
/* Daten: Knöpfe nebeneinander, auf dem Handy jeder in voller Breite */
.datagrid .row.wrap .btn { flex: 1 1 220px; }
@media (max-width: 860px) { .datagrid .row.wrap .btn { flex-basis: 100%; } }
@media (max-width: 860px) {
  .login { grid-template-columns: minmax(0, 1fr); } .login .brandside h1 { font-size: 26px; }
  .signin .who, .pinside { padding: 20px; } .statgrid { grid-template-columns: 1fr 1fr 1fr; }
  .login .formside .panel-h { flex-wrap: wrap; } .login .formside .search { width: 100% !important; }
  .login details .grid { grid-template-columns: 1fr !important; }
}
/* v10: Sidebar bleibt beim Scrollen stehen; Anmeldefeld */
.rail { align-self: start; height: 100vh; position: sticky; top: 0; }
.input.pinfield { font-size: 20px; letter-spacing: .2em; text-align: center; }
.input.pinfield::placeholder { letter-spacing: .3em; }
.input.shake { animation: shake .35s; border-color: var(--err); }
@media (max-width: 860px) {
  .main .grid[style*="grid-template-columns"], .dialog .grid[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .main { overflow-x: hidden; } .toolbar .seg { overflow-x: auto; max-width: 100%; }
}
/* v13: Eingabefelder neben Knöpfen nie zusammendrücken – lieber umbrechen */
.row:has(> input.input) { flex-wrap: wrap; }
.row > input.input { flex: 1 1 220px; min-width: 0; width: auto; }
.row > input.input + .btn { flex: 0 0 auto; }
.row:has(> input[type=color]) > input.input { flex: 1 1 110px; }
.mobilenav .nav { flex: 1 1 0; min-width: 0; padding: 6px 2px; }
.mobilenav .nav span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
/* v17: Raster-Spalten nie breiter als vorgesehen, Werte nicht umbrechen */
.grid > * { min-width: 0; }
.clockpanel { min-width: 0; grid-template-columns: minmax(0, 1.4fr) minmax(220px, 1fr); }
.clockpanel .left { min-width: 0; }
.actions { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)) !important; }
.timer { font-size: clamp(40px, 4.4vw, 58px); }
.kv span:last-child { text-align: right; }   /* Zahlen (.num) bleiben in einer Zeile, Texte wie Gruppe oder E-Mail dürfen umbrechen */
.table.compact td, .table.compact th { white-space: nowrap; }
/* Anleitung mit Bildern */
.guide-role { display: flex; align-items: center; gap: 10px; font-size: 18px; margin: 26px 0 12px; }
.guide-role:first-of-type { margin-top: 4px; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
.guide-card { overflow: hidden; display: flex; flex-direction: column; }
.guide-img { display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--line-2); background: var(--panel-2); cursor: zoom-in; }
.guide-img img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform .25s; }
.guide-img:hover img { transform: scale(1.03); }
.guide-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--text-2); font-size: 13.5px; }
.actions .btn { min-width: 0; padding: 0 12px; }
.actions .btn .row { min-width: 0; white-space: nowrap; }
.clockpanel ~ * .table td.num, .panel .table td.num.bold { white-space: nowrap; }
.rail .logo .brandname { line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
/* Einsatzplan: Mehrfachauswahl */
.plan.editable td.pe { user-select: none; }
.plan td.psel { background: color-mix(in srgb, var(--brand) 16%, transparent) !important; box-shadow: inset 0 0 0 2px var(--brand); }
.plan td.psel .pcell.empty { opacity: 1; color: var(--brand); border-color: var(--brand); }
.plan th.colsel, .plan td.rowsel { cursor: pointer; }
.plan th.colsel:hover, .plan td.rowsel:hover { background: var(--brand-50); }
.planbar { position: sticky; top: 70px; z-index: 5; margin-bottom: 12px; border-radius: 12px; }
.pickbtn { display: flex; align-items: center; gap: 8px; cursor: pointer; text-align: left; }
.profilehead { padding: 22px 24px; background: linear-gradient(135deg, var(--brand-50), var(--panel) 60%); }
/* v22: Markenfarbe je Hell/Dunkel lesbar (Werte setzt applyBrand) */
:root { --brand: var(--bl, #0FA99B); --brand-d: var(--bld, #0B8578); --brand-50: var(--b50l, #E6F7F5); --logobg: var(--logobg-l, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --brand: var(--bd, #2EE6D4); --brand-d: var(--bdd, #6EF0E3); --brand-50: var(--b50d, rgba(46,230,212,.16)); --logobg: var(--logobg-d, transparent); } }
:root[data-theme="dark"] { --brand: var(--bd, #2EE6D4); --brand-d: var(--bdd, #6EF0E3); --brand-50: var(--b50d, rgba(46,230,212,.16)); --logobg: var(--logobg-d, transparent); }
:root { --on-brand: var(--onbl, #fff); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --on-brand: var(--onbd, #fff); } }
:root[data-theme="dark"] { --on-brand: var(--onbd, #fff); }
.btn.primary, .chip.on, .nav .count, .step, .cal .d.today .n { color: var(--on-brand); }
.btn.primary svg, .chip.on svg { stroke: currentColor; }
.draftbar { position: sticky; bottom: 16px; z-index: 6; padding: 14px 18px; border-color: var(--brand); box-shadow: var(--sh-lg); background: color-mix(in srgb, var(--brand) 8%, var(--panel)); }
.cpreset { padding: 4px 4px 4px 10px; }
.cpreset img { flex-shrink: 0; }
.dragfile { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border: 1.5px dashed var(--brand); border-radius: 11px; background: var(--brand-50); color: var(--brand-d); font-weight: 600; font-size: 13px; cursor: grab; user-select: none; max-width: 100%; }
.dragfile:active { cursor: grabbing; }
.dragfile span:not(.tiny) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dragfile { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border: 1.5px dashed var(--brand); border-radius: 11px; background: var(--brand-50); color: var(--brand-d); font-weight: 600; font-size: 13px; cursor: grab; user-select: none; max-width: 100%; }
.dragfile:active { cursor: grabbing; }
.dragfile span:not(.tiny) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.industrygrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.indcard { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--panel); }
.indcard:hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--line)); }
.indcard.on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.indcard .indic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); flex-shrink: 0; }
.actions .btn { justify-content: center !important; }

/* Logo-Vorschläge von der Website */
.bsgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.bsph { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; text-align: left; color: var(--muted); }
.bsph:hover { border-color: var(--brand); }
.bsph img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; background: var(--line); }
.logosug { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.logochoice { display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; }
.logochoice:hover { border-color: var(--brand); }
.logochoice.on { border: 2px solid var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.logochoice .lc-img { width: 100%; height: 64px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 8px; }
.logochoice .lc-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logochoice .tiny { display: inline-flex; gap: 4px; align-items: center; }
.logochoice.on .tiny { color: var(--brand); }

/* Einsatzplan – Monatsübersicht */
.mcal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 12px 16px 16px; }
.mcal .mh { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); font-weight: 650; text-align: center; }
.mday { min-height: 104px; border: 1px solid var(--line-2); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; background: var(--panel); min-width: 0; }
.mday:hover { border-color: var(--brand); }
.mday.empty { border: 0; background: none; cursor: default; }
.mday.wk { background: var(--panel-2); }
.mday.hol { background: color-mix(in srgb, var(--warn) 7%, var(--panel)); }
.mday.today { box-shadow: inset 0 0 0 2px var(--brand); }
.mabs { display: flex; gap: 4px; align-items: center; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, var(--c) 16%, transparent); color: color-mix(in srgb, var(--c) 85%, var(--text)); min-width: 0; }
.mabs.pend { background: transparent; border: 1px dashed color-mix(in srgb, var(--c) 60%, transparent); }
.mmore { font-size: 11px; font-weight: 700; color: var(--brand); text-align: left; padding: 2px 4px; border-radius: 6px; }
.mmore:hover { background: var(--brand-50); }
@media (max-width: 700px) { .mday { min-height: 72px; padding: 4px; } .mabs span { display: none; } .mcal { gap: 3px; padding: 8px; } }

/* Export: Spaltenauswahl */
.colpick { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: var(--panel); }
.colpick summary { display: flex; gap: 10px; align-items: center; cursor: pointer; list-style: none; }
.colpick summary::-webkit-details-marker { display: none; }
.colpick summary .ic, .colpick summary svg:last-child { margin-left: auto; transition: transform .2s; }
.colpick[open] summary svg:last-child { transform: rotate(90deg); }
.chip.fixed { opacity: .75; cursor: default; }

/* ================= Startseite (Landingpage) ================= */
body.lp-mode { background: var(--lp-bg); }
.lp { --lp-bg: #fbfbfd; --lp-fg: #1d1d1f; --lp-mut: #6e6e73; --lp-line: rgba(0,0,0,.08); --lp-card: #fff; --lp-soft: #f5f5f7; --lp-acc: #0FA99B; --lp-acc2: #1B2638; --lp-tq: #0FA99B; --lp-on-acc: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, Roboto, sans-serif; color: var(--lp-fg); background: var(--lp-bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* Startseite und Anmelde-Blatt folgen der gewählten Darstellung (data-theme) – sonst dem System */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp { --lp-bg: #000; --lp-fg: #f5f5f7; --lp-mut: #a1a1a6; --lp-line: rgba(255,255,255,.12); --lp-card: #161618; --lp-soft: #0f0f11; --lp-acc: #2EE6D4; --lp-acc2: #8FB4FF; --lp-tq: #2EE6D4; --lp-on-acc: #0B0E13; } }
:root[data-theme="dark"] .lp { --lp-bg: #000; --lp-fg: #f5f5f7; --lp-mut: #a1a1a6; --lp-line: rgba(255,255,255,.12); --lp-card: #161618; --lp-soft: #0f0f11; --lp-acc: #2EE6D4; --lp-acc2: #8FB4FF; --lp-tq: #2EE6D4; --lp-on-acc: #0B0E13; }
body.lp-mode { --lp-bg: #fbfbfd; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.lp-mode { --lp-bg: #000; } }
:root[data-theme="dark"] body.lp-mode { --lp-bg: #000; }
.lp-wrap { width: min(1160px, 100% - 40px); margin: 0 auto; }
.lp-narrow { width: min(760px, 100% - 40px); }
.lp .row { display: flex; align-items: center; } .lp .between { justify-content: space-between; } .lp .wrap { flex-wrap: wrap; }
.lp .muted2 { color: var(--lp-mut); }
.lp-nav { position: sticky; top: 0; z-index: 30; backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); background: color-mix(in srgb, var(--lp-bg) 72%, transparent); border-bottom: 1px solid var(--lp-line); }
.lp-nav .lp-wrap { height: 56px; }
.lp-brand { display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: 19px; color: var(--lp-fg); text-decoration: none; letter-spacing: -.01em; }
.lp-brand svg { width: 22px; height: 22px; color: var(--lp-acc); }
.lp-brand-ic { width: 28px; height: 28px; border-radius: 7px; }
.lp-wm { height: 26px; width: auto; display: block; } .lp-wm-d { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp-wm-l { display: none; } :root:not([data-theme="light"]) .lp-wm-d { display: block; } }
:root[data-theme="dark"] .lp-wm-l { display: none; } :root[data-theme="dark"] .lp-wm-d { display: block; }
.lp-links { display: flex; gap: 26px; } .lp-links a { color: var(--lp-mut); text-decoration: none; font-size: 14px; } .lp-links a:hover { color: var(--lp-fg); }
.lp-b { display: inline-flex; gap: 8px; align-items: center; justify-content: center; border: 0; border-radius: 980px; padding: 9px 18px; font: 600 14px/1 inherit; font-family: inherit; background: var(--lp-acc); color: var(--lp-on-acc, #fff); cursor: pointer; transition: transform .15s, opacity .15s, background .15s; white-space: nowrap; }
.lp-b:hover { opacity: .9; } .lp-b:active { transform: scale(.98); }
.lp-b.ghost { background: transparent; color: var(--lp-acc); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--lp-acc) 45%, transparent); }
.lp-b.lg { padding: 15px 26px; font-size: 16px; }
.lp-b svg { width: 16px; height: 16px; }
.lp-eyebrow { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--lp-acc); margin-bottom: 12px; }
.lp h1 { font-size: clamp(44px, 7vw, 84px); line-height: 1.02; letter-spacing: -.035em; font-weight: 800; margin: 0; }
.lp h2 { font-size: clamp(32px, 4.6vw, 56px); line-height: 1.06; letter-spacing: -.03em; font-weight: 750; margin: 0; }
.lp h3 { font-size: 21px; letter-spacing: -.015em; margin: 14px 0 6px; }
.lp p { margin: 0; }
.lp-lead { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.45; color: var(--lp-mut); max-width: 620px; margin-top: 18px !important; }
.lp-grad { background: linear-gradient(100deg, var(--lp-acc), var(--lp-acc2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-hero { position: relative; padding: clamp(48px, 8vw, 110px) 0 60px; overflow: hidden; }
.lp-hero::before { content: ''; position: absolute; inset: -30% -10% auto 30%; height: 900px; background: radial-gradient(closest-side, color-mix(in srgb, var(--lp-acc) 18%, transparent), transparent 70%); pointer-events: none; }
.lp-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; position: relative; }
.lp-trust { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 26px; color: var(--lp-mut); font-size: 14px; }
.lp-trust span { display: inline-flex; gap: 6px; align-items: center; } .lp-trust svg { color: var(--lp-tq); width: 16px; height: 16px; }
.lp-hero-visual { position: relative; display: grid; place-items: center; min-height: 600px; }
.lp-phone { width: 300px; height: 620px; border-radius: 52px; background: #0b0b0d; padding: 12px; box-shadow: 0 50px 100px -30px rgba(20,30,60,.45), 0 0 0 1px rgba(255,255,255,.06) inset; position: relative; transform: rotate(-3deg); }
.lp-notch { position: absolute; top: 22px; left: 50%; translate: -50% 0; width: 96px; height: 28px; background: #000; border-radius: 20px; z-index: 2; }
.lp-screen { height: 100%; border-radius: 41px; overflow: hidden; background: #f2f2f7; color: #1d1d1f; font-size: 12px; }
.lp-app-head { display: flex; justify-content: space-between; align-items: center; padding: 58px 18px 8px; background: linear-gradient(160deg, #2A3A55, #0F1724); color: #fff; }
.lp-app-logo { width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,.18); display: grid; place-items: center; } .lp-app-logo svg { width: 15px; height: 15px; }
.lp-app-chip { width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #1B2638; display: grid; place-items: center; font-weight: 700; font-size: 11px; }
.lp-app-hello { background: linear-gradient(160deg, #1B2638, #0F1724); color: #fff; padding: 6px 18px 46px; font-weight: 750; font-size: 19px; letter-spacing: -.01em; }
.lp-app-hello div { font-weight: 500; font-size: 12px; opacity: .8; margin-top: 2px; }
.lp-app-card { background: #fff; margin: 0 12px 10px; border-radius: 18px; padding: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.lp-app-card:first-of-type { margin-top: -34px; }
.lp-pill { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; font-size: 11px; padding: 4px 9px; border-radius: 99px; background: #E7F7EF; color: #0E7A4C; } .lp-pill i { width: 7px; height: 7px; border-radius: 50%; background: #10B981; }
.lp-mini { font-size: 10.5px; color: #8e8e93; }
.lp-time { font-size: 46px; font-weight: 800; text-align: center; letter-spacing: -.03em; margin: 12px 0 2px; font-variant-numeric: tabular-nums; } .lp-time small { font-size: 22px; color: #8e8e93; font-weight: 700; }
.lp-btn { flex: 1; display: inline-flex; gap: 6px; justify-content: center; align-items: center; padding: 11px; border-radius: 14px; font-weight: 700; font-size: 12px; } .lp-btn svg { width: 13px; height: 13px; }
.lp-btn.ghost { background: #E6F7F5; color: #1B2638; } .lp-btn.red { background: #E5484D; color: #fff; }
.lp-bar { position: relative; height: 12px; background: #f2f2f7; border-radius: 6px; margin: 10px 0 6px; } .lp-bar span { position: absolute; top: 0; bottom: 0; background: #1B2638; border-radius: 6px; } .lp-bar span.p { background: #F59E0B; }
.lp-float { position: absolute; display: flex; gap: 10px; align-items: center; background: color-mix(in srgb, var(--lp-card) 88%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--lp-line); border-radius: 18px; padding: 12px 14px; box-shadow: 0 18px 40px -16px rgba(20,20,60,.35); font-size: 13px; animation: lpFloat 6s ease-in-out infinite; }
.lp-float div div { color: var(--lp-mut); font-size: 12px; margin-top: 1px; }
.lp-float.a { left: -120px; top: 70px; } .lp-float.b { right: -110px; top: 525px; animation-delay: -2s; } .lp-float.c { left: -130px; bottom: 120px; animation-delay: -4s; }
@media (max-width: 1200px) { .lp-float.a { left: -40px; } .lp-float.b { right: -30px; } .lp-float.c { left: -40px; } }
@keyframes lpFloat { 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .lp-float { animation: none; } }
.lp-ic { width: 40px; height: 40px; border-radius: 12px; display: inline-grid; place-items: center; flex: none; } .lp-ic svg { width: 20px; height: 20px; }
.lp-ic.brand { background: color-mix(in srgb, var(--lp-acc) 14%, transparent); color: var(--lp-acc); } .lp-ic.ok { background: #E7F7EF; color: #0E7A4C; } .lp-ic.warn { background: #FFF4E5; color: #B45309; }
.lp-ic.lg { width: 52px; height: 52px; border-radius: 16px; } .lp-ic.lg svg { width: 26px; height: 26px; }
.lp-strip { border-block: 1px solid var(--lp-line); padding: 18px 0; } .lp-strip .lp-wrap { justify-content: center; gap: 12px 34px; color: var(--lp-mut); font-weight: 600; font-size: 15px; }
.lp-strip span { display: inline-flex; gap: 8px; align-items: center; } .lp-strip svg { width: 18px; height: 18px; }
.lp-sec { padding: clamp(70px, 10vw, 130px) 0; } .lp-sec.alt { background: var(--lp-soft); }
.lp-sec.dark { background: #141C2B; color: #f5f5f7; --lp-mut: #AEB7C6; --lp-line: rgba(255,255,255,.12); --lp-acc: #2EE6D4; --lp-on-acc: #0B0E13; }
.lp-head { text-align: center; margin-bottom: 54px; } .lp-head .lp-lead { margin-inline: auto; }
.lp-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lp-tile { background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: 28px; padding: 28px; transition: transform .25s, box-shadow .25s; }
.lp-tile:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -30px rgba(20,20,60,.35); }
.lp-tile p { color: var(--lp-mut); line-height: 1.5; font-size: 15px; }
.lp-tile.big { grid-column: span 3; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; padding: 36px; background: linear-gradient(135deg, color-mix(in srgb, var(--lp-acc) 9%, var(--lp-card)), var(--lp-card)); }
.lp-tile.big h3 { font-size: 30px; letter-spacing: -.02em; }
.lp-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: 22px; padding: 16px; }
.lp-cal span { aspect-ratio: 1; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 13px; font-weight: 600; }
.lp-cal span.h { aspect-ratio: auto; color: var(--lp-mut); font-size: 11px; } .lp-cal span.wk { color: var(--lp-mut); background: var(--lp-soft); }
.lp-cal span.sel { box-shadow: inset 0 0 0 2px var(--lp-acc); background: color-mix(in srgb, var(--lp-acc) 10%, transparent); }
.lp-cal em { display: flex; gap: 2px; height: 6px; } .lp-cal em i { width: 6px; height: 6px; border-radius: 50%; }
.lp-ai { background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: 22px; padding: 18px; display: grid; gap: 10px; font-size: 14.5px; line-height: 1.45; }
.lp-ai-h { display: flex; gap: 10px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--lp-line); } .lp-ai-h div div { color: var(--lp-mut); font-size: 12.5px; }
.lp-ai p { margin: 0; padding: 10px 14px; border-radius: 18px; max-width: 86%; } .lp-ai p.me { justify-self: end; background: var(--lp-acc); color: var(--lp-on-acc, #fff); border-bottom-right-radius: 6px; }
.lp-ai p.bot { background: var(--lp-soft); border-bottom-left-radius: 6px; }
.lp-ai-card { display: flex; gap: 12px; align-items: center; justify-content: space-between; border: 1px solid var(--lp-line); border-radius: 16px; padding: 12px 14px; } .lp-ai-card div div { color: var(--lp-mut); font-size: 13px; }
.lp-b.sm { padding: 8px 14px; font-size: 14px; pointer-events: none; }
.lp-two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.lp-side h2 { font-size: clamp(28px, 3.4vw, 42px); } .lp-side p { color: var(--lp-mut); font-size: 17px; line-height: 1.55; margin-top: 16px; }
.lp-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; } .lp-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; } .lp-list svg { color: var(--lp-tq); width: 18px; height: 18px; flex: none; margin-top: 2px; }
.lp-inds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lp-ind { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: 20px; padding: 18px; }
.lp-ind .lp-ic { grid-row: span 2; } .lp-ind span:last-child { color: var(--lp-mut); font-size: 14px; }
.lp-formats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } .lp-formats span { display: inline-flex; gap: 8px; align-items: center; border: 1px solid var(--lp-line); border-radius: 99px; padding: 8px 14px; font-size: 14px; } .lp-formats svg { width: 15px; height: 15px; color: var(--lp-acc); }
.lp-file { background: #141418; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; padding: 22px; box-shadow: 0 40px 80px -40px rgba(0,196,180,.35); }
.lp-file pre { margin: 14px 0 0; font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; color: #C9F2EE; white-space: pre-wrap; }
.lp-faq { border-bottom: 1px solid var(--lp-line); padding: 6px 0; }
.lp-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 19px; font-weight: 600; padding: 16px 0; }
.lp-faq summary::-webkit-details-marker { display: none; } .lp-faq summary svg { flex: none; transition: transform .2s; color: var(--lp-mut); } .lp-faq[open] summary svg { transform: rotate(45deg); }
.lp-faq p { color: var(--lp-mut); line-height: 1.6; padding-bottom: 18px; font-size: 16px; }
.lp-cta { text-align: center; padding: clamp(70px, 10vw, 120px) 0; background: radial-gradient(60% 80% at 50% 100%, color-mix(in srgb, var(--lp-acc) 16%, transparent), transparent); }
.lp-cta .lp-lead { margin-inline: auto; }
.lp-foot { border-top: 1px solid var(--lp-line); padding: 26px 0 40px; color: var(--lp-mut); font-size: 14px; } .lp-foot .lp-wrap { gap: 14px; } .lp-foot a { color: var(--lp-mut); text-decoration: none; } .lp-foot a:hover { color: var(--lp-fg); }
.lp-foot svg { width: 16px; height: 16px; color: var(--lp-acc); }
/* Anmelden / Firma anlegen als Blatt */
.lp-sheet-bg { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; padding: 20px; animation: lpFade .2s ease; overflow-y: auto; }
.lp-sheet { position: relative; width: min(440px, 100%); background: var(--lp-card); color: var(--lp-fg); border-radius: 28px; padding: 32px; box-shadow: 0 40px 100px -30px rgba(0,0,0,.5); animation: lpUp .3s cubic-bezier(.2,.8,.2,1); }
.lp-sheet.wide { width: min(640px, 100%); }
.lp-sheet h2 { font-size: 28px; margin: 14px 0 6px; } .lp-sheet .field label { font-weight: 600; }
.lp-sheet .input { background: var(--lp-soft); color: var(--lp-fg); border-color: var(--lp-line); }
.lp-x { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--lp-soft); color: var(--lp-mut); display: grid; place-items: center; cursor: pointer; }
.lp-hint { margin-top: 14px; font-size: 13.5px; color: var(--lp-mut); text-align: center; }
.lp-form { grid-template-columns: 1fr 1fr; gap: 14px; }
.lp-indpick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lp-indpick button { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--lp-line); background: var(--lp-card); color: var(--lp-fg); font: 600 13px/1.2 inherit; font-family: inherit; cursor: pointer; text-align: left; }
.lp-indpick button.on { border: 2px solid var(--lp-acc); background: color-mix(in srgb, var(--lp-acc) 10%, transparent); color: var(--lp-acc); }
.lp-indpick svg { width: 16px; height: 16px; flex: none; }
@keyframes lpFade { from { opacity: 0; } } @keyframes lpUp { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.lp-sheet-bg.again, .lp-sheet-bg.again .lp-sheet { animation: none; }
/* Firmenleiste auf der Anmeldeseite */
.tenantbar { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); margin-bottom: 14px; }
.tenantbar img { width: 36px; height: 36px; border-radius: 10px; object-fit: contain; padding: 2px; }
.tenantbar .tb-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); }
/* Startseite: Tablet & Handy */
@media (max-width: 980px) {
  .lp-hero-grid, .lp-two { grid-template-columns: 1fr; }
  .lp-hero-copy { text-align: center; } .lp-hero-copy .row, .lp-trust { justify-content: center; } .lp-hero-copy .lp-lead { margin-inline: auto; }
  .lp-hero-visual { min-height: 560px; } .lp-bento { grid-template-columns: 1fr 1fr; } .lp-tile.big { grid-column: span 2; grid-template-columns: 1fr; }
  .lp-inds { grid-template-columns: 1fr 1fr; } .lp-links { display: none; }
}
@media (max-width: 620px) {
  .lp-bento, .lp-inds, .lp-form { grid-template-columns: 1fr; } .lp-tile.big { grid-column: span 1; padding: 24px; } .lp-tile { border-radius: 22px; padding: 22px; }
  .lp-phone { width: 260px; height: 540px; border-radius: 46px; } .lp-float { font-size: 12px; padding: 10px 12px; } .lp-float.a { left: 0; top: 40px; } .lp-float.b { right: 0; top: 230px; } .lp-float.c { left: 4px; bottom: 30px; }
  .lp-nav .lp-b { padding: 9px 13px; font-size: 13px; } .lp-float.b { display: none; } .lp-float.a { top: 10px; } .lp-sheet { padding: 24px; border-radius: 24px; } .lp-indpick { grid-template-columns: 1fr 1fr; }
  .lp-b.lg { width: 100%; }
}

/* ================= Responsive: Tablet & Handy ================= */
.head { flex-wrap: wrap; } .head > div:first-child { min-width: min(100%, 260px); flex: 1 1 260px; }
.head > .row, .head > div:last-child:not(:first-child) { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.seg { flex-wrap: wrap; max-width: 100%; }
.tabs { scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; }
@media (max-width: 1100px) { .main { padding-inline: 20px; } .cfgbtn span { display: none; } }
@media (max-width: 860px) {
  .head { align-items: flex-start; } .head > .row, .head > div:last-child:not(:first-child) { justify-content: flex-start; width: 100%; }
  .main .row:not(.nowrap):not(.between) { flex-wrap: wrap; }
  .main table.table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .main table.table th, .main table.table td { white-space: nowrap; }
  .types { grid-template-columns: 1fr 1fr; } .seg { width: 100%; } .seg button { flex: 1 1 auto; }
  .exportgrid > * { grid-column: span 12 !important; }
  .dialog .row:not(.nowrap):not(.between) { flex-wrap: wrap; }
}
@media (max-width: 480px) { .head h1 { font-size: 21px; } .btn.lg { padding-inline: 14px; } }
@media (max-width: 480px) { .types .type { padding: 10px; gap: 8px; } .types .type .tiny, .types .type .muted { display: none; } }
@media (max-width: 860px) { .head .btn { height: 34px; padding: 0 12px; font-size: 13px; } .head .btn.primary { order: -1; } .head .sub { font-size: 13px; } }

.lp-webimport { margin-top: 16px; padding: 14px; border-radius: 16px; background: var(--lp-soft); border: 1px solid var(--lp-line); }
.lp-webimport .input { background: var(--lp-card); }
.lp-brandprev { display: flex; gap: 10px; align-items: center; margin-top: 12px; padding: 10px; border-radius: 12px; background: var(--lp-card); border: 1px solid var(--lp-line); }
.lp-logoprev { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; padding: 4px; flex: none; } .lp-logoprev img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lp-swatch { width: 20px; height: 20px; border-radius: 6px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
/* Farben in Demo/Registrieren: Feld antippen öffnet den Farbwähler */
.lp-cols { display: flex; align-items: center; gap: 6px; } label.lp-swatch { position: relative; width: 26px; height: 26px; cursor: pointer; }
label.lp-swatch:hover { box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 0 0 2px var(--lp-acc); }
label.lp-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.lp-upl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 12px; } .lp-upl label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
/* Feinschliff: Symbol-Abstand in Chips, Status ohne Umbruch */
.chip { display: inline-flex; align-items: center; gap: 6px; }
.status-pill { white-space: nowrap; }
.planfilter > .small { display: inline-flex; align-items: center; gap: 6px; }
.panel-h h3 { display: inline-flex; align-items: center; gap: 8px; }
.field > label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Pfeil oben links: zurück zur Startseite */
.backhome { position: fixed; top: 16px; left: 16px; z-index: 40; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 10px; border-radius: 999px;
  background: rgba(255,255,255,.18); color: #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.28); font-weight: 600; font-size: 14px; cursor: pointer; transition: background .15s, transform .15s; }
.backhome:hover { background: rgba(255,255,255,.28); } .backhome:active { transform: scale(.97); } .backhome svg { width: 20px; height: 20px; }
.login .brandside { padding-top: 76px; }
@media (max-width: 860px) { .backhome { top: 12px; left: 12px; height: 36px; } .backhome span { display: none; } .backhome { padding: 0 8px; } .login .brandside { padding-top: 64px; } }

/* ================= Anleitung ================= */
.ghero { padding: 18px; margin-bottom: 18px; background: linear-gradient(135deg, var(--brand-50), var(--panel)); }
.gsearch { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 0 14px; height: 52px; box-shadow: var(--sh); }
.gsearch svg { color: var(--muted); flex: none; } .gsearch input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--text); min-width: 0; }
.gtop { gap: 6px; margin-top: 12px; }
.glayout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 18px; align-items: start; }
.gtoc { position: sticky; top: 76px; padding: 10px; max-height: calc(100vh - 100px); overflow-y: auto; }
.gtoc-h { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); padding: 10px 8px 4px; }
.gtoc-i { display: block; width: 100%; text-align: left; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; color: var(--text-2); }
.gtoc-i:hover { background: var(--panel-2); color: var(--text); } .gtoc-i.dim { opacity: .4; }
.gmain .guide-role { margin-top: 22px; } .gmain .guide-role:first-child { margin-top: 0; }
.gcard { margin-bottom: 14px; overflow: hidden; scroll-margin-top: 80px; transition: box-shadow .3s; }
.gcard.flash { box-shadow: 0 0 0 3px var(--brand); }
.gcard-h { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
.gcard-h h3 { font-size: 16px; } .gic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); flex: none; }
.gcard-b { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; padding: 14px 16px; align-items: start; }
.gcard-b:not(:has(.guide-img)) { grid-template-columns: 1fr; }
.gcard-b .guide-img { border-radius: 10px; border: 1px solid var(--line-2); }
.gsteps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 10px; }
.gsteps li { counter-increment: s; display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.gsteps li::before { content: counter(s); width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: var(--on-brand, #fff); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.gmain mark { background: color-mix(in srgb, var(--warn) 30%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }
@media (max-width: 1100px) { .gcard-b { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .glayout { grid-template-columns: 1fr; } .gtoc { display: none; } }

.lp-pick { margin-top: 12px; } .lp-picks { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.lp-pickl { width: 110px; height: 58px; border-radius: 12px; border: 1px solid var(--lp-line); padding: 8px; display: grid; place-items: center; cursor: pointer; }
.lp-pickl { overflow: hidden; } .lp-pickl img { max-width: 94px; max-height: 42px; width: auto; height: auto; object-fit: contain; }
.lp-picki { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer; color: var(--lp-mut); font: 600 11px/1.2 inherit; font-family: inherit; }
.lp-picki img { width: 52px; height: 52px; border-radius: 12px; box-shadow: 0 0 0 1px var(--lp-line); }
.lp-pickl.on { box-shadow: 0 0 0 3px var(--lp-acc); } .lp-picki.on img { box-shadow: 0 0 0 3px var(--lp-acc); } .lp-picki.on { color: var(--lp-acc); }

.iconsug { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.iconchoice { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; }
.iconchoice img { width: 56px; height: 56px; border-radius: 13px; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.iconchoice.on { border: 2px solid var(--brand); box-shadow: 0 0 0 3px var(--brand-50); } .iconchoice.on .tiny { color: var(--brand); font-weight: 700; }
.iconchoice .tiny { display: inline-flex; gap: 4px; align-items: center; text-align: center; }
.iconchoice.up .up-ic { width: 56px; height: 56px; border-radius: 13px; display: grid; place-items: center; border: 1.5px dashed var(--line); color: var(--muted); }

/* Kalender: nichts ragt über den Tag hinaus – Einträge brechen um statt zu überstehen */
.ev { white-space: normal; overflow-wrap: anywhere; min-width: 0; max-width: 100%; line-height: 1.25; align-items: flex-start; }
.ev svg { flex: none; margin-top: 1px; }
.cal .d { overflow: hidden; }
@media (max-width: 860px) { .cal { grid-template-columns: 28px repeat(7, minmax(0, 1fr)); } .ev { padding: 2px 4px; font-size: 10.5px; } }

/* Startseite: Nachbau der App (Zeito-Standard #1B2638 → #0F1724) */
.lp-screen { position: relative; background: #f2f2f7; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; }
.lpa-top { background: linear-gradient(135deg, #1B2638, #0F1724); color: #fff; padding: 14px 16px 54px; }
.lpa-status { display: flex; justify-content: space-between; align-items: center; padding: 0 10px 0 14px; font-size: 13px; height: 22px; } .lpa-status svg { width: 11px; height: 11px; }
.lpa-head { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.lpa-brand { display: flex; gap: 7px; align-items: center; font-size: 17px; } .lpa-logo { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #fff; color: #1B2638; } .lpa-logo svg { width: 17px; height: 17px; }
.lpa-cap { display: flex; align-items: center; gap: 6px; background: #fff; color: #1B2638; border-radius: 999px; padding: 3px 8px 3px 3px; }
.lpa-cap div { display: flex; flex-direction: column; line-height: 1.05; } .lpa-cap b { font-size: 11px; } .lpa-cap div span { font-size: 9px; color: #8e8e93; } .lpa-cap svg { width: 10px; height: 10px; transform: rotate(90deg); color: #8e8e93; }
.lpa-av { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #10B981, #059669); color: #fff; font-size: 9px; font-weight: 700; display: grid; place-items: center; }
.lpa-hello { margin-top: 14px; font-size: 19px; font-weight: 750; letter-spacing: -.01em; } .lpa-hello span { display: block; font-size: 12px; font-weight: 500; opacity: .8; margin-top: 2px; }
.lpa-card { background: #fff; margin: 0 12px 10px; border-radius: 20px; padding: 14px; box-shadow: 0 6px 18px rgba(20,24,60,.08); color: #1d1d1f; }
.lpa-card:first-of-type { margin-top: -40px; position: relative; }
.lpa-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.lpa-on { display: inline-flex; align-items: center; gap: 6px; color: #0E7A4C; font-weight: 700; font-size: 13px; } .lpa-on i { width: 8px; height: 8px; border-radius: 50%; background: #16A34A; }
.lpa-mut { color: #8e8e93; }
.lpa-time { font: 800 40px/1 ui-rounded, "SF Pro Rounded", -apple-system, sans-serif; text-align: center; margin: 14px 0 12px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lpa-place { display: flex; gap: 7px; align-items: center; background: #f2f2f7; border-radius: 12px; padding: 8px 10px; font-size: 11.5px; } .lpa-place svg { width: 13px; height: 13px; color: #1B2638; }
.lpa-pause { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 10px; background: #f2f2f7; color: #1B2638; border-radius: 13px; padding: 11px; font-weight: 700; font-size: 13px; } .lpa-pause svg { width: 13px; height: 13px; }
.lpa-slide { position: relative; margin-top: 10px; height: 46px; padding-left: 40px; border-radius: 999px; background: linear-gradient(90deg, #C93A3F, #E5484D); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.lpa-slide em { font-style: normal; margin-left: 6px; opacity: .8; }
.lpa-knob { position: absolute; left: 4px; top: 4px; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #E5484D; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.2); } .lpa-knob svg { width: 14px; height: 14px; }
.lpa-bar { position: relative; height: 12px; background: #f2f2f7; border-radius: 6px; margin: 10px 0 6px; } .lpa-bar span { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: linear-gradient(90deg, #1B2638, #16A34A); } .lpa-bar i { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #E5484D; }
.lpa-ticks { font-size: 9.5px; }
.lpa-chat { position: absolute; left: 14px; bottom: 16px; width: 44px; height: 44px; border-radius: 50%; background: #1B2638; color: #fff; display: grid; place-items: center; box-shadow: 0 6px 14px rgba(27,38,56,.35); } .lpa-chat svg { width: 20px; height: 20px; }
.lpa-batt { width: 20px; height: 10px; border: 1.5px solid rgba(255,255,255,.9); border-radius: 3px; padding: 1px; display: inline-flex; } .lpa-batt i { flex: 1; background: #fff; border-radius: 1px; }

.lp-screen.shot { background: #000; } .lp-screen.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.lp-phone { width: 300px; height: 652px; } @media (max-width: 620px) { .lp-phone { width: 260px; height: 565px; } }
.lp-float { padding: 12px 16px; border-radius: 20px; box-shadow: 0 24px 50px -20px rgba(20,24,70,.35), 0 2px 6px rgba(0,0,0,.04); }
.lp-float b { font-size: 13.5px; }

.lp-guess { margin-top: 8px; width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1.5px solid color-mix(in srgb, var(--lp-acc) 35%, transparent); background: color-mix(in srgb, var(--lp-acc) 7%, var(--lp-card)); color: var(--lp-fg); cursor: pointer; text-align: left; font: inherit; }
.lp-guess b { display: block; font-size: 14px; } .lp-guess .grow span { display: block; font-size: 12px; color: var(--lp-mut); }
.lp-guess-ic { font-size: 18px; } .lp-guess-go { background: var(--lp-acc); color: #fff; font-weight: 700; font-size: 12px; padding: 6px 12px; border-radius: 99px; white-space: nowrap; }
.lp-guess.on { border-color: #10B981; background: color-mix(in srgb, #10B981 9%, var(--lp-card)); } .lp-guess.on .lp-guess-ic { color: #10B981; }

.lp-mods { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-mod { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--lp-line); background: var(--lp-card); color: var(--lp-fg); font: 600 13px/1.2 inherit; font-family: inherit; cursor: pointer; }
.lp-mod-check { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--lp-line); display: grid; place-items: center; font-size: 11px; }
.lp-mod.on { border-color: var(--lp-acc); background: color-mix(in srgb, var(--lp-acc) 9%, var(--lp-card)); } .lp-mod.on .lp-mod-check { background: var(--lp-acc); border-color: var(--lp-acc); color: #fff; }
.lp-billing { grid-column: 1/-1; display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--lp-mut); background: var(--lp-soft); border-radius: 12px; padding: 10px 12px; } .lp-billing svg { flex: none; margin-top: 2px; color: var(--lp-acc); }
.lp-slugrow { display: flex; align-items: center; gap: 0; } .lp-slugrow .input { border-top-right-radius: 0; border-bottom-right-radius: 0; flex: 1; } .lp-slugrow span { padding: 0 12px; height: 40px; display: grid; place-items: center; background: var(--lp-soft); border: 1px solid var(--lp-line); border-left: 0; border-radius: 0 10px 10px 0; color: var(--lp-mut); font-weight: 600; }

.entrycard{display:flex;flex-direction:column;gap:4px;padding:8px 10px;margin:0 -10px;border-radius:10px;cursor:pointer}
.entrycard:hover,.entrycard:focus-visible{background:var(--hover, rgba(0,0,0,.04));outline:none}
.cal .ev.over{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn);font-weight:600}

/* Excel-Vorschau: sieht aus wie die Datei */
.xpv table td{white-space:nowrap}
.xpv td.header{background:var(--brand);color:#fff;font-weight:700}
.xpv td.decimal,.xpv td.integer,.xpv td.sumDecimal,.xpv td.sumInteger{text-align:right;font-variant-numeric:tabular-nums}
.xpv td.sumLabel,.xpv td.sumDecimal,.xpv td.sumInteger,.xpv td.sumEmpty{background:var(--panel-2);font-weight:700}
.xpv td.warnText{color:var(--warn)}
.pcell.pend{opacity:.75;border-style:dashed}

/* Entwurfsleiste immer ans Ende – sonst schiebt sie die Vorschau-Spalte nach unten */
.g-12 > .draftbar { order: 99; }

/* Logo: groß + klein, jeweils hell/dunkel nebeneinander */
.logopair { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 640px) { .logopair { grid-template-columns: 1fr; } }
.logoduo { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0; }
.logoduo .ld-surf { border-radius: 10px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; padding: 10px; min-height: 76px; }
.logoduo .ld-img { display: flex; align-items: center; justify-content: center; border-radius: 8px; padding: 6px; max-width: 100%; }
.logoduo .ld-img img { display: block; max-width: 100%; object-fit: contain; }
.logoduo.wide .ld-img img { max-height: 46px; }
.logoduo.square .ld-img { width: 52px; height: 52px; }
.logoduo.square .ld-img img { max-height: 100%; }
.logoduo.small .ld-surf { min-height: 56px; padding: 6px; }
.logoduo.small .ld-img img { max-height: 30px; }
.logochoice { width: 100%; }
.logosug:not(.iconsug) { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.rail .logo.wordmark .brandname { display: none; }
.rail .logo.wordmark .grow { display: none; }

/* Logo-Größe mit Vorschau */
.logosize { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.logosize input[type=range] { width: 100%; accent-color: var(--brand); }
.lsz-prev { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 4px; }
@media (max-width: 640px) { .lsz-prev { grid-template-columns: 1fr; } }
.lsz-rail { margin-top: 6px; padding: 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); min-height: 70px; display: flex; align-items: center; }
.lsz-rail .logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lsz-rail .logo.wordmark .grow { display: none; }
.lsz-rail .brandname { font-weight: 700; }
.lsz-login { margin-top: 6px; padding: 16px; border-radius: 12px; color: #fff; display: flex; align-items: center; gap: 12px; min-height: 70px; }

/* Demo-Leiste und „Dabei ist“-Liste im Anfrage-Formular */
.demobar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 14px; border-radius: 12px; font-size: 13.5px; color: var(--text); background: color-mix(in srgb, var(--warn) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }
.demobar > .grow { min-width: 220px; }
.demobar .i { color: var(--warn); flex: none; }
.lp-incl { margin-top: 10px; display: grid; gap: 4px; }
.lp-inc summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; font-size: 14px; list-style: none; padding: 6px 0; }
.lp-inc summary::-webkit-details-marker { display: none; }
.lp-inc summary > span { flex: 1; }
.lp-inc summary .i:first-child { color: var(--ok); }
.lp-inc summary .i:last-child { color: var(--muted); transition: transform .15s; }
.lp-inc[open] summary .i:last-child { transform: rotate(45deg); }
.lp-inc p { margin: 0 0 8px 26px; font-size: 13px; color: var(--text-2); line-height: 1.45; }

/* ================= v72: Handy & Tablet – alle Kernwege mit dem Daumen bedienbar ================= */
html { -webkit-text-size-adjust: 100%; }
/* Berührung: Ziele mindestens 44 px, Eingabefelder 16 px (sonst zoomt iOS beim Tippen hinein) */
@media (max-width: 860px), (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn.sm { min-height: 42px; }
  .btn.lg { min-height: 50px; }
  .search { min-height: 44px; min-width: 44px; }
  .cfgbtn { min-width: 44px; }
  .chip, .seg button, .tabs button, .preset, .lp-mod { min-height: 42px; }
  .tabs button { padding-block: 12px; }
  .input, select.input { min-height: 46px; font-size: 16px; }
  textarea.input, .search input, .gsearch input, .palette input, .composer textarea, .lp-sheet .input { font-size: 16px; }
  .lp-sheet .input { height: 48px; }
  .linkbtn { display: inline-flex; align-items: center; min-height: 44px; }
  .nav { min-height: 44px; }
  .person, .citem, .pick, .hit, .indcard, .type { min-height: 52px; }
  .keypad button { height: 56px; }
  .pick input, .table input[type=checkbox] { width: 20px; height: 20px; }
  .lp-b { min-height: 44px; }
  .lp-b.lg { min-height: 52px; }
  .lp-x { width: 40px; height: 40px; }
  .lp-indpick button, .lp-guess { min-height: 48px; }
  .lp-faq summary { min-height: 56px; }
  .lp-links a { padding: 10px 0; }
  .lp-foot a { display: inline-block; padding: 10px 0; }
  .entrycard { min-height: 44px; }
  .mmore { min-height: 32px; }
}
/* Ohne Maus gibt es kein „Darüberfahren“: leere Planfelder zeigen das Plus immer */
@media (hover: none) { .pcell.empty { opacity: .55; } }

@media (max-width: 860px) {
  /* Rahmen mit Safe-Area (Notch, Home-Balken) */
  .app { grid-template-rows: auto 1fr; }
  .topbar { height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); gap: 10px; }
  .main { padding: 14px max(14px, env(safe-area-inset-right)) calc(92px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  .mobilenav { padding-left: max(4px, env(safe-area-inset-left)); padding-right: max(4px, env(safe-area-inset-right)); }
  .mobilenav .nav { min-height: 52px; font-size: 11px; }
  #toast { bottom: calc(78px + env(safe-area-inset-bottom)); max-width: calc(100% - 32px); text-align: center; }
  #chatnote { top: calc(64px + env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); width: auto; }
  .grouphead { top: calc(56px + env(safe-area-inset-top)); }
  .planbar { top: calc(64px + env(safe-area-inset-top)); }
  .sticky { position: static; }
  .backhome { top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); }

  /* Kopfzeile: Knöpfe füllen die Zeile, Hauptaktion zuerst */
  .head > .row .btn, .head > div:last-child:not(:first-child) .btn { flex: 1 1 auto; height: auto; }
  .head .cfgbtn { flex: 0 0 auto; }

  /* Stempeln: eine Spalte, große Uhr, bequeme Wisch-Leiste */
  .clockpanel { grid-template-columns: minmax(0, 1fr); }
  .clockpanel .left { padding: 20px 16px; border-right: 0; }
  .clockpanel .right { padding: 16px; border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .timer { font-size: clamp(44px, 14vw, 58px); }
  .only-mobile .btn { height: 48px; font-size: 15px; }
  .slide { height: 64px; } .slide .knob { width: 56px; height: 56px; }

  /* Demo-Leiste: Text oben, Knöpfe darunter nebeneinander */
  .demobar { padding: 10px 12px; font-size: 13px; gap: 8px; }
  .demobar > .grow { min-width: 0; flex-basis: calc(100% - 32px); }
  .demobar .btn { flex: 1 1 auto; }

  /* Kasten-Kopfzeilen und Werkzeugleisten brechen um statt zu quetschen */
  .panel-h { flex-wrap: wrap; padding: 12px 14px; }
  .panel-h .seg { width: 100%; }
  .panel-h .search { flex: 1 1 200px; width: auto !important; }
  .panel-b { padding: 14px; }
  .toolbar { padding: 12px 14px; gap: 10px; }
  .toolbar .search.big { width: 100%; }
  .toolbar .search:not(.big) { flex: 1 1 100%; width: auto !important; }
  .groupblock { padding: 6px 14px 14px; }
  .kpi { padding: 14px; }
  .tenantbar { flex-wrap: wrap; }

  /* Mitarbeiter-Karten: Schilder rutschen in eine eigene Zeile */
  .empcard .row.between { flex-wrap: wrap; gap: 4px 8px; }
  .empcard .row.between > .row { flex-wrap: wrap; }
  .empcard .row.tiny { flex-wrap: wrap; } .empcard .row.tiny .grow { min-width: 45%; }

  /* Tabellen: seitlich wischen; im Einsatzplan bleibt die Personenspalte stehen */
  .tablewrap, .planwrap, .pickl, .main table.table { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .plan { min-width: 780px; }
  .plan td:first-child, .plan th:first-child { position: sticky; left: 0; z-index: 2; background: var(--panel); min-width: 140px; box-shadow: 1px 0 0 var(--line-2); }
  .plan th:first-child { z-index: 3; background: var(--panel-2); }
  .plan td.rowsel { background: var(--panel); }

  /* Dialoge: Blatt von unten, volle Breite; Inhalt scrollt, Kopf und Fuß bleiben sichtbar */
  .overlay { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: max(24px, env(safe-area-inset-top)) 0 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .dialog, .dialog.sm, .dialog.wide { width: 100%; max-height: none; overflow: visible; margin-top: auto; border-radius: 20px 20px 0 0; }
  .dialog-h { padding: 14px 16px; border-radius: 20px 20px 0 0; }
  .dialog-h h2 { font-size: 18px; }
  .dialog-b { padding: 16px; gap: 14px; }
  .dialog-f { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); flex-wrap: wrap; gap: 8px; }
  .dialog-f .btn { flex: 1 1 auto; }
  .dialog-f > :not(.btn):not(.row) { flex: 1 1 100%; }
  .dialog.palette { margin: 0 0 auto; border-radius: 0 0 20px 20px; }
  .palette .res { max-height: 55vh; }
  .types { grid-template-columns: 1fr; }
  .types .type .tiny, .types .type .muted { display: block; }

  /* Chat: Verlauf scrollt in sich, die Eingabezeile bleibt über der Leiste sichtbar */
  .chat { overflow: visible; }
  .chat .msgs { max-height: 58vh; max-height: 58dvh; min-height: 220px; padding: 14px; }
  .composer { padding: 10px 12px; position: sticky; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 3; border-radius: 0 0 var(--r-lg) var(--r-lg); }

  /* Einstellungen: Reiter bis zum Rand wischbar */
  .tabs { margin: 0 -14px 16px; padding: 0 14px; gap: 0; }
  .tabs button { padding-inline: 12px; }

  /* Anmeldung */
  .login { min-height: 100vh; min-height: 100dvh; }
  .login .formside { padding: 18px 14px calc(24px + env(safe-area-inset-bottom)); gap: 16px; }
  .signin .who, .pinside { padding: 18px 16px; }
  .statgrid { gap: 6px; } .statgrid > div { padding: 8px; }
  .people { grid-template-columns: 1fr; }

  /* Startseite: Blätter (Demo, Anmelden, Unternehmen anlegen) von unten, volle Breite, scrollbar */
  .lp-nav .lp-wrap { height: calc(56px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  .lp-sheet-bg { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: max(32px, env(safe-area-inset-top)) 0 0; }
  .lp-sheet, .lp-sheet.wide { width: 100%; margin-top: auto; border-radius: 24px 24px 0 0; padding: 24px 18px calc(24px + env(safe-area-inset-bottom)); }
  .lp-sheet h2 { font-size: 24px; }
  .lp-x { top: 14px; right: 14px; }
  .lp-form .lp-b.lg, .lp-sheet > .lp-b.lg { width: 100%; }
}
@media (max-width: 620px) { .lp-wrap { width: min(1160px, 100% - 32px); } }
@media (prefers-reduced-motion: reduce) { .dialog, .lp-sheet, .overlay, .lp-sheet-bg { animation: none !important; } }

/* ---------- Cloud-Modus: Server-Anmeldung, Status, automatische Abmeldung, Rechte ---------- */
.lp-sheet .input.code { font-size: 30px; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; height: 60px; }
.cloudpill { cursor: pointer; }
#idlebanner { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: grid; place-items: center; padding: 20px; }
.idlebox { background: var(--panel); color: var(--text); border-radius: 20px; padding: 32px; max-width: 440px; width: 100%; text-align: center; display: grid; gap: 12px; justify-items: center; box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.idlebox h2 { font-size: 24px; line-height: 1.25; } .idlebox .idleic { width: 56px; height: 56px; border-radius: 16px; background: #FFF4E5; color: #B45309; display: grid; place-items: center; }
.idlebox .btn.lg { font-size: 18px; height: 56px; width: 100%; justify-content: center; margin-top: 6px; }
.permgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; } .permgrid .perm { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.bigkv { font-size: 16px; align-items: center; } .bigcode { font-size: 26px; letter-spacing: .08em; }
@media (max-width: 600px) { .permgrid { grid-template-columns: 1fr; } }

/* Registrieren: Pflicht-Etikett, freiwillige Gruppe, Kennung mit „.zeito“, Prüf-Hinweis, erkannte Branche */
.lp-req { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: var(--lp-acc); background: color-mix(in srgb, var(--lp-acc) 12%, transparent); vertical-align: 1px; }
.lp-opt { margin-top: 18px; padding: 16px; border-radius: 16px; background: var(--lp-soft); border: 1px dashed var(--lp-line); display: grid; gap: 14px; }
.lp-opt .input { background: var(--lp-card); } .lp-opt .field { margin: 0; } .lp-opt .lp-webimport { margin: 0; padding: 0; background: none; border: 0; }
.lp-opt-h { font-size: 14px; color: var(--lp-mut); } .lp-opt-h b { color: var(--lp-fg); }
.lp-opt .lp-indpick button { background: var(--lp-card); }
.lp-slug { display: flex; align-items: stretch; } .lp-slug .input { flex: 1; min-width: 0; border-radius: 10px 0 0 10px; }
.lp-slug-sfx { display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--lp-line); border-left: 0; border-radius: 0 10px 10px 0; background: var(--lp-soft); color: var(--lp-mut); font-weight: 600; font-size: 14px; white-space: nowrap; }
.lp-slug.free .input, .lp-slug.free .lp-slug-sfx { border-color: #10B981; } .lp-slug.taken .input, .lp-slug.taken .lp-slug-sfx { border-color: var(--err); }
.lp-slughint { margin-top: 6px; font-size: 12.5px; line-height: 1.5; } .lp-slughint .good { color: #10B981; } .lp-slughint .bad { color: var(--err); }
.lp-slughint .i { width: 14px; height: 14px; vertical-align: -3px; margin-right: 3px; } .lp-slughint .linkbtn { font-size: 12.5px; margin-left: 4px; }
.lp-detect { display: flex; gap: 8px; align-items: center; margin-top: 10px; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.4; color: var(--text-2); background: color-mix(in srgb, #10B981 9%, transparent); border: 1px solid color-mix(in srgb, #10B981 30%, transparent); flex-wrap: wrap; }
.lp-detect > .i { color: #10B981; flex: none; } .lp-detect > span { flex: 1 1 220px; min-width: 0; } .lp-detect b { color: var(--text); } .lp .lp-detect { color: var(--lp-mut); } .lp .lp-detect b { color: var(--lp-fg); }
.lp-detect select.input { width: auto; height: 34px; padding: 0 10px; flex: none; }
.lp-brandprev { flex-wrap: wrap; } .lp-brandprev .grow { min-width: 160px; } .lp-brandprev .grow label { display: block; margin-bottom: 4px; } .lp-brandprev .grow .input { height: 36px; }
.lp-sheet .lp-incl .tiny.muted { color: var(--lp-mut); } .lp-sheet .lp-inc p { color: var(--lp-mut); }
/* Anmelden: „Weiter als …“ – die Firma im eigenen Look */
.lp-last { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; margin: 4px 0 14px; }
.lp-last img { width: 44px; height: 44px; border-radius: 11px; object-fit: contain; flex: none; } .lp-last-ic { width: 44px; height: 44px; border-radius: 11px; background: rgba(255,255,255,.2); display: grid; place-items: center; flex: none; }
.lp-last b { display: block; font-size: 16px; } .lp-last div div { font-size: 12.5px; opacity: .85; }
.lp-switch { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; } .lp-switch .linkbtn { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
@media (max-width: 640px) { .lp-opt { padding: 14px 12px; } .lp-detect select.input { width: 100%; }
  .lp-brandprev .logoduo { flex-basis: 100%; } .lp-brandprev .grow { flex-basis: 100%; order: 5; } .lp-brandprev #bpx { margin-left: auto; } }

/* Passwortfeld mit Auge (anzeigen/verbergen) – Touch-Ziel 44 px */
.pwwrap { position: relative; display: flex; align-items: center; }
.pwwrap .input { padding-right: 46px; }
.pwwrap .input.pinfield { padding-left: 46px; }
.pweye { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); cursor: pointer; border-radius: 9px; }
.pweye:hover, .pweye.on { color: var(--brand); }
.pweye:focus-visible { outline: 2px solid var(--brand); outline-offset: -4px; }
.lp-sheet .pweye { color: var(--lp-mut); } .lp-sheet .pweye:hover, .lp-sheet .pweye.on { color: var(--lp-fg); }

/* Angemeldete Person: Name normal, Benutzername grau darunter, Rolle als Tag */
.who { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.who-name { font-weight: 650; color: var(--text); font-size: 14px; line-height: 1.25; }
.who-user { color: var(--muted); font-size: 12px; line-height: 1.25; }
.who-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.who.big { align-items: center; text-align: center; } .who.big .who-name { font-size: 18px; } .who.big .who-user { font-size: 14px; } .who.big .who-tags { justify-content: center; margin-top: 8px; }
.empcard .who-user { margin-top: -2px; }
.userchip .who { flex: 1 1 auto; }

/* All-day calendar statuses occupy the complete day cell. */
.cal .d.status-sick { --day-status-color: var(--sick); background: color-mix(in srgb, var(--sick) 24%, var(--panel)); }
.cal .d.status-vac { --day-status-color: var(--ok); background: color-mix(in srgb, var(--ok) 24%, var(--panel)); }
.cal .d.status-pend { --day-status-color: var(--warn); background: color-mix(in srgb, var(--warn) 24%, var(--panel)); }
.cal .d.status-hol { --day-status-color: var(--muted); background: color-mix(in srgb, var(--muted) 20%, var(--panel)); }
.cal .d[class*="status-"]:hover { background: color-mix(in srgb, var(--day-status-color) 32%, var(--panel)); }
.cal .d[class*="status-"] .ev.sick,
.cal .d[class*="status-"] .ev.vac,
.cal .d[class*="status-"] .ev.pend,
.cal .d[class*="status-"] .ev.hol { background: transparent; border: 0; border-radius: 0; padding-inline: 0; font-weight: 700; }

/* Keep the conversation anchored while media finishes loading. */
.messages-wrap { position:relative;display:flex;flex:1;min-height:0;overflow:hidden; }
.messages-wrap .msgs { min-height:0;display:block;overflow-anchor:none; }
.message-flow { display:flex;flex-direction:column;gap:2px; }
.message-flow > * { flex-shrink:0; }
.chat-new-messages { position:absolute;right:16px;bottom:14px;z-index:2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;padding:0;cursor:pointer;
  background:var(--panel);color:var(--brand);border:1px solid var(--line);box-shadow:0 3px 14px #0003; }
.chat-new-messages:hover { background:var(--brand-50); }
.chat-new-messages .cnm-count { position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--brand);color:var(--on-brand,#fff);font-size:11px;font-weight:700;line-height:20px;text-align:center; }
.chat-new-messages .cnm-count[hidden] { display:none; }
.chat-new-messages[hidden] { display:none; }
.att-img { flex-shrink:0; }
.att-img img { height:100%;min-height:0;max-height:none;object-fit:cover; }
@media (max-width:860px) { .messages-wrap .msgs { min-height:220px; } }

/* Kopf-Logo (Seitenleiste, Handy-Kopf, Vorschau): Firmenlogo freigestellt, ohne Kachel/Rahmen; Name optional (wie die App) */
.headbrand { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* Kopfbild (Firma & Design → Kopfbild): 3 : 1, oben auf der Startseite wie in der App */
.hbanner { aspect-ratio: 3 / 1; width: 100%; max-width: 920px; border-radius: 20px; overflow: hidden; margin-bottom: 20px; box-shadow: 0 8px 24px rgba(0, 0, 0, .08); }
.hbanner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hbanner.prev { margin-bottom: 0; max-width: 560px; }
.hbanner.lp-banner { margin-bottom: 18px; border-radius: 16px; }
.hbanner-std { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; }
.hprev { max-width: 560px; border-radius: 0 0 22px 22px; padding: 10px 12px 16px; color: #fff; display: grid; gap: 12px; }
.hprev .hbanner { margin: 0; max-width: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .15); border-radius: 14px; }
.hprev-logo { min-height: 40px; display: flex; align-items: center; }
.hprev-greet b { font-size: 18px; } .hprev-greet .tiny { opacity: .8; }
.hprev-pill { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #1F2937; border-radius: 999px; padding: 3px 10px 3px 3px; }
.bchecks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; }
.bchecks li { display: flex; gap: 6px; align-items: center; } .bchecks li.ok { color: var(--ok); } .bchecks li.warn { color: var(--warn); }
.bchecks li span { color: var(--text-2); }
@media (max-width: 720px) { .hbanner { border-radius: 16px; margin-bottom: 14px; } }
/* Logo oben links führt immer zur Übersicht */
a.homelink { color: inherit; text-decoration: none; min-width: 0; cursor: pointer; border-radius: 10px; }
a.homelink:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.headbrand .headlogo { display: block; width: auto; height: auto; object-fit: contain; flex-shrink: 0; background: none; border: 0; padding: 0; border-radius: 0; }
.headbrand .brandname { font-weight: 800; font-size: 17px; letter-spacing: -.02em; line-height: 1.2; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
/* Lesbar in beiden Modi (Einteilung per headLogoFit in core.js): mono = einfarbig weiß/schwarz, tile = neutrale Kachel */
.headlogo.l-mono { filter: brightness(0); }
.headlogo.l-tile-w, .headlogo.l-tile-d, .headlogo.d-tile-w, .headlogo.d-tile-d { box-sizing: content-box; padding: 4px 8px; border-radius: 8px; }
.headlogo.l-tile-w { background: #FFFFFF; box-shadow: 0 0 0 1px var(--line); } .headlogo.l-tile-d { background: #1F2530; }
:root[data-theme="dark"] .headlogo { filter: none; background: none; box-shadow: none; padding: 0; }
:root[data-theme="dark"] .headlogo.d-mono { filter: brightness(0) invert(1); }
:root[data-theme="dark"] .headlogo.d-tile-w { background: #FFFFFF; padding: 4px 8px; } :root[data-theme="dark"] .headlogo.d-tile-d { background: #1F2530; padding: 4px 8px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .headlogo { filter: none; background: none; box-shadow: none; padding: 0; }
  :root:not([data-theme="light"]) .headlogo.d-mono { filter: brightness(0) invert(1); }
  :root:not([data-theme="light"]) .headlogo.d-tile-w { background: #FFFFFF; padding: 4px 8px; } :root:not([data-theme="light"]) .headlogo.d-tile-d { background: #1F2530; padding: 4px 8px; }
}
.rail .logo .headbrand { padding: 0; }
.topbar .headbrand.only-mobile { display: none; }
@media (max-width: 860px) {
  .topbar .headbrand.only-mobile { display: flex; flex: 1 1 auto; min-width: 0; max-width: 52vw; gap: 8px; }
  .topbar .headbrand.with-name .headlogo { max-width: 24vw !important; }
  .topbar .headbrand .headlogo { max-height: 28px !important; max-width: 40vw !important; }
  .topbar .headbrand .brandname { font-size: 15px; -webkit-line-clamp: 1; white-space: nowrap; display: block; flex: 1 1 auto; min-width: 0; }
}
/* Uhr-Abweichung: ruhiger Hinweis oben im Seitenfluss */
.clockwarn { margin: 0 0 14px; font-weight: 600; align-items: flex-start; }
/* Einsatzplan: Kopieren/Einfügen, Ausfüllkästchen, Rechtsprüfung */
:root { --fill: #2563EB; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fill: #60A5FA; } }
:root[data-theme="dark"] { --fill: #60A5FA; }
.planbar { flex-wrap: wrap; row-gap: 8px; background: color-mix(in srgb, var(--brand) 10%, var(--panel)); box-shadow: var(--sh); }
.planbar .pbsep { width: 1px; align-self: stretch; background: var(--line); margin: 2px 2px; }
.pcchip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; padding: 2px 2px 2px 10px; border: 1px dashed var(--brand); border-radius: 999px; font-size: 12px; color: var(--text-2); background: var(--panel); }
.pcchip > span { overflow-wrap: anywhere; }
.pcchip .btn { height: 26px; padding: 0 6px; }
.plan td.pe { position: relative; }
.plan td.pclip { outline: 2px dashed var(--brand); outline-offset: -4px; }
.plan td.pfill { background: color-mix(in srgb, var(--fill) 14%, transparent) !important; box-shadow: inset 0 0 0 2px var(--fill); }
.plan td.pfill.pfillx { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--fill) 14%, transparent) 0 6px, transparent 6px 12px) !important; }
.pfillh { position: absolute; right: -5px; bottom: -5px; width: 11px; height: 11px; background: var(--brand); border: 2px solid var(--panel); border-radius: 3px; cursor: crosshair; z-index: 3; touch-action: none; }
.pfillh::after { content: ''; position: absolute; inset: -9px; }
.pfillh:hover { transform: scale(1.25); }
body.pfilling, body.pfilling * { cursor: crosshair !important; }
.plaw { display: flex; gap: 4px; align-items: flex-start; margin-top: 4px; font-size: 10.5px; line-height: 1.3; font-weight: 600; max-width: 150px; color: color-mix(in srgb, var(--warn) 85%, var(--text)); }
.plaw.err { color: color-mix(in srgb, var(--err) 80%, var(--text)); }
.plaw svg.i { flex: none; width: 12px; height: 12px; margin-top: 1px; }
.pclist { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.fillopt { width: 100%; justify-content: flex-start; height: auto; min-height: 44px; padding: 8px 12px; white-space: normal; text-align: left; gap: 10px; }

/* Prüfung vor dem Lohn-Export (DATEV LODAS, DATEV Lohn und Gehalt, Lexware): grün bereit, gelb Hinweise, rot Fehler */
.paycheck { --c: var(--ok); padding: 14px 16px; border: 1.5px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 7%, var(--panel)); }
.paycheck.warn { --c: var(--warn); }
.paycheck.err { --c: var(--err); }
.paycheck-h { display: flex; gap: 10px; align-items: flex-start; color: color-mix(in srgb, var(--c) 75%, var(--text)); }
.paycheck-h b { font-size: 15px; }
.paycheck-h .tiny { color: var(--text-2); margin-top: 2px; }
.paycheck ul, .paycheck-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.paycheck li, .paycheck-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.paycheck li svg, .paycheck-list li svg { flex: none; margin-top: 2px; }
.paycheck li.e svg, .paycheck-list li svg { color: var(--err); }
.paycheck li.w svg { color: var(--warn); }
.paycheck li.o { color: var(--text-2); }
.paycheck li.o svg { color: var(--ok); }
.paycheck li .linkbtn { white-space: nowrap; }
.dragfile.off { opacity: .55; cursor: not-allowed; border-style: dotted; }
@media (max-width: 700px) {
  .planbar { gap: 6px; padding: 8px 10px; }
  .planbar .pbsep, .planbar > .grow { display: none; }
  .planbar > b, .planbar > .small.muted { width: 100%; }
  .planbar .btn.sm { height: 32px; padding: 0 10px; gap: 6px; }
  .pcchip { flex: 1 1 100%; justify-content: space-between; }
}

/* Offline gespeichert / Abgleich-Konflikt (oben auf jeder Seite, wie der Hinweis in der App) */
.syncnote { margin: 0 0 14px; align-items: flex-start; }
.syncnote > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.syncnote .btn { margin-left: auto; flex-shrink: 0; }

/* Standort im Chat: kleine Kartenvorschau, Tippen öffnet die Route (wie in der App) */
.att-map { display: flex; flex-direction: column; gap: 6px; max-width: 230px; margin-top: 4px; color: inherit; text-decoration: none; }
.att-map .att-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.att-map .att-body small { color: var(--muted); overflow-wrap: anywhere; }
.att-map .att-body b { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-ink, var(--brand)); font-size: 13px; }
.mapprev { position: relative; display: block; width: 230px; max-width: 100%; height: 130px; border-radius: 12px; overflow: hidden; background: var(--panel-2, #e9eef3); border: 1px solid var(--line); }
.mapprev img { position: absolute; width: 256px; height: 256px; max-width: none; user-select: none; pointer-events: none; }
:root[data-theme="dark"] .mapprev img { filter: brightness(.78) contrast(1.05); }
.mappin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); color: #d92d20; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.mappin .i { width: 30px; height: 30px; fill: #fff; stroke: #d92d20; stroke-width: 2.2; }
.stampmap { position: relative; width: 100%; border-radius: 12px; overflow: hidden; background: var(--panel-2, #e9eef3); border: 1px solid var(--line); }
.stampmap .sm-in { position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
.stampmap img { position: absolute; width: 256px; height: 256px; max-width: none; user-select: none; pointer-events: none; }
:root[data-theme="dark"] .stampmap img { filter: brightness(.78) contrast(1.05); }
.stampmap .spin { position: absolute; transform: translate(-50%, -50%); min-width: 24px; height: 24px; padding: 0 5px; border-radius: 12px; background: var(--c); color: #fff; border: 2px solid #fff; font: 700 11px/20px var(--font, system-ui); text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.45); }
i.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }
tr.click { cursor: pointer; } tr.click:hover td { background: var(--panel-2); }
.mapcredit { position: absolute; right: 4px; bottom: 2px; font-size: 9px; color: #333; background: rgba(255,255,255,.75); padding: 0 3px; border-radius: 3px; }
/* Foto groß im Chat */
.photo-full { text-align: center; }
.photo-full img { max-width: 100%; max-height: calc(100vh - 190px); border-radius: 12px; }

/* Leistungen: Zeile antippen öffnet Notiz und Fotos */
tr.clickrow { cursor: pointer; } tr.clickrow:hover td { background: color-mix(in srgb, var(--brand) 5%, transparent); } tr.clickrow:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.svcphotos { display: flex; flex-wrap: wrap; gap: 10px; }
.svcphoto { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.svcphoto .att-img { width: 120px; height: 120px; margin: 0; }
.svcphoto .att-img img { width: 120px; height: 120px; min-height: 0; object-fit: cover; }
.catrow { padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; }

/* Einsatzplan: Urlaub/Krank antippen öffnet Details mit „Zurückziehen“ */
[data-abs] { cursor: pointer; } [data-abs]:hover { filter: brightness(.97); } [data-abs]:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* Handy: „Mehr“-Blatt mit allen Bereichen, die nicht unten in der Leiste stehen */
.moresheet { display: flex; flex-direction: column; gap: 2px; }
.moresheet .userchip { margin-bottom: 4px; }
.moresheet .userchip > svg:last-child { margin-left: auto; color: var(--faint); }
.moresheet .section { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 650; padding: 12px 10px 4px; }
.moresheet .sep { border-top: 1px solid var(--line); margin: 10px 0 4px; }

/* Einladen per QR-Code */
.invite .qrcode { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 12px; width: min(300px, 100%); margin: 0 auto; }
.invite .qrcode svg { display: block; width: 100%; height: auto; }
.invite .qrcode { position: relative; }
.invite .qrcode .qr-icon { position: absolute; left: 50%; top: 50%; width: 20%; aspect-ratio: 1; transform: translate(-50%, -50%); object-fit: cover; border-radius: 22%; background: #fff; border: 5px solid #fff; box-sizing: content-box; }
.invite #inv-qr { text-align: center; }

/* ===== Assistent (KI) ===== */
.aiwrap { display: flex; flex-direction: column; height: calc(100vh - 60px - 150px); min-height: 480px; overflow: hidden; }
.aiflow { flex: 1; overflow: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; background: var(--panel-2); }
.aimsg { display: flex; gap: 10px; align-items: flex-start; max-width: 760px; }
.aimsg.me { align-self: flex-end; justify-content: flex-end; }
.aimsg.wide { max-width: 100%; width: 100%; }
.aimsg.wide > .aicard, .aimsg.wide > .aiask, .aimsg.wide > .aiconfirm { flex: 1; min-width: 0; }
.aiav { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; background: linear-gradient(140deg, var(--brand), var(--brand-g, var(--brand-d))); color: var(--on-brand, #fff); }
.aiav.lg { width: 48px; height: 48px; border-radius: 14px; margin: 0 auto 10px; }
.aiav.err { background: var(--err); }
.aibubble { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; line-height: 1.55; min-width: 0; overflow-wrap: anywhere; }
.aimsg.me .aibubble { background: var(--brand); border-color: var(--brand); color: #fff; border-radius: 14px 14px 4px 14px; white-space: pre-wrap; }
.aibubble.err { color: var(--err); border-color: color-mix(in srgb, var(--err) 30%, transparent); }
.aibubble p { margin: 0; } .aibubble p + p, .aibubble ul, .aibubble ol { margin-top: 8px; } .aibubble ul, .aibubble ol { margin-bottom: 0; padding-left: 20px; } .aibubble li + li { margin-top: 3px; }
.aibubble.aithink { display: flex; gap: 5px; align-items: center; padding: 14px 16px; }
.aithink span { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); animation: aidot 1.2s infinite; } .aithink span:nth-child(2) { animation-delay: .2s; } .aithink span:nth-child(3) { animation-delay: .4s; }
@keyframes aidot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.aicard { overflow: hidden; } .aicard-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line-2); }
.aicard .tablewrap { max-height: 420px; } .aicard .table th { position: sticky; top: 0; }
.aicard .table.aiplain td:first-child { font-weight: 600; white-space: nowrap; }
.aiask, .aiconfirm { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.aiask.done, .aiconfirm.done { opacity: .75; }
.aiq { display: flex; gap: 8px; align-items: flex-start; font-weight: 600; } .aiq svg { color: var(--brand); margin-top: 3px; }
.aiopt { display: inline-flex; align-items: center; gap: 7px; } .aiopt .avatar { font-size: 9px !important; }
.aidates .input { width: auto; height: 34px; }
.aiconfirm { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); background: color-mix(in srgb, var(--brand) 4%, var(--panel)); }
.aiconfirm ul { margin: 0; padding-left: 20px; } .aiconfirm li + li { margin-top: 3px; }
/* Datei-Vorschau im Assistenten: eigener Kasten, scrollt nach unten und rechts, Chat behält seine Breite */
.aiconfirm.hasprev { min-width: 0; max-width: 100%; } .aiconfirm.hasprev.done { opacity: 1; }
.aiprev { max-width: 100%; min-width: 0; max-height: 360px; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.aiprev .table { width: max-content; min-width: 100%; margin: 0; } .aiprev .table th, .aiprev .table td { white-space: nowrap; }
.aiprev .table th { position: sticky; top: 0; z-index: 1; background: var(--panel-2); } .aiprev .table tr.totals td { position: sticky; bottom: 0; background: var(--panel-2); font-weight: 700; }
.aiprev:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.aisys { align-self: center; display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; }
.aihello { margin: auto; max-width: 620px; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 20px 10px; }
.aistart { justify-content: center; margin-top: 10px; } .aistart .chip { display: inline-flex; align-items: center; gap: 7px; }
.aiwrap .composer textarea { max-height: 150px; }
@media (max-width: 860px) { .aiwrap { height: auto; min-height: 0; } .aiflow { padding: 12px; max-height: 58dvh; min-height: 260px; } .aimsg { max-width: 100%; } .aicard .tablewrap { max-height: 280px; } .aiprev { max-height: 230px; } .aihello { padding: 10px 4px; } }
/* Assistent im Chat: fester Eintrag oben in der Liste, Gespräch füllt das Chatfenster */
.chat .aiwrap.inchat { flex: 1; height: auto; min-height: 0; }
.aiav.chatav { width: 38px; height: 38px; border-radius: 10px; }
.citem.aiitem { border-bottom: 1px solid var(--line); }
@media (max-width: 860px) { .chat .aiwrap.inchat .aiflow { min-height: 0; max-height: 44dvh; } .chat .aiwrap.inchat .composer-hint { display: none; } }
/* Kontakt zu uns (contact.js): Seite auf der Startseite (#kontakt) und im Menü – Formular links, Wege und Hinweise rechts */
.ct-layout { --ct-acc: var(--brand); --ct-mut: var(--muted); --ct-line: var(--line); --ct-card: var(--panel); --ct-soft: var(--panel-2, var(--bg)); display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.lp .ct-layout { --ct-acc: var(--lp-acc); --ct-mut: var(--lp-mut); --ct-line: var(--lp-line); --ct-card: var(--lp-card); --ct-soft: var(--lp-soft); max-width: 1040px; margin: 0 auto; gap: 28px; }
.lp .ct-main { background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: 28px; padding: clamp(22px, 3vw, 36px); box-shadow: 0 30px 60px -40px rgba(20,20,60,.35); }
.ct-sec { padding-top: clamp(50px, 7vw, 90px); }
.ct-form { display: flex; flex-direction: column; gap: 18px; }
.ct-topics { border: 0; padding: 0; margin: 0; min-width: 0; } .ct-topics legend { font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; padding: 0; }
.lp .ct-topics legend, .lp .ct-form .field label { color: var(--lp-fg); }
.ct-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 99px; border: 1px solid var(--ct-line); background: var(--ct-card); font-size: 13.5px; font-weight: 600; cursor: pointer; color: inherit; transition: border-color .15s, background .15s; }
.ct-chip input { position: absolute; opacity: 0; pointer-events: none; } .ct-chip svg { width: 15px; height: 15px; color: var(--ct-mut); }
.ct-chip:hover { border-color: color-mix(in srgb, var(--ct-acc) 45%, var(--ct-line)); }
.ct-chip.on { border-color: var(--ct-acc); background: color-mix(in srgb, var(--ct-acc) 11%, transparent); color: var(--ct-acc); } .ct-chip.on svg { color: var(--ct-acc); }
.ct-chip:has(input:focus-visible) { outline: 2px solid var(--ct-acc); outline-offset: 2px; }
.ct-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ct-form .input { height: 44px; } .ct-form textarea.input { height: auto; min-height: 140px; line-height: 1.5; }
.lp .ct-form .input { background: var(--lp-soft); color: var(--lp-fg); border-color: var(--lp-line); border-radius: 12px; }
.lp .ct-form .input:focus { border-color: var(--lp-acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-acc) 18%, transparent); }
.ct-req { color: var(--err); } .ct-opt { font-weight: 500; color: var(--ct-mut); font-size: 11.5px; }
.field.bad .input { border-color: var(--err); } .ct-err { color: var(--err); font-size: 12.5px; font-weight: 500; }
.ct-under { gap: 10px; margin-top: 2px; } .ct-count { font-size: 11.5px; color: var(--ct-mut); font-variant-numeric: tabular-nums; margin-left: auto; }
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-send { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ct-send .btn.lg { height: 48px; padding: 0 22px; font-size: 15px; border-radius: 12px; }
.lp .ct-send .btn.primary { background: var(--lp-acc); border-color: var(--lp-acc); border-radius: 980px; }
.ct-privacy { font-size: 12.5px; color: var(--ct-mut); margin: 0; } .ct-privacy a, .ct-card a { color: var(--ct-acc); }
.ct-aside { display: flex; flex-direction: column; gap: 12px; }
.ct-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--ct-line); border-radius: 18px; background: var(--ct-card); }
.ct-card b { display: block; font-size: 14.5px; margin-bottom: 3px; } .ct-card span:not(.ct-ic) { display: block; font-size: 13.5px; line-height: 1.45; color: var(--ct-mut); }
.ct-ic { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--ct-acc) 13%, transparent); color: var(--ct-acc); } .ct-ic svg { width: 19px; height: 19px; }
.ct-mail { font-size: 14px; font-weight: 600; word-break: break-all; text-decoration: none; }
.ct-copy { flex: none; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--ct-line); background: var(--ct-soft); color: var(--ct-mut); display: grid; place-items: center; cursor: pointer; } .ct-copy:hover { color: var(--ct-acc); }
.ct-done { text-align: center; padding: 30px 10px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ct-done h3 { font-size: 22px; margin: 4px 0 0; } .ct-done p { color: var(--ct-mut); max-width: 420px; line-height: 1.5; margin: 0 0 8px; }
.ct-done-ic { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: #E7F7EF; color: #0E7A4C; animation: lpUp .35s cubic-bezier(.2,.8,.2,1); } .ct-done-ic svg { width: 30px; height: 30px; }
.ct-faqmore { text-align: center; margin-top: 26px; color: var(--lp-mut); } .ct-faqmore a { color: var(--lp-acc); font-weight: 600; text-decoration: none; display: inline-flex; gap: 4px; align-items: center; } .ct-faqmore svg { width: 14px; height: 14px; }
.lp-links a.on { color: var(--lp-fg); font-weight: 600; }
.ct-spin { animation: ctSpin 1s linear infinite; } @keyframes ctSpin { to { transform: rotate(360deg); } }
@media (max-width: 860px) { .ct-layout { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .ct-grid2 { grid-template-columns: 1fr; } .ct-send .btn.lg { width: 100%; justify-content: center; } .ct-form .input { font-size: 16px; } }

/* Schnellzugriff Darstellung/Sprache – oben rechts auf Startseite, Anmeldeseite und in der App */
.quick { display: inline-flex; gap: 6px; align-items: center; flex-shrink: 0; }
.qbtn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 36px; min-width: 36px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--text-2); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.qbtn:hover { background: var(--panel-2); color: var(--text); }
.lp .qbtn { border-color: color-mix(in srgb, var(--lp-fg) 18%, transparent); background: transparent; color: var(--lp-fg); }
.lp .qbtn:hover { background: color-mix(in srgb, var(--lp-fg) 7%, transparent); }
.qpop { position: absolute; z-index: 80; width: 270px; max-width: calc(100vw - 16px); padding: 6px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh-lg); }
.qpop .qtitle { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 650; padding: 8px 10px 4px; }
.qpop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 9px; text-align: left; font-weight: 550; color: var(--text-2); font-size: 14px; }
.qpop button:hover { background: var(--panel-2); } .qpop button.on { color: var(--brand); background: var(--brand-50); }
.qpop button span { flex: 1; } .qpop button > svg:last-child:not(:first-child) { margin-left: auto; }
.qpop .qhint { font-size: 12px; color: var(--muted); padding: 6px 10px 6px; line-height: 1.4; }
@media (max-width: 760px) { .qbtn span { display: none; } .qbtn { width: 36px; padding: 0; } .lp-nav .lp-b { padding: 9px 12px; font-size: 13px; } .lp-nav .lp-brand .lp-wm { height: 22px; } }