/* Werkbank Robotik — Arbeitsoberfläche.
   Dichte vor Schönheit: das hier ist ein Werkzeug, keine Website. */

:root {
  --fg: #16191d;
  --fg-weich: #5b6470;
  --bg: #f4f5f7;
  --flaeche: #ffffff;
  --linie: #dfe3e8;
  --linie-stark: #c3cad3;
  --akzent: #1b4f8f;
  --akzent-weich: #e8f0fa;
  --gut: #1d7a4c;
  --gut-bg: #e3f5eb;
  --top: #0f5c8c;
  --top-bg: #e0f0fa;
  --mittel: #5b6470;
  --mittel-bg: #eceff2;
  --warn: #8a5a00;
  --warn-bg: #fdf1dc;
  --schlecht: #a32a1f;
  --schlecht-bg: #fbe7e5;
  --aus: #8b939d;
  --aus-bg: #eef0f2;
  --r: 5px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  color: var(--fg);
  background: var(--bg);
}

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

/* --- Kopf ---------------------------------------------------------------- */

.kopf {
  display: flex; align-items: center; gap: 1.5rem;
  padding: .6rem 1.2rem;
  background: var(--fg); color: #fff;
  position: sticky; top: 0; z-index: 20;
}
.marke { color: #fff; font-weight: 650; letter-spacing: -.01em; font-size: 15px; }
.marke span { color: #9db4d0; font-weight: 400; }
.marke:hover { text-decoration: none; }
.suchform { flex: 1; max-width: 420px; }
.suchform input {
  width: 100%; padding: .4rem .7rem; border: 0; border-radius: var(--r);
  background: rgba(255,255,255,.12); color: #fff; font-size: 13px;
}
.suchform input::placeholder { color: #9aa4b0; }
.kopf-rechts { display: flex; align-items: center; gap: .8rem; margin-left: auto; }
.wer { color: #b9c4d0; font-size: 13px; }

/* --- Aufbau -------------------------------------------------------------- */

.huelle { display: flex; align-items: flex-start; min-height: calc(100vh - 96px); }

.seitenleiste {
  width: 220px; flex: 0 0 220px; padding: 1rem .6rem 2rem;
  background: var(--flaeche); border-right: 1px solid var(--linie);
  position: sticky; top: 45px; max-height: calc(100vh - 45px); overflow-y: auto;
}
.navgruppe {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--aus); margin: 1.1rem .6rem .3rem; font-weight: 650;
}
.navgruppe:first-child { margin-top: 0; }
.navpunkt {
  display: block; padding: .35rem .6rem; border-radius: var(--r);
  color: var(--fg); font-size: 13.5px;
}
.navpunkt:hover { background: var(--bg); text-decoration: none; }
.navpunkt.aktiv { background: var(--akzent-weich); color: var(--akzent); font-weight: 600; }

.inhalt { flex: 1; min-width: 0; padding: 1.4rem 1.8rem 4rem; max-width: 1500px; }

.fuss {
  padding: .8rem 1.8rem; color: var(--aus); font-size: 12px;
  border-top: 1px solid var(--linie); background: var(--flaeche);
}

/* --- Überschriften ------------------------------------------------------- */

h1 { font-size: 22px; margin: 0 0 .2rem; letter-spacing: -.015em; }
h2 { font-size: 15px; margin: 0 0 .7rem; letter-spacing: -.005em; }
h3.untertitel {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--fg-weich); margin: 1.2rem 0 .4rem;
}
.kopfzeile { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.kopfzeile h1 { flex: 1; }
.aktionen { display: flex; gap: .5rem; flex-wrap: wrap; }
.zaehler {
  font-size: 12px; font-weight: 600; color: var(--fg-weich);
  background: var(--mittel-bg); padding: .1rem .45rem; border-radius: 99px;
  vertical-align: middle;
}
.einleitung { color: var(--fg-weich); max-width: 78ch; margin: 0 0 1.2rem; }
.brot { font-size: 12px; color: var(--aus); margin-bottom: .6rem; }
.brot .tr { margin: 0 .35rem; }
.dezent { color: var(--aus); font-size: 12.5px; }
.stark { font-weight: 600; }
.rechts { text-align: right; }
.mini { font-size: 12.5px; margin: .3rem 0; }
.fest { margin: 0; padding: .35rem 0; font-weight: 600; }
.verblasst { opacity: .5; }

/* --- Blöcke -------------------------------------------------------------- */

.block {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r);
  padding: 1rem 1.1rem; margin-bottom: 1rem;
}
.zweispalter { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 1100px) { .zweispalter { grid-template-columns: 1fr; } }

.statuszeile { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 1rem; }

/* --- Kacheln ------------------------------------------------------------- */

.kacheln {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .6rem; margin-bottom: 1.2rem;
}
.kachel {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r);
  padding: .7rem .9rem; display: flex; flex-direction: column;
}
.kachel .zahl { font-size: 24px; font-weight: 650; letter-spacing: -.02em; line-height: 1.1; }
.kachel .text { font-size: 12px; color: var(--fg-weich); }

/* --- Tabellen ------------------------------------------------------------ */

.tabellenhuelle { overflow-x: auto; background: var(--flaeche); border-radius: var(--r); }
table.tab { width: 100%; border-collapse: collapse; background: var(--flaeche); font-size: 13.5px; }
table.tab.schmal { font-size: 12.5px; }
table.tab th, table.tab td {
  text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--linie);
  vertical-align: top;
}
table.tab thead th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--fg-weich); background: var(--bg); font-weight: 650;
  position: sticky; top: 45px; z-index: 5;
}
table.tab tbody tr:hover { background: #fafbfc; }
table.tab tr.gemessen td { background: var(--top-bg); }
table.tab tr.gruppenzeile td {
  background: var(--fg); color: #fff; font-size: 11px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .06em; padding: .3rem .6rem;
}

table.vergleich th.ecke, table.vergleich th.zeilenkopf {
  position: sticky; left: 0; background: var(--flaeche); z-index: 4;
  border-right: 1px solid var(--linie-stark); font-weight: 600; min-width: 200px;
}
table.vergleich th.ecke { z-index: 6; background: var(--bg); }
table.vergleich thead th { min-width: 170px; }
table.vergleich thead th span { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; }
.zellwert { font-weight: 600; }
.zellwert span { display: block; font-weight: 400; }
.zellwert.gemessen { color: var(--top); }
.abweichung {
  display: inline-block; margin-top: .2rem; font-size: 11.5px; font-weight: 650;
  color: var(--schlecht); background: var(--schlecht-bg); padding: .05rem .35rem; border-radius: 3px;
}

.blaettern { display: flex; gap: .3rem; margin-top: .8rem; flex-wrap: wrap; }
.blaettern a {
  padding: .25rem .55rem; border: 1px solid var(--linie); border-radius: var(--r);
  background: var(--flaeche); font-size: 12.5px;
}
.blaettern a.aktiv { background: var(--akzent); color: #fff; border-color: var(--akzent); }

.dl { display: grid; grid-template-columns: 220px 1fr; gap: .25rem 1rem; margin: 0; }
.dl dt { color: var(--fg-weich); font-size: 12.5px; padding: .25rem 0; }
.dl dd { margin: 0; padding: .25rem 0; border-bottom: 1px solid #f0f2f4; }
@media (max-width: 700px) { .dl { grid-template-columns: 1fr; } .dl dt { padding-bottom: 0; } }

.trefferliste { margin: 0; padding-left: 1.2rem; }
.trefferliste li { margin: .15rem 0; }
.leerhinweis { color: var(--fg-weich); padding: 2rem 0; }

/* --- Abzeichen ----------------------------------------------------------- */

.badge {
  display: inline-block; font-size: 11px; font-weight: 650; padding: .1rem .4rem;
  border-radius: 3px; white-space: nowrap; letter-spacing: .01em;
}
.badge.gut      { color: var(--gut);      background: var(--gut-bg); }
.badge.top      { color: var(--top);      background: var(--top-bg); }
.badge.mittel   { color: var(--mittel);   background: var(--mittel-bg); }
.badge.warn     { color: var(--warn);     background: var(--warn-bg); }
.badge.schlecht { color: var(--schlecht); background: var(--schlecht-bg); }
.badge.aus      { color: var(--aus);      background: var(--aus-bg); }

.balken { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: var(--aus-bg); }
.balkenteil.gut { background: var(--gut); }
.balkenteil.top { background: var(--top); }
.balkenteil.mittel { background: var(--mittel); }
.balkenteil.warn { background: #d99b1c; }
.balkenteil.schlecht { background: var(--schlecht); }
.balkenteil.aus { background: var(--aus); }
.legende { list-style: none; display: flex; gap: .8rem; flex-wrap: wrap; padding: 0; margin: .6rem 0; font-size: 12.5px; }

.stufen { margin: 0; padding-left: 1.3rem; font-size: 13px; color: var(--fg-weich); }
.stufen li { margin: .35rem 0; }

/* --- Karten -------------------------------------------------------------- */

.kartengitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: .8rem; }
.karte { border: 1px solid var(--linie); border-radius: var(--r); padding: .8rem .9rem; background: var(--flaeche); }
.karte-kopf { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .4rem; }
.karte h3 { font-size: 15px; margin: 0 0 .15rem; }
.karte-fuss { display: flex; align-items: center; gap: .5rem; margin: .6rem 0 0; }
.preisblock { display: flex; flex-direction: column; gap: .12rem; margin: .5rem 0; font-size: 12.5px; }
.preis { color: var(--fg-weich); }
.warnung { color: var(--schlecht); }

/* --- Formulare ----------------------------------------------------------- */

fieldset { border: 1px solid var(--linie); border-radius: var(--r); background: var(--flaeche);
           padding: .8rem 1rem 1rem; margin: 0 0 .9rem; }
legend { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
         color: var(--fg-weich); font-weight: 650; padding: 0 .35rem; }

.feldgitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .7rem .9rem; }
.feld { display: flex; flex-direction: column; min-width: 0; }
.feld.breit { grid-column: 1 / -1; }
.feld label { font-size: 12px; font-weight: 600; color: var(--fg-weich); margin-bottom: .2rem; }
.feld label em { color: var(--schlecht); font-style: normal; }
.feld input[type=text], .feld input[type=search], .feld input[type=number], .feld input[type=date],
.feld input[type=password], .feld select, .feld textarea,
.reihenform input[type=text], .reihenform input[type=number], .reihenform input[type=date],
.reihenform select, .reihenform textarea {
  width: 100%; padding: .35rem .5rem; border: 1px solid var(--linie-stark);
  border-radius: var(--r); font: inherit; font-size: 13px; background: #fff; color: var(--fg);
}
.feld textarea { resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: 2px solid var(--akzent); outline-offset: -1px; border-color: var(--akzent);
}
.feld input[readonly] { background: var(--bg); color: var(--fg-weich); }
.hilfe { font-size: 11.5px; color: var(--aus); margin: .2rem 0 0; line-height: 1.35; }
.schalter { display: inline-flex; align-items: center; gap: .35rem; font-weight: 400 !important;
            color: var(--fg) !important; font-size: 13px !important; }
.hakenreihe { display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.haken { display: inline-flex; align-items: center; gap: .3rem; font-size: 13px; }
.formfuss { display: flex; gap: .5rem; padding: .3rem 0 1rem; }
.grossform { max-width: 1100px; }

.filterleiste {
  display: flex; gap: .4rem; flex-wrap: wrap; align-items: center;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r);
  padding: .6rem .7rem; margin-bottom: 1rem;
}
.filterleiste input[type=search], .filterleiste select {
  padding: .3rem .5rem; border: 1px solid var(--linie-stark); border-radius: var(--r);
  font: inherit; font-size: 12.5px; background: #fff;
}
.filterleiste input[type=search] { min-width: 220px; }
.filterleiste .hakenreihe { width: 100%; padding-top: .4rem; border-top: 1px solid var(--linie); }

.reihenform { padding-top: .7rem; }
form.inline { display: inline; }

.einklapp { margin-top: .9rem; border-top: 1px solid var(--linie); padding-top: .5rem; }
.einklapp summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--akzent);
  padding: .2rem 0; user-select: none;
}

/* --- Knöpfe -------------------------------------------------------------- */

.knopf {
  display: inline-block; padding: .38rem .8rem; border: 1px solid var(--akzent);
  background: var(--akzent); color: #fff; border-radius: var(--r);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.knopf:hover { filter: brightness(1.12); text-decoration: none; }
.knopf.klein { padding: .25rem .55rem; font-size: 12px; }
.knopf.mini { padding: .12rem .4rem; font-size: 11.5px; font-weight: 500; }
.knopf.leer { background: var(--flaeche); color: var(--fg); border-color: var(--linie-stark); }
.knopf.an { background: var(--fg); border-color: var(--fg); color: #fff; }

/* --- Meldungen ----------------------------------------------------------- */

.meldung {
  padding: .6rem .8rem; border-radius: var(--r); margin-bottom: 1rem;
  border: 1px solid var(--linie); background: var(--gut-bg); border-color: #b9e2cb;
}
.meldung.fehler { background: var(--schlecht-bg); border-color: #f0c3bd; }
.meldung ul { margin: .3rem 0 0; padding-left: 1.2rem; }

pre.code, pre.tokenanzeige {
  background: var(--fg); color: #e6ebf1; padding: .7rem .9rem; border-radius: var(--r);
  overflow-x: auto; font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap; word-break: break-all;
}
pre.tokenanzeige { color: #a8e6bf; font-weight: 600; }
code { font: 12.5px ui-monospace, Menlo, Consolas, monospace; background: var(--mittel-bg);
       padding: .05rem .25rem; border-radius: 3px; }

/* --- Anmeldung ----------------------------------------------------------- */

.anmeldebox {
  max-width: 340px; margin: 4rem auto; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--r); padding: 1.6rem;
}
.anmeldebox h1 { font-size: 18px; margin-bottom: 1.2rem; }
.anmeldebox .feld { margin-bottom: .8rem; }
.anmeldebox .knopf { width: 100%; text-align: center; }