/* ============================================================================ wawi.css -- die WaWi-Ergaenzung zur gemeinsamen Stilbibliothek ---------------------------------------------------------------------------- Diese Datei wird NACH stil-bibliothek.css geladen und enthaelt nur, was die WaWi zusaetzlich braucht. Sie ist damit die zweite und letzte Stildatei von Pipos Vollansicht; stil.css, cockpit.css und navigation.css sind am 20.09.2026 mit Schritt B der Design-Linie weggefallen. DREI REGELN FUER DIESE DATEI 1. Gemeinsame Bauteile werden ZUERST IM DASHBOARD geaendert (/root/projekte/dashboard/public/stil.css, Katalog public/stil.html) und danach mit werkzeuge/stil-uebernehmen.sh hierher geholt. Eine Handaenderung an stil-bibliothek.css laesst tests_stilbibliothek.py rot werden. Karte, Knopf, Tabelle, Eingabefeld, Meldung, Zustandsmarke gehoeren allen Apps. 2. Kein fester Farbwert. Alles kommt aus den Tokens der Bibliothek (--accent*, --good/--warn/--crit/--neutral samt -text und -bg, --line, --bg, --card, --text, --muted, --wurst, Radien --r/--rk/--rs/--rp, Abstaende --a1..--a7, Schriftgroessen --s11..--s32, --zeile-h). Einzige Ausnahme ist der :root-Block direkt unten, und auch der setzt nur Tokens auf Tokens. tests_stilbibliothek.py prueft das mechanisch. 3. Keine Uebergangsabbildung mehr. Bis zum 23.09.2026 bildete der groesste Teil dieser Datei die alten WaWi-Klassennamen (hinweis, rtable, warnkarte, knopf-leicht, meldung-fehler, zustand-ok ...) auf die Katalog-Bauteile ab. Schritt E hat die Vorlagen auf die Katalognamen umgebaut, Schritt E6 die Abbildung geloescht: `.hinweis` ist wieder ausschliesslich der Toast der Bibliothek, und wer einen alten Namen in eine Vorlage schreibt, faellt bei tests_altklassen.py durch. Was von der Abbildung UEBRIG ist, steht am Dateiende unter "Katalog-Bauteile mit WaWi-Zuschnitt": die wenigen Stellen, an denen die WaWi ein Bauteil bewusst anders braucht, jede mit ihrem Grund. SPEZIFITAET: Klassen, die es in der Bibliothek ebenfalls gibt (karte, knopf, pille, feld, zeile, aktionen, ampel, kopf, marke), stehen hier mit `body.wawi` davor. Reine Ladereihenfolge waere zu duenn: die Bibliothek hat zu mehreren dieser Klassen Regeln mit zwei Klassen (.knopf.pri, .pille:hover, .hinweis.an), und die schlagen eine blosse Klasse unabhaengig von der Reihenfolge. Ausserdem baut berichte.py die beiden Dateien fuer den lokalen Bericht selbst zusammen; eine Zusage, die nur an der Reihenfolge haengt, waere dort still verloren. ========================================================================== */ /* --------------------------------------------------------------------------- 0. DIE EINZIGE ABWEICHUNG VOM DASHBOARD: die Aktionsfarbe (Pipo 4A, 20.09.) ---------------------------------------------------------------------------- Die WaWi handelt fuer die Wurstkutsche, also ist ihre Aktionsfarbe das Wurstkutsche-Blau der Firmengruppe und nicht das allgemeine Dashboard-Blau. Das ist der GANZE Unterschied im Aussehen; alles andere ist identisch. --accent-dunkel wird aus demselben Ton gerechnet, damit kein zweiter Wert gepflegt werden muss. ------------------------------------------------------------------------ */ :root{ --accent:var(--wurst); --accent-bg:var(--wurst-bg); --accent-text:var(--wurst); --accent-dunkel:color-mix(in srgb,var(--wurst) 85%,black); } /* --------------------------------------------------------------------------- 1. SEITE UND FLIESSTEXT ---------------------------------------------------------------------------- Die Bibliothek ist fuer das Dashboard gebaut: dort gibt es Karten und Kacheln, aber keinen Fliesstext. Deshalb nimmt sie Absaetzen, Listen und Ueberschriften alle Aussenabstaende und den Listen ihre Punkte. Die WaWi besteht zur Haelfte aus Text (Hinweise, Erklaerungen, Rezeptbuch), also bekommen diese Elemente hier ihre Abstaende zurueck -- aus der Abstands- leiter, nicht aus Browservorgaben. ------------------------------------------------------------------------ */ body.wawi{overflow-x:clip} /* overflow-wrap:anywhere gilt fuer die ganze Flaeche und nicht nur fuer Tabellenzellen: ein Artikelname ohne Trennzeichen sprengt sonst als Ueberschrift die Seite (gemessen 20.09.2026: 2625 px Dokument in einem 1280 px breiten Fenster). Die Regel kam am 11.09.2026 mit cockpit.css. */ .inhalt{max-width:60rem;margin:0 auto;padding:var(--a7) var(--a6);overflow-wrap:anywhere} body.wawi fieldset{min-width:0;max-width:100%} /* Auf breiten Schirmen darf der Inhalt atmen: die Tabellen (Preisliste, Startseite) sind die Hauptnutzer der Breite. */ @media (min-width:1400px){ .inhalt,.kopf-innen{max-width:78rem} } .inhalt :where(p,ul,ol,dl){margin:var(--a4) 0} .inhalt :where(ul,ol){padding-left:var(--a7);list-style:disc} .inhalt ol{list-style:decimal} .inhalt li{display:list-item} .inhalt ul.knapp{margin:var(--a2) 0 0;padding-left:var(--a6)} .inhalt h1{font-family:var(--f-head);font-size:var(--s24);line-height:1.25;margin:0 0 var(--a6)} .inhalt h2{font-family:var(--f-head);font-size:var(--s17);line-height:1.3;margin:var(--a7) 0 var(--a4)} .inhalt h3{font-family:var(--f-head);font-size:var(--s15);line-height:1.3;margin:var(--a6) 0 var(--a2)} .inhalt h1+h2,.inhalt :where(h2,h3):first-child{margin-top:0} /* Links tragen ihre Farbe, keinen Unterstrich: in einer Tabelle mit vier Aktionslinks je Zeile ist der Unterstrich das lauteste Element der Seite. Im Fliesstext unterstreicht der Mauszeiger auf Verlangen. Ausnahme bleiben die Zustands-Sprungmarken weiter unten, dort traegt die Stufenfarbe schon den Linkhinweis nicht mehr. */ a{text-decoration:none} a:hover{text-decoration:underline} .datum{white-space:nowrap} /* '2026-08-27' ist EIN Wert, kein Umbruchpunkt */ .vorformatiert{white-space:pre-line;overflow-wrap:anywhere} .warn-text{color:var(--crit-text)} .zu-viel{color:var(--crit-text);font-weight:700} .zu-wenig{color:var(--good-text);font-weight:600} /* Eine Fehlerzeile ohne Kasten (Bestandsvergleich). Sie hatte bis zum 20.09.2026 ueberhaupt keine Regel und stand als gewoehnlicher Absatz da, obwohl sie role="alert" traegt. */ .fehler{color:var(--crit-text);font-weight:600} /* Formularelemente ausserhalb eines .feld: Mengenfelder in Tabellenzeilen, Auswahlfelder in Werkzeugleisten, Textfelder in Storno-Formularen. Die Bibliothek kleidet nur `.feld > input` ein; ohne diese Regel stuenden die uebrigen Felder in Browservorgabe mitten zwischen Katalog-Bauteilen. */ .inhalt :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){ font-family:inherit;max-width:100%;min-height:var(--zeile-h); padding:var(--a2) var(--a4);border:1px solid var(--line);border-radius:var(--rs); background:var(--card);color:var(--text);font-size:var(--s15)} .inhalt :where(textarea){resize:vertical} @media (max-width:1000px){ .inhalt :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){min-height:40px} } /* --------------------------------------------------------------------------- 2. KOPFZEILE UND BEREICHSMENUE (Design-Linie Schritt C, 20.09.2026) ---------------------------------------------------------------------------- Der Kopf traegt jetzt das Muster des Dashboards: Marke mit Zeichen links, Nutzerzeile rechts, darunter drei Menuereihen. Die Bauteile kommen aus der Bibliothek (.marke samt .zeichen, .reiter, .pille, .plakette); hier steht nur, was die WaWi anders BRAUCHT. Das Menue bleibt OBEN (Pipo 2B, 20.09.2026): die WaWi laeuft im Rahmen des Dashboards neben dessen Seitenleiste, eine zweite Seitenleiste waere dort die doppelte Navigation. Darum werden die Reiter der Bibliothek, die fuer die senkrechte Leiste als Raster mit Symbolspalte gebaut sind, hier waagerecht gestellt. ------------------------------------------------------------------------ */ body.wawi .kopf{display:block;background:var(--card);color:var(--text); border-bottom:1px solid var(--line);padding:0;border-radius:0} /* Dieselbe Breite und derselbe Seitenrand wie .inhalt darunter: nur so steht die Marke genau ueber der Ueberschrift der Seite. */ .kopf-innen{max-width:60rem;margin:0 auto;display:grid;gap:var(--a3); padding:var(--a5) var(--a6)} /* Erste Zeile. Im Dashboard sitzt der Inhaber am Handy neben der Marke; hier tut das die Nutzerzeile auf jeder Breite: sie darf schrumpfen (min-width:0 an .wer), statt in eine eigene Zeile zu rutschen. */ .kopf-zeile{display:flex;align-items:center;gap:var(--a3) var(--a5)} body.wawi .marke{display:inline-flex;align-items:center;gap:9px; font-family:var(--f-head);font-weight:700;font-size:var(--s17); color:var(--text);white-space:nowrap;flex:0 0 auto} body.wawi .marke:hover{text-decoration:none} /* Das WK-Zeichen ist eine Bilddatei und kein Symbol aus dem Sprite-Satz des Dashboards. Es bekommt die Rundung der Kachel, damit in der weichen Flaeche kein hartes Quadrat steht. */ body.wawi .marke .zeichen img{display:block;border-radius:var(--a2)} /* Die rechte Gruppe der Kopfzeile: Nutzername und die drei festen Knoepfe (Truck-Ansicht, Einstellungen, Abmelden; BAUPLAN-vereinfachung Schritt A). Das `margin-left:auto` sitzt an der GRUPPE und nicht mehr an `.wer`: zwei automatische Aussenabstaende in derselben Flex-Zeile teilen den freien Platz unter sich auf, der Name stuende dann in der Mitte statt rechts. Im Dashboard-Rahmen faellt der Name weg, die Gruppe bleibt und rutscht damit als Ganzes nach rechts. */ .kopf-rechts{margin-left:auto;min-width:0;display:flex;align-items:center; flex-wrap:wrap;justify-content:flex-end;gap:var(--a2) var(--a4)} /* Rechtsbuendig wie die Inhaberzeile des Dashboards. min-width:0 ist die ganze Zusage "beide auf einer Zeile": ohne sie ist der Flex-Mindestwert die volle Textbreite, und die Zeile bricht bei 360 px um. */ .wer{min-width:0;text-align:right; font-size:var(--s13);color:var(--muted);overflow-wrap:anywhere} .wer a{color:var(--muted)} .navigation{display:grid;gap:var(--a2);min-width:0} /* Alle drei Reihen brechen um und bleiben damit innerhalb des Fensters; am Handy ist das die Pillenleiste des Dashboards (.desk-leiste). */ .navigation nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--a2)} /* Erste Reihe, die Bereiche: waagerechter Reiter. Anzeigeart und Textfarbe sind umgestellt, Polsterung, Rundung, Schriftgroesse und der aktive Grund kommen aus der Bibliothek. Die faerbt beim Ueberfahren nur `button.reiter`, unsere Reiter sind Links. */ body.wawi .bereich-nav a.reiter{display:inline-flex;align-items:center; gap:var(--a2);max-width:100%;color:var(--text);text-decoration:none} body.wawi .bereich-nav a.reiter:hover{background:var(--bg);text-decoration:none} /* Zweite und dritte Reihe, Orte und Kontextmenue: Pillen. Die WaWi nennt `.pille` sonst den Firmenchip (getoenter Grund, kein Rand, siehe die Katalog-Bauteile am Dateiende); im Menue gilt die Filterpille der Bibliothek, darum hier zurueckgeholt. */ body.wawi :is(.ort-nav,.reiter-leiste) a.pille{display:inline-flex;align-items:center;gap:7px; max-width:100%;padding:4px 11px;border:1px solid var(--line); border-radius:var(--rp);background:var(--card);color:var(--text); font-size:var(--s13);font-weight:400;white-space:normal;text-decoration:none} body.wawi :is(.ort-nav,.reiter-leiste) a.pille:hover{background:var(--bg);border-color:var(--line-stark)} body.wawi :is(.ort-nav,.reiter-leiste) a.pille.an{background:var(--accent-bg); border-color:var(--accent-bg);color:var(--accent-text);font-weight:600} /* Reiter INNERHALB einer Seite (22.09.2026, Standplaetze): dieselbe Filterpille wie im Untermenue, nur eine Zeile weiter unten. Bewusst kein