/* Optik wie die WerkerHeld-App (Software/public/assets/css/tokens.css) */

@font-face {
  font-family: "Geist";
  src: url("schrift/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --weiss: #ffffff;
  --hintergrund: #e6f3ff;
  --linie: #e2e8f0;
  --linie-hell: #f1f5f9;
  --karte-rand: #e8edf3;
  --akzent: #1a73c8;
  --akzent-hell: #e6f1fb;
  --akzent-hover: #1565b8;
  --schwarz: #111827;
  --dunkelgrau: #374151;
  --grau: #6b7280;
  --hellgrau: #d1d5db;
  --rot: #dc2626;
  --rot-hell: #fee2e2;
  --orange: #d97706;
  --orange-hell: #fef3c7;
  --gruen: #059669;
  --gruen-hell: #d1fae5;
  --schatten: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
  --radius-karte: 14px;
  --radius-knopf: 10px;
  --sidebar: 228px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--hintergrund);
  color: var(--schwarz);
  font: 13px/1.45 "Geist", system-ui, sans-serif;
}

a { color: var(--akzent); text-decoration: none; }
a:hover { color: var(--akzent-hover); }
h1 { font-size: 20px; font-weight: 700; line-height: 36px; margin: 0 0 16px; letter-spacing: -0.01em; }
h1 small { font-size: 12px; font-weight: 500; color: var(--grau); margin-left: 6px; }
h2 { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--grau); margin: 28px 0 8px; }
p { margin: 0 0 12px; }
small, .grau { color: var(--grau); }
code { font: 11px ui-monospace, Consolas, monospace; word-break: break-all; }
.icon { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }

/* Sidebar */
#sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  display: flex;
  flex-direction: column;
  background: var(--weiss);
  border-right: 1px solid var(--linie);
}
#sidebar .marke {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 16px;
  border-bottom: 1px solid var(--linie);
}
.logo {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--akzent);
  color: var(--weiss);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.logo .icon { width: 17px; height: 17px; }
#sidebar .marke div { min-width: 0; }
#sidebar .marke b { display: block; font-size: 15px; letter-spacing: -0.02em; }
#sidebar .marke small { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sidebar nav { flex: 1; display: flex; flex-direction: column; gap: 1px; padding: 10px 8px; overflow-y: auto; }
#sidebar nav .abschnitt { font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--hellgrau); padding: 14px 8px 4px; }
#sidebar nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-knopf);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--grau);
}
#sidebar nav a .icon { opacity: 0.7; }
#sidebar nav a:hover { background: var(--hintergrund); color: var(--schwarz); }
#sidebar nav a.aktiv { background: var(--akzent-hell); color: var(--akzent); font-weight: 600; }
#sidebar nav a.aktiv .icon { opacity: 1; }
#sidebar .profil {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--linie);
}
#sidebar .avatar {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--akzent);
  color: var(--weiss);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#sidebar .profil div { min-width: 0; flex: 1; }
#sidebar .profil a { display: block; font-size: 12px; font-weight: 600; color: var(--schwarz); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sidebar .profil form { margin: 0; }
#sidebar .profil button.link { font-size: 11px; font-weight: 500; color: var(--grau); }

main { margin-left: var(--sidebar); padding: 32px 32px 64px; max-width: calc(1100px + var(--sidebar)); }

/* Anmeldung */
main.login { margin: 0 auto; max-width: 380px; padding: 16vh 16px 40px; }
.anmeldung { background: var(--weiss); border-radius: 18px; box-shadow: var(--schatten); padding: 28px 24px 24px; }
.anmeldung h1 { display: flex; align-items: center; gap: 10px; font-size: 18px; margin-bottom: 20px; }
.anmeldung button { width: 100%; margin-top: 6px; padding: 11px 16px; }

.rechtliches { display: flex; justify-content: center; gap: 16px; margin: 14px 0 0; font-size: 11px; }
.rechtliches a { color: var(--grau); }
.rechtliches a:hover { color: var(--schwarz); }
#sidebar .rechtliches { justify-content: flex-start; margin: 0; padding: 0 14px 12px; }

/* Impressum und Datenschutz, auch ohne Anmeldung */
main.frei { margin: 0 auto; max-width: 760px; padding: 48px 16px 64px; }
.seite { max-width: 720px; background: var(--weiss); border-radius: var(--radius-karte); box-shadow: var(--schatten); padding: 24px 28px; }
.seite h2 { font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--schwarz); margin: 22px 0 6px; }
.seite h2:first-child { margin-top: 0; }
.seite p { color: var(--dunkelgrau); line-height: 1.6; }
.seite > :last-child { margin-bottom: 0; }

/* Kopfzeile einer Seite: Überschrift links, Knöpfe rechts */
.kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.kopf h1 { margin: 0; }
.kopf h1 + .badge { margin-left: 2px; }

/* Meldungen */
.meldung {
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: var(--radius-knopf);
  font-size: 12px;
  font-weight: 500;
  background: var(--weiss);
  border: 1px solid var(--karte-rand);
}
.meldung.ok { background: #f0fdf4; border-color: #dcfce7; color: #166534; }
.meldung.hinweis { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.meldung.fehler { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.meldung ul { margin: 4px 0 0; padding-left: 18px; }
.meldung a { font-weight: 600; }

/* Karten */
fieldset, details {
  background: var(--weiss);
  border: none;
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten);
  padding: 16px;
  margin: 0 0 12px;
  min-width: 0;
}
legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--grau);
}
legend + * { clear: both; }
fieldset > :last-child { margin-bottom: 0; }

/* Felder wie .input-field: Label und Wert in einer hellblauen Fläche */
label { display: block; font-size: 12px; font-weight: 500; color: var(--grau); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
input, select, textarea {
  width: 100%;
  font: 12px "Geist", system-ui, sans-serif;
  color: var(--schwarz);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-knopf);
  padding: 9px 12px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--akzent); }
textarea { resize: vertical; }
input[type=checkbox] { width: 16px; height: 16px; padding: 0; margin: 0 8px 0 0; accent-color: var(--akzent); flex-shrink: 0; }
input[type=file] { width: auto; background: transparent; border: none; padding: 0; color: var(--grau); }
input[type=file]::file-selector-button {
  font: 600 12px "Geist", system-ui, sans-serif;
  color: var(--dunkelgrau);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-knopf);
  padding: 8px 14px;
  margin-right: 10px;
  cursor: pointer;
}

/* Raster mit 6 Spalten, ein Feld belegt 2 davon */
.felder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.felder > * { grid-column: span 2; }
.felder > .s1 { grid-column: span 1; }
.felder > .s3 { grid-column: span 3; }
.felder > .s4 { grid-column: span 4; }
.felder > .ganz { grid-column: 1 / -1; }

/* Felder und Knopf in einer Reihe */
.reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.reihe > div { flex: 1 1 160px; max-width: 280px; }
.reihe > div.breit { flex-grow: 3; max-width: none; }

.felder > div, .reihe > div, .feld {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--hintergrund);
  border-radius: var(--radius-knopf);
  padding: 10px 14px;
  min-width: 0;
}
.feld { margin-bottom: 10px; }
.felder > div:focus-within, .reihe > div:focus-within, .feld:focus-within { background: var(--weiss); box-shadow: inset 0 0 0 2px var(--akzent-hell); }
.felder > div input, .felder > div select, .felder > div textarea,
.reihe > div input, .reihe > div select,
.feld input, .feld select, .feld textarea {
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
}
.felder select, .reihe select, .feld select { margin-left: -4px; }

.checks { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 4px 2px 12px; }
label.check { display: flex; align-items: center; color: var(--dunkelgrau); font-size: 12px; white-space: normal; overflow: visible; }
.hilfe { font-size: 11.5px; color: var(--grau); margin: -2px 2px 12px; }

/* Knöpfe */
button, .knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  font: 600 12px "Geist", system-ui, sans-serif;
  white-space: nowrap;
  color: var(--dunkelgrau);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-knopf);
  cursor: pointer;
  transition: background 150ms ease;
}
button:hover, .knopf:hover { background: var(--hintergrund); color: var(--schwarz); }
button.wichtig, .knopf.wichtig { background: var(--akzent); border-color: var(--akzent); color: var(--weiss); }
button.wichtig:hover, .knopf.wichtig:hover { background: var(--akzent-hover); color: var(--weiss); }
button.loeschen { color: var(--rot); border-color: var(--rot-hell); }
button.loeschen:hover { background: #fef2f2; color: var(--rot); }
.knopf.leise { background: none; border-color: transparent; color: var(--grau); }
.knopf.leise:hover { background: var(--weiss); color: var(--schwarz); }
button.link { background: none; border: none; padding: 0; color: var(--akzent); font-weight: 600; }
button.link:hover { background: none; color: var(--akzent-hover); }
button[disabled] { opacity: 0.5; cursor: default; }
form.inline { display: inline; margin: 0; }

/* Knopfleiste unter Formularen und über Inhalten */
.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.rechts { margin-left: auto; }
.aktionen form { margin-top: 0; margin-bottom: 0; }
.aktionen + h2 { margin-top: 24px; }
form > .aktionen:last-child { margin-bottom: 28px; }

/* Suche und Filter über Listen */
.filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.filter select { width: 170px; }
.filter input { width: 280px; }
.filter a { margin-left: 6px; font-weight: 600; font-size: 12px; }

/* Eckdaten einer Rechnung */
.eckdaten {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  margin: 0 0 14px;
  padding: 16px 18px;
  background: var(--weiss);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten);
}
.eckdaten div { min-width: 0; }
.eckdaten dt { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--grau); margin-bottom: 3px; }
.eckdaten dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.eckdaten dd small { display: block; font-weight: 400; }

/* Tabellen als Karten */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--weiss);
  border-radius: var(--radius-karte);
  box-shadow: var(--schatten);
  overflow: hidden;
  margin-bottom: 12px;
}
th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--grau);
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--karte-rand);
  white-space: nowrap;
}
td { padding: 10px 14px; border-bottom: 1px solid var(--linie-hell); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
td a { font-weight: 600; }
td:first-child a { white-space: nowrap; }
td small { display: block; }
td.r, th.r { text-align: right; white-space: nowrap; }
td.knoepfe { text-align: right; white-space: nowrap; }
td.zeit { white-space: nowrap; }
td.details { font-size: 11px; color: var(--grau); overflow-wrap: anywhere; }
td.knoepfe > * + * { margin-left: 12px; }
table.schmal { width: auto; min-width: 380px; }
tr.summe td { border-bottom: none; padding-top: 6px; padding-bottom: 6px; color: var(--grau); }
tr.summe:first-of-type td, tr.summe.erste td { border-top: 1px solid var(--karte-rand); padding-top: 12px; }
tr.summe.gesamt td { color: var(--schwarz); font-weight: 700; padding-bottom: 12px; }

/* Passwort direkt in der Tabelle setzen */
.feld-knopf { display: inline-flex; gap: 6px; margin: 0; }
.feld-knopf input { width: 180px; padding: 7px 10px; background: var(--hintergrund); border-color: transparent; }
.feld-knopf input:focus { background: var(--weiss); }
.feld-knopf button { padding: 7px 12px; }

/* Status wie .status-badge-v2 */
.badge { display: inline-block; font-size: 10.5px; font-weight: 600; line-height: 18px; padding: 0 9px; border-radius: 20px; background: #eceef1; color: #5f6672; white-space: nowrap; }
.badge.offen { background: var(--orange-hell); color: var(--orange); }
.badge.bezahlt { background: var(--gruen-hell); color: var(--gruen); }
.badge.ueberfaellig { background: var(--rot-hell); color: var(--rot); }
.badge.entwurf { background: var(--akzent-hell); color: var(--akzent); }
a.ueberfaellig { color: var(--rot); }

/* Reiter wie die Chips in WerkerHeld */
.reiter { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 18px; }
.reiter a, .reiter b {
  padding: 6px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--weiss);
  border: 1.5px solid var(--linie);
  color: var(--dunkelgrau);
}
.reiter a:hover { border-color: var(--hellgrau); color: var(--schwarz); }
.reiter b { background: var(--akzent-hell); border-color: var(--akzent); color: var(--akzent); }

/* Positionen */
#positionen td { padding: 6px 4px; vertical-align: top; }
#positionen th { padding-left: 16px; padding-right: 16px; }
#positionen td:first-child { width: 42%; padding-left: 12px; }
#positionen th:first-child { padding-left: 24px; }
#positionen td:last-child { padding-right: 12px; }
#positionen input, #positionen select, #positionen textarea { background: var(--hintergrund); border-color: transparent; }
#positionen input:focus, #positionen textarea:focus, #positionen select:focus { background: var(--weiss); border-color: var(--akzent); }
#positionen textarea { display: block; margin-top: 4px; color: var(--grau); }
#positionen input[name=menge], #positionen input[name=preis] { text-align: right; }
#positionen select { min-width: 104px; }
#positionen td.gesamt { padding: 14px 16px 6px 10px; font-weight: 500; }
#positionen button.weg { width: 32px; height: 34px; padding: 0; border-color: transparent; background: none; color: var(--grau); }
#positionen button.weg:hover { background: #fef2f2; color: var(--rot); }
#positionen button.weg .icon { width: 14px; height: 14px; }
#summen { margin-left: auto; color: var(--grau); }
#summen strong { color: var(--schwarz); }
.versteckt { display: none !important; }
.unsichtbar { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#steuer-hinweis { margin-top: 0; }
#positionen.ohne-ust th:nth-child(5), #positionen.ohne-ust td:nth-child(5) { display: none; }
details.mehr summary { color: var(--akzent); }
.einrichtung ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; clear: both; }
.einrichtung li.erledigt { color: var(--grau); list-style: none; margin-left: -20px; }
.einrichtung li .icon { width: 13px; height: 13px; margin-right: 7px; vertical-align: -2px; fill: currentColor; }

details { padding: 14px 16px; }
summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--dunkelgrau); }
details[open] summary { margin-bottom: 12px; }
details table { box-shadow: none; }
details > :last-child { margin-bottom: 0; }
fieldset details, details details { box-shadow: none; padding: 0; margin: 2px 2px 0; border-radius: 0; }
fieldset details summary, details details summary { color: var(--akzent); }

#schluessel { font: 12px ui-monospace, Consolas, monospace; padding: 8px 10px; margin: 8px 0; background: var(--weiss); border-radius: 8px; word-break: break-all; }

@media (max-width: 1000px) {
  .felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .felder > *, .felder > .s1 { grid-column: span 1; }
  .felder > .s3, .felder > .s4 { grid-column: 1 / -1; }
}

@media (max-width: 800px) {
  #sidebar { position: static; width: auto; border-right: none; border-bottom: 1px solid var(--linie); }
  #sidebar nav { flex-direction: row; overflow-x: auto; padding: 6px 8px; scrollbar-width: none; }
  #sidebar nav::-webkit-scrollbar { display: none; }
  #sidebar nav a { padding: 7px 10px; white-space: nowrap; }
  #sidebar nav .abschnitt { display: none; }
  #sidebar .marke, #sidebar .profil { padding: 10px 14px; }
  main { margin-left: 0; padding: 20px 14px 40px; }
  .reihe > div { max-width: none; }
  .filter select, .filter input { flex: 1 1 140px; width: auto; }
  #positionen thead { display: none; }
  #positionen tr { display: grid; grid-template-columns: 1fr 1fr; padding: 6px 0; }
  #positionen td, #positionen td:first-child { border: none; padding: 4px 12px; }
  #positionen td:first-child { grid-column: 1 / -1; width: auto; }
  #positionen td.gesamt { padding: 10px 12px; }
  #positionen td:last-child { text-align: right; }
  .breit-tabelle { overflow-x: auto; }
  table.schmal { min-width: 0; width: 100%; }
}

@media (max-width: 520px) {
  .felder { grid-template-columns: minmax(0, 1fr); }
  .felder > * { grid-column: 1 / -1 !important; }
}