/* Roboter-Deals Corporate Design (wie Shop-Startseite / Robo-Repair):
   Gelb #FFCC00, Anthrazit #333 / #1A1A1A, Überschriften Rajdhani, Text Inter. */
:root {
  --rd-yellow: #FFCC00;
  --rd-yellow-deep: #E6B800;
  --rd-yellow-light: #FFF6CC;
  --rd-dark: #333333;
  --rd-black: #1A1A1A;
  --rd-white: #FFFFFF;
  --bg: #F5F5F5;
  --rand: #E3E3E3;
  --leise: #8A8A8A;
  --gruen: #2E7D32;
  --fehler: #C62828;
  --kopf: 'Rajdhani', 'Arial Narrow', sans-serif;
  --text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--rd-dark);
  font: 15px/1.55 var(--text);
  -webkit-font-smoothing: antialiased;
}
h1, h2, .marke { font-family: var(--kopf); font-weight: 700; letter-spacing: .01em; }
h1 { font-size: 2rem; line-height: 1.1; margin: 0 0 .35rem; color: var(--rd-black); }
h2 { font-size: .85rem; margin: 0; text-transform: uppercase; letter-spacing: .12em; color: var(--leise); }
.unter { color: var(--leise); margin: 0 0 1.75rem; }
.klein { font-size: .82rem; color: var(--leise); }
.fehler { color: var(--fehler); }
code { font-size: .95rem; letter-spacing: .06em; color: var(--rd-black); }

/* Badge wie im Shop: gelb, Rajdhani, Versalien */
.badge {
  display: inline-block;
  font-family: var(--kopf); font-weight: 700; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--rd-yellow); color: var(--rd-dark);
  padding: 5px 12px; border-radius: 6px;
}

button {
  font: 600 15px/1 var(--text); cursor: pointer;
  background: var(--rd-yellow); color: var(--rd-black);
  border: 0; border-radius: 10px; padding: .85rem 1.1rem;
  transition: background .15s;
}
button:hover { background: var(--rd-yellow-deep); }
button:focus-visible { outline: 2px solid var(--rd-black); outline-offset: 2px; }
button:disabled { opacity: .6; cursor: default; }
button.leise {
  background: transparent; color: #CFCFCF;
  border: 1px solid #4A4A4A; padding: .5rem .85rem; font-size: 13px;
}
button.leise:hover { background: #2A2A2A; color: var(--rd-white); }

/* ---------- Login ---------- */
body.login {
  min-height: 100vh; display: grid; place-items: center; padding: 16px;
  background:
    radial-gradient(circle at 85% 10%, rgba(255,204,0,.16), transparent 45%),
    var(--rd-black);
}
.karte {
  width: 100%; max-width: 400px;
  background: var(--rd-white); border-radius: 14px;
  padding: 2.25rem 2rem 2rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  border-top: 5px solid var(--rd-yellow);
}
.karte .wortmarke { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 0 1.25rem; }
.karte .badge { margin-bottom: 1.5rem; }
.karte form { display: grid; gap: 1rem; }
.karte label { display: grid; gap: .4rem; font-size: .85rem; font-weight: 600; color: var(--rd-dark); }
.karte input {
  font: 15px var(--text); color: var(--rd-black); background: var(--rd-white);
  border: 1.5px solid var(--rand); border-radius: 10px; padding: .7rem .8rem;
}
.karte input:focus { outline: none; border-color: var(--rd-yellow); box-shadow: 0 0 0 3px var(--rd-yellow-light); }
.karte button { width: 100%; margin-top: .25rem; }
.hinweis { background: var(--rd-yellow-light); border-radius: 10px; padding: .85rem 1rem; font-size: .88rem; }
.hinweis p { margin: 0 0 .5rem; }
#qr { display: block; margin: .25rem auto .5rem; background: #fff; padding: 6px; border-radius: 10px; border: 1px solid var(--rand); }
.fuss { margin: 1.5rem 0 0; text-align: center; font-size: .75rem; color: var(--leise); }

/* ---------- App ---------- */
.kopf {
  display: flex; align-items: center; gap: .85rem;
  padding: .7rem 16px; background: var(--rd-black); color: var(--rd-white);
  border-bottom: 3px solid var(--rd-yellow);
}
.kopf img { width: 34px; height: 34px; }
.kopf .marke { font-size: 1.25rem; text-transform: uppercase; letter-spacing: .06em; line-height: 1; }
.kopf .marke span { color: var(--rd-yellow); }
.kopf #wer { margin-left: auto; color: #CFCFCF; font-size: .88rem; }

.inhalt { max-width: 1180px; margin: 0 auto; padding: 2.25rem 16px 3rem; }
.inhalt .badge { margin-bottom: .75rem; }
.kacheln { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.kachel {
  position: relative; overflow: hidden;
  background: var(--rd-white); border: 1px solid var(--rand); border-radius: 14px;
  padding: 1.25rem 1.35rem 1.15rem;
}
.kachel::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--rd-yellow); }
.kachel .wert {
  font-family: var(--kopf); font-weight: 700; font-size: 2.6rem; line-height: 1.1;
  margin: .35rem 0 0; color: var(--rd-black); font-variant-numeric: tabular-nums;
}
.kachel .wert.fehler { font-size: 1.15rem; color: var(--fehler); }
.kachel .klein { margin: .15rem 0 0; }

/* ---------- Echtzeit-Cockpit ---------- */
.kopf .uhr {
  margin-left: auto; font-family: var(--kopf); font-weight: 700; font-size: 1.35rem;
  color: var(--rd-yellow); font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.kopf #wer { margin-left: 1rem; }
.titelzeile { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.titelzeile h1 { margin-top: .6rem; }
.titelzeile .klein { margin: 0 0 .4rem; }
.badge .puls {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #C62828; margin-right: 5px; vertical-align: 1px;
  animation: puls 1.6s ease-in-out infinite;
}
@keyframes puls { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .badge .puls { animation: none; } }

.abschnitt {
  font-family: var(--kopf); font-weight: 700; font-size: 1.05rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--rd-black); margin: 2rem 0 .75rem;
  display: flex; align-items: center; gap: .6rem;
}
.abschnitt::after { content: ""; flex: 1; height: 2px; background: var(--rand); }
.abschnitt span { color: var(--leise); font-weight: 600; text-transform: none; letter-spacing: .02em; }

.kacheln.vier { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.kachel b { color: var(--rd-dark); font-weight: 700; }
.kachel.geld::before { background: var(--rd-black); }
.kachel.gesamt { background: var(--rd-black); border-color: var(--rd-black); }
.kachel.gesamt::before { background: var(--rd-yellow); }
.kachel.gesamt h2, .kachel.gesamt .klein { color: #CFCFCF; }
.kachel.gesamt .wert { color: var(--rd-yellow); }
.kachel.gestoert::before { background: var(--fehler); }
.kachel.gestoert .wert { font-size: 1.15rem; color: var(--fehler); }
.vergleich { margin: .1rem 0 .15rem; font-size: .85rem; color: var(--leise); }
.vergleich b { font-weight: 700; color: var(--rd-dark); }
.kachel.gesamt .vergleich, .kachel.gesamt .vergleich b { color: #CFCFCF; }
.kachel.gesamt .vergleich b { color: var(--rd-white); }
.kanaele li span.g { color: var(--leise); margin-left: auto; padding-right: .75rem; }
.kanaele { list-style: none; margin: .6rem 0 0; padding: .55rem 0 0; border-top: 1px dashed var(--rand); font-size: .82rem; }
.kanaele:empty { display: none; }
.kanaele li { display: flex; justify-content: space-between; padding: .1rem 0; color: var(--rd-dark); }

.zwei { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 1000px) { .zwei { grid-template-columns: 1fr 1.25fr; } }
.liste-karte { background: var(--rd-white); border: 1px solid var(--rand); border-radius: 14px; overflow: hidden; }
.liste-kopf {
  display: flex; justify-content: space-between; align-items: center;
  padding: .9rem 1.2rem; background: var(--rd-black); color: var(--rd-white);
  border-bottom: 3px solid var(--rd-yellow);
}
.liste-kopf h3 { margin: 0; font-family: var(--kopf); font-size: 1.1rem; text-transform: uppercase; letter-spacing: .08em; }
.liste-kopf .klein { color: #CFCFCF; }
.liste-karte { overflow-x: auto; }
.liste { width: 100%; border-collapse: collapse; font-size: .88rem; }
.liste th {
  text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--leise); font-weight: 600; padding: .6rem .9rem; border-bottom: 1px solid var(--rand);
}
.liste td { padding: .6rem .9rem; border-bottom: 1px solid #F0F0F0; white-space: nowrap; }
.liste tr:last-child td { border-bottom: 0; }
.liste .r { text-align: right; }
.liste .zeit { font-variant-numeric: tabular-nums; font-weight: 600; }
.liste .fett { font-weight: 600; color: var(--rd-black); }
.liste .leer { text-align: center; color: var(--leise); padding: 1.4rem; white-space: normal; }
.liste .leise-text { color: var(--leise); }
.liste .dauer {
  font-family: var(--kopf); font-weight: 700; font-size: 1.1rem;
  font-variant-numeric: tabular-nums; color: var(--rd-black);
}
.liste .dauer.still { color: var(--leise); }
.liste .dauer.still::after { content: " ⏸"; font-size: .8rem; }
.tag {
  display: inline-block; font-size: .72rem; font-weight: 700; padding: .15rem .5rem;
  border-radius: 6px; margin-right: .3rem; background: #EEE; color: var(--rd-dark);
}
.tag-reparatur { background: var(--rd-yellow); color: var(--rd-black); }
.tag-analyse { background: #E3F2FD; color: #1565C0; }
.tag-retoure { background: #FDECEA; color: #C62828; }
.tag-express { background: var(--rd-black); color: var(--rd-yellow); }

@media (max-width: 520px) {
  .kopf #wer, .kopf .marke { display: none; }
  h1 { font-size: 1.6rem; }
}

/* ---------- Kompakt: alles auf einen Bildschirm ---------- */
.inhalt { max-width: 1880px; padding: .9rem 16px 1.25rem; }
.titelzeile { margin-bottom: 0; align-items: center; }
.titelzeile > div { display: flex; align-items: center; gap: .75rem; }
.titelzeile h1 { font-size: 1.35rem; margin: 0; }
.titelzeile .klein { margin: 0; }
.abschnitt { margin: .85rem 0 .5rem; font-size: .95rem; }
.kachel { padding: .75rem .95rem .7rem; border-radius: 12px; }
.kachel h2 { font-size: .72rem; }
.kachel .wert { font-size: 2.05rem; margin-top: .15rem; }
.kachel .klein { font-size: .76rem; }
/* Kanäle als eine Zeile statt Liste */
.kanaele { display: flex; flex-wrap: wrap; gap: .1rem .7rem; margin-top: .35rem; padding-top: .35rem; font-size: .76rem; }
.kanaele li { display: inline-flex; gap: .3rem; padding: 0; }
@media (min-width: 1400px) {
  #tag-heute, #tag-gestern { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .75rem; }
}
.zwei { margin-top: .9rem; }
.liste-kopf { padding: .55rem 1rem; }
.liste-kopf h3 { font-size: 1rem; }
.liste th { padding: .4rem .8rem; }
.liste td { padding: .38rem .8rem; }
.liste td:nth-child(3) { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.tag-pause { background: #FFF3E0; color: #E65100; }
.tag-frei { background: #FDECEA; color: #C62828; }
.tag-weg { background: #F0F0F0; color: var(--leise); font-weight: 600; }
#t-werkstatt tr.z-weg td { color: var(--leise); }
#t-werkstatt tr.z-weg td.fett { color: var(--leise); font-weight: 500; }
#t-werkstatt td:nth-child(3) { max-width: 340px; }
.spalte { display: grid; gap: .9rem; align-content: start; min-width: 0; }
#t-fertig td:nth-child(3) { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1400px) {
  .zwei.drei { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
  .zwei.drei .liste td, .zwei.drei .liste th { padding-left: .55rem; padding-right: .55rem; }
  #t-werkstatt td:nth-child(3) { max-width: 280px; }
  #t-fertig td:nth-child(3) { max-width: 150px; }
  .zwei.drei .liste-karte { overflow-x: hidden; }
}

/* ---------- Menü ---------- */
.menue { display: flex; gap: .25rem; margin-left: 1.5rem; }
.menue a {
  font-family: var(--kopf); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: .08em;
  color: #CFCFCF; text-decoration: none; padding: .45rem .85rem; border-radius: 8px;
}
.menue a:hover { color: var(--rd-white); background: #2A2A2A; }
.menue a.aktiv { color: var(--rd-black); background: var(--rd-yellow); }
@media (max-width: 760px) {
  .kopf { flex-wrap: wrap; }
  .menue { order: 5; width: 100%; margin: .4rem 0 0; }
  .menue a { flex: 1; text-align: center; }
}

/* ---------- Auswertungsseiten ---------- */
.zeitraum { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.vorgaben { display: flex; flex-wrap: wrap; gap: .3rem; }
button.vorgabe {
  background: var(--rd-white); color: var(--rd-dark); border: 1px solid var(--rand);
  padding: .4rem .7rem; font-size: 13px; border-radius: 8px;
}
button.vorgabe:hover { background: var(--rd-yellow-light); }
button.vorgabe.aktiv { background: var(--rd-black); color: var(--rd-yellow); border-color: var(--rd-black); }
.zeitraum .frei { display: flex; align-items: center; gap: .3rem; color: var(--leise); }
.zeitraum input[type="date"] {
  font: 13px var(--text); color: var(--rd-dark); background: var(--rd-white);
  border: 1px solid var(--rand); border-radius: 8px; padding: .32rem .45rem;
}
.titelzeile .badge + h1 { margin: 0; }
#v-handel .titelzeile, #v-werkstatt .titelzeile { margin-bottom: .9rem; }
.kacheln.fuenf { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
@media (min-width: 1200px) { .kacheln.fuenf { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.zwei.auswertung { align-items: start; }
@media (min-width: 1000px) { .zwei.auswertung { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.abstand { margin-top: .9rem; }
.laedt .kacheln, .laedt .zwei, .laedt .abstand { opacity: .55; transition: opacity .2s; }
.liste tr.summe td { border-top: 2px solid var(--rand); }
.liste td.name { max-width: 520px; overflow: hidden; text-overflow: ellipsis; }

/* Diagramm */
.diagramm { position: relative; padding: .6rem .8rem .3rem; }
.diagramm svg { display: block; width: 100%; height: auto; }
.diagramm .raster { stroke: #EFEFEF; stroke-width: 1; }
.diagramm .achse { stroke: #D6D6D6; stroke-width: 1; }
.diagramm .achsentext { font: 11px var(--text); fill: var(--leise); }
.diagramm .saeule { fill: var(--rd-dark); transition: fill .1s; }
.diagramm .saeule.hover { fill: var(--rd-yellow-deep); }
.diagramm .treffer { fill: transparent; cursor: crosshair; }
.diagramm .leer { text-align: center; color: var(--leise); padding: 2rem; }
.tooltip {
  position: absolute; top: .6rem; transform: translateX(10px); pointer-events: none;
  background: var(--rd-black); color: var(--rd-white); border-radius: 8px; padding: .5rem .7rem;
  font-size: .78rem; min-width: 170px; box-shadow: 0 6px 20px rgba(0,0,0,.25); z-index: 2;
}
.tooltip.links { transform: translateX(calc(-100% - 10px)); }
.tooltip b { display: block; color: var(--rd-yellow); margin-bottom: .25rem; font-weight: 600; }
.tooltip div { display: flex; justify-content: space-between; gap: 1rem; }
.tooltip strong { font-variant-numeric: tabular-nums; }

/* Kosten & Deckungsbeitrag */
.kacheln.sechs { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
@media (min-width: 1300px) { .kacheln.sechs { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.liste.kosten td { padding-top: .3rem; padding-bottom: .3rem; }
.liste.kosten tr.gruppenzeile td { background: #FAFAFA; font-weight: 700; color: var(--rd-black); padding-top: .45rem; border-bottom: 1px solid var(--rand); }
.liste.kosten td.gruppe { font-family: var(--kopf); text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }
.liste.kosten td.einzug { padding-left: 1.4rem; }
.liste.kosten td.info { max-width: 260px; overflow: hidden; text-overflow: ellipsis; font-size: .8rem; }
.liste.kosten td.fehlt { color: var(--fehler); font-weight: 600; }
.liste.kosten td.db { font-family: var(--kopf); font-weight: 700; font-size: 1.25rem; color: var(--rd-black); }
.liste.kosten tr.summe td { background: var(--rd-yellow-light); border-top: 2px solid var(--rd-yellow); }
.liste td.klein-zeile { font-size: .78rem; white-space: normal; }