/* ==========================================================================
   WebApp Platform - Basis-Stylesheet
   Bewusst ohne externe Abhängigkeiten (CSP-freundlich, keine Web-Fonts).
   ========================================================================== */

:root {
  --color-bg: #f5f6f8;
  --color-surface: #ffffff;
  --color-surface-muted: #f0f2f5;
  --color-border: #dfe3e8;
  --color-text: #1c2024;
  --color-text-muted: #626b76;
  --color-primary: #2f5fe0;
  --color-primary-hover: #274fc0;
  --color-primary-contrast: #ffffff;
  --color-danger: #b3261e;
  --color-danger-surface: #fdf2f1;
  --color-success: #14663a;
  --color-success-surface: #eefaf2;
  --color-warning: #8a5300;
  --color-warning-surface: #fff7e8;
  --color-info: #1d4f8a;
  --color-info-surface: #eef5fd;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgb(16 24 40 / 6%);
  --shadow: 0 6px 20px rgb(16 24 40 / 8%);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --container: 68rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #14161a;
    --color-surface: #1c1f24;
    --color-surface-muted: #23272d;
    --color-border: #333941;
    --color-text: #e8eaed;
    --color-text-muted: #9aa3ad;
    --color-primary: #7ba2ff;
    --color-primary-hover: #9bb9ff;
    --color-primary-contrast: #10131a;
    --color-danger: #ff8a80;
    --color-danger-surface: #2a1c1b;
    --color-success: #7fd9a3;
    --color-success-surface: #16251c;
    --color-warning: #e5b567;
    --color-warning-surface: #2a2113;
    --color-info: #9ec5f5;
    --color-info-surface: #16212e;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow: 0 6px 20px rgb(0 0 0 / 45%);
  }
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
}

/* Nichts darf die Seite waagerecht aufziehen. `clip` verhindert das Scrollen,
   ohne einen Scrollcontainer anzulegen - anders als `hidden` bleibt die
   Tastaturfokussierung damit uneingeschränkt. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

h1,
h2,
h3 {
  line-height: 1.25;
  margin: 0 0 var(--space-3);
  font-weight: 650;
  letter-spacing: -0.01em;
}

h1 {
  font-size: 1.75rem;
}

h2 {
  font-size: 1.15rem;
}

p {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

code,
.mono {
  font-family: var(--font-mono);
  font-size: 0.85em;
}

code {
  background: var(--color-surface-muted);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
}

hr.divider {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-5) 0;
}

.muted {
  color: var(--color-text-muted);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-5);
  /* Flex-Elemente haben sonst `min-width: auto` und wachsen über den
     Viewport hinaus, sobald der Inhalt breiter ist. */
  min-width: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-surface);
  padding: var(--space-3) var(--space-4);
  border-radius: 0 0 var(--radius) 0;
  z-index: 100;
}

.skip-link:focus {
  left: 0;
}

/* --------------------------------------------------------------------------
   Kopf- und Fusszeile
   -------------------------------------------------------------------------- */

.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 4rem;
  flex-wrap: wrap;
  min-width: 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 700;
  color: var(--color-text);
  font-size: 1.05rem;
}

.brand:hover {
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-weight: 800;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  min-width: 0;
}

.site-nav a {
  color: var(--color-text-muted);
  font-size: 0.925rem;
  padding: var(--space-1) 0;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover {
  color: var(--color-text);
  text-decoration: none;
}

.site-nav a[aria-current="page"] {
  color: var(--color-text);
  border-bottom-color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Navigationsbereiche

   Drei Bereiche, die sich beim Überfahren mit der Maus und beim Fokussieren
   über die Tastatur öffnen. Kein Skript, kein Schließen-Knopf: Das Panel
   verschwindet, sobald die Maus den Bereich verlässt oder der Fokus
   weiterwandert.

   `:focus-within` ist die Tastaturbedienung. Damit funktioniert es auch ohne
   JavaScript - der `data-nav-active`-Bereich ist nur hervorgehoben, nicht
   zwangsweise offen.
   -------------------------------------------------------------------------- */

.nav-group {
  position: relative;
  /* Die Lücke zwischen Titel und Panel gehört zum Bereich, sonst schließt das
     Panel, während die Maus den Weg dorthin nimmt. Der Abstand wird deshalb
     nicht als margin gesetzt, sondern als unsichtbarer Streifen im Panel. */
}

.nav-group-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: 0.925rem;
  padding: var(--space-1) var(--space-2);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  /* Fokussierbar, damit die Tastatur in das Panel kommt (siehe nav.ejs). */
  cursor: default;
}

.nav-group-title:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.nav-caret {
  font-size: 0.7em;
  opacity: 0.7;
}

.nav-group:hover .nav-group-title,
.nav-group:focus-within .nav-group-title {
  color: var(--color-text);
}

/* Der Bereich, zu dem die aktuelle Seite gehört. */
.nav-group[data-nav-active] .nav-group-title {
  color: var(--color-text);
  border-bottom-color: var(--color-primary);
}

.nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 12rem;
  display: none;
  padding: var(--space-1) 0 var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 12%);
}

/* Der unsichtbare Streifen zwischen Titel und Panel. */
.nav-panel::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--space-2));
  left: 0;
  right: 0;
  height: var(--space-2);
}

.nav-group:hover .nav-panel,
.nav-group:focus-within .nav-panel {
  display: block;
}

/* Die Punkte im Panel stehen untereinander und füllen die Breite. */
.nav-panel a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-bottom: 0;
  border-left: 3px solid transparent;
}

.nav-panel a:hover,
.nav-panel a:focus-visible {
  color: var(--color-text);
  background: var(--color-surface-muted);
  text-decoration: none;
}

.nav-panel a[aria-current="page"] {
  color: var(--color-text);
  font-weight: 600;
  border-bottom-color: transparent;
  border-left-color: var(--color-primary);
}

.nav-user {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.avatar {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text);
}

main.container {
  flex: 1 0 auto;
  padding-top: var(--space-6);
  padding-bottom: var(--space-7);
}

.site-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: var(--space-5) 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Karten und Raster
   -------------------------------------------------------------------------- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-5);
}

.card-narrow {
  max-width: 32rem;
}

.card-danger {
  border-color: color-mix(in srgb, var(--color-danger) 40%, var(--color-border));
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.page-head h1 {
  margin-bottom: 0;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-1);
}

.hero {
  padding: var(--space-6) 0 var(--space-5);
  max-width: 44rem;
}

.hero h1 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
}

.lead {
  font-size: 1.075rem;
  color: var(--color-text-muted);
}

.hero-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.feature-grid,
.action-grid,
.stat-grid {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.feature-grid {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.action-grid {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.stat-grid {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.feature-grid .card,
.action-grid .card,
.stat-grid .card {
  margin-bottom: 0;
}

.action {
  display: block;
  color: inherit;
}

.action:hover {
  text-decoration: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow);
}

.action h2 {
  font-size: 1rem;
}

.action p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.action-danger:hover {
  border-color: var(--color-danger);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.stat-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  font-weight: 600;
}

.stat-value {
  font-size: 1.05rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.stat-link {
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   Formulare
   -------------------------------------------------------------------------- */

.field {
  margin-bottom: var(--space-4);
}

.field label {
  display: block;
  font-weight: 600;
  font-size: 0.925rem;
  margin-bottom: var(--space-2);
}

input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%;
  padding: 0.65rem 0.75rem;
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

input:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

input:focus {
  border-color: var(--color-primary);
}

input[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.hint,
.field-note {
  font-size: 0.825rem;
  color: var(--color-text-muted);
  margin: var(--space-2) 0 0;
}

ul.hint {
  padding-left: 1.1rem;
}

.field-error {
  color: var(--color-danger);
  font-size: 0.85rem;
  margin: var(--space-2) 0 0;
  padding-left: 0;
}

ul.field-error {
  padding-left: 1.1rem;
}

.form-error {
  background: var(--color-danger-surface);
  color: var(--color-danger);
  border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  font-size: 0.9rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.65rem 1.1rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-primary-contrast);
  background: var(--color-primary);
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
}

.button:hover {
  background: var(--color-primary-hover);
  text-decoration: none;
}

.button-ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.button-ghost:hover {
  background: var(--color-surface-muted);
}

.button-danger {
  background: var(--color-danger);
  color: #fff;
}

.button-danger:hover {
  background: color-mix(in srgb, var(--color-danger) 85%, #000);
}

.button-small {
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
}

.button-block {
  width: 100%;
}

.button-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

.inline-form {
  display: inline;
  margin: 0;
}

.form-footer {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* Passwortstärke */

.strength {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.strength-bar {
  flex: 1;
  height: 0.35rem;
  border-radius: 999px;
  background: var(--color-surface-muted);
  overflow: hidden;
}

.strength-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--color-danger);
  transition: width 120ms ease, background-color 120ms ease;
}

.strength-label {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  min-width: 6rem;
}

.strength[data-score="2"] .strength-bar span {
  background: var(--color-warning);
}

.strength[data-score="3"] .strength-bar span {
  background: var(--color-info);
}

.strength[data-score="4"] .strength-bar span {
  background: var(--color-success);
}

/* --------------------------------------------------------------------------
   Tabellen und Statusanzeigen
   -------------------------------------------------------------------------- */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-bottom: var(--space-4);
}

.table th,
.table td {
  text-align: left;
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.table th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.table tr:last-child td {
  border-bottom: 0;
}

.truncate {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  width: fit-content;
}

.badge-ok {
  background: var(--color-success-surface);
  color: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
}

.badge-warn {
  background: var(--color-warning-surface);
  color: var(--color-warning);
  border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
}

.flash-stack {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.flash {
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  font-size: 0.92rem;
  border: 1px solid transparent;
  margin: 0;
}

.flash-success {
  background: var(--color-success-surface);
  color: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
}

.flash-error {
  background: var(--color-danger-surface);
  color: var(--color-danger);
  border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
}

.flash-info {
  background: var(--color-info-surface);
  color: var(--color-info);
  border-color: color-mix(in srgb, var(--color-info) 30%, transparent);
}

.flash-warning {
  background: var(--color-warning-surface);
  color: var(--color-warning);
  border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
}

.definition-list {
  display: grid;
  grid-template-columns: minmax(8rem, auto) 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font-size: 0.9rem;
}

.definition-list dt {
  color: var(--color-text-muted);
  font-weight: 600;
}

.definition-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.error-page {
  text-align: left;
}

.error-code {
  font-family: var(--font-mono);
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
  line-height: 1;
}

@media (max-width: 40rem) {
  .header-inner {
    min-height: auto;
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }

  .site-nav {
    gap: var(--space-3);
    font-size: 0.9rem;
  }

  .nav-user {
    display: none;
  }

  .definition-list {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Kundenverwaltung: Filter, Formulare, Detailansicht
   -------------------------------------------------------------------------- */

.filter-bar {
  display: flex;
  gap: var(--space-4);
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.filter-bar .field {
  margin-bottom: 0;
}

.field-grow {
  flex: 1 1 18rem;
}

.field-actions {
  display: flex;
  gap: var(--space-2);
}

.field-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.field-row .field {
  flex: 1 1 8rem;
}

.field-row .field-narrow {
  flex: 0 0 5rem;
}

.fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
}

.fieldset legend {
  font-weight: 600;
  font-size: 0.925rem;
  padding: 0 var(--space-2);
  color: var(--color-text-muted);
}

select,
textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

select:focus,
textarea:focus {
  border-color: var(--color-primary);
}

textarea {
  resize: vertical;
  min-height: 6rem;
}

.required {
  color: var(--color-danger);
}

.list-meta {
  font-size: 0.875rem;
  margin-bottom: var(--space-4);
}

.empty-state {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
  border-radius: var(--radius);
  margin: 0;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem;
}

.pagination-buttons {
  display: flex;
  gap: var(--space-2);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.detail-grid .card {
  margin-bottom: 0;
}

.button-row-tight {
  margin-top: 0;
}

.pre-wrap {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
}

.block {
  display: block;
  font-size: 0.85rem;
}
/* --------------------------------------------------------------------------
   Aufträge und Projekte: Abschnittsköpfe, Hilfsklassen
   -------------------------------------------------------------------------- */

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.section-head h2 {
  margin: 0;
}

.spaced-top {
  margin-top: var(--space-5);
}

.nowrap {
  white-space: nowrap;
}

/* Nur für Screenreader - beschriftet Aktionsspalten ohne sichtbaren Text. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Filterleiste innerhalb einer Karte: kein zusätzlicher Aussenabstand. */
.filter-bar-tight {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
/* --------------------------------------------------------------------------
   Zeiterfassung: Ansichtswechsel, Auswahlfelder, Formularbausteine
   -------------------------------------------------------------------------- */

.view-nav {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.card-today {
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
}

.label-like {
  display: block;
  font-weight: 600;
  font-size: 0.925rem;
  margin-bottom: var(--space-2);
}

.radio-row {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.radio,
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.925rem;
  cursor: pointer;
}

.radio input,
.checkbox input {
  width: auto;
  margin: 0;
}

.badges {
  display: inline-flex;
  gap: var(--space-1);
  margin-left: var(--space-2);
  vertical-align: middle;
}

input[type="datetime-local"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="date"] {
  width: 100%;
  padding: 0.65rem 0.75rem;
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

input[type="datetime-local"]:focus,
input[type="number"]:focus {
  border-color: var(--color-primary);
}
/* --------------------------------------------------------------------------
   Zeiterfassung: Wochenspalten, Eintragskarten, Zeitleiste
   -------------------------------------------------------------------------- */

.filter-panel summary {
  cursor: pointer;
  font-weight: 650;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.filter-panel[open] summary {
  margin-bottom: var(--space-4);
}

.week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: start;
  margin-bottom: var(--space-5);
}

.week-day {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: var(--space-3);
  min-width: 0;
}

.week-day-today {
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
}

.week-day-head {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-3);
}

.week-day-head h3 {
  margin: 0;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.week-day-head h3 a {
  color: inherit;
}

.week-day-date {
  margin: var(--space-1) 0 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.week-day-total {
  margin: var(--space-1) 0 0;
  font-size: 0.9rem;
  font-weight: 650;
}

.week-day-entries {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.week-day-empty {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.entry-card {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  padding: var(--space-2) var(--space-3);
  min-width: 0;
  font-size: 0.85rem;
}

.entry-card-unbillable {
  border-left-color: var(--color-warning);
}

.entry-card p {
  margin: 0 0 var(--space-1);
  overflow-wrap: anywhere;
}

/* Lange Projektnamen oder Nummern duerfen nicht aus der Karte laufen. */
.entry-title a,
.entry-meta .mono {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.entry-card p:last-child {
  margin-bottom: 0;
}

.entry-time {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-weight: 650;
}

.entry-title {
  font-weight: 600;
}

.entry-name,
.entry-meta,
.entry-activity {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.entry-description {
  white-space: pre-wrap;
}

.entry-foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.entry-duration {
  font-weight: 650;
}

.entry-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-top: var(--space-1);
}

.entry-list {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Zeitleiste der Tagesansicht.
   Höhe und Lage der Balken erzeugt der Server als eigenes Stylesheet
   (/time/timeline.css) - Inline-Styles verbietet die Content-Security-Policy.
   Hier steht nur die Gestaltung. */
.timeline {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.timeline-gutter,
.timeline-track {
  position: relative;
}

.timeline-track {
  background-image: repeating-linear-gradient(
    to bottom,
    var(--color-border) 0 1px,
    transparent 1px 56px
  );
}

.timeline-hour {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.timeline-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--color-border);
}

.timeline-block {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Der Zeitraum gibt die Höhe vor. Reicht sie nicht, wird innen gescrollt
     statt die Karte wachsen zu lassen - sonst stimmt die Zuordnung zum Raster
     nicht mehr. */
  overflow: auto;
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.timeline-block p {
  margin: 0;
  overflow-wrap: anywhere;
}

.timeline-block .entry-time {
  justify-content: space-between;
  font-size: 0.8rem;
}

.timeline-block .entry-name,
.timeline-block .entry-meta {
  font-size: 0.75rem;
}

/* Die Beschreibung auf zwei Zeilen begrenzen: der Balken ist so hoch wie sein
   Zeitraum, langer Text würde die Knöpfe aus dem Bild schieben. */
.timeline-block .entry-description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.timeline-block .entry-actions {
  margin-top: auto;
  padding-top: var(--space-1);
}

/* --------------------------------------------------------------------------
   Auswertungen
   -------------------------------------------------------------------------- */

/* Auf schmalen Geräten bleibt die Tabelle lesbar: sie scrollt waagerecht,
   statt Spalten zu quetschen. */
.report-scroll {
  overflow-x: auto;
}

.report-table {
  min-width: 44rem;
}

.report-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.report-table tfoot th,
.report-table tfoot td {
  border-top: 2px solid var(--color-border);
  border-bottom: 0;
  font-weight: 650;
}

.report-table tfoot th {
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text);
}

/* --------------------------------------------------------------------------
   Tätigkeitsnachweis: Logo-Verwaltung und Vorlagenübersicht
   -------------------------------------------------------------------------- */

.asset-list {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.asset-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  font-size: 0.875rem;
}

.asset-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.template-summary {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
  margin-top: var(--space-3);
}

.template-summary h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 1rem;
}

.block-list {
  margin: 0;
  padding-left: 1.4rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.continuations {
  border-top: 1px dashed var(--color-border);
  padding-top: var(--space-3);
  margin-bottom: var(--space-3);
}

.continuations h3 {
  font-size: 0.9rem;
  margin-bottom: var(--space-1);
}

.continuation {
  font-size: 0.85rem;
  margin-bottom: var(--space-1);
}

/* --------------------------------------------------------------------------
   PDF-Vorlagen: Editor für Bausteine
   -------------------------------------------------------------------------- */

/* Zwei Spalten: links die verfügbaren Bausteine, rechts der Aufbau. Auf
   schmalen Geräten stehen sie untereinander. */
.editor-columns {
  display: grid;
  grid-template-columns: minmax(14rem, 20rem) 1fr;
  gap: var(--space-5);
  align-items: start;
}

.editor-columns-narrow {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 60rem) {
  .editor-columns {
    grid-template-columns: 1fr;
  }
}

/* Die Bausteinvorschläge. Ein Klick hängt den Baustein an. */
.block-palette {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
}

.block-palette h2 {
  font-size: 1rem;
  margin: 0;
}

.palette-item {
  display: grid;
  gap: 0.15rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
}

.palette-item:hover {
  border-color: var(--color-primary);
}

/* Ein Baustein, der bereits im Aufbau steht: sichtbar, aber nicht wählbar. */
.palette-item[data-used="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.palette-label {
  font-weight: 600;
  font-size: 0.9rem;
}

.palette-hint {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.block-canvas {
  min-width: 0;
}

.block-list-editor {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.block-row {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  padding: var(--space-3);
}

.block-row[data-dragging="true"] {
  opacity: 0.5;
}

.block-row[data-drop-target="true"] {
  border-color: var(--color-primary);
  border-style: dashed;
}

.block-row-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.drag-handle {
  cursor: grab;
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 var(--space-1);
}

.block-row-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
}

.block-row-name {
  font-weight: 650;
}

.block-row-actions {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

/* Eine Zeile ist ein Raster: breite Felder nehmen die ganze Zeile, kurze
   stehen nebeneinander. */
.block-row-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: flex-end;
}

.block-row-fields .field-wide {
  flex: 1 1 100%;
}

.block-row-fields fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin: 0;
}

.block-row-fields legend {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  padding: 0 var(--space-1);
}

.check {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 500;
  font-size: 0.875rem;
}

.check-inline {
  display: inline-flex;
  margin-right: var(--space-3);
}

/* --- Übersicht der Vorlagen --- */

.template-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.template-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  background: var(--color-surface);
}

.template-item-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.template-item-name {
  font-weight: 650;
  font-size: 1.05rem;
}

/* --- Vorschaurahmen --- */

.pdf-preview {
  width: 100%;
  /* Etwa eine A4-Seite: hoch genug, um den Aufbau zu beurteilen. */
  height: 32rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
}

/* --- Mandantenverwaltung --- */

.tenant-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.tenant-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  background: var(--color-surface);
}

.tenant-item-disabled {
  background: var(--color-surface-muted);
}

.tenant-item-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.tenant-item-name {
  font-weight: 650;
  font-size: 1.05rem;
}

.tenant-item-slug {
  margin: var(--space-1) 0 var(--space-2);
  font-size: 0.85rem;
}

.tenant-edit {
  margin-bottom: var(--space-2);
}

.tenant-edit summary {
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--color-primary);
}

.tenant-edit .field-row {
  margin-top: var(--space-2);
}

/* --- Mitgliederverwaltung --- */

.member-name {
  font-weight: 600;
}

.invitation-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.invitation-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  font-size: 0.875rem;
}

.invitation-email {
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Karte für eine einmalige Anzeige - der Einladungslink. */
.card-accent {
  border-left: 0.35rem solid var(--color-primary);
}

/* --------------------------------------------------------------------------
   Schmale Geräte
   -------------------------------------------------------------------------- */

/* Schmale Geräte: keine Zeitleiste, sondern Karten in Reihenfolge. */
.entry-list {
  display: none;
}

@media (max-width: 60rem) {
  .week-grid {
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  }
}

@media (max-width: 44rem) {
  .week-grid {
    grid-template-columns: 1fr;
  }

  .week-day {
    padding: var(--space-4);
  }

  .timeline {
    display: none;
  }

  .continuations {
    border-top: 0;
    padding-top: 0;
  }

  .entry-list {
    display: grid;
  }
}

/* Kein waagerechtes Scrollen auf schmalen Geräten. */
.container,
.card,
.week-grid,
.week-day,
.entry-card,
.timeline-block {
  min-width: 0;
}

.entry-card *,
.timeline-block * {
  max-width: 100%;
}

@media (max-width: 44rem) {
  .filter-bar .field,
  .filter-bar .field-actions {
    flex: 1 1 100%;
  }

  .filter-bar .button {
    flex: 1 1 auto;
  }

  .table {
    display: block;
    overflow-x: auto;
  }

  /* Auf schmalen Geraeten stehen die Aktionsknoepfe untereinander, statt
     halb umzubrechen. */
  .entry-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .entry-actions .button,
  .entry-actions .inline-form {
    width: 100%;
  }
}

/* Schmale Geräte: der Kopfbereich ist die einzige Stelle mit vielen
   Beschriftungen nebeneinander. Marke und Navigation stehen dort untereinander
   und die Navigation bricht um. */
@media (max-width: 30rem) {
  .header-inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .site-nav {
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    width: 100%;
  }

  .site-nav a,
  .site-nav .button {
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
  }

  .brand {
    font-size: 0.95rem;
  }

  .nav-user {
    display: none;
  }

  /* Schmale Geräte: Das Panel kann nicht absolut stehen - es würde aus dem
     Bild laufen. Es schiebt sich stattdessen in den Kopfbereich ein und nimmt
     die volle Breite. Geöffnet wird auch hier über Maus oder Fokus. */
  .nav-panel {
    position: static;
    min-width: 0;
    width: 100%;
    margin-top: var(--space-1);
    box-shadow: none;
  }

  .nav-panel::before {
    display: none;
  }

  .nav-group {
    width: 100%;
  }
}

/* Sehr schmale Geräte (ab 320px): Abstände verkleinern, damit die Seite
   ohne waagerechtes Scrollen auskommt. */
@media (max-width: 26rem) {
  .container {
    padding: 0 var(--space-3);
  }

  h1 {
    font-size: 1.35rem;
  }

  .week-day {
    padding: var(--space-3);
  }

  .entry-card {
    padding: var(--space-2);
  }

  .entry-actions {
    gap: var(--space-1);
  }

  /* Datums- und Zeiteingaben bringen eine eigene Mindestbreite mit. */
  input[type="datetime-local"],
  input[type="date"],
  input[type="number"] {
    min-width: 0;
  }
}