:root {
  --ink: #000000;
  --ink-2: #2B2B2B;
  --text: #000000;
  --text-soft: #1A1A1A;
  --paper: #F3DFC7;
  --panel: #FFFFFF;
  --panel-soft: #FAFBFC;
  --panel-soft-2: #FAFAF7;
  --neutral-soft: #EEECE7;
  --sidebar-bg: #F7EFE1;
  --line: #E8D3B4;
  --accent: #E8734A;
  --accent-dark: #C25A34;
  --accent-soft: #FCEEE8;
  --navy-accent: #3E9186;
  --navy-accent-soft: #E4F2EF;
  --success: #2C7A6C;
  --success-soft: #E4F2EF;
  --warning: #B07423;
  --warning-soft: #FBF0DF;
  --danger: #C0392B;
  --danger-soft: #FBEAE8;
  --contrast-text: #FFFFFF;
  --radius: 6px;
  --shadow-sm: 0 1px 2px rgba(45,42,40,0.05);
  --shadow-md: 0 4px 16px rgba(45,42,40,0.08);
}

html.dark {
  --ink: #F3EEE7;
  --ink-2: #DCD4C8;
  --text: #F3EEE7;
  --text-soft: #B7AFA2;
  --paper: #221C16;
  --panel: #2B241D;
  --panel-soft: #322A22;
  --panel-soft-2: #302921;
  --neutral-soft: #3A322A;
  --sidebar-bg: #262019;
  --line: #40372D;
  --accent: #E8794F;
  --accent-dark: #F2A17A;
  --accent-soft: #3D2C21;
  --navy-accent: #57B3A4;
  --navy-accent-soft: #203832;
  --success: #52B79B;
  --success-soft: #1F362E;
  --warning: #E0A253;
  --warning-soft: #3B2E1B;
  --danger: #E37363;
  --danger-soft: #3C231C;
  --contrast-text: #221C16;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.45);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: 'Libre Franklin', 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 0.4em 0;
  color: var(--ink);
}

a { color: var(--navy-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.layout { display: flex; min-height: 100vh; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: 232px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  color: var(--text-soft);
  display: flex;
  flex-direction: column;
  padding: 26px 0;
  border-right: 1px solid var(--line);
}

.sidebar .brand {
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: 0.01em;
  padding: 0 22px 22px 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
  color: var(--ink);
}

.sidebar .brand span { color: var(--accent); }

.sidebar nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.sidebar nav a {
  color: var(--text-soft);
  padding: 11px 22px;
  font-size: 0.92rem;
  font-weight: 500;
  border-left: 3px solid transparent;
  letter-spacing: 0.01em;
}
.sidebar nav a:hover { background: var(--accent-soft); text-decoration: none; color: var(--accent-dark); }
.sidebar nav a.active {
  background: var(--accent-soft);
  border-left-color: var(--accent);
  color: var(--accent-dark);
  font-weight: 600;
}

.sidebar .user-box {
  padding: 16px 22px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
}
.sidebar .user-box strong { color: var(--ink); }
.sidebar .user-box .role-badge {
  display: inline-block;
  margin-top: 5px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 3px;
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.sidebar .user-box form { margin-top: 12px; }
.sidebar .user-box button {
  background: none;
  border: 1px solid var(--line);
  color: var(--text-soft);
  padding: 7px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.82rem;
  width: 100%;
  transition: background 0.15s;
}
.sidebar .user-box button:hover { background: var(--paper); color: var(--ink); }

/* ---------- Main ---------- */
main { flex: 1; padding: 36px 44px; max-width: 1220px; }

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.page-header h1 { margin: 0; font-size: 1.5rem; }

/* Kacheln richten sich nach ihrem Inhalt: Eine Kachel mit langem Titel wird
   breiter, statt den Titel umzubrechen. Reicht der Platz nicht, rutschen die
   ueberzaehligen Kacheln in die naechste Zeile. Ein starres Raster mit
   gleichen Spaltenbreiten kann beides nicht. */
.stats-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 16px;
  margin-bottom: 32px;
}
.stats-grid > a,
.stats-grid > .stat-card {
  /* Grundbreite = Inhaltsbreite; waechst in den freien Platz hinein,
     schrumpft aber nie unter 170px und nie ueber die Zeilenbreite hinaus. */
  flex: 1 1 auto;
  min-width: 170px;
  max-width: 100%;
}

.stat-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy-accent);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s, transform 0.15s;
  /* Gleiche Hoehe fuer alle Kacheln, auch wenn nur manche eine
     Zusatzzeile haben. Die Karte fuellt dazu ihre Rasterzelle aus. */
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* Gleiche Mindesthoehe fuer ALLE Kacheln - auch ueber Zeilenumbrueche
     hinweg. Ohne sie waere nur jede Zeile fuer sich gleich hoch. */
  min-height: 104px;
}
/* Die Kacheln stecken in einem Link - der muss die Hoehe weiterreichen. */
.stats-grid > a { display: block; height: 100%; }
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat-card .label {
  font-size: 0.76rem;
  color: var(--text-soft);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  /* Der Titel soll moeglichst in einer Zeile stehen - die Kachel passt sich
     an. Nur wenn selbst das nicht reicht (sehr schmales Display), wird
     innerhalb des Wortes umgebrochen. */
  white-space: nowrap;
  line-height: 1.3;
  /* Fester Platz fuer den Titel: So beginnen die Zahlen aller Kacheln auf
     derselben Hoehe, auch wenn ein Titel einmal zweizeilig wird. */
  min-height: 1.3em;
}
@media (max-width: 640px) {
  .stat-card .label { white-space: normal; overflow-wrap: anywhere; }
}
.stat-card .value {
  font-family: 'Libre Franklin', sans-serif;
  font-size: 2rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.1;
  overflow-wrap: anywhere;
}
/* Erlaeuterung unter der Zahl. Sitzt in JEDER Kachel, damit keine
   halbleer wirkt - notfalls leer, dann haelt sie nur den Platz. */
.stat-card .sub {
  font-size: 0.72rem;
  color: var(--text-soft);
  margin-top: 4px;
  min-height: 1em;
  white-space: nowrap;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin-bottom: 26px;
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.panel h2 { font-size: 1.05rem; margin-bottom: 16px; }

/* ---------- Buttons ---------- */
.btn { /* btn-creme */
  display: inline-block;
  background: var(--sidebar-bg);
  color: var(--text);
  border: 1px solid var(--accent);
  padding: 10px 20px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 0.15s;
}
.btn:hover { background: var(--accent-soft); text-decoration: none; color: var(--text); }
.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  font-weight: 500;
}
.btn-secondary:hover { background: var(--paper); color: var(--text); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #8B2C24; color: #fff; }
.btn-sm { padding: 6px 13px; font-size: 0.8rem; }

/* ---------- Tables ---------- */
table { width: 100%; min-width: 600px; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
th {
  color: var(--text-soft);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--panel-soft);
}
tr:hover td { background: var(--panel-soft-2); }

/* ---------- Badges ---------- */
.badge {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.badge-aktiv, .badge-abgeschlossen { background: var(--success-soft); color: var(--success); }
.badge-inaktiv { background: var(--danger-soft); color: var(--danger); }
.badge-offen { background: var(--warning-soft); color: var(--warning); }
.badge-in_arbeit { background: var(--navy-accent-soft); color: var(--navy-accent); }
.badge-admin { background: var(--accent-soft); color: var(--accent-dark); }
.badge-mitarbeiter { background: var(--neutral-soft); color: var(--text-soft); }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 7px;
  color: var(--ink);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=date], input[type=number], select, textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-family: inherit;
  background: var(--panel);
  color: var(--text);
}
textarea { resize: vertical; min-height: 80px; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--navy-accent);
  box-shadow: 0 0 0 3px rgba(46,78,126,0.12);
}

.alert {
  padding: 13px 16px;
  border-radius: var(--radius);
  margin-bottom: 18px;
  font-size: 0.88rem;
  border-left: 3px solid var(--danger);
}
.alert-error { background: var(--danger-soft); color: var(--danger); }

.empty-state {
  text-align: center;
  padding: 52px 20px;
  color: var(--text-soft);
}

.search-box { display: flex; gap: 8px; }
.search-box input { min-width: 260px; }

.filter-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.filter-tabs a {
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--text-soft);
  border: 1px solid var(--line);
  background: var(--panel);
}
.filter-tabs a.active { background: var(--ink); color: var(--contrast-text); border-color: var(--ink); }
.filter-tabs a:hover { text-decoration: none; background: var(--navy-accent-soft); }

/* Die Aktionsspalte war ein Flex-Container. Damit faellt die Zelle aus dem
   Zeilenraster der Tabelle - die untere Trennlinie sitzt dann tiefer als in
   den uebrigen Spalten, und die Zeile wirkt zerrissen. Die Zelle bleibt
   deshalb eine normale Tabellenzelle; die Anordnung uebernimmt ein
   Behaelter darin. */
.actions-cell {
  white-space: nowrap;
  padding-left: 20px;
  vertical-align: middle;
}
.actions-cell > * {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-right: 20px;
}
.actions-cell > *:last-child { margin-right: 0; }
/* Formulare mit Knopf sollen keine eigene Zeile beanspruchen. */
.actions-cell form { display: inline-flex; margin: 0; }

/* ---------- Login ---------- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #F6A688 0%, #E8734A 55%, #D9603A 100%);
}
.login-card {
  background: var(--panel);
  padding: 44px 40px;
  border-radius: 10px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.login-card .brand {
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: 8px;
  color: var(--ink);
}
.login-card .brand span { color: var(--accent); }
.login-card p.sub { color: var(--text-soft); font-size: 0.88rem; margin-bottom: 26px; }
.login-card .btn { width: 100%; padding: 12px; margin-top: 10px; background: var(--accent); color: #fff; }
.login-card .btn:hover { background: #D3602F; color: #fff; }

@media (max-width: 800px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; }
  main { padding: 16px; }
  .form-row { grid-template-columns: 1fr; }
  .panel { padding: 16px; }
  th, td { padding: 9px 10px; font-size: 0.84rem; }
  .stats-grid { gap: 10px; }
  .stats-grid > a, .stats-grid > .stat-card { min-width: 140px; }
  .stat-card { min-height: 92px; padding: 14px 16px; }
  .stat-card .value { font-size: 1.7rem; }
  .page-header { gap: 10px; }
  .page-header h1 { font-size: 1.25rem; }
  .actions-cell { white-space: normal; padding-left: 10px; }
  .actions-cell > * { margin-right: 10px; }
}

/* ---------- Kartenansicht für Modul-Einträge (Kunden, Lieferanten, Produkte, ...) ---------- */
.karten-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}
.eintrag-karte {
  display: block;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}
.eintrag-karte:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--accent);
  text-decoration: none;
}
.eintrag-karte-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.eintrag-karte-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.eintrag-karte-kopf-text { min-width: 0; }
.eintrag-karte-titel {
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eintrag-karte-untertitel {
  font-size: 0.76rem;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eintrag-karte-felder {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.eintrag-karte-zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 0.76rem;
}
.eintrag-karte-label { color: var(--text-soft); flex-shrink: 0; }
.eintrag-karte-wert {
  color: var(--text);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.eintrag-karte-neu {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--line);
  color: var(--text-soft);
  font-size: 0.85rem;
  font-weight: 500;
  min-height: 100px;
  box-shadow: none;
}
.eintrag-karte-neu:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
  box-shadow: none;
  transform: none;
}

@media (max-width: 800px) {
  .karten-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .eintrag-karte { padding: 14px; }
}

/* ---------- Dark-Mode-Umschalter ---------- */
body, .panel, .sidebar, .stat-card, input, select, textarea {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.toggle-row { display: flex; align-items: center; gap: 12px; }
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--line); transition: 0.2s; border-radius: 24px;
}
.toggle-slider::before {
  position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px;
  background: #fff; transition: 0.2s; border-radius: 50%;
}
.toggle-switch input:checked + .toggle-slider { background: var(--accent); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

/* btn-creme: rote & sekundäre Buttons ohne geerbten Rahmen */
.btn-danger, .btn-secondary { border: none; }

/* Rechnungs-Tabellen: auf schmalen Screens horizontal scrollen statt abschneiden */
.tabelle-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }


/* rechnungs-karten: Rechnungs-Tabellen auf schmalen Screens als Karten */
@media (max-width: 1024px) {
  .tabelle-scroll { overflow: visible; }
  .tabelle-scroll table,
  .tabelle-scroll tbody,
  .tabelle-scroll tr,
  .tabelle-scroll td { display: block; width: 100%; }
  .tabelle-scroll table { min-width: 0; }
  .tabelle-scroll thead { display: none; }
  .tabelle-scroll tr {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }
  .tabelle-scroll td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border: none;
    text-align: right;
  }
  .tabelle-scroll td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-soft, #666);
    font-size: 0.82rem;
    text-align: left;
    margin-right: auto;
  }
  .tabelle-scroll td.actions-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
    padding-top: 10px;
    margin-top: 6px;
    border-top: 1px solid rgba(0,0,0,0.08);
    text-align: left;
  }
  .tabelle-scroll td.actions-cell::before { content: ""; margin: 0; }
  /* In der Kartenansicht ist die Zelle wieder Flex - den Abstand regelt
     dort "gap", der eigene Aussenabstand wuerde sich sonst addieren. */
  .tabelle-scroll td.actions-cell > * { margin-right: 0; }
  .tabelle-scroll .rechnung-nr-link { font-weight: 700; font-size: 1.02rem; }
}

/* ---------- Buchungsformular mit Belegvorschau ---------- */
/* Formular links, Beleg rechts. Beim Erfassen wechselt der Blick staendig
   zwischen beiden - nebeneinander erspart das Fensterwechseln. */
/* Diese Seite darf breiter werden als die uebrigen. Die 1220px an "main"
   sind fuer Textseiten gedacht - hier stehen Formular und Beleg
   nebeneinander, und der Beleg braucht Platz. Gesetzt wird die Ausnahme
   ueber die Elternregel, damit nur diese Seite betroffen ist. */
main:has(.beleg-layout) { max-width: 2000px; }
/* Rueckfall fuer Browser ohne :has() - die Ansicht setzt die Klasse selbst. */
main.main-breit { max-width: 2000px; }

.beleg-layout {
  display: flex;
  gap: 20px;
  /* stretch statt flex-start: Beide Spalten werden so hoch wie die hoehere
     von beiden. Sonst endet das Formular auf halber Hoehe und daneben steht
     der Beleg allein - das wirkt unfertig. */
  align-items: stretch;
}
/* Das Formular braucht nur so viel Breite, wie die Felder benoetigen -
   alles Weitere gehoert dem Beleg. Deshalb feste Grundbreite links und
   "waechst in den Rest" rechts. */
.beleg-layout > .beleg-formular { flex: 0 0 460px; min-width: 0; }
.beleg-layout > .beleg-vorschau { flex: 1 1 auto; min-width: 0; }

/* Beide Panels fuellen ihre Spalte vollstaendig aus. */
.beleg-formular .panel { height: 100%; box-sizing: border-box; margin-bottom: 0; }
.beleg-vorschau .panel {
  height: 100%;
  box-sizing: border-box;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}
/* Schmalerer Rand als bei den uebrigen Panels: Jeder Millimeter kommt
   dem Beleg zugute. */
.beleg-vorschau .panel { padding: 12px; }
.beleg-vorschau iframe,
.beleg-vorschau img {
  width: 100%;
  /* Waechst mit, wenn das Formular hoeher ist; gibt sonst selbst die
     Hoehe der Zeile vor. */
  flex: 1 1 auto;
  height: auto;
  min-height: calc(100vh - 190px);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  display: block;
}
.beleg-vorschau img { object-fit: contain; }

/* Unter 1100px untereinander: Nebeneinander waere jede Spalte zu schmal,
   um den Beleg noch lesen zu koennen. */
@media (max-width: 1100px) {
  .beleg-layout { display: block; }
  .beleg-formular .panel { height: auto; margin-bottom: 16px; }
  .beleg-vorschau .panel { height: auto; margin-top: 0; }
  .beleg-vorschau iframe, .beleg-vorschau img { height: 75vh; min-height: 0; flex: none; }
}