:root {
  --paper: #f3eee8;
  --paper-2: #ebe4dc;
  --ink: #1c1917;
  --muted: #78716c;
  --line: rgba(28, 25, 23, 0.08);
  --input-line: rgba(28, 25, 23, 0.14);
  --accent: #e63946;
  --accent-soft: rgba(230, 57, 70, 0.12);
  --kebap: #e63946;
  --kebap-light: #ff6b35;
  --rust: #c1121f;
  --moss: #059669;
  --white: #fffdfb;
  --danger: #c1121f;
  --shadow: 0 10px 30px rgba(28, 25, 23, 0.07);
  --shadow-lift: 0 16px 40px rgba(28, 25, 23, 0.1);
  --focus-ring: 0 0 0 3px rgba(230, 57, 70, 0.22);
  --sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --rail: 260px;
  --rail-bg: rgba(255, 253, 251, 0.92);
  --rail-ink: #1c1917;
  --rail-muted: #78716c;
  --radius: 1.25rem;
  --radius-sm: 0.95rem;
  color-scheme: light;
}

html.dark {
  --paper: #0f0d0c;
  --paper-2: #1c1917;
  --ink: #f5f0ea;
  --muted: #a8a29a;
  --line: rgba(255, 255, 255, 0.08);
  --input-line: rgba(255, 255, 255, 0.14);
  --accent: #e63946;
  --accent-soft: rgba(230, 57, 70, 0.18);
  --white: #1c1917;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  --shadow-lift: 0 18px 44px rgba(0, 0, 0, 0.38);
  --rail-bg: rgba(28, 25, 23, 0.92);
  --rail-ink: #f5f0ea;
  --rail-muted: #a8a29a;
  color-scheme: dark;
}

html {
  -webkit-font-smoothing: antialiased;
  font-size: 100%;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.55;
  letter-spacing: -0.011em;
  background:
    radial-gradient(900px 420px at -10% -20%, rgba(230, 57, 70, 0.12), transparent 55%),
    radial-gradient(700px 380px at 110% 0%, rgba(255, 107, 53, 0.1), transparent 50%),
    var(--paper);
  color: var(--ink);
}
html.dark body {
  background:
    radial-gradient(900px 420px at -10% -20%, rgba(230, 57, 70, 0.16), transparent 55%),
    radial-gradient(700px 380px at 110% 0%, rgba(255, 107, 53, 0.08), transparent 50%),
    var(--paper);
}

button, input, select { font: inherit; }
button { cursor: pointer; }
button, .nav-btn, .ghost, .primary {
  min-height: 44px;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.money {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: -0.01em;
}

.login-shell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(20px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  background:
    radial-gradient(700px 360px at 50% -20%, rgba(230, 57, 70, 0.18), transparent 60%),
    var(--paper);
}

.login-card {
  width: min(400px, 100%);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 2.25rem 1.75rem 1.75rem;
  text-align: center;
}

.login-logo {
  width: 4.75rem;
  height: 4.75rem;
  border-radius: 1.35rem;
  object-fit: contain;
  box-shadow: 0 12px 28px rgba(230, 57, 70, 0.22);
  margin: 0 auto 1rem;
  display: block;
}

.login-card h1 {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  margin: 0 0 4px;
}

.login-card .sub {
  margin-bottom: 1.25rem;
}

.pin-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 3rem;
  margin-bottom: 8px;
}

.pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 99px;
  background: var(--kebap);
  box-shadow: 0 4px 10px rgba(230, 57, 70, 0.28);
}

.login-heading {
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.pin-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 280px;
  margin: 0 auto 8px;
}

.pin-key {
  height: 3.5rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: rgba(28, 25, 23, 0.045);
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  min-height: 3.5rem;
  transition: transform 0.12s ease, background-color 0.15s ease;
}
html.dark .pin-key {
  background: rgba(255, 255, 255, 0.07);
}
.pin-key:hover { background: rgba(230, 57, 70, 0.08); }
.pin-key:active { transform: scale(0.96); }
.pin-key.pin-ok {
  background: linear-gradient(135deg, var(--kebap), var(--kebap-light));
  color: #fff;
  font-size: 0.95rem;
  box-shadow: 0 10px 22px rgba(230, 57, 70, 0.28);
}
.pin-key.pin-ok:disabled {
  opacity: 0.45;
  box-shadow: none;
  transform: none;
}

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

h1 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.45rem, 4vw, 1.85rem);
  letter-spacing: -0.035em;
  line-height: 1.15;
  margin: 6px 0 10px;
}

.sub { color: var(--muted); margin: 0 0 24px; line-height: 1.5; }

label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 8px; }

input[type="password"] {
  width: 100%;
  border: 1px solid var(--input-line);
  background: var(--paper);
  padding: 14px 12px;
  margin-bottom: 16px;
  font-size: 16px;
  border-radius: var(--radius-sm);
}

.primary {
  width: 100%;
  background: linear-gradient(135deg, var(--kebap), var(--kebap-light));
  color: #fff;
  border: 0;
  padding: 13px 16px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 10px 22px rgba(230, 57, 70, 0.28);
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(230, 57, 70, 0.34);
  filter: saturate(1.05);
}
.primary:disabled { opacity: 0.45; cursor: wait; box-shadow: none; transform: none; }

.error {
  color: var(--danger);
  margin: 0 0 12px;
}
.error:empty {
  display: none;
}

.app {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  min-height: 100dvh;
}

.rail {
  background: var(--rail-bg);
  color: var(--rail-ink);
  padding: 0 12px max(24px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.brand {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  padding: 1.35rem 0.85rem 1.15rem;
  line-height: 1.25;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
  width: 100%;
  background: transparent;
  color: inherit;
  text-align: left;
  min-height: 44px;
  appearance: none;
}
.brand:hover {
  background: rgba(28, 25, 23, 0.05);
}
html.dark .brand:hover {
  background: rgba(255, 255, 255, 0.07);
}
.brand-logo {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.85rem;
  object-fit: contain;
  box-shadow: 0 8px 18px rgba(230, 57, 70, 0.2);
  flex: none;
}
.brand-name {
  display: block;
  font-weight: 800;
}
.brand-mark {
  display: block;
  margin-top: 2px;
  color: var(--rail-muted);
  font-size: 0.75rem;
  font-weight: 550;
  letter-spacing: 0.04em;
}

.rail-nav {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 8px 0 16px;
}

.rail-foot {
  margin-top: auto;
  padding: 10px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rail-foot .nav-btn {
  text-decoration: none;
}

.group-label {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rail-muted);
  margin: 0 12px 6px;
  font-weight: 700;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  color: inherit;
  border: 0;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: transform 0.15s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.nav-btn .mark {
  width: 1.4em;
  text-align: center;
  flex: none;
  font-size: 1.05rem;
}
.nav-btn:hover {
  background: rgba(28, 25, 23, 0.05);
  transform: translateY(-1px);
}
html.dark .nav-btn:hover {
  background: rgba(255, 255, 255, 0.07);
}

.nav-btn.active {
  background: linear-gradient(135deg, var(--kebap), var(--kebap-light));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(230, 57, 70, 0.28);
}
.nav-btn.active:hover { background: linear-gradient(135deg, var(--kebap), var(--kebap-light)); }

.main {
  padding: 28px 36px calc(48px + env(safe-area-inset-bottom));
  min-width: 0;
  max-width: 1280px;
  animation: fadeIn 0.28s ease-out;
}

.bar {
  display: none;
  align-items: center;
  gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  background: var(--rail-bg);
  color: var(--rail-ink);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.bar-user {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  text-align: right;
  font-family: inherit;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--rail-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: transparent;
  border: 0;
  appearance: none;
  cursor: pointer;
  min-height: 44px;
}

.bar .brand {
  font-size: 1rem;
  padding: 0;
  border: 0;
  margin: 0;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  flex: none;
  gap: 0;
  justify-content: center;
}
.bar .brand:hover { background: transparent; }
.bar .brand-logo { width: 2.1rem; height: 2.1rem; }
.bar #bar-refresh.is-busy .brand-logo {
  animation: spin 0.8s linear infinite;
}
.bar #bar-refresh:disabled {
  opacity: 0.85;
  cursor: wait;
}
.logout-modal {
  text-align: center;
}
.logout-modal h2 {
  margin: 4px 0 16px;
  font-family: var(--sans);
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}
.logout-modal .modal-actions .ghost {
  width: 100%;
  justify-content: center;
}
.menu-toggle {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  width: 44px;
  min-width: 44px;
  padding: 0;
  border-radius: var(--radius-sm);
  font-weight: 650;
  font-size: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
}

.scrim {
  display: none;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 12px;
}

.top-title { min-width: 0; flex: 1; }
.top-title h1 {
  margin: 4px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.search-wrap {
  display: block;
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0 0 12px;
}
.search-ico {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 1rem;
}

.search-wrap input {
  width: 100%;
  border: 0;
  background: rgba(28, 25, 23, 0.04);
  padding: 9px 12px 9px 38px;
  font-size: 16px;
  border-radius: var(--radius-sm);
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
html.dark .search-wrap input {
  background: rgba(255, 255, 255, 0.06);
}
.search-wrap input:focus {
  outline: none;
  box-shadow: var(--focus-ring);
  background: #fff;
}
html.dark .search-wrap input:focus {
  background: #292524;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

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

.chip {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.chip:hover { transform: translateY(-1px); }

.chip.active {
  background: linear-gradient(135deg, var(--kebap), var(--kebap-light));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(230, 57, 70, 0.28);
}

.dates {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.dates input {
  margin-left: 6px;
  border: 0;
  background: rgba(28, 25, 23, 0.04);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 16px;
}
html.dark .dates input {
  background: rgba(255, 255, 255, 0.06);
}

.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85rem;
}

.pager-actions { display: flex; gap: 8px; }
.pager .ghost:disabled { opacity: 0.4; cursor: default; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 650;
  background: var(--paper-2);
}

.pill-open { background: #fef3c7; color: #92400e; }
.pill-ok { background: #d1fae5; color: #047857; }
.pill-credit { background: #e0e7ff; color: #3730a3; }
html.dark .pill-open { background: #3f2e14; color: #fcd34d; }
html.dark .pill-ok { background: #1a2c24; color: #86efac; }
html.dark .pill-credit { background: #1e293b; color: #93c5fd; }

.kpi.clickable { cursor: pointer; }
.kpi.clickable:hover, .kpi.selected {
  border-color: transparent;
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}

.filter-note { color: var(--muted); margin: 0 0 12px; }
.text-btn {
  background: none;
  border: 0;
  color: var(--accent);
  font-weight: 650;
  padding: 0;
  min-height: 0;
  text-decoration: underline;
}

.read-only-chip {
  flex: 0 0 auto;
  align-self: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: 999px;
}

.ghost {
  background: rgba(28, 25, 23, 0.05);
  border: 0;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  transition: transform 0.15s ease, background-color 0.2s ease;
}
html.dark .ghost {
  background: rgba(255, 255, 255, 0.08);
}
.ghost:hover:not(:disabled) {
  transform: translateY(-1px);
  background: rgba(28, 25, 23, 0.08);
}

.kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.kpis.kpis-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kpis.kpis-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 861px) {
  .kpis.kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.kpi {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  min-height: 0;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.kpi-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.kpi-head .mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--paper-2);
  font-size: 0.95rem;
  flex: none;
}
.kpi-amber .kpi-head .mark { background: #fef3c7; }
.kpi-green .kpi-head .mark { background: #d1fae5; }
.kpi-blue .kpi-head .mark { background: #e0e7ff; }
.kpi-slate .kpi-head .mark { background: var(--paper-2); }
html.dark .kpi-amber .kpi-head .mark { background: #3f2e14; }
html.dark .kpi-green .kpi-head .mark { background: #1a2c24; }
html.dark .kpi-blue .kpi-head .mark { background: #1e293b; }
.kpi-text .value { font-size: 1rem; letter-spacing: -0.02em; }

.kpi .label {
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 650;
  line-height: 1.25;
}
.kpi .value {
  font-family: var(--sans);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-top: 6px;
}
.kpi .hint {
  color: var(--muted);
  font-size: 0.8rem;
  margin-top: 4px;
}

.heute-group {
  margin-bottom: 6px;
}
.heute-group-head {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin: 0 2px 8px;
}

.heute-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.heute-grid > .kpi {
  width: 100%;
  margin: 0;
  color: inherit;
  text-align: left;
  text-decoration: none;
  display: block;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.heute-grid > .kpi:active {
  transform: scale(0.98);
}

.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.panel h2 {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.compact-btn {
  min-height: 36px;
  min-width: auto;
  padding: 4px 10px;
  font-size: 0.82rem;
  flex: none;
}

.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; line-height: 1.3; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--paper-2); font-size: 0.9rem; }
th { color: var(--muted); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(230, 57, 70, 0.035); }
html.dark tbody tr:hover td { background: rgba(230, 57, 70, 0.08); }
td.num { text-align: right; }
.empty { padding: 12px; color: var(--muted); }
.muted { color: var(--muted); font-size: 0.9rem; }

.soon {
  background: var(--white);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 28px;
  color: var(--muted);
}

@media (max-width: 860px) {
  .app {
    grid-template-columns: 1fr;
  }

  .bar { display: flex; }
  .top-title .eyebrow { display: none; }
  .top-title h1 { margin-top: 0; }

  .rail {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(var(--rail), 86vw);
    height: 100dvh;
    z-index: 20;
    transform: translateX(-105%);
    transition: transform 0.2s ease;
    overflow-y: auto;
    padding-top: calc(20px + env(safe-area-inset-top));
  }

  .app.nav-open .rail { transform: translateX(0); }

  .scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 18, 22, 0.5);
    z-index: 15;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .app.nav-open .scrim {
    opacity: 1;
    pointer-events: auto;
  }

  .main { padding: 16px 14px calc(96px + env(safe-area-inset-bottom)); }

  .top {
    gap: 8px;
    margin-bottom: 12px;
    align-items: center;
    flex-wrap: nowrap;
  }
  .top-title { flex: 1 1 auto; min-width: 0; }
  .top-title h1 {
    margin: 0;
    gap: 8px;
    font-size: 1.15rem;
    line-height: 1.2;
  }
  .kpis { gap: 8px; }
  .kpis.kpis-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis.kpis-3 > :last-child { grid-column: 1 / -1; }

  .heute-grid { gap: 8px; }

  .search-wrap { max-width: none; }
  .search-wrap input { background: rgba(28, 25, 23, 0.07); }

  .filters { flex-direction: column; align-items: stretch; }
  .dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 8px;
  }
  .dates label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  .dates input {
    margin-left: 0;
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
  }

  table:not(.tax-table) thead { display: none; }
  table:not(.tax-table),
  table:not(.tax-table) tbody { display: block; width: 100%; }
  tbody tr:hover td { background: transparent; }

  table:not(.tax-table):not(.dense) tr {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--paper-2);
  }
  table:not(.tax-table):not(.dense) td {
    display: grid;
    grid-template-columns: 7.2rem minmax(0, 1fr);
    align-items: baseline;
    gap: 8px;
    padding: 0;
    border: 0;
    text-align: left;
    line-height: 1.35;
  }
  table:not(.tax-table):not(.dense) td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 650;
  }
  table:not(.tax-table):not(.dense) td.actions,
  table:not(.tax-table):not(.dense) td[data-label=""] {
    grid-template-columns: 1fr;
  }
  table:not(.tax-table):not(.dense) td.actions::before,
  table:not(.tax-table):not(.dense) td[data-label=""]::before { content: none; }

  table.dense tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    row-gap: 0;
    padding: 12px;
    border-bottom: 1px solid var(--paper-2);
  }
  table.dense tr::after {
    content: "";
    order: 2;
    flex-basis: 100%;
    height: 0;
    overflow: hidden;
    pointer-events: none;
  }
  table.dense td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    text-align: left;
    line-height: 1.3;
  }
  table.dense td::before { content: none; }
  table.dense td.title {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
    font-weight: 750;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  table.dense td.actions { display: contents; }
  table.dense .row-actions,
  table.dense td.actions > .icon-btn {
    order: 2;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    margin-left: auto;
  }
  table.dense td.meta {
    order: 3;
    color: var(--muted);
    font-size: 0.8rem;
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  table.dense td.meta:empty,
  table.dense td.sub:empty { display: none; }
  table.dense td.meta:not(:empty) ~ td.meta:not(:empty)::before {
    content: "·";
    margin-right: 0.4em;
    color: var(--muted);
  }
  table.dense td.amount {
    order: 4;
    flex: 0 0 auto;
    margin-left: auto;
    margin-top: 4px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 0.95rem;
    text-align: right;
  }
  table.dense td.status {
    order: 5;
    flex: 1 1 100%;
    padding-top: 4px;
  }
  table.dense td.sub {
    order: 6;
    flex: 1 1 100%;
    color: var(--muted);
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  table.dense td.hide-phone { display: none; }
  table.dense .qr-box,
  table.dense .qr-note {
    order: 10;
    flex: 1 1 100%;
  }

  table.dense.figures tr::after { content: none; display: none; }
  table.dense.figures tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    padding: 10px 12px;
  }
  table.dense.figures td {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    order: unset;
    width: auto;
    max-width: none;
    margin: 0;
    font-size: 0.82rem;
    white-space: nowrap;
  }
  table.dense.figures td.title {
    grid-column: 1 / -1;
    display: block;
    font-weight: 750;
    font-size: 0.92rem;
    overflow: visible;
    white-space: nowrap;
  }
  table.dense.figures td:not(.title)::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.68rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-weight: 650;
  }

  .tax-table,
  .tax-table thead,
  .tax-table tbody,
  .tax-table tr,
  .tax-table th,
  .tax-table td {
    display: revert;
    width: auto;
  }
  .tax-table { width: 100%; }
  .tax-table thead { display: table-header-group; }
  .tax-table tbody { display: table-row-group; }
  .tax-table tr {
    display: table-row;
    padding: 0;
    border: 0;
  }
  .tax-table th,
  .tax-table td {
    display: table-cell;
    padding: 4px 8px;
    border-bottom: 1px solid var(--paper-2);
  }
  .tax-table td::before { content: none; }
}

@media (min-width: 861px) {
  .app.nav-open .rail { transform: none; }
}

.icon-btn {
  background: rgba(28, 25, 23, 0.05);
  border: 0;
  color: var(--ink);
  text-decoration: none;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 1.15rem;
  transition: transform 0.15s ease, background-color 0.2s ease;
}
html.dark .icon-btn {
  background: rgba(255, 255, 255, 0.08);
}
.icon-btn:not(:disabled):hover {
  transform: translateY(-1px);
  background: rgba(28, 25, 23, 0.08);
}
.icon-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
.ingest-notice {
  margin: 0 0 12px;
}
.tool-hint {
  margin: 0 18px 12px;
  padding: 10px 12px;
  color: var(--muted);
  font-size: 0.9rem;
}
.tool-hint-blocked {
  color: #92400e;
  background: #fef3c7;
  border-radius: var(--radius-sm);
}
html.dark .tool-hint-blocked {
  color: #fcd34d;
  background: #3f2e14;
}
.jobs-notice {
  margin: 0 18px 12px;
  font-weight: 650;
  font-size: 0.9rem;
}
.jobs-notice-ok { color: var(--moss); }
.jobs-notice-error { color: var(--danger); }
.jobs-notice-warn { color: var(--kebap-light); font-weight: 500; }
.jobs-notice-running { color: var(--muted); font-weight: 500; font-style: italic; }
.main > .jobs-notice.ingest-notice { margin: 0 0 12px; }
.mark {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  line-height: 1;
  font-style: normal;
}
.meldung-tabs {
  margin-bottom: 14px;
}
.meldung-panel {
  border-top: 4px solid var(--topic, var(--accent));
}
.meldung-panel.topic-arbeit { --topic: #c1121f; }
.meldung-panel.topic-rechnungen { --topic: #d97706; }
.meldung-panel.topic-zahlungen { --topic: #2563eb; }
.meldung-panel.topic-preise { --topic: #7c3aed; }
.meldung-panel.topic-meldungen { --topic: #0f766e; }
html.dark .meldung-panel.topic-arbeit { --topic: #fb7185; }
html.dark .meldung-panel.topic-rechnungen { --topic: #fbbf24; }
html.dark .meldung-panel.topic-zahlungen { --topic: #60a5fa; }
html.dark .meldung-panel.topic-preise { --topic: #c4b5fd; }
html.dark .meldung-panel.topic-meldungen { --topic: #2dd4bf; }
.meldung-hint {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.meldung-list {
  padding: 0 8px 12px;
}
.notif-kat {
  margin: 10px 8px 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--topic, var(--muted));
}
.notif-row {
  display: flex;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-left: 4px solid var(--line);
  border-bottom: 1px solid var(--paper-2);
  padding: 14px 10px 14px 12px;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: 10px;
}
.notif-kind-rechnung { border-left-color: #d97706; }
.notif-kind-uploader { border-left-color: #059669; }
.notif-kind-zahlung { border-left-color: #2563eb; }
.notif-kind-zugeordnet { border-left-color: #0ea5e9; }
.notif-kind-preis { border-left-color: #7c3aed; }
.notif-kind-geburtstag { border-left-color: #e11d48; }
.notif-kind-umsatz { border-left-color: #0f766e; }
.notif-kind-barumsatz { border-left-color: #059669; }
html.dark .notif-kind-rechnung { border-left-color: #fbbf24; }
html.dark .notif-kind-uploader { border-left-color: #34d399; }
html.dark .notif-kind-zahlung { border-left-color: #60a5fa; }
html.dark .notif-kind-zugeordnet { border-left-color: #7dd3fc; }
html.dark .notif-kind-preis { border-left-color: #c4b5fd; }
html.dark .notif-kind-geburtstag { border-left-color: #fb7185; }
html.dark .notif-kind-umsatz { border-left-color: #2dd4bf; }
html.dark .notif-kind-barumsatz { border-left-color: #34d399; }
.notif-row:hover { background: var(--paper); }
.notif-row-icon { font-size: 1.35rem; line-height: 1.2; flex: none; }
.notif-row-body { display: grid; gap: 4px; min-width: 0; }
.notif-row-body strong { font-size: 0.98rem; }
.notif-row-body .pill { justify-self: start; }
.notif-row-hint { font-size: 0.78rem; }
.notif-line {
  display: block;
  text-align: left;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--muted);
}
.notif-line .mark { font-size: 0.95em; }
.notif-line-wert { color: var(--ink); }

.push-switch {
  position: relative;
  width: 44px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: #d6d3d1;
  flex: none;
  cursor: pointer;
  padding: 0;
}
.push-switch.on { background: var(--moss, #16a34a); }
.push-switch:disabled { opacity: 0.5; cursor: not-allowed; }
.push-switch span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}
.push-switch.on span { transform: translateX(20px); }

.people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.person {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow);
}
.person-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 4px;
}
.person-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--kebap);
  font-weight: 800;
  display: grid;
  place-items: center;
  flex: none;
  text-transform: uppercase;
}
.person h3 { margin: 0 0 6px; font-size: 1.05rem; }
.person dl { margin: 10px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.person dt { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
.person dd { margin: 2px 0 0; font-size: 0.9rem; }
.person-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.person-actions .ghost { flex: 1; }
.perm-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.perm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--ink);
}
.perm-chip input { width: 16px; height: 16px; }
.lohn-box {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.lohn-row {
  display: grid;
  gap: 6px;
  padding: 8px 0;
}
.lohn-row > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.tool-row, .flag-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid var(--paper-2);
}
.tool-row:last-child, .flag-row:last-child { border: 0; }
.tool-row p, .flag-row p { margin: 4px 0 0; color: var(--muted); font-size: 0.82rem; }
.flag-row .state {
  font-weight: 700;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.me-hero {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow);
}
.me-hero h2 { margin: 0 0 6px; font-family: var(--sans); }
.me-hero .person-avatar {
  width: 52px;
  height: 52px;
  font-size: 1.2rem;
}
.link-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
}
.link-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--paper-2);
  display: grid;
  place-items: center;
  flex: none;
  font-size: 1.2rem;
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.row-actions .icon-btn {
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  font-size: 0.95rem;
  border-radius: 8px;
}
.qr-box {
  margin-top: 8px;
  text-align: center;
}
.qr-box img {
  display: block;
  margin: 0 auto 6px;
  background: #fff;
}
.qr-box-lg { margin-top: 16px; }
.qr-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; }

.modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 22, 0.5);
  backdrop-filter: blur(6px);
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 16px;
}
.modal {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  width: min(440px, 100%);
  max-height: 90vh;
  overflow: auto;
  padding: 20px;
  box-shadow: var(--shadow-lift);
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.modal-head h2 { margin: 4px 0 0; font-family: var(--sans); font-size: 1.25rem; letter-spacing: -0.02em; }
.modal-amounts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.modal-amounts > div {
  background: var(--paper);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.modal-amounts .money { font-family: var(--sans); font-size: 1.2rem; font-weight: 650; margin: 4px 0 0; }
.modal-dl { margin: 0 0 16px; }
.modal-dl > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--paper-2);
}
.modal-dl dt { color: var(--muted); }
.modal-dl dd { margin: 0; text-align: right; }
.modal .primary { margin-top: 4px; }
.field-label {
  display: block;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.85rem;
}
.field-label select,
.modal select {
  display: block;
  width: 100%;
  margin-top: 6px;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  background: rgba(28, 25, 23, 0.04);
  color: var(--ink);
  font: inherit;
  border-radius: var(--radius-sm);
}
html.dark .field-label select,
html.dark .modal select {
  background: rgba(255, 255, 255, 0.06);
}
.assign-block { margin: 0 0 14px; }
.assign-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.modal-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.modal-actions .primary { width: 100%; margin-top: 0; }

.money-in { color: var(--moss); }
.money-out { color: var(--danger); }

.ratio-bar {
  height: 10px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 99px;
  margin: 10px 0 0;
  overflow: hidden;
  display: flex;
}
.ratio-bar > span {
  display: block;
  height: 100%;
  background: var(--kebap-light);
  transform-origin: left center;
  animation: ratio-grow 0.45s ease-out;
}
@keyframes ratio-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ratio-bar > span { animation: none; }
}
.ratio-bar > em {
  display: block;
  height: 100%;
  flex: 1;
  background: rgba(255, 255, 255, 0.7);
  font-style: normal;
}

.kassa-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
@media (min-width: 861px) {
  .kassa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.kassa-line, .kassa-total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 12px;
  font-size: 0.9rem;
}
.kassa-total {
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 12px;
  padding-bottom: 16px;
  font-weight: 650;
}
.kassa-col { padding-bottom: 8px; }
.kassa-col h2 { padding-bottom: 12px; }

.tax-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
@media (min-width: 861px) {
  .tax-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.tax-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; line-height: 1.25; }
.tax-table th, .tax-table td { padding: 4px 8px; border-bottom: 1px solid var(--paper-2); }
.tax-table th { color: var(--muted); font-weight: 650; text-align: right; }
.tax-table th:first-child, .tax-table td:first-child { text-align: left; }
.tax-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 120px;
  padding: 8px 18px 16px;
}
.tax-bar {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  background: transparent;
  border: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  color: var(--muted);
  font-size: 0.7rem;
}
.tax-bar-fill {
  width: 100%;
  min-height: 4px;
  border-radius: 3px 3px 0 0;
  background: var(--paper-2);
}
.tax-bar.active .tax-bar-fill { background: linear-gradient(180deg, var(--kebap-light), var(--kebap)); }
.tax-bar.active { color: var(--ink); font-weight: 650; }

.settings-form {
  padding: 4px 12px 8px;
  display: grid;
  gap: 4px;
}
.settings-form .field-label input,
.settings-form .field-label textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  background: rgba(28, 25, 23, 0.04);
  color: var(--ink);
  font: inherit;
  border-radius: var(--radius-sm);
}
html.dark .settings-form .field-label input,
html.dark .settings-form .field-label textarea {
  background: rgba(255, 255, 255, 0.06);
}
.settings-form textarea { min-height: 120px; resize: vertical; }
.flag-block { padding: 4px 0 8px; }
.flag-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 2px;
  accent-color: var(--accent);
}
/* D-030 „Kacheln auf Heute“ im Mitarbeiter-Formular. Nur bestehende Tokens — Dark kommt
   dadurch von selbst, keine zweite Palette. */
.kachel-block {
  margin: 4px 0 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.kachel-head {
  margin: 0 0 2px;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.kachel-block > .muted { margin: 0 0 10px; font-size: 0.82rem; }
.kachel-admin-note {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  font-size: 0.82rem;
  font-weight: 600;
}
.kachel-admin-note[hidden] { display: none; }
.kachel-block.kachel-locked .kachel-modi,
.kachel-block.kachel-locked .kachel-list { opacity: 0.5; }
.kachel-modi { display: grid; gap: 6px; }
.kachel-modus {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.86rem;
  line-height: 1.4;
}
.kachel-modus input[type="radio"] {
  width: 20px;
  height: 20px;
  flex: none;
  margin: 1px 0 0;
  accent-color: var(--accent);
}
.kachel-list { margin-top: 12px; display: grid; gap: 12px; }
.kachel-list[hidden] { display: none; }
.kachel-group {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--white);
}
.kachel-group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.kachel-group-head strong { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.kachel-bulk { display: inline-flex; gap: 10px; }
.kachel-bulk .text-btn { font-size: 0.78rem; }
.kachel-items { display: grid; gap: 4px; }
.kachel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 0.88rem;
}
.kachel-item input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--accent);
}
.kachel-name { flex: 1; }
.kachel-reason {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}
.kachel-item.kachel-off .kachel-name { color: var(--muted); text-decoration: line-through; }

.notify-hint {
  padding: 4px 0 8px;
}
.notify-event {
  align-items: center;
  gap: 12px;
}
.notify-head {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-bottom: 4px;
}
.notify-pair {
  display: flex;
  gap: 14px;
  flex: none;
  align-items: center;
}
.notify-head .notify-pair {
  gap: 14px;
  min-width: 108px;
  justify-content: space-between;
}
.notify-sw {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 48px;
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--muted);
  cursor: pointer;
}
.notify-sw input.notify-switch {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 24px;
  margin: 0;
  border-radius: 999px;
  background: #d6d3d1;
  position: relative;
  cursor: pointer;
  flex: none;
  accent-color: unset;
}
.notify-sw input.notify-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}
.notify-sw input.notify-switch:checked {
  background: var(--moss, #16a34a);
}
.notify-sw input.notify-switch:checked::after {
  transform: translateX(20px);
}
.notify-sw input.notify-switch:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.notify-sw .state {
  min-height: 24px;
}
html.dark .notify-sw input.notify-switch {
  background: #44403c;
}
html.dark .notify-sw input.notify-switch:checked {
  background: var(--moss, #16a34a);
}
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px 12px;
  align-items: center;
}
.form-actions .primary { width: auto; min-width: 160px; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.settings-ok {
  margin: 0 18px 12px;
  color: var(--moss);
  font-weight: 650;
}
.stb-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0 18px 18px;
}
.stb-stats div {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.stb-stats span { display: block; color: var(--muted); font-size: 0.78rem; }
.stb-stats strong { display: block; margin-top: 4px; }

@media (max-width: 860px) {
  .form-row, .stb-stats { grid-template-columns: 1fr 1fr; }
  html { font-size: 94%; }
}

.kassa-hero {
  background:
    linear-gradient(135deg, rgba(28, 25, 23, 0.94), rgba(69, 26, 23, 0.92)),
    linear-gradient(90deg, var(--kebap), var(--kebap-light));
  color: #fff;
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem 1.15rem;
  margin-bottom: 16px;
  box-shadow: var(--shadow-lift);
}
.kassa-hero h2 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.kassa-hero-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.kassa-hero .chips { margin: 0; }
.kassa-hero .chip {
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  color: rgba(255, 255, 255, 0.85);
}
.kassa-hero .chip.active {
  background: #fff;
  /* The hero is dark in both themes, so this chip is white in both. --ink flips with the
     theme and would put light text on white in dark mode — the colour stays fixed here. */
  color: #1c1917;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.kassa-hero .chip:disabled {
  opacity: 0.4;
  cursor: default;
}
.kassa-hero .chip:disabled:hover { transform: none; }
.kassa-hero-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.78rem;
  opacity: 0.9;
  margin-bottom: 6px;
}
.kassa-hero-amounts {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.78rem;
  opacity: 0.75;
  margin-top: 6px;
}
/* The total moved down here — it is the headline figure of the block and must not
   fade out with the two side amounts. */
.kassa-hero-amounts .hero-total { opacity: 1; }
/* A negative Zahllast is money back. The hero is dark in both themes, so this green is
   fixed like the active chip colour — a theme token would flip and lose contrast. */
.kassa-hero-amounts .hero-total.is-guthaben { color: #6ee7a8; }
.kassa-hero .hero-empty {
  margin: 10px 0 2px;
  font-size: 0.82rem;
  opacity: 0.75;
}

.boot-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 2rem 2.25rem;
  display: grid;
  place-items: center;
  gap: 14px;
}
.boot-spin {
  width: 3.5rem;
  height: 3.5rem;
  border: 4px solid var(--kebap);
  border-top-color: transparent;
  border-radius: 99px;
  animation: spin 0.8s linear infinite;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(28, 25, 23, 0.18);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(28, 25, 23, 0.3); }
html.dark ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); }

/* Invoice due rows */
tr.row-overdue { background: rgba(193, 18, 31, 0.08); }
tr.row-due-soon { background: rgba(245, 158, 11, 0.1); }
html.dark tr.row-overdue { background: rgba(230, 57, 70, 0.12); }
html.dark tr.row-due-soon { background: rgba(245, 158, 11, 0.12); }
.due-hint { font-size: 0.78rem; color: var(--danger); margin-left: 6px; }

/* Clickable table rows */
.clickable-row { cursor: pointer; }
.clickable-row:hover { background: var(--accent-soft); }

/* Charts */
.chart-wrap { position: relative; height: 280px; margin: 12px 0; }
.chart-wrap-preis { height: 320px; }
.chart-panel h2 { padding: 18px 18px 0; margin: 0; }
.chart-unavailable {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}
.panel-head-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.panel h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* Preisentwicklung */
.panel-inner { padding: 16px 18px; }
.preis-suggest { display: grid; gap: 6px; margin-top: 10px; max-height: 280px; overflow: auto; }
.preis-suggest-item, .preis-overview button {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  width: 100%; text-align: left; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--white); color: inherit;
}
.preis-suggest-item:hover { border-color: var(--accent); background: var(--accent-soft); }
.preis-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 18px 0; }
.preis-detail-head h3 { margin: 0; font-size: 1.05rem; }
.preis-alarme { padding: 0 18px; }
.preis-alarm { font-size: 0.85rem; margin: 4px 0; padding: 6px 10px; border-radius: 8px; }
.preis-alarm-up { background: rgba(193, 18, 31, 0.1); color: var(--danger); }
.preis-alarm-down { background: rgba(5, 150, 105, 0.12); color: var(--moss); }
.preis-overview { display: grid; gap: 6px; margin-top: 10px; max-height: 360px; overflow: auto; }

/* Kassa Ist */
.kassa-ist-panel { margin-top: 16px; }
/* The Startsaldo panel carried this spacing inline before it became collapsible. */
.kassa-start-panel { margin-top: 16px; }
.kassa-ist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 18px 12px; }
.kassa-ist-deltas { padding: 0 18px 16px; }
.kassa-delta-ok { color: var(--moss); }
.kassa-delta-plus { color: var(--moss); }
.kassa-delta-minus { color: var(--danger); }

/* Birthday widget */
.birthday-panel { margin-bottom: 16px; }
.birthday-list { list-style: none; margin: 0; padding: 0 18px 16px; }
.birthday-list li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.birthday-list li:last-child { border-bottom: 0; }
.birthday-today { background: linear-gradient(90deg, rgba(230, 57, 70, 0.08), transparent); border-radius: var(--radius-sm); padding-left: 10px !important; margin-left: -10px; }

/* Login PIN request */
.login-forgot { text-align: center; margin-top: 12px; }
.login-forgot .text-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 0.95rem;
}
.login-pin-notice {
  text-align: center;
  margin: 0 0 10px;
  color: var(--moss);
  font-size: 0.92rem;
  font-weight: 650;
}
.login-pin-request { text-align: left; }
.login-pin-request .muted { text-align: left; margin: 0 0 12px; }
.login-pin-request .field-label { color: var(--muted); }
.login-pin-request input[type="email"],
.login-pin-request input[type="text"],
.login-pin-request input[type="password"] {
  display: block;
  width: 100%;
  margin: 6px 0 0;
  padding: 12px 14px;
  min-height: 44px;
  font-size: 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--input-line);
  background: var(--paper-2);
}
.login-pin-request .primary { width: 100%; margin-top: 8px; }
.login-pin-request .ghost { width: 100%; margin-top: 8px; justify-content: center; min-height: 44px; }

/* Kurznamen */
.kurznamen-table { padding: 0 18px 16px; }
.kurzname-input { width: 100%; min-width: 120px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--input-line); background: var(--paper); }

@media (max-width: 640px) {
  .kassa-ist-grid { grid-template-columns: 1fr; }
}

/* ---- Prototyp „Start (Vorschau)" — iOS-Startbildschirm (D-031) --------------------------
   Eigene Darstellung des vorhandenen Heute-Katalogs. Jeder Selektor trägt das Präfix
   `.ios-`, damit dieser Block spurlos entfernt werden kann, falls Bubby ihn verwirft.
   Der Block steht am Dateiende, damit er die Grundregeln von `.main` überschreibt,
   ohne dort etwas zu ändern. */
.ios-start {
  /* Systemschriftstapel nur hier — eingegrenzte Abweichung von D-021. */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  padding: 0 max(18px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  max-width: none;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
  /* Grau für die kleine Schrift dieser Seite (11–12 px). Dunkler als var(--muted),
     damit auch hell 5:1 statt 4,2:1 erreicht wird — gleiche warme Familie, kein
     neuer Farbton. Dunkel reicht var(--muted) mit 8,3:1 auf Schwarz. */
  --ios-grau: #6b645e;
  /* Das Aufgaben-Rot der Zähler-Badge, nur auf dieser Seite eine Spur dunkler als
     var(--accent). Weiß auf #e63946 misst 4,17:1 und liegt damit unter AA für die
     12-px-Fettschrift der Badge; #d22b38 misst 5,07:1 (ISSUE-018). Außerhalb von
     `.ios-start` bleibt var(--accent) unverändert — dieselbe Farbfamilie, ein Ton tiefer. */
  --ios-akzent: #d22b38;
}
html.dark .ios-start {
  background: #000;
  --ios-grau: var(--muted);
}

.ios-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: calc(18px + env(safe-area-inset-top)) 0 8px;
}
.ios-head-copy { min-width: 0; }
.ios-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ios-grau);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ios-title {
  margin: 0;
  font-size: 34px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.024em;
  color: var(--ink);
}
html.dark .ios-title { color: #f5f5f7; }
.ios-menu {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-size: 1.15rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  appearance: none;
}
html.dark .ios-menu {
  background: #1c1c1e;
  border-color: rgba(255, 255, 255, 0.16);
  color: #f5f5f7;
}
/* Aktualisieren und Menue stehen als Paar rechts oben; der Kopftext behaelt seinen Platz.
   Optisch ausgerichtet, nicht rechnerisch: die Knoepfe sitzen auf der **Versalmitte** des
   grossen Titels, nicht auf der Mitte seiner Zeilenbox. Im Browser gemessen lag die
   Versalmitte bei y = 54,59 und die Knopfmitte bei 51,31 — 3,3 px zu hoch. Genau das
   holt der Versatz hier zurueck. */
.ios-head-tools {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translateY(3.3px);
}
/* Dieselbe `spin`-Animation wie in der `.bar` — keine zweite. */
.ios-refresh.is-busy { animation: spin 0.8s linear infinite; }
.ios-refresh:disabled { opacity: 0.85; cursor: wait; }

.ios-group { margin: 0; }
.ios-group-head {
  margin: 28px 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ios-grau);
}
.ios-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 6px;
}

.ios-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Der Abstand steht an den Bausteinen selbst (8 px unter dem Symbol, 0 zwischen Name
     und grauer Zeile), nicht als `gap` mit einem Negativzug dagegen. Ein Negativwert,
     der einen zu grossen Abstand wieder einfaengt, ist keine Abstandsskala. */
  gap: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  /* Langes Druecken oeffnet auf iOS sonst das Auswahlmenue ueber der Kachel. Das ist auch
     die Stelle, an der spaeter ein Verschieben andocken wuerde — hier wird sie nur frei
     geraeumt, nicht gebaut. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.ios-slot {
  position: relative;
  display: block;
  line-height: 0;
}
.ios-icon {
  width: 62px;
  height: 62px;
  /* Squircle wie auf iOS — ein Radius in Prozent, kein SVG-Mask. */
  border-radius: 22.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
  /* Emoji sitzen in ihrer Zeilenbox zu tief. Im Browser gemessen (Tintenmitte gegen
     Kastenmitte, alle 25 Symbole): 23 von 25 zu tief, Mittel 2,18 px, Median 1,5 px.
     Ein Innenabstand unten von 3 px hebt den Glyph bei `box-sizing: border-box` um genau
     die Haelfte, also 1,5 px — den Median. Ein globaler Versatz kann die Streuung von
     0 bis 6,5 px nicht ausgleichen; er richtet sich nach dem typischen Symbol, nicht nach
     den vier Ausreissern. Der Plan hatte 1 px geschaetzt. */
  padding-bottom: 3px;
  /* Zweistufig: eine harte Kontaktkante direkt unter dem Symbol und ein weicher, weiter
     Schatten darunter. Ein einzelner grosser Schatten sieht aus wie aufgeklebt. Hell und
     dunkel getrennt — auf Schwarz braucht dieselbe Wirkung mehr Deckkraft. */
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.1), 0 8px 18px rgba(28, 25, 23, 0.16);
  /* Loslassen: weich mit Ueberschwingen. Druecken ueberschreibt das unten mit 90 ms. */
  transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
}
html.dark .ios-icon { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.55); }
/* Druecken ist hart und sofort, Loslassen federt zurueck — so fuehlt sich iOS an. */
.ios-app:active .ios-icon {
  transform: scale(0.92);
  transition: transform 0.09s ease-out;
}

/* Die Palette. Zehn Töne, jeder ein Verlauf `180deg` von hell oben nach satt unten —
   so zeichnet iOS seine Systemsymbole. Die Farbe sagt, worum es geht: Geld grün,
   Bank blau, Karte indigo, Arbeit orange, Fällig rot, Berichte lila, Personen pink,
   Dokumente hellblau, Info gelb. Grau bleibt für das eine, was keine Bedeutung hat:
   Einstellungen. Welche Kachel welchen Ton trägt, steht in `START_TONES` (app.js).

   Je Ton **ein** Verlauf, in hell und dunkel derselbe. Die früheren gedimmten
   Dunkel-Zwillinge sind ersatzlos weg: ein iPhone dimmt seine Symbole im Dunkelmodus
   nicht, es dimmt den Hintergrund. Schwarz wird hier nur die Seite und der Ring der
   Badge. Ein gedimmter Zwilling war außerdem eine zweite Wahrheit je Ton, die
   auseinanderlaufen konnte — jetzt gibt es je Ton genau einen Verlauf und genau eine
   Wert-Badge-Farbe, und der Driftschutz-Test zählt beide. */
.ios-ton-gruen    { background: linear-gradient(180deg, #5edc80, #22a147); }
.ios-ton-blau     { background: linear-gradient(180deg, #4fa3ff, #0062d6); }
.ios-ton-indigo   { background: linear-gradient(180deg, #8280e6, #3f3db4); }
.ios-ton-orange   { background: linear-gradient(180deg, #ffb340, #ff9500); }
.ios-ton-rot      { background: linear-gradient(180deg, #ff6f63, #dc2a20); }
.ios-ton-lila     { background: linear-gradient(180deg, #c77fea, #8e38bc); }
.ios-ton-pink     { background: linear-gradient(180deg, #ff6b87, #db1f44); }
.ios-ton-hellblau { background: linear-gradient(180deg, #62c6f0, #1c8fc4); }
.ios-ton-gelb     { background: linear-gradient(180deg, #ffdd4d, #ffcc00); }
.ios-ton-grau     { background: linear-gradient(180deg, #a9a9ae, #6e6e73); }

/* Badge. Zwei Arten, eine Form: der Zähler offener Arbeit (Aufgaben-Rot) und der Betrag
   der Kachel (dunklerer Ton der eigenen Kachelfarbe). Kreis bei einer Ziffer, Kapsel ab
   zwei Zeichen — `min-width` und `border-radius: 999px` machen genau das. Sie wächst nach
   links über das eigene Symbol (`transform-origin: 100% 50%`), nie in die Nachbarspalte.
   Der Ring in der Seitenfarbe setzt sie wie auf iOS vom Symbol ab. */
.ios-badge {
  position: absolute;
  /* Auf den Eckbogen gesetzt, nicht auf die gedachte Ecke: der Squircle hat 22,5 % von
     62 px = 13,95 px Radius, der Mittelpunkt seines Eckbogens liegt bei (48,05 | 13,95).
     Der Punkt des Bogens unter 45 Grad ist (57,92 | 4,09) — genau dort sitzt der
     Mittelpunkt der Badge, also 62 - 57,92 - 10,5 = -6,4 px rechts und 4,09 - 10,5 =
     -6,4 px oben. Vorher waren es -6 / -5, und die Pille sass sichtbar neben dem Bogen. */
  top: -6.4px;
  right: -6.4px;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 21px;
  letter-spacing: -0.01em;
  /* Ziffern gleicher Breite: die Pille springt beim Aktualisieren nicht in der Breite. */
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
  transform-origin: 100% 50%;
  box-shadow: 0 0 0 2px var(--paper);
}
html.dark .ios-badge { box-shadow: 0 0 0 2px #000; }
/* Aufziehen genau einmal je Ladevorgang: die Klasse setzt `viewStart` ans Raster, nicht an
   die einzelne Badge — also laufen alle gleichzeitig, ohne Versatz. Die Feder steckt in der
   Kurve, nicht in einem zweiten Zwischenschritt. */
@keyframes ios-badge-pop {
  from { transform: scale(0); }
  to { transform: scale(1); }
}
.ios-pop .ios-badge { animation: ios-badge-pop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
/* Die Zähler-Badge: offene Arbeit. Rot bleibt den Aufgaben. */
.ios-zaehler { background: var(--ios-akzent); }

/* Die Wert-Badge: der dunklere Ton der eigenen Kachelfarbe, hergeleitet aus dem unteren
   Verlaufsstopp — H und S gehalten, L gesenkt, bis Weiß mindestens 5,05:1 erreicht **und**
   die Pille sich mit mindestens 2,85:1 vom oberen (hellsten) Verlaufsstopp abhebt, weil sie
   oben rechts sitzt. Kein Ton trägt hier das Aufgaben-Rot. */
.ios-wert-gruen    { background: #1b7f38; }
.ios-wert-blau     { background: #0051b1; }
.ios-wert-indigo   { background: #37359d; }
.ios-wert-orange   { background: #a15e00; }
.ios-wert-rot      { background: #a01f17; }
.ios-wert-lila     { background: #772f9e; }
.ios-wert-pink     { background: #a11732; }
.ios-wert-hellblau { background: #166f98; }
.ios-wert-gelb     { background: #866b00; }
.ios-wert-grau     { background: #5b5b5f; }

.ios-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Ohne Umbruchmoeglichkeit schneidet `overflow: hidden` schmale Telefone mitten im
     Wort ab ("Offene Rechnunge"). `anywhere` bricht nur, wenn es sonst nicht passt. */
  overflow-wrap: anywhere;
  margin: 8px 0 0;
  min-height: 2.4em;
  max-width: 100%;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
html.dark .ios-name { color: #f5f5f7; }
.ios-sub {
  display: block;
  /* Genau eine graue Zeile. Auch leer behält sie ihre Höhe, damit das Raster nicht springt. */
  min-height: 1.3em;
  max-width: 100%;
  margin: 0;
  font-size: 11px;
  line-height: 1.3;
  color: var(--ios-grau);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Die Geldkarte — steht still, solange `START_CARDS` in app.js `false` ist. Runde 3 zeigt
   den Betrag als Zahl auf dem Symbol; dieser Block bleibt vollständig stehen, damit ein
   Zurück eine Zeile Code kostet und keinen Umbau. Wo ein Betrag steht, zeigt die Karte ihn
   zwei Spalten breit, groß und lesbar, das Symbol nur noch als kleiner Ton-Chip oben links.
   Welche Kachel eine Karte wird, entscheidet eine Regel in `startIsCard` (Schalter und
   money mit Betrag), keine Liste von IDs. Radius 14 px ist derselbe Squircle-Anteil wie
   beim Symbol: 22,5 % von 62 px. */
.ios-card {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  /* Genau die Höhe einer Symbolkachel, damit eine Reihe aus Karten so hoch ist wie eine
     Reihe aus Symbolen: 62 px Symbol + 2 × 7 px Abstand + 2,4 em Name (13 px) − 3 px
     + 1,3 em graue Zeile (11 px) = 115,5 px. Im Browser nachgemessen. */
  min-height: 115.5px;
  padding: 10px 12px;
  border: 0;
  border-radius: 14px;
  background: var(--white);
  color: inherit;
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.06), 0 8px 18px rgba(28, 25, 23, 0.12);
  transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
}
html.dark .ios-card {
  background: #1c1c1e;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.5);
}
.ios-card:active {
  transform: scale(0.96);
  transition: transform 0.09s ease-out;
}
.ios-chip {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 22.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  /* Derselbe Ausgleich wie beim Symbol, auf die Groesse des Chips heruntergerechnet. */
  padding-bottom: 1px;
}
.ios-card-value {
  /* Der Betrag sitzt unten, der Chip oben — dazwischen atmet die Karte. */
  margin-top: auto;
  max-width: 100%;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  /* Ziffern gleicher Breite: Beträge stehen untereinander wie auf einem Kontoauszug. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink);
}
html.dark .ios-card-value { color: #f5f5f7; }
.ios-card-name {
  max-width: 100%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
}
html.dark .ios-card-name { color: #f5f5f7; }
.ios-card-sub {
  /* Auch leer behält die Zeile ihre Höhe, damit die Karten gleich hoch bleiben. */
  min-height: 1.3em;
  max-width: 100%;
  font-size: 11px;
  line-height: 1.3;
  color: var(--ios-grau);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Das Umsatz-Widget unter dem Raster. Die Zahlen sind dieselben wie im `.kassa-hero` auf
   Heute und Kassa — geteilt werden Datenquelle, Rundung, Zeiträume und Sätze, nicht das
   Aussehen. Eine Karte in voller Breite, Radius 22 px, darüber ein Segmentwähler statt
   Chips mit Emoji. `.kassa-hero` bleibt unberührt und existiert weiterhin genau einmal. */
.ios-hero {
  display: block;
  margin: 28px 0 0;
  padding: 18px;
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 8px 20px rgba(28, 25, 23, 0.1), 0 1px 2px rgba(28, 25, 23, 0.06);
}
html.dark .ios-hero {
  background: #1c1c1e;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
}
.ios-hero-titel {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
html.dark .ios-hero-titel { color: #f5f5f7; }

/* Segmentwähler wie auf iOS: eine Spur, vier gleich breite Felder, das gewählte hebt sich
   als weiße Fläche heraus. Kein Emoji — die vier Wörter tragen sich allein. */
.ios-segs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  padding: 2px;
  border-radius: 9px;
  background: rgba(120, 120, 128, 0.12);
}
.ios-seg {
  min-width: 0;
  padding: 8px 2px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
html.dark .ios-seg { color: #f5f5f7; }
.ios-seg.is-an {
  background: var(--white);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}
html.dark .ios-seg.is-an {
  background: #636366;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
}
/* Ein Tag ohne Umsatz ist kein toter Klick: das Feld ist deaktiviert und sagt im Titel,
   warum — derselbe Satz wie auf Heute und Kassa. */
.ios-seg:disabled { opacity: 0.38; cursor: not-allowed; }

.ios-hero-summe {
  margin: 18px 0 0;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.028em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
html.dark .ios-hero-summe { color: #f5f5f7; }
.ios-hero-zeitraum {
  margin: 0;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ios-grau);
}
/* Der Balken trägt die Töne der Kacheln „Kassa Bar" (grün) und „SumUp" (indigo): die
   Spur ist die Karte, der gefüllte Teil das Bargeld. Farben kommen aus `.ios-ton-*`. */
.ios-hero-balken {
  margin: 18px 0 0;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
}
.ios-hero-balken > span {
  display: block;
  height: 100%;
  border-radius: 999px;
}
.ios-hero-teile {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 0;
}
.ios-hero-teil {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--ios-grau);
}
.ios-punkt {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.ios-hero-betrag {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
html.dark .ios-hero-betrag { color: #f5f5f7; }
/* Keine Zahlen? Dann eine ehrliche Zeile statt eines 0-%-Balkens — Kopf und Segmentwähler
   bleiben stehen, damit man weiterschalten kann. */
.ios-hero-leer {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ios-grau);
}

.ios-note,
.ios-error {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ios-grau);
}
.ios-error { color: var(--danger); font-weight: 600; }
.ios-error:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  /* Vier Bewegungen gibt es auf dieser Seite, und alle vier stehen hier still:
     die Feder des Symbols, die Feder der Karte, das Aufziehen der Badge und die
     Drehung des Aktualisieren-Knopfes. Der Knopf sagt weiterhin ueber `disabled`
     und `aria-busy`, dass er arbeitet — die Rueckmeldung geht nicht verloren. */
  .ios-icon { transition: none; }
  .ios-app:active .ios-icon { transform: none; transition: none; }
  .ios-card { transition: none; }
  .ios-card:active { transform: none; transition: none; }
  .ios-pop .ios-badge { animation: none; }
  .ios-refresh.is-busy { animation: none; }
}

@media (max-width: 380px) {
  /* Ein langer Betrag („€ 1.234.567,89") muss auf schmalen Telefonen einzeilig bleiben.
     Abschneiden käme bei Geld nicht in Frage, umbrechen auch nicht — also wird die Zahl
     kleiner, statt zu lügen. Dasselbe gilt für den vollen Betrag in der grauen Zeile. */
  .ios-card-value { font-size: 19px; }
  .ios-sub { font-size: 10px; }
}

@media (max-width: 340px) {
  /* 320 px: „Offene Rechnungen" und „Meine Dokumente" brauchen in 66,5 px Spaltenbreite
     drei Zeilen. `overflow-wrap` allein bricht sie zwar, die zweizeilige Klammer schneidet
     die dritte Zeile aber wieder ab. Drei Zeilen sind besser als ein halbes Wort. */
  .ios-name { -webkit-line-clamp: 3; min-height: 3.6em; }
  .ios-card-value { font-size: 17px; }
  .ios-sub { font-size: 9.5px; }
  /* 320 px: die Spalte ist 66,5 px, das Symbol 62 px — es bleiben 2,25 px bis zur
     Spaltenkante und 6 px Spaltenabstand. Mit -6,4 px ragte die Pille 4,15 px in den
     Abstand und damit ueber dessen Mittellinie. Hier sitzt sie deshalb 1,4 px enger. */
  .ios-badge { top: -5px; right: -5px; }
}

@media (min-width: 861px) {
  /* Desktop: eine Telefonspalte statt einer weiten Fläche — das Raster bleibt lesbar.
     Der Menü-Knopf entfällt, weil die Seitenleiste hier ohnehin steht. */
  .ios-start { max-width: 460px; margin: 0 auto; }
  .ios-menu { display: none; }
}