/*
 * Layout nach Meldeblitz (Seitenleiste, Karten, Instrument Sans), helles Thema in den Logo-Farben von Reinecke:
 * Orange #F98424 und Blau #52C0F0 als Flächen, dunklere Varianten für Text (mindestens 4,5:1).
 */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("schrift.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("schrift-akzent.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --flaeche-1: #ffffff;
  --flaeche-2: #f8f9fb;
  --flaeche-3: #f1f3f6;
  --linie: #eaecf0;
  --linie-stark: #dfe2e7;
  --linie-feld: #8a8f98;
  --text-1: #14171c;
  --text-2: #5a5f68;

  --orange: #f98424;          /* Logo, nur Fläche */
  --orange-text: #b4530a;
  --orange-weich: #fff3e8;
  --auf-orange: #1d1206;
  --blau: #52c0f0;            /* Logo, nur Fläche */
  --blau-text: #0a6c9c;
  --blau-weich: #eaf7fd;
  --gruen: #1c7a4a;
  --gruen-weich: #e8f6ee;
  --gelb: #8a5a00;
  --gelb-weich: #fdf4df;
  --rot: #b3261e;
  --rot-weich: #fdebea;

  --schrift: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --schrift-akzent: "Instrument Serif", Georgia, serif;
  --radius-1: 10px;
  --radius-2: 14px;
  --radius-3: 20px;
  --schatten-1: 0 1px 2px rgb(16 24 40 / .04), 0 1px 1px rgb(16 24 40 / .02);
  --schatten-2: 0 1px 2px rgb(16 24 40 / .04), 0 12px 32px -16px rgb(16 24 40 / .12);
  --schatten-3: 0 32px 64px -24px rgb(16 24 40 / .28), 0 0 0 1px rgb(16 24 40 / .04);
  --dauer: 200ms;
  --kurve: cubic-bezier(.2, 0, 0, 1);
}
@media (prefers-reduced-motion: reduce) { :root { --dauer: 0ms; } }

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { margin: 0; background: var(--flaeche-1); color: var(--text-1); font: 15px/1.55 var(--schrift); }
a { color: var(--blau-text); }
:focus-visible { outline: 2px solid var(--blau-text); outline-offset: 2px; border-radius: 6px; }
.ziffern, .km, .kennzahl b { font-variant-numeric: tabular-nums; }

/* Rahmen und Seitenleiste */
.rahmen { display: grid; grid-template-columns: 272px 1fr; min-height: 100vh; }
.leiste { background: var(--flaeche-2); border-right: 1px solid var(--linie); padding: 16px 14px; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 0; height: 100vh; }
.betrieb { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius-2); background: var(--flaeche-1); box-shadow: var(--schatten-1), 0 0 0 1px var(--linie); }
.betrieb img { width: 52px; height: auto; }
.betrieb strong { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.betrieb span { font-size: 12.5px; color: var(--text-2); }
.leiste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.leiste nav a { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: var(--radius-1); text-decoration: none; color: var(--text-2); font-weight: 500; transition: background var(--dauer) var(--kurve), color var(--dauer) var(--kurve); }
.leiste nav a:hover { background: var(--flaeche-3); color: var(--text-1); }
.leiste nav a[aria-current="page"] { background: var(--flaeche-1); color: var(--text-1); box-shadow: var(--schatten-1), 0 0 0 1px var(--linie), inset 3px 0 0 var(--blau); }
.nav-titel { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); margin: 20px 12px 6px; font-weight: 600; }
.zahl:not(:empty) { background: var(--orange); color: var(--auf-orange); border-radius: 999px; font-size: 11.5px; font-weight: 700; min-width: 22px; height: 22px; display: inline-grid; place-items: center; padding: 0 7px; }
.leiste-fuss { margin-top: auto; border-top: 1px solid var(--linie); padding: 14px 12px 0; font-size: 13px; color: var(--text-2); }

/* Kopf und Inhalt */
.haupt { min-width: 0; }
.kopf { position: sticky; top: 0; z-index: 2; padding: 18px 48px; border-bottom: 1px solid var(--linie); background: rgb(255 255 255 / .82); backdrop-filter: saturate(1.6) blur(14px); }
.pfad { margin: 0; color: var(--text-2); font-size: 14px; }
.pfad strong { color: var(--text-1); font-weight: 600; }
main { padding: 44px 48px 64px; max-width: 1180px; }
main:focus { outline: none; }
.kicker { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-text); margin: 0 0 10px; font-weight: 600; }
h1 { font-size: 36px; line-height: 1.15; margin: 0 0 10px; font-weight: 600; letter-spacing: -.025em; }
h1 em { font-family: var(--schrift-akzent); font-weight: 400; font-style: italic; color: var(--blau-text); letter-spacing: -.01em; }
.unter { color: var(--text-2); margin: 0 0 32px; max-width: 62ch; font-size: 15.5px; }

.karte { background: var(--flaeche-1); border: 1px solid var(--linie); border-radius: var(--radius-3); padding: 24px 28px; margin-bottom: 24px; box-shadow: var(--schatten-2); }
.karte h2 { font-size: 16px; margin: 0 0 16px; font-weight: 600; letter-spacing: -.01em; }
.karte-titel { padding: 24px 28px 4px; }

/* Kennzahlen: eine Karte, fünf Spalten */
.kennzahlen { display: grid; grid-template-columns: repeat(5, 1fr); padding: 0; overflow: hidden; }
.kennzahl { padding: 22px 24px 24px; border-left: 1px solid var(--linie); }
.kennzahl:first-child { border-left: 0; background: linear-gradient(180deg, var(--blau-weich), transparent 85%); }
.kennzahl-titel { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13.5px; font-weight: 500; }
.kennzahl b { display: block; font-size: 40px; line-height: 1; font-weight: 600; letter-spacing: -.03em; margin-top: 14px; }
.punkt { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: currentColor; }
.punkt.info { color: var(--blau); } .punkt.neutral { color: var(--linie-feld); } .punkt.gelb { color: #e0a100; }
.punkt.gruen { color: #2fb36b; } .punkt.rot { color: #e5544b; }

/* Filter */
.filter { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; align-items: end; }
label { display: grid; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--text-2); }
input, select, textarea { font: inherit; font-size: 14.5px; color: var(--text-1); background: var(--flaeche-1); border: 1px solid var(--linie-stark); border-radius: var(--radius-1); padding: 0 12px; height: 42px; transition: border-color var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve); }
textarea { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--linie-feld); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blau-text); box-shadow: 0 0 0 4px rgb(82 192 240 / .25); }
input[type="range"] { height: 42px; padding: 0; border: 0; background: none; accent-color: var(--orange); box-shadow: none; }
output { color: var(--text-1); font-weight: 600; }

/* Knöpfe */
.knopf { font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; border-radius: var(--radius-1); height: 40px; padding: 0 16px; border: 1px solid var(--linie-stark); background: var(--flaeche-1); color: var(--text-1); box-shadow: var(--schatten-1); transition: background var(--dauer) var(--kurve), transform var(--dauer) var(--kurve), border-color var(--dauer) var(--kurve); }
.knopf:hover { background: var(--flaeche-2); border-color: var(--linie-feld); }
.knopf:active { transform: translateY(1px); }
.knopf.primaer { background: linear-gradient(180deg, #fb9440, var(--orange)); border-color: #e9741a; color: var(--auf-orange); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 1px 2px rgb(233 116 26 / .3); }
.knopf.primaer:hover { background: linear-gradient(180deg, #fc9c4d, #fa8a2e); }
.knopf.gefahr { color: var(--rot); margin-right: auto; box-shadow: none; border-color: transparent; background: transparent; }
.knopf.gefahr:hover { background: var(--rot-weich); }
.knopf:disabled { opacity: .6; cursor: progress; }

/* Tabelle */
.tabelle-karte { padding: 0; overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th { text-align: left; font-weight: 600; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); padding: 14px 20px; border-bottom: 1px solid var(--linie); background: var(--flaeche-2); white-space: nowrap; }
.tabelle td { padding: 14px 20px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle tbody tr[data-id] { cursor: pointer; } .tabelle tbody tr { transition: background var(--dauer) var(--kurve); }
.tabelle tbody tr:hover { background: var(--flaeche-2); }
.tabelle tbody tr:hover .person-name { color: var(--blau-text); }
.klein { color: var(--text-2); font-size: 12.5px; display: block; }
.person { display: flex; align-items: center; gap: 12px; }
.person-name { font-weight: 600; transition: color var(--dauer) var(--kurve); }
.avatar { width: 36px; height: 36px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--blau-text); background: var(--blau-weich); box-shadow: inset 0 0 0 1px rgb(10 108 156 / .12); }
.avatar.gross { width: 52px; height: 52px; font-size: 17px; }
.km { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.km::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.nah { color: var(--gruen); } .mittel { color: var(--gelb); } .weit { color: var(--rot); }

.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.info { background: var(--blau-weich); color: var(--blau-text); }
.pill.neutral { background: var(--flaeche-3); color: var(--text-2); }
.pill.gelb { background: var(--gelb-weich); color: var(--gelb); }
.pill.gruen { background: var(--gruen-weich); color: var(--gruen); }
.pill.rot { background: var(--rot-weich); color: var(--rot); }
.leer { color: var(--text-2); padding: 40px; text-align: center; margin: 0; }
.hinweis { background: var(--blau-weich); color: var(--text-1); border-radius: var(--radius-2); padding: 14px 18px; border: 1px solid rgb(82 192 240 / .5); }
.fehler-meldung { margin: 20px 48px 0; padding: 12px 16px; border-radius: var(--radius-2); background: var(--rot-weich); color: var(--rot); font-weight: 500; }

/* Detail */
dialog { width: min(600px, 100vw - 32px); background: var(--flaeche-1); color: var(--text-1); border: 0; border-radius: var(--radius-3); padding: 32px; box-shadow: var(--schatten-3); }
dialog[open] { animation: auftauchen var(--dauer) var(--kurve); }
dialog::backdrop { background: rgb(20 23 28 / .35); backdrop-filter: blur(4px); }
@keyframes auftauchen { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.detail-kopf { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--linie); }
.detail-kopf > div { flex: 1; min-width: 0; }
.detail-kopf .kicker { margin-bottom: 4px; }
.detail-name { font-size: 24px; margin: 0; }
dialog dl { display: grid; grid-template-columns: 150px 1fr; gap: 12px 16px; margin: 20px 0 24px; }
dialog dt { color: var(--text-2); }
dialog dd { margin: 0; font-weight: 500; }
.abstand-oben { margin-top: 16px; }
.zeile { display: flex; gap: 8px; justify-content: flex-end; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linie); flex-wrap: wrap; }

@media (max-width: 960px) {
  .kennzahlen { grid-template-columns: repeat(3, 1fr); }
  .kennzahl:nth-child(4) { border-left: 0; }
  .kennzahl:nth-child(n+4) { border-top: 1px solid var(--linie); }
}
@media (max-width: 860px) {
  .rahmen { grid-template-columns: 1fr; }
  .leiste { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--linie); }
  .leiste-fuss { display: none; }
  main { padding: 28px 16px 48px; }
  .kopf { padding: 14px 16px; }
  .fehler-meldung { margin: 16px 16px 0; }
  h1 { font-size: 30px; }
  .kennzahlen { grid-template-columns: repeat(2, 1fr); }
  .kennzahl { border-left: 0; border-top: 1px solid var(--linie); }
  .kennzahl:nth-child(even) { border-left: 1px solid var(--linie); }
  .kennzahl:first-child, .kennzahl:nth-child(2) { border-top: 0; }
  dialog { padding: 24px; }
  dialog dl { grid-template-columns: 1fr; gap: 2px 0; }
  dialog dd { margin-bottom: 10px; }
}
.label-zeile { display: flex; justify-content: space-between; }
.demo-band { background: var(--orange-weich); color: var(--orange-text); text-align: center; font-size: 13px; padding: 7px 16px; border-bottom: 1px solid #f6d3b3; }
.demo-band strong { font-weight: 600; }
.leiste-fuss .quelle { display: block; font-size: 11px; margin-top: 2px; }

/* Runde 3: Ungelesen, Favoriten, Stellen, klickbare Kacheln */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button.person-name { font: inherit; font-weight: 600; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.ungelesen { width: 9px; height: 9px; border-radius: 50%; background: var(--orange-text); box-shadow: 0 0 0 3px rgb(249 132 36 / .22); flex: none; }
.stern { font-size: 18px; line-height: 1; width: 34px; height: 34px; border-radius: 50%; border: 0; background: none; color: var(--linie-feld); cursor: pointer; transition: color var(--dauer) var(--kurve), background var(--dauer) var(--kurve); }
.stern:hover { background: var(--flaeche-2); color: var(--orange-text); }
.stern.an { color: var(--orange-text); }
.tabelle td.schmal { width: 1%; white-space: nowrap; padding-left: 12px; padding-right: 12px; }
.knopf.klein-knopf { height: 32px; padding: 0 12px; font-size: 13px; margin: 0; }
label.haken { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-1); height: 42px; }
label.haken input { width: 18px; height: 18px; padding: 0; accent-color: var(--orange); box-shadow: none; }
a.kennzahl { color: inherit; text-decoration: none; transition: background var(--dauer) var(--kurve); }
a.kennzahl:hover { background: var(--flaeche-2); }
a.kennzahl:hover b { color: var(--blau-text); }
.punkt.orange { color: var(--orange); }
.zeile-links { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.wachsen { flex: 1 1 240px; }
.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stelle-name { width: 100%; max-width: 360px; }
@media (max-width: 640px) { .zwei-spalten { grid-template-columns: 1fr; } }

/* Outlook verbinden */
a.knopf { display: inline-flex; align-items: center; text-decoration: none; }
#autostart-zustand:empty { display: none; }

/* Audit 28.10.: sichtbarer Fokus und erkennbare Feldränder */
html { scroll-padding-top: 80px; }
input, select, textarea { border-color: var(--linie-feld); }
input[type="range"]:focus-visible, input[type="checkbox"]:focus-visible { outline: 2px solid var(--blau-text); outline-offset: 2px; }
a.kennzahl:focus-visible { outline: 2px solid var(--blau-text); outline-offset: -3px; }
dialog .fehler-meldung { margin-top: 12px; }

/* Anmeldeseite (Servermodus) */
.login-seite { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-karte { width: min(400px, 100%); display: grid; gap: 18px; padding: 32px; }
.login-karte h1 { margin: 0; }
.login-karte form { display: grid; gap: 16px; }
.knopf.breit { width: 100%; height: 44px; }
.leiste-abmelden { margin-top: 8px; }