/* =========================================================
   Stundentracker – Stylesheet
   Farben kommen als CSS-Variablen aus lib/theme.php.
   ========================================================= */

@font-face {
  font-family: 'Delight';
  src: url('fonts/Delight-Regular.woff2') format('woff2'),
       url('fonts/Delight-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Delight';
  src: url('fonts/Delight-Bold.woff2') format('woff2'),
       url('fonts/Delight-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Delight';
  src: url('fonts/Delight-Black.woff2') format('woff2'),
       url('fonts/Delight-Black.woff') format('woff');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* Standardschema »froodmat« – wird von lib/theme.php überschrieben,
   sobald in den Einstellungen eigene Farben hinterlegt sind. */
:root {
  --accent: #ffdc03;
  --accent-text: #07133b;
  --bg: #0b1020;
  --surface: #131a2e;
  --text: #fffbe5;
  --muted: #b9c7dd;
  --border: #222b45;
  --positive: #4ade80;
  --placeholder: #919caf;
  --danger: #f2705a;
  --radius: 10px;
  /* Fallback, falls lib/theme.php nicht eingebunden ist (z. B. setup.php) */
  --caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%23b9c7dd' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --cal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9c7dd' stroke-width='1.7' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='16' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
  --font: 'Delight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --gap: 20px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04);
}

* { box-sizing: border-box; }

/* ---------- Bildlaufleisten im Farbschema ----------
   Gilt für die Seite und für alles, was innen scrollt: Auswahllisten,
   Rückfragen, Änderungsnotizen. Firefox versteht die beiden ersten
   Angaben, alles darunter ist für Chrome, Edge und Safari. */
html {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted) 50%, transparent) transparent;
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  /* Durchsichtiger Rand plus background-clip ergibt einen schlanken
     Balken mit Luft ringsum, ohne eine zweite Ebene zu brauchen. */
  background: color-mix(in srgb, var(--muted) 42%, transparent);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--muted) 68%, transparent);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }

/* hidden muss stärker sein als jedes display aus einer Klasse – sonst
   blieben Leisten wie die Auswahlzeile sichtbar, obwohl sie leer sind. */
[hidden] { display: none !important; }

/* Fokusrahmen nur bei Tastaturbedienung zeigen, nicht beim Mausklick. */
:focus:not(:focus-visible) { outline: none; }
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.info-btn:focus-visible,
.brand-home:focus-visible,
.icon-btn:focus-visible,
.tab:focus-visible,
.chip:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { font-weight: 700; letter-spacing: -0.015em; margin: 0; }
h2 { font-size: 15px; }
h3 { font-size: 17px; }
a { color: inherit; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em;
       background: var(--bg); padding: 1px 5px; border-radius: 4px; }

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  padding: 12px max(16px, env(safe-area-inset-left)) 12px max(16px, env(safe-area-inset-right));
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--border);
  /* Eigene Ebene, damit der Weichzeichner beim Scrollen nicht
     bei jedem Bild neu über den Seiteninhalt gerechnet wird. */
  transform: translateZ(0);
}
.brand { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.brand-home {
  display: flex; align-items: center; gap: 10px;
  border: 0; background: none; color: inherit; font: inherit;
  padding: 4px 6px; margin-left: -6px; border-radius: var(--radius); cursor: pointer;
  transition: background .15s;
}
.brand-home:hover { background: var(--bg); }
.brand-logo { display: flex; align-items: center; height: 26px; color: var(--accent); }
.brand-logo svg, .brand-logo img { height: 26px; width: auto; max-width: 130px; }
.brand-name { font-weight: 900; letter-spacing: -0.02em; font-size: 16px; white-space: nowrap; }

.info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex-shrink: 0; padding: 0;
  border: 0; background: none; color: var(--muted); cursor: pointer;
  border-radius: 50%; transition: color .15s, background .15s;
}
.info-btn:hover { color: var(--accent); background: var(--bg); }
.info-btn svg { width: 16px; height: 16px; }

/* Liegt ein Update bereit, wird das Info-Symbol rot und pocht ruhig. */
.info-btn.has-update { color: var(--danger); }
.info-btn.has-update:hover { color: var(--danger); }
.info-btn.has-update svg { animation: update-pulse 1.9s ease-in-out infinite; }

.update-flag {
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 4px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger);
  transition: background .15s;
}
.update-flag:hover { background: color-mix(in srgb, var(--danger) 26%, transparent); }
.update-flag:focus { outline: none; }
.update-flag:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }
.update-flag[hidden] { display: none; }

@keyframes update-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.22); opacity: .65; }
}
@media (prefers-reduced-motion: reduce) {
  .info-btn.has-update svg { animation: none; }
}
/* Auf schmalen Bildschirmen genügt das rote Symbol. */
@media (max-width: 560px) {
  .update-flag { display: none; }
}

.tabs { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: none; color: var(--muted);
  font: inherit; font-size: 14px; font-weight: 700;
  padding: 7px 12px; border-radius: var(--radius); cursor: pointer;
  white-space: nowrap; transition: background .15s, color .15s;
}
.tab svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .85; }
.tab.is-active svg { opacity: 1; }
.tab:hover { color: var(--text); background: var(--bg); }
.tab.is-active { color: var(--accent-text); background: var(--accent); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--muted); cursor: pointer;
  text-decoration: none; transition: color .15s, border-color .15s;
}
.icon-btn:hover { color: var(--text); border-color: var(--text); }
.icon-btn svg { width: 17px; height: 17px; }

/* ---------- Layout ---------- */
.wrap {
  max-width: 1400px; margin: 0 auto;
  padding: var(--gap) max(16px, env(safe-area-inset-left))
           calc(var(--gap) + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-right));
  display: grid; gap: var(--gap);
}
.view { display: none; }
.view.is-active { display: grid; gap: var(--gap); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px);
  padding: 18px;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.card-head h2 { font-size: 16px; letter-spacing: -.015em; color: var(--muted); }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hint { color: var(--muted); font-size: 13px; margin: 0 0 12px; line-height: 1.6; }
/* Steht der Hinweis unter Knöpfen, braucht er Luft nach oben. */
.row-actions + .hint,
.icon-preview + .hint { margin-top: 16px; margin-bottom: 0; }

/* ---------- Formulare ---------- */
.input {
  width: 100%; font: inherit; font-size: 14px;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 9px 11px; outline: none;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
/* Der Pfeil kommt als --caret aus lib/theme.php und traegt dort die
   gedimmte Textfarbe des aktuellen Schemas. background-size ist
   zwingend: ohne die Angabe skaliert das SVG auf die volle Feldhoehe.
   Gilt nur noch fuer nicht aufgewertete Felder (setup.php, kein JS). */
select.input {
  background-image: var(--caret);
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 9px 9px;
  padding-right: 26px;
}

.input::placeholder { color: var(--placeholder); opacity: 1; }
.input::-webkit-input-placeholder { color: var(--placeholder); }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; resize: vertical; }
textarea.input { line-height: 1.45; }

/* ---------- Eigene Auswahlfelder und Datepicker ---------- */
/* Das native <select> bzw. <input type=date> bleibt im DOM erhalten und
   ist weiterhin die Datenquelle – es wird nur unsichtbar gemacht. */
.cs { position: relative; display: block; width: 100%; }
.cs-native {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none; border: 0; padding: 0; margin: 0;
}
.cs-btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font: inherit; font-size: 14px; text-align: left;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 9px 28px 9px 11px; cursor: pointer; position: relative;
  transition: border-color .15s, box-shadow .15s;
}
.cs-btn:hover { border-color: color-mix(in srgb, var(--text) 30%, var(--border)); }
.cs-btn:focus-visible,
.cs.is-open .cs-btn {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.cs-btn::after {
  content: ''; position: absolute; right: 10px; top: 50%; margin-top: -4px;
  width: 9px; height: 9px; background: var(--caret) no-repeat center / 9px 9px;
  transition: transform .18s;
}
.cs.is-open .cs-btn::after { transform: rotate(180deg); }
.cs-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-btn.is-empty .cs-label { color: var(--placeholder); }
.cs-swatch { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.cs-logo {
  width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0; overflow: hidden;
  border: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
}
.cs-logo img { width: 100%; height: 100%; object-fit: contain; padding: 1px; }

.pop {
  position: fixed; z-index: 300;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px); box-shadow: var(--shadow);
  padding: 5px; overflow: auto; overscroll-behavior: contain;
}
.pop[hidden] { display: none; }

.cs-search { padding: 4px 4px 7px; position: sticky; top: -5px; background: var(--surface); }
.cs-opt {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font: inherit; font-size: 14px; text-align: left; color: var(--text);
  background: none; border: 0; border-radius: calc(var(--radius) - 2px);
  padding: 8px 10px; cursor: pointer;
}
.cs-opt:hover, .cs-opt.is-cursor { background: var(--bg); }
.cs-opt.is-selected { font-weight: 700; }
.cs-opt.is-selected::after {
  content: '✓'; margin-left: auto; color: var(--accent); font-size: 12px; padding-left: 8px;
}
.cs-group {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); padding: 9px 10px 4px;
}
.cs-empty { padding: 14px 10px; color: var(--muted); font-size: 13px; text-align: center; }

/* Aktionszeile am Fuß der Liste, z. B. „Neues Projekt anlegen“ */
.cs-action-wrap {
  position: sticky; bottom: -5px; background: var(--surface);
  border-top: 1px solid var(--border); margin-top: 5px; padding-top: 5px;
}
.cs-action {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font: inherit; font-size: 13px; font-weight: 700; text-align: left;
  color: var(--accent); background: none; border: 0;
  border-radius: calc(var(--radius) - 2px); padding: 9px 10px; cursor: pointer;
}
.cs-action:hover { background: var(--bg); }
.cs-action-icon { display: flex; flex-shrink: 0; }
.cs-action-icon svg { width: 14px; height: 14px; }

/* ---------- Hilfe am Eingabefeld ---------- */
.input-help { position: relative; display: block; }
.input-help .input { padding-right: 34px; }
.help-btn {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font: inherit; font-size: 12px; font-weight: 700; line-height: 1;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--bg); color: var(--muted);
  transition: color .15s, border-color .15s;
}
.help-btn:hover { color: var(--accent); border-color: var(--accent); }
.help-btn:focus { outline: none; }
.help-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Dasselbe Fragezeichen, aber neben einer Beschriftung statt im Feld. */
.help-inline {
  position: static; transform: none;
  width: 15px; height: 15px; font-size: 10px;
  flex-shrink: 0;
}
.has-help { display: inline-flex; align-items: center; gap: 6px; }
.card-head h2.has-help { display: inline-flex; }

.help-pop { padding: 16px 17px; width: 330px; }
.help-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--muted); margin-bottom: 11px;
}
.help-list {
  display: grid; grid-template-columns: auto 1fr; gap: 7px 13px;
  margin: 0 0 14px; align-items: baseline;
}
.help-list dt {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; font-weight: 700; color: var(--accent);
  background: var(--bg); border-radius: 5px; padding: 3px 7px;
  justify-self: start; white-space: nowrap;
}
.help-list dd { margin: 0; font-size: 13px; line-height: 1.45; }
.help-note {
  font-size: 12px; line-height: 1.55; color: var(--muted);
  padding-top: 11px; border-top: 1px solid var(--border);
}
.help-note + .help-note { margin-top: 9px; padding-top: 9px; }
.help-note b { color: var(--text); }
.help-note code {
  font-size: 11px; background: var(--bg); padding: 1px 5px;
  border-radius: 4px; color: var(--text);
}

/* ---------- Farbwähler ---------- */
.cp { position: relative; display: inline-block; width: 30px; height: 30px; flex-shrink: 0; }
.cp-btn {
  width: 30px; height: 30px; padding: 0; cursor: pointer;
  border: 1px solid var(--border); border-radius: 7px;
  background: #000; transition: border-color .15s;
}
.cp-btn:hover { border-color: color-mix(in srgb, var(--text) 40%, var(--border)); }
.cp-btn:focus { outline: none; }
.cp-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Waagerecht nichts überstehen lassen: der Markierungspunkt ragt am Rand
   des Kreises über dessen Kanten hinaus und löste sonst einen
   Bildlaufbalken aus. Der Kreis ist deshalb um diesen Überstand kleiner
   als die nutzbare Breite (192 + 2 × 8 = 208). */
.cp-pop {
  padding: 14px; width: 236px; display: grid; gap: 11px;
  overflow: hidden auto;
}

/* Farbton rundherum, Sättigung nach außen – Helligkeit als Schleier darüber. */
.cp-wheel {
  position: relative; width: 192px; height: 192px; margin: 0 auto;
  border-radius: 50%; cursor: crosshair; touch-action: none;
  background:
    radial-gradient(circle closest-side, #fff 0%, rgba(255,255,255,0) 100%),
    conic-gradient(from 0deg,
      #f00 0deg, #ff0 60deg, #0f0 120deg, #0ff 180deg,
      #00f 240deg, #f0f 300deg, #f00 360deg);
  box-shadow: inset 0 0 0 1px var(--border);
}
.cp-tint {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  mix-blend-mode: normal;
}
.cp-dot {
  position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; border: 2px solid #fff; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.35);
}

/* Der Helligkeitsregler trägt seinen Verlauf selbst, seine Schiene muss
   deshalb durchsichtig bleiben. Die Auswahl mit input[type=range] davor
   ist zwingend: ohne sie gewinnt die allgemeine Reglerregel, weil ein
   Attributselektor plus Element schwerer wiegt als eine Klasse allein –
   und malt einen dunklen Strich quer über den Verlauf. */
.cp-light {
  width: 100%; height: 18px; border-radius: 999px;
  border: 1px solid var(--border);
}
input[type=range].cp-light::-webkit-slider-runnable-track {
  background: transparent; height: 16px; border-radius: 999px;
}
input[type=range].cp-light::-moz-range-track { background: transparent; height: 16px; }
input[type=range].cp-light::-moz-range-progress { background: transparent; }
input[type=range].cp-light::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; margin-top: 0;
  border-radius: 50%; background: #fff; border: 1px solid rgba(0, 0, 0, .45);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
input[type=range].cp-light::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 1px solid rgba(0, 0, 0, .45);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

.cp-bottom { display: flex; align-items: flex-end; gap: 8px; }
.cp-bottom .cp-field { flex: 1; }
.cp-field { display: grid; gap: 3px; }
.cp-field > span {
  font-size: 10px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
}
.cp-hex {
  font-size: 13px; padding: 7px 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.cp-pipette {
  width: 34px; height: 34px; flex-shrink: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--muted); cursor: pointer;
  transition: color .15s, border-color .15s;
}
.cp-pipette:hover { color: var(--accent); border-color: var(--accent); }
.cp-pipette svg { width: 17px; height: 17px; }

/* Datepicker */
.dp-btn { padding-right: 30px; }
.dp-btn::after {
  content: ''; position: absolute; right: 9px; top: 50%; margin-top: -7px;
  width: 14px; height: 14px; background: var(--cal) no-repeat center / 14px 14px;
  transform: none;
}
.dp-pop { padding: 12px; width: 268px; }
.dp-head { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.dp-title {
  flex: 1; text-align: center; font-weight: 700; font-size: 14px;
  background: none; border: 0; color: var(--text); font-family: inherit;
  cursor: pointer; border-radius: calc(var(--radius) - 2px); padding: 5px 8px;
}
.dp-title:hover { background: var(--bg); }
.dp-nav {
  width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--muted); cursor: pointer;
  border-radius: calc(var(--radius) - 2px); font-size: 15px; line-height: 1;
}
.dp-nav:hover { background: var(--bg); color: var(--text); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-wd {
  font-size: 10px; font-weight: 700; color: var(--muted); text-align: center;
  padding-bottom: 5px; text-transform: uppercase; letter-spacing: .04em;
}
.dp-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font: inherit; font-size: 13px; font-variant-numeric: tabular-nums;
  border: 1px solid transparent; background: none; color: var(--text);
  border-radius: calc(var(--radius) - 2px); cursor: pointer; padding: 0;
}
.dp-day:hover { background: var(--bg); }
.dp-day.is-out { color: var(--placeholder); }
.dp-day.is-today { border-color: var(--border); font-weight: 700; }
.dp-day.is-selected {
  background: var(--accent); color: var(--accent-text);
  border-color: var(--accent); font-weight: 700;
}
.dp-month-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.dp-month {
  font: inherit; font-size: 13px; padding: 10px 4px; border: 1px solid transparent;
  background: none; color: var(--text); border-radius: calc(var(--radius) - 2px); cursor: pointer;
}
.dp-month:hover { background: var(--bg); }
.dp-month.is-selected { background: var(--accent); color: var(--accent-text); }
.dp-foot {
  display: flex; gap: 6px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
}
.dp-foot .btn { flex: 1; font-size: 13px; padding: 6px 10px; }

.field, .field-sm { display: grid; gap: 5px; }
.field > span, .field-sm > span { font-size: 12px; font-weight: 700; color: var(--muted); }
.field-sm > span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.stack { display: grid; gap: 14px; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }

/* ---------- Einstellungen: zwei Spalten auf dem Desktop ----------
   Umgesetzt als Mehrspaltensatz, nicht als Raster: Der Browser verteilt
   die Karten dann nach Höhe auf beide Spalten, statt sie zeilenweise
   nebeneinanderzustellen und Lücken zu lassen. Die Reihenfolge im
   Quelltext bleibt erhalten, und unterhalb der Schwelle wird von selbst
   wieder eine Spalte daraus. */
.settings-columns { display: grid; gap: var(--gap); }

@media (min-width: 1000px) {
  .settings-columns {
    display: block;
    column-count: 2;
    column-gap: var(--gap);
  }
  .settings-columns > .card {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin: 0 0 var(--gap);
  }
}

.check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); cursor: pointer; user-select: none; }
.check input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: inherit; font-size: 14px; font-weight: 700;
  padding: 9px 15px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, opacity .15s;
}
.btn:hover { border-color: var(--text); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.btn-primary:hover { opacity: .88; border-color: var(--accent); }
.btn-ghost { background: none; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { color: var(--text); border-color: var(--border); }
.btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 8%, transparent); border-color: var(--danger); }
.btn-sm { font-size: 13px; padding: 6px 11px; }
.btn-lg { font-size: 15px; padding: 12px 26px; }

/* ---------- Timer ---------- */
.timer-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px); padding: 26px 18px;
  display: grid; gap: 20px; justify-items: center;
}
.timer-card.is-running { border-color: var(--accent); }
.timer-display {
  font-size: clamp(40px, 12vw, 60px); font-weight: 900;
  letter-spacing: -0.035em; font-variant-numeric: tabular-nums;
  line-height: 1; color: var(--text);
}
.timer-card.is-running .timer-display { color: var(--accent); }

/* Läuft der Timer auf einem abrechenbaren Projekt mit Stundensatz,
   wächst hier der Betrag mit. */
.timer-earned {
  display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap; justify-content: center;
  margin-top: -12px;
}
.timer-earned[hidden] { display: none; }
.timer-earned-value {
  font-size: 21px; font-weight: 900; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.timer-earned-rate { font-size: 12px; color: var(--muted); }
.timer-form {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  justify-content: center; width: 100%; max-width: 760px;
}
/* Das Projektfeld wird von JS in einen .cs-Wrapper gepackt – die
   Flex-Regel muss deshalb am Wrapper hängen, nicht am <select>. */
.timer-form .cs[data-for="timerProject"] { flex: 0 1 320px; }
.timer-form #timerDesc { flex: 1 1 240px; }

/* ---------- Statistik ---------- */
/* Gleicher Abstand wie zwischen den Karten darüber und darunter. */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--gap); }
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px); padding: 14px 16px;
}

/* Auf dem Erfassen-Bildschirm stehen die vier Kennzahlen mittig:
   Inhalt zentriert und die Gruppe als Block in der Seitenmitte. */
.view[data-view="track"] .stat-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap);
}
.view[data-view="track"] .stat {
  flex: 1 1 200px; max-width: 344px; text-align: center;
}
.stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.stat-value { font-size: 24px; font-weight: 900; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-top: 3px; }
/* Betragskacheln sehen aus wie alle anderen. Erst wenn mehrere Währungen
   nebeneinander stehen, wird der Text kleiner gesetzt – diese Klasse
   vergibt das JavaScript, weil CSS die Textlänge nicht kennt. */
.stat-value--multi {
  font-size: 16px; line-height: 1.3; letter-spacing: -0.01em;
  overflow-wrap: anywhere; margin-top: 5px;
}
.stat-sub { font-size: 12px; color: var(--muted); }

/* ---------- Chart ---------- */
.chart { display: flex; align-items: flex-end; gap: 4px; height: 110px; }
.chart-bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 5px; }
.chart-fill { background: var(--accent); border-radius: 3px; min-height: 2px; opacity: .85; transition: height .3s; }
.chart-bar.is-empty .chart-fill { background: var(--border); }
.chart-label { font-size: 9px; color: var(--muted); text-align: center; letter-spacing: -.02em; }

/* ---------- Einträge ---------- */
.entry-list { display: grid; }
.entry {
  display: grid; grid-template-columns: auto auto 1fr auto auto; gap: 12px;
  align-items: center; padding: 11px 0; border-top: 1px solid var(--border);
}
.entry:first-child { border-top: 0; }
/* Eigenes Häkchen statt Systemkästchen: größere Trefferfläche, und der
   Haken wächst beim Setzen kurz über seine Endgröße hinaus. */
.entry-check {
  -webkit-appearance: none; appearance: none;
  width: 19px; height: 19px; margin: 0; flex-shrink: 0; position: relative;
  border: 1.5px solid color-mix(in srgb, var(--text) 26%, var(--border));
  border-radius: 6px; background: var(--surface); cursor: pointer;
  transition: background .16s, border-color .16s, transform .12s;
}
.entry-check:hover { border-color: var(--text); }
.entry-check:active { transform: scale(.88); }
.entry-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.entry-check::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 5px; height: 9px; margin: -7px 0 0 -3px;
  border: solid var(--accent-text); border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(.2); opacity: 0;
  transition: transform .2s cubic-bezier(.2, 1.6, .5, 1), opacity .12s;
}
.entry-check:checked { background: var(--accent); border-color: var(--accent); }
.entry-check:checked::after { opacity: 1; transform: rotate(45deg) scale(1); }
.entry-list:not(.entry-list--full) .entry-check { display: none; }
@media (prefers-reduced-motion: reduce) {
  .entry-check, .entry-check::after { transition: none; }
}
/* Kennzeichen links: Kundenlogo, sonst ein Farbpunkt im gleichen Rahmen.
   So hoch wie Titel und Unterzeile zusammen, damit die Zeilen bündig sind. */
.entry-mark {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; overflow: hidden;
  border: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
}
.entry-mark img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.entry-mark-dot { width: 13px; height: 13px; border-radius: 50%; }
.entry-main { min-width: 0; }
.entry-title { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-sep { color: var(--muted); font-weight: 400; margin: 0 7px; }
.entry-meta { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-right { text-align: right; }
.entry-dur { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; white-space: nowrap; }
.entry-amount { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Auf dem Desktop darf die Liste eine Spur größer gesetzt sein. */
@media (min-width: 641px) {
  .entry { padding: 13px 0; }
  .entry-title { font-size: 15px; }
  .entry-meta { font-size: 13px; margin-top: 2px; }
  .entry-dur { font-size: 16px; }
  .entry-amount { font-size: 12px; }
  .entry-acts svg { width: 16px; height: 16px; }
}
.entry-acts { display: flex; gap: 4px; }
.entry-acts button {
  border: 0; background: none; color: var(--muted); cursor: pointer;
  padding: 5px; border-radius: 6px; display: flex;
}
.entry-acts button:hover { color: var(--text); background: var(--bg); }
.entry-acts svg { width: 15px; height: 15px; }

.badge {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted);
  vertical-align: 1px; margin-left: 9px;
}
.badge + .badge { margin-left: 5px; }
.badge--invoiced { color: var(--positive); border-color: color-mix(in srgb, var(--positive) 35%, var(--border)); }
.badge--nonbill { color: var(--muted); background: var(--bg); }
.badge--warn {
  color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}

/* ---------- Vorlagen über den Kennzahlen ---------- */
.tpl-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--gap); }
.tpl-wrap { position: relative; display: inline-flex; }
.tpl {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 14px 6px 7px; cursor: pointer;
  transition: border-color .15s, background .15s;
  max-width: 320px;
}
.tpl:hover { border-color: var(--accent); }
.tpl-wrap .tpl { padding-right: 28px; }
.tpl-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-dot { width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; }
.tpl-logo {
  width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; overflow: hidden;
  border: 1px solid var(--border); background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.tpl-logo img { width: 100%; height: 100%; object-fit: contain; padding: 1px; }
/* Immer sichtbar, nur blass – ausgeblendet wäre es mit der Tastatur
   nicht erreichbar. */
.tpl-x {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border: 0; border-radius: 50%;
  background: none; color: var(--muted); cursor: pointer; opacity: .4;
  display: flex; align-items: center; justify-content: center; padding: 0;
  transition: opacity .15s, color .15s;
}
.tpl-wrap:hover .tpl-x { opacity: 1; }
.tpl-x:hover { color: var(--danger); background: var(--bg); opacity: 1; }
.tpl-x:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 1px; }
.tpl-x svg { width: 11px; height: 11px; }
.tpl-add { color: var(--muted); border-style: dashed; padding-left: 11px; }
.tpl-add:hover { color: var(--accent); border-style: solid; }
.tpl-plus { display: flex; }
.tpl-plus svg { width: 14px; height: 14px; }

/* ---------- Budget ---------- */
/* Zahl und Einheit nebeneinander; die Einheit nur so breit wie nötig. */
.budget-row { display: grid; grid-template-columns: 1fr 108px; gap: 8px; align-items: start; }
.budget-row .cs { width: 108px; }

.budget { margin-top: 8px; max-width: 340px; }
.budget-track {
  height: 6px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--text) 12%, transparent);
}
.budget-fill { height: 100%; border-radius: 999px; background: var(--positive); transition: width .3s; }
.budget-text {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 11px; color: var(--muted); margin-top: 4px;
}
.budget.is-near .budget-fill { background: var(--accent); }
.budget.is-near .budget-text strong { color: var(--accent); }
.budget.is-over .budget-fill { background: var(--danger); }
.budget.is-over .budget-text strong { color: var(--danger); }

/* ---------- Wochenansicht ---------- */
.week-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.week-range { display: flex; flex-direction: column; line-height: 1.25; }
.week-range strong { font-size: 14px; }
.week-range span { font-size: 12px; color: var(--muted); }
.week-total { margin-left: auto; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }

.week-grid { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px); overflow: hidden; }
.week-grid > * { background: var(--surface); }
.wk-corner, .wk-day, .wk-sum-label, .wk-sum {
  font-size: 11px; font-weight: 700; color: var(--muted);
  padding: 8px 10px; text-transform: uppercase; letter-spacing: .05em;
}
.wk-day { display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; }
.wk-day-name { line-height: 1.1; }
.wk-day-date { font-size: 10px; font-weight: 600; text-transform: none; letter-spacing: 0; opacity: .8; }
.wk-day.is-today { color: var(--accent-text); background: var(--accent); }
.wk-day.is-empty:not(.is-today) { color: color-mix(in srgb, var(--muted) 60%, transparent); }
.wk-proj { display: flex; align-items: center; gap: 8px; padding: 9px 10px; min-width: 0; }
.wk-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.wk-proj-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-cell {
  font: inherit; font-size: 13px; font-weight: 700; color: var(--muted);
  border: 0; background: var(--surface); cursor: pointer; padding: 9px 4px;
  text-align: center; transition: background .12s, color .12s;
}
.wk-cell:hover { background: var(--bg); color: var(--text); }
.wk-cell.has-time { color: var(--text); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.wk-cell.has-time:hover { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
.wk-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.wk-sum-label, .wk-sum { text-align: center; color: var(--text); background: var(--bg); }
.wk-sum-label { text-align: left; }
.wk-sum.is-empty { color: color-mix(in srgb, var(--muted) 55%, transparent); }
.wk-none { grid-column: 1 / -1; padding: 22px; text-align: center; color: var(--muted); font-size: 13px; }
.week-gap {
  margin-top: 12px; font-size: 12px; color: var(--muted);
  padding: 9px 12px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
}

/* ---------- Rechnungen ---------- */
.inv-sum {
  display: grid; gap: 6px; padding: 14px 16px; margin-bottom: 16px;
  border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px);
  background: var(--bg); font-size: 13px;
}
.inv-sum > div { display: flex; justify-content: space-between; gap: 14px; }
.inv-sum span { color: var(--muted); }
.inv-sum-gross { padding-top: 6px; border-top: 1px solid var(--border); font-size: 15px; }

.inv-list { display: grid; }
.inv-row {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px;
  align-items: center; padding: 11px 0; border-top: 1px solid var(--border);
}
.inv-row:first-child { border-top: 0; }
.inv-main { min-width: 0; }
.inv-num { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.inv-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.inv-amounts { text-align: right; }
.inv-gross { font-size: 15px; font-weight: 700; }
.inv-net { font-size: 11px; color: var(--muted); }
.entry-acts button.is-danger:hover { color: var(--danger); }
/* ---------- Änderungsverlauf ---------- */
.log-list { display: grid; }
.log-item { padding: 15px 0; border-top: 1px solid var(--border); }
.log-item:first-child { border-top: 0; padding-top: 2px; }
.log-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; }
.log-ver {
  font-size: 15px; font-weight: 900; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.log-date { font-size: 12px; color: var(--muted); }
.log-head .badge { margin-left: 0; }
.log-item .notes-list { font-size: 13px; }
/* Die installierte Fassung bekommt eine Marke am linken Rand. */
.log-item.is-current {
  margin: 0 -14px; padding-left: 14px; padding-right: 14px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-radius: var(--radius);
}
.log-item.is-current .log-ver { color: var(--accent); }

.inv-empty { text-align: center; padding: 26px 10px; }
.inv-empty-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.inv-empty-text { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* Zeile im Rückfrage-Dialog, etwa beim vergessenen Timer. */
.ask-line { font-size: 13px; color: var(--muted); margin-bottom: 12px; line-height: 1.5; }

/* Die Wolken im Info-Fenster laufen dauerhaft. Ist es zu, wird nichts
   gezeichnet – display:none hält die Animationen komplett an. */

/* Die Kennzahlen stehen auch auf der Einträge-Seite mittig. */
.summary-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.summary-bar .stat { flex: 1 1 200px; max-width: 344px; text-align: center; }
.bulk-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px); padding: 12px 16px;
  font-size: 13px; font-weight: 700;
}
/* Die Anzahl der ausgewählten Positionen sticht farbig heraus. */
.bulk-num {
  display: inline-block; min-width: 22px; text-align: center;
  padding: 1px 7px; margin-right: 3px; border-radius: 999px;
  background: var(--accent); color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}

/* 168 px, damit die beiden Datumsfelder das volle Datum zeigen. */
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; }
.filters .grow { grid-column: span 2; }

/* Kunde und Projekt stehen als eigene Zeile ganz oben und dürfen die volle
   Breite haben – sie schränken die Liste am stärksten ein und tragen lange
   Namen samt Logo. */
.filters--lead { grid-template-columns: 1fr 1fr; margin-bottom: 14px; }
.filters--lead > .field-sm > span { font-size: 12px; }
.filters--lead .cs-btn { font-size: 17px; padding: 13px 34px 13px 14px; gap: 11px; }
.filters--lead .cs-btn::after { right: 13px; width: 11px; height: 11px; margin-top: -5px; background-size: 11px 11px; }
.filters--lead .cs-logo { width: 26px; height: 26px; border-radius: 6px; }
/* Ein Feld, das gerade wirklich filtert, wird farbig markiert – sonst sucht
   man, warum die Liste kürzer ist als erwartet. */
.field-sm.is-set > span { color: var(--accent); }
.field-sm.is-set .input,
.field-sm.is-set .cs-btn {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.field-sm.is-set .input:focus,
.field-sm.is-set .cs.is-open .cs-btn { border-color: var(--accent); }

.preset-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.chip {
  font: inherit; font-size: 12px; font-weight: 700;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer;
}
.chip:hover { color: var(--text); border-color: var(--text); }

/* Steht rechts am Rand und taucht nur auf, wenn wirklich etwas gefiltert ist. */
.chip-reset {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  border-style: dashed;
}
.chip-reset[hidden] { display: none; }
.chip-reset svg { width: 13px; height: 13px; }
.chip-reset:hover { color: var(--accent); border-color: var(--accent); border-style: solid; }
.chip.is-active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

.preset-group { margin-bottom: 4px; }
.preset-title { font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
                color: var(--muted); font-weight: 700; margin-top: 12px; }
.chip-del {
  border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  padding: 0 0 0 2px; margin-left: 2px; opacity: .45; line-height: 1; font-size: 14px;
}
.chip-del:hover { opacity: 1; color: var(--danger); }

/* ---------- Umschalter Kacheln / Liste ---------- */
.viewswitch {
  display: inline-flex; gap: 2px; padding: 2px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg);
}
.vs-btn {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 26px; padding: 0; cursor: pointer;
  border: 0; background: none; color: var(--muted);
  border-radius: calc(var(--radius) - 3px);
  transition: background .15s, color .15s;
}
.vs-btn:hover { color: var(--text); }
.vs-btn.is-active { background: var(--accent); color: var(--accent-text); }
.vs-btn:focus { outline: none; }
.vs-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vs-btn svg { width: 15px; height: 15px; }
/* Auf dem Handy gibt es nur Kacheln – eine Liste bringt dort nichts. */
@media (max-width: 640px) { .viewswitch { display: none; } }

/* Knopf, der nur ein Symbol trägt */
.btn-icon {
  padding: 6px; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-icon svg { width: 16px; height: 16px; }
.btn-positive {
  color: var(--positive);
  border-color: color-mix(in srgb, var(--positive) 45%, var(--border));
  background: color-mix(in srgb, var(--positive) 12%, transparent);
}
.btn-positive:hover {
  border-color: var(--positive);
  background: color-mix(in srgb, var(--positive) 22%, transparent);
}

/* ---------- Listenansicht (Projekte / Kunden) ---------- */
/* Werkzeugleiste über einer Liste: Filter, Sortierung, Zurücksetzen. */
.list-tools {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.list-tools .field-sm { flex: 0 1 230px; min-width: 160px; }
.list-tools .chip-reset { margin-left: auto; margin-bottom: 5px; }
@media (max-width: 560px) {
  .list-tools .field-sm { flex: 1 1 100%; }
  .list-tools .chip-reset { margin-left: 0; }
}

/* ---------- Kundengruppe in der Projektliste ---------- */
.group-head {
  display: flex; align-items: center; gap: 15px;
  padding: 26px 0 14px; border-top: 1px solid var(--border);
}
.group-head:first-child { padding-top: 2px; border-top: 0; }
.tile-list .group-head { grid-column: 1 / -1; }
/* Die Zeile direkt unter der Überschrift bringt sonst eine zweite Linie mit. */
.group-head + .row-item { border-top: 0; }

.group-logo {
  width: 58px; height: 58px; border-radius: 15px; flex-shrink: 0; overflow: hidden;
  border: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
}
.group-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.group-dot { width: 58px; height: 58px; border-radius: 15px; flex-shrink: 0; }
.group-main { min-width: 0; }
.group-name {
  font-size: 19px; font-weight: 900; letter-spacing: -.025em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.group-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.group-head.is-none .group-name { color: var(--muted); }
.group-open {
  margin-left: auto; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: none; color: var(--muted); cursor: pointer;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  transition: color .15s, border-color .15s;
}
.group-open:hover { color: var(--text); border-color: var(--text); }
.group-open svg { width: 15px; height: 15px; }
@media (max-width: 560px) {
  .group-logo, .group-dot { width: 46px; height: 46px; border-radius: 12px; }
  .group-name { font-size: 16px; }
  .group-head { padding: 20px 0 12px; }
}

.row-list { display: grid; }
.row-item {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 0; border-top: 1px solid var(--border);
}
.row-item:first-child { border-top: 0; }
.row-item.is-archived { opacity: .5; }
/* Das Logo ist so hoch wie die beiden Textzeilen daneben. */
.row-logo, .row-swatch {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
}
.row-logo {
  overflow: hidden; border: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
}
.row-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
/* Platzhalter: hält die Kante, zeigt aber nichts an. */
.row-swatch.is-empty, .tile-swatch.is-empty { background: none; }

/* In der Gruppe beginnen die Projektnamen genau unter dem Kundennamen.
   Das Maß ist die Breite des Logos in der Überschrift plus dessen Abstand. */
.row-list.is-grouped { --group-indent: 73px; }
.row-list.is-grouped .row-item { padding-left: var(--group-indent); position: relative; }
.row-list.is-grouped .row-swatch {
  position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; border-radius: 5px;
}
.row-list.is-grouped .row-swatch.is-empty { display: none; }
/* In Kachelform gibt es nichts auszurichten – der leere Platz kann weg. */
.tile-list.is-grouped .tile-swatch.is-empty { display: none; }
@media (max-width: 560px) {
  .row-list.is-grouped { --group-indent: 61px; }
  .row-list.is-grouped .row-swatch { left: 16px; }
}
.row-main { flex: 1; min-width: 0; }
.row-name { font-weight: 700; font-size: 15px; letter-spacing: -.01em;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub { font-size: 12px; color: var(--muted); margin-top: 2px;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-acts { display: flex; gap: 6px; flex-shrink: 0; }

@media (max-width: 560px) {
  .row-item { flex-wrap: wrap; }
  .row-acts { width: 100%; padding-left: 56px; }
}

/* ---------- Kacheln (Projekte / Kunden) ---------- */
.tile-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.tile {
  border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px);
  padding: 14px; display: grid; gap: 8px; position: relative; background: var(--surface);
  transition: border-color .15s;
}
.tile:hover { border-color: var(--text); }
.tile.is-archived { opacity: .5; }
.tile-top { display: flex; align-items: center; gap: 10px; }
.tile-logo {
  width: 48px; height: 48px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  border: 1px solid var(--border); background: var(--surface);
}
.tile-logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.tile-swatch { width: 48px; height: 48px; border-radius: 11px; flex-shrink: 0; }
.tile-name { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.tile-sub { font-size: 12px; color: var(--muted); }
.tile-stats { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.tile-stats b { color: var(--text); font-variant-numeric: tabular-nums; }
.tile-acts { display: flex; gap: 6px; margin-top: 2px; }

.empty { color: var(--muted); font-size: 13px; padding: 22px 0; text-align: center; }

/* ---------- Noch nichts angelegt ---------- */
.empty-state {
  display: grid; justify-items: center; text-align: center; gap: 13px;
  padding: 54px 20px 58px;
}
.empty-mark {
  width: 68px; height: 68px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  animation: empty-in .55s cubic-bezier(.2, 1.3, .35, 1) both;
}
.empty-mark svg { width: 31px; height: 31px; }
.empty-title { font-size: 19px; font-weight: 900; letter-spacing: -.025em; }
.empty-text {
  color: var(--muted); font-size: 14px; line-height: 1.6; max-width: 400px;
}
.empty-state .btn { margin-top: 6px; padding: 11px 22px; font-size: 15px; }

@keyframes empty-in {
  from { opacity: 0; transform: scale(.55); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .empty-mark { animation: none; } }

/* ---------- Farbwähler ---------- */
.color-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; margin: 14px 0 18px; }
/* Ab 1180 px passen alle neun Farben nebeneinander in eine Zeile. */
@media (min-width: 1180px) {
  .color-grid { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .color-item { padding: 7px 8px !important; gap: 8px !important; }
  .color-item-hex { font-size: 10px; }
}

/* Das farbige Kästchen sieht überall gleich aus. */
input[type=color] {
  width: 30px; height: 30px; padding: 0; border: 1px solid var(--border);
  border-radius: 7px; background: none; cursor: pointer; flex-shrink: 0;
}
input[type=color]::-webkit-color-swatch-wrapper { padding: 2px; }
input[type=color]::-webkit-color-swatch { border: 0; border-radius: 5px; }

/* Umrandete Kachel – nur im Farbraster der Einstellungen. */
.color-item {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px;
}
.color-item > div { min-width: 0; }
.color-item-label {
  font-size: 12px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Schlichte Zeile ohne Rahmen – in den Dialogen für Kunde und Projekt. */
.color-row { display: flex; align-items: center; gap: 10px; }
.color-row .hint { margin: 0; }
.color-item-hex { font-size: 11px; color: var(--muted); font-family: ui-monospace, monospace; }

.theme-preset { display: flex; align-items: center; gap: 7px; }
.theme-preset .dots { display: flex; gap: 3px; }
.theme-preset .dots i { width: 9px; height: 9px; border-radius: 50%; display: block; border: 1px solid rgba(0,0,0,.12); }

/* Schieberegler komplett selbst gestalten. Mit dem Standard-Aussehen
   zeichnen die Browser eine weiße Schiene, die in dunklen Schemata
   als heller Balken stehen bleibt. */
input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 20px; margin: 0; padding: 0;
  background: none; border: 0; cursor: pointer;
}
input[type=range]:focus { outline: none; }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }

input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border: 0; border-radius: 999px; background: var(--border);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin-top: -6px;
  border: 0; border-radius: 50%; background: var(--accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
input[type=range]::-moz-range-track {
  height: 6px; border: 0; border-radius: 999px; background: var(--border);
}
input[type=range]::-moz-range-progress {
  height: 6px; border: 0; border-radius: 999px; background: var(--accent);
}
input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

.logo-preview {
  display: flex; align-items: center; justify-content: center;
  height: 74px; border: 1px dashed var(--border); border-radius: var(--radius);
  margin-bottom: 12px; color: var(--accent); background: var(--bg);
}
.logo-preview svg, .logo-preview img { height: 46px; width: auto; max-width: 220px; }
.logo-preview:empty::after { content: 'Keine Vorschau'; color: var(--muted); font-size: 12px; }

.icon-preview { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.icon-preview figure { margin: 0; display: grid; gap: 6px; justify-items: center; }
.icon-preview img { display: block; border: 1px solid var(--border); background: var(--bg); }
.icon-preview .ip-sq  { border-radius: 4px; }
.icon-preview .ip-ios { border-radius: 22.5%; }
.icon-preview .ip-rnd { border-radius: 50%; }
.icon-preview figcaption { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.icon-preview:empty::after { content: 'Noch keine Icons erzeugt'; color: var(--muted); font-size: 12px; }

.icon-tune { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.icon-tune-controls { flex: 1 1 260px; display: grid; gap: 14px; align-content: start; }
#iconLive {
  width: 90px; height: 90px; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: 20.5%;
  background: var(--bg);
}
#iconLive:not(.has-icon) { opacity: .35; }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.42); backdrop-filter: blur(2px); }
.modal-box {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 6px); width: 100%; max-width: 540px;
  max-height: 88vh; display: flex; flex-direction: column; box-shadow: var(--shadow);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 18px 12px; }
.modal-body { padding: 0 18px 4px; overflow-y: auto; display: grid; gap: 14px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 18px; flex-wrap: wrap; }
.modal-foot .spacer { margin-right: auto; }

/* ---------- Rückfrage ----------
   Ersetzt die Dialoge des Browsers, die immer im Systemdesign erscheinen. */
.ask-overlay {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.ask-overlay[hidden] { display: none; }
.ask-backdrop {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ask-backdrop { background: color-mix(in srgb, var(--bg) 88%, transparent); }
}
.ask-box {
  position: relative; z-index: 1;
  width: 100%; max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 8px);
  padding: 22px 22px 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  animation: info-card-in .26s cubic-bezier(.2, .9, .3, 1.1) both;
}
.ask-box:focus { outline: none; }
.ask-title { font-size: 16px; font-weight: 900; letter-spacing: -.02em; }
.ask-text {
  margin: 8px 0 0; font-size: 14px; color: var(--muted); line-height: 1.55;
  white-space: pre-line; max-height: 46vh; overflow: auto;
}
/* Die Notizen sind der Inhalt, deshalb in normaler Schriftfarbe. */
.ask-text .notes-list { white-space: normal; color: var(--text); }

/* Der Hinweis darunter ist Beiwerk: mehr Abstand, kleiner, blasser. */
.ask-after {
  margin-top: 22px; padding-top: 15px;
  border-top: 1px solid var(--border);
  font-size: 12px; line-height: 1.65;
  color: color-mix(in srgb, var(--muted) 72%, transparent);
}
.ask-text[hidden] { display: none; }
.ask-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.ask-foot .btn { min-width: 104px; }

@media (max-width: 640px) {
  .ask-overlay { align-items: flex-end; padding: 0; }
  .ask-box {
    max-width: 100%;
    border-radius: calc(var(--radius) + 8px) calc(var(--radius) + 8px) 0 0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
  .ask-foot .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .ask-box { animation: none; } }

/* ---------- Info ---------- */
.info-overlay {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.info-overlay[hidden] { display: none; }
.info-backdrop {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  animation: info-backdrop-in .42s cubic-bezier(.25, .8, .35, 1) both;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .info-backdrop { background: color-mix(in srgb, var(--bg) 88%, transparent); }
}

.info-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 340px;
  border-radius: calc(var(--radius) + 14px);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22), 0 2px 8px rgba(0, 0, 0, .06);
  overflow: hidden;
  animation: info-card-in .52s cubic-bezier(.18, 1.22, .32, 1) both;
}

/* Ein Lichtstreif wandert einmal über die Karte. */
.info-card::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(112deg,
    transparent 32%,
    color-mix(in srgb, var(--text) 14%, transparent) 46%,
    transparent 62%);
  animation: info-sheen 1.15s cubic-bezier(.32, .68, .4, 1) .28s both;
}

.info-card:focus { outline: none; }

.info-close {
  position: absolute; z-index: 2; top: 12px; right: 12px;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--text); backdrop-filter: blur(6px);
}
.info-close:hover { background: var(--surface); }
.info-close:focus { outline: none; }
.info-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.info-close svg { width: 15px; height: 15px; }

.info-body {
  position: relative; z-index: 1;
  padding: 46px 28px 34px;
  display: grid; gap: 6px; justify-items: center; text-align: center;
}
/* Das Logo springt herein und geht danach nahtlos ins Pulsieren über:
   Der Endzustand des Einsprungs ist genau der Startzustand des Pulses. */
.info-logo {
  display: flex; align-items: center; justify-content: center;
  width: 88px; height: 88px; margin-bottom: 14px;
  color: var(--accent);
  animation:
    info-logo-pop .66s cubic-bezier(.2, 1.5, .35, 1) .1s both,
    info-pulse 3.6s ease-in-out .76s infinite;
}
.info-logo svg, .info-logo img { height: 88px; width: auto; max-width: 100%; }

.info-name { font-size: 21px; font-weight: 900; letter-spacing: -.03em; }
/* Die Versionszeile ist zugleich der Weg zum Änderungsverlauf. */
.info-version {
  font: inherit; font-size: 12px; font-weight: 700; color: var(--muted);
  letter-spacing: .04em; margin-top: 3px;
  border: 0; background: none; cursor: pointer; padding: 2px 4px;
  border-radius: 6px; transition: color .15s, background .15s;
}
.info-version:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.info-version:focus { outline: none; }
.info-version:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.info-credits { font-size: 13px; color: var(--muted); margin-top: 8px; }
.info-update {
  margin-top: 14px; padding: 9px 15px; border-radius: 999px;
  font: inherit; font-size: 12px; font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--text); cursor: pointer;
  transition: background .15s;
}
.info-update:hover { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.info-update:focus { outline: none; }
.info-update:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.info-update[hidden] { display: none; }

/* ---------- Update ---------- */
.up-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.up-state { flex: 1; min-width: 200px; font-size: 14px; }
.up-state b { font-weight: 900; }
.up-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.up-notes {
  margin-top: 14px; padding: 14px 16px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px; line-height: 1.6;
  max-height: 260px; overflow: auto;
}

/* Änderungsnotizen: Luft zwischen den Punkten, und umbrechende Zeilen
   rücken unter den Text statt unter den Gedankenstrich. */
.notes-list { display: grid; gap: 10px; }
.notes-item {
  padding-left: 1.25em; text-indent: -1.25em;
  hanging-punctuation: first;
}
.notes-para { font-weight: 700; }
.up-warn {
  margin-top: 12px; font-size: 13px; line-height: 1.55;
  color: var(--danger);
}

/* Prüfliste: was für Updates gebraucht wird und was davon fehlt */
.up-checks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.up-checks li { display: flex; gap: 10px; align-items: baseline; font-size: 13px; }
.up-check-mark { flex-shrink: 0; font-weight: 700; width: 14px; }
.up-checks li.ok .up-check-mark { color: var(--positive); }
.up-checks li.fail .up-check-mark { color: var(--danger); }
.up-checks li.ok .up-check-label { color: var(--muted); }
.up-checks li.fail .up-check-label { font-weight: 700; }
.up-check-label { display: block; }
.up-check-hint {
  display: block; margin-top: 2px; font-size: 12px;
  line-height: 1.5; color: var(--muted);
}
.up-badge {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 999px; margin-left: 8px; vertical-align: 1px;
  background: var(--accent); color: var(--accent-text);
}
/* Ohne Unterstrich. Beim Überfahren wächst eine Linie von links herein
   und zieht sich beim Verlassen nach rechts wieder zurück — deshalb der
   Wechsel des transform-origin. */
.info-credits a {
  position: relative; color: var(--text); font-weight: 700;
  text-decoration: none; transition: color .25s;
}
.info-credits a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1.5px; border-radius: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: right center;
  transition: transform .34s cubic-bezier(.2, .8, .3, 1);
}
.info-credits a:hover,
.info-credits a:focus-visible { color: var(--accent); }
.info-credits a:hover::after,
.info-credits a:focus-visible::after {
  transform: scaleX(1); transform-origin: left center;
}
.info-credits a:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .info-credits a, .info-credits a::after { transition: none; }
}
.info-heart {
  color: var(--accent); display: inline-block;
  animation: info-beat 1.9s ease-in-out infinite;
}

/* Die Inhalte kommen gestaffelt nach – erst Name, dann Zeile für Zeile. */
.info-name    { animation: info-item-in .5s cubic-bezier(.2, .8, .3, 1) .30s both; }
.info-credits { animation: info-item-in .5s cubic-bezier(.2, .8, .3, 1) .38s both; }
.info-close   { animation: info-fade .4s ease-out .46s both; }
.clouds--card { animation: info-clouds-in .95s cubic-bezier(.2, .8, .3, 1) .06s both; }

@keyframes info-fade { from { opacity: 0; } to { opacity: 1; } }

@keyframes info-backdrop-in {
  from {
    opacity: 0;
    backdrop-filter: blur(0px) saturate(100%);
    -webkit-backdrop-filter: blur(0px) saturate(100%);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
  }
}

@keyframes info-card-in {
  from { opacity: 0; transform: translateY(26px) scale(.92); }
  to   { opacity: 1; transform: none; }
}

@keyframes info-logo-pop {
  from { opacity: 0; transform: scale(.45) rotate(-14deg); }
  to   { opacity: .92; transform: scale(1) rotate(0deg); }
}

@keyframes info-item-in {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

@keyframes info-clouds-in {
  from { opacity: 0; transform: scale(.55); }
  to   { opacity: .8; transform: none; }
}

@keyframes info-sheen {
  from { transform: translateX(-125%); }
  to   { transform: translateX(125%); }
}

/* Schließen: kurz und knapp, damit es nicht im Weg steht. */
.info-overlay.is-closing .info-backdrop { animation: info-fade-out .2s ease-in both; }
.info-overlay.is-closing .info-card     { animation: info-card-out .2s ease-in both; }
.info-overlay.is-closing .info-card::after { animation: none; opacity: 0; }

@keyframes info-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes info-card-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(12px) scale(.96); }
}

@keyframes info-pulse {
  0%, 100% { transform: scale(1);    opacity: .92; }
  50%      { transform: scale(1.07); opacity: 1; }
}
@keyframes info-beat {
  0%, 72%, 100% { transform: scale(1); }
  78%           { transform: scale(1.28); }
  86%           { transform: scale(1.05); }
}
/* Wer Bewegung reduziert haben möchte, bekommt ein ruhiges Bild. */
@media (prefers-reduced-motion: reduce) {
  .clouds i, .clouds--card, .info-logo, .info-heart, .info-card, .info-backdrop,
  .info-name, .info-credits, .info-close,
  .info-overlay.is-closing .info-backdrop,
  .info-overlay.is-closing .info-card { animation: none; }
  .info-card::after { display: none; }
}

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 200;
  background: var(--text); color: var(--bg);
  padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 700;
  box-shadow: var(--shadow); max-width: 90vw; text-align: center;
}
.toast[hidden] { display: none; }
.toast.is-error { background: var(--danger); color: #fff; }

/* ---------- Öffentliche Kundenansicht ---------- */
.share-body { margin: 0; background: var(--bg); }
.share-head {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 26px 16px;
}
/* Höhe vorgeben, Breite rechnen lassen. Ein eingebettetes SVG ohne
   width-Attribut nimmt sonst die volle verfügbare Breite ein – das Motiv
   steht dann mittig in einem viel zu breiten Kasten und reisst eine
   Lücke zum Titel. */
.share-logo { display: flex; align-items: center; height: 34px; color: var(--accent); }
.share-logo svg, .share-logo img { height: 34px; width: auto; max-width: 170px; }
.share-title { font-weight: 900; font-size: 20px; letter-spacing: -.025em; }

.share-wrap {
  max-width: 860px; margin: 0 auto;
  padding: 0 max(16px, env(safe-area-inset-left))
           calc(40px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-right));
}
.share-card { padding: 0 18px; }

/* Kopf der Box: Kundenlogo und Name */
.share-client {
  display: flex; align-items: center; gap: 13px;
  padding: 18px 0 17px; border-bottom: 1px solid var(--border);
}
.share-client-logo {
  width: 72px; height: 72px; border-radius: 16px; flex-shrink: 0; overflow: hidden;
  border: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
}
.share-client-logo img { width: 100%; height: 100%; object-fit: contain; padding: 7px; }
.share-client-dot { width: 72px; height: 72px; border-radius: 16px; flex-shrink: 0; }
.share-client-name { font-size: 21px; font-weight: 900; letter-spacing: -.025em; }
@media (max-width: 560px) {
  .share-client-logo, .share-client-dot { width: 54px; height: 54px; border-radius: 13px; }
  .share-client-name { font-size: 18px; }
}

/* Nichts offen: freundlicher Abschluss statt leerer Fläche */
.share-none {
  display: grid; justify-items: center; text-align: center; gap: 12px;
  padding: 52px 20px 58px;
}
.share-none-mark {
  width: 66px; height: 66px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--positive) 15%, transparent);
  color: var(--positive);
  animation: share-none-in .55s cubic-bezier(.2, 1.3, .35, 1) both;
}
.share-none-mark svg { width: 30px; height: 30px; }
.share-none-title { font-size: 18px; font-weight: 900; letter-spacing: -.025em; }
.share-none-text { color: var(--muted); font-size: 14px; line-height: 1.6; max-width: 380px; }

@keyframes share-none-in {
  from { opacity: 0; transform: scale(.55); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .share-none-mark { animation: none; } }

.share-list { display: grid; }
.share-row {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--border);
}
.share-row:first-child { border-top: 0; padding-top: 16px; }
.share-main { flex: 1; min-width: 0; }
.share-what { font-weight: 700; font-size: 14px; }
.share-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.share-right { text-align: right; white-space: nowrap; }
.share-dur { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.share-amount { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

.share-total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin: 0 -18px; padding: 16px 18px;
  border-top: 2px solid var(--border);
}
.share-total-label { font-weight: 700; font-size: 14px; }
.share-total-count { color: var(--muted); font-weight: 400; font-size: 12px; margin-left: 8px; }
.share-total-right { display: grid; gap: 6px; justify-items: end; }
.share-total-value { display: flex; align-items: baseline; gap: 14px; font-variant-numeric: tabular-nums; }
.share-total-hours { font-size: 20px; font-weight: 900; letter-spacing: -.02em; }
.share-total-amount { font-size: 20px; font-weight: 900; letter-spacing: -.02em; color: var(--accent); }

/* Steuer und Brutto stehen kleiner unter der Summe, rechtsbündig
   auf einer Zahlenkante. */
.share-total-tax {
  display: grid; grid-template-columns: auto auto; gap: 3px 16px;
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.share-total-tax > span:nth-child(even) { text-align: right; }
.share-total-tax .is-gross { color: var(--text); font-weight: 700; }

/* Der offene Rest hängt als eigene, ruhigere Zeile unter der Summe –
   mit Luft nach oben und unten, sonst klebt er am Kartenrand. */
.share-total--open { border-top-width: 1px; padding: 20px 18px 22px; }
.share-total--open .share-total-label { font-size: 13px; color: var(--muted); }
.share-total--open .share-total-hours,
.share-total--open .share-total-amount { font-size: 15px; font-weight: 700; }
.share-total--open .share-total-amount { color: var(--text); }

/* Die Zeitraumwahl sind Links – ohne Unterstrich, sonst wirken sie nicht
   wie Knöpfe. */
.share-filter { display: flex; gap: 6px; flex-wrap: wrap; padding: 14px 0 4px; }
.share-filter .chip { text-decoration: none; display: inline-flex; align-items: center; }
.share-filter .chip-reset { margin-left: auto; }

.share-foot { text-align: center; color: var(--muted); font-size: 12px; margin: 18px 0 0; }

@media (max-width: 560px) {
  .share-row { flex-wrap: wrap; gap: 6px 16px; }
  .share-right { text-align: left; display: flex; gap: 10px; align-items: baseline; }
}

/* ---------- Freigabe-Link im Kundendialog ---------- */
.share-box {
  display: grid; gap: 8px;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 12px;
}
.share-url { display: flex; gap: 8px; }
.share-url .input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; text-overflow: ellipsis;
}

/* ---------- Login / Setup ---------- */
.auth-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 20px; position: relative; overflow: hidden;
}

/* ---------- Treibende Farbwolken ----------
   Aus Hintergrund- und Linienfarbe, deshalb passen sie zu jedem Schema.
   Wird an zwei Stellen benutzt: Anmeldeseite und Info-Fenster. */
.clouds { z-index: 0; pointer-events: none; opacity: .9; }
.clouds--page { position: fixed; inset: -25%; filter: blur(60px); }
.clouds--card { position: absolute; inset: -30%; filter: blur(34px); opacity: .8; }
.clouds i { position: absolute; display: block; border-radius: 50%; }
.clouds i:nth-child(1) {
  width: 46%; height: 46%; left: 4%; top: 8%;
  background: color-mix(in srgb, var(--border) 85%, var(--bg));
  animation: cloud-a 26s ease-in-out infinite alternate;
}
.clouds i:nth-child(2) {
  width: 40%; height: 40%; right: 6%; top: 4%;
  background: color-mix(in srgb, var(--bg) 55%, var(--border));
  animation: cloud-b 33s ease-in-out infinite alternate;
}
.clouds i:nth-child(3) {
  width: 52%; height: 52%; left: 22%; bottom: 2%;
  background: color-mix(in srgb, var(--border) 70%, var(--bg));
  animation: cloud-c 29s ease-in-out infinite alternate;
}
.clouds i:nth-child(4) {
  width: 34%; height: 34%; right: 16%; bottom: 10%;
  background: color-mix(in srgb, var(--bg) 40%, var(--border));
  animation: cloud-d 37s ease-in-out infinite alternate;
}
.clouds i:nth-child(5) {
  width: 30%; height: 30%; left: 38%; top: 30%;
  background: color-mix(in srgb, var(--border) 55%, var(--bg));
  animation: cloud-e 41s ease-in-out infinite alternate;
}

@keyframes cloud-a { from { transform: none; } to { transform: translate(38%, 26%) scale(1.25); } }
@keyframes cloud-b { from { transform: scale(1.1); } to { transform: translate(-30%, 34%) scale(.85); } }
@keyframes cloud-c { from { transform: scale(.9); } to { transform: translate(26%, -30%) scale(1.3); } }
@keyframes cloud-d { from { transform: scale(1.2); } to { transform: translate(-34%, -22%) scale(.9); } }
@keyframes cloud-e { from { transform: none; } to { transform: translate(-28%, 30%) scale(1.35); } }

.auth-card {
  position: relative; z-index: 1;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: calc(var(--radius) + 10px);
  padding: 36px 32px; width: 100%; max-width: 380px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .10);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .auth-card { background: var(--surface); }
}

.auth-logo {
  display: flex; align-items: center; justify-content: center;
  height: 72px; margin-bottom: 18px; color: var(--accent);
  animation: info-pulse 3.6s ease-in-out infinite;
}
.auth-logo svg, .auth-logo img { height: 64px; width: auto; max-width: 200px; }
.auth-title { font-size: 21px; font-weight: 900; letter-spacing: -.025em; text-align: center; margin-bottom: 6px; }

/* Eingabefeld und Knopf gleich hoch und angenehm groß zum Tippen. */
.auth-card .input,
.auth-card .btn {
  min-height: 50px;
  font-size: 15px;
  border-radius: calc(var(--radius) + 2px);
}
.auth-card .input { padding: 13px 15px; background: color-mix(in srgb, var(--surface) 75%, transparent); }
.auth-card .btn { padding: 13px 18px; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .clouds--page i, .auth-logo { animation: none; }
}
.auth-sub { color: var(--muted); font-size: 13px; text-align: center; margin: 0 0 22px; }
.alert {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  border-radius: var(--radius); padding: 9px 12px; font-size: 13px; margin: 0 0 14px;
}
.checklist { list-style: none; padding: 0; margin: 0 0 20px; font-size: 13px; display: grid; gap: 5px; }
.checklist .ok { color: var(--positive); }
.checklist .fail { color: var(--danger); font-weight: 700; }

/* ---------- Quick-Form ----------
   Das Datumsfeld braucht rund 190 px, damit »So, 02.08.2026« samt
   Kalendersymbol vollständig hineinpasst. Der Platz geht von der
   Beschreibung ab, die als Bruchteil ohnehin den Rest aufnimmt. */
/* Spaltenbreiten: Datum knapp, Projekt großzügig, Dauer so breit,
   dass „Dauer z. B. 1:30“ vollständig hineinpasst. */
.quick-grid {
  display: grid; gap: 10px; align-items: center;
  grid-template-columns: 164px minmax(200px, 1.3fr) 150px minmax(120px, 2fr) auto auto;
}

/* ---------- Mobile ---------- */
@media (max-width: 820px) {
  .quick-grid { grid-template-columns: 1fr 1fr; }
  .quick-grid > :nth-child(4) { grid-column: span 2; }
  .quick-grid > :nth-child(6) { grid-column: span 2; }
  .filters .grow { grid-column: span 2; }
}

@media (max-width: 640px) {
  :root { --gap: 14px; }
  .topbar { flex-wrap: wrap; padding: 10px 14px; gap: 10px; }
  .brand-name { font-size: 15px; }
  .tabs { order: 3; width: 100%; margin-left: 0; padding-bottom: 2px; }
  .tab { padding: 6px 10px; font-size: 13px; }
  /* Auf dem Handy müssen fünf Reiter in eine Zeile – dort nur Text. */
  .tab svg { display: none; }
  .icon-btn { margin-left: auto; }
  .card { padding: 14px; }
  .wrap { padding-left: 12px; padding-right: 12px; }
  .timer-card { padding: 22px 14px; }
  /* In der Spaltenrichtung wird flex-basis zur HÖHE – deshalb hier
     zurücksetzen, sonst wird das Beschreibungsfeld 240 px hoch. */
  .timer-form { flex-direction: column; align-items: stretch; }
  .timer-form > *,
  .timer-form #timerDesc,
  .timer-form .cs[data-for="timerProject"] { flex: 0 0 auto; width: 100%; }
  .timer-form .btn { width: 100%; }
  .quick-grid { grid-template-columns: 1fr; }
  .quick-grid > * { grid-column: 1 !important; }
  .filters { grid-template-columns: 1fr 1fr; }
  /* Auf dem Handy untereinander – nebeneinander wären beide zu schmal
     für Logo und Namen. */
  .filters--lead { grid-template-columns: 1fr; }
  .filters--lead .cs-btn { font-size: 16px; padding: 11px 30px 11px 12px; }
  .entry { grid-template-columns: auto auto 1fr auto; gap: 6px 9px; padding: 12px 0; }
  /* Mit dem Daumen war das Kästchen kaum zu treffen. */
  .entry-check { width: 26px; height: 26px; border-radius: 8px; }
  .entry-check::after { width: 7px; height: 12px; margin: -9px 0 0 -4px; border-width: 0 2.4px 2.4px 0; }
  /* Unsichtbarer Rand ringsum: die Trefferfläche wächst auf 44 px,
     ohne dass sich am Layout etwas verschiebt. */
  .entry-check::before { content: ''; position: absolute; inset: -9px; }
  /* Wochenraster: Projektspalte schmaler, Zellen kompakter. */
  .week-grid { grid-template-columns: minmax(84px, 1.2fr) repeat(7, minmax(34px, 1fr)) !important; }
  .wk-proj-name { font-size: 11px; }
  .wk-cell { font-size: 11px; padding: 8px 2px; }
  .wk-corner, .wk-day, .wk-sum-label, .wk-sum { font-size: 10px; padding: 6px 4px; }
  .week-total { width: 100%; margin-left: 0; }
  .inv-row { grid-template-columns: auto 1fr auto; gap: 8px 10px; }
  .inv-amounts { grid-column: 3; }
  .inv-row .entry-acts { grid-column: 2 / span 2; justify-content: flex-end; }
  .entry-main { grid-column: 3; grid-row: 1; }
  .entry-acts { grid-column: 4; grid-row: 1; }
  .entry-right { grid-column: 3 / span 2; grid-row: 2; text-align: left; display: flex; gap: 8px; align-items: baseline; }
  .tile-list { grid-template-columns: 1fr; }
  .modal { padding: 0; align-items: flex-end; }
  .modal-box { max-width: 100%; max-height: 92vh; border-radius: calc(var(--radius) + 6px) calc(var(--radius) + 6px) 0 0; }
  .modal-foot { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

@media print {
  .topbar, .timer-card, .bulk-bar, .preset-row, .filters, .row-actions, .entry-acts { display: none !important; }
  .card { border: 0; padding: 0; }
  body { background: #fff; }
}