/* Farbkonzept
   ===========
   Die Marke gibt zwei Farben vor: das Dunkelgruen und das Limette des Logos.
   Beide sind hier reserviert und bedeuten immer dasselbe:

     Dunkelgruen  #005739   die KETTE - der Bezugswert, an dem alles haengt
     Limette      #a5c400   Hervorhebung innerhalb der Marke

   Die vier Filialen bekommen je eine eigene Farbe, die ueberall gleich bleibt:
   im Tabellenkopf, im Punkt daneben, in der Artikelansicht. Wer die Farbe
   einmal zuordnet, muss die Spaltenkoepfe nie wieder lesen. Keine davon ist
   gruen (gehoert der Kette) oder rot (gehoert den Warnungen), und sie sind
   auch bei Rot-Gruen-Schwaeche unterscheidbar.

     Leverkusen  Blau     Essen  Bernstein
     Muelheim    Violett  Limbeck  Petrol

   Richtung: ein empfohlener Preis UEBER dem heutigen steht in Limette, ein
   Preis DARUNTER in Bernstein. Rot bleibt Fehlern vorbehalten - eine
   Preissenkung ist kein Fehler.
*/
:root{
  --marke:#005739; --marke-hell:#0a7350; --marke-dunkel:#00402a;
  --limette:#a5c400; --limette-dunkel:#6f8400;
  --f001:#1f6feb; --f002:#c77700; --f003:#7b3fa0; --f004:#0a7d7d;
  --warn:#c62828; --papier:#f4f7ee; --karte:#fff;
  --rahmen:#e3e8e0; --rahmen-stark:#cdd5c8;
  --text:#16211c; --text-leise:#69756e; --text-still:#a8b2ac;
  --pt:env(safe-area-inset-top,0px); --pb:env(safe-area-inset-bottom,0px);
  --radius:14px; --schatten:0 1px 2px rgba(0,50,30,.06),0 8px 24px -12px rgba(0,50,30,.18);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;padding:var(--pt) 0 var(--pb);background:var(--papier);color:var(--text);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  font-variant-numeric:tabular-nums}
a{color:var(--marke)}

/* Kopf
   ⚠️ Weiss, nicht gruen. Das Logo ist fuer helle Flaechen gezeichnet: seine
   Wortmarke steht im Marken-Dunkelgruen, und auf einem dunkelgruenen Kopf
   verschwindet sie darin. Die Marke traegt stattdessen der Limettenstreifen
   darunter und das Gruen in den Kacheln und der Kettenspalte. */
.kopf{background:var(--karte);border-bottom:1px solid var(--rahmen);
  box-shadow:0 1px 0 rgba(0,87,57,.04)}
.kopf::after{content:"";display:block;height:3px;
  background:linear-gradient(90deg,var(--marke) 0%,var(--marke-hell) 45%,var(--limette) 100%)}
.kopf-innen{max-width:1680px;margin:0 auto;padding:13px 20px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.kopf a{color:var(--text);text-decoration:none}
/* ⚠️ Zwei Fassungen der Wortmarke, umgeschaltet per Farbschema. Die Marke
   steht im Original in Dunkelgruen; auf dunklem Grund verschwindet sie darin.
   Ein einzelnes <img> laesst sich per CSS nicht austauschen, deshalb liegen
   beide da und eine ist ausgeblendet. */
.logo{height:36px;width:auto;display:block}
.logo-dunkel{display:none}
.kopf .modul{font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--marke);
  padding-left:18px;margin-left:2px;border-left:1px solid var(--rahmen)}
.kennzahlen{display:flex;flex-wrap:wrap;gap:22px;margin-left:auto}
.kennzahlen div{line-height:1.2}
.kennzahlen b{display:block;font-size:17px;font-weight:700;color:var(--marke)}
.kennzahlen span{font-size:11px;color:var(--text-leise);text-transform:uppercase;letter-spacing:.04em}

main{max-width:1680px;margin:0 auto;padding:20px}
h2{font-size:19px;margin:26px 0 12px;letter-spacing:-.01em}
h2:first-child{margin-top:0}

/* Navigation */
nav{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
nav a{padding:7px 14px;border:1px solid var(--rahmen);border-radius:999px;background:var(--karte);
  color:var(--text);text-decoration:none;font-size:14px;transition:.12s}
nav a:hover{border-color:var(--rahmen-stark)}
nav a.aktiv{background:var(--marke);color:#fff;border-color:var(--marke)}
nav a .zahl{opacity:.6;font-variant-numeric:tabular-nums}
nav .rechts{margin-left:auto;display:flex;gap:8px;align-items:center}

/* Kacheln der Eingangsseite */
.kacheln{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.kachel{background:var(--karte);border:1px solid var(--rahmen);border-radius:var(--radius);
  padding:20px;text-decoration:none;color:var(--text);display:flex;flex-direction:column;gap:10px;
  box-shadow:var(--schatten);transition:.15s;position:relative;overflow:hidden}
.kachel:hover{transform:translateY(-2px);border-color:var(--marke-hell)}
.kachel::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--marke)}
.kachel.bald{opacity:.62}
.kachel.bald::before{background:var(--text-still)}
.kachel.bald:hover{transform:none;border-color:var(--rahmen)}
.kachel h3{margin:0;font-size:17px;letter-spacing:-.01em}
.kachel p{margin:0;color:var(--text-leise);font-size:14px;line-height:1.45}
.kachel .zahlen{display:flex;gap:18px;margin-top:auto;padding-top:8px}
.kachel .zahlen b{display:block;font-size:20px;color:var(--marke)}
.kachel .zahlen span{font-size:11.5px;color:var(--text-leise);text-transform:uppercase;letter-spacing:.04em}
.schild{position:absolute;top:14px;right:14px;font-size:11px;font-weight:600;letter-spacing:.03em;
  padding:3px 9px;border-radius:999px;background:#eef3e6;color:var(--limette-dunkel);text-transform:uppercase}
.schild.grau{background:#f0f2ef;color:var(--text-leise)}

/* Meldungen */
.hinweis{background:var(--karte);border:1px solid var(--rahmen);border-left:4px solid var(--limette);
  border-radius:10px;padding:13px 16px;margin-bottom:16px;box-shadow:var(--schatten)}
.hinweis.warn{border-left-color:var(--warn)}
.quelle{margin-top:8px;font-size:11.5px;color:var(--text-still)}
.hinweis b{font-weight:650}

/* Tabelle */
/* ⚠️ Die Hoehenbegrenzung gilt nur fuer lange Tabellen. Mit ihr auf JEDER
   Tabelle scrollt auch eine mit drei Zeilen - und die erste Zeile
   verschwindet dann unter dem festgehefteten Kopf, ohne dass man die
   Scrollleiste sieht. Genau so ist es in der Knotentabelle passiert. */
.tabelle{background:var(--karte);border:1px solid var(--rahmen);border-radius:var(--radius);
  overflow:auto;box-shadow:var(--schatten)}
.tabelle.lang{max-height:calc(100vh - 300px)}
.tabelle.lang thead th{position:sticky;z-index:3}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:13.5px}
th,td{padding:8px 11px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--rahmen)}
thead th{background:#f4f6f2;font-weight:600;font-size:11.5px;z-index:3;
  text-transform:uppercase;letter-spacing:.03em;color:var(--text-leise)}
thead tr.gruppe th{font-size:11.5px;text-align:center;padding:6px 11px;color:#fff;border-bottom:0}
thead tr.spalte th{border-bottom:1px solid var(--rahmen-stark)}
/* ⚠️ top gilt NUR dort, wo der Kopf auch festgeheftet ist. Sortierbare
   Koepfe tragen position:relative fuer den Pfeil - und mit relative
   verschiebt top die Zelle, statt sie zu heften. Ohne diese Eingrenzung
   rutschte jeder sortierbare Spaltenkopf um 29 Pixel nach unten und legte
   sich ueber die erste Datenzeile. */
.tabelle.lang thead tr.gruppe th{top:0}
.tabelle.lang thead tr.spalte th{top:29px}
td.z,th.z{text-align:right}
tbody tr:hover td{background:#f7f9f5}
tbody tr:last-child td{border-bottom:0}

/* Kette: der Bezugswert, immer an derselben Stelle und immer gruen gerahmt */
.g-leer{background:#5c6b5f}
.g-kette{background:var(--marke)}
td.kette,th.kette{background:rgba(0,87,57,.045)}
tbody tr:hover td.kette{background:rgba(0,87,57,.085)}
td.kette-start,th.kette-start{border-left:2px solid var(--marke)}
td.kette-ende,th.kette-ende{border-right:2px solid var(--marke)}
.g-f001{background:var(--f001)}.g-f002{background:var(--f002)}
.g-f003{background:var(--f003)}.g-f004{background:var(--f004)}
td.f-start{border-left:1px solid var(--rahmen-stark)}
.punkt{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:baseline}
.p-f001{background:var(--f001)}.p-f002{background:var(--f002)}
.p-f003{background:var(--f003)}.p-f004{background:var(--f004)}

/* Bildblase beim Überfahren der Artikelnummer */
.bildblase{position:fixed;z-index:60;background:var(--karte);border:1px solid var(--rahmen-stark);
  border-radius:12px;padding:8px;box-shadow:0 16px 40px -12px rgba(0,50,30,.35);
  display:none;pointer-events:none;max-width:260px}
.bildblase.auf{display:block}
.bildblase img{display:block;max-width:240px;max-height:240px;border-radius:8px;background:var(--papier)}
.bildblase.fehlt img{display:none}
.bildtext{font-size:11.5px;color:var(--text-leise);margin-top:6px;text-align:center}

/* Abhaken in der Liste */
.tun{display:flex;gap:5px}
/* ⚠️ Die Aktionsspalte wird NICHT festgeheftet. Mit right:0 schwebt sie beim
   seitlichen Scrollen ueber dem Inhalt und verdeckt genau die Spalte, wegen
   der man scrollt - auf dem Telefon den empfohlenen Preis. Eine festgeheftete
   Spalte je Richtung genuegt, und die wichtigere ist der Artikel. */
.tun button{padding:4px 9px;border:1px solid var(--rahmen-stark);border-radius:7px;background:var(--karte);
  color:var(--text);cursor:pointer;font-size:12px;font-family:inherit;white-space:nowrap}
.tun button.ja{border-color:var(--marke);color:var(--marke);font-weight:600}
.tun button:hover{background:var(--papier)}

/* Mitglied eines Gruppenvorschlags */
.mitglied{display:inline-flex;align-items:baseline;gap:6px;padding:3px 9px;margin:2px 4px 2px 0;
  border:1px solid var(--rahmen);border-radius:999px;background:var(--papier);
  text-decoration:none;color:var(--text);font-size:12.5px}
.mitglied:hover{border-color:var(--marke-hell)}
.mitglied .m-nr{color:var(--marke);font-weight:600}
.mitglied b{color:var(--text)}

/* Sortierbare Koepfe */
th.sort{cursor:pointer;user-select:none;position:relative;padding-right:20px}
th.sort:hover{color:var(--text)}
th.sort::after{content:"\2195";position:absolute;right:7px;opacity:.28;font-size:10px}
th.sort.auf::after{content:"\25B2";opacity:.9;color:var(--marke)}
th.sort.ab::after{content:"\25BC";opacity:.9;color:var(--marke)}

/* Filterleiste ueber der Tabelle */
.filter{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:10px}
.filter input{padding:7px 12px;border:1px solid var(--rahmen-stark);border-radius:9px;font-size:14px;
  background:var(--karte);color:var(--text);min-width:220px;font-family:inherit}
.filter .zaehler{color:var(--text-leise);font-size:13px}
.schalter{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--rahmen-stark);
  border-radius:999px;background:var(--karte);cursor:pointer;font-size:13px}
.schalter input{accent-color:var(--marke)}

/* Zweizeilige Zellen: spart Breite, ohne Inhalt wegzulassen.
   ⚠️ Der wichtigere Wert steht unten und fett, der Bezugswert darueber und
   leise. Andersherum liest man die Tabelle als Preisliste statt als
   Handlungsliste. */
td.zwei{line-height:1.25;padding-top:5px;padding-bottom:5px}
td.zwei span{display:block}
td.zwei .alt{font-size:11.5px;color:var(--text-leise)}
/* Verlässlichkeit gehört neben die Elastizität, nicht darunter. */
td.zwei .alt .marke-chip{display:inline-block;margin-left:3px}
td.zwei .neu{font-weight:700}
td.klein{font-size:12px;color:var(--text-leise)}
/* ⚠️ Die Artikelspalte bleibt beim seitlichen Scrollen stehen. Ohne sie
   scrollt man in einer zwölfspaltigen Tabelle nach rechts und weiss nicht
   mehr, in welcher Zeile man ist - auf dem Telefon nach zwei Spalten. */
td.artikel,thead tr.spalte th:first-child,thead tr.gruppe th:first-child{
  position:sticky;left:0;z-index:2;background:var(--karte)}
thead tr.spalte th:first-child{z-index:4;background:#f4f6f2}
thead tr.gruppe th:first-child{z-index:4}
tbody tr:hover td.artikel{background:#f7f9f5}
td.artikel::after{content:"";position:absolute;top:0;right:0;bottom:0;width:1px;background:var(--rahmen)}
td.artikel{line-height:1.3;padding-top:5px;padding-bottom:5px;max-width:250px}
td.artikel .bez{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
td.artikel .schilder{display:block;margin-top:1px}
td.artikel .schilder:empty{display:none}
.grp{display:inline-block;padding:1px 7px;border-radius:999px;background:#e2eef0;color:#0a5a63;
  font-size:11px;font-weight:600;margin-left:4px;text-decoration:none}

/* Werte */
.nr{color:var(--marke);font-weight:600;text-decoration:none;font-variant-numeric:tabular-nums}
.nr:hover{text-decoration:underline}
.bez{max-width:230px;overflow:hidden;text-overflow:ellipsis}
.preis-neu{font-weight:700}
.hoch{color:var(--limette-dunkel)}
.runter{color:var(--f002)}
.leer{color:var(--text-still)}
.marke-chip{display:inline-block;min-width:19px;text-align:center;padding:1px 6px;border-radius:5px;
  font-size:11px;font-weight:700}
.m-a{background:#e4f2d8;color:#3d6113}.m-b{background:#fbf0d2;color:#7a5b00}
.m-c{background:#f0f2ef;color:var(--text-leise)}
.fokus,.fest,.stopp,.deckel{margin-left:0;margin-right:5px}
.fokus{display:inline-block;padding:1px 7px;border-radius:999px;background:#fff0dd;color:#8a4b00;
  font-size:11px;font-weight:600;margin-left:6px}
.stopp{display:inline-block;padding:1px 7px;border-radius:999px;background:#fde8e8;color:#8d2020;
  font-size:11px;font-weight:600;margin-right:6px}
.deckel{display:inline-block;padding:1px 7px;border-radius:999px;background:#dceaf7;color:#14507f;
  font-size:11px;font-weight:600;margin-left:6px}
.fest{display:inline-block;padding:1px 7px;border-radius:999px;background:#e8e2f7;color:#4b2a80;
  font-size:11px;font-weight:600;margin-left:6px}

/* Elastizitaetsbalken: wie stark die Menge auf den Preis reagiert */
.el{display:inline-flex;align-items:center;gap:6px;justify-content:flex-end}
.el .balken{width:34px;height:5px;border-radius:3px;background:#e9ece7;overflow:hidden}
.el .balken i{display:block;height:100%;background:var(--marke-hell);border-radius:3px}

/* Eingaben mit Vorschlag */
.feld{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.feld label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--text-leise);
  text-transform:uppercase;letter-spacing:.03em}
.feld input{padding:8px 11px;border:1px solid var(--rahmen-stark);border-radius:9px;font-size:14px;
  color:var(--text);background:var(--karte);font-family:inherit}
.feld input:focus{outline:2px solid var(--marke-hell);outline-offset:-1px;border-color:var(--marke-hell)}
.knopf{padding:9px 18px;border:0;border-radius:9px;background:var(--marke);color:#fff;cursor:pointer;
  font-weight:650;font-size:14px;font-family:inherit}
.knopf:hover{background:var(--marke-hell)}
.knopf.leise{background:var(--karte);color:var(--text);border:1px solid var(--rahmen-stark);font-weight:500}
.knopf.leise:hover{background:#f2f4f0}

/* Live-Suche */
.suche{position:relative}
.suche input{min-width:240px}
.vorschlag{position:absolute;z-index:40;top:calc(100% + 5px);left:0;right:0;background:var(--karte);
  border:1px solid var(--rahmen-stark);border-radius:11px;box-shadow:0 12px 32px -10px rgba(0,50,30,.3);
  max-height:330px;overflow:auto;display:none}
.vorschlag.auf{display:block}
.vorschlag b{display:block;padding:9px 13px;font-size:11px;color:var(--text-leise);
  text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--rahmen)}
.vorschlag a{display:flex;gap:11px;align-items:baseline;padding:9px 13px;text-decoration:none;
  color:var(--text);border-bottom:1px solid var(--rahmen);cursor:pointer}
.vorschlag a:last-child{border-bottom:0}
.vorschlag a:hover,.vorschlag a.an{background:#eef3ea}
.vorschlag .v-nr{color:var(--marke);font-weight:600;font-size:12.5px;min-width:52px}
.vorschlag .v-bez{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vorschlag .v-preis{color:var(--text-leise);font-size:12.5px}
.vorschlag .v-nichts{padding:13px;color:var(--text-leise)}

/* Artikelansicht */
.karten{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));margin-bottom:18px}
.karte{background:var(--karte);border:1px solid var(--rahmen);border-radius:12px;padding:14px 16px;
  box-shadow:var(--schatten)}
.karte .titel{font-size:11.5px;color:var(--text-leise);text-transform:uppercase;letter-spacing:.03em}
.karte .wert{font-size:23px;font-weight:700;letter-spacing:-.02em;margin-top:3px}
.karte .dazu{font-size:12.5px;color:var(--text-leise);margin-top:3px}
.karte.betont{border-color:var(--marke);border-left-width:4px}

footer{max-width:1680px;margin:0 auto;padding:16px 20px 30px;color:var(--text-leise);font-size:12.5px}
footer a{color:var(--text-leise)}

@media(max-width:820px){
  .kopf-innen{padding:10px 14px;gap:10px}
  .kennzahlen{gap:14px;width:100%;margin-left:0}
  /* Auf dem Telefon zaehlen drei Zahlen, nicht sieben: der Rest schiebt die
     Liste unter den Bildschirmrand, und darum geht es hier. */
  .kennzahlen div:nth-child(1),.kennzahlen div:nth-child(2),.kennzahlen div:nth-child(6){display:none}
  .kennzahlen b{font-size:15px}
  .logo{height:28px}
  .kopf .modul{font-size:15px;padding-left:12px}
  main{padding:12px}
  h2{font-size:17px;margin:18px 0 10px}
  nav{gap:6px;margin-bottom:10px}
  nav a{padding:6px 11px;font-size:13px}
  nav .rechts{margin-left:0;width:100%}
  nav .rechts form{flex:1}
  .suche input{min-width:0;width:100%}
  .hinweis{padding:10px 12px;font-size:13.5px;margin-bottom:10px}
  .filter{gap:8px}
  .filter input{min-width:0;flex:1}
  /* Die Erklaerung zum Sortieren ist auf dem Telefon Ballast. */
  .filter .zaehler:last-child{display:none}
  .karten{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .karte .wert{font-size:19px}
  td.artikel{max-width:170px}
}
@media(prefers-color-scheme:dark){
  :root{--papier:#0e140d;--karte:#171f16;--rahmen:#28331f;--rahmen-stark:#3a4830;
    --text:#e8efe4;--text-leise:#9aa894;--text-still:#68765f;color-scheme:dark}
  thead th{background:#1d2619}
  tbody tr:hover td{background:#1d2619}
  td.kette,th.kette{background:rgba(165,196,0,.06)}
  tbody tr:hover td.kette{background:rgba(165,196,0,.1)}
  .m-a{background:#25401a;color:#b9df96}.m-b{background:#3d3418;color:#e6cf8a}
  .m-c{background:#232b20;color:var(--text-leise)}
  .vorschlag a:hover,.vorschlag a.an{background:#222c1e}
  .schild{background:#2a3520;color:#c4dd6a}
  .deckel{background:#16324a;color:#9fc8e8}
  .stopp{background:#42201f;color:#e6a0a0}
  .kopf{background:var(--karte);border-bottom-color:var(--rahmen)}
  .logo-hell{display:none}
  .logo-dunkel{display:block}
  .kennzahlen b{color:var(--limette)}
  .kopf .modul{color:var(--limette)}
}

/* Gruppen: aufklappbar, damit vierzig Gruppen auf einen Bildschirm passen.
   ⚠️ Gruppen mit einer Warnung stehen offen. Wer alles zuklappt, versteckt
   auch das, was man sehen muss. */
details.gruppe{background:var(--karte);border:1px solid var(--rahmen);border-radius:var(--radius);
  margin-bottom:10px;box-shadow:var(--schatten);overflow:hidden}
details.gruppe>summary{cursor:pointer;padding:12px 16px;display:flex;flex-wrap:wrap;gap:14px;
  align-items:baseline;list-style:none}
details.gruppe>summary::-webkit-details-marker{display:none}
details.gruppe>summary::before{content:"\25B8";color:var(--text-leise);margin-right:2px;
  transition:transform .12s;display:inline-block}
details.gruppe[open]>summary::before{transform:rotate(90deg)}
details.gruppe>summary:hover{background:var(--papier)}
details.gruppe .g-name{font-weight:700;font-size:15px}
details.gruppe .g-zahl{color:var(--text-leise);font-size:13px}
details.gruppe .g-zahl b{color:var(--text);font-weight:650}
details.gruppe .g-warn{color:var(--warn);font-weight:600;font-size:13px}
details.gruppe .inhalt{padding:0 16px 16px}
details.gruppe .tabelle{box-shadow:none}