@font-face {
  font-family: "Montserrat";
  src: url("/static/fonts/Montserrat-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/static/fonts/Montserrat-Italic-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/static/fonts/Roboto-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/static/fonts/Roboto-Italic-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* netmon24 Markenfarben (Brand Guide) */
  --petrol: #033342;
  --petrol-hell: #0d5063;
  --gruen: #35d763;
  --gruen-dunkel: #1f9e49;
  --gruen-blass: #e3faea;
  --rot: #c00000;
  --grau-hell: #f5f6f8;
  --grau-rand: #dfe3e8;
  --text: #1c1c1e;
  --font-headline: "Montserrat", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: "Roboto", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  margin: 0;
  background: var(--grau-hell);
  color: var(--text);
}

h1, h2, h3, nav.tabs a, .periode-form button, a.export-link,
table.report th, .card .value, .spalten-titel, .seiten-titel {
  font-family: var(--font-headline);
}

header.topbar {
  background: var(--petrol);
  color: white;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--petrol) 0%, var(--gruen) 100%) 1;
}

header.topbar .brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

header.topbar .brand img.logo {
  height: 26px;
  width: auto;
  display: block;
}

header.topbar .mandant {
  font-size: 13px;
  opacity: 0.9;
  font-family: var(--font-body);
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}

nav.tabs {
  display: flex;
  gap: 4px;
  background: white;
  padding: 0 20px;
  border-bottom: 1px solid var(--grau-rand);
  flex-wrap: wrap;
}

nav.tabs a {
  padding: 12px 16px;
  text-decoration: none;
  color: #555;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 3px solid transparent;
}

nav.tabs a.active {
  color: var(--petrol);
  border-bottom-color: var(--gruen);
  font-weight: 700;
}

nav.tabs a:hover { color: var(--petrol); }

main {
  max-width: 1180px;
  margin: 24px auto;
  padding: 0 20px 60px;
}

.periode-form {
  display: flex;
  gap: 10px;
  align-items: center;
  background: white;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--grau-rand);
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.periode-form label { font-size: 13px; color: #555; }
.periode-form select, .periode-form input {
  padding: 6px 8px;
  border: 1px solid var(--grau-rand);
  border-radius: 6px;
  font-size: 14px;
  font-family: var(--font-body);
}
.periode-form button {
  background: var(--petrol);
  color: white;
  border: none;
  padding: 7px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.periode-form button:hover { background: var(--petrol-hell); }

a.export-link {
  margin-left: auto;
  background: var(--gruen);
  color: var(--petrol);
  text-decoration: none;
  padding: 7px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
}
a.export-link:hover { background: var(--gruen-dunkel); color: white; }

.seiten-titel {
  font-size: 16px;
  font-weight: 700;
  color: var(--petrol);
  margin: 0 0 14px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.card {
  background: white;
  border: 1px solid var(--grau-rand);
  border-radius: 10px;
  padding: 16px 18px;
}
.card .label { font-size: 12px; color: #777; text-transform: uppercase; letter-spacing: 0.03em; font-family: var(--font-body); }
.card .value { font-size: 24px; font-weight: 700; margin-top: 4px; }
.card .value.negativ { color: var(--rot); }
.card .value.positiv { color: var(--gruen-dunkel); }

table.report {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--grau-rand);
  font-size: 14px;
}
table.report th {
  background: var(--petrol);
  color: white;
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
  position: sticky;
  top: 0;
}
table.report td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--grau-rand);
}
table.report tr:nth-child(even) td { background: var(--grau-hell); }
table.report tr:hover td { background: #fafbfd; }
table.report td.zahl, table.report th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
table.report tr.summe td {
  background: var(--gruen-blass);
  font-weight: 700;
  color: var(--petrol);
}
table.report tr.warnung td {
  background: #fdecea;
  color: var(--rot);
  font-weight: 600;
}
table.report tr.unterposition td {
  color: #666;
  font-size: 13px;
}
table.report tr.unterposition td:first-child { padding-left: 28px; }

.zwei-spalten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 800px) {
  .zwei-spalten { grid-template-columns: 1fr; }
}

.spalten-titel {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--petrol);
}

details.zoom {
  margin-top: 2px;
}
details.zoom summary {
  cursor: pointer;
  padding: 4px 0;
  color: var(--petrol);
  font-size: 13px;
}
details.zoom .zoom-inhalt {
  padding: 6px 0 10px 16px;
  font-size: 13px;
  color: #444;
}
details.zoom .zoom-inhalt div { display: flex; justify-content: space-between; padding: 2px 0; }

input#susa-filter {
  width: 100%;
  max-width: 320px;
  padding: 8px 10px;
  margin-bottom: 12px;
  border: 1px solid var(--grau-rand);
  border-radius: 6px;
  font-size: 14px;
  font-family: var(--font-body);
}

.waehrung-hinweis {
  font-size: 12px;
  color: #777;
  margin: 0 0 6px;
}

table.report td.habensaldo {
  font-style: italic;
}

.susa-legende {
  font-size: 12px;
  color: #555;
  background: var(--grau-hell);
  border: 1px solid var(--grau-rand);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 0 0 12px;
}
.susa-legende b { color: var(--petrol); }

.leer-hinweis {
  background: white;
  border: 1px dashed var(--grau-rand);
  border-radius: 8px;
  padding: 30px;
  text-align: center;
  color: #777;
}

.setup-main {
  max-width: 480px;
  margin: 60px auto;
  padding: 0 20px;
}
.setup-card {
  background: white;
  border: 1px solid var(--grau-rand);
  border-radius: 10px;
  padding: 28px 30px;
}
.setup-schritt {
  font-size: 12px;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 16px;
}
.setup-fehler {
  background: #fdecea;
  color: var(--rot);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 14px;
  margin-bottom: 16px;
}
.setup-erfolg {
  background: var(--gruen-blass);
  color: var(--gruen-dunkel);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 14px;
  margin-bottom: 16px;
  font-weight: 600;
}

.verwaltung-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
}
.verwaltung-tabs a {
  padding: 8px 14px;
  border-radius: 6px;
  text-decoration: none;
  color: #555;
  font-size: 13px;
  font-weight: 500;
  background: white;
  border: 1px solid var(--grau-rand);
}
.verwaltung-tabs a.active {
  background: var(--petrol);
  color: white;
  border-color: var(--petrol);
  font-weight: 700;
}
.verwaltung-tabs a:hover:not(.active) { border-color: var(--petrol); color: var(--petrol); }

header.topbar .abmelden-form {
  display: inline;
  margin: 0;
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}
header.topbar .abmelden {
  background: none;
  border: none;
  padding: 0;
  color: white;
  opacity: 0.85;
  font-size: 13px;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
}
header.topbar .abmelden:hover { opacity: 1; text-decoration: underline; }
.setup-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.setup-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: #555;
}
.setup-form input, .setup-form select {
  padding: 8px 10px;
  border: 1px solid var(--grau-rand);
  border-radius: 6px;
  font-size: 14px;
  font-family: var(--font-body);
}
.setup-form button {
  background: var(--petrol);
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  margin-top: 6px;
}
.setup-form button:hover { background: var(--petrol-hell); }
.setup-skip {
  background: none;
  border: none;
  color: #777;
  text-decoration: underline;
  cursor: pointer;
  font-size: 13px;
  margin-top: 10px;
  font-family: var(--font-body);
}

.farbwahl {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}
.farb-swatch {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--grau-rand);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
}
.farb-swatch .swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid rgba(0,0,0,0.15);
}