:root{ /* NUR NOCH DUNKEL (D485, 30.09.2026). Betreiber: "wir bleiben jetzt nur noch bei dem dark modus. der helle modus kann entfernt werden. die auswahl kann weg. standard ist dunkel". Vorher hier die hellen Werte, dunkel nach Betriebssystem oder Profilwahl (seit 17.09.2026, Profil- seite D466) - die hellen Werte stehen in control.css.vor-nur-dunkel. Die Grautoene folgen dem Hintergrundbild des Betreibers (#808080 -> #333 -> #000). Marke: Primaer Orange, Sekundaer Grau; --akzent-text fuer Lauftext-Verweise. */ color-scheme:dark; --bg:#1a1a1a; --flaeche:#262626; --rand:#3a3a3a; --text:#ececec; --leise:#a6a6a6; --akzent:#ff9a1f; --akzent-text:#ffb257; --sekundaer:#1a1a1a; --gut:#4ade80; --warn:#fbbf24; --schlecht:#f87171; --info:#60a5fa; --gut-bg:#14311f; --warn-bg:#3a2c0c; --schlecht-bg:#3b1518; --akzent-bg:#3a2408; --info-bg:#172554; /* Der Ton beim Ueberfahren, fuer Zeilen und Reiter. */ --ueber:#303030; /* Deutlicher als --rand, fuer die Umrandung der Artikelkachel. */ --rand-stark:#4d4d4d; /* Kopf und Fuss der Artikelkachel, abgesetzt vom Rumpf. */ --kopf:#2e2e2e; } *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text); font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif} /* Kopf und Balken zusammen stehenlassen, nicht einzeln: die Kopfzeile bricht auf schmalen Fenstern um, ihre Hoehe ist also nicht bekannt. Ein eigenstaendig klebender Balken muesste sie kennen. */ .kopfleiste{position:sticky;top:0;z-index:20} header{background:var(--flaeche);border-bottom:1px solid var(--rand); padding:0 1.5rem;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap} /* Der Ladebalken. Zwei Zustaende, weil es zwei Arten von Warten gibt: Bei der Gruppenkorrektur laeuft ein Aufruf, dessen Dauer niemand kennt - da zeigt ein durchlaufender Streifen nur "es passiert etwas". Beim Textauftrag ist die Zahl der Felder bekannt, da luegt ein Durchlaufen, wo eine echte Angabe moeglich ist. */ /* Eine Eigenschaft, die nicht an allen Varianten des Umfangs haengt. Das ist kein Fehler, aber es soll auffallen: genau darin liegt der Unterschied zum alten System, das nur einen Wert je Artikel kannte. */ .eh-zeile.eh-teil{border-left:3px solid var(--warn);padding-left:.5rem} /* Der Wert steht in einer EIGENEN Spalte, mit sichtbarer Kante. Die laengste benutzte Eigenschaft hat 22 Zeichen; 14rem traegt sie und laesst die Werte untereinander stehen. Ein laengerer Name rueckt nur SEINE Zeile aus - besser als eine Spalte, die fuer alle zu breit ist. */ .eig-liste .eig-zeile > .k-name{min-width:14rem} .eig-wert{color:var(--text);font-weight:600; border-left:1px solid var(--rand);padding-left:.6rem} /* Der Zielwert hinter dem heutigen: ein Pfeil sagt mehr als eine zweite Zeile, und die Namen bleiben untereinander stehen. */ .k-soll{color:var(--akzent)} /* Die Aufnahme klappt auf wie die Kategorieauswahl - derselbe Platz, dieselbe Geste. */ .eig-huelle summary{list-style:none;cursor:pointer} .eig-huelle summary::-webkit-details-marker{display:none} .eig-feld{padding-top:.8rem} .eig-form select{min-width:16rem} /* Die Gruppenueberschriften in der Auswahl. Browser setzen optgroup von sich aus fett-kursiv und grau; kursiv neben aufrechten Eintraegen liest sich unruhig, wenn es siebzehnmal vorkommt. Aufrecht und fett genuegt - der Einzug der Eintraege macht die Ordnung ohnehin sichtbar. */ .eig-form optgroup{font-style:normal;font-weight:700;color:var(--text)} .eig-form optgroup option{font-weight:400} /* font:inherit holte die .8rem der Beschriftung (.eh-feld) - die Auswahl daneben steht auf .9rem. Zwei Wertfelder derselben Zeile in zwei Schriftgroessen; welches erscheint, haengt nur an der gewaehlten Eigenschaft. */ .eig-form input[type=text]{min-width:16rem;padding:.4rem .5rem; border-radius:8px;border:1px solid var(--rand); background:var(--bg);color:var(--text);font:inherit;font-size:.9rem} .eig-form input[type=text]:hover{border-color:var(--akzent)} /* Der Farbpunkt vor einem Tag - plentyONE fuehrt je Tag eine Farbe, und sie hilft beim Wiedererkennen. */ .tag-punkt{display:inline-block;width:.6rem;height:.6rem; border-radius:99px;margin-right:.45rem;vertical-align:baseline; border:1px solid rgba(0,0,0,.15)} /* Die Tagspalte der Variantentabelle: nur Punkte, dicht an dicht. Der Rahmen des Punktes bleibt, damit ein sehr heller Tag auf weissem Grund nicht verschwindet - und ein Tag ohne Katalogfarbe wird zum leeren Kreis statt zur unsichtbaren Luecke: sonst zaehlte man beim senkrechten Vergleich falsch. */ .v-tags{white-space:nowrap;line-height:1} .v-tags .tag-punkt{margin-right:.2rem;vertical-align:middle} .v-tags .tag-punkt:last-child{margin-right:0} .tag-punkt-leer{background:transparent;border-color:var(--rand-stark)} .tag-form select{min-width:14rem} /* Vorschaubilder. Klein und ruhig: sie sollen die Zeile lesbar machen, nicht sie beherrschen. Ein leerer Platz sagt genauso viel wie ein Bild - deshalb steht dort ein Rahmen und nicht nichts, sonst verrutschte die Spalte. */ .a-bild{flex:none;width:2rem;height:2rem;border-radius:6px; object-fit:contain;background:var(--bg); border:1px solid var(--rand)} .a-bild-leer{display:inline-block;border-style:dashed} .zeilenbild-zelle{width:2.4rem} /* BLOCK, nicht inline-block. Ein inline-block sitzt mit seiner Grundlinie auf der Textgrundlinie der Zeile - und die liegt nicht in der Mitte, sondern ein Stueck darueber. Solange die Zeilen hoch waren, fiel das kaum auf; seit die Variantentabelle enge Zeilen hat (.28rem statt .55rem), sitzt das Bild sichtbar zu hoch. Als Block hat das Element eine echte Hoehe, und die Zelle zentriert es senkrecht. line-height:0 bleibt: sonst legte der Zeilenkasten des Bildes noch ein paar Pixel Durchschuss darunter. */ .zeilenbild{display:block;line-height:0} .zeilenbild img{width:1.75rem;height:1.75rem;border-radius:5px; object-fit:contain;background:var(--bg); border:1px solid var(--rand)} .zeilenbild:hover img{border-color:var(--akzent)} /* Kein Bild: ein durchgestrichener Kreis statt eines Gedankenstrichs. Der Strich las sich wie ein leeres Feld - "hier steht nichts" -, und das stimmt ja nicht: hier FEHLT etwas, und zwar etwas, das jede andere Zeile hat. Ein Zeichen sagt das, ein Strich nicht. Dieselbe Kastengroesse wie das Bild daneben (1.75rem). Sonst waeren Zeilen mit Bild hoeher als Zeilen ohne, und die Tabelle wuerde bei jedem fehlenden Bild eine Stufe machen. */ .zeilenbild-leer{display:flex;align-items:center;justify-content:center; width:1.75rem;height:1.75rem;color:var(--leise)} .zeilenbild-leer svg{width:1.05rem;height:1.05rem;fill:none; stroke:currentColor;stroke-width:1.5;stroke-linecap:round} /* Der Reiter Bilder. Karten statt Tabelle: ein Bild ist zuerst ein Bild, und daneben gehoert, woran es haengt. */ .bild-liste{display:grid;gap:.7rem;margin-top:.9rem; grid-template-columns:repeat(auto-fill,minmax(23rem,1fr))} .bild-karte{display:flex;gap:.8rem;align-items:flex-start; background:var(--flaeche);border:1px solid var(--rand); border-radius:10px;padding:.7rem} /* Ein Bild an keiner Variante liegt im Artikel und erscheint im Shop nirgends - das darf man sehen, ohne den Text zu lesen. */ .bild-karte.bild-verwaist{border-color:var(--warn)} .bild-vorschau{flex:none;display:block;width:5rem;height:5rem; border-radius:8px;overflow:hidden;background:var(--bg); border:1px solid var(--rand)} .bild-vorschau img{width:100%;height:100%;object-fit:contain;display:block} .bild-text{min-width:0;display:flex;flex-direction:column;gap:.25rem; font-size:.82rem} .bild-name{font-weight:600;overflow-wrap:anywhere} .bild-varianten{font-size:.8rem} .bild-varianten .marke-txt{display:block;overflow-wrap:anywhere} .bild-warn{color:var(--warn);font-weight:600} .ladebalken{height:3px;overflow:hidden;background:transparent} /* Der Platz bleibt IMMER stehen. Mit display:none fielen die drei Pixel aus dem Fluss: die ganze Seite rutschte bei jedem Ladevorgang um drei Pixel nach unten und danach wieder zurueck. [hidden] macht deshalb nur den Fueller unsichtbar - der Streifen selbst bleibt als Leerraum liegen. */ .ladebalken[hidden]{display:block} .ladebalken[hidden] .ladebalken-fuell{opacity:0} .ladebalken-fuell{height:100%;width:0;background:var(--akzent); transition:width .3s ease,opacity .2s ease} .ladebalken.unbestimmt .ladebalken-fuell{width:35%; animation:balken-lauf 1.1s linear infinite} @keyframes balken-lauf{ from{transform:translateX(-115%)} to{transform:translateX(400%)}} @media (prefers-reduced-motion:reduce){ .ladebalken.unbestimmt .ladebalken-fuell{width:100%;animation:none; opacity:.55}} header .marke{display:flex;align-items:center;padding:.55rem 0;margin-right:.75rem} header .marke-bild{height:1.7rem;width:auto;display:block} nav{display:flex;gap:.25rem;flex-wrap:wrap} nav a{padding:.9rem .8rem;color:var(--leise);text-decoration:none; border-bottom:2px solid transparent} nav a:hover{color:var(--text)} nav a.aktiv{color:var(--akzent);border-bottom-color:var(--akzent)} header .rechts{margin-left:auto;display:flex;align-items:center;gap:.75rem; font-size:.85rem;color:var(--leise)} header .rechts a{color:var(--leise)} /* --------------------------------------------------------------------- Die Menues der Kopfleiste: "Einstellungen" und das Profil. Dieselbe Sprache wie die Filtertafeln der Artikelliste - ein details, ein Feld darunter, Schatten statt Rahmenkaskade. Wer die eine Geste gelernt hat, kennt die andere. Die Reihenfolge der Regeln ist hier wichtig: .nav-tafel a steht NACH "header .rechts a" und schlaegt es bei gleicher Spezifitaet. Im Profilfeld sollen die Eintraege in Textfarbe stehen, nicht in der leisen Farbe der Kopfzeile. --------------------------------------------------------------------- */ .nav-menue{position:relative} .nav-menue > summary{list-style:none;cursor:pointer} .nav-menue > summary::-webkit-details-marker{display:none} /* Der Knopf sitzt in derselben Flucht wie die Verweise daneben - gleiche Polsterung, gleicher Streifen darunter. Er soll wie ein Punkt der Navigation aussehen und nicht wie ein Knopf, der hineingeraten ist. */ .nav-knopf{display:inline-flex;align-items:center;gap:.3rem; padding:.9rem .8rem;color:var(--leise); border-bottom:2px solid transparent} .nav-knopf:hover{color:var(--text)} .nav-knopf.aktiv{color:var(--akzent);border-bottom-color:var(--akzent)} [open] > .nav-knopf{color:var(--akzent)} .nav-winkel{width:.85rem;height:.85rem;flex:none;fill:none; stroke:currentColor;stroke-width:1.8;stroke-linecap:round; stroke-linejoin:round;transition:transform .12s ease} /* Zu zeigt nach unten, offen nach oben - der Winkel sagt, was ein Klick tut, nicht wo man ist. Dieselbe Regel wie am Variantenknopf. */ [open] > .nav-knopf .nav-winkel{transform:rotate(180deg)} .nav-tafel{position:absolute;z-index:40;top:calc(100% - .3rem);left:0; min-width:12rem;background:var(--flaeche);border:1px solid var(--rand); border-radius:12px;/* D520: wie der Filter (D516) - Betreiber: "die gruppenfunktion im artikel kann das fenster auch ein schatten haben" */ box-shadow:0 18px 48px rgba(0,0,0,.6),0 3px 10px rgba(0,0,0,.45);border-color:rgba(255,255,255,.14); padding:.35rem;display:flex;flex-direction:column} .nav-tafel-rechts{left:auto;right:0} /* border:0 hebt den Streifen von "nav a" auf - im Feld gibt es keine Flucht, an der etwas unterstrichen werden muesste. */ .nav-tafel a,.nav-abmelden{display:block;width:100%;text-align:left; padding:.5rem .6rem;border:0;border-radius:8px;background:none; color:var(--text);text-decoration:none;font:inherit;font-size:.9rem; cursor:pointer} .nav-tafel a:hover,.nav-abmelden:hover{background:var(--kopf); color:var(--text)} .nav-tafel a.an{color:var(--akzent);font-weight:600} .nav-tafel form{margin:0} /* Das Profil: ein Kreis mit den Initialen. Kein Bild - es gibt keins, und ein leerer grauer Kreis saehe aus wie ein fehlendes Bild. */ .nav-bild{display:flex;align-items:center;justify-content:center; width:2.1rem;height:2.1rem;flex:none;border-radius:99px; border:1px solid var(--rand);background:var(--kopf);color:var(--text); font-size:.8rem;font-weight:700;letter-spacing:.02em} .nav-bild:hover{border-color:var(--akzent);color:var(--akzent)} [open] > .nav-bild{border-color:var(--akzent);color:var(--akzent)} .nav-wer{margin:.2rem .6rem .45rem;font-size:.85rem;font-weight:600; color:var(--text);white-space:nowrap} .nav-wer span{display:block;font-weight:400;font-size:.78rem; color:var(--leise)} /* DER MANDANT - die einzige Angabe im Kopf, die sagt, in WELCHE FIRMA geschrieben wird. Deshalb keine Beschriftung daneben ("Mandant: HorSeven") und kein Menuepunkt, hinter dem der Name erst nach einem Klick auftaucht: der NAME SELBST ist die Schaltflaeche. Wer hinsieht, sieht ihn; wer klickt, bekommt die Liste. Als Plakette und nicht als Navigationspunkt: die Punkte links sind Orte im Dashboard, das hier ist ein Zustand. Sie sehen deshalb absichtlich anders aus - ein Rahmen statt eines Streifens. */ .nav-mandant{margin-right:.5rem} .nav-mandant-jetzt{padding:.4rem .7rem;border:1px solid var(--rand); border-radius:99px;background:var(--kopf);color:var(--text); font-size:.85rem;font-weight:600;white-space:nowrap} .nav-mandant-jetzt:hover{border-color:var(--akzent);color:var(--akzent)} [open] > .nav-mandant-jetzt{border-color:var(--akzent);color:var(--akzent)} /* Dieselbe Zeile wie die Verweise der Tafel darueber - ein Knopf in einem Formular, der aussieht wie ein Verweis, weil er dasselbe tut. */ /* white-space:nowrap: die Tafel ist 12rem breit, "Horse Shop Landenhausen" laenger. Ohne die Regel bricht der Name in der Liste um, waehrend er oben in der Plakette einzeilig steht - derselbe Name in zwei Gestalten. Mit ihr waechst die Tafel auf den laengsten Namen. */ .nav-mandant-wahl{display:block;width:100%;text-align:left; padding:.5rem .6rem;border:0;border-radius:8px;background:none; color:var(--text);font:inherit;font-size:.9rem;cursor:pointer; white-space:nowrap} .nav-mandant-wahl:hover{background:var(--kopf)} .nav-mandant-wahl.an{color:var(--akzent);font-weight:600} @media (prefers-reduced-motion:reduce){.nav-winkel{transition:none}} /* Keine Hoechstbreite: die Artikelseite hat jetzt zwei Spalten, und die Variantentabelle ist breit. Was der Bildschirm hergibt, wird gebraucht - auf schmalen Geraeten regelt es das Raster selbst. */ main{margin:0 auto;padding:1.5rem} h1{font-size:1.35rem;margin:0 0 1.25rem;font-weight:600} h2{font-size:1rem;margin:2rem 0 .75rem;font-weight:600} .karten{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .karte{background:var(--flaeche);border:1px solid var(--rand);border-radius:10px; padding:1.1rem 1.25rem} .karte h3{margin:0 0 .1rem;font-size:1.05rem;font-weight:600} .karte-kopf{display:flex;align-items:baseline;justify-content:space-between; gap:.75rem} .karte-kopf .pille{flex:none} /* Herstellernamen durchgehend in Grossbuchstaben. Nur Darstellung - in der Datenbank steht weiter die Schreibweise der Marke. */ .hersteller{text-transform:uppercase;letter-spacing:.03em} .filter-form{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center; margin-bottom:1rem} .filter-form input[type=search]{flex:1 1 22rem;padding:.45rem .6rem; border:1px solid var(--rand);border-radius:8px;background:var(--flaeche); color:var(--text);font:inherit} .filter-form select{padding:.45rem .6rem;border:1px solid var(--rand); border-radius:8px;background:var(--flaeche);color:var(--text);font:inherit} /* Der Hauptknopf ist umrandet, nicht gefuellt (18.09.2026): "ein orangener Button mit weisser Schrift laesst sich nur schlecht lesen". Orange Kante, orange Schrift (--akzent-text, das dunklere Orange mit 4,5:1 auf Weiss), beim Ueberfahren der helle Orangegrund. */ .knopf{padding:.45rem .9rem; border:1.5px solid var(--akzent);border-radius:8px;background:var(--flaeche); color:var(--akzent-text);font:inherit;font-weight:600;cursor:pointer; transition:background .15s ease,color .15s ease} .knopf:hover:enabled{background:var(--akzent-bg)} .knopf:disabled,.knopf-leise:disabled{ opacity:.45;cursor:default;filter:none} .filter-form .ankreuz{display:flex;align-items:center;gap:.35rem; color:var(--leise);font-size:.9rem} /* --------------------------------------------------------------------- Suchzeile der Artikeluebersicht. EINE HOEHE fuer alles in der Zeile: Suchfeld, Herstellerknopf, Suchknopf und das Zeichen zum Zuruecksetzen. Vorher trug jedes Teil seine eigene Polsterung und wurde dadurch verschieden hoch - bei align-items:center faellt das nicht als Stufe auf, aber die Zeile wirkt zusammengewuerfelt. Dieselbe Ueberlegung wie bei .eh-form. --------------------------------------------------------------------- */ .filter-form input[type=search], .filter-form .hf-auf, .filter-form .filter-suchen, .filter-form .zuruecksetzen{height:2.4rem;box-sizing:border-box} /* Der Suchknopf ist NICHT mehr blau. Blau ist im Blatt die Farbe der Handlung, die etwas AENDERT - der Schreibknopf, der nach plentyONE geht. Suchen aendert nichts; es sortiert nur, was man sieht. Ein blauer Knopf an dieser Stelle zieht den Blick auf sich, sooft man die Seite oeffnet, und nimmt ihn dem Prüfstand weg, wo tatsaechlich etwas zu tun ist. Umrissen, in der Textfarbe, mit demselben Rand wie die Felder daneben - und beim Ueberfahren der Akzent, damit er sich als Knopf zu erkennen gibt. */ .filter-form .filter-suchen{display:inline-flex;align-items:center; padding:0 1.1rem;border:1px solid var(--rand);border-radius:8px; background:var(--flaeche);color:var(--text);font:inherit; font-size:.9rem;font-weight:600;cursor:pointer; transition:border-color .12s ease,color .12s ease} .filter-form .filter-suchen:hover{border-color:var(--akzent); color:var(--akzent)} /* Zuruecksetzen als Zeichen statt als Wort. Es ist die seltenste Handlung der Zeile und steht ganz rechts; ein Wort dafuer waere so breit wie der Suchknopf daneben und gaebe ihm dasselbe Gewicht. Quadratisch, damit es als Zeichen und nicht als abgeschnittener Knopf gelesen wird. Was es tut, sagt der title - und das aria-label denen, die ihn nicht sehen. */ .filter-form .zuruecksetzen{display:inline-flex;align-items:center; justify-content:center;width:2.4rem;flex:none;border-radius:8px; border:1px solid var(--rand);background:var(--flaeche); color:var(--leise);text-decoration:none; transition:border-color .12s ease,color .12s ease} .filter-form .zuruecksetzen svg{width:1.05rem;height:1.05rem;fill:none; stroke:currentColor;stroke-width:1.6;stroke-linecap:round; stroke-linejoin:round} .filter-form .zuruecksetzen:hover{border-color:var(--schlecht); color:var(--schlecht)} @media (prefers-reduced-motion:reduce){ .filter-form .filter-suchen,.filter-form .zuruecksetzen{transition:none}} /* --------------------------------------------------------------------- Die Herstellertafel. Ein
statt eines Auswahlfeldes: 189 Hersteller, mehrere waehlbar. Die Huelle ist RELATIV, die Tafel ABSOLUT - sonst schoebe das Aufklappen die ganze Artikelliste nach unten. --------------------------------------------------------------------- */ .hf-huelle{position:relative;flex:none} .hf-huelle summary{list-style:none;cursor:pointer} .hf-huelle summary::-webkit-details-marker{display:none} .hf-auf{display:inline-flex;align-items:center;gap:.45rem; padding:0 .8rem;border:1px solid var(--rand);border-radius:8px; background:var(--flaeche);color:var(--text);font-size:.9rem; white-space:nowrap;max-width:16rem} .hf-auf > span{overflow:hidden;text-overflow:ellipsis} .hf-auf svg{width:1rem;height:1rem;flex:none;fill:none;stroke:currentColor; stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; color:var(--leise)} .hf-auf:hover{border-color:var(--akzent)} [open] > .hf-auf{border-color:var(--akzent);color:var(--akzent)} /* Dieselbe Karte wie die Kategorieauswahl - nur schwebend. Der Schatten sagt, dass sie ueber der Seite liegt und nicht in ihr. */ /* RECHTSbuendig mit dem Knopf, nicht links. Die Tafel ist breiter als der Knopf; nach rechts ausgerichtet waechst sie nach LINKS in die eigene Spalte hinein, statt nach rechts unter den Pruefstand zu laufen und von ihm ueberdeckt zu werden. */ .hf-tafel{position:absolute;z-index:30;top:calc(100% + .35rem);right:0; width:22rem;max-width:80vw;background:var(--flaeche); border:1px solid var(--rand);border-radius:12px; /* D516 (01.10.2026), Betreiber: "der filter darf auch einen schatten bekommen, damit man ihn besser von dem hintergrund sieht" - vorher 0 8px 24px mit 16 % Schwarz, im dunklen Modus praktisch unsichtbar. */ box-shadow:0 18px 48px rgba(0,0,0,.6),0 3px 10px rgba(0,0,0,.45); border-color:rgba(255,255,255,.14);padding:.6rem} .hf-suche{width:100%;padding:.4rem .6rem;border:1px solid var(--rand); border-radius:8px;background:var(--bg);color:var(--text);font:inherit; font-size:.88rem} .hf-suche:focus{outline:none;border-color:var(--akzent); background:var(--flaeche)} /* Rollbereich: 189 Zeilen passen auf keinen Bildschirm, und die Tafel soll nicht laenger werden als die Liste dahinter. */ /* Die Leiste zwischen Suchfeld und Liste: links, wie viele gewaehlt sind, rechts der Knopf, der alle auf einmal setzt. Beides Auskunft und Handlung zur GANZEN Liste - deshalb ueber ihr und nicht darin. */ .hf-leiste{display:flex;align-items:center;justify-content:space-between; gap:.6rem;margin-top:.5rem;min-height:1.5rem} .hf-stand{font-size:.8rem;font-variant-numeric:tabular-nums} /* Leise: er ordnet die Auswahl, er trifft sie nicht. Der Suchknopf der Seite ist schon zurueckgenommen; ein kraeftiger Knopf INNERHALB einer Tafel waere lauter als der, der die Suche ausloest. */ .hf-alle{padding:.2rem .55rem;border:1px solid var(--rand);border-radius:6px; background:var(--bg);color:var(--leise);font:inherit;font-size:.8rem; cursor:pointer;white-space:nowrap; transition:border-color .12s ease,color .12s ease} .hf-alle:hover:enabled{border-color:var(--akzent);color:var(--akzent)} .hf-alle:disabled{opacity:.4;cursor:default} @media (prefers-reduced-motion:reduce){.hf-alle{transition:none}} .hf-liste{max-height:19rem;overflow-y:auto;margin-top:.5rem} .hf-zeile{display:flex;align-items:center;gap:.5rem; padding:.3rem .45rem;border-radius:6px;cursor:pointer;font-size:.88rem} .hf-zeile:hover{background:var(--kopf)} /* Die Ankreuzfelder der Filtertafeln. Die Vorgabe des Browsers ist 13px - in einer Liste von 52 Kanaelen ist das ein kleines Ziel, und ob eines an ist, sieht man erst beim Hinsehen. Groesser und in der Akzentfarbe; dieselbe Groesse wie im Kanalbaum (.kw-name input), damit dasselbe Element ueberall gleich gross ist. */ .hf-zeile input[type=checkbox],.sg-haken input[type=checkbox]{ width:1.15rem;height:1.15rem;margin:0;accent-color:var(--akzent)} .hf-zeile input{flex:none;cursor:pointer} .hf-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} /* Die Artikelzahl je Hersteller - rechts, blass, mit gleich breiten Ziffern, damit die Spalte ruhig steht. */ .hf-zahl{flex:none;color:var(--leise);font-size:.8rem; font-variant-numeric:tabular-nums} .hf-leer{margin:.5rem .45rem .2rem;font-size:.88rem;color:var(--leise)} /* Der Seitenwechsler unter der Liste - derselbe Baustein wie oben. RECHTSbuendig wie dort, damit beide in einer Flucht stehen: wer unten ankommt, findet ihn an derselben Stelle des Bildschirms wieder. Zentriert saehe fuer sich genommen ordentlich aus, ergaebe mit dem oberen zusammen aber ein Zickzack. Der alte .blaettern-Kasten mit den Wortverweisen "zurueck / Seite 3 von 421 / weiter" ist damit weg. */ .a-blaettern-fuss{display:flex;align-items:center;justify-content:flex-end; gap:.5rem;margin-top:1rem;padding-bottom:.5rem} /* Wer sanftes Rollen abbestellt hat, bekommt den Sprung. */ @media (prefers-reduced-motion:reduce){.a-rollfeld{scroll-behavior:auto}} /* Artikel als Kompaktkarte: drei Zeilen, aufklappbar. Bewusst kein Raster - die Namen sind unterschiedlich lang, und untereinander liest sich eine Liste schneller als ein Kachelfeld. */ .a-liste{display:flex;flex-direction:column;gap:.4rem} /* "in Ordnung" bekommt KEINE Farbe. Eine Liste, in der das Normale gruen leuchtet, macht das Auge blind fuer das, was nicht normal ist. Farbe tragen nur die Abweichungen - und sie tragen sie im KOPF, nicht als Streifen am Rand. Ein getoenter Kopf faellt beim Ueberfliegen einer langen Liste eher auf als drei Pixel an der Kante, und die Kachel bleibt sonst ruhig. */ .a-karte{background:var(--flaeche);border:1px solid var(--rand-stark); border-radius:10px} .a-karte.a-offen{border-color:var(--akzent)} /* Die Artikelkachel: drei Reihen untereinander. * * 1 Winkel · Nummer · Name · auffrischen · oeffnen + Trennlinie * 2 Hersteller · Varianten · aktiv · Preise rechts * 3 Chips · Lager rechts * * Vorher zwei Spalten - links Name, Zeile zwei und Chips, rechts Preise * und Lager. Bei langen Namen und vielen Chips verschob sich die rechte * Spalte gegen die linke, und keine Karte sah aus wie die daneben. Drei * Reihen stehen immer gleich. */ /* Die Artikelkachel: Kopfzeile und Rumpf. * * OBEN, auf abgesetztem Grund: Winkel, Nummer, Name, auffrischen, * oeffnen - die Kennung und alles, was man mit dem Artikel TUT. * * DARUNTER ein einziges Feldraster. Vorher standen dort drei Bauarten * nebeneinander: eine Textzeile mit Mittelpunkten, Preise mit winzigen * Unterschriften und vier gerahmte Kacheln. Nichts stand untereinander, * jede Karte sah anders aus. Jetzt ist jedes Feld gleich gebaut - Wert * oben, Beschriftung darunter - und die Felder stehen in einem Raster, * das ueber alle Karten hinweg dieselben Spalten hat. */ /* Seit D255 ein gewoehnlicher Kasten, kein mehr - list-style und der Webkit-Marker sind damit gegenstandslos. */ .a-kopf{display:flex;flex-direction:column;cursor:pointer;padding:0} /* Die Kopfzeile. Abgesetzter Grund und eine Linie darunter - sie ist der Kopf der Kachel, nicht ihre erste Zeile. */ .a-haupt-zeile{display:flex;align-items:center;gap:.6rem; padding:.5rem .85rem;background:var(--kopf); border-bottom:1px solid var(--rand-stark);border-radius:9px 9px 0 0} /* Warnung und Fehler faerben den Kopf. Die beiden Toene sind dieselben, aus denen die Pillen ihre Flaeche nehmen - hell genug, dass die weissen Knoepfe darauf stehen bleiben, und deutlich genug, dass man sie in einer Liste von fuenfzig Kacheln findet. */ .a-karte.p-warnung .a-haupt-zeile{background:var(--warn-bg)} .a-karte.p-fehler .a-haupt-zeile{background:var(--schlecht-bg)} /* Kein Grundwechsel beim Ueberfahren: die Kachel ist kein Knopf mehr, sondern traegt ihre Knoepfe. Wer etwas anfassen kann, sieht es an diesen - der ganze Streifen muss nicht mitleuchten. */ .a-haupt-zeile .a-nr-gruppe{margin-right:0;flex:none;align-items:center} .a-haupt-zeile .a-nr{display:inline-flex;align-items:center;gap:.4rem; height:2.1rem;padding:0 .7rem;font-size:1rem;border-radius:8px; background:var(--flaeche)} /* Feste Breite fuer die Nummer, sonst ruckelt die Liste. Artikelnummern haben drei bis fuenf Stellen (490 / 8.279 / 12.280). tabular-nums macht die Ziffern schon gleich breit, aber nicht die Anzahl - also faengt bei jeder zweiten Zeile der Name woanders an, und in der Listenansicht mit dicht stehenden Zeilen sieht man das als Zittern in der Senkrechten. 5ch reicht: die Einheit ch ist die Breite der Null, und mit tabular-nums ist jede Ziffer so breit wie die Null. Rechtsbuendig, damit der Abstand zum Kopiersymbol dahinter immer derselbe ist - linksbuendig risse eine dreistellige Nummer eine Luecke davor auf. */ .a-haupt-zeile .a-nr [data-kopieren-text]{min-width:5ch;text-align:right} /* Der Name nimmt, was uebrig ist, und wird abgeschnitten statt umzubrechen - sonst waere jede Kachel anders hoch. Ganz steht er im title. */ .a-name{flex:1 1 auto;min-width:0;font-weight:600;font-size:1rem; line-height:1.3;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} .a-haupt-zeile .knopf-frisch.nur-zeichen{flex:none;width:2.1rem; min-width:2.1rem;height:2.1rem;background:var(--flaeche)} .a-haupt-zeile .knopf-frisch.nur-zeichen::before{font-size:1rem} .a-haupt-zeile .a-oeffnen{height:2.1rem;padding:0 .8rem 0 .6rem; font-size:.82rem} .a-haupt-zeile .a-oeffnen svg{width:15px;height:15px} /* Der Rumpf: drei Feldreihen und darunter die Befunde. */ .a-rumpf{display:flex;flex-direction:column;gap:.55rem; padding:.7rem .85rem} /* Ansichtstyp Liste: die drei Wertereihen weg. Die Werte bleiben im Dokument - verborgen, nicht entfernt -, deshalb kostet der Wechsel keinen Seitenaufruf. */ html.ansicht-liste .a-rumpf{display:none} /* Ohne Rumpf ist die Kopfzeile die ganze Kachel. Ihre Linie darunter trennt dann nichts mehr ab und wird zum Strich unter dem Nichts. */ html.ansicht-liste .a-haupt-zeile{border-bottom:0} /* --------------------------------------------------------------------- Die Listenansicht traegt den Zustand ANDERS als die kompakte. Kompakt faerbt den ganzen Kopf blass ein - bei einer Kachel mit drei Wertereihen darunter ist das eine ruhige Flaeche. In der Liste stehen die Koepfe dicht untereinander, und lauter blass getoente Streifen ergeben ein Muster statt einer Aussage. Deshalb hier: EIN Grund fuer alle, und der Zustand als BALKEN links - in der kraeftigen Farbe, nicht in der blassen. Ein satter Strich neben einer ruhigen Flaeche liest sich ueber zwanzig Zeilen hinweg; zwanzig getoente Flaechen tun es nicht. Kein Radius: ohne die Wertereihen ist die Kachel eine Zeile, und eine Zeile hat keine runden Ecken. "In Ordnung" bekommt hier - anders als bei den Pillen - einen gruenen Balken. Bei den Pillen bliebe das Normale absichtlich farblos, weil eine leuchtende Pille neben zehn anderen Elementen um Aufmerksamkeit rangelt. Der Balken steht nicht IN der Zeile, sondern AN ihr: sechs Pixel am Rand, alle in einer Flucht. Da entsteht kein Wettbewerb um den Blick, sondern eine durchgehende Spalte, die man von oben nach unten abfahren kann - und in der eine Unterbrechung sofort auffaellt. Genau dafuer muss auch der Normalfall gefaerbt sein: eine Luecke sieht man nur, wenn ringsum etwas ist. --------------------------------------------------------------------- */ html.ansicht-liste .a-karte{border-radius:0; border-left:6px solid transparent} html.ansicht-liste .a-haupt-zeile{border-radius:0;background:var(--kopf)} html.ansicht-liste .a-karte.p-warnung .a-haupt-zeile, html.ansicht-liste .a-karte.p-fehler .a-haupt-zeile{background:var(--kopf)} html.ansicht-liste .a-karte.p-ok {border-left-color:var(--gut)} html.ansicht-liste .a-karte.p-warnung{border-left-color:var(--warn)} html.ansicht-liste .a-karte.p-fehler {border-left-color:var(--schlecht)} /* Die Kopfzeile der Liste: links die Anzahl, rechts der Ansichtstyp. Der Absatz traegt seinen eigenen Aussenabstand - in einer flex-Zeile schoebe er den Knopf dagegen aus der Mitte. */ .a-listenkopf{display:flex;align-items:center;justify-content:space-between; gap:1rem;flex-wrap:wrap;margin:0 0 1rem} .a-listenkopf p{margin:0;min-width:0} /* Blaettern und Ansichtsschalter stehen als EINE Gruppe rechts. Beides sind Einstellungen der Anzeige; zwischen ihnen ein kleinerer Abstand als zum Zaehlsatz links, damit sie als Paar gelesen werden und nicht als zwei einzelne Knoepfe. */ /* align-items:stretch und nicht center: die drei Bedienteile der Zeile - Befundpille, Seitenwechsler, Ansichtsschalter - sollen GLEICH HOCH sein, und zwar ohne dass irgendwo eine Zahl steht. Jedes hat seine eigene Polsterung und seine eigene Schriftgroesse; bei center faellt der Unterschied nicht als Stufe auf, aber drei verschieden hohe Kaesten nebeneinander wirken zusammengewuerfelt. Gestreckt richtet sich die Reihe nach dem hoechsten. */ .a-werkzeuge{display:flex;align-items:stretch;gap:.5rem;flex:none} /* --------------------------------------------------------------------- Die Befundpille UEBER DER LISTE ist ein Bedienteil, keine Anzeige. Ihre beiden Kammern sind Verweise: ein Klick filtert auf die Stufe, ein zweiter hebt den Filter auf. Also traegt sie hier dieselbe Fassung wie der Ansichtsschalter und der Seitenwechsler daneben - 8px Rundung statt der runden Kapsel, und keine eigene Hoehe, sondern die der Reihe. AUF DER ARTIKELKARTE bleibt sie rund und fest breit (6,8rem). Dort ist sie eine Anzeige, keine Bedienung, und eine Anzeige, die je nach Zahl ihre Breite wechselt, macht die Liste unruhig - genau deshalb steht die feste Breite ueberhaupt dort. --------------------------------------------------------------------- */ .a-werkzeuge .a-meldungen{width:auto;height:auto;border-radius:8px} .a-werkzeuge .a-mld{padding:.3rem .6rem} /* Die Pfeile tragen dieselbe Fassung wie der Ansichtsschalter - gleicher Rand, gleiche Rundung, gleiche Hoehe -, nur quadratisch statt mit Wort. Sie sitzen in einer gemeinsamen Huelle mit einer geteilten Trennlinie in der Mitte, damit aus zwei Kaestchen ein Bedienteil wird. */ .a-blaettern-klein{display:inline-flex;align-items:stretch;flex:none; border:1px solid var(--rand);border-radius:8px;overflow:hidden; background:var(--flaeche)} /* Eigener Name statt des naheliegenden "leer": den gibt es im Blatt schon global fuer die Leerzustands-Kaesten ("Kein Artikel gefunden"), mit padding:2rem, eigenem Rahmen und Rundung. Als .leer bekam der abgeblendete Pfeil davon Rahmen und Rundung ab - mitten in der gemeinsamen Huelle. Dasselbe hatte die leere Pillenkammer auseinandergesprengt. */ .a-blaettern-klein a, .a-blaettern-klein .a-blaettern-aus{display:inline-flex;align-items:center; justify-content:center;width:1.9rem;padding:.3rem 0;color:var(--leise); text-decoration:none;transition:color .12s ease,background .12s ease} /* Trennlinie zwischen allem, was in der Huelle nebeneinander steht - die verborgenen Filterfelder des Formulars zaehlen nicht mit, die haben keine Flaeche. */ .a-blaettern-klein > :not([type=hidden]) + :not([type=hidden]){ border-left:1px solid var(--rand)} /* Das Seitenfeld zwischen den Pfeilen. Es sitzt IN der Huelle, traegt also keinen eigenen Rand und keine eigene Rundung - sonst waeren es wieder drei Kaestchen statt eines Bedienteils. 3.4rem fassen vier Ziffern; tabular-nums haelt sie ruhig, waehrend man tippt. Die Pfeilchen des Zahlenfeldes sind weg: sie machen das Feld unruhig und verdoppeln nur, was die Pfeile daneben schon tun. Angetippt wird der Inhalt ausgewaehlt (siehe Skript), damit die neue Zahl die alte ersetzt, statt sich daran zu haengen. */ .a-seitenfeld{width:3.4rem;border:0;background:transparent;color:var(--text); font:inherit;font-size:.82rem;font-weight:600;text-align:center; font-variant-numeric:tabular-nums;padding:.3rem .2rem; -moz-appearance:textfield;appearance:textfield} .a-seitenfeld::-webkit-outer-spin-button, .a-seitenfeld::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .a-seitenfeld:focus{outline:2px solid var(--akzent);outline-offset:-2px} /* Der Seitenstand links davon. Nur Text, kein Ziel - er sagt, worin man sich bewegt, und ueberlaesst das Bewegen dem Bedienteil daneben. */ /* In einer gestreckten Reihe (.a-werkzeuge) wird auch dieses span zum Flex-Element und waechst auf die volle Hoehe - der Text saesse dann oben statt in der Mitte. Also mittet es selbst. */ .a-seitenstand{display:flex;align-items:center;flex:none;white-space:nowrap} .a-blaettern-klein svg{width:1rem;height:1rem;fill:none; stroke:currentColor;stroke-width:1.7;stroke-linecap:round; stroke-linejoin:round} .a-blaettern-klein a:hover{color:var(--akzent);background:var(--kopf)} .a-blaettern-klein a:focus-visible{outline:2px solid var(--akzent); outline-offset:-2px} /* Am Anfang und am Ende der Liste bleibt der Pfeil stehen, statt zu verschwinden - sonst rutschte der Ansichtsschalter beim Blaettern hin und her. Er wird nur blass und ist kein Ziel mehr. */ .a-blaettern-klein .a-blaettern-aus{opacity:.3} @media (prefers-reduced-motion:reduce){ .a-blaettern-klein a{transition:none}} /* Der Ansichtsschalter. Eine LAYOUTEINSTELLUNG, kein Filter - leise, aber ordentlich gesetzt: Zeichen und Wort, in derselben Fassung wie die uebrigen zurueckhaltenden Knoepfe des Dashboards. */ /* Der Weg nach oben traegt DIESELBE Fassung wie der Ansichtsschalter, weil er an derselben Stelle steht - unten dort, wo oben "Kompakt" sitzt. Geteilt und nicht abgeschrieben: eine zweite Fassung mit denselben Werten waere beim naechsten Feinschliff nur noch fast dieselbe. */ .ansicht-knopf,.nach-oben{display:inline-flex;align-items:center;gap:.4rem;flex:none; padding:.3rem .7rem;border:1px solid var(--rand);border-radius:8px; background:var(--flaeche);color:var(--leise);font:inherit; font-size:.82rem;font-weight:550;cursor:pointer;white-space:nowrap; transition:color .12s ease,border-color .12s ease} .ansicht-knopf .ansicht-zeichen{display:inline-flex;align-items:center; gap:.4rem} /* UND DIE AUSNAHME GLEICH DANEBEN. Die geteilte Regel [hidden] am Ende des Blattes ist EIN Attribut (0-1-0), die Zeile darueber sind ZWEI Klassen (0-2-0) - die hoehere Spezifitaet gewinnt, egal in welcher Reihenfolge sie stehen. Ohne diese Zeile blieb das hidden wirkungslos und BEIDE Fassungen standen nebeneinander im Knopf. Es ist derselbe Fehler wie bei .k-sym und .eh-feld, nur eine Stufe fieser: dort half die Reihenfolge, hier nicht. Wer einer Klasse ein display gibt, schreibt die Ausnahme dazu. */ .ansicht-knopf .ansicht-zeichen[hidden]{display:none} .ansicht-knopf svg,.nach-oben svg{width:1rem;height:1rem;flex:none;fill:none; stroke:currentColor;stroke-width:1.6;stroke-linecap:round; stroke-linejoin:round} .ansicht-knopf:hover,.nach-oben:hover{color:var(--text); border-color:var(--akzent)} /* Es ist ein Verweis, kein Knopf - der Unterstrich muss weg. */ .nach-oben{text-decoration:none} .ansicht-knopf:focus-visible,.nach-oben:focus-visible{outline:2px solid var(--akzent); outline-offset:1px} @media (prefers-reduced-motion:reduce){ .ansicht-knopf,.nach-oben{transition:none}} /* Links der Titel der Reihe, rechts ihre Felder. "8,75 €" allein sagt nicht, ob es der Einkauf oder der Verkauf ist; "4 / 12" nicht, ob es ein Lager oder eine Zaehlung ist. Der Titel nimmt die Zuordnung ab. */ .a-reihe{display:flex;gap:.9rem;align-items:center;flex-wrap:wrap} .a-reihe-titel{flex:none;width:4.2rem;color:var(--leise);font-size:.66rem; font-style:normal;font-weight:600;text-transform:uppercase; letter-spacing:.04em} .a-felder{flex:1 1 16rem;min-width:0;display:grid;gap:.4rem 1.2rem; grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr))} /* Zwei Reihen ohne Trennung liefen ineinander; eine Linie waere zu viel fuer drei Reihen. Ein kleiner Abstand und die gemeinsame Rasterbreite genuegen - die Spalten stehen ohnehin untereinander. */ .a-reihe + .a-reihe{padding-top:.45rem;border-top:1px dashed var(--rand)} .a-feld{min-width:0} .a-feld b{display:block;font-size:.95rem;font-weight:650;line-height:1.25; font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden; text-overflow:ellipsis} /* Die zweite Zahl eines Paars ("5 / 9") tritt zurueck: massgeblich ist die erste, die zweite sagt nur, wovon. */ .a-feld b i{font-style:normal;font-weight:550;color:var(--leise)} .a-feld em{display:block;color:var(--leise);font-size:.66rem; font-style:normal;text-transform:uppercase;letter-spacing:.04em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; margin-top:.05rem} /* Farbe nur an der Zahl, nicht an der Flaeche - dieselbe Zurueckhaltung wie ueberall auf dieser Seite. */ .f-shop b{color:var(--gut)} .f-hs b{color:var(--akzent)} .f-fremd b{color:var(--warn)} .f-aus b{color:var(--leise)} .a-rabatt b{color:var(--schlecht)} /* Der Fuss: der Weg hinein, und daneben die Befunde. Derselbe Grund wie der Kopf - die Kachel liest sich damit als Kopf, Rumpf, Fuss. */ /* Die Meldungen des Pruefstands im Kopf, rechts vor den Knoepfen und in derselben Hoehe wie sie. Eine eigene Fusszeile gab es dafuer einmal; sie war eine ganze Reihe fuer zwei Zahlen. EIN Gehaeuse mit zwei Kammern: links Fehler, rechts Warnungen. Vorher waren es zwei einzelne Pillen mit ausgeschriebenem Wort - die waren je nach Befund da oder nicht und je nach Zahl verschieden breit ("1 Warnung" gegen "12 Warnungen"). Weil sie LINKS von den Knoepfen stehen, verschob jede Breitenaenderung die ganze rechte Haelfte der Zeile, und ueber fuenfzig Kacheln hinweg stand nichts untereinander. Die Breite ist hier nicht geschaetzt, sondern erzwungen: das Gehaeuse hat eine feste Breite, die Kammern teilen sie mit flex:1 1 0 in zwei exakt gleiche Haelften. Was drinsteht, aendert daran nichts - eine einstellige Zahl, eine zweistellige und ein Strich sind gleich breit. Ein min-width mit geschaetztem Wert waere je nach Schriftwiedergabe knapp danebengegangen. Hoechstens 19 Fehler- und 7 Warnregeln gibt es, die Zahl bleibt also immer ein- oder zweistellig. 6.8rem fassen beides bequem. */ .a-meldungen{display:inline-flex;align-items:stretch;flex:none; width:6.8rem;height:2.1rem;border:1px solid var(--rand); border-radius:99px;overflow:hidden;background:var(--flaeche)} /* Der Rand des Gehaeuses bleibt neutral. Faerbte er sich nach dem schlimmsten Befund, saehe eine Karte mit einem Fehler und zwoelf Warnungen aus wie eine reine Fehlerkarte - die Farbe gehoert in die Kammern, nicht um sie herum. */ .a-mld{display:inline-flex;align-items:center;justify-content:center; gap:.28rem;flex:1 1 0;min-width:0;font-size:.8rem;font-weight:700; font-variant-numeric:tabular-nums} /* Das traegt die Zahl - und der Browser setzt es von sich aus auf "bolder", also EINE Stufe ueber dem, was die Kammer vorgibt. In der gefuellten Kammer (700) wurden daraus 900, in der leeren (500) nur 700: dieselbe Pille mit zwei verschiedenen Strichstaerken. Genau die Falle, die bei .a-auf b schon einmal zugeschnappt ist. */ .a-mld b{font-weight:inherit} .a-mld + .a-mld{border-left:1px solid var(--rand)} .a-mld svg{width:1rem;height:1rem;flex:none;fill:none;stroke:currentColor; stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} /* Kreis fuer den Fehler, Dreieck fuer die Warnung - verschiedene FORMEN, nicht nur verschiedene Farben. Das bleibt lesbar, wenn jemand Rot und Orange nicht auseinanderhaelt, und der Platz sagt es zusaetzlich: Fehler stehen immer links. */ .a-mld-fehler{color:var(--schlecht)} .a-mld-warn{color:var(--warn)} /* Die leere Kammer: nur ein Strich, blass, und OHNE Zeichen. "Hier ist nichts" ist etwas anderes als "hier ist eine Null", und ein blasses Zeichen daneben laese sich wie ein dritter Zustand. Sie heisst a-mld-leer und NICHT einfach leer: .leer ist im Blatt global vergeben (Leerzustands-Kasten, padding:2rem, eigener Rahmen, 10px Rundung). Meine .a-mld.leer war zwar spezifischer und gewann bei Farbe und Staerke - aber Polsterung und Rahmen hatte ich gar nicht gesetzt, also kamen sie durch und sprengten die Pille auseinander. */ .a-mld-leer{color:var(--leise);font-weight:500} /* Aufklappen: derselbe Knopf wie "Artikel oeffnen" daneben, nur mit dem Winkel statt dem Pfeil. Ein span und kein button - er steckt im summary, und ein Knopf darin schluckte den Klick, der aufklappt. */ .a-auf{display:inline-flex;align-items:center;gap:.4rem;flex:none; height:2.1rem;padding:0 .75rem 0 .6rem;border-radius:8px; border:1px solid var(--rand);background:var(--flaeche); color:var(--leise);font-size:.82rem;font-weight:500;white-space:nowrap} /* Das darin traegt den Text - der Browser setzt es von sich aus fett, und font-weight am Umschlag half nichts. */ .a-auf b{font-weight:inherit} .a-auf svg{width:.95rem;height:.95rem;flex:none;fill:none; stroke:currentColor;stroke-width:2;stroke-linecap:round; stroke-linejoin:round;transition:transform .15s ease} /* Der Winkel zeigt, WOHIN es geht, nicht wo man ist: zu heisst nach unten (dort kommt der Inhalt hervor), offen heisst nach oben (dorthin verschwindet er wieder). Vorher zeigte er im geschlossenen Zustand nach rechts und drehte sich beim Aufklappen nach unten - das las sich wie ein Zustand statt wie eine Einladung. Beim Ueberfahren rueckt er in die Richtung, in die er zeigt. Das translateY steht HINTER der Drehung, wird also mitgedreht: im offenen Zustand bewegt dasselbe +1px das Zeichen nach oben. */ .a-auf:hover svg{transform:translateY(1px)} .a-karte.a-offen .a-auf svg{transform:rotate(180deg)} .a-karte.a-offen .a-auf:hover svg{transform:rotate(180deg) translateY(1px)} .a-auf:hover{border-color:var(--akzent);color:var(--akzent)} @media (prefers-reduced-motion:reduce){.a-auf svg{transition:none}} /* Die Beschriftung wechselt NICHT mehr mit dem Zustand ("5 Varianten anzeigen" / "Varianten verbergen"). Sie bleibt stehen, den Zustand traegt der Winkel. Das spart nicht nur Text: die beiden Fassungen waren verschieden breit, also sprang der Knopf beim Aufklappen - und mit ihm alles rechts davon. */ /* Weisser Grund, nicht durchsichtig: die Chips stehen im Fuss auf getoentem Untergrund, und ohne eigenen Grund verschwammen sie darin. */ .a-chip{background:var(--flaeche);border:1px solid var(--rand); border-radius:99px;padding:.05rem .5rem;font-size:.75rem; color:var(--leise);white-space:nowrap} /* Der eine Weg von der Karte weiter. Kein Chip mehr unter Chips: die sagen etwas ueber den Artikel aus, dieser hier tut etwas. */ /* Der eine Weg von der Karte weiter. Umrissen statt gefuellt: ein gefuellter Knopf zwischen lauter blassen Pillen zieht mehr Aufmerksamkeit auf sich, als der Vorgang verdient. */ /* Dieselbe Form wie der Nummernknopf und der Aufklappknopf: 8px, kein Kreisbogen. Drei Bedienelemente in einer Zeile sollen nicht drei verschiedene Formen haben. */ .a-oeffnen{display:inline-flex;align-items:center;gap:.3rem; flex:none;padding:.2rem .6rem .2rem .45rem;border-radius:8px; border:1px solid var(--rand);background:var(--flaeche); color:var(--leise);font-size:.75rem;font-weight:600; text-decoration:none;white-space:nowrap} .a-oeffnen svg{width:14px;height:14px;flex:none;fill:none; stroke:currentColor;stroke-width:1.6;stroke-linecap:round; stroke-linejoin:round;transition:transform .15s ease} .a-oeffnen:hover{border-color:var(--akzent);color:var(--akzent); background:var(--bg)} .a-oeffnen:hover svg{transform:translateX(2px)} @media (prefers-reduced-motion:reduce){.a-oeffnen svg{transition:none}} /* Rechte Spalte der Artikelkarte: oben die beiden Preise gross, darunter drei Kacheln mit der ANZAHL der Varianten je Lagerlage - nicht mit Stueckzahlen. "5/9" heisst: fuenf von neun aktiven Varianten haben dort Bestand. Steht nur eine Zahl, sind es alle. */ /* Artikelnummer als Nummernschild vor dem Namen: sie ist der Schluessel zum Nachschlagen in plentyONE und muss auf den ersten Blick zu finden sein, nicht klein und grau am Kartenrand. */ .a-nr{display:inline-block;margin-right:.5rem;padding:.05rem .4rem; background:var(--bg);border:1px solid var(--rand);border-radius:6px; font-size:.85em;font-weight:600;color:var(--leise); font-variant-numeric:tabular-nums;vertical-align:.05em} button.a-nr{cursor:pointer;font-family:inherit;line-height:1.4} button.a-nr:hover{border-color:var(--akzent);color:var(--akzent)} button.a-nr.kopiert{border-color:var(--gut);color:var(--gut); background:var(--gut-bg)} .a-nr-gruppe{display:inline-flex;align-items:center;gap:.25rem; margin-right:.5rem} .a-nr-gruppe .a-nr{margin-right:0} .a-nr-ext{color:var(--akzent);text-decoration:none;font-size:.9em} /* KEINE Polsterung: darin steht nur die Variantentabelle, und die bringt ihre eigene mit. Der Rahmen ringsum kam vom Abstand, nicht vom Inhalt - die Tabelle stand wie ein Bild in einem Passepartout, obwohl sie der ganze Zweck des aufgeklappten Bereichs ist. */ .a-inhalt{border-top:1px solid var(--rand);padding:0} /* Der Ladehinweis braucht die Polsterung, die die Tabelle nicht will. */ .a-inhalt > p{margin:0;padding:.6rem .8rem} /* Und die Tabelle keinen eigenen Rahmen: die Kachel hat schon einen, und zwei Linien im Abstand von null Pixeln sind eine doppelte Linie. Auf der Artikelseite steht dieselbe Tabelle frei und behaelt ihren. */ .a-inhalt table{border:0;border-radius:0} /* Pruefliste auf der Einzelseite: je Regel eine Zeile mit Zustand und, fuer Verwaltende, dem Knopf zum Stilllegen. */ .pruefliste{display:flex;flex-direction:column;gap:.4rem; margin-bottom:1.5rem} .pruefzeile{display:flex;justify-content:space-between;gap:1rem; align-items:center;flex-wrap:wrap;background:var(--flaeche); border:1px solid var(--rand);border-radius:10px;padding:.55rem .8rem} .pruefzeile.p-trifft{border-color:var(--warn)} .pruef-text{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap; font-size:.92rem} .pruef-grund{font-size:.82rem} .pruef-form{display:flex;gap:.4rem;align-items:center} .pruef-form input[type=text]{padding:.3rem .5rem;border-radius:7px; border:1px solid var(--rand);background:var(--bg);color:var(--text); font:inherit;font-size:.85rem;width:14rem} /* Artikelseite: Inhalt links, Pruefstand dauerhaft rechts. Was an einem Artikel falsch ist, soll man sehen, WAEHREND man ihn bearbeitet - nicht erst, wenn man in einem Reiter danach sucht. */ /* Bildschirmhoch statt seitenlang. * * Nur die beiden Artikelseiten - sie sind die einzigen mit zwei Spalten, * und zwei Spalten, die gemeinsam am Fenster haengen, scrollen als eine. * Das Fenster scrollt deshalb gar nicht mehr; jede Spalte hat ihren * eigenen Balken an ihrem eigenen Kasten. * * :has() erkennt den Fall, ohne dass die Ansicht eine Klasse mitschicken * muesste. Kennt ein Browser es nicht, bleibt alles beim Alten: die Seite * scrollt wie bisher am Stueck. Das ist ein Rueckschritt, kein Bruch. * * 100dvh und nicht 100vh: auf Mobilgeraeten waechst und schrumpft die * Adresszeile, und vh rechnet mit dem groesseren Zustand - der Fuss laege * dann dauerhaft unter dem Bildschirmrand. */ html:has(.a-spalten){height:100%} body:has(.a-spalten){height:100dvh;overflow:hidden; display:flex;flex-direction:column} body:has(.a-spalten) .kopfleiste{position:static;flex:none} /* margin:0 auto muss hier WEG. * * main traegt es fuer alle anderen Seiten, und dort ist es richtig. Auf * den Artikelseiten ist body aber eine Flex-Saeule, und in einem * Flex-Behaelter schlaegt ein automatischer Seitenrand das Strecken: * das Element nimmt dann nur die Breite, die sein Inhalt braucht, und * steht mittig. Auf einem gewoehnlichen Schirm faellt das nicht auf - * die Variantentabelle ist breiter als das Fenster. Auf einem 32-Zoll- * Schirm ist sie es nicht mehr, und links und rechts blieb je eine leere * Spalte stehen. Sie sah aus wie eine Hoechstbreite, war aber keine. */ main:has(.a-spalten){flex:1 1 auto;min-height:0;padding:0;margin:0; width:100%;display:flex;flex-direction:column} /* grid-template-rows:minmax(0,1fr) ist hier nicht Zierde: ohne die Angabe ist die Zeile automatisch hoch und waechst mit ihrem Inhalt. Dann wird das Rollfeld nie kuerzer als das, was drinsteht, es rollt nirgends, und der Rumpf (overflow:hidden) schneidet den Rest einfach ab. */ .a-spalten{display:grid;grid-template-columns:minmax(0,1fr) 25rem; grid-template-rows:minmax(0,1fr); gap:0;align-items:stretch;flex:1 1 auto;min-height:0} /* Die Leiste der Artikelseite: im Kopf der linken Spalte, rollt nie mit. Drei Zonen; die aeusseren beiden gleich breit (1fr), damit die Mitte wirklich in der Mitte steht und nicht dort, wo der linke Teil endet. */ .subnav{flex:none;background:var(--flaeche); border-bottom:1px solid var(--rand);padding:.5rem 1.4rem} /* align-items:stretch, damit die beiden Knoepfe die volle Zeilenhoehe bekommen. Wie hoch die ist, bestimmt der mittlere Block aus Kennung und Zeitstempel - eine Zahl steht hier nirgends. */ .subnav-zeile{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,auto) minmax(0,1fr); align-items:stretch;gap:1rem} .subnav-links{display:flex;align-items:stretch;gap:.6rem;min-width:0} .subnav-rechts{display:flex;align-items:stretch;justify-content:flex-end; gap:.5rem} .subnav-rechts form{margin:0;display:flex} .subnav-mitte{display:flex;flex-direction:column;align-items:center; justify-content:center;gap:.05rem;min-width:0;max-width:100%} /* --------------------------------------------------------------------- Die Leiste der Artikeluebersicht: ZWEI Zonen statt drei. Links der Name in seiner alten Groesse (1,35rem - er war vorher eine gewoehnliche Ueberschrift im Rollfeld), ab der Mitte die Suchzeile. Zwei gleiche Spalten, damit "ab der Mitte" auch bei kurzem Namen gilt; minmax(0,1fr) laesst beide unter ihren Inhalt schrumpfen, sonst koennte das Suchfeld die Leiste aufblaehen. --------------------------------------------------------------------- */ .subnav-liste{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .subnav-titel{font-size:1.35rem;font-weight:600;margin:0;align-self:center; min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* In der Leiste traegt die Suchzeile keinen eigenen Abstand mehr - den gibt die Leiste. Und sie bricht NICHT um: eine zweite Zeile machte die Leiste hoeher, und eine Leiste, die je nach Fensterbreite eine andere Hoehe hat, verschiebt alles darunter. Stattdessen gibt das Suchfeld nach - es ist das einzige Teil, das schrumpfen kann, ohne unlesbar zu werden. */ .subnav-liste .filter-form{margin:0;flex-wrap:nowrap;justify-content:flex-end} .subnav-liste .filter-form input[type=search]{flex:1 1 8rem;min-width:5rem} /* Das Suchfeld mit Lupe am rechten Rand (20.09.2026) - loest den Knopf "Suchen" ab. Das Feld bekommt rechts Platz fuer die Lupe; die Lupe liegt darueber, ohne eigenen Rand. */ .suchfeld{position:relative;flex:1 1 8rem;min-width:5rem;display:flex} .suchfeld input[type=search]{flex:1 1 auto;min-width:0;padding-right:2.7rem;width:100%} /* Die Lupe als abgegrenztes Feld AM RANDE des Suchfeldes: volle Hoehe, buendig mit dem Rand, links eine Trennlinie, rechts die Rundung des Feldes (20.09.2026: "abgegrenzt und vollflaechig, ohne Rand"). */ .suchfeld-lupe{position:absolute;right:1px;top:1px;bottom:1px;width:2.4rem; display:inline-flex;align-items:center;justify-content:center;border:0;border-left:1px solid var(--rand); border-radius:0 7px 7px 0;background:transparent;color:var(--text);cursor:pointer;padding:0} .suchfeld-lupe svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round} .suchfeld-lupe:hover{color:var(--akzent)} /* GRAU hinterlegt, nicht weiss. Die Leiste ist selbst weiss (--flaeche). Ein weisses Feld auf weissem Grund haengt nur an seinem hauchduennen Rand - im Rollfeld war das richtig, dort ist der Grund grau. Hier fuellt dieselbe Farbe, die in der Leiste der Artikelseite die Artikelnummer traegt (--bg): das Bedienteil hebt sich ab, ohne dass ein zweiter Rand noetig waere. Die Marke mit der Zahl bleibt weiss - sie sitzt IM Knopf und soll sich von ihm abheben, nicht mit ihm verschmelzen. */ .subnav-liste .filter-form input[type=search], .subnav-liste .filter-form .hf-auf, .subnav-liste .filter-form .filter-suchen, .subnav-liste .filter-form .zuruecksetzen{background:var(--bg)} /* Die Mitte traegt jetzt den NAMEN, nicht mehr die Kennung - und ist damit die Ueberschrift der Seite. Deshalb ein h1, aber in der Groesse der Leiste: die Schriftgroesse von h1 (1,35rem) waere hier zu laut. Namen werden lang. overflow/ellipsis schneidet ab, der volle Name steht im title. Damit das Abschneiden ueberhaupt greifen kann, muss die mittlere Spalte unter ihren Inhalt schrumpfen duerfen - daher minmax(0,auto) statt auto im Raster. */ h1.subnav-kennung{font-size:1rem;font-weight:600;margin:0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .subnav-stand{font-size:.78rem;color:var(--leise);line-height:1.3; white-space:nowrap} /* Beide Knoepfe: so hoch wie die Zeile, und durch aspect-ratio genau so breit - ein Kreis, ohne dass irgendwo eine Hoehe steht. */ .subnav-zurueck, .subnav .knopf-frisch.nur-zeichen{align-self:stretch;width:auto;height:auto; min-width:0;aspect-ratio:1;flex:none} .subnav-zurueck{display:flex;align-items:center;justify-content:center; border:1px solid var(--rand);border-radius:99px;background:var(--flaeche); color:var(--leise);text-decoration:none} .subnav-zurueck:hover{border-color:var(--akzent);color:var(--akzent)} .subnav-zurueck svg{width:1rem;height:1rem;fill:none;stroke:currentColor; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} /* Die Nummer ist der Schluessel zum Nachschlagen - hier darf sie gross sein. Das Blattzeichen daneben sagt, dass ein Klick sie kopiert; ohne es muss man es wissen oder raten. Auch dieser Knopf streckt sich ueber die volle Zeilenhoehe, wie die runden links und rechts. Damit stehen alle drei auf einer Grundlinie UND auf einer Deckellinie - drei verschieden hohe Knoepfe nebeneinander sahen unruhig aus. Die Schrift waechst mit: in einem 2,5rem hohen Feld wirkte 1,02rem verloren. */ .subnav .a-nr-gruppe{align-self:stretch;align-items:stretch;margin-right:0} .subnav .a-nr{align-self:stretch;display:inline-flex;align-items:center; gap:.45rem;font-size:1.1rem;padding:0 .75rem;line-height:1.2; border-radius:8px} .subnav .a-nr-ext{align-self:center} .a-nr-kopie{width:.9em;height:.9em;flex:none;fill:none; stroke:currentColor;stroke-width:1.3;stroke-linecap:round; stroke-linejoin:round;opacity:.6} button.a-nr:hover .a-nr-kopie{opacity:1} /* Die linke Spalte ist selbst zweigeteilt: die Leiste oben bleibt stehen, darunter rollt das Feld. Deshalb NICHT die Spalte scrollen lassen und die Leiste darin kleben - dann muesste die Reiterleiste wissen, wie hoch die Leiste ist, und das ist eine geratene Zahl. So klebt sie einfach am Kopf ihres Rollfelds. */ /* overflow:visible, nicht hidden: das Klappfeld des Umfangs haengt unter der Unterleiste und ragt damit aus der Spalte heraus. * * min-height:0 gehoert dann zwingend dazu. Die automatische Mindesthoehe * eines Raster- oder Flexkindes ist die Hoehe seines Inhalts - AUSSER * wenn overflow nicht sichtbar ist, dann ist sie null. Das hidden hat * das bisher nebenbei erledigt; mit visible wuchs die Spalte auf * Inhaltshoehe, das Rollfeld rollte nicht mehr, und weil der Rumpf * abschneidet, liess sich ueberhaupt nicht mehr scrollen. */ .a-haupt{min-width:0;min-height:0;display:flex;flex-direction:column; overflow:visible} /* scroll-behavior gehoert HIERHIN und nicht an html: gerollt wird das Rollfeld, das Fenster steht still (body ist overflow:hidden). Am html waere die Angabe wirkungslos. */ .a-rollfeld{scroll-behavior:smooth;flex:1 1 auto;min-height:0;overflow-y:auto; padding:0 1.5rem 1.5rem} /* Der Abstand nach oben als mitrollendes Vorsatzstueck statt als Polster des Rollbehaelters - siehe die Reiterleiste weiter unten. */ .a-rollfeld::before{content:"";display:block;height:1.5rem} /* --------------------------------------------------------------------- Der Anfang des Rollfelds auf der ARTIKELUEBERSICHT. Zwei Dinge stimmten dort nicht, und beide kamen daher, dass die Ueberschrift in die Leiste gewandert ist: 1. 1,5rem Vorsatz waren fuer eine Ueberschrift gedacht. Darueber steht jetzt eine schmale Kopfzeile ("21060 Artikel"), und der Abstand sah aus wie ein Loch, das zu nichts gehoert. 1rem reicht. 2. Der Sprungpunkt #a-oben liegt HINTER dem Vorsatzstueck - also hielt "nach oben" 1rem zu tief, und von Hand gerollt sah der Anfang anders aus als nach einem Klick. scroll-margin-top nimmt den Vorsatz mit in den Sprung: Klick und Rollen enden gleich. --------------------------------------------------------------------- */ .a-rollfeld-liste::before{height:1rem} #a-oben{scroll-margin-top:1rem} /* Rechts kein Kasten, sondern eine Flaeche: heller Grund, eine Linie als Grenze. Der Rahmen um den Rahmen war einer zu viel. */ .a-seite{overflow-y:auto;padding:1.25rem 1.4rem; background:var(--flaeche);border-left:1px solid var(--rand)} .a-seite .karte{background:none;border:0;border-radius:0;padding:0} .a-seite .karte + .karte{margin-top:1.4rem;padding-top:1.2rem; border-top:1px solid var(--rand)} .a-seite .karten{gap:0} /* Die Pruefzeilen ebenso: flach, durch Haarlinien getrennt. Die Farbe traegt ohnehin die Pille davor, nicht der Rahmen darum. */ .a-seite .pruefzeile{background:none;border:0;border-radius:0; border-bottom:1px solid var(--rand);padding:.55rem 0} .a-seite .pruefliste > .pruefzeile:last-child{border-bottom:0} /* ACHTUNG: dieser Block ist am 07.09.2026 schon einmal verschwunden. Ein Patch schnitt einen CSS-Bereich zwischen zwei Markierungen heraus, und diese Regeln lagen dazwischen - unbemerkt, weil eine fehlende Regel nichts kaputtmacht, sondern nur anders aussieht. Wer hier wieder blockweise ersetzt: vorher zaehlen, was zwischen den Markierungen liegt. */ .a-seite-titel{margin:0 0 .75rem;display:flex;align-items:center; gap:.55rem} /* Nebeneinander ist im Streifen kein Platz: Text oben, Knopf darunter. */ .a-seite .pruefliste{gap:.35rem;margin-bottom:0} .a-seite .pruefzeile{flex-direction:column;align-items:stretch;gap:.45rem} .a-seite .pruef-text{font-size:.86rem} .a-seite .pruef-form input[type=text]{width:100%} /* Die Karten der Uebersicht stehen auch im Streifen. Dort ist es enger: eine Spalte, die Regelzeile bricht um, die Zahl daneben bleibt ganz. */ .a-seite .karten{grid-template-columns:minmax(0,1fr)} .a-seite .zeile{gap:.6rem} .a-seite .zeile span:last-child{flex:none} .a-seite .ps-spalten{grid-template-columns:minmax(0,1fr);gap:1.2rem} /* Die Reiterleiste klebt jetzt am Kopf IHRER Spalte, nicht am Fenster. */ /* Die klebende Reiterleiste, ohne Spalt. * * Vorher trug sie ihren Abstand nach oben als margin. Ein Aussenabstand * wird nicht gemalt: das Kleben pinnt die Rahmenkante an den Kopf des * Rollfelds, und durch die halbe Zeile darueber sah man den Inhalt * durchlaufen - ein offenes Fenster. * * Derselbe Abstand als padding gehoert zum Element und wird vom * Hintergrund mitgetragen. Die negativen Seitenabstaende ziehen die * Leiste ueber das Polster des Rollfelds hinaus, damit auch links und * rechts nichts vorbeiscrollt; das gleiche padding schiebt die Reiter * wieder an ihren Platz. Netto steht alles, wo es stand. */ /* Reiter links, Marken rechts, eine gemeinsame klebende Zeile. Die Reiterleiste selbst ist eine tablist - ein Schalter gehoert nicht hinein, deshalb steht er daneben und nicht darin. */ .a-haupt .reiter-zeile{position:sticky;top:0;z-index:12; display:flex;align-items:flex-end;gap:1.5rem; margin:0 -1.5rem;padding:.55rem 1.5rem 0;background:var(--bg); border-bottom:1px solid var(--rand)} .a-haupt .reiter-zeile > .reiter{position:static;margin:0;padding:0; border-bottom:0;background:none;flex:1 1 auto;min-width:0} /* Der Umfang der Seite: ein Knopf in der Unterleiste, der ein Feld aufklappt. Er steht neben "jetzt holen" und ist so hoch wie die Zeile, wie alles dort. */ .umfang{position:relative;display:flex} /* Dieselbe Form wie der Nummernknopf am anderen Ende der Leiste: grauer Grund, 8px Radius. Zwei weiche Rechtecke links und rechts vom Namen, dazwischen nichts Rundes ausser dem Auffrischknopf am Rand - das haelt die Zeile ruhig. */ .umfang-knopf{list-style:none;cursor:pointer;display:inline-flex; align-items:center;gap:.45rem;padding:0 .8rem; border:1px solid var(--rand);border-radius:8px;background:var(--bg); color:var(--leise);font-size:.8rem;font-weight:600;white-space:nowrap} .umfang-knopf::-webkit-details-marker{display:none} /* Ein Winkel als SVG - dieselbe Strichstaerke wie der im Kategoriebaum, nur dorthin gedreht, wohin es beim Aufklappen geht. Dass der Baum ihn aus zwei Raendern baut und nicht aus einem SVG, hat einen Grund: er steht dort 796 mal und haette 95 KB gekostet. Hier steht er einmal. */ .umfang-winkel{width:.8rem;height:.8rem;flex:none;fill:none; stroke:currentColor;stroke-width:2;stroke-linecap:round; stroke-linejoin:round;transition:transform .15s ease} .umfang[open] .umfang-winkel{transform:rotate(180deg)} @media (prefers-reduced-motion:reduce){ .umfang-winkel{transition:none} } .umfang-knopf:hover,.umfang[open] .umfang-knopf{border-color:var(--akzent); color:var(--akzent)} .umfang-wort{max-width:12rem;overflow:hidden;text-overflow:ellipsis} /* Ist etwas eingeschraenkt, muss man es sehen, ohne zu lesen: sonst wundert man sich, warum eine Kategorie nur an drei Varianten landet. */ .umfang-knopf.umfang-eng{border-color:var(--akzent); background:var(--akzent-bg);color:var(--akzent)} /* Das Feld haengt an der linken Kante des Knopfes - er steht jetzt links in der Leiste, und ein rechtsbuendiges Feld waere unter dem Artikelnamen aufgegangen. */ .umfang-feld{position:absolute;left:0;top:calc(100% + .4rem);z-index:30; min-width:22rem;max-width:34rem;padding:.9rem 1rem; background:var(--flaeche);border:1px solid var(--rand); border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.16)} .umfang-hinweis{margin:0 0 .7rem;font-size:.78rem;color:var(--leise)} .umfang-attribut{margin:.9rem 0 .4rem;font-size:.75rem;font-weight:600; text-transform:uppercase;letter-spacing:.04em;color:var(--leise)} .umfang-reihe{display:flex;flex-wrap:wrap;gap:.4rem} .umfang-wahl{display:inline-flex;align-items:center;gap:.4rem; padding:.3rem .7rem;border:1px solid var(--rand);border-radius:99px; background:var(--bg);color:var(--text);font:inherit;font-size:.83rem; cursor:pointer;white-space:nowrap} .umfang-wahl:hover{border-color:var(--akzent);color:var(--akzent)} .umfang-wahl.umfang-an{border-color:var(--akzent);color:var(--akzent); background:var(--akzent-bg);font-weight:600} .umfang-wahl .reiter-zahl{font-size:.75rem} .marken{display:flex;align-items:center;gap:.6rem;flex:none; padding-bottom:.45rem} /* Die Marke ist ein Schalter: gesetzt wird sie fuer den Umfang, der oben eingestellt ist. Ihren eigenen Winkel hatte sie einmal - er ist weggefallen, als der Umfang zur Sache der Seite wurde. */ .marke-gruppe{position:relative;display:inline-flex;align-items:stretch} .marken form{margin:0;display:flex} .marke-knopf{display:inline-flex;align-items:center;gap:.35rem; padding:.3rem .8rem;border:1px solid var(--rand);border-radius:99px; background:var(--flaeche);color:var(--leise);font:inherit; font-size:.8rem;font-weight:600;cursor:pointer;white-space:nowrap; letter-spacing:.01em} .marke-knopf b{font-weight:600;font-variant-numeric:tabular-nums; opacity:.75} .marke-knopf:hover{border-color:var(--akzent);color:var(--akzent)} .marke-knopf.marke-an{background:var(--akzent-bg);color:var(--akzent); border-color:var(--akzent)} .pruef-heil{font-size:.88rem;color:var(--leise);display:flex; align-items:center;gap:.5rem;flex-wrap:wrap;margin:0 0 .75rem} .pruef-gut{margin-top:.7rem} .pruef-gut>summary{cursor:pointer;font-size:.85rem;color:var(--leise); padding:.3rem 0} .pruef-gut>summary:hover{color:var(--text)} .pruef-gut .pruefliste{margin-top:.4rem} /* Unter 1100 Pixeln untereinander - und der Pruefstand nach OBEN. Erst sehen, was nicht stimmt, dann die Reiter. */ @media (max-width:1100px){ html:has(.a-spalten){height:auto} body:has(.a-spalten){height:auto;overflow:visible;display:block} body:has(.a-spalten) .kopfleiste{position:sticky} main:has(.a-spalten){padding:0;display:block} /* Schmal rollt das Fenster. Eine klebende Leiste UND eine klebende Reiterleiste waeren zwei Balken uebereinander - die Leiste rollt hier einfach weg. */ .subnav{position:static} /* Schmal untereinander: der Name, darunter die Suche - und die darf dann umbrechen, weil die Leiste hier ohnehin mitrollt. */ .subnav-liste{grid-template-columns:minmax(0,1fr)} .subnav-liste .filter-form{flex-wrap:wrap;justify-content:flex-start} .a-spalten{grid-template-columns:minmax(0,1fr);height:auto} .a-haupt{overflow:visible;display:block} .a-rollfeld{overflow:visible} .a-seite{overflow:visible;order:-1;margin:0 0 1.5rem; border-left:0;border-bottom:1px solid var(--rand)} .a-haupt .reiter-zeile{top:var(--kopf-hoehe, 3.4rem)} } .knopf-leise{padding:.3rem .7rem;border:1px solid var(--rand); border-radius:7px;background:var(--bg);color:var(--leise); font:inherit;font-size:.85rem;cursor:pointer;white-space:nowrap} .knopf-leise:hover{border-color:var(--akzent);color:var(--akzent)} /* Der Knopf, der die KI anwirft. Dieselben Masse wie .knopf-leise, damit er ueberall an dessen Stelle treten kann - aber in der Akzentfarbe und mit dem Zeichen davor, das im Kategoriebaum schon fuer die KI steht. Grau war er dort, wo er die einzige Handlung ist, schlicht nicht zu sehen. Umrissen und nicht gefuellt: gefuellt bleibt, was nach plentyONE schreibt. Vorschlagen kostet nichts, Schreiben aendert etwas. */ .knopf-ki{display:inline-flex;align-items:center;gap:.4rem; padding:.3rem .7rem;border:1px solid var(--akzent);border-radius:7px; background:var(--flaeche);color:var(--akzent);font:inherit; font-size:.85rem;font-weight:600;cursor:pointer;white-space:nowrap} .knopf-ki::before{content:"✦";font-size:.85rem;line-height:1} .knopf-ki:hover:enabled{background:var(--akzent-bg)} .knopf-ki:disabled{opacity:.45;cursor:default} /* "jetzt holen" steht mitten in der Kopfzeile, hinter dem Zeitstempel - also klein und unaufdringlich, mit dem Kreispfeil davor. Kein .knopf-leise: der ist so breit gepolstert, dass er die Zeile auseinanderzoege. */ /* Die Tags des Artikels. Dieselben Chips wie auf der Artikelkarte - es ist dieselbe Art Auskunft, und zwei Schreibweisen dafuer waeren eine zu viel. Wer nur an einem Teil der Varianten haengt, traegt seine Reichweite mit und faellt durch den gestrichelten Rand auf. */ .a-tags{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap; margin:.4rem 0 1rem} .a-tags .a-chip b{font-weight:600;font-variant-numeric:tabular-nums; color:var(--warn)} .a-chip-teil{border-style:dashed;border-color:var(--warn)} .knopf-frisch{display:inline-flex;align-items:center;gap:.3rem; padding:.05rem .5rem .05rem .4rem;border:1px solid var(--rand); border-radius:99px;background:var(--flaeche);color:var(--leise); font:inherit;font-size:.78rem;cursor:pointer;white-space:nowrap} .knopf-frisch::before{content:"↻";font-size:.9rem;line-height:1} .knopf-frisch:hover:enabled{border-color:var(--akzent);color:var(--akzent)} .knopf-frisch:disabled{opacity:.45;cursor:default} /* Auf der Artikelkarte steht derselbe Knopf direkt vor "Artikel öffnen". Das margin-left:auto, das den Verweis nach rechts schiebt, wandert dafuer auf den ersten der beiden - sonst stuende der Auffrischknopf noch zwischen den Chips. Ohne ihn (kein Verwalter) bleibt alles, wie es war. */ /* Derselbe Knopf im Kopf der Prüfstandskarte - dort ohne Wort, nur das Zeichen. Ein KREIS: gleiche Breite wie Hoehe, fest gesetzt. Vorher folgte er der Hoehe des Titelblocks (align-self:stretch) und wurde dabei zur Ellipse - so hoch wie zwei Zeilen Text, aber nur so breit wie ein Zeichen. Jetzt steht er mittig daneben. Darunter etwas Luft, sonst klebt der erklaerende Satz am Kopf. */ .pruefstand .karte-kopf{align-items:center;gap:.8rem;margin-bottom:.9rem} .ps-titelblock{display:flex;flex-direction:column;gap:.1rem;min-width:0} .ps-titelblock h3{margin:0;line-height:1.25} .ps-stand{font-size:.78rem;line-height:1.25} .pruefstand .karte-kopf form{margin:0;display:flex;flex:none} .knopf-frisch.nur-zeichen{padding:0;flex:none; width:2.2rem;min-width:2.2rem;height:2.2rem; justify-content:center;gap:0} .knopf-frisch.nur-zeichen::before{font-size:1.05rem} .knopf-gut{border-color:var(--gut);color:var(--gut)} .knopf-gut:hover{background:var(--gut-bg);border-color:var(--gut); color:var(--gut)} /* Das Gegenstueck zu .knopf-gut. "verwerfen" stand neben einem gruenen "freigeben" in Grau auf Grau und sah aus wie abgeschaltet - dabei ist es die Entscheidung, die den Vorschlag wegwirft. */ .knopf-schlecht{border-color:var(--schlecht);color:var(--schlecht)} .knopf-schlecht:hover{background:var(--schlecht-bg); border-color:var(--schlecht);color:var(--schlecht)} .p-gut-txt{color:var(--gut);font-weight:600} .p-warn-txt{color:var(--warn);font-weight:600} .p-schlecht-txt{color:var(--schlecht);font-weight:600} .pruefstand{grid-column:1/-1} .ps-spalten{display:grid;gap:1rem 1.4rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .ps-spalte{border-top:3px solid var(--rand);padding-top:.5rem} .ps-spalte.s-fehler{border-color:var(--schlecht)} .ps-spalte.s-warnung{border-color:var(--warn)} .ps-spalte.s-ok{border-color:var(--gut)} /* Ein gewaehlter Filter wird FETT, sonst nichts. Vorher trug er einen eigenen Hintergrund, einen Radius und einen negativen Aussenabstand, der ihn aus der Spalte herausrueckte - das sah aus wie ein Kasten, der verrutscht ist, und es verschob die Nachbarn gleich mit. Fett sagt dasselbe und bewegt nichts. */ .ps-spalte.s-aktiv .ps-titel, .ps-spalte.s-aktiv .ps-zahl{font-weight:800} .ps-kopf{display:flex;align-items:baseline;justify-content:space-between; gap:.6rem;margin-bottom:.5rem} .ps-titel{font-weight:600;font-size:1.02rem} .ps-zahl{font-size:1.5rem;font-weight:600;font-variant-numeric:tabular-nums; line-height:1.1} .ps-kopf a{text-decoration:none} .ps-kopf a:hover{text-decoration:underline} /* Die erledigten Regeln einer Stufe, zugeklappt. Derselbe Aufbau wie das Klappfeld "n Regeln in Ordnung" im Streifen der Artikelseite. */ .ps-erledigt{margin-top:.35rem} .ps-erledigt>summary{cursor:pointer;font-size:.82rem;color:var(--leise); padding:.3rem 0;list-style:none} .ps-erledigt>summary::-webkit-details-marker{display:none} .ps-erledigt>summary::before{content:"▸";display:inline-block; width:1em;transition:transform .15s ease} .ps-erledigt[open]>summary::before{transform:rotate(90deg)} .ps-erledigt>summary:hover{color:var(--text)} @media (prefers-reduced-motion:reduce){ .ps-erledigt>summary::before{transition:none} } .ps-fuss{margin-top:1rem;padding-top:.6rem;border-top:1px solid var(--rand); font-size:.9rem} /* Textvergleich: IST links, Vorschlag rechts. Auf schmalen Schirmen untereinander - nebeneinander waeren zwei unlesbare Spalten. */ .texte{display:flex;flex-direction:column;gap:1rem} .textfeld{background:var(--flaeche);border:1px solid var(--rand); border-radius:10px;padding:.8rem 1rem} .textfeld-kopf{display:flex;justify-content:space-between;gap:1rem; align-items:center;flex-wrap:wrap;margin-bottom:.6rem} .textfeld-knoepfe{display:flex;gap:.4rem} .textfeld-knoepfe form{margin:0} .textfeld-paar{display:grid;grid-template-columns:1fr 1fr;gap:.8rem} @media (max-width:820px){.textfeld-paar{grid-template-columns:1fr}} .textspalte{min-width:0} .textspalte-kopf{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap; font-size:.75rem;text-transform:uppercase; letter-spacing:.04em;color:var(--leise);margin-bottom:.3rem} /* In einer .75rem-Zeile waere der volle Kreis zu gross - er wuerde die Beschriftung ueberragen, statt sie zu kennzeichnen. */ .textspalte-kopf .ki-marke{width:1rem;height:1rem;font-size:.65rem} .textspalte-fuss{font-size:.75rem;color:var(--leise);margin-top:.3rem} .textwert{background:var(--bg);border:1px solid var(--rand); border-radius:8px;padding:.5rem .65rem;font-size:.88rem; white-space:pre-wrap;overflow-wrap:anywhere;max-height:22rem; overflow:auto} .textwert-leer{color:var(--leise);font-style:italic} .textwert-neu{border-color:var(--gut);background:var(--gut-bg)} .textwert-gleich{border-color:var(--rand)} /* Zwei Fassungen je Wert: gerendert und roh. Umgeschaltet wird ueber eine Klasse am body - nichts wird nachgeladen, der Zustand bleibt. */ .textwert.roh{display:none;font-family:ui-monospace,monospace; font-size:.8rem;margin:0} body.zeige-html .textwert.sicht{display:none} body.zeige-html .textwert.roh{display:block} .textwert.sicht{white-space:normal} .textwert.sicht p{margin:0 0 .5rem} .textwert.sicht p:last-child{margin-bottom:0} .textwert.sicht ul,.textwert.sicht ol{margin:.3rem 0 .5rem 1.1rem; padding:0} .textwert.sicht li{margin:.1rem 0} .p-akzent{background:var(--flaeche);color:var(--akzent); border:1px solid var(--akzent)} .regel-auf{margin-top:.5rem} .regel-auf summary{cursor:pointer;font-size:.82rem} .regel-text{margin-top:.4rem;font-size:.82rem;color:var(--leise); white-space:pre-wrap} .hinweis-fehler{border-color:var(--schlecht);color:var(--schlecht)} .hinweis-warn{border-color:var(--warn)} /* Dieselbe Regel eine Ebene tiefer, fuer die einzelne Regelzeile. Fett UND in der normalen Schriftfarbe: die Zeilen stehen sonst in var(--leise), und fett allein waere darin kaum zu sehen. */ /* Der gewaehlte Filter: dieselbe Fettung wie beim Ueberfahren (oben, ueber -webkit-text-stroke), nur in der normalen Schriftfarbe statt in der Signalfarbe. So unterscheidet man "ist gewaehlt" von "wuerde ich gleich waehlen" - und keine der beiden Auszeichnungen aendert den Umbruch. */ .zeile-aktiv .marke-txt{color:var(--text)} .leise-zeile td{color:var(--leise)} /* Verstoss gegen die Lieferzeitregel direkt an der Variante. Nur aktive Varianten koennen verstossen - bei inaktiven spielt die Lieferzeit keine Rolle, und die Regel zaehlt sie auch nicht. */ .soll-falsch{color:var(--schlecht);font-weight:550;white-space:normal} /* Flag passt nicht zur Warenbestands-Beschraenkung. Nur aktive Varianten werden geprueft - bei inaktiven sind die Flags ohne Wirkung, und die Regel zaehlt sie nicht. */ .flag-falsch{color:var(--schlecht);font-weight:550; background:var(--schlecht-bg)} /* Die Korrekturknoepfe in der Variantenzeile. * * Sechs verschiedene koennen dort stehen - Warenbestand, Flags, * Lieferzeit, Mandantenfreigabe, Fremdlager-Barcode, negativer Bestand - * und an einer Zeile durchaus drei davon. Vorher waren es * inline-block-Formulare mit Raendern: bei zweien standen sie schief, * bei dreien brachen sie an unerwarteter Stelle um, und white-space:nowrap * verhinderte den Umbruch dort, wo er gutgetan haette. * * Jetzt ein Flexfeld mit Abstand. Die Knoepfe selbst tragen dieselbe * Sprache wie der Rest der Seite: Pille, kleine Schrift, ruhig - und * beim Ueberfahren in der Akzentfarbe. Sie sollen sagen "hier laesst * sich etwas richten", nicht um Aufmerksamkeit rufen; auffaellig ist * schon die Zeile, in der sie stehen. */ td.korrektur{white-space:normal} .korrektur-feld{display:flex;flex-wrap:wrap;gap:.3rem; justify-content:flex-end} .korrektur-feld form{margin:0;display:flex} .knopf-fix{display:inline-flex;align-items:center;gap:.35rem; padding:.22rem .65rem;border:1px solid var(--rand);border-radius:99px; background:var(--flaeche);color:var(--leise);font:inherit; font-size:.78rem;font-weight:550;cursor:pointer;white-space:nowrap; line-height:1.5} .knopf-fix:hover:enabled{border-color:var(--akzent);color:var(--akzent); background:var(--akzent-bg)} .knopf-fix:disabled{opacity:.45;cursor:default} /* Der eine Knopf, der etwas WEGNIMMT. Er soll nicht wie die anderen aussehen, aber auch nicht wie eine Warnung schreien - die Farbe kommt erst beim Ueberfahren, wie ueberall auf dieser Seite. */ .knopf-weg:hover:enabled{border-color:var(--schlecht);color:var(--schlecht); background:var(--schlecht-bg)} /* Die Position: ein Zahlenfeld in der Tabellenzelle. Schmal, rechts ausgerichtet und ohne Rahmen, solange niemand hinsieht - eine Tabelle mit hunderten Zeilen soll nicht aussehen wie ein Formular. Der Rahmen kommt beim Ueberfahren und beim Hineinklicken. */ /* Ein Reiter kann mehrere Bereiche tragen - "Allgemein" haelt Einheit und Reihenfolge, spaeter Tags. Die Ueberschrift trennt sie deutlicher als ein h3, ohne wie eine Seitenueberschrift auszusehen. */ .feld-titel{margin:2rem 0 0;font-size:.8rem;font-weight:650; text-transform:uppercase;letter-spacing:.05em;color:var(--leise); padding-bottom:.4rem;border-bottom:1px solid var(--rand)} .reiter-feld > .feld-titel:first-of-type{margin-top:.2rem} /* Die erste Ueberschrift darunter rueckt heran - zwischen "REIHENFOLGE DER VARIANTEN" und "Wie es jetzt steht" gehoert kein Absatz. */ .feld-titel + h3, .feld-titel + .eh-stand, .feld-titel + .eh-kasten{margin-top:.9rem} /* NUR in der Tabellenzelle: dort soll das Formular keinen Platz nehmen. Der Kasten im Reiter Allgemein traegt dieselbe Klasse (das Skript haengt daran) und bekommt sein Layout von .eh-form - stuende hier .pos-form ohne td davor, ueberschriebe display:inline es. */ td .pos-form{display:inline} /* Aktivieren und Deaktivieren stehen neben der Kennung, nicht in der Korrekturspalte: dort steht, was NICHT stimmt, und aktiv oder nicht ist eine Entscheidung. Inline, sonst reisst das Formular die Zeile auf. Der Knopf ZEIGT den Zustand - Haken oder Kreuz, wie in plentyONE - und ein Klick kehrt ihn um. Deshalb steht daneben keine Pille mehr: zwei Anzeigen desselben Zustands koennen auseinanderlaufen, eine nicht. */ td .aktiv-form{display:inline} .aktiv-knopf{display:inline-flex;align-items:center; justify-content:center;width:1.45rem;height:1.45rem;padding:0; margin-left:.45rem;border-radius:99px;cursor:pointer; vertical-align:middle;border:1px solid transparent} .aktiv-knopf svg{width:.8rem;height:.8rem;fill:none; stroke:currentColor;stroke-width:2.2;stroke-linecap:round; stroke-linejoin:round} .aktiv-knopf.an{color:var(--gut);background:var(--gut-bg)} .aktiv-knopf.aus{color:var(--schlecht);background:var(--schlecht-bg)} .aktiv-knopf:hover:enabled{border-color:currentColor} .aktiv-knopf:disabled{opacity:.45;cursor:default} /* Dasselbe Zeichen als reine Anzeige - in der Artikeluebersicht, wo die Variantentabelle nicht bearbeitet wird. Kein Zeigefinger und kein Rand beim Ueberfahren: es gibt nichts zu klicken. */ .aktiv-knopf.nur-anzeige{cursor:default} .aktiv-knopf.nur-anzeige:hover{border-color:transparent} /* Dieselben zwei Zeichen an den Gruppenknoepfen, damit man sie mit der Spalte zusammenbringt. */ .knopf-symbol{width:.8rem;height:.8rem;fill:none;stroke:currentColor; stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round; flex:none} .pos-feld{width:4.6rem;padding:.1rem .3rem;text-align:right; font:inherit;font-variant-numeric:tabular-nums;color:inherit; background:transparent;border:1px solid transparent;border-radius:5px} .pos-feld:hover{border-color:var(--rand);background:var(--flaeche)} .pos-feld:focus{border-color:var(--akzent);background:var(--flaeche); outline:none} /* Die Drehpfeile weg: sie kosten Platz und laden dazu ein, eine Position um eins zu verstellen - gemeint sind aber Gruppenwerte in Tausendern. */ .pos-feld::-webkit-outer-spin-button, .pos-feld::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .pos-feld[type=number]{-moz-appearance:textfield;appearance:textfield} /* Im Kasten ist es ein gewoehnliches Eingabefeld - und zwar genau so eines wie das Auswahlfeld der Einheit daneben, damit die beiden Bereiche desselben Reiters nicht verschieden aussehen. */ .pos-kasten .pos-feld{width:9rem;padding:.4rem .5rem;text-align:left; border:1px solid var(--rand);border-radius:8px; background:var(--bg);color:var(--text);font-size:.9rem} .pos-kasten .pos-feld:hover{border-color:var(--akzent)} .pos-kasten .pos-feld:focus{border-color:var(--akzent); box-shadow:0 0 0 2px var(--akzent-bg)} /* Reiter Fremdlager. Die Anbindung als Zeilen, nicht als Tabelle: es sind selten mehr als zwei, und eine Tabelle mit zwei Zeilen ist ein Rahmen um nichts. */ .fl-quellen{display:flex;flex-direction:column;gap:.35rem;margin:.4rem 0 0} .fl-quelle{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap; padding:.45rem .7rem;border:1px solid var(--rand);border-radius:9px; background:var(--flaeche)} .fl-knoepfe{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem} /* Wer etwas getan hat, steht klein unter dem Zeitpunkt - der Zeitpunkt ist die Auskunft, der Name die Rueckfrage. */ .fl-wer{display:block;font-size:.72rem;opacity:.75} /* Ein Zielwert im Knopf steht in Ziffernbreite - untereinander stehende Zeilen sollen nicht zappeln. */ .knopf-fix b{font-weight:600;font-variant-numeric:tabular-nums} /* Dieselben Farben wie die Lagerkacheln auf der Artikelkarte, damit Liste und Variantentabelle dieselbe Sprache sprechen. */ td.bestand-shop{color:var(--gut);font-weight:550} /* Die Spalte zeigt den PHYSISCHEN Bestand - dasselbe, was in plentyONE steht -, darunter die Reservierung. Vorher stand dort der Netto-Wert mit der Reservierung daneben; wer die Zahl mit plentyONE verglich, sah zwei verschiedene und musste erst rechnen. GERECHNET wird unveraendert mit dem Netto-Bestand: reservierte Ware liegt da, ist aber nicht lieferbar. Das steckt in LIEFERBAR (views.py) und geht in Lieferbarkeit, Sichtbarkeit und Pruefstand ein. Diese Spalte zeigt nur an. */ .reserviert{display:block;font-size:.72rem;font-weight:400; color:var(--leise)} .spalten-zusatz{display:block;font-size:.72rem;font-weight:400; text-transform:none;letter-spacing:0;opacity:.75} td.bestand-hs{color:var(--akzent);font-weight:550} td.bestand-fremd{color:var(--warn);font-weight:550} .soll-hinweis{display:block;font-size:.75rem;font-weight:400; opacity:.9} td.name{white-space:normal;min-width:16rem} /* Zustand der Herstellerkachel - derselbe Streifen wie an der Artikelkarte. Hier stand derselbe Farbverlauf; er ist mit dem dort gegangen, damit die beiden Seiten nicht verschieden sprechen. "Aktiv" traegt keine Farbe: das ist der Normalfall. */ .karte{border-left:3px solid var(--rand)} .karte.k-watch{border-left-color:var(--warn)} .karte.k-fehler{border-left-color:var(--schlecht)} .karte .unter{color:var(--leise);font-size:.85rem;margin-bottom:.9rem} .zahl{font-size:1.9rem;font-weight:650;line-height:1.1;font-variant-numeric:tabular-nums} .zeile{display:flex;justify-content:space-between;gap:1rem;padding:.3rem 0; border-bottom:1px solid var(--rand);font-size:.9rem} .zeile:last-child{border-bottom:0} /* Die Regelzeilen im Pruefstand sind FILTER, keine Verweise ins Netz. Sie trugen den globalen Linkstil - Akzentfarbe und Unterstreichung - und sahen damit aus wie ein Link von 1990. Jetzt: die Farbe der Ueberschrift daneben, keine Unterstreichung, und beim Ueberfahren die Farbe IHRER SPALTE plus Fettung. ZWEI DINGE, DIE DABEI SCHIEFGINGEN, und wie sie geloest sind: 1. ZWISCHEN ZWEI ZEILEN GRIFF DAS UEBERFAHREN NICHT. Ein ist von Haus aus inline: bei umbrochenem Text sind das zwei getrennte Kaesten mit einer Luecke dazwischen, und wer die Maus dort fuehrte, verlor die Auszeichnung wieder. Es flackerte beim Lesen. Geloest doppelt: das Ziel ist jetzt die ganze ZEILE, und das ist ein Block - ein Block hat eine durchgehende Flaeche, auch zwischen seinen Zeilen. 2. FETT MACHT TEXT BREITER, und breiterer Text bricht anders um. Eine einzeilige Regel wurde beim Ueberfahren zweizeilig, die Zeile wuchs, die Maus stand ploetzlich woanders - und es flackerte wieder. font-weight ist dafuer das falsche Mittel. Geloest mit -webkit-text-stroke: das zieht die Striche der Buchstaben dicker, ohne ihre VORSCHUBBREITE zu aendern. Der Text bricht an genau denselben Stellen um, die Zeile behaelt ihre Hoehe, und fett sieht es trotzdem aus. */ .pruefstand .zeile a{color:var(--text);text-decoration:none;display:block; transition:color .12s ease} .pruefstand .zeile:hover a, .pruefstand .zeile a:focus-visible, .pruefstand .zeile-aktiv a{-webkit-text-stroke:.4px currentColor} .pruefstand .s-fehler .zeile:hover a, .pruefstand .s-fehler .zeile a:focus-visible{color:var(--schlecht)} .pruefstand .s-warnung .zeile:hover a, .pruefstand .s-warnung .zeile a:focus-visible{color:var(--warn)} .pruefstand .s-ok .zeile:hover a, .pruefstand .s-ok .zeile a:focus-visible{color:var(--gut)} /* Die Zeile ist ein flex mit space-between. Der Name darf schrumpfen, die Zahl rechts nicht - sonst wandert sie beim Umbrechen mit. */ .pruefstand .zeile span:first-child{flex:1 1 auto;min-width:0} @media (prefers-reduced-motion:reduce){.pruefstand .zeile a{transition:none}} .zeile span:last-child{font-variant-numeric:tabular-nums;font-weight:550} table{width:100%;border-collapse:collapse;background:var(--flaeche); border:1px solid var(--rand);border-radius:10px;overflow:hidden;font-size:.9rem} .scroll{overflow-x:auto} th{text-align:left;padding:.6rem .8rem;background:var(--bg);color:var(--leise); font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.03em; border-bottom:1px solid var(--rand);white-space:nowrap} td{padding:.55rem .8rem;border-bottom:1px solid var(--rand);white-space:nowrap} tr:last-child td{border-bottom:0} td.zahl-z,th.zahl-z{text-align:right;font-variant-numeric:tabular-nums} /* Die Variantentabelle enger als die uebrigen. Achtzehn Spalten und oft hundert Zeilen: hier zaehlt jede Zeile, die man ohne Rollen sieht. Die zweite Zeile in einer Zelle (Reservierung, "soll:"-Hinweis) macht die Zeile weiterhin hoeher - deshalb Polsterung heruntersetzen und nicht die Hoehe festnageln. */ /* vertical-align ausdruecklich: Zellen erben es von der Tabelle, und worauf die steht, haengt am Vorgabeblatt des Browsers. Bei Zellen mit zwei Zeilen (Reservierung, "soll:"-Hinweis) soll der Nachbar daneben in der Mitte stehen, nicht oben. */ .v-tabelle td{padding:.28rem .8rem;vertical-align:middle} /* Das Kuerzel fuer die Grundpreisanzeige - klein und hinter der Einheit, weil es zu ihr gehoert und keine eigene Spalte verdient. */ .v-grundpreis{margin-left:.35rem;font-size:.7rem;font-weight:600; padding:0 .25rem;border-radius:4px;border:1px solid var(--rand-stark); color:var(--leise)} /* --------------------------------------------------------------------- Die Aktionsspalte bleibt beim seitlichen Rollen stehen. Die Tabelle ist einundzwanzig Spalten breit und rollt waagerecht. Wer rechts nach einem Wert sucht, hatte die Knoepfe dazu nicht mehr im Bild - und wer die Knoepfe sah, wusste nicht mehr, zu welcher Zeile sie gehoeren. Beides zugleich geht nur, wenn eine der beiden Spalten stehen bleibt. Fixiert wird die AKTIONSspalte, nicht die Kennung: die Kennung liest man einmal, die Knoepfe drueckt man. Eigener Grund ist Pflicht, nicht Zierde - eine durchsichtige Zelle liesse den durchrollenden Inhalt dahinter durchscheinen. Und der Grund muss dem der ZEILE folgen: die Hauptvariante ist grau hinterlegt, ihre Aktionszelle also auch. Die Trennlinie links markiert die Kante, an der der Rest verschwindet. */ .v-tabelle th:last-child, .v-tabelle td.korrektur{position:sticky;right:0;z-index:2; background:var(--flaeche);border-left:1px solid var(--rand-stark)} .v-tabelle th:last-child{background:var(--bg);z-index:3} .v-tabelle tr.leise-zeile td.korrektur{background:var(--flaeche)} .v-tabelle tr.v-haupt td.korrektur{background:var(--bg)} .v-tabelle th{padding:.4rem .8rem} /* Die Hauptvariante ueber mehreren steht am Ende, abgesetzt durch eine Linie und einen eigenen Grund - ohne Abstand davor. Der Weg dorthin ging ueber zwei Zwischenschritte: erst ein dicker grauer Rand als Luecke (der verschmolz mit dem grauen Grund der Zeile zu einem Block), dann ein weisser Rand mit Linie darunter. Beides wirkte, war aber mehr Aufwand als noetig - eine Luecke IN einer Tabelle bricht die Spaltenflucht, und genau davon lebt eine Tabelle. Jetzt reichen zwei Angaben: die Linie, und ab hier ein anderer Grund. Das ist dieselbe Sprache, in der eine Tabelle ohnehin spricht. */ .v-tabelle tr.v-haupt td{border-top:1px solid var(--rand)} /* Sie bleibt lesbar, tritt aber ZURUECK - das ist der ganze Zweck. Grund abgesetzt und die Werte grau: ihre Zahlen sind nicht zum Vergleichen gedacht, und was grau ist, ueberliest das Auge von selbst. Die Knoepfe behalten ihre Farbe: .aktiv-knopf und die Korrekturknoepfe setzen ihre eigene, und color am td vererbt sich nicht in sie hinein. */ .v-tabelle tr.v-haupt{background:var(--bg)} .v-tabelle tr.v-haupt td{color:var(--leise)} /* UND DIE AUSNAHME GLEICH DANEBEN. .soll-falsch und .flag-falsch sitzen AM td selbst (0-1-0) und haetten der Regel darueber (0-2-2) nachgegeben: ein Regelverstoss an der Hauptvariante waere grau statt rot gewesen. Zurueckgenommen heisst "weniger wichtig", nicht "nicht mehr zu sehen" - und gerade hier gibt es einen echten Fall, die aktive Hauptvariante ueber mehreren Varianten. Pillen und die soll-Hinweise brauchen keine Ausnahme: die stehen in eigenen und setzen ihre Farbe selbst - eine Angabe schlaegt Vererbung immer, egal wie spezifisch die Vererbung zustande kam. */ .v-tabelle tr.v-haupt td.soll-falsch, .v-tabelle tr.v-haupt td.flag-falsch{color:var(--schlecht)} /* Der Stern der Hauptvariante - dasselbe Zeichen, mit dem plentyONE sie markiert. Wer von dort kommt, muss nichts Neues lernen. Drei Anlaeufe hat die Stelle gebraucht. Erst ein Wort ZWISCHEN Nummer und Schalter: als Block brach es die Zeile auf und schob den Schalter darunter (die Spaltenbreite war dabei nie die Ursache - ein Block bricht immer um). Dann das Wort am Ende, weiter als Block: der Schalter sass richtig, aber die Zeile wurde hoeher als alle anderen - und eine hoehere Zeile zieht MEHR Blicke auf sich, das Gegenteil des Zwecks. Jetzt ein Zeichen, inline: es kostet weder Hoehe noch eine nennenswerte Breite. Grau und klein. Abgesetzt ist die Zeile durch die LUECKE, der Stern sagt nur, warum. Was er bedeutet, steht im title und im aria-label - ein Zeichen ohne Worterklaerung waere ein Raetsel fuer jeden, der plentyONE nicht taeglich sieht. */ /* Kein margin-left mehr: das stammte aus der Zeit, als der Stern inline hinter dem Text stand. In der Flex-Zeile sorgt gap fuer den Abstand, und beides zusammen ergaebe den doppelten. */ .v-haupt-stern{display:inline-flex;align-items:center;color:var(--leise)} .v-haupt-stern svg{width:.85rem;height:.85rem;fill:currentColor} /* Und ein Mindestmass fuer die Spalte, damit Nummer und Zeichen auch dann nebeneinander Platz haben, wenn die Tabelle eng wird. */ .v-tabelle td.v-kennung{min-width:8rem} /* Innen eine Flex-Zeile: Nummer links, Zeichen RECHTS. Variantennummern haben vier bis sechs Stellen (4.021 / 82.892 / 183.602). Standen die Zeichen einfach hinter der Nummer, ruckelten sie von Zeile zu Zeile um bis zu zwei Stellen hin und her - und gerade den Aktiv-Schalter faehrt man senkrecht ab, der darf nicht wandern. Die Flex-Zeile sitzt im span, NICHT am td: ein td mit display:flex ist keine Tabellenzelle mehr, und die Spaltenflucht der ganzen Tabelle waere dahin. margin-right:auto an der Nummer schiebt alles Weitere nach rechts - ohne dass die Zahl der Zeichen dahinter eine Rolle spielt. Mit justify-content:space-between staende der Schalter in der Mitte, sobald ein Stern dazukommt. */ .v-kennung-innen{display:flex;align-items:center;gap:.4rem} .v-nummer{margin-right:auto} .marke-txt{color:var(--leise)} .pille{display:inline-block;padding:.1rem .5rem;border-radius:99px;font-size:.78rem; font-weight:600} .p-gut{background:var(--gut-bg);color:var(--gut)} .p-warn{background:var(--warn-bg);color:var(--warn)} .p-schlecht{background:var(--schlecht-bg);color:var(--schlecht)} .p-leise{background:var(--bg);color:var(--leise)} .plus{color:var(--gut)} .minus{color:var(--schlecht)} .filter{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem} .filter a{padding:.35rem .7rem;border:1px solid var(--rand);border-radius:99px; text-decoration:none;color:var(--leise);font-size:.85rem;background:var(--flaeche)} .filter a.aktiv{background:var(--akzent);color:#fff;border-color:var(--akzent)} .leer{color:var(--leise);padding:2rem;text-align:center;background:var(--flaeche); border:1px solid var(--rand);border-radius:10px} a{color:var(--akzent-text)} .auftrag{background:var(--flaeche);border:1px solid var(--rand); border-left:3px solid var(--rand);border-radius:8px;padding:.8rem 1rem; margin:1rem 0} .auftrag.a-laeuft{border-left-color:var(--akzent)} .auftrag.a-fertig{border-left-color:var(--gut)} .auftrag.a-fehler{border-left-color:var(--schlecht)} .auftrag-kopf{display:flex;align-items:center;justify-content:space-between; gap:1rem;flex-wrap:wrap} /* Titel und Lage in einer Reihe, mittig zueinander. Vorher standen sie schlicht nebeneinander im Textfluss, und das ging gut, solange dort nur Buchstaben standen. Die KI-Marke ist ein Kreis von 1,15 rem in einer Zeile aus 15px-Text - auf der Grundlinie ausgerichtet sitzt der zu hoch. Ein zurechtgeschobenes vertical-align waere geraten; ausgerichtet wird jetzt, statt zu schaetzen. */ .auftrag-titel{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap; min-width:0} .auftrag-titel strong{display:inline-flex;align-items:center;gap:.4rem} .auftrag-lage{color:var(--leise);font-size:.88rem} /* Die Knoepfe des Auftragsblocks. Bisher gab es hier gar keine Regel: ein mit
-Elementen darin, und ein form ist ein Blockelement - die Knoepfe standen also untereinander, jeder auf einer eigenen Zeile. Aufgefallen ist das erst, als der Kategorieblock zwei bekam. Und sie standen auf verschiedenen Hoehen, weil .knopf und .knopf-leise unterschiedlich gepolstert sind. Nebeneinander muessen sie dieselbe Hoehe haben; welcher der wichtigere ist, sagt die Fuellung, nicht die Groesse. */ .auftrag-knoepfe{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap; justify-content:flex-end} .auftrag-knoepfe form{margin:0} .auftrag-knoepfe .knopf,.auftrag-knoepfe .knopf-leise,.auftrag-knoepfe .knopf-ki{ padding:.4rem .85rem;font-size:.85rem;border-radius:8px;line-height:1.4} .auftrag-knoepfe .knopf .gruppen-zahl{background:var(--akzent-bg);border:1px solid var(--akzent); color:var(--akzent-text);margin-left:.45rem} /* Die Gruppenknoepfe der Korrektur: derselbe Vorgang wie in der Zeile, nur fuer alle betroffenen Varianten auf einmal. Damit man das sieht, tragen sie dieselbe Pillenform wie die Zeilenknoepfe - nur eine Nummer groesser, weil sie mehr bewirken. Die Zahl dahinter sagt, wie viele Varianten es trifft; sie faerbt sich beim Ueberfahren mit. */ .auftrag-knoepfe .knopf-fix{padding:.35rem .8rem;font-size:.83rem} .knopf-fix .gruppen-zahl{margin-left:.15rem;background:var(--bg); border:1px solid var(--rand);font-size:.78rem;padding:0 .38rem} .knopf-fix:hover:enabled .gruppen-zahl{border-color:var(--akzent)} .auftrag-meldung{color:var(--leise);font-size:.85rem;margin:.6rem 0 0} .balken{height:5px;background:var(--bg);border-radius:3px;overflow:hidden; margin-top:.7rem} .balken-fuell{height:100%;background:var(--akzent);border-radius:3px; transition:width .4s ease} /* Reiter Maerkte. Die Nummern sind der Schluessel zu allem, was mit Verkaufskanaelen zu tun hat - deshalb stehen sie in einer eigenen Spalte und mit gleichen Ziffernbreiten untereinander, statt im Namen zu verschwinden. */ /* D476: ohne Erklaertext darunter - der Abstand zur Tabelle sitzt jetzt an der Ueberschrift */ .markt-kopf{display:flex;align-items:center;gap:.5rem;margin:1.8rem 0 .7rem} .markt-nr{font-variant-numeric:tabular-nums;color:var(--leise); white-space:nowrap} /* Unterkanaele eingerueckt: 4.01 gehoert zu 4.00, und das soll man sehen, ohne die Nummern zu vergleichen. */ .markt-unter{padding-left:1.5rem} /* Eine neue Familie bekommt eine Linie. Ohne sie sind 82 Zeilen ein Block, in dem Amazon und Kaufland ineinander laufen. */ .markt-tabelle tr.familie-neu td{border-top:1px solid var(--rand)} .markt-anteil{display:flex;align-items:center;gap:.6rem;min-width:11rem} .markt-anteil .balken{flex:1;min-width:4rem} .markt-anteil .marke-txt{font-variant-numeric:tabular-nums; white-space:nowrap;min-width:3.2rem;text-align:right} /* Reiter Maerkte an der Artikelseite. Die Liste ist ein kbaum wie bei Eigenschaften und Kategorie - Karte, Einrueckung und Aststriche kommen von dort. Hier steht nur, was der Kasten und die Kanalnummer brauchen. */ .mk-tick{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer; min-width:0} /* Der Name steht im Label, also nicht als direktes Kind des li - die vorhandenen kbaum-Regeln greifen mit ">" und gehen daran vorbei. Hier dieselben zwei Aussagen fuer den Enkel: die Gruppe fett, ein Kanal ohne eine einzige Variante grau. */ .kbaum li.k-wurzel .mk-tick .k-name{font-weight:600} .kbaum li.k-nurweg .mk-tick .k-name{color:var(--leise)} .mk-kasten{accent-color:var(--akzent);width:1rem;height:1rem;flex:none; cursor:pointer} .mk-kasten:disabled{cursor:default} /* Die Nummer ist der Schluessel zu allem, was mit Kanaelen zu tun hat - sie steht hinter dem Namen und mit gleichen Ziffernbreiten, damit man die Spalte lesen kann. */ .mk-nr{font-variant-numeric:tabular-nums;color:var(--leise); font-size:.8rem;white-space:nowrap} /* Eine Zeile, die etwas vorhat, bekommt einen Rand in der Farbe des Vorhabens - man soll die Auswahl im Baum wiederfinden, ohne die Zeichen einzeln zu suchen. */ .kbaum li.mk-aenderung{background:var(--bg);border-radius:6px} /* Die Bilanz steht als Standzeile oben, direkt unter der Zaehlzeile - der Schreibknopf sitzt im Auftragskasten darueber, wie bei Kategorie und Eigenschaften. Was er tun wird, soll daneben stehen und nicht achtzig Zeilen weiter unten. */ .mk-bilanz{margin:0 0 .5rem} .mk-bilanz b.mk-weg{color:var(--schlecht)} .mk-bilanz b.mk-neu{color:var(--gut)} /* Sichtbar im Online Shop. Frueher eine blass gefuellte Scheibe wie der Aktiv-Knopf an der Variantenzeile. Das trug nicht mehr, seit der Kartenkopf einen einheitlichen Grund hat: --gut-bg/--schlecht-bg sind schwach gesaettigte Pastelltoene, --kopf ebenso - zwei davon nebeneinander ergeben Matsch statt Kontrast. Vorher fiel es nicht auf, weil der Kopf bei Warnung/Fehler selbst getoent war und die Scheibe im gleichen Ton mitschwamm. Jetzt ohne Flaeche, dafuer die KRAEFTIGE Farbe im Strich. Das loest drei Dinge auf einmal: der Kontrast kommt vom Farbton statt von zwei Pastellflaechen, in der Listenansicht konkurriert keine zweite gefuellte Flaeche mit dem Zustandsbalken links, und die Zeile wird ruhiger. Die Kastengroesse bleibt, damit die Nummern darunter in einer Flucht stehen. Offenes und durchgestrichenes Auge unterscheiden sich in der FORM, nicht nur in der Farbe - das bleibt lesbar, wenn jemand Rot und Gruen nicht auseinanderhaelt. Der Strich ist etwas kraeftiger als zuvor, weil ohne Flaeche nur noch die Linie traegt. */ .shop-auge{display:inline-flex;align-items:center;justify-content:center; width:1.45rem;height:1.45rem;flex:none; vertical-align:middle;margin-right:.1rem;cursor:default} .shop-auge svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .shop-auge.an{color:var(--gut)} .shop-auge.aus{color:var(--schlecht)} /* Im Cross-Selling-Reiter steht das Auge in einer Zeile mit Text und darf sie nicht aufreissen - kleiner als auf der Kachel. */ .cs-auge{width:1.15rem;height:1.15rem;margin-right:0} .cs-auge svg{width:.9rem;height:.9rem} .k-legende .cs-auge{vertical-align:-.2rem} /* Der Name darf schrumpfen, damit die Knoepfe dahinter Platz finden - aber nicht auf null: unter 8rem liest man ihn nicht mehr. */ .cs-name{color:var(--text);text-decoration:none;overflow:hidden; text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto;min-width:8rem} .cs-name:hover{color:var(--akzent);text-decoration:underline} /* Die Nummer ist derselbe Kopierknopf wie an der Artikelkachel, nur ohne dessen Aussenabstand - im kbaum sorgt gap fuer den Zwischenraum. */ .cs-nr{margin-right:0;flex:none} /* Die Knoepfe stehen direkt hinter dem Namen und werden nicht ans Ende geschoben. Sie duerfen dabei nicht schrumpfen. */ .cs-zeile .k-tat{flex:none} /* Eine Vorschlagszeile hebt sich ab: sie wartet auf eine Entscheidung, die anderen sind fertig. Ihre Knoepfe stehen deshalb IMMER da und nicht erst beim Ueberfahren. */ .kbaum li.cs-vorschlag{background:var(--bg);border-radius:6px} /* Der Aufnehmen-Kasten steht wie bei den Eigenschaften unter der Liste. */ .cs-huelle{margin-top:1.2rem;background:var(--flaeche); border:1px solid var(--rand);border-radius:10px;padding:.7rem .9rem} .cs-huelle .eig-auf{font-weight:600;font-size:.92rem; display:inline-flex;align-items:center;gap:.4rem} /* KEINE eigene Gestaltung fuer den Aufklappknopf. .eig-auf ist der geteilte Knopf von Eigenschaften und Kategorie - umrissen, mit + bzw. - davor. Hier stand einmal ein zweites Zeichen daneben, weil ich das geteilte uebersehen hatte. Ein Knopf, ein Zeichen. */ /* Das Zahlenfeld war ungestylt - die Auswahl daneben hatte einen Rahmen, es keinen. Dieselbe Form fuer beide, und die Gruppe braucht keine 16rem: zwei kurze Woerter stehen darin. */ /* Die gemeinsame Hoehe steht jetzt an .eh-form selbst - hier stand sie einmal, galt aber nur fuer diesen einen Kasten. Was hier bleibt, ist nur, was WIRKLICH nur fuer den Cross-Selling-Kasten gilt: engere Felder und ein Knopf ohne Aussenpolsterung. */ .cs-huelle .eh-feld input[type=number]{padding:0 .5rem;border-radius:8px; border:1px solid var(--rand);background:var(--bg);color:var(--text); font:inherit;font-size:.9rem;width:9rem; font-variant-numeric:tabular-nums} .cs-huelle .eh-feld input[type=number]:hover{border-color:var(--akzent)} .cs-huelle .eh-feld input[type=number]:focus{border-color:var(--akzent); outline:none} .cs-huelle .eig-form select{min-width:0;width:13rem;padding:0 .5rem} .cs-huelle .eh-form .knopf{display:inline-flex;align-items:center; padding:0 1.1rem} /* --------------------------------------------------------------------- Die vier Massnahmenkacheln ueber den Reitern. Weiss auf dem Seitengrund, damit sie sich als Bedienteile von der Seite abheben - und OHNE jeden Erklaertext: der Platz ueber den Reitern ist knapp, und wer hier arbeitet, kennt die vier. Was ein Knopf tut, sagt sein title; was schiefgeht, sagt die Fehlerzeile, und die erscheint nur dann. VIER SPALTEN, fest. Mit auto-fit sprang die vierte Kachel je nach Fensterbreite in die zweite Zeile - und eine Reihe, die mal drei und mal vier Kacheln hat, liest sich jedes Mal anders. minmax(0,1fr) statt 1fr: ohne die 0 nimmt eine Rasterspalte die Mindestbreite ihres Inhalts als Untergrenze, und ein langer Einheitenname sprengte die Reihe. Erst unter 900px werden zwei Spalten daraus - vier nebeneinander waeren dort schmaler als ihre Eingabefelder. --------------------------------------------------------------------- */ /* EINE Karte, vier Spalten darin. Vorher vier einzelne Kacheln - vier Rahmen und vier Grundflaechen fuer vier Ausfuehrungen derselben Sache. Alle vier wirken auf die Gruppe und richten sich nach demselben Umfang; getrennte Kacheln behaupteten, es waeren vier Dinge. */ .gf-karte{background:var(--flaeche);border:1px solid var(--rand); border-radius:10px;padding:.7rem .9rem;margin:.9rem 0 .2rem} /* Der Kopf ist zugleich der Aufklapper. list-style:none nimmt dem summary sein Dreieck; das eigene Zeichen steht davor, in derselben Form wie bei der Kategorie- und der Eigenschaftsauswahl. */ .gf-karte > summary{list-style:none;cursor:pointer} .gf-karte > summary::-webkit-details-marker{display:none} .gf-kopf{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap; margin:0} /* Der Abstand nach unten NUR im offenen Zustand - zugeklappt truege die Karte sonst eine Leerzeile unter ihrer einzigen Zeile. */ .gf-karte[open] > .gf-kopf{margin-bottom:.6rem} .gf-titel{margin:0;font-size:.95rem;font-weight:600; display:inline-flex;align-items:baseline;gap:.5rem} .gf-titel::before{content:"+";font-size:1.1rem;font-weight:700; line-height:1;width:.8rem;text-align:center;color:var(--akzent)} .gf-karte[open] > .gf-kopf .gf-titel::before{content:"−"} .gf-karte > summary:hover .gf-titel{color:var(--akzent)} .gf-umfang{font-size:.85rem;margin-left:auto} .ak-kacheln{display:grid;gap:0; grid-template-columns:repeat(4,minmax(0,1fr))} /* Getrennt wird durch eine LINIE, nicht durch Abstand: die Spalten gehoeren zusammen, sie sind nur verschiedene Griffe an derselben Gruppe. Der erste bekommt keine - eine Linie am Kartenrand waere eine Trennung von nichts. */ .ak-kachel{display:flex;flex-direction:column;gap:.45rem; background:none;border:0;border-radius:0;padding:0 .9rem;margin:0} .ak-kachel + .ak-kachel{border-left:1px solid var(--rand)} .ak-kachel:first-child{padding-left:0} .ak-kachel:last-child{padding-right:0} /* Unter 900px zwei Spalten. Dann trennt die Linie nur noch INNERHALB einer Zeile - die linke Spalte jeder Zeile bekommt keine -, und zwischen den Zeilen sorgt ein Abstand fuer Luft. */ @media (max-width:900px){ .ak-kacheln{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:.9rem} .ak-kachel:nth-child(odd){border-left:0;padding-left:0} .ak-kachel:nth-child(even){padding-right:0}} /* Nur ein Name, keine Ueberschrift: 1rem waere hier eine Ansage, .78rem ist eine Beschriftung. */ .ak-titel{font-size:.78rem;font-weight:600;color:var(--leise); text-transform:uppercase;letter-spacing:.03em} .ak-zeile{display:flex;align-items:stretch;gap:.4rem} .ak-zeile > *{min-width:0} /* Zwei Knoepfe teilen sich die Zeile zu gleichen Teilen - sonst waere "setzen" schmaler als "loesen" und die Kachel saehe schief aus. */ .ak-zwei > *{flex:1 1 0} .ak-zwei form{display:flex} .ak-zwei form .knopf{width:100%;justify-content:center} /* Alle Eingaben und Knoepfe der Kacheln auf eine Hoehe - dieselbe Ueberlegung wie bei .eh-form, nur hier ohne deren Aussenabstaende. */ .ak-kachel select, .ak-kachel input[type=text], .ak-kachel input[type=number], .ak-kachel .knopf{min-height:2.1rem;box-sizing:border-box; font-size:.88rem} .ak-kachel select, .ak-kachel input[type=text], .ak-kachel input[type=number]{flex:1 1 0;padding:0 .5rem;border-radius:8px; border:1px solid var(--rand);background:var(--bg);color:var(--text); font-family:inherit} .ak-kachel select:hover, .ak-kachel input:hover{border-color:var(--akzent)} .ak-kachel input:focus, .ak-kachel select:focus{border-color:var(--akzent);outline:none} /* Die Menge schmaler als die Einheit: dort stehen ein bis vier Ziffern, in der Auswahl daneben ganze Woerter. */ .ak-menge{max-width:5.5rem;text-align:right; font-variant-numeric:tabular-nums} .ak-kachel .ankreuz{display:flex;align-items:center;gap:.35rem; font-size:.8rem;color:var(--leise);cursor:pointer} /* Die Fehlerzeile steht NUR da, wenn es etwas zu sagen gibt - und dann in der Farbe, die im Blatt fuer Fehler steht. */ .ak-fehler{margin:0;font-size:.78rem;color:var(--schlecht); line-height:1.3} /* ALLE KNOEPFE AN DEN UNTEREN RAND. Die vier Spalten sind verschieden hoch gefuellt - eine hat zwei Felder, eine nur eines, zwei haben ein Knopfpaar. Ohne Zutun sass jeder Knopf woanders, und die Reihe sah aus wie eine Treppe. Das Raster streckt die Spalten ohnehin auf gleiche Hoehe; margin-top:auto am letzten Kind schiebt den Knopf in den entstandenen Rest. Am LETZTEN Kind und nicht am Knopf: bei Einheit und Reihenfolge ist das der Knopf selbst, bei Aktiv und Tags das Knopfpaar in seiner Zeile. Eine Regel fuer beide Faelle. */ .ak-kachel > :last-child{margin-top:auto} /* Die Knoepfe umrissen statt gefuellt. Gefuellt blau ist im Blatt die Farbe des Schreibknopfes, der einen Lauf nach plentyONE startet - EINER je Seite. Hier stehen fuenf davon nebeneinander, und fuenf blaue Flaechen in einer Reihe sind kein Signal mehr, sondern ein Balken. Der Rand traegt jetzt die AKZENTFARBE, nicht mehr das blasse Grau der Eingabefelder darueber: mit grauem Rand sah der Knopf aus wie ein weiteres Feld, und man las die Spalte als drei gleichrangige Zeilen. Er ist aber der Abschluss - das, was die Spalte tut. */ .ak-kachel .knopf{background:var(--flaeche);color:var(--akzent); border-color:var(--akzent);font-weight:600; transition:background .12s ease} .ak-kachel .knopf:hover:enabled{background:var(--akzent-bg);filter:none} .ak-kachel .knopf:disabled{opacity:.45;cursor:default} @media (prefers-reduced-motion:reduce){.ak-kachel .knopf{transition:none}} /* Reiter. Die Leiste klebt unter der Kopfzeile mit - wer weit unten in der Variantentabelle steht, soll ohne Hochrollen wechseln koennen. */ /* Die Reiterleiste rollt seitlich statt umzubrechen (20.09.2026, "wenn die Seitenbreite nicht reicht, wird sie untereinander dargestellt"). Ohne sichtbaren Rollbalken; dass es weitergeht, zeigen weiche Kanten links/rechts (Klassen rollt-links/rollt-rechts setzt das Skript), der gewaehlte Reiter wird in den Blick gerollt, das Mausrad rollt seitlich. */ .reiter{display:flex;gap:.25rem;flex-wrap:nowrap;margin:.5rem 0 0; border-bottom:1px solid var(--rand);position:sticky; top:var(--kopf-hoehe, 3.4rem);background:var(--bg);z-index:10; overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch; scroll-behavior:smooth;overscroll-behavior-x:contain} .reiter::-webkit-scrollbar{display:none} .reiter > .reiter-knopf{flex:none;white-space:nowrap} .reiter.rollt-rechts{mask-image:linear-gradient(to right,#000 calc(100% - 2.5rem),transparent); -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 2.5rem),transparent)} .reiter.rollt-links{mask-image:linear-gradient(to right,transparent,#000 2.5rem); -webkit-mask-image:linear-gradient(to right,transparent,#000 2.5rem)} .reiter.rollt-links.rollt-rechts{mask-image:linear-gradient(to right,transparent,#000 2.5rem,#000 calc(100% - 2.5rem),transparent); -webkit-mask-image:linear-gradient(to right,transparent,#000 2.5rem,#000 calc(100% - 2.5rem),transparent)} .reiter-knopf{padding:.6rem .9rem;border:0;border-bottom:2px solid transparent; background:none;color:var(--leise);font:inherit;font-weight:550; cursor:pointer;display:flex;align-items:center;gap:.4rem} .reiter-knopf:hover{color:var(--text)} .reiter-knopf.aktiv{color:var(--akzent);border-bottom-color:var(--akzent)} .reiter-zahl{padding:0 .4rem;border-radius:8px;background:var(--flaeche); border:1px solid var(--rand);font-size:.8rem;font-weight:600; font-variant-numeric:tabular-nums;color:var(--leise)} .reiter-knopf.aktiv .reiter-zahl{border-color:var(--akzent);color:var(--akzent)} .reiter-zahl.r-schlecht{color:var(--schlecht);border-color:var(--schlecht)} .reiter-zahl.r-warn{color:var(--warn);border-color:var(--warn)} .reiter-feld{padding-top:1.2rem} .reiter-feld h3{font-size:.95rem;margin:1.2rem 0 .6rem;font-weight:600} .reiter-feld h3:first-child{margin-top:0} /* Der Reiter Einheit. * * Oben der Ist-Stand, darunter das Formular. Die Liste oben ist meist * eine Zeile lang; stehen mehrere da, ist das schon die Auskunft, dass * der Artikel uneinheitlich gepflegt ist. Deshalb sieht die Zeile aus wie * eine Pruefzeile im Streifen und nicht wie eine Tabelle - man soll sie * auf einen Blick zaehlen koennen, nicht lesen muessen. */ .eh-stand{display:flex;flex-direction:column;gap:.4rem; margin:0 0 1.4rem;max-width:34rem} .eh-zeile{display:flex;align-items:center;gap:.6rem;padding:.55rem .85rem; background:var(--flaeche);border:1px solid var(--rand);border-radius:10px} /* Die haeufigste Auspraegung zuerst - sie ist die, die der Artikel eigentlich meint. Die uebrigen daneben treten zurueck. */ .eh-zeile:first-child{border-color:var(--akzent)} .eh-menge{font-weight:600;font-variant-numeric:tabular-nums} .eh-zeile .pille{flex:none} /* Die Zahl rechts, wie ueberall auf dieser Seite. */ .eh-zeile .reiter-zahl{margin-left:auto;flex:none} .eh-zeile.eh-unbekannt{border-style:dashed} .eh-zeile.eh-unbekannt .eh-menge{color:var(--leise);font-weight:550; font-style:italic} /* Das Formular als Kasten, wie der Auftragsblock daneben: hier geschieht etwas mit dem ganzen Artikel, und das soll man sehen, bevor man klickt. Der Akzentstreifen links ist derselbe wie dort. */ .eh-kasten{background:var(--flaeche);border:1px solid var(--rand); border-left:3px solid var(--akzent);border-radius:8px; padding:.9rem 1.1rem;margin:0 0 1rem;max-width:44rem} .eh-kasten h3{margin:0 0 .8rem;font-size:.95rem;font-weight:600} .eh-form{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin:0} /* Alle Eingaben einer eh-form und der Knopf daneben auf EINE Hoehe. align-items:flex-end stellt sie auf eine Linie - das genuegt aber nur, wenn sie auch gleich hoch sind, sonst stehen sie zwar unten buendig, wirken aber gestuft. Gleich hoch waren sie nie: die Auswahl bringt ihre eigene Innenhoehe mit, ein Zahlenfeld zusaetzlich die Spinner des Browsers, das Textfeld erbte eine kleinere Schrift als die Auswahl daneben (.8rem gegen .9rem), und der Knopf hatte ein margin-bottom als Ausgleich von Hand. DIESE REGEL STAND SCHON EINMAL DA - aber nur unter .cs-huelle, weil der Cross-Selling-Kasten der war, an dem es auffiel. Der Eigenschaften- Kasten hat dieselbe eh-form und blieb schief; die Positions-, Tag- und Einheitenkaesten auch. Jetzt haengt sie an eh-form selbst, also gilt sie fuer alle sechs - und fuer jeden, der spaeter dazukommt. min-height, nicht height: ein Knopf mit langer Beschriftung darf umbrechen und dann hoeher werden. Kuerzere Inhalte werden auf 2.1rem aufgefuellt, laengere nicht abgeschnitten. Ankreuzfelder sind ausgenommen (die Auswahl nennt die Arten einzeln) - ein 2.1rem hohes Haekchen waere ein Klotz. */ .eh-form select, .eh-form input[type=text], .eh-form input[type=number], .eh-form .knopf{min-height:2.1rem;box-sizing:border-box} .eh-feld{display:flex;flex-direction:column;gap:.3rem;font-size:.8rem; color:var(--leise)} .eh-feld select{padding:.4rem .5rem;border-radius:8px; border:1px solid var(--rand);background:var(--bg);color:var(--text); font:inherit;font-size:.9rem;min-width:15rem;max-width:22rem} .eh-feld select:hover{border-color:var(--akzent)} /* Das Haekchen auf einer Linie mit dem Auswahlfeld, nicht mit dessen Beschriftung - beide sind Eingaben, die Beschriftung ist es nicht. */ .eh-haken{display:flex;align-items:center;gap:.4rem;font-size:.88rem; padding-bottom:.5rem;cursor:pointer;white-space:nowrap} .eh-haken input{cursor:pointer} .eh-haken .marke-txt{font-size:.78rem} /* Kein margin-bottom mehr: das war der Ausgleich fuer die ungleichen Hoehen, und der ist mit der Regel oben erledigt. */ .eh-form .knopf{padding:.4rem .95rem;font-size:.88rem;border-radius:8px} /* Der Hinweis darunter gehoert zum Kasten, nicht zur Seite. */ .eh-fuss{margin:.7rem 0 0;font-size:.8rem;color:var(--leise); max-width:44rem} .a-streich b{color:var(--leise);font-weight:550} .a-streich s{text-decoration-thickness:1px} .a-rabatt b{color:var(--schlecht)} /* Der Kategoriebaum. Eine Zeile je Kategorie, eingerueckt nach ihrer Tiefe. Die Tiefe steht als --t an der Zeile; die senkrechten Hilfslinien zeichnet ein sich wiederholender Verlauf. Damit braucht es weder verschachteltes Markup noch die Kenntnis, welches Kind das letzte ist - beides waere eine zweite Fassung der Baumstruktur, die schon in der Datenbank steht. Keine Trennlinien zwischen den Zeilen und keine Kaesten: die Linien sollen SENKRECHT laufen, waagerechte daneben haben den Baum zerschnitten statt ihn zu zeigen. Was eine Zeile ueber sich sagt, steht hinter dem Namen - so stehen die Namen untereinander und man liest den Baum. */ .k-stand{font-size:.85rem;margin:1rem 0 .5rem} .k-legende{display:flex;gap:.9rem;flex-wrap:wrap;color:var(--leise); font-size:.8rem;margin:0 0 .5rem;align-items:center} .k-legende span{display:inline-flex;align-items:center;gap:.3rem} .kbaum{list-style:none;margin:0;padding:.55rem .8rem;background:var(--flaeche); border:1px solid var(--rand);border-radius:10px} .kbaum li{position:relative;display:flex;align-items:center;gap:.4rem; flex-wrap:wrap;font-size:.9rem;min-height:1.85rem; padding-left:calc(var(--t) * 1.4rem)} /* D689 (07.10.2026), Betreiber schickte ein Bild (H7 30750): eine DRITTE Linie lief durch den Anfang der Namen ("G|elpads") - der Streifen war genau t * 1.4rem breit, der naechste Strich begann exakt an seiner Kante und erschien durch Rundung trotzdem, dort wo der Text beginnt. Jetzt endet der Streifen .7rem vorher. */ .kbaum li::before{content:"";position:absolute;pointer-events:none; left:.42rem;top:0;bottom:0;width:max(0px, calc(var(--t) * 1.4rem - .7rem)); background:repeating-linear-gradient(to right, var(--rand) 0 1px, transparent 1px 1.4rem)} /* Ein Ast faengt oben etwas Luft. Der erste nicht - der steht schon unter dem Rand. */ .kbaum li.k-wurzel{margin-top:.5rem} .kbaum li.k-wurzel:first-child{margin-top:0} .kbaum li.k-inhalt{opacity:.7} .k-name{color:var(--text)} .kbaum li.k-wurzel > .k-name{font-weight:600} .kbaum li.k-nurweg > .k-name{color:var(--leise)} .kbaum li.k-aus > .k-name{color:var(--leise);text-decoration:line-through} /* Die Zeichen stehen HINTER dem Namen, in einem gefuellten Kreis: als Reihe vorweg haben sie die Namen gegeneinander verschoben, und der Baum war nicht mehr an einer Kante abzulesen. */ .k-syms{display:inline-flex;gap:.25rem;flex:none} /* .ki-marke ist dasselbe Zeichen wie im Kategoriebaum, nur auch ausserhalb davon verwendbar - ein zweites Sinnbild fuer dieselbe Sache waere eines zu viel. Wo es steht, hat die KI gearbeitet. */ .k-sym,.ki-marke{display:inline-flex;align-items:center; justify-content:center;width:1.15rem;height:1.15rem;border-radius:50%; flex:none;border:0;font-style:normal;font-size:.72rem;line-height:1} .k-s-plenty{color:var(--gut);background:var(--gut-bg)} .k-s-ki,.ki-marke{color:var(--akzent);background:var(--akzent-bg)} .k-s-hand{color:var(--warn);background:var(--warn-bg)} /* Rot bleibt dem vorbehalten, was tatsaechlich etwas wegnimmt. Ein abgewaehlter Vorschlag tut gar nichts - er ist grau. */ .k-s-weg{color:var(--schlecht);background:var(--schlecht-bg);font-weight:700} .k-s-aus{color:var(--leise);background:var(--bg)} /* Die Begruendung der KI kommt beim Ueberfahren, nicht in der Zeile: sie ist ein bis drei Saetze lang, und drei davon untereinander verdecken den Baum, um den es geht. Mit tabindex auch ueber die Tastatur. */ .k-hinweis{position:relative;display:inline-flex;align-items:center; justify-content:center;width:1.05rem;height:1.05rem;flex:none; border:1px solid var(--rand);border-radius:50%;color:var(--leise); font-size:.7rem;font-weight:700;font-style:normal;cursor:help} .k-hinweis:hover,.k-hinweis:focus-visible{border-color:var(--akzent); color:var(--akzent);outline:none} .k-blase{position:absolute;left:0;bottom:calc(100% + .4rem);z-index:30; width:max-content;max-width:min(30rem,60vw); background:var(--flaeche);color:var(--text);border:1px solid var(--rand); border-radius:8px;padding:.5rem .7rem;font-size:.85rem;font-weight:400; line-height:1.45;text-align:left;white-space:normal; box-shadow:0 6px 20px rgba(0,0,0,.18); opacity:0;visibility:hidden;transition:opacity .12s ease} .k-hinweis:hover .k-blase,.k-hinweis:focus-visible .k-blase{opacity:1; visibility:visible} /* Die Knoepfe stehen HINTER der Zeile, nicht am rechten Rand. Mit margin-left:auto sassen sie ganz aussen - bei einem Fenster von 1400 px war das eine halbe Bildschirmbreite vom Namen entfernt, und der Knopf, der ohnehin erst beim Ueberfahren kommt, war nur mit einer Reise dorthin zu treffen. Jetzt folgen sie dem, worauf sie sich beziehen. Zurueck halten sie sich trotzdem: bei dreissig Zeilen waere eine Reihe kraeftiger Knoepfe lauter als der Baum. Wo etwas zu entscheiden ist, stehen sie da; was nur moeglich waere - eine Zwischenebene mitnehmen, eine Teilzuordnung ausweiten -, kommt beim Ueberfahren der Zeile. Erreichbar bleibt beides: dieselben Kategorien nimmt auch die Auswahl darunter auf. */ .k-tat{margin-left:.35rem;display:flex;gap:.3rem;flex:none} .k-tat form{margin:0} .k-tat button{padding:.1rem .5rem;border:1px solid var(--rand); border-radius:6px;background:transparent;color:var(--leise); font:inherit;font-size:.8rem;cursor:pointer} .k-tat button:hover:enabled{border-color:var(--akzent);color:var(--akzent)} .k-tat button.k-ja:hover:enabled{border-color:var(--gut);color:var(--gut)} .k-tat button.k-nein:hover:enabled{border-color:var(--schlecht); color:var(--schlecht)} /* display:none, nicht visibility:hidden - sonst haelt der unsichtbare Knopf seinen Platz, und auf schmalen Fenstern schiebt er sich in eine zweite, leer aussehende Zeile. Etwas kommt hinter ihm ohnehin nicht, ein Sprung beim Einblenden ist also nicht zu befuerchten. */ .k-tat.k-still{display:none} .kbaum li:hover .k-tat.k-still{display:flex} /* Die Auswahl: derselbe Baum, nur zum Anhaken. Vorher stand hier ein Textfeld mit Vervollstaendigung. Das setzte voraus, dass man den Pfad schon kennt - wer eine passende Kategorie SUCHT, kennt ihn gerade nicht. */ .k-wahl-huelle,.eig-huelle{margin:1.1rem 0 .2rem} /* Der Weg zu den ubrigen 796 Kategorien. Vorher ein .knopf-leise: grauer Text auf grauem Grund, neben einem Baum voller Farbe kaum zu sehen. Dabei ist er die eine Handlung, die es in diesem Abschnitt noch gibt. Umrissen und nicht gefuellt: gefuellt ist der Schreibknopf oben, und der aendert, was Kunden sehen. Hier wird nur etwas aufgeklappt. */ .k-wahl-auf,.eig-auf{display:inline-flex;align-items:center;gap:.5rem; padding:.45rem .9rem .45rem .75rem;border:1px solid var(--akzent); border-radius:8px;background:var(--flaeche);color:var(--akzent); font:inherit;font-size:.9rem;font-weight:600;cursor:pointer} .k-wahl-auf::before,.eig-auf::before{content:"+";font-size:1.1rem;font-weight:700; line-height:1;width:.9rem;text-align:center} .k-wahl-auf[aria-expanded=true]::before, [open] > .eig-auf::before{content:"−"} .k-wahl-auf:hover,.eig-auf:hover{background:var(--akzent-bg)} /* Die aufgeklappte Auswahl ist eine KARTE unter dem Knopf: eigener Grund, Rahmen, 12px Rundung. Der Knopf bleibt darueber und ausserhalb - er gehoert zur Seite, die Karte ist das, was er hervorholt. Dieselbe Karte tragen die Kategorien und die Eigenschaften. Bei den Eigenschaften hing das Formular vorher frei unter dem Knopf, mit nichts als einem padding-top: drei Eingaben ohne Rahmen mitten auf der Seite, waehrend nebenan im Kategoriereiter dieselbe Handlung eine ordentliche Karte bekam. .eig-tafel und nicht .eig-huelle: die Huelle tragen BEIDE Aufnahme- kaesten - der Cross-Selling-Kasten ist "eig-huelle cs-huelle" und rahmt sich selbst schon, samt Knopf. Ein eigener Name ist ehrlicher als ein :not(), und er sagt beim Lesen, welcher Kasten gemeint ist. */ .k-wahl, .eig-tafel .eig-form{margin-top:.6rem;background:var(--flaeche); border:1px solid var(--rand);border-radius:12px} /* Die Polsterung sitzt bei den Kategorien in der Kopfzeile (.k-wahl-kopf), weil darunter noch die Liste kommt. Bei den Eigenschaften IST die Zeile die ganze Karte - dieselben Masse, nur direkt am Formular. */ .eig-tafel .eig-form{padding:.7rem .9rem} /* Der eigene Abstand der Huelle faellt weg, die Karte bringt ihren margin-top selbst mit - sonst stuenden .8rem und .6rem uebereinander. */ .eig-tafel .eig-feld{padding-top:0} .k-wahl-kopf{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap; padding:.7rem .9rem;border-bottom:1px solid var(--rand); position:sticky;top:0;background:var(--flaeche);border-radius:12px 12px 0 0} .k-wahl-suche{flex:1 1 16rem;padding:.45rem .7rem;border:1px solid var(--rand); border-radius:8px;background:var(--bg);color:var(--text);font:inherit} .k-wahl-suche:focus{outline:none;border-color:var(--akzent); background:var(--flaeche)} .k-wahl-zahl{font-size:.85rem;font-variant-numeric:tabular-nums} .k-wahl-fuer{display:inline-flex;align-items:center;gap:.35rem;flex:none; color:var(--leise);font-size:.85rem} .k-wahl-fuer select{max-width:18rem;padding:.3rem .45rem; border:1px solid var(--rand);border-radius:8px;background:var(--flaeche); color:var(--text);font:inherit;font-size:.85rem} .k-wahl-leer{padding:.7rem .9rem;font-size:.88rem} /* Der Rollbereich: die 798 Kategorien sind mehr, als auf einen Bildschirm passt, und der Baum oberhalb soll nicht weggeschoben werden. */ .kwahl{list-style:none;margin:0;padding:.45rem .7rem .6rem;max-height:28rem; overflow-y:auto} .kwahl ul{list-style:none;margin:0;padding:0 0 0 1.6rem; border-left:1px solid var(--rand)} /* Die ganze Zeile klappt auf, nicht nur der Winkel davor. Vier Ebenen tief zu gehen hiess vorher, viermal ein 17-Pixel-Ziel zu treffen. */ .kw-zeile{display:flex;align-items:center;gap:.3rem;min-height:2.1rem; border-radius:8px;padding-right:.5rem} .kw-zeile:has(button.kw-pfeil){cursor:pointer} .kw-zeile:hover{background:var(--bg)} .kw-zeile:has(input:checked){background:var(--akzent-bg)} /* Der Winkel ist gezeichnet, nicht geschrieben: zwei Rahmenkanten, um 45 Grad gedreht. Ein Zeichen haette bei jeder Schriftart anders ausgesehen, ein SVG bei 796 Knoten 95 KB gekostet. */ .kw-pfeil{width:1.8rem;height:1.8rem;flex:none;padding:0;border:0; border-radius:7px;background:none;color:var(--leise);cursor:pointer; display:inline-flex;align-items:center;justify-content:center; transition:transform .13s ease} span.kw-pfeil{cursor:default} button.kw-pfeil::before{content:"";width:.42rem;height:.42rem; margin-left:-.16rem;border-right:2px solid currentColor; border-bottom:2px solid currentColor;border-radius:1px; transform:rotate(-45deg)} button.kw-pfeil[aria-expanded=true]{transform:rotate(90deg)} button.kw-pfeil:hover{color:var(--akzent);background:var(--rand)} .kw-name{display:flex;align-items:center;gap:.45rem;font-size:.9rem; cursor:pointer;border-radius:6px;padding:.1rem .35rem} .kw-name input{margin:0;flex:none;width:1.05rem;height:1.05rem; accent-color:var(--akzent);cursor:pointer} .kw-schon{color:var(--leise);cursor:default} /* Wie viel liegt unter diesem Ast? Rechts, blass, mitlaufende Ziffern. */ .kw-zahl{margin-left:auto;padding-left:.6rem;color:var(--leise); font-size:.75rem;font-variant-numeric:tabular-nums} @media (prefers-reduced-motion:reduce){.kw-pfeil{transition:none}} .k-fuss{font-size:.82rem;margin:.5rem 0 0} .gruppen{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap; margin:1rem 0 .5rem} .gruppen-titel{color:var(--leise);font-size:.88rem;margin-right:.2rem} .gruppen-zahl{display:inline-block;margin-left:.35rem;padding:0 .35rem; border-radius:8px;background:var(--bg);font-variant-numeric:tabular-nums; font-size:.85rem} .hinweis{background:var(--flaeche);border:1px solid var(--rand); border-left:3px solid var(--warn);border-radius:6px;padding:.8rem 1rem; color:var(--leise);font-size:.88rem;margin:1rem 0} /* Die Sichtbarkeitswahl in der Suchzeile. Ein Auswahlfeld und keine Tafel: es sind genau drei Moeglichkeiten, und fuer drei Zeilen lohnt kein Aufklappen. Dieselbe Hoehe wie alles in der Zeile. */ .filter-sicht{height:2.4rem;box-sizing:border-box;flex:none; padding:0 .6rem;border:1px solid var(--rand);border-radius:8px; background:var(--flaeche);color:var(--text);font:inherit;font-size:.9rem} .filter-sicht:hover{border-color:var(--akzent)} /* Die feste Beschriftung einer Auswahltafel. Sie bleibt IMMER stehen, der gewaehlte Wert steht daneben. Vorher trug der Knopf nur den Wert - und sobald in beiden Tafeln etwas gewaehlt war, las man "eBay Germany" neben "BUSSE" und wusste nicht mehr, welcher Knopf welcher ist. Zwei gleich aussehende Knoepfe nebeneinander sind kein Filter, sondern ein Raetsel. Grau und klein wie eine Feldbeschriftung, der Wert in Textfarbe - damit liest man beim Ueberfliegen zuerst den Wert und findet die Beschriftung, wenn man sie braucht. */ .hf-marke{flex:none;color:var(--leise);font-size:.78rem;font-weight:600; text-transform:uppercase;letter-spacing:.03em} /* Ein Wertfeld gibt es nicht mehr (.hf-wert ist raus): am Knopf stehen nur noch Beschriftung, Auge und Zahl. */ [open] > .hf-auf .hf-marke{color:var(--akzent)} /* --------------------------------------------------------------------- Das Auge vor der Sichtbarkeitswahl. Dasselbe Zeichen wie auf der Artikelkachel - wer es dort gelernt hat, muss es hier nicht noch einmal lernen. Ein select kann kein Zeichen tragen, deshalb liegen beide in einer Huelle: der Rahmen sitzt an der Huelle, die Auswahl darin ist rahmenlos. Fuer den Benutzer ist es ein Bedienelement. --------------------------------------------------------------------- */ .sicht-huelle{display:inline-flex;align-items:center;gap:.4rem;flex:none; height:2.4rem;box-sizing:border-box;padding:0 .5rem 0 .6rem; border:1px solid var(--rand);border-radius:8px;background:var(--flaeche)} .sicht-huelle:hover{border-color:var(--akzent)} .sicht-huelle:focus-within{border-color:var(--akzent)} .sicht-auge{display:inline-flex;align-items:center;flex:none; color:var(--leise)} /* Die Farben wie beim Auge auf der Kachel: gruen fuer sichtbar, rot fuer nicht sichtbar. Ohne Wahl bleibt es grau - dann sagt es nichts aus. */ .sicht-auge.an{color:var(--gut)} .sicht-auge.aus{color:var(--schlecht)} .sicht-zeichen{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} /* UND DIE AUSNAHME GLEICH DANEBEN - zwei Klassen schlagen das eine Attribut der geteilten [hidden]-Regel am Ende des Blattes. */ .sicht-auge .sicht-zeichen[hidden]{display:none} /* Die Auswahl selbst traegt keinen eigenen Rahmen mehr. */ .sicht-huelle .filter-sicht{height:auto;border:0;background:transparent; padding:0;border-radius:0} .sicht-huelle .filter-sicht:hover{border-color:transparent} /* Die Zahl an einer Auswahltafel als MARKE. Eine Zahl neben einer Beschriftung liest sich sonst wie ein Teil des Wortes ("Kanal 2"). Als gefuellte Marke ist sie ein Zaehler - und "alle" bleibt Wort, weil es keiner ist. */ /* ZWEISTELLIG MITTIG. .hf-wert traegt overflow:hidden und text-overflow:ellipsis, damit ein langer Name die Zeile nicht sprengt. An der Marke war das falsch: bei zwei Ziffern klemmte der Inhalt an der Kante statt in der Mitte zu stehen. Die Marke ist nie lang - sie zaehlt -, also hebt sie beides wieder auf. flex:none, damit die Flex-Zeile sie nicht staucht. */ /* Leiser: dieselbe Fassung wie die Zahlen an den Reitern der Artikelseite - umrissen statt gefuellt, 8px statt Kreis. Eine gefuellte Marke in der Akzentfarbe zog in der Filterzeile mehr Aufmerksamkeit auf sich als der Filter selbst; sie sagt ja nur, wie viele angehakt sind. overflow/text-overflow heben die geerbten Regeln von .hf-wert auf - dort sorgen sie dafuer, dass ein langer Name die Zeile nicht sprengt, an der Marke klemmten sie bei zwei Ziffern den Inhalt an die Kante. */ .hf-marke-zahl{display:inline-flex;align-items:center;justify-content:center; flex:none;padding:0 .4rem;overflow:visible;text-overflow:clip; border:1px solid var(--rand);border-radius:8px;background:var(--flaeche); color:var(--leise);line-height:1.5; font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums} [open] > .hf-auf .hf-marke-zahl{border-color:var(--akzent); color:var(--akzent)} /* UND DIE AUSNAHME GLEICH DANEBEN - wer einer Klasse ein display gibt, schreibt die [hidden]-Ausnahme dazu. Ohne sie stand an den Filterknoepfen eine 0, wo nichts gewaehlt war; eine 0 ist aber keine leere Auskunft, sie liest sich wie eine Absicht ("Artikel ohne Hersteller"). */ .hf-marke-zahl[hidden]{display:none} /* Optionsknoepfe in einer Auswahltafel: Sichtbarkeit und Bereich. Knoepfe und keine Haken, weil es je eine Entscheidung aus mehreren ist - und ohne Skript bleibt die Tafel damit bedienbar. */ .hf-wahlblock{display:flex;flex-direction:column;gap:.1rem; padding:.1rem 0 .35rem} .hf-wahlblock + .hf-wahlblock{margin-top:.35rem;padding-top:.45rem; border-top:1px solid var(--rand)} .hf-wahlblock + [data-kanalblock]{margin-top:.45rem;padding-top:.5rem; border-top:1px solid var(--rand)} .hf-wahl{display:flex;align-items:center;gap:.5rem;cursor:pointer; padding:.28rem .45rem;border-radius:6px;font-size:.88rem} .hf-wahl:hover{background:var(--kopf)} .hf-wahl input{cursor:pointer} /* Die Befundpille ueber der Liste - dieselbe geteilte Pille wie auf der Artikelkachel, hier aber als VERWEISE: ein Klick filtert auf die Stufe, ein zweiter hebt den Filter auf. Etwas kleiner als auf der Kachel (2.1rem waere in der Werkzeugzeile der groesste Klotz) und ohne Unterstreichung, weil sie als Pille und nicht als Link gelesen werden soll. */ /* Die Pille ueber der LISTE zaehlt ARTIKEL, nicht Regeln - und das werden bei Horse Shop 5.284 Fehler und 6.133 Warnungen. Die Kammer erbt von der Kartenpille flex:1 1 0 mit min-width:0, gebaut fuer ein- und zweistellige Regelzahlen in einem 6.8rem-Gehaeuse; hier quetscht sie eine vierstellige Zahl. Gemeldet 15.09.2026: "Die breite ist nicht dynamisch." Also: die Kammer nimmt, was ihr Inhalt braucht, und das Gehaeuse waechst mit. */ .gf-pille{height:2rem;width:auto;text-decoration:none} .gf-pille .a-mld{flex:0 0 auto;min-width:2.6rem;white-space:nowrap; padding:0 .6rem;text-decoration:none;cursor:pointer; transition:background .12s ease} .gf-pille .a-mld:hover{background:var(--kopf)} /* Die gewaehlte Haelfte gefuellt: sie ist ein Zustand, kein Angebot. Der blasse Grund der Stufe, nicht der Akzent - sonst hiesse blau "Fehler". */ .gf-pille .a-mld-fehler.a-mld-aktiv{background:var(--schlecht-bg)} .gf-pille .a-mld-warn.a-mld-aktiv{background:var(--warn-bg)} .gf-pille .a-mld-aktiv{font-weight:700} /* --------------------------------------------------------------------- Eine Gruppenzeile der Sichtbarkeitstafel: Haken, Name, zweigeteilte Pille. Der Haken sagt, OB die Gruppe zaehlt, die Pille WIE. Ist der Haken aus, tritt die Pille zurueck - sie ist dann ohne Wirkung, und etwas Wirkungsloses soll nicht aussehen wie etwas Wirksames. --------------------------------------------------------------------- */ .sg-zeile{display:flex;align-items:center;gap:.6rem;padding:.3rem .45rem; border-radius:6px} .sg-zeile:hover{background:var(--kopf)} .sg-haken{display:flex;align-items:center;gap:.5rem;flex:1 1 auto; min-width:0;cursor:pointer;font-size:.88rem} .sg-haken input{cursor:pointer;flex:none} .sg-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Die zweigeteilte Pille. Ein Gehaeuse, zwei Kammern, eine Trennlinie - dieselbe Form wie die Befundpille ueber der Liste. */ .sg-pille{display:inline-flex;align-items:stretch;flex:none; border:1px solid var(--rand);border-radius:99px;overflow:hidden; background:var(--flaeche);transition:opacity .12s ease} .sg-teil{display:inline-flex;align-items:center;cursor:pointer; padding:.2rem .6rem;font-size:.78rem;color:var(--leise); white-space:nowrap;transition:background .12s ease,color .12s ease} .sg-teil + .sg-teil{border-left:1px solid var(--rand)} /* Dasselbe Auge wie an der Artikelzeile - wer es dort gelernt hat, muss es hier nicht noch einmal lernen. Es faerbt sich ueber currentColor mit der Kammer: grau, solange nicht gewaehlt, dann gruen oder rot. */ .sg-teil svg{width:.95rem;height:.95rem;flex:none;margin-right:.35rem; fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} /* Der Knopf selbst ist weg - die Kammer IST der Knopf. Erreichbar bleibt er ueber die Tastatur, deshalb nicht display:none, sondern nur unsichtbar und ohne Platz. */ .sg-teil input{position:absolute;opacity:0;width:0;height:0} .sg-teil:hover{background:var(--kopf);color:var(--text)} /* Gewaehlt: blass hinterlegt in der Farbe der Aussage. Gruen fuer sichtbar, rot fuer nicht sichtbar - dieselben Farben wie das Auge. */ .sg-teil:has(input:checked){font-weight:650} .sg-teil:first-child:has(input:checked){background:var(--gut-bg); color:var(--gut)} .sg-teil:last-child:has(input:checked){background:var(--schlecht-bg); color:var(--schlecht)} .sg-teil:has(input:focus-visible){outline:2px solid var(--akzent); outline-offset:-2px} /* Ohne Haken ist die Pille wirkungslos und sagt das auch. */ .sg-zeile.sg-aus .sg-pille{opacity:.4} @media (prefers-reduced-motion:reduce){ .sg-pille,.sg-teil{transition:none}} /* ===================================================================== DER ARTIKELASSISTENT Ein Fenster ueber der Liste, eine Stufenleiste, ein Feld darunter, das bei jedem Schritt komplett ausgetauscht wird. ===================================================================== */ /* Der Knopf in der Kachel. Fassung wie "Artikel" daneben, aber mit Akzentrand: es ist der Weg, den man nehmen SOLL, wenn ein Artikel von vorn bis hinten durchgesehen wird. Gefuellt waere er zu laut - fuenfzig blaue Knoepfe untereinander sind kein Hinweis mehr, sondern Tapete. */ /* FESTE BREITE FUER BEIDE ZUSTAENDE. Der Knopf zeigt mal "Assistent", mal "80 %" - verschieden lange Worte an derselben Stelle. Ohne feste Breite spraenge die Kachel, sobald ein Durchlauf beginnt oder endet, und in einer Liste aus fuenfzig Kacheln faellt das als Unruhe auf. 7,2rem, weil das Wort "Assistent" mit Zeichen und Polsterung knapp darunter bleibt: der Knopf wird also nicht breiter als vorher, und die Zahl bekommt denselben Platz. Dasselbe Vorgehen wie bei der Artikelnummer in der Listenansicht, die aus demselben Grund eine Mindestbreite traegt. */ .a-assistent{display:inline-flex;align-items:center;justify-content:center; gap:.4rem;flex:none;min-width:7.2rem; height:2.1rem;padding:0 .8rem 0 .6rem; border:1px solid var(--akzent);border-radius:8px; background:var(--flaeche);color:var(--akzent);font:inherit; font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap; transition:background .12s ease} .a-assistent:hover{background:var(--akzent);color:#fff} .a-assistent svg{width:15px;height:15px;flex:none;fill:none; stroke:currentColor;stroke-width:1.5;stroke-linecap:round; stroke-linejoin:round} @media (prefers-reduced-motion:reduce){.a-assistent{transition:none}} /* Laeuft ein Durchlauf, traegt der Knopf die Zahl statt des Wortes und darunter einen Streifen. ZURUECKHALTEND, nicht gefuellt. Der erste Versuch war blau ausgemalt und 7,4rem breit - "ganz schoen auffaellig" und breiter als der Knopf daneben. Er faellt jetzt durch die ZAHL auf, die dort sonst nicht steht, und durch den Streifen an der Unterkante; das genuegt, um ihn in fuenfzig Kacheln zu finden. Die feste Breite steht an .a-assistent und gilt damit fuer BEIDE Zustaende - nicht nur fuer den laufenden. Nur so bleibt die Kachel ruhig, wenn ein Durchlauf beginnt oder endet. position:relative fuer den Streifen an der Unterkante. */ .a-assistent-laeuft{position:relative;overflow:hidden; font-variant-numeric:tabular-nums} .a-assistent-bahn{position:absolute;left:0;right:0;bottom:0;height:3px; background:var(--rand)} .a-assistent-fuell{display:block;height:100%;background:var(--akzent); transition:width .2s ease} .a-assistent-laeuft:hover .a-assistent-fuell{background:#fff} @media (prefers-reduced-motion:reduce){ .a-assistent-fuell{transition:none}} /* Das Fenster. bringt Abdunkeln, Tastaturfalle und Escape mit - was hier steht, ist nur Groesse und Fassung. */ /* EIN ROLLBALKEN, NICHT ZWEI. Vorher rollte das selbst UND .as-inhalt darin - zwei Balken nebeneinander, und keiner von beiden fuehrte dorthin, wo man hinwollte. Der Browser gibt einem von sich aus overflow:auto; wer darin noch einmal etwas rollen laesst, bekommt beides. Jetzt: das Fenster schneidet ab (overflow:hidden), die Saeule darin verteilt, und gerollt wird genau eine Stelle - das Feld in der Mitte. Kopf, Stufenleiste und Fuss bleiben dabei stehen, wo sie sind. */ .as-fenster{width:min(46rem,94vw);height:min(88vh,52rem);padding:0; display:flex;flex-direction:column;overflow:hidden; border:1px solid var(--rand-stark);border-radius:14px; background:var(--flaeche);color:var(--text); box-shadow:0 18px 48px rgba(0,0,0,.28)} /* UND DIE AUSNAHME GLEICH DANEBEN — zum dritten Mal dieselbe Falle. Das Blatt des BROWSERS sagt dialog:not([open]){display:none}. Jede Autorenregel schlaegt es, egal wie spezifisch — und die Zeile darueber gibt .as-fenster ein display:flex. Ergebnis: das geschlossene Fenster blieb als weisser Kasten unter der Artikelliste stehen, von Anfang an und nach jedem Schliessen. Es sah aus, als liesse es sich nicht schliessen; in Wahrheit war es nie weg. Vor .k-sym und .eh-feld hat es [hidden] erwischt, hier ist es :not([open]) — dieselbe Ursache, ein anderes Attribut. dialog davor, damit die eigenstaendige Seite nicht mitverschwindet: dort traegt ein gewoehnliches
dieselbe Klasse und hat nie ein open-Attribut. */ dialog.as-fenster:not([open]){display:none} /* ===== EIN BALKEN JE KI-LAUF ===== Statt einer Gesamtzahl ueber dem Fenster: vier (fuenf) Balken untereinander, je einer an seinem Lauf. Der Betreiber: "Hier moechte ich jeden unterpunkt mit einer statusbar haben." Drei Bilder, und jedes sagt genau eines: laeuft ein Stueck wandert hin und her. Wir WISSEN nicht, wie weit die KI ist - ein Claude-Lauf meldet keinen Fortschritt. Eine Prozentzahl waere hier erfunden; die Bewegung sagt nur "es arbeitet", und mehr wissen wir nicht. fertig voll. offen leer. fehler voll und rot - auch das ist ein Ende. */ /* EINE ZEILE, VIER SPALTEN - und die mittlere traegt den Balken. Zeichen | Name (feste Breite) | Balken | Posten. Die feste Namensspalte ist der Grund fuer das ganze Raster: nur so fangen alle Balken an derselben Stelle an. "Steckbrief" und "Cross-Selling" sind verschieden lang; ohne sie begaenne jeder Balken woanders, und aus fuenf Zeilen wuerden fuenf Einzelangaben. Zwei Traeger, dieselben Spalten: das
  • bei den vier Laeufen, das beim Steckbrief (dort liegen die Teile eine Ebene tiefer). */ .as-zeile.as-k-zeile,.as-sb-kopf{display:grid; grid-template-columns:auto 8.5rem 1fr auto; align-items:center;gap:.65rem} /* Der Steckbrief hat KEINE fünfte Spalte mehr: sein Pfeil steht im Namen. Damit sind beide Raster gleich, und alle vier Spaltenkanten fluchten - auch die rechte, an der die Posten stehen. */ .as-k-name{font-weight:600;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} /* Die Posten hinten und rechtsbuendig: sie sind die Auskunft, die man sucht, wenn der Balken schon gesagt hat, wie weit es ist. */ .as-k-satz{color:var(--leise);font-size:.8rem;text-align:right; white-space:nowrap} /* Die Zeile "Varianten aktivieren" sagt, was sich gegenueber dem Ist-Stand aendert. Aendert sich etwas, steht es kraeftig da - es ist der einzige Satz im Fenster, hinter dem eine Veroeffentlichung haengt. */ .as-akt-aendert{color:var(--gut);font-weight:600} .as-bar{display:block;min-width:2rem;height:4px;border-radius:99px; background:var(--rand);overflow:hidden} .as-bar-fuell{display:block;width:0;height:100%;border-radius:99px; background:var(--akzent);transition:width .3s ease} .as-k-laeuft .as-bar-fuell{width:35%;animation:as-lauf 1.3s ease-in-out infinite; background:var(--warn)} .as-k-fertig .as-bar-fuell{width:100%;background:var(--gut)} /* SCHREIBT: der Balken steht auf einer BESTIMMTEN Breite - sie kommt als style vom Server, weil nur er weiss, wie viele Posten schon durch sind. Deshalb hier keine width: sie wuerde die inline ueberschreiben, wenn sie spaeter im Blatt staende. */ .as-k-schreibt .as-bar-fuell{background:var(--akzent)} /* Nichts zu tun: der Balken bleibt leer und blass - eine Zeile, die nichts fordert, soll auch nichts behaupten. */ .as-k-leer{opacity:.6} .as-k-fehler .as-bar-fuell{width:100%;background:var(--schlecht)} @media (prefers-reduced-motion:reduce){ .as-k-laeuft .as-bar-fuell{width:100%;animation:none;opacity:.5}} /* Die Restzeit unter den Balken - die einzige Zahl, die hier ehrlich ist, denn sie stammt aus gemessenen Laufzeiten und nicht aus einer Behauptung ueber den laufenden Auftrag. */ .as-restzeit{margin-top:.8rem} /* ===== Der Steckbrief haengt an SEINER Zeile ===== Ein Pfeil im Kreis rechts, kein zweiter Listenpunkt darunter. Zwei Eintraege fuer eine Sache lasen sich wie zwei Sachen. */ /* DAS
    MUSS DIE ZEILE AUSFUELLEN. Sein
  • ist ein Flex-Behaelter (.as-zeile), und ein Flex-Kind ohne Angabe nimmt nur die Breite seines Inhalts. Geschlossen war das die Breite der Kopfzeile - der Balken darin blieb ein Stummel. Aufgeklappt zog ihn der breite Steckbrieftext auf volle Breite, und genau so wurde es gemeldet: "im geschlossenen modus eine zu kurze prozessbar, im offenen modus passt es". min-width:0, damit der lange Text die Spalte nicht aufblaeht. */ .as-sb{display:block;flex:1 1 auto;min-width:0} .as-sb-kopf{list-style:none;cursor:pointer} .as-sb-kopf::-webkit-details-marker{display:none} .as-sb-pfeil{display:inline-block;vertical-align:-.22em;margin-left:.3rem; width:1.05rem;height:1.05rem;color:var(--leise); transition:transform .15s ease,color .15s ease} .as-sb-pfeil svg{width:100%;height:100%;fill:none;stroke:currentColor; stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round} .as-sb-kopf:hover .as-sb-pfeil{color:var(--akzent)} .as-sb[open] .as-sb-pfeil{transform:rotate(180deg);color:var(--akzent)} .as-sb-inhalt{margin:.6rem 0 .2rem 2.2rem} /* Der Steckbrief als LISTE. Die Produktart ist die Ueberschrift, "kurz" die Einleitung, der Rest eine Definitionsliste mit fester Beschriftungsspalte - dieselbe Ordnung wie bei den KI-Zeilen darueber, und aus demselben Grund: was untereinander steht, liest man als Spalte. */ .as-sb-art{margin:0;font-size:.92rem;font-weight:700} .as-sb-kurz{margin:.15rem 0 .7rem;font-size:.84rem;line-height:1.5; color:var(--text)} .as-sb-liste{display:grid;grid-template-columns:7rem 1fr;gap:.35rem .8rem; margin:0;font-size:.82rem;line-height:1.5} .as-sb-liste dt{color:var(--leise);font-weight:600} .as-sb-liste dd{margin:0;overflow-wrap:anywhere} /* Merkmale kommen als Liste zurueck und bleiben eine: sie sind der einzige Punkt, an dem der Steckbrief mehrere gleichrangige Angaben hat - in einer Zeile mit Kommas waeren sie ein Satz, der keiner ist. */ .as-sb-liste ul{margin:0;padding-left:1.1rem} .as-sb-liste li{margin:.1rem 0} @media (max-width:34rem){ .as-sb-liste{grid-template-columns:1fr;gap:.1rem .8rem} .as-sb-liste dd{margin-bottom:.45rem}} @media (prefers-reduced-motion:reduce){.as-sb-pfeil{transition:none}} /* Der LADEbalken daneben: er sagt nur, dass gerade mit dem Server gesprochen wird, und ist deshalb duenn und ohne Zahl. Zwei Balken waeren einer zu viel - deshalb sitzt er ganz oben am Rand, als Strich, nicht als Anzeige. */ .as-balken{flex:none;height:3px;overflow:hidden;background:var(--rand); border-radius:14px 14px 0 0} /* UND DIE AUSNAHME GLEICH DANEBEN. */ .as-balken[hidden]{display:none} .as-balken-fuell{width:40%;height:100%;background:var(--akzent); border-radius:99px;animation:as-lauf 1.1s ease-in-out infinite} @keyframes as-lauf{ from{transform:translateX(-100%)} to{transform:translateX(350%)}} @media (prefers-reduced-motion:reduce){ .as-balken-fuell{width:100%;animation:none;opacity:.55}} .as-fenster::backdrop{background:rgba(10,12,16,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)} /* Dieselbe Tafel als eigene Seite - ohne Fenster, ohne Abdunkeln. Sie erscheint, wenn die Adresse direkt aufgerufen wird: ohne Skript, aus einem Lesezeichen, oder um zu sehen, ob der Server tut, was er soll, wenn der Knopf schweigt. */ .as-seiten-huelle{display:flex;justify-content:center;padding:1.5rem 0} /* Als eigene Seite gibt es kein Fenster, das abschneiden muesste: die Tafel waechst, und gerollt wird das Seitenrollfeld. Deshalb height zurueck auf auto und das Feld ohne eigenen Balken - sonst haette man dort wieder zwei. */ .as-fenster.as-fest{position:static;height:auto;max-height:none;margin:0} .as-fest .as-inhalt{overflow:visible} .as-fest .as-feld{overflow:visible} .as-inhalt{display:flex;flex-direction:column;flex:1 1 auto; min-height:0;overflow:hidden} /* Der Kopf: Nummer, Name, Weg zur Artikelseite, Schliessen. */ /* EINE ZEILE, ALLE GLEICH HOCH - wie die Leiste der Artikelseite. Dort bestimmt die Zeilenhoehe die Knopfgroesse (align-items:stretch); hier steht nur noch eine Textzeile daneben, also ist die Groesse gesetzt: 2,4rem fuer jeden Knopf, den Nummernknopf eingeschlossen. Eine feste Zahl und nicht stretch, weil der Titel sonst die Hoehe bestimmte - und ein langer Name in einem schmalen Fenster umbricht. */ .as-kopf{display:flex;align-items:center;gap:.55rem;flex:none; padding:.7rem 1.1rem;border-bottom:1px solid var(--rand); background:var(--kopf)} /* DIE RUNDEN KNOEPFE DES KOPFES - derselbe Stil wie .subnav-zurueck in der Artikelleiste: rund, grau umrandet, gleich gross. Wer von dort kommt, soll hier nicht eine zweite Formensprache lernen. */ .as-rund{flex:none;display:inline-flex;align-items:center; justify-content:center;width:2.4rem;height:2.4rem;padding:0; border:1px solid var(--rand);border-radius:99px;background:var(--flaeche); color:var(--leise);cursor:pointer;text-decoration:none} .as-rund svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .as-rund:hover{border-color:var(--akzent);color:var(--akzent)} /* Ausgegraut heisst: es gibt ihn, er kann nur gerade nichts. Er verschwindet NICHT - sonst waenderten die Knoepfe daneben bei jedem Schritt, und das Fenster laedt bei jedem Schritt neu. */ .as-rund-aus{opacity:.35;cursor:default} .as-rund-aus:hover{border-color:var(--rand);color:var(--leise)} .as-zu:hover{border-color:var(--schlecht);color:var(--schlecht)} /* Die Nummer: derselbe Kopierknopf wie an der Artikelkachel, aber auf Knopfhoehe gebracht - wie in der Artikelleiste (.subnav .a-nr). */ .as-kopf-nr{flex:none;display:inline-flex;align-items:center;gap:.4rem; height:2.4rem;margin-right:0;padding:0 .7rem;border-radius:8px; font-size:.95rem;line-height:1} .as-titel{flex:1 1 auto;min-width:0} .as-titel h2{margin:0;font-size:1.02rem;font-weight:600; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Artikelseite und Schliessen stehen zusammen ganz rechts - der Abstand davor trennt "was dieses Fenster tut" von "wohin man geht". */ .as-kopf-seite{margin-left:auto} /* Die Stufenleiste. Sie steht IMMER da, auch vor dem Start - sie sagt, was kommt, und das ist der halbe Sinn eines Assistenten. */ /* VOLLFLAECHIG. Vier Felder, die die Breite ausfuellen und ihren Zustand als Flaeche tragen statt als Punkt daneben. Das liest sich in einem Blick, braucht eine Zeile statt zweier - und gibt der Bereichsleiste darunter etwas, woran sie haengen kann. gap:2px statt .2rem: die Felder sollen als EINE Leiste lesbar sein, nicht als vier Kacheln. */ .as-stufen{display:flex;align-items:stretch;gap:2px;flex:none; margin:0;padding:0;list-style:none; border-bottom:1px solid var(--rand);overflow:hidden} .as-stufe{display:flex;align-items:center;justify-content:center;gap:.4rem; flex:1 1 0;min-width:0;padding:.55rem .4rem; background:var(--bg);font-size:.78rem;color:var(--leise); white-space:nowrap} .as-punkt{display:flex;align-items:center;justify-content:center; width:1.3rem;height:1.3rem;flex:none;border-radius:99px; border:1px solid var(--rand-stark);background:var(--flaeche); font-size:.7rem;font-weight:700;font-variant-numeric:tabular-nums} .as-wort{overflow:hidden;text-overflow:ellipsis} /* Drei Zustaende, drei Farben — und zwar die einer Ampel, nicht die des Blattes: erledigt gruen und abgehakt hier gelb, gefuellt, kraeftig kommt noch grau Der Akzent (blau) stand vorher fuer "hier". Er ist im ganzen Dashboard die Farbe des Verweises und der Handlung; in einer Fortschrittsleiste liest man ihn als "anklickbar" statt als "hier stehst du". Gelb sagt es ohne Umweg — es ist dieselbe Farbe wie die Warnung, und "noch nicht fertig" ist dasselbe in Gruen wie eine Warnung in Rot. Entscheidung des Betreibers vom 11.09.2026. */ /* EIGENE VORSILBE FUER DIE STUFEN (as-s-...), und das aus Erfahrung: die Leiste kannte den Zustand "offen", und .as-offen gibt es im selben Blatt schon als gelben Hinweiskasten ueber dem Weiter-Knopf. Jede wartende Stufe haette dessen Polster, Grund und Farbe mitbekommen. Dieselbe Kollision wie .leer gegen die leere Pillenkammer (D-Eintrag vom 11.09.2026) - ein Name, zwei Bedeutungen. */ .as-s-fertig{background:var(--gut-bg);color:var(--gut)} .as-s-fertig .as-punkt{border-color:transparent;background:var(--gut); color:#fff} .as-s-hier{background:var(--warn-bg);color:var(--warn);font-weight:650} .as-s-hier .as-punkt{border-color:transparent;background:var(--warn); color:#fff} /* Die Meldung des letzten Handgriffs. */ .as-meldung{flex:none;margin:0;padding:.6rem 1.1rem;font-size:.85rem; border-bottom:1px solid var(--rand)} .as-m-gut{background:var(--gut-bg);color:var(--gut)} .as-m-warnung{background:var(--warn-bg);color:var(--warn)} .as-m-fehler{background:var(--schlecht-bg);color:var(--schlecht)} /* HIER wird gerollt, und nur hier. */ .as-feld{flex:1 1 auto;min-height:0;overflow-y:auto;padding:1.1rem} /* --------------------------------------------------------------------- KEIN WAAGERECHTER BALKEN IM FENSTER. Die Eigenschafts- und die Cross-Selling-Liste sind fuer die Artikelseite gebaut - dort ist Platz. Im Fenster (46rem, abzueglich Polster gut 40rem) lief beides ueber. Und weil .as-feld senkrecht rollt, macht der Browser aus dem waagerechten "visible" ein "auto": ein zweiter Balken, den niemand braucht. Zwei Ursachen, und die zweite ist eine Falle. --------------------------------------------------------------------- */ /* 1. HARTE MINDESTBREITEN. Auf der Artikelseite halten sie die Spalten in der Flucht; hier sind sie breiter als das Fenster. Die Spezifitaet muss die der Vorgaben schlagen - deshalb stehen die Waehler so ausfuehrlich da. */ .as-feld .eig-liste .eig-zeile > .k-name{min-width:0} .as-feld .cs-name{min-width:0;white-space:normal} .as-feld .k-name,.as-feld .eig-wert{min-width:0;overflow-wrap:anywhere} /* 2. DIE BEGRUENDUNGSBLASE. visibility:hidden macht ein Element unsichtbar - es NIMMT IHM ABER NICHT SEINEN PLATZ IM UEBERLAUF. Die Blase ist absolut positioniert, bis zu 30rem breit und haengt an einem Zeichen, das weit rechts in der Zeile steht; sie ragte also staendig ueber den Rand hinaus und zog den Balken - auch wenn niemand sie sah. display:none nimmt ihn ihr. Die Einblendung ueber opacity bleibt wirkungslos, das ist der Preis: ein Tooltip, der ohne Ueberblenden erscheint, gegen einen Rollbalken, der immer da ist. Und schmaler: 30rem sind mehr als zwei Drittel des Fensters. */ .as-feld .k-blase{display:none;max-width:min(22rem,70%)} .as-feld .k-hinweis:hover .k-blase, .as-feld .k-hinweis:focus-visible .k-blase{display:block} .as-satz{margin:0 0 .7rem;font-size:.9rem;line-height:1.5} .as-leise{color:var(--leise);font-size:.82rem} .as-gut-txt{color:var(--gut);font-weight:600} /* Die Befundliste. Kreis fuer Fehler, Dreieck fuer Warnung - dieselben Formen wie auf der Artikelkachel und in der Befundpille. Wer sie dort gelernt hat, muss sie hier nicht noch einmal lernen. */ .as-liste{margin:0;padding:0;list-style:none; display:flex;flex-direction:column;gap:.1rem} .as-zeile{display:flex;align-items:flex-start;gap:.65rem; padding:.5rem .55rem;border-radius:8px;font-size:.88rem} /* Kein Zebra mehr: die Kreise geben der Liste schon einen Takt, und gestreifte Zeilen unter farbigen Kreisen sind zwei Ordnungen ueber derselben Sache. Ein Befund bekommt stattdessen etwas Luft und einen ruhigen Grund, damit der Loesungsvorschlag darunter dazugehoert. */ .as-zeile.as-z-trifft{background:var(--bg);align-items:center} /* --------------------------------------------------------------------- Was in Ordnung ist, klappt zusammen. Einundzwanzig Haken untereinander sind kein Protokoll, sondern eine Wand. Sie sollen nachschlagbar sein, nicht im Weg stehen - deshalb eine Zeile, die sagt WIE VIELE, und dahinter die Liste. --------------------------------------------------------------------- */ .as-erledigt{margin-top:1rem;border-top:1px solid var(--rand); padding-top:.7rem} .as-erledigt > summary{display:flex;align-items:center;gap:.5rem; list-style:none;cursor:pointer;font-size:.85rem;color:var(--leise); padding:.3rem .55rem;border-radius:8px} .as-erledigt > summary::-webkit-details-marker{display:none} .as-erledigt > summary:hover{background:var(--bg);color:var(--text)} .as-erledigt-winkel{width:.85rem;height:.85rem;flex:none;fill:none; stroke:currentColor;stroke-width:1.8;stroke-linecap:round; stroke-linejoin:round;transition:transform .12s ease} .as-erledigt[open] .as-erledigt-winkel{transform:rotate(180deg)} @media (prefers-reduced-motion:reduce){.as-erledigt-winkel{transition:none}} /* Der Haken in der Kopfzeile: dieselbe Fassung wie in den Zeilen darunter, damit man sieht, wovon die Zahl spricht. */ .as-erledigt-punkt{display:flex;align-items:center;justify-content:center; width:1.35rem;height:1.35rem;flex:none;border-radius:99px; background:var(--gut-bg);color:var(--gut)} .as-erledigt-punkt svg{width:.8rem;height:.8rem;fill:none; stroke:currentColor;stroke-width:2;stroke-linecap:round; stroke-linejoin:round} /* Ein heller Kreis, darin das Zeichen: Haken, Ausrufezeichen oder X. Die Form allein trägt die Aussage - das bleibt lesbar, wenn jemand Gruen, Orange und Rot nicht auseinanderhaelt. Der Kreis ist immer gleich gross, damit die Texte daneben in einer Flucht stehen. */ .as-zeichen{flex:none;display:flex;align-items:center;justify-content:center; width:1.55rem;height:1.55rem;border-radius:99px; background:var(--bg);border:1px solid var(--rand);color:var(--leise)} .as-zeile svg{width:.92rem;height:.92rem;fill:none;stroke:currentColor; stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} /* Die Farbe traegt der KREIS, nicht die Zeile: eine Liste, in der sechsundzwanzig Zeilen farbig hinterlegt sind, ist ein Farbkasten und kein Pruefprotokoll. Pastell gefuellt, ohne Rand - der Rand ist fuer den leeren Kreis da, wo nichts entschieden ist. */ .as-zeile.as-z-trifft.as-fehler .as-zeichen{color:var(--schlecht); background:var(--schlecht-bg);border-color:transparent} .as-zeile.as-z-trifft.as-warnung .as-zeichen{color:var(--warn); background:var(--warn-bg);border-color:transparent} .as-zeile.as-z-trifft.as-hinweis .as-zeichen{color:var(--info); background:var(--info-bg);border-color:transparent} .as-zeile.as-z-ok .as-zeichen{color:var(--gut); background:var(--gut-bg);border-color:transparent} /* Was in Ordnung ist, tritt zurueck. */ .as-zeile.as-z-ok,.as-zeile.as-z-still{color:var(--leise)} .as-text{min-width:0;flex:1 1 auto} /* Die Loesung unter dem Befund, eingerueckt: sie gehoert zu ihm und ist nicht die naechste Zeile der Liste. */ .as-loesung,.as-grund{display:block;margin-top:.15rem;font-size:.8rem; line-height:1.45} .as-loesung{color:var(--akzent)} .as-grund{color:var(--leise)} /* --------------------------------------------------------------------- Der Schieberegler. Darunter liegt ein gewoehnliches Ankreuzfeld - die Rolle ist rein im Blatt gemalt. So bleibt er mit der Tastatur bedienbar, schickt sich im Formular selbst mit und funktioniert ohne Skript. --------------------------------------------------------------------- */ .as-regler{flex:none;display:inline-flex;align-items:center;cursor:pointer} .as-regler input{position:absolute;opacity:0;width:0;height:0} .as-bahn{display:block;width:2.4rem;height:1.35rem;border-radius:99px; background:var(--rand-stark); transition:background .14s ease} .as-knauf{display:block;width:1.05rem;height:1.05rem;margin:.15rem; border-radius:99px;background:var(--flaeche); box-shadow:0 1px 3px rgba(0,0,0,.28); transition:transform .14s ease} .as-regler input:checked + .as-bahn{background:var(--gut)} .as-regler input:checked + .as-bahn .as-knauf{transform:translateX(1.05rem)} .as-regler input:focus-visible + .as-bahn{outline:2px solid var(--akzent); outline-offset:2px} @media (prefers-reduced-motion:reduce){ .as-bahn,.as-knauf{transition:none}} /* Ein laufender Auftrag. Eigene Farbe, weil es weder gut noch schlecht ist - es ist noch nicht entschieden. */ .as-m-laeuft{background:var(--kopf);color:var(--leise)} /* Unten die Knoepfe - rechtsbuendig, der weiterfuehrende zuletzt. Die Leserichtung endet dort, wo es weitergeht. */ /* --------------------------------------------------------------------- STUFE 2: DIE ANGABEN Karten statt einer Auswahlliste: es sind je drei bis vierzehn Moeglichkeiten, und man soll sie NEBENEINANDER sehen. Ein select verbirgt genau das, worum es hier geht - was zur Wahl steht. --------------------------------------------------------------------- */ /* JEDE FRAGE BEGINNT MIT EINER LINIE. Acht Fragen untereinander sind sonst ein Fliesstext aus Kacheln; die Linie sagt, wo eine Entscheidung aufhoert und die naechste anfaengt. Sie gehoert zur Frage und nicht zwischen die Bloecke: so wandert sie von selbst mit, wenn ein Block aus- oder eingeblendet wird (Saison, Jahreszeit), und es bleibt nie eine Linie ohne Inhalt stehen. margin ueber der Linie, padding darunter - sonst klebte sie am vorigen Block. */ .as-frage{margin:1.1rem 0 .5rem;padding-top:.9rem; border-top:1px solid var(--rand); font-size:.88rem;font-weight:650} /* DIE ERSTE FRAGE WIRD BENANNT, NICHT GEZAEHLT. Sie steht ohne Abstand und ohne Linie - ueber ihr ist nichts, was abzugrenzen waere. Welche das ist, sagt eine Klasse in der Vorlage. Zwei Anlaeufe mit Zaehlen sind vorher gescheitert: .as-frage:first-child traf auch "Saison", weil die das erste Kind IHRES Blocks ist .as-angaben > .as-frage:first-child traf gar nichts, weil das erste Kind des Formulars das verborgene csrf-Feld ist :first-child fragt nach dem Platz im Elternteil - und der haengt daran, was sonst noch darin steht. Ein Name haengt an nichts. */ .as-frage.as-erste{margin-top:0;padding-top:0;border-top:0} .as-wahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr)); gap:.45rem} /* Die Halbjahre brauchen mehr Platz als die uebrigen schmalen Kacheln: "Frühjahr / Sommer" bricht unter 11rem in zwei Zeilen um, und dann steht die eine Kachel zweizeilig neben der einzeiligen daneben. auto-fit statt auto-fill, damit zwei Kacheln die Reihe fuellen und keine leeren Spalten stehenbleiben. */ .as-saison .as-wahl-schmal{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))} .as-saison .as-karte-wort{white-space:nowrap} /* Die vier KI-Auftraege: dieselbe Liste wie bei den Regeln, andere Bedeutung der Zeichen. Haken fertig Ruf laeuft gerade X abgebrochen Strich noch nicht begonnen */ .as-zeile.as-k-fertig .as-zeichen{color:var(--gut); background:var(--gut-bg);border-color:transparent} .as-zeile.as-k-laeuft .as-zeichen{color:var(--warn); background:var(--warn-bg);border-color:transparent} .as-zeile.as-k-fehler .as-zeichen{color:var(--schlecht); background:var(--schlecht-bg);border-color:transparent} .as-zeile.as-k-laeuft{background:var(--bg)} /* Der Steckbrief steht UEBER den vieren und ist von ihnen abgesetzt: er ist ihre Grundlage, kein fuenfter gleichrangiger Lauf. */ .as-vorlauf{margin-bottom:.8rem;padding-bottom:.8rem; border-bottom:1px solid var(--rand)} .as-steckbrief{margin-top:.2rem} .as-steckbrief-text{margin:.5rem .55rem 0;white-space:pre-wrap; font-size:.84rem;line-height:1.5;color:var(--leise)} .as-steckbrief a{color:var(--akzent)} .as-zeile.as-k-offen{color:var(--leise)} /* --------------------------------------------------------------------- STUFE 5: die vier Bereiche als Schrittleiste. Kleiner als die Stufenleiste oben: das hier ist eine Unterteilung INNERHALB einer Stufe, und zwei gleich laute Leisten uebereinander waeren zwei Aussagen ueber dasselbe. --------------------------------------------------------------------- */ /* ===== Die Bereichsleiste: EINE ZEILE, und sie haengt an der KI-Stufe. Vorher standen Kreis, Wort und Zahl uebereinander - drei Zeilen Hoehe fuer vier Woerter, und zusammen mit dem Hauptstepper darueber sah das Fenster aus, als fange es zweimal an. Der Winkel oben zeigt auf die Mitte des KI-Feldes (--ki-mitte, im Server gerechnet). Er ist der ganze Unterschied zwischen "eine zweite Leiste" und "die Unterteilung DIESER Stufe". --------------------------------------------------------------------- */ /* gap:.5rem statt .15rem - vier Pillen, die sich beruehren, lesen sich als ein Band; mit Luft dazwischen als vier Knoepfe. Und gleiches Polster oben wie unten: vorher stand oben mehr (wegen des Winkels), und die Pillen sassen dadurch tiefer als die Mitte. */ .as-schritte{position:relative;display:flex;align-items:center;gap:.5rem; margin:-1.1rem -1.1rem 1.1rem;padding:.6rem 1.1rem; list-style:none;background:var(--bg); border-bottom:1px solid var(--rand)} /* Der Winkel: ein gekipptes Quadrat, halb im Grund versenkt. Zwei Kanten davon liegen ueber dem Rand und sehen aus wie eine Spitze. */ .as-schritte::before{content:"";position:absolute;top:-5px; left:var(--ki-mitte,62.5%);width:9px;height:9px;margin-left:-4.5px; background:var(--bg);border-left:1px solid var(--rand); border-top:1px solid var(--rand);transform:rotate(45deg)} .as-schritt{flex:0 1 auto;min-width:0} /* PILLEN. Jede traegt ihren Zustand als Form und Farbe - die Nummern 1 bis 4 sind raus: sie versprachen eine Reihenfolge, die es hier nicht gibt. Man darf springen, wohin man will. */ .as-schritt-knopf{display:flex;align-items:center;gap:.35rem; min-height:1.75rem;padding:.2rem .7rem;border:1px solid var(--rand-stark); border-radius:99px;background:var(--flaeche); color:var(--leise);font:inherit;font-size:.75rem;cursor:pointer; max-width:100%} .as-schritt-knopf:hover:not(:disabled){border-color:var(--akzent); color:var(--text)} /* disabled heisst hier "hier stehen Sie", nicht "kaputt" - also bleibt er farbig. */ .as-schritt-knopf:disabled{cursor:default;opacity:1} .as-schritt-nr{flex:none;font-size:.72rem;font-weight:700;line-height:1} .as-schritt-wort{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Die Zahl steht NUR da, wo etwas offen ist. Wo nichts offen ist, sagt das Haekchen davor schon alles. OHNE EIGENEN GRUND. Sie hatte eine Pille in der Pille - zwei Formen ineinander, und auf der gefuellten "hier"-Pille sass ein heller Fleck mit gelber Schrift darauf. Jetzt ist sie einfach fett und traegt die Farbe ihrer Pille; dass sie eine Zahl ist, sieht man daran, dass sie eine Zahl ist. */ .as-schritt-zahl{flex:none;font-size:.72rem;font-weight:700; font-variant-numeric:tabular-nums;opacity:.85} /* Dieselben drei Farben wie oben - die einer Ampel. */ .as-sch-fertig .as-schritt-knopf{border-color:var(--gut); background:var(--gut-bg);color:var(--gut)} .as-sch-hier .as-schritt-knopf{border-color:var(--warn); background:var(--warn);color:#fff;font-weight:650} /* UNGESEHEN: gestrichelt. Das ist der wichtigste Zustand der Leiste - solange einer dasteht, geht es nicht zur Aktivierung. Er braucht deshalb eine eigene FORM, nicht nur eine eigene Farbe: Farbe allein unterscheidet nicht, wer sie nicht sieht. */ .as-sch-ungesehen .as-schritt-knopf{border-style:dashed; border-color:var(--rand-stark);background:none} .as-sch-ungesehen .as-schritt-knopf:hover{border-style:solid} /* Was noch fehlt, bevor es zur Aktivierung geht. Steht ueber den Knoepfen am Fuss und erklaert den gesperrten. */ /* Der Hinweis waehrend des Schreibens: gruen, weil er eine gute Nachricht ist - es laeuft, und niemand muss dabeibleiben. */ /* ===== Der Aktivierungsregler ===== Abgesetzt unter der Liste, mit eigenem Rahmen: alle anderen Schritte bereiten vor, DIESER macht den Artikel sichtbar. Das ist der Unterschied, und er darf nicht in einer Tabellenzeile verschwinden. Grau, solange er aus ist - und gruen umrandet, sobald er an ist: das ist der einzige Zustand im Fenster, der etwas veroeffentlicht. */ .as-aktivieren{margin-top:1.2rem;padding:.8rem .9rem;border-radius:10px; border:1px solid var(--rand);background:var(--bg)} /* Gruen, sobald irgendetwas aktiviert wird - der einzige Zustand im Fenster, der etwas veroeffentlicht. */ .as-aktivieren:has(input:checked){border-color:var(--gut); background:var(--gut-bg)} /* DER BESTSELLER BESTIMMT DIE POSITION. Solange er angehakt ist, tritt das Eingabefeld zurueck und daneben steht, was stattdessen gilt. Nicht gesperrt, nur blass: wer den Bestseller wieder abhakt, soll seine Zahl noch vorfinden. Ueber :has() am Formular - dasselbe Mittel wie bei der Saisonwahl. */ .as-pos-marke{display:none;align-self:center;font-size:.82rem; color:var(--gut)} .as-angaben:has(.as-s-marke_bestseller input:checked) .as-position .as-eh-feld{ opacity:.4} .as-angaben:has(.as-s-marke_bestseller input:checked) .as-pos-marke{ display:inline} .as-akt-kopf{margin:0 0 .6rem;font-size:.88rem} .as-akt-satz{display:block;margin-top:.2rem;font-size:.8rem; color:var(--leise);line-height:1.5} /* Eine Zeile je Regler, durch eine Linie getrennt: es sind Einzelentscheidungen, und jede gilt fuer ihre Varianten. */ .as-akt-zeile{display:flex;align-items:center;gap:1rem;cursor:pointer; padding:.35rem 0;border-top:1px solid var(--rand)} .as-akt-zeile:has(input:disabled){cursor:default;opacity:.55} .as-akt-text{flex:1 1 auto;min-width:0;font-size:.85rem} .as-akt-zahl{display:block;font-size:.76rem;color:var(--leise)} .as-akt-regler{flex:none} /* Das Attribut ist eine Ueberschrift, kein Regler - es steht ohne Linie und eingerueckt darueber. */ /* Je Attribut ein Aufklapper. Der Kopf sieht aus wie eine Zwischenueberschrift und ist einer - nur dass man ihn zumachen kann. */ .as-akt-gruppe{border-top:1px solid var(--rand)} .as-akt-attribut{display:flex;align-items:center;gap:.5rem; margin:0;padding:.4rem 0;list-style:none;cursor:pointer; font-size:.78rem;font-weight:600;color:var(--leise)} .as-akt-attribut::-webkit-details-marker{display:none} .as-akt-attribut:hover{color:var(--akzent)} .as-akt-attribut .as-akt-zahl{display:inline;font-weight:400; margin-left:auto} /* Was in der Gruppe gewaehlt ist - gruen, weil es dasselbe meint wie der gruene Rahmen ringsum: hier wird etwas veroeffentlicht. */ .as-akt-gewaehlt{flex:none;padding:0 .4rem;border-radius:99px; background:var(--gut-bg);color:var(--gut);font-size:.72rem; font-weight:600} /* UND DIE AUSNAHME GLEICH DANEBEN. */ .as-akt-gewaehlt[hidden]{display:none} .as-akt-winkel{width:.9rem;height:.9rem;flex:none;fill:none; stroke:currentColor;stroke-width:1.7;stroke-linecap:round; stroke-linejoin:round;transition:transform .12s ease} .as-akt-gruppe[open] .as-akt-winkel{transform:rotate(180deg)} /* Die erste Zeile im Aufklapper braucht keine zweite Linie - der Kopf darueber hat schon eine. */ .as-akt-gruppe .as-akt-zeile:first-of-type{border-top:0} @media (prefers-reduced-motion:reduce){.as-akt-winkel{transition:none}} .as-akt-wert .as-akt-text{padding-left:.9rem} .as-hinweis-laeuft{margin:1rem 0 0;padding:.55rem .75rem;border-radius:8px; background:var(--gut-bg);color:var(--gut);font-size:.8rem} .as-hinweis-offen{margin:1rem 0 0;padding:.55rem .75rem;border-radius:8px; background:var(--warn-bg);color:var(--warn);font-size:.8rem} /* Eine Textzeile der Freigabe: Vorschlag gross, Bestand klein darunter. Der Vorschlag ist das, worueber entschieden wird - er steht oben. */ /* Mehr Luft zwischen den Textfeldern als zwischen Regelzeilen: dort ist eine Zeile ein Satz, hier ein Absatz. Ohne Abstand laesst sich beim Durchsehen nicht sagen, wo ein Feld aufhoert und das naechste anfaengt. */ .as-liste:has(.as-t-zeile){gap:.7rem} .as-t-zeile{align-items:center;background:var(--bg);padding:.8rem .75rem} .as-t-kopf{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap; font-weight:650;font-size:.82rem} /* KEIN pre-wrap mehr: der Text kommt jetzt ausgezeichnet, und dann traegt das Markup die Umbrueche. Mit pre-wrap kaemen die Zeilenenden der QUELLE zusaetzlich dazu - zwischen zwei Absaetzen stuenden vier Leerzeilen. */ .as-t-neu{display:block;margin-top:.35rem;overflow-wrap:anywhere; line-height:1.5} /* Die durchgelassenen Auszeichnungen. Sie kommen aus dem Text und duerfen das Fenster nicht sprengen: enge Absaetze, eingerueckte Listen, und eine Ueberschrift in Fett bleibt in der Schriftgroesse der Zeile. */ .as-t-neu > :first-child,.as-t-alt > :first-child{margin-top:0} .as-t-neu > :last-child,.as-t-alt > :last-child{margin-bottom:0} .as-t-neu p,.as-t-alt p{margin:.45rem 0} .as-t-neu ul,.as-t-neu ol,.as-t-alt ul,.as-t-alt ol{margin:.45rem 0; padding-left:1.2rem} .as-t-neu li,.as-t-alt li{margin:.15rem 0} .as-t-neu strong,.as-t-neu b{font-weight:700} /* Ueberschriften IM Text: fett und mit Luft darueber, aber in der Schriftgroesse der Zeile. Groesser waeren sie lauter als die Feldbezeichnung darueber - und die sagt, worueber hier entschieden wird. */ .as-t-neu h2,.as-t-neu h3,.as-t-neu h4, .as-t-alt h2,.as-t-alt h3,.as-t-alt h4{margin:.7rem 0 .25rem; font-size:1em;font-weight:700} /* Der Vergleich klappt auf. Als Wort und nicht als Kasten: er ist die Rueckfrage, nicht die Aussage. */ /* ===== Eigenschaftszeilen ===== Name und Wert nebeneinander, der Grund darunter. Dieselbe Sprache wie der Reiter der Artikelseite - wer dort gearbeitet hat, soll hier nichts Neues lesen muessen. */ .as-e-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem} .as-e-name{font-weight:600} /* Der Wert traegt den Ton, nicht der Name: bei "Material: Aussen 1200D Ripstop-Polyester" ist der Wert die Aussage. */ .as-e-wert{color:var(--akzent);overflow-wrap:anywhere} /* Die Begruendung der KI steht in der Zeile, nicht in einer Blase, die beim Ueberfahren aufgeht. Im Assistenten wird ENTSCHIEDEN - da gehoert das Warum neben den Regler und nicht hinter einen Mauszeiger. */ .as-e-grund{display:block;margin-top:.2rem;font-size:.76rem; color:var(--leise);overflow-wrap:anywhere} .as-t-vergleich{margin-top:.45rem} /* Das Aenderungsfeld - in DERSELBEN SCHRIFT wie die Editorflaeche. Stand hier bis zum 12.09.2026 in Festbreite, weil damals in jedem Feld Markup stand. Seit die zwei Markup-Felder den Editor haben, tragen die uebrigen sieben nur noch Klartext: Artikelname, Meta-Beschreibung, Suchbegriffe. Fuer Fliesstext ist Festbreite die falsche Schrift - sie sagt "hier steht Quelltext", und das stimmt nicht mehr. Gleiche Groesse und gleicher Zeilenabstand wie .as-ed-flaeche: wer in derselben Liste mal in ein Feld mit Leiste und mal in eines ohne tippt, soll nicht zwei Schriftbilder vor sich haben. */ .as-t-feld{display:block;width:100%;margin-top:.4rem;padding:.6rem .7rem; border:1px solid var(--rand);border-radius:8px;background:var(--flaeche); color:var(--text);font:inherit;font-size:.82rem;line-height:1.6; resize:vertical} .as-t-feld:hover{border-color:var(--akzent)} .as-t-feld:focus{outline:none;border-color:var(--akzent)} .as-t-hinweis{display:block;margin-top:.25rem;font-size:.74rem; color:var(--leise)} /* UND DIE AUSNAHME GLEICH DANEBEN: wer einer Klasse ein display gibt, schreibt die [hidden]-Regel dazu. Das Textfeld wird versteckt, sobald der Editor lebt - abgeschickt wird es trotzdem, denn nur disabled haelt ein Feld aus dem Formular heraus, hidden nicht. */ .as-t-feld[hidden]{display:none} .as-t-zaehler{font-variant-numeric:tabular-nums} .as-t-zuviel{color:var(--warn);font-weight:600} /* ===== Der einfache Editor ===== Nur an den zwei Feldern, die Markup tragen. Er sieht aus wie das Textfeld daneben, damit niemand zwei Sorten Eingabe lernen muss - derselbe Rahmen, derselbe Radius, dieselbe Innenluft. */ .as-ed{margin-top:.4rem;border:1px solid var(--rand);border-radius:8px; background:var(--flaeche);overflow:hidden} .as-ed:focus-within{border-color:var(--akzent)} .as-ed-leiste{display:flex;gap:.15rem;padding:.25rem .3rem; border-bottom:1px solid var(--rand);background:var(--bg)} .as-ed-knopf{min-width:1.9rem;height:1.9rem;padding:0 .4rem; border:1px solid transparent;border-radius:6px;background:none; color:var(--text);font-size:.82rem;line-height:1;cursor:pointer} .as-ed-knopf:hover{background:var(--flaeche);border-color:var(--rand)} /* Der Zustand des Cursors, nicht der des Knopfes: steht er in einem fetten Wort, ist F angeschaltet. Ohne das raet man. */ .as-ed-an{background:var(--akzent);border-color:var(--akzent);color:#fff} .as-ed-fett{font-weight:800} .as-ed-kursiv{font-style:italic;font-family:Georgia,serif} /* Der HTML-Umschalter rechts, abgesetzt: er gehoert nicht zum Formatieren, sondern zum Nachsehen. */ .as-ed-roh{margin-left:auto;font-size:.68rem;letter-spacing:.04em; color:var(--leise)} .as-ed-flaeche{min-height:7.5rem;max-height:22rem;overflow-y:auto; padding:.6rem .7rem;font-size:.82rem;line-height:1.6;color:var(--text)} .as-ed-flaeche[hidden]{display:none} .as-ed-flaeche:focus{outline:none} /* Abstaende INNERHALB der Flaeche: sie zeigt den Text so, wie er im Shop steht, nicht als Quelltext. Das ist der ganze Punkt. */ .as-ed-flaeche p{margin:0 0 .6rem} .as-ed-flaeche p:last-child{margin-bottom:0} .as-ed-flaeche h2,.as-ed-flaeche h3,.as-ed-flaeche h4{ margin:.8rem 0 .35rem;font-size:.88rem;font-weight:700} .as-ed-flaeche h2:first-child,.as-ed-flaeche h3:first-child, .as-ed-flaeche h4:first-child{margin-top:0} .as-ed-flaeche ul,.as-ed-flaeche ol{margin:0 0 .6rem;padding-left:1.3rem} .as-ed-flaeche li{margin:.15rem 0} /* Im Editor steht das Textfeld darunter, nicht daneben: der Rahmen gehoert schon der Huelle. UND HIER BLEIBT DIE FESTBREITE. Sichtbar ist dieses Feld nur, wenn jemand auf HTML umgeschaltet hat - dann steht dort wirklich Markup, und ein
  • soll als
  • erkennbar sein. Genau die Begruendung, die fuer die Klartextfelder nicht mehr gilt. */ .as-ed .as-t-feld{margin-top:0;border:none;border-radius:0; background:none;min-height:7.5rem;font-size:.78rem;line-height:1.5; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace} .as-t-vergleich > summary{display:inline-flex;align-items:center;gap:.25rem; list-style:none;cursor:pointer;font-size:.76rem;color:var(--leise)} .as-t-vergleich > summary::-webkit-details-marker{display:none} .as-t-vergleich > summary:hover{color:var(--akzent)} .as-t-winkel{display:inline-block;transition:transform .12s ease} .as-t-vergleich[open] .as-t-winkel{transform:rotate(180deg)} @media (prefers-reduced-motion:reduce){.as-t-winkel{transition:none}} .as-t-alt{display:block;margin-top:.35rem;padding-left:.6rem; border-left:2px solid var(--rand);font-size:.82rem; color:var(--leise);overflow-wrap:anywhere;line-height:1.5} .as-marke{padding:.05rem .35rem;border-radius:6px;background:var(--kopf); color:var(--leise);font-size:.7rem;font-weight:600} .as-marke-warn{background:var(--warn-bg);color:var(--warn)} /* Saison und Zielgruppe: kurze Worte, schmalere Kacheln - und mittig. Bei den Arten oben steht unter jedem Wort noch ein Hinweis; zwei Zeilen verschieden langer Texte liest man linksbuendig schneller, weil beide an derselben Kante anfangen. Hier steht nur EIN Wort je Kachel, und ein einzelnes Wort, das links klebt, laesst die Kachel rechts leer aussehen. */ .as-wahl-schmal{grid-template-columns:repeat(auto-fill,minmax(8rem,1fr))} /* Die vier Arten: EINE Zeile, vier gleiche Spalten. Nicht auto-fill - dort haengt die Zahl der Spalten an der Breite, und bei 46rem waeren es drei und einer allein darunter. */ .as-wahl-vier{grid-template-columns:repeat(4,minmax(0,1fr))} .as-wahl-zwei{grid-template-columns:repeat(2,minmax(0,1fr))} .as-wahl-zwei .as-karte{align-items:center;text-align:center; padding:.5rem .4rem} .as-wahl-zwei .as-karte-wort{justify-content:center;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;max-width:100%} /* Der Verkaufspreis neben der Ueberschrift "Verkaufskanaele": er BEGRUENDET die Vorbelegung, also steht er bei der Frage und nicht in einem Satz darunter. Unter der Marktsperre-Grenze faerbt er sich - dann ist er der Grund, warum die Marktplaetze aus sind. */ /* Rechtsbuendig: die Ueberschrift traegt links die Frage, rechts die Zahl, die sie beantwortet hilft. margin-left:auto schiebt sie an die Kante - dafuer muss die Ueberschrift eine Reihe sein, und das ist sie nur, wenn ein Preis darin steht. */ .as-frage:has(.as-preis){display:flex;align-items:baseline;gap:.6rem} .as-preis{margin-left:auto;padding:.05rem .4rem;border-radius:6px; background:var(--kopf);color:var(--leise); font-size:.78rem;font-weight:600;font-variant-numeric:tabular-nums} .as-preis-klein{background:var(--warn-bg);color:var(--warn)} /* Ankreuzkacheln: dieselbe Fassung wie die Optionskacheln, aber mit einem Haken davor, sobald sie gewaehlt sind. Man soll sehen, dass hier MEHRERE moeglich sind - bei Optionskacheln waere es genau eine, und beide sehen sonst gleich aus. */ .as-haken .as-karte-wort::before{content:"";flex:none; width:1rem;height:1rem;border-radius:4px; border:1px solid var(--rand-stark);background:var(--flaeche)} .as-haken:has(input:checked) .as-karte-wort::before{ border-color:var(--akzent);background:var(--akzent); content:"✓";color:#fff;font-size:.72rem;line-height:1; display:flex;align-items:center;justify-content:center} .as-wahl-vier .as-karte{align-items:center;text-align:center; padding:.5rem .4rem} .as-wahl-vier .as-karte-wort{justify-content:center;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;max-width:100%} .as-wahl-schmal .as-karte{align-items:center;text-align:center} .as-wahl-schmal .as-karte-wort{justify-content:center} .as-karte{display:flex;flex-direction:column;gap:.15rem; padding:.55rem .65rem;border:1px solid var(--rand);border-radius:10px; background:var(--flaeche);cursor:pointer; transition:border-color .12s ease,background .12s ease} .as-karte:hover{border-color:var(--akzent)} /* Der Knopf selbst ist weg - die Karte IST der Knopf. Erreichbar bleibt er ueber die Tastatur, deshalb nicht display:none. */ .as-karte input{position:absolute;opacity:0;width:0;height:0} /* Gewaehlt: Akzentrand und blasser Grund - allein nach dem HAKEN. Hier stand zusaetzlich eine Klasse .as-gewaehlt, die der Server setzte ("damit es ohne Skript stimmt"). Sie war falsch, und zwar in beide Richtungen: nimmt man den Haken heraus, bleibt die Klasse stehen und die Kachel blau; waehlt man in einer Optionsreihe eine andere, sind zwei blau. Der Server kennt den Stand nur so, wie er ihn geschickt hat - was der Benutzer seither getan hat, weiss nur der Browser. :has(input:checked) weiss es immer. Und ohne :has() faellt hier ohnehin mehr aus als eine Faerbung - die Saison- und Jahreszeitbloecke haengen daran. */ .as-karte:has(input:checked){border-color:var(--akzent); background:var(--akzent-bg, var(--kopf))} .as-karte:has(input:focus-visible){outline:2px solid var(--akzent); outline-offset:2px} .as-karte-wort{display:flex;align-items:center;gap:.35rem; font-size:.88rem;font-weight:600} .as-karte-hinweis{font-size:.76rem;color:var(--leise);line-height:1.35} /* Die Ja/Nein-Fragen tragen denselben Schieberegler wie die Korrekturen - eine Geste fuer dasselbe. */ .as-zeile.as-z-frage{background:var(--bg);align-items:center} /* Eine Zeile aus Feldern: Menge, Einheit, Grundpreis. Sie stehen NEBENEINANDER, weil sie zusammen EINE Angabe sind - "0,5 Liter mit Grundpreis" ist ein Satz, keine drei. */ .as-eh{display:flex;align-items:flex-end;gap:.6rem;flex-wrap:wrap} .as-eh-feld{display:flex;flex-direction:column;gap:.2rem; font-size:.76rem;color:var(--leise)} .as-eh-feld input,.as-eh-feld select{padding:.45rem .6rem; border:1px solid var(--rand);border-radius:8px;background:var(--flaeche); color:var(--text);font:inherit;font-size:.88rem} .as-eh-feld input:hover,.as-eh-feld select:hover{border-color:var(--akzent)} .as-eh-feld input:focus,.as-eh-feld select:focus{outline:none; border-color:var(--akzent)} .as-eh-feld input[type=text]{width:7rem} .as-eh-feld input[type=number]{width:9rem} .as-eh-feld select{max-width:18rem} /* Der Grundpreisregler traegt BEIDE Klassen: .as-regler fuer den Zustand, .as-eh-regler nur fuer die Ausrichtung in dieser Feldzeile. Was ein Regler ist, steht also weiter an EINER Stelle - hier kommt nur hinzu, dass er sich an der Unterkante der Felder daneben ausrichtet und ein Wort neben sich hat. */ .as-eh-regler{gap:.45rem;font-size:.84rem;padding-bottom:.5rem} /* Das Saisonpaar: Halbjahr als zwei Kacheln, Jahr als Auswahlfeld. Hier IST ein Auswahlfeld richtig - sieben Jahreszahlen nebeneinander waeren sieben Kacheln fuer eine Zahl, und die Reihenfolge sagt ohnehin alles. */ .as-saison{display:flex;align-items:flex-end;gap:.6rem;flex-wrap:wrap} .as-saison .as-wahl{flex:1 1 16rem} /* Beschriftung LINKS neben dem Feld, nicht darueber: "Jahr 2026" ist ein Satz, und der steht in einer Zeile. Darueber waere es eine Feldbeschriftung wie im Formular - hier ist es aber die dritte Kachel in einer Reihe von Kacheln, und die haben alle nur eine Zeile. */ .as-jahr{display:flex;flex-direction:row;align-items:center;gap:.45rem; flex:none;font-size:.82rem;color:var(--leise)} .as-jahr select{padding:.5rem .6rem;border:1px solid var(--rand); border-radius:10px;background:var(--flaeche);color:var(--text); font:inherit;font-size:.88rem;font-weight:600;cursor:pointer} .as-jahr select:hover{border-color:var(--akzent)} /* DER ORDNER IST KEINE VIERTE KACHEL. Er trug bisher nur .as-jahr, und die ist fuer "Jahr 2026" gebaut: kurzes Feld, kein Abstand, waechst nicht mit. Ein Ordnername wie "Classic Sports 26 · 128" hing damit ohne Luft unter den beiden Halbjahrkacheln und sah aus, als gehoerte er in dieselbe Reihe - als waere er eine dritte Wahl auf gleicher Hoehe. Ist er aber nicht: er korrigiert, was aus Halbjahr und Jahr gefolgert wurde, und steht deshalb DANACH. Zwei Klassen, ein Gedanke wie beim Grundpreisregler: was ein Auswahlfeld ist, steht weiter in .as-jahr - hier kommt nur hinzu, dass diese Zeile eigene Luft hat und das Feld die Breite nehmen darf, die ein Ordnername braucht. min-width:0 ist die Bedingung dafuer. Ohne sie nimmt ein Auswahlfeld die Breite seines laengsten Eintrags als Mindestmass und waechst aus dem Fenster heraus; erst damit greift max-width. */ .as-kol-ordner{margin-top:.75rem} .as-kol-ordner select{flex:1 1 auto;min-width:0;max-width:26rem} /* NUR BEI KOLLEKTIONSWARE. :has() und kein Skript: die Antwort steht im selben Formular, und das Blatt kann sie lesen. Damit erscheint der Block im selben Augenblick, in dem geklickt wird - ohne Runde zum Server. UND DIE AUSNAHME GLEICH DANEBEN ist hier keine noetig: verborgen wird ueber display:none in der Regel selbst, nicht ueber ein Attribut, das eine geteilte Regel am Ende des Blattes schlagen muesste. */ /* --------------------------------------------------------------------- AMAZON FOLGT DEN EXTERNEN MARKTPLAETZEN. Amazon IST einer - sind die aus, ist Amazon es auch. Der Schalter tritt dann zurueck und laesst sich nicht mehr bedienen: etwas Wirkungsloses soll nicht aussehen wie etwas Wirksames (dieselbe Ueberlegung wie bei der Sichtbarkeitspille der Artikelliste). Durchgesetzt wird die Regel im SERVER, nicht hier - das Blatt zeigt sie nur. pointer-events reicht dafuer: wer mit der Tastatur trotzdem hinkommt, aendert nichts, was Bestand haette. --------------------------------------------------------------------- */ .as-nur-kollektion,.as-nur-jahreszeit{display:none} .as-angaben:has(input[name="art"][value="kollektion"]:checked) .as-nur-kollektion{display:block} /* Zwei Arten fragen nach der Jahreszeit - also zwei Selektoren. Eine Liste in :has() ginge auch, waere aber schwerer zu lesen, und auseinanderlaufen kann hier nichts: die Arten stehen in MIT_JAHRESZEIT und werden dort auch geprueft. */ .as-angaben:has(input[name="art"][value="noos"]:checked) .as-nur-jahreszeit, .as-angaben:has(input[name="art"][value="sonderposten"]:checked) .as-nur-jahreszeit, .as-angaben:has(input[name="art"][value="keines"]:checked) .as-nur-jahreszeit{display:block} /* Was offen bleibt, steht ueber dem Weiter-Knopf - nicht als Sperre, sondern als Ansage. Der Assistent haelt niemanden auf; er sagt nur, was er mitnimmt. */ .as-offen{display:flex;align-items:flex-start;gap:.6rem; margin-top:1.2rem;padding:.7rem .8rem;border-radius:8px; background:var(--warn-bg);color:var(--warn);font-size:.84rem; line-height:1.45} .as-offen b{font-weight:700} /* Der Kreis im gelben Kasten traegt dessen Farbe, nicht die graue Vorgabe der Liste - ein grauer Ring auf gelbem Grund sieht aus, als gehoerte er nicht dazu. */ .as-offen .as-zeichen{background:var(--flaeche);border-color:transparent; color:var(--warn)} /* EINE Fusszeile, zwei Wege: links zurueck, rechts weiter. Zwei Zeilen untereinander sahen aus wie zwei Entscheidungen. Steht links nichts, rueckt der Weiter-Knopf von selbst an den rechten Rand. */ /* Was aus einer Stufe heraus NEBENBEI moeglich ist - nicht der Weg nach vorn, sondern ein Griff zur Seite ("noch einmal holen und pruefen"). Der Weg nach vorn steht im Fuss. */ .as-nebenbei{margin-top:1.2rem;padding-top:.9rem; border-top:1px solid var(--rand)} .as-nebenbei form{margin:0} /* GLEICH HOCH, LINKS WIE RECHTS. .knopf und .knopf-leise sind im ganzen Blatt verschieden hoch, und das ist dort richtig: der leise steht meist allein in einer Zeile oder neben Text. In der Fusszeile des Assistenten stehen sie aber NEBENEINANDER, und zwei verschieden hohe Knoepfe auf einer Linie sehen aus, als waere einer verrutscht. Keine feste Hoehe, sondern dieselbe Polsterung und dieselbe Schriftgroesse - dann ergibt sich die gleiche Hoehe von selbst und bleibt es auch, wenn an einem der beiden etwas geaendert wird. Nur Farbe und Rand unterscheiden sie noch, und genau das sollen sie. */ /* DIE FUSSLEISTE: links beenden und der Anfang, rechts der Weg nach vorn. Sie steht ausserhalb des Rollfeldes - der Weiter-Knopf ist damit immer sichtbar, egal wie lang der Inhalt darueber ist. Vorher trug ihn jede Stufe am Ende ihres Inhalts, und bei einer langen Liste musste man erst ans Ende rollen, um weiterzukommen. */ .as-fussleiste{display:flex;align-items:center;gap:.7rem;flex:none; padding:.6rem 1.1rem;border-top:1px solid var(--rand); background:var(--bg)} .as-fuss-form{margin:0;display:flex} .as-fuss-zeit{font-size:.78rem;white-space:nowrap} /* margin-left:auto statt space-between: so bleibt der Knopf rechts, auch wenn links nur eines von beiden dasteht. */ .as-fuss-weiter{margin-left:auto;flex:none} .as-fuss-weiter:disabled{opacity:.45;cursor:not-allowed} /* Beenden ist die seltenste Handlung im Fenster und stand als ausgeschriebener Knopf gleichrangig neben der haeufigsten. Jetzt ein Zeichen - der Kreispfeil sagt, was er tut: von vorn. */ .as-beenden:hover{border-color:var(--schlecht);color:var(--schlecht)} /* --------------------------------------------------------------------- hidden heisst unsichtbar - auch wenn eine Klasse ein display setzt. Die Regel [hidden]{display:none} steht im Blatt des BROWSERS, und das verliert gegen jede Autorenregel. Wer also einer Klasse ein display gibt und das Element spaeter per el.hidden verbirgt, verbirgt gar nichts. Drei Stellen sind genau so hereingefallen: .k-sym{display:inline-flex} die Zeichen "wird gesetzt" und "wird entfernt" standen an JEDER Marktzeile, nicht nur an den geaenderten .eh-feld{display:flex} im Formular "Weitere Eigenschaft aufnehmen" standen beide Wertfelder da, Auswahl UND Text .hf-marke-zahl{display:...} an den Filterknoepfen stand eine 0, wo gar nichts gewaehlt war - und eine 0 liest sich wie eine Absicht ("Artikel OHNE Hersteller") Deshalb hier, ganz am Ende: gleiche Spezifitaet wie eine Klasse, aber spaeter - damit gewinnt sie. Ohne !important, damit .ladebalken[hidden] weiter gilt; der Streifen soll ja stehen bleiben und nur seinen Fueller verlieren. Wer kuenftig ein hidden-Element trotzdem zeigen will, braucht wie dort zwei Wahlteile. GANZ AM ENDE heisst ganz am Ende. Sie stand einmal dort und rutschte dann nach oben, weil neue Abschnitte hinten angehaengt wurden - bis .hf-marke-zahl 75 Zeilen spaeter wieder ein display setzte und die Regel schlug. Wer etwas anhaengt, haengt es DARUEBER an. */ [hidden]{display:none} /* --------------------------------------------------------------------- Die Sprachleiste im Reiter Texte (de · fr · en). Reiter unter dem Reiter, deshalb leiser als die Hauptreiter: Pillen statt Karteikarten. Die gewaehlte ist gefuellt; die Zahl dahinter sagt, wie viele Felder in dieser Sprache gepflegt sind - grau, wenn keines. --------------------------------------------------------------------- */ .sprachen{display:flex;gap:.4rem;flex-wrap:wrap;margin:0 0 .75rem} .sprache{display:inline-flex;align-items:center;gap:.4rem;height:2rem; padding:0 .7rem;border:1px solid var(--rand);border-radius:1rem; color:inherit;text-decoration:none;font-weight:600;letter-spacing:.02em; transition:background .12s ease,border-color .12s ease} .sprache:hover{border-color:var(--akzent)} .sprache.aktiv{background:var(--akzent);border-color:var(--akzent);color:#fff} .sprache-stand{font-weight:400;font-size:.82em;opacity:.8} .sprache-leer{opacity:.5} .sprache.aktiv .reiter-zahl{background:#fff} .auftrag-sprache{display:inline-block;margin-left:.3rem;padding:0 .4rem; border:1px solid var(--rand);border-radius:8px;font-size:.8em; font-weight:600;vertical-align:middle} /* --------------------------------------------------------------------- Der Shop-Knopf in der Unterleiste: zwei Haelften, EIN Rahmen. Links oeffnet, rechts kopiert. Gleiche Hoehe und Schrift wie das Nummernschild daneben - er ist dessen Geschwister, kein Fremdkoerper. --------------------------------------------------------------------- */ .subnav .a-shop{gap:0} .subnav .a-shop .a-nr{text-decoration:none;cursor:pointer} .subnav .a-shop-auf{border-radius:8px 0 0 8px;padding-right:.55rem} .subnav .a-shop-auf:hover{border-color:var(--akzent);color:var(--akzent)} .subnav .a-shop-kopie{border-radius:0 8px 8px 0;border-left:0; padding:0 .55rem;gap:.3rem} .subnav .a-shop-kopie [data-kopieren-text]:empty{display:none} .subnav .a-shop-kopie [data-kopieren-text]{font-size:.8rem;font-weight:500} /* Hebt sich die rechte Haelfte, darf der Rahmen der linken nicht verschwinden: die geteilte Kante gehoert der linken. */ .subnav .a-shop-kopie:hover{box-shadow:inset 1px 0 0 var(--akzent)} .a-shop-pfeil{font-size:.8em;opacity:.7} /* Amazon-SKU in der Variantentabelle (D168): SKU in Tabellenziffern, daneben der Stand als kleine Pille. */ .amz-zelle{white-space:nowrap} .amz-sku{font-variant-numeric:tabular-nums} /* Die SKU ist ein Kopierknopf wie die Artikelnummer: ein Klick, und sie liegt in der Zwischenablage - fuer die Suche in Seller Central. Sieht aus wie Text, verhaelt sich wie ein Knopf; "kopiert" blendet kurz ein. */ button.amz-sku{background:none;border:0;padding:0;margin:0;font:inherit; color:inherit;cursor:pointer;border-bottom:1px dotted var(--rand)} button.amz-sku:hover{color:var(--akzent);border-bottom-color:var(--akzent)} button.amz-sku.kopiert{color:var(--gut);border-bottom-color:var(--gut)} .amz-stand{display:inline-block;margin-left:.3rem;padding:0 .35rem; border-radius:8px;font-size:.72rem;line-height:1.4; border:1px solid var(--rand);color:var(--leise)} .amz-active{border-color:var(--gut);color:var(--gut);background:var(--gut-bg)} .amz-incomplete{border-color:var(--warn);color:var(--warn);background:var(--warn-bg)} .amz-fehlt{border-color:var(--schlecht);color:var(--schlecht);background:var(--schlecht-bg)} /* Reiter Amazon (D171): die Vorschlagstabelle. Der Amazon-Titel ist lang und sagt wenig - abgeschnitten, ganz im Tooltip. */ .amazon-vorschlaege .amazon-titel{max-width:22rem;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .amazon-vorschlaege td.aktion{white-space:nowrap} .amazon-vorschlaege td.aktion form{display:inline-block;margin:0 .2rem 0 0} /* Zeilen, die den Tag tragen, ueber dem die Maus gerade steht (siehe control.js, Tag-Chips). Akzentgrund, damit es sich von den Warn- und Fehlerfarben der Zellen unterscheidet. */ .a-chip[data-tag]{cursor:default} tr.zeile-markiert td{background:var(--akzent-bg)} /* Halb gesetzte Marke: Schild links (kein Knopf), rechts zwei Antworten ja/nein in derselben Pille. Gestrichelter Rand wie beim Tag-Chip "3/5" - dieselbe Aussage: gilt nur fuer einen Teil. */ .marke-teil{border:1px dashed var(--warn);border-radius:99px; overflow:hidden;align-items:stretch} .marke-teil .marke-halb{border:0;border-radius:0;cursor:default; background:var(--warn-bg);color:var(--text)} .marke-teil .marke-halb:hover{color:var(--text)} .marke-wahl{border:0;border-left:1px dashed var(--warn);background:var(--flaeche); color:var(--leise);font:inherit;font-size:.78rem;font-weight:600; padding:.3rem .6rem;cursor:pointer} .marke-wahl.marke-ja:hover{background:var(--gut-bg);color:var(--gut)} .marke-wahl.marke-nein:hover{background:var(--schlecht-bg);color:var(--schlecht)} /* --------------------------------------------------------------------- Startseite (D174): Kacheln, Meldungen, Verlaeufe, Server. --------------------------------------------------------------------- */ .start-kopf{display:flex;align-items:baseline;justify-content:space-between; gap:1rem;flex-wrap:wrap;margin-bottom:.75rem} .start-kopf h1{margin:0} .start-h2{margin:1.6rem 0 .6rem;display:flex;align-items:center;gap:.5rem} .kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr)); gap:.75rem} .kachel{display:block;background:var(--flaeche);border:1px solid var(--rand); border-radius:10px;padding:.8rem 1rem;text-decoration:none;color:inherit; transition:border-color .12s ease} /* D322 (25.09.2026) · Hover und Zeiger nur, wo man klicken kann. Betreiber: „wenn nichts zu klicken ist, soll auch nicht der anschein kommen“. Gemessen vorher: alle zehn Kacheln der Übersicht bekamen den Akzent-Rand, auch die fünf ohne Ziel (Warenbestand, Besucher, Retouren, Versand, Storno). Jetzt: Verweis-Kachel (a) = Zeigerhand + Akzent-Rand; reine Anzeige (div) = normaler Pfeil, Rand bleibt ruhig (Text lässt sich trotzdem markieren). D323: erst Textcursor, dann Betreiber: „es sollte auch kein textcourser zu sehen sein“ – daher cursor:default, das die Kinder erben. */ a.kachel{cursor:pointer} a.kachel:hover{border-color:var(--akzent)} div.kachel{cursor:default} .mk-leit > .kz-zahl{cursor:default} .kachel-zahl{font-size:1.9rem;font-weight:700;line-height:1.1; font-variant-numeric:tabular-nums} .kachel-text{margin-top:.15rem;font-weight:600;font-size:.9rem} .kachel-delta{margin-top:.2rem;color:var(--leise);font-size:.8rem} .meldungen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem} .meldung{display:flex;gap:.75rem;align-items:baseline;padding:.5rem .8rem; border:1px solid var(--rand);border-left:3px solid var(--rand);border-radius:8px; background:var(--flaeche);font-size:.92rem} .meldung-fehler{border-left-color:var(--schlecht)} .meldung-warnung{border-left-color:var(--warn)} .meldung-hinweis{border-left-color:var(--akzent)} .meldung-quelle{flex:none;min-width:6.5rem;font-size:.78rem;font-weight:600; text-transform:uppercase;letter-spacing:.04em;color:var(--leise)} .meldung-text a{color:inherit;font-weight:600} .hinweis-gut{border-left:3px solid var(--gut)} .verlaeufe,.server{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:.75rem} /* Diagramme: das SVG wird auf die Kachel gezogen (preserveAspectRatio none), die Achsen stehen als HTML daneben - Schrift im gestreckten Bild war gestaucht (17.09.2026). Die Werte links sitzen auf den drei Gitterlinien (0/50/100 %), die Tage unten auf ihrem Anteil. */ .diagramm{display:grid;grid-template-columns:2.8rem minmax(0,1fr);height:9rem; padding:.35rem 0 0} .diagramm .d-y{position:relative;margin-bottom:1.15rem} .diagramm .d-y span{position:absolute;right:.45rem;transform:translateY(-50%); font-size:.7rem;color:var(--leise);font-variant-numeric:tabular-nums;white-space:nowrap} .diagramm .d-feld{position:relative;padding-bottom:1.15rem;min-width:0} .diagramm .d-feld svg{display:block;width:100%;height:100%;overflow:visible} .diagramm .d-x{position:absolute;left:0;right:0;bottom:0;height:1rem} .diagramm .d-x span{position:absolute;transform:translateX(-50%);font-size:.7rem; color:var(--leise);white-space:nowrap} .diagramm .d-gitter{stroke:var(--rand);stroke-width:1;vector-effect:non-scaling-stroke} .d-leg{font-weight:600} .s-balken{margin:.3rem 0 .7rem;height:7px} .s-balken .s-gelb{background:var(--warn)} .s-balken .s-rot{background:var(--schlecht)} /* --------------------------------------------------------------------- Kopfleiste in der Sekundaerfarbe (#333) mit dem Hintergrund des Betreibers (marke/hintergrund.svg: dunkler Verlauf mit schraegen Lichtkanten). Die Verweise darauf hell, der aktive in Orange. Die Klapptafeln darunter bleiben hell - sie gehoeren zur Seite, nicht zur Leiste. Steht hier am Ende, damit es die Regeln oben ueberstimmt. --------------------------------------------------------------------- */ header{background:var(--sekundaer) url(/static/marke/hintergrund.svg) center top/cover no-repeat; border-bottom:1px solid #4a4a4a;color:#e9e9e9} nav a,.nav-knopf{color:#cfcfcf} nav a:hover,.nav-knopf:hover{color:#fff} nav a.aktiv,.nav-knopf.aktiv,[open] > .nav-knopf{color:var(--akzent);border-bottom-color:var(--akzent)} header .rechts,header .rechts a{color:#cfcfcf} header .rechts a:hover{color:#fff} .nav-mandant-jetzt{background:rgba(255,255,255,.08);border-color:#5a5a5a;color:#f0f0f0} .nav-mandant-jetzt:hover,[open] > .nav-mandant-jetzt{border-color:var(--akzent);color:var(--akzent)} /* Das Profil wie der Mandant (30.09.2026, Betreiber: "der button für das profil sollte auch einen grauen rand haben, wie der mandant") - derselbe hellere Rand und Grund auf der dunklen Kopfleiste. */ /* Der Kalender (Zeitraum) ebenso - "ja, den kalender auch" (Betreiber). */ .nav-profil > .nav-bild,.nav-zeitraum > .nav-bild{background:rgba(255,255,255,.08);border-color:#5a5a5a;color:#f0f0f0} .nav-profil > .nav-bild:hover,.nav-profil[open] > .nav-bild, .nav-zeitraum > .nav-bild:hover,.nav-zeitraum[open] > .nav-bild{border-color:var(--akzent);color:var(--akzent)} /* Anmeldeseite: der Hintergrund fuellt die ganze Seite. Die Karte ist dunkel und leicht durchscheinend (17.09.2026), in beiden Designs - sie liegt auf dem Hintergrundbild, nicht auf der Flaeche der App. Die Felder darin folgen ueber die neu gesetzten Variablen, ohne dass die Vorlage angefasst werden muss. */ body.anmeldung{background:var(--sekundaer) url(/static/marke/hintergrund.svg) center top/cover fixed no-repeat} body.anmeldung .karte{--flaeche:rgba(30,30,30,.78);--bg:rgba(0,0,0,.35);--rand:rgba(255,255,255,.14); --text:#ececec;--leise:#b8b8b8;color-scheme:dark;color:var(--text); background:var(--flaeche);border-color:var(--rand);border-left-color:var(--rand); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); box-shadow:0 12px 40px rgba(0,0,0,.45)} body.anmeldung .karte input:focus{outline:2px solid var(--akzent);outline-offset:1px} /* Der Anmeldeknopf: dunkel mit oranger Linie statt orange gefuellt (17.09.2026). Die Fuellung kommt beim Ueberfahren und beim Fokus. */ body.anmeldung .karte button[type=submit]{background:rgba(0,0,0,.35);color:#f2f2f2; border:1.5px solid var(--akzent);transition:background .15s ease,color .15s ease} body.anmeldung .karte button[type=submit]:hover, body.anmeldung .karte button[type=submit]:focus-visible{background:var(--akzent);color:#fff;outline:none} /* Die Anmeldung steht in der MITTE des Fensters, waagerecht wie senkrecht - vorher 8vh von oben, was auf grossen Bildschirmen wie "oben links vergessen" wirkte (17.09.2026). */ body.anmeldung{min-height:100vh;display:flex;flex-direction:column} body.anmeldung main{flex:1 1 auto;display:flex;align-items:center;justify-content:center; width:100%;max-width:none;padding:1.5rem} .anmeldung-feld{width:100%;max-width:360px} /* Der Designumschalter im Profil: drei Antworten in einer Zeile. */ .nav-design{display:flex;gap:.3rem;margin:.2rem .6rem .5rem} .nav-design form{margin:0;flex:1 1 0} .nav-design button{width:100%;padding:.3rem .4rem;border:1px solid var(--rand); border-radius:8px;background:var(--flaeche);color:var(--leise);font:inherit; font-size:.82rem;cursor:pointer} .nav-design button:hover{border-color:var(--akzent);color:var(--akzent)} .nav-design button.an{background:var(--akzent-bg);border-color:var(--akzent); color:var(--akzent-text);font-weight:600} /* Rollbalken, Formularfelder und Auswahllisten malt der Browser selbst - nach color-scheme, nicht nach unseren Farben. Ohne diese Zeilen blieb der waagerechte Rollbalken der Variantentabelle im dunklen Design hell (17.09.2026). Seit D485 nur noch dunkel - "light dark" liess die eingebauten Felder bei hell eingestelltem System hell (gemessen). */ :root{color-scheme:dark} /* Zurueck-Pfeil und "neu holen" wie die uebrigen Knoepfe der Unterleiste (Artikelnummer, Shop): derselbe Grund (--bg statt --flaeche, das auf der Leiste unsichtbar war) und dieselbe Rundung (17.09.2026). */ .subnav-zurueck,.subnav .knopf-frisch.nur-zeichen{background:var(--bg);border-radius:8px} .subnav .knopf-frisch.nur-zeichen:hover:enabled{background:var(--bg)} /* Die Fuellung des Fortschrittsbalkens faengt links bei null an - dort braucht sie keine Rundung, die die Schiene ohnehin hat. Mit Rundung links sah der Anfang wie ein abgesetzter Punkt aus (17.09.2026). */ .balken-fuell{border-radius:3px} /* Der Auftragskasten: links eckig - dort sitzt die farbige Kante, und eine gerundete Ecke an einem 3-px-Streifen sah aus wie ein Knick. Rechts bleibt die Rundung (17.09.2026). Gilt auch fuer die Karten des Pruefstands mit farbiger Kante. */ .auftrag,.karte{border-radius:0 8px 8px 0} /* Die Ueberschriften des Pruefstands in der Farbe ihrer Stufe - nicht im Akzent, den Verweise sonst tragen. Seit das Orange der Akzent ist, sah "Fehler" aus wie eine Warnung (17.09.2026). */ .ps-spalte.s-fehler .ps-titel{color:var(--schlecht)} .ps-spalte.s-warnung .ps-titel{color:var(--warn)} .ps-spalte.s-ok .ps-titel{color:var(--gut)} .ps-kopf .ps-zahl.p-schlecht-txt{color:var(--schlecht)} /* Gewaehlte Kachel (Marktplatzfilter auf der Amazon-Seite). */ .kachel.kachel-an{border-color:var(--akzent);background:var(--akzent-bg)} /* Pillen mit Rand in der Farbe ihrer Stufe - ohne ihn verschwimmt die blasse Flaeche mit dem Grund, besonders im dunklen Schema (Pruefstand, 17.09.2026). Der Rand ist halbdurchsichtig, damit er auf hell wie dunkel nur eine Kante setzt und keinen Kasten. */ .pille{border:1px solid transparent} .pille.p-gut{border-color:color-mix(in srgb, var(--gut) 45%, transparent)} .pille.p-warn{border-color:color-mix(in srgb, var(--warn) 45%, transparent)} .pille.p-schlecht{border-color:color-mix(in srgb, var(--schlecht) 45%, transparent)} .pille.p-leise{border-color:var(--rand)} /* Kopfzeile des Artikels: links die Gruppenkorrektur als Auswahl, rechts die Tags - eine Zeile, mehr Luft (17.09.2026). */ .a-kopfzeile{display:flex;align-items:center;justify-content:space-between; gap:1rem;flex-wrap:wrap;padding:.6rem 0 .4rem} .a-kopfzeile .a-tags{margin:0;justify-content:flex-end;flex:1 1 auto} .gruppen-menue{flex:none} .gruppen-knopf{padding:.45rem .9rem;font-size:.85rem;gap:.4rem} .gruppen-menue[open] > .gruppen-knopf{border-color:var(--akzent);color:var(--akzent)} .gruppen-tafel{min-width:17rem;padding:.4rem} .gruppen-tafel form{margin:0} .gruppen-wahl{display:flex;width:100%;align-items:center;justify-content:space-between; gap:.6rem;padding:.55rem .7rem;border:0;border-radius:8px;background:none; color:var(--text);font:inherit;text-align:left;cursor:pointer} .gruppen-wahl:hover:enabled{background:var(--kopf)} .gruppen-wahl:disabled{opacity:.45;cursor:default} .gruppen-wahl .gruppen-zahl{margin-left:auto} /* Die Marken (NEU, Bestseller, Auslaufmodell) stehen jetzt rechts neben der Gruppenkorrektur in der Kopfzeile, nicht mehr neben den Reitern (17.09.2026). */ .a-kopfzeile .marken{padding-bottom:0;flex:none} /* Gruppenfunktionen als Fenster unter dem Knopf (17.09.2026). Die vier Formulare behalten ihr Aussehen, stehen aber untereinander statt in vier Spalten - es ist nur EINES sichtbar. */ .gf-menue{flex:none} .gf-tafel{min-width:22rem;max-width:26rem;padding:.6rem .8rem .8rem} .gf-wahl{display:flex;flex-wrap:wrap;gap:.3rem;margin:.2rem 0 .6rem} .gf-wahl-knopf{padding:.35rem .7rem;border:1px solid var(--rand);border-radius:99px; background:var(--flaeche);color:var(--leise);font:inherit;font-size:.82rem; font-weight:600;cursor:pointer} .gf-wahl-knopf:hover{border-color:var(--akzent);color:var(--akzent)} .gf-wahl-knopf.an{background:var(--akzent-bg);border-color:var(--akzent);color:var(--akzent-text)} .gf-kacheln{display:block} .gf-kacheln .ak-kachel{padding:.2rem 0 0;border:0} .gf-kacheln .ak-kachel[hidden]{display:none} /* Gruppenfunktionen als Akkordeon (17.09.2026): vier Koepfe, der Browser haelt ueber name="gf" nur einen offen. Der Umfang rechts. */ .gf-tafel .nav-wer{display:flex;justify-content:space-between;align-items:baseline;gap:1rem} .gf-tafel .nav-wer span{display:inline;text-align:right} .gf-akkordeon{display:flex;flex-direction:column;gap:.15rem} .gf-akk{border:1px solid var(--rand);border-radius:8px;background:var(--flaeche)} .gf-akk[open]{border-color:var(--akzent)} .gf-akk-kopf{list-style:none;cursor:pointer;display:flex;align-items:center; justify-content:space-between;padding:.5rem .7rem;font-weight:600;font-size:.88rem} .gf-akk-kopf::-webkit-details-marker{display:none} .gf-akk-kopf:hover{color:var(--akzent)} .gf-akk[open] > .gf-akk-kopf{color:var(--akzent-text);border-bottom:1px solid var(--rand)} .gf-akk[open] > .gf-akk-kopf .nav-winkel{transform:rotate(180deg)} .gf-akk .ak-kachel{padding:.6rem .7rem .7rem;border:0} /* Mehr Luft zwischen den Faechern und in den Koepfen (17.09.2026). */ .gf-akkordeon{gap:.45rem} .gf-akk-kopf{padding:.65rem .85rem} .gruppen-tafel{padding:.5rem} .gruppen-wahl{padding:.7rem .8rem} .gruppen-tafel form + form{margin-top:.2rem} /* Reihenfolge in der Kopfzeile: Gruppenfunktionen links, Gruppenkorrektur rechts daneben, die Tags aussen (17.09.2026). Ueber order, nicht durch Umstellen der Vorlage - die Bloecke bleiben, wo sie sind. */ .a-kopfzeile{gap:.6rem} .a-kopfzeile .gf-menue{order:1} .a-kopfzeile .marken{order:2;padding-bottom:0} .a-kopfzeile .a-tags{order:3;margin-left:auto} /* Das Rueckfragefenster (17.09.2026). */ .nachfrage{border:1px solid var(--rand);border-radius:12px;padding:0; background:var(--flaeche);color:var(--text);max-width:26rem;width:calc(100% - 2rem); box-shadow:0 16px 48px rgba(0,0,0,.3)} .nachfrage::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)} .nachfrage-rumpf{margin:0;padding:1.1rem 1.25rem 1rem} .nachfrage-titel{margin:0 0 .4rem;font-weight:700;font-size:1.05rem} .nachfrage-text{margin:0 0 1rem;line-height:1.45} .nachfrage-knoepfe{display:flex;justify-content:flex-end;gap:.5rem} /* Die beiden Knoepfe teilen sich die Breite des Fensters (20.09.2026). */ .nachfrage-knoepfe > button{flex:1 1 0;justify-content:center;text-align:center} .knopf-gefahr{background:var(--schlecht);border-color:var(--schlecht);color:#fff} .knopf-gefahr:hover{background:#a01616;border-color:#a01616;color:#fff} /* Der Korrekturkasten direkt unter der Unterleiste: enger an ihr dran, ohne den grossen Abstand, den er zwischen Tabellen hatte. */ /* Oben liefert das Vorsatzstueck ::before die 1,5rem - der Kasten selbst traegt nur den Abstand nach unten, in derselben Hoehe. */ .a-rollfeld > .auftrag{margin:0 0 1.5rem} .a-rollfeld > #meldung{margin:-.9rem 0 1.5rem} .a-rollfeld > .a-kopfzeile{padding-top:0} /* Knoepfe in der Filterzeile: gleiche Hoehe wie Suchfeld und Zuruecksetzer (2,4rem), gleiche Rundung - vorher stand "alle Marktplaetze" in der quadratischen Form des Zuruecksetzers und der Loeschknopf eine Nummer kleiner daneben (Amazon-Seite, 17.09.2026). */ .filter-form .knopf-leise{height:2.4rem;display:inline-flex;align-items:center; padding:0 .9rem;border-radius:8px;font-size:.88rem;text-decoration:none; background:var(--flaeche)} .filter-form .knopf-leise.knopf-schlecht{background:var(--flaeche)} .filter-form .knopf-leise.knopf-schlecht:hover{background:var(--schlecht-bg)} .filter-form .ankreuz{height:2.4rem} /* Aktionsspalte der Amazon-Seite: die Knoepfe in einer Reihe, rechts ausgerichtet, gleich hoch, mit festem Abstand - und "löschen" immer an derselben Stelle, ob "verknüpfen" davorsteht oder nicht (17.09.2026). */ .amazon-verwaist td.aktion{white-space:nowrap;text-align:right;padding-right:.6rem} .amazon-verwaist .aktion-zeile{display:inline-flex;align-items:center;justify-content:flex-end; gap:.4rem;min-width:11.5rem} .amazon-verwaist .aktion-zeile form{margin:0} .amazon-verwaist .aktion-zeile .knopf-leise{height:1.9rem;display:inline-flex;align-items:center; padding:0 .7rem;min-width:5.4rem;justify-content:center} .amazon-verwaist .aktion-zeile .marke-txt{min-width:5.4rem;text-align:center;display:inline-block} /* Die Meldungen der Startseite tragen links den farbigen Streifen - dort eckig, wie der Auftragskasten und die Karten (17.09.2026). */ .meldung{border-radius:0 8px 8px 0} /* ... und JEDER Hinweis mit Streifen links: eckig links, rund rechts (18.09.2026, "sollte links auch keinen radius haben"). */ .hinweis,.hinweis-gut{border-radius:0 8px 8px 0} /* Der Korrekturkasten blendet sich ein (17.09.2026). Der Kasten steht immer im Dokument; was sich aendert, ist sein Zustand: "laeuft" per Klasse (das Skript setzt sie beim Start, die Vorlage nach jedem Neuaufbau), der Balken per hidden, die Meldung darunter ebenso. Eine CSS-Animation laeuft immer dann an, wenn ihr Selektor NEU zutrifft - beim Setzen der Klasse, beim Entfernen von hidden, beim Einsetzen des frisch gebauten Kastens. Genau die drei Momente sind gemeint; ein Uebergang (transition) wuerde bei display:none -> block nicht greifen. */ @keyframes kasten-ein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} @keyframes balken-ein{from{opacity:0;transform:scaleY(.2)}to{opacity:1;transform:none}} @keyframes meldung-ein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} .auftrag{transition:border-left-color .35s ease} .auftrag.a-laeuft,.auftrag.a-fertig,.auftrag.a-fehler{animation:kasten-ein .4s ease-out both} .auftrag-balken:not([hidden]){animation:balken-ein .45s ease-out both;transform-origin:top} #meldung:not([hidden]){animation:meldung-ein .4s ease-out both} @media (prefers-reduced-motion:reduce){ .auftrag,.auftrag.a-laeuft,.auftrag.a-fertig,.auftrag.a-fehler, .auftrag-balken:not([hidden]),#meldung:not([hidden]){animation:none;transition:none}} /* Auch Fenster, Aufklappmenues und Auswahlfelder blenden sich ein (17.09.2026, "und die anderen popups/auswahlfelder auch?"). Dasselbe Prinzip wie beim Korrekturkasten: die Animation laeuft an, sobald das Element gezeigt wird - ein
    zeigt seinen Inhalt beim Oeffnen, ein beim showModal(). Tafeln und Fenster gleiten kurz von oben herein, der Hintergrund des Fensters wird weich dunkel; der Inhalt gewoehnlicher Aufklapper (Pruefstand, Eigenschaften, Karten) wird nur eingeblendet, ohne Bewegung - eine Tabelle, die springt, waere kein Gewinn. */ @keyframes tafel-ein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} @keyframes fenster-ein{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}} @keyframes schleier-ein{from{opacity:0}to{opacity:1}} @keyframes inhalt-ein{from{opacity:0}to{opacity:1}} .nav-tafel,.umfang-feld{animation:tafel-ein .18s ease-out both} dialog.nachfrage[open],dialog.as-fenster[open]:modal{animation:fenster-ein .22s ease-out both} dialog.nachfrage[open]::backdrop,dialog.as-fenster[open]::backdrop{animation:schleier-ein .22s ease-out both} .gf-akk[open] > :not(summary){animation:tafel-ein .2s ease-out both} details[open]:not(.nav-menue):not(.umfang):not(.gf-akk) > :not(summary){animation:inhalt-ein .2s ease-out both} @media (prefers-reduced-motion:reduce){ .nav-tafel,.umfang-feld,dialog.nachfrage[open],dialog.as-fenster[open]:modal, dialog.nachfrage[open]::backdrop,dialog.as-fenster[open]::backdrop, .gf-akk[open] > :not(summary),details[open] > :not(summary){animation:none}} /* Anmeldung in zwei Schritten (17.09.2026): der zweite Schritt gleitet von rechts herein, die sechs Kaestchen stellen sich nacheinander auf; ein falscher Code laesst die Karte kurz wackeln. */ @keyframes zf-rein{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}} @keyframes zf-auf{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}} @keyframes zf-wackeln{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(6px)} 60%{transform:translateX(-4px)}80%{transform:translateX(3px)}} .zf-schritt-2{animation:zf-rein .35s ease-out both} .zf-fehler{animation:zf-wackeln .45s ease-out both} .zf-kaestchen{display:flex;gap:.45rem;justify-content:center;margin:0 0 1.1rem} .zf-kaestchen input{width:2.5rem;height:3.1rem;flex:none;text-align:center;font:inherit;font-size:1.5rem; font-weight:600;border:1px solid var(--rand);border-radius:8px;background:var(--bg);color:var(--text); caret-color:var(--akzent);animation:zf-auf .3s ease-out both;animation-delay:calc(var(--i,0) * 45ms); transition:border-color .12s ease,box-shadow .12s ease} .zf-kaestchen input:focus{outline:none;border-color:var(--akzent);box-shadow:0 0 0 3px rgba(255,140,0,.28)} .zf-kaestchen input.voll{border-color:var(--akzent)} .zf-kaestchen input::-webkit-outer-spin-button,.zf-kaestchen input::-webkit-inner-spin-button{-webkit-appearance:none} .zf-weiter{width:100%;padding:.6rem;border-radius:6px;background:rgba(0,0,0,.35);color:#f2f2f2; border:1.5px solid var(--akzent);font:inherit;font-weight:600;cursor:pointer;transition:background .15s ease} .zf-weiter:hover,.zf-weiter:focus-visible{background:var(--akzent);color:#fff;outline:none} /* Die letzte Ziffer: die Kaestchen laufen nacheinander orange durch, der Knopf bekommt einen Kreisel - man sieht, dass es weitergeht. */ @keyframes zf-welle{0%,100%{border-color:var(--akzent);box-shadow:0 0 0 0 rgba(255,140,0,0);transform:none} 40%{border-color:var(--akzent);box-shadow:0 0 0 4px rgba(255,140,0,.35);transform:translateY(-3px)}} @keyframes zf-drehen{to{transform:rotate(360deg)}} .zf-code-form.sendet .zf-kaestchen input{border-color:var(--akzent);color:var(--akzent); animation:zf-welle .9s ease-in-out infinite;animation-delay:calc(var(--i,0) * 90ms)} .zf-code-form.sendet .zf-weiter{background:var(--akzent);color:#fff;cursor:default} .zf-kreisel{display:inline-block;width:.9rem;height:.9rem;margin:0 .5rem -.15rem 0;border-radius:50%; border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:zf-drehen .7s linear infinite} @media (prefers-reduced-motion:reduce){.zf-code-form.sendet .zf-kaestchen input,.zf-kreisel{animation:none}} @media (prefers-reduced-motion:reduce){.zf-schritt-2,.zf-fehler,.zf-kaestchen input{animation:none}} /* Die Marktplatzleiste am Artikel (D185, 18.09.2026): ein Icon je Marktplatz mit farbigem Ring, darunter die Zahlen. */ .mp-leiste{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;margin:0 0 1.25rem;padding:.7rem .9rem; background:var(--flaeche);border:1px solid var(--rand);border-radius:0 10px 10px 0;border-left:3px solid var(--rand)} .mp{flex:none} .mp-knopf{list-style:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.32rem; padding:.95rem .9rem 1rem;border-radius:12px;min-width:6.2rem} .mp-knopf::-webkit-details-marker{display:none} .mp-knopf:hover,.mp[open] > .mp-knopf{background:var(--kopf)} .mp-ring{display:inline-flex;padding:3px;border-radius:50%;border:3px solid var(--rand);position:relative; transition:border-color .2s ease} .mp-gut .mp-ring{border-color:var(--gut)} .mp-warnung .mp-ring{border-color:var(--warn)} .mp-fehler .mp-ring{border-color:var(--schlecht)} .mp-icon{width:2.4rem;height:2.4rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; background:var(--kopf);color:var(--text);font-weight:800;position:relative;overflow:hidden} /* Einfarbig (18.09.2026, "die icons bitte nicht farbig"): alle Glyphen in der Textfarbe auf der Kopffarbe, den Zustand sagt allein der Ring. */ .mp-glyphe{width:1.35rem;height:1.35rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .mp-wort{font-size:.7rem;line-height:1;letter-spacing:-.03em;text-transform:lowercase;font-weight:800} /* Amazon als EIN SVG (Buchstabe und Laecheln), damit es im Kreis mittig sitzt - zwei getrennt gesetzte Teile waren es nicht. */ .mp-amazon{width:1.6rem;height:1.6rem;stroke-width:1.9} /* Kaufland (24.09.2026, Entwurf B aus der Vorschau): abgerundeter Rahmen mit kraeftigem K statt Rechteck mit zusammengesetztem K - im Linienstil der uebrigen Symbole, einen Hauch groesser, damit das K lesbar bleibt. */ .mp-kaufland{width:1.4rem;height:1.4rem} .mp-name{font-size:.72rem;font-weight:600;color:var(--leise)} .mp-zahlen{display:flex;gap:.35rem;font-size:.72rem;line-height:1;align-items:center;min-height:1rem} .mp-f{color:var(--schlecht)} .mp-w{color:var(--warn)} .mp-v{color:var(--leise)} .mp-ok{color:var(--gut);font-weight:600} /* Gesperrt: grau und durchgestrichen. */ .mp-gesperrt .mp-ring{border-color:var(--rand)} /* Gesperrt UND Befund: das Icon bleibt grau und durchgestrichen, der Ring leuchtet trotzdem - "gesperrt, aber gelistet" ist ein Fehler (18.09.2026). Der Name wird nicht durchgestrichen. */ .mp-gesperrt.mp-fehler .mp-ring{border-color:var(--schlecht)} .mp-gesperrt.mp-warnung .mp-ring{border-color:var(--warn)} .mp-gesperrt .mp-icon{filter:grayscale(1);opacity:.5} /* Der Strich endet am Ring: overflow:hidden schneidet ihn am Innenrand des Kreises ab (18.09.2026, "teilweise laenger als der Kreis") - ein gedrehter Balken ragt sonst an zwei Ecken hinaus. */ .mp-gesperrt .mp-ring{overflow:hidden} .mp-gesperrt .mp-ring::after{content:"";position:absolute;left:-30%;right:-30%;top:50%;height:3px;margin-top:-1.5px; background:var(--rand);transform:rotate(-40deg)} /* Der Strich in der Farbe des Rings (18.09.2026). */ .mp-gesperrt.mp-fehler .mp-ring::after{background:var(--schlecht)} .mp-gesperrt.mp-warnung .mp-ring::after{background:var(--warn)} .mp-gesperrt .mp-name{color:var(--leise)} .mp-gesperrt .mp-ok{color:var(--leise)} /* Inaktiver Artikel: alles neutral grau, ohne Strich (18.09.2026). */ .mp-inaktiv .mp-ring{border-color:var(--rand)} .mp-inaktiv .mp-icon{opacity:.45} .mp-inaktiv .mp-ok{color:var(--leise);font-weight:400} /* Die Tafel mit den Befunden. */ .mp-tafel{min-width:19rem;max-width:24rem;padding:.6rem .8rem .7rem} .mp-tafel .nav-wer{display:flex;justify-content:space-between;gap:1rem;align-items:baseline} .mp-tafel .nav-wer span{display:inline;font-weight:400;color:var(--leise);font-size:.78rem} .mp-hinweis{margin:.2rem 0 0;font-size:.82rem;color:var(--leise)} .mp-liste{list-style:none;margin:.3rem 0 0;padding:0;display:flex;flex-direction:column;gap:.25rem} .mp-liste li{display:flex;align-items:center;gap:.5rem;font-size:.85rem;padding:.3rem .45rem;border-radius:6px;background:var(--bg)} .mp-punkt{width:.55rem;height:.55rem;border-radius:50%;flex:none;background:var(--leise)} .mp-liste .mp-fehler .mp-punkt{background:var(--schlecht)} .mp-liste .mp-warnung .mp-punkt{background:var(--warn)} .mp-liste-var{margin-left:auto;font-size:.75rem;color:var(--leise);background:var(--flaeche); border:1px solid var(--rand);border-radius:99px;padding:0 .4rem} @media (max-width:640px){.mp-leiste{gap:.2rem .3rem}.mp-knopf{min-width:4.3rem}} /* Der Reiter Verlauf (D186). */ .verlauf td{vertical-align:top} .v-wann{white-space:nowrap;color:var(--leise);font-variant-numeric:tabular-nums} .v-art{display:inline-block;font-size:.72rem;font-weight:600;color:var(--leise);text-transform:uppercase; letter-spacing:.03em;margin-right:.35rem} .v-quelle{display:block;font-size:.75rem;color:var(--leise)} .v-umfang{white-space:nowrap;color:var(--leise)} .v-meldung{font-size:.78rem;color:var(--leise);margin-top:.25rem;max-width:28rem;white-space:pre-wrap} .pille.p-akzent{border-color:var(--akzent);color:var(--akzent-text);background:var(--akzent-bg)} /* --------------------------------------------------------------------- Die Navigation auf dem Handy (18.09.2026, zweite Fassung: "das menü kann links hin, das logo in die Mitte, den Mandant mit Initialen"). Bis 720 px: Burger links, Logo mittig, rechts die Mandantenplakette als Kuerzel (HS / H7) und die Profil-Initialen - drei gleich hohe Zonen, mehr Luft. Die Punkte klappen als Liste UNTER die Kopfleiste (header.nav-offen), untereinander mit grossen Zielen; "Einstellungen" ist dort ein aufklappbarer Abschnitt, keine schwebende Tafel. */ .nav-burger{display:none} .nav-mandant-kurz{display:none} @media (max-width:720px){ /* Burger und Logo links, mit Luft dazwischen; rechts Mandant und Profil (dritte Fassung: "das logo kann nach links, das Menü die drei Linien ohne Einrahmung"). */ header{display:grid;grid-template-columns:auto auto 1fr;align-items:center; padding:.55rem .9rem;gap:.5rem .5rem} .nav-burger{display:inline-flex;justify-self:start;align-items:center;justify-content:center; width:2.6rem;height:2.6rem;border:0;border-radius:10px;margin-left:-.4rem;margin-right:.35rem; background:transparent;color:var(--text);cursor:pointer;padding:0} .nav-burger:hover{color:var(--akzent)} .nav-burger svg{width:1.55rem;height:1.55rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round} .nav-burger svg path{transition:transform .2s ease,opacity .2s ease;transform-origin:center} header.nav-offen .nav-burger{color:var(--akzent)} header.nav-offen .nb-1{transform:translateY(5px) rotate(45deg)} header.nav-offen .nb-2{opacity:0} header.nav-offen .nb-3{transform:translateY(-5px) rotate(-45deg)} header .marke{justify-self:start;margin:0;padding:0} header .marke-bild{height:1.6rem} header .rechts{justify-self:end;margin:0;gap:.5rem} .nav-mandant{margin-right:0} .nav-mandant-voll{display:none} .nav-mandant-kurz{display:inline} .nav-mandant-jetzt{width:2.6rem;height:2.6rem;padding:0;justify-content:center;font-size:.8rem; letter-spacing:.03em;display:inline-flex;align-items:center;gap:0} .nav-mandant-jetzt .nav-winkel{display:none} .nav-bild{width:2.6rem;height:2.6rem;font-size:.8rem} /* Die Punkte: verborgen, bis der Burger sie holt; ueber die ganze Breite. */ nav{display:none;grid-column:1 / -1;flex-direction:column;gap:0; margin:.2rem -.9rem -.55rem;padding:.35rem .5rem .6rem;border-top:1px solid var(--rand);background:var(--flaeche)} header.nav-offen nav{display:flex;animation:tafel-ein .18s ease-out both} nav a,nav .nav-knopf{padding:.85rem .7rem;border-bottom:0;border-left:3px solid transparent; border-radius:0 8px 8px 0;font-size:1rem} nav a.aktiv,nav .nav-knopf.aktiv{border-left-color:var(--akzent);background:var(--kopf)} nav .nav-menue{position:static} nav .nav-knopf{display:flex;width:100%;justify-content:space-between} nav .nav-tafel{position:static;box-shadow:none;border:0;border-radius:0;background:transparent; padding:0 0 .3rem 1rem;min-width:0;animation:none} nav .nav-tafel a{padding:.7rem .7rem;font-size:.95rem;border-left:3px solid transparent;border-radius:0 8px 8px 0} nav .nav-tafel a.an{border-left-color:var(--akzent);background:var(--kopf)} /* Die Tafeln rechts (Mandant, Profil) duerfen nicht aus dem Fenster ragen. */ header .rechts .nav-tafel{max-width:calc(100vw - 1.8rem)} } @media (max-width:720px) and (prefers-reduced-motion:reduce){ header.nav-offen nav{animation:none}.nav-burger svg path{transition:none}} /* Der Knopf "Aus der Zwischenablage einfuegen" im zweiten Schritt (18.09.2026). */ .zf-einfuegen{display:flex;align-items:center;justify-content:center;gap:.45rem;width:100%;margin:0 0 .7rem; padding:.55rem;border:1px dashed var(--rand);border-radius:6px;background:transparent;color:var(--leise); font:inherit;font-size:.88rem;cursor:pointer;transition:color .15s ease,border-color .15s ease} .zf-einfuegen svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .zf-einfuegen:hover{color:var(--akzent);border-color:var(--akzent)} .zf-einfuegen.zf-leer{color:var(--schlecht);border-color:var(--schlecht)} /* Der Pruefstand-Kopf mit den Kreisen (D189, 18.09.2026). Praefix pk-, weil ps-kopf/ps-zahl schon der Pruefstandseite gehoeren - die Regeln dort (display:flex, space-between) schoben den gruenen Kreis aus der Mitte. */ /* padding statt margin oben: der obere Rand fiel mit dem unteren der Ueberschrift zusammen (Randkollaps), und der Abstand wuchs kaum. */ .pk-kopf{text-align:center;margin:0 0 1.6rem;padding-top:1.4rem} /* Ueberschrift mittig, wie die Kreise darunter (18.09.2026). */ .a-seite .a-seite-titel{justify-content:center;text-align:center} .pk-kreise{display:flex;justify-content:center;gap:1.1rem} @keyframes ps-auf{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}} .pk-kreis{width:6rem;height:6rem;border-radius:50%;border:5px solid var(--rand); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05rem; background:var(--bg);animation:ps-auf .35s ease-out both} .pk-kreis + .pk-kreis{animation-delay:.08s} .pk-zahl{font-size:1.7rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums} .pk-wort{font-size:.64rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--leise)} .pk-k-fehler{border-color:var(--schlecht);background:var(--schlecht-bg)} .pk-k-fehler .pk-zahl{color:var(--schlecht)} .pk-k-warn{border-color:var(--warn);background:var(--warn-bg)} .pk-k-warn .pk-zahl{color:var(--warn)} .pk-k-gut{border-color:var(--gut);background:var(--gut-bg)} .pk-k-gut svg{width:2.2rem;height:2.2rem;fill:none;stroke:var(--gut);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} /* Nur der Haken im Kreis, kein Wort - dasselbe Schema wie die Zahlen in den anderen Kreisen (18.09.2026). */ .pk-k-gut svg{width:2.6rem;height:2.6rem} .pk-unter{margin:.7rem 0 0;font-size:.8rem;color:var(--leise)} .pk-abschnitt{margin:1rem 0 .2rem;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em; color:var(--leise);display:flex;align-items:center;gap:.5rem} .pk-abschnitt::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--rand)} .pk-a-fehler::before{background:var(--schlecht)} .pk-a-fehler{color:var(--schlecht)} .pk-a-warn::before{background:var(--warn)} .pk-a-warn{color:var(--warn)} .pruef-punkt{width:.55rem;height:.55rem;border-radius:50%;flex:none;background:var(--rand)} .pp-fehler{background:var(--schlecht)} .pp-warn{background:var(--warn)} .pp-gut{background:var(--gut)} .pp-still{background:var(--leise);opacity:.5} .a-seite .pruef-text{align-items:flex-start;gap:.5rem} .a-seite .pruef-text .pruef-punkt{margin-top:.38rem} .a-seite .pruef-text > span:not(.pruef-punkt){flex:1 1 auto;min-width:0} @media (prefers-reduced-motion:reduce){.pk-kreis{animation:none}} /* Die Abschnitte des Pruefstands mit farbiger Linie links (18.09.2026), wie Korrekturkasten und Hinweise: rot an den Fehlern, gelb an den Warnungen, grau an den stillgelegten. Keine Punkte je Zeile mehr. */ .a-seite .pk-liste{border-left:3px solid var(--rand);padding-left:.75rem;margin-left:.15rem} .a-seite .pk-l-fehler{border-left-color:var(--schlecht)} .a-seite .pk-l-warn{border-left-color:var(--warn)} .a-seite .pk-l-still{border-left-color:var(--rand)} .a-seite .pk-l-gut{border-left-color:var(--gut);margin-top:.5rem} .a-seite .pk-liste > .pruefzeile{border-bottom:1px solid var(--rand)} .a-seite .pk-liste > .pruefzeile:last-child{border-bottom:0} .pk-abschnitt{margin-top:1.4rem} .pk-kopf + .pk-abschnitt{margin-top:0} /* Die Zeile im Pruefstand, aufgeraeumt (18.09.2026): Text links, ein leiser Verweis rechts; das Feld fuer den Grund erst nach dem Klick. */ .a-seite .pruefzeile{gap:.3rem;padding:.6rem 0} .pruef-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem} .a-seite .pruef-text{display:block;flex:1 1 auto;min-width:0;font-size:.88rem;line-height:1.4} .pruef-ign{flex:none} .pruef-ign > summary{list-style:none} .pruef-ign > summary::-webkit-details-marker{display:none} .pruef-aktion{flex:none;background:none;border:0;padding:.1rem 0;margin-top:.1rem;font:inherit;font-size:.76rem; color:var(--leise);cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px;white-space:nowrap} .pruef-aktion:hover,.pruef-ign[open] > .pruef-aktion{color:var(--akzent);text-decoration-style:solid} .a-seite .pruef-grund{margin:0;font-size:.78rem;color:var(--leise);line-height:1.4} .pruef-ign-form{display:flex;gap:.4rem;align-items:center;margin-top:.15rem;animation:tafel-ein .18s ease-out both} /* display:flex schlaegt das hidden-Attribut - also ausdruecklich. */ .pruef-ign-form[hidden]{display:none} .pruef-ign-form input[type=text]{flex:1 1 auto;min-width:0} /* Feld und Knopf gleich hoch: dieselbe Hoehe, derselbe Zeilenabstand, beide gestreckt auf die Zeile (18.09.2026). */ .pruef-ign-form{align-items:stretch} .pruef-ign-form input[type=text],.pruef-ign-form .knopf-leise{height:2.1rem;padding-top:0;padding-bottom:0; line-height:1;display:inline-flex;align-items:center;box-sizing:border-box} /* Unter dem gruenen Haken: "Alles in Ordnung", gut sichtbar (18.09.2026). */ .pk-heil{margin:.9rem 0 0;font-size:1.05rem;font-weight:700;color:var(--gut);letter-spacing:.01em} /* Das eigene Lager nach Saison auf der Startseite (D192). */ .lager-karte{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem 2rem;align-items:start} .lager-torten{display:flex;gap:1rem;flex-wrap:wrap} .torte{width:11rem;height:11rem;display:block} .torte-mitte{font-size:10px;font-weight:800;fill:var(--text)} .torte-titel{font-size:6.5px;font-weight:600;fill:var(--leise);text-transform:uppercase;letter-spacing:.06em} /* Die Aufteilung als Zeilen mit Balken (18.09.2026, "die Tabelle kann schoener dargestellt werden"): je Saison Name, Menge mit Anteilsbalken, Warenwert mit Anteilsbalken, Varianten. */ .lager-liste{display:flex;flex-direction:column;font-size:.88rem} .lager-zeile{display:grid;grid-template-columns:minmax(7rem,1.2fr) 5rem minmax(4rem,1fr) 6.5rem minmax(4rem,1fr) 4.5rem; gap:.9rem;align-items:center;padding:.45rem .5rem;border-bottom:1px solid var(--rand);border-radius:6px} .lager-zeile:hover:not(.lager-kopf):not(.lager-summe){background:var(--bg)} .lager-kopf{font-size:.7rem;font-weight:600;color:var(--leise);text-transform:uppercase;letter-spacing:.05em;padding-top:.1rem} .lager-summe{border-bottom:0;font-weight:700;padding-top:.6rem} .lager-zeile .z{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .lager-zeile .leise{color:var(--leise)} .lager-name{display:flex;align-items:center;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lager-balken{display:flex;align-items:center;gap:.5rem;min-width:0} .lager-balken i{display:block;height:.55rem;border-radius:99px;min-width:2px;flex:none;max-width:calc(100% - 2.6rem);opacity:.85} .lager-balken b{font-size:.74rem;font-weight:600;color:var(--leise);white-space:nowrap} @media (max-width:640px){.lager-zeile{grid-template-columns:minmax(6rem,1fr) 4.5rem 5.5rem;gap:.5rem} .lager-zeile > :nth-child(3),.lager-zeile > :nth-child(5),.lager-zeile > :nth-child(6){display:none}} .lager-punkt{display:inline-block;width:.65rem;height:.65rem;border-radius:50%;margin-right:.45rem;vertical-align:-.05rem} .lager-karte .unter{grid-column:1 / -1;margin:0} @media (max-width:820px){.lager-karte{grid-template-columns:minmax(0,1fr)}.lager-torten{justify-content:center}} /* Hauptgruppen aufklappbar (D195). */ .lager-haupt > summary{list-style:none;cursor:pointer} .lager-haupt > summary::-webkit-details-marker{display:none} .lager-winkel{width:.8rem;height:.8rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round;margin-right:.3rem;color:var(--leise);transition:transform .15s ease} .lager-haupt[open] > summary .lager-winkel{transform:rotate(90deg)} .lager-haupt[open] > summary{background:var(--bg)} .lager-anzahl{margin-left:.45rem;font-size:.7rem;font-weight:600;color:var(--leise);background:var(--bg); border:1px solid var(--rand);border-radius:99px;padding:0 .4rem} .lager-unter{padding-left:2.3rem;font-size:.84rem;background:color-mix(in srgb, var(--bg) 55%, transparent)} .lager-unter .lager-name{font-weight:500;color:var(--text)} .lager-unter .lager-balken i{opacity:.55} @media (prefers-reduced-motion:reduce){.lager-winkel{transition:none}} /* Listings (D196): Reiter am Artikel und Uebersicht. */ .li-liste{display:flex;flex-direction:column;gap:.6rem} .li-kanal{border:1px solid var(--rand);border-left:3px solid var(--rand);border-radius:0 10px 10px 0; background:var(--flaeche);padding:.6rem .9rem} .li-kopf{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;font-size:.88rem} .li-markt{font-weight:700} .li-id{margin-left:auto;font-size:.78rem} .li-historie{margin-top:.5rem;font-size:.85rem} .li-historie td,.li-historie th{padding:.3rem .5rem} .li-hinweis{margin:.4rem 0 0;font-size:.82rem;color:var(--leise)} .pille.p-leise{background:var(--bg);color:var(--leise)} .filter-form .knopf-leise.an{border-color:var(--akzent);color:var(--akzent)} .listing-titel{max-width:24rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* "ohne Saisontag" ausserhalb der Rechnung (18.09.2026). */ .lager-aussen{border-top:1px dashed var(--rand);border-bottom:0;color:var(--leise);font-size:.84rem} .lager-aussen .lager-name{font-weight:500;color:var(--leise)} .lager-aussen .leise{font-size:.74rem} /* Auskunft, die den Neuaufbau ueberlebt (18.09.2026). */ .hinweis-akzent{border-left-color:var(--akzent)} /* Das Auskunftsfenster (18.09.2026): wie die Rueckfrage, orange Kante. */ .auskunft{border-left:4px solid var(--akzent);border-radius:0 12px 12px 0} /* Die Rueckfrage wie die Auskunft: links ohne Radius, mit rotem Balken (20.09.2026). */ #nachfrage{border-left:4px solid var(--schlecht);border-radius:0 12px 12px 0} .auskunft .nachfrage-titel{color:var(--akzent-text)} .auskunft.auskunft-fehler{border-left-color:var(--schlecht)} .auskunft.auskunft-fehler .nachfrage-titel{color:var(--schlecht)} /* Knoepfe auf der Anmeldeseite und in den Kontofenstern: umrandet, orange Schrift (18.09.2026). Ueberschreibt die Inline-Stile der Vorlagen. */ body.anmeldung .karte button[type=submit],body.anmeldung .karte a.knopf-voll, .konto-knopf{background:rgba(0,0,0,.25)!important;color:var(--akzent)!important; border:1.5px solid var(--akzent)!important} body.anmeldung .karte button[type=submit]:hover,body.anmeldung .karte button[type=submit]:focus-visible, .konto-knopf:hover{background:rgba(255,140,0,.18)!important;color:#ffb257!important} .zf-weiter:hover,.zf-weiter:focus-visible{background:rgba(255,140,0,.18);color:#ffb257;outline:none} .zf-code-form.sendet .zf-weiter{background:rgba(255,140,0,.18);color:#ffb257;cursor:default} .zf-kreisel{border-color:rgba(255,178,87,.35);border-top-color:#ffb257} /* Mehr Luft oben und unten in der Anmeldekarte (18.09.2026). */ body.anmeldung .karte{padding:2.2rem 1.8rem 2.4rem} /* Anmeldung laeuft: gesperrter Knopf mit Kreisel, Felder gedimmt (18.09.2026). */ body.anmeldung form.sendet input{opacity:.6} body.anmeldung .karte button[type=submit].laeuft{opacity:1!important;cursor:default} body.anmeldung .karte button[type=submit]:disabled{opacity:.9} /* Der Balken am oberen Fensterrand, wo es keine Kopfleiste gibt (Anmeldung). */ .ladebalken-fest{position:fixed;top:0;left:0;right:0;z-index:99} /* Marktplatzleiste und Preiskachel nebeneinander (D203), die Kachel als Preisschild (zweite Fassung): VK gross in Orange, Streichpreis durchgestrichen, Rabatt als grosse Plakette; darunter klein EK, Deckungsbeitrag und Kalkulation. */ .mp-zeile{display:flex;gap:1rem;align-items:stretch;margin:0 0 1.25rem} /* Die Leiste ist so hoch wie die Preiskachel - die Kreise stehen darin senkrecht mittig (18.09.2026). */ .mp-zeile .mp-leiste{flex:1 1 auto;margin:0;min-width:0;align-items:center;align-content:center} .preis-kachel{flex:0 0 20rem;background:var(--flaeche);border:1px solid var(--rand);border-left:3px solid var(--rand); border-radius:0 10px 10px 0;padding:.75rem 1rem .55rem;display:flex;flex-direction:column;gap:.15rem} .preis-schild{display:flex;align-items:center;justify-content:space-between;gap:.75rem} .preis-vk{font-size:1.9rem;font-weight:800;line-height:1.1;color:var(--akzent-text);letter-spacing:-.01em; font-variant-numeric:tabular-nums;white-space:nowrap} .preis-vk .preis-bis{font-size:1.25rem;font-weight:700} .preis-vk .preis-euro{font-size:1.1rem;font-weight:700} /* Das Rabattschild: dunkel mit oranger Einfassung, orange Schrift (18.09.2026). */ .preis-prozent{flex:none;font-size:1.6rem;font-weight:800;line-height:1;color:var(--akzent);background:var(--sekundaer); border:2px solid var(--akzent);padding:.3rem .55rem;border-radius:10px;transform:rotate(-4deg); box-shadow:0 3px 10px rgba(0,0,0,.25)} .preis-prozent small{font-size:.75em;font-weight:700} .preis-streich{font-size:.95rem;color:var(--leise);margin-top:.1rem} /* Ohne Durchstreichen (20.09.2026: "man erkennt die Zahl fast nicht") - das "statt" davor sagt schon, was es ist. */ .preis-streich s{text-decoration:none;font-weight:600} .preis-statt{font-size:.78rem} .preis-hinweis{font-size:.78rem;color:var(--warn);font-weight:600} .preis-klein{margin-top:.6rem;padding-top:.5rem;border-top:1px dashed var(--rand);display:flex;flex-direction:column;gap:.25rem;font-size:.85rem} .preis-klein-zeile{display:flex;justify-content:space-between;gap:.8rem;align-items:baseline} .preis-name{color:var(--leise);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;flex:none} .preis-wert{font-variant-numeric:tabular-nums;font-weight:600;text-align:right;min-width:0} .preis-plus{color:var(--gut)} .preis-minus{color:var(--schlecht)} .preis-db-prozent{color:var(--leise);font-weight:500;font-size:.8rem} .preis-kalk-wert{display:flex;flex-direction:column;align-items:flex-end;font-weight:500;font-size:.8rem} .preis-kalk-wert small{color:var(--leise)} .preis-leer{color:var(--leise);font-weight:400;font-size:1rem} .preis-fuss{margin:.35rem 0 0;font-size:.7rem;color:var(--leise);text-align:right} @media (max-width:900px){.mp-zeile{flex-direction:column}.preis-kachel{flex-basis:auto}} /* MARKTPLAETZE ZWEIZEILIG (D290, 25.09.2026): "die marktplaetze koennen am desktop auch zweizeilig sein" (Betreiber). Vorher nahm die Leiste den ganzen Rest der Reihe: bei 1280 px blieb eine Spalte mit sechs Kreisen untereinander (800 px hoch), bei 1920 px eine Zeile ueber 856 px. Jetzt fest drei je Zeile, die Leiste so breit wie noetig - den Rest teilen sich Preis und Rentabilitaet. */ @media (min-width:1500px){ .mp-zeile .mp-leiste{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,minmax(6.2rem,auto)); justify-content:center;align-content:center;gap:1rem 1.1rem} .mp-zeile .preis-kachel,.mp-zeile .rent-kachel{flex:1 1 17rem} } /* Laptop-Breite (901-1499 px): neben einer zweizeiligen Leiste blieben Preis und Rentabilitaet nur je ~220 px - der Rabatt rutschte unter den Preis, jede Zeile brach um. Dort steht die Leiste als eigene Zeile ueber die volle Breite, Preis und Rentabilitaet teilen sich die Zeile darunter. */ @media (min-width:901px) and (max-width:1499px){ .mp-zeile{flex-wrap:wrap} .mp-zeile .mp-leiste{flex:1 1 100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(6.2rem,1fr)); justify-items:center;gap:.6rem 1rem} .mp-zeile .preis-kachel,.mp-zeile .rent-kachel{flex:1 1 17rem} } /* Der Artikelname in der Leiste kuerzt sich mit Auslassungspunkten, statt ueber die Knoepfe zu laufen (18.09.2026): die mittlere Spalte darf nicht breiter werden als der Platz zwischen den Zonen. */ /* Und die Mitte ist die Mitte ZWISCHEN den Knoepfen, nicht die der Spalte: Flex statt Raster - links und rechts so breit wie ihre Knoepfe, die Mitte nimmt den Rest. Nur auf der Artikelseite; die Liste (.subnav-liste) behaelt ihr Raster. */ .subnav-zeile:not(.subnav-liste){display:flex;align-items:stretch;gap:1rem} .subnav-zeile:not(.subnav-liste) .subnav-links,.subnav-zeile:not(.subnav-liste) .subnav-rechts{flex:none} .subnav-zeile:not(.subnav-liste) .subnav-mitte{flex:1 1 auto;min-width:0;overflow:hidden} h1.subnav-kennung{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block} /* Der Seitenstreifen mit festem Fuss (18.09.2026): oben rollt der Pruefstand, unten kleben Korrekturkasten und Meldung. */ /* Nur der Streifen MIT Fuss (Artikelseite) - der der Artikelliste hat keinen und behaelt seinen Rand (18.09.2026). */ .a-seite:has(.a-seite-inhalt){display:flex;flex-direction:column;padding:0;overflow:hidden} .a-seite-inhalt{flex:1 1 auto;min-height:0;overflow-y:auto;padding:1.25rem 1.4rem} .a-seite-fuss{flex:none;padding:0 1.4rem 1rem;background:var(--flaeche)} .a-seite-fuss:not(:has(.auftrag:not([hidden]))):not(:has(#meldung:not([hidden]))):not(:has(.pk-alles)){display:none} /* Die Trennlinie erst vor Korrekturkasten und Meldung - "Alles beheben" steht darueber ohne Linie (20.09.2026). */ .a-seite-fuss-rest{border-top:1px solid var(--rand);padding-top:.8rem;margin-top:.8rem} .a-seite-fuss-rest:not(:has(.auftrag:not([hidden]))):not(:has(#meldung:not([hidden]))){display:none} /* Ohne Kasten: der Strich oben grenzt schon ab; nur der farbige Streifen links bleibt als Zustand (18.09.2026). */ .a-seite-fuss .auftrag{margin:0;border:0;border-left:3px solid var(--rand);border-radius:0;background:none;padding:.1rem 0 .1rem .8rem} .a-seite-fuss .auftrag.a-laeuft{border-left-color:var(--akzent)} .a-seite-fuss .auftrag.a-fertig{border-left-color:var(--gut)} .a-seite-fuss .auftrag.a-fehler{border-left-color:var(--schlecht)} .a-seite-fuss #meldung{border:0;border-left:3px solid var(--warn);border-radius:0;background:none;padding:.1rem 0 .1rem .8rem} .a-seite-fuss #meldung.hinweis-fehler{border-left-color:var(--schlecht)} .a-seite-fuss #meldung.hinweis-akzent{border-left-color:var(--akzent)} .a-seite-fuss #meldung.hinweis-gut{border-left-color:var(--gut)} .a-seite-fuss .auftrag + #meldung,.a-seite-fuss #meldung{margin:.6rem 0 0} .a-seite-fuss .auftrag-kopf{flex-direction:column;align-items:flex-start;gap:.35rem} .a-seite-fuss .auftrag-knoepfe{justify-content:flex-start} @media (max-width:1100px){ .a-seite:has(.a-seite-inhalt){overflow:visible;display:block} .a-seite-inhalt{overflow:visible;padding:1rem 1.2rem} .a-seite-fuss{padding:.8rem 1.2rem}} /* Die dritte Stufe "Hinweis" - blau (D205, 19.09.2026). */ .p-hinweis{background:var(--info-bg);color:var(--info)} .pille.p-hinweis{border-color:color-mix(in srgb, var(--info) 45%, transparent)} .a-mld-hinweis{color:var(--info)} .pk-k-hinweis{border-color:var(--info);background:var(--info-bg)} .pk-k-hinweis .pk-zahl{color:var(--info)} .pk-a-hinweis::before{background:var(--info)} .pk-a-hinweis{color:var(--info)} .a-seite .pk-l-hinweis{border-left-color:var(--info)} .meldung-hinweis{border-left-color:var(--info)} .mp-liste .mp-hinweis .mp-punkt{background:var(--info)} /* Die Loesung unter dem Befund (D206, 19.09.2026): ein Knopf, ein Feld mit Knopf, mehrere Knoepfe, oder nur ein Satz. Feld und Knopf gleich hoch wie beim Stilllegen. */ .pk-loesung{margin-top:.35rem;display:flex;flex-direction:column;gap:.3rem;animation:tafel-ein .18s ease-out both} .pk-form{display:flex;gap:.4rem;align-items:stretch;margin:0} .pk-knoepfe{display:flex;flex-wrap:wrap;gap:.4rem} .pk-knopf,.pk-feld{height:2.1rem;padding-top:0;padding-bottom:0;line-height:1;display:inline-flex;align-items:center;box-sizing:border-box} .pk-knopf{font-size:.8rem;padding-left:.7rem;padding-right:.7rem;white-space:nowrap;text-decoration:none} .pk-knopf .gruppen-zahl{margin-left:.35rem} .pk-knopf:disabled{opacity:.55;cursor:not-allowed} .pk-ki::before{content:"✦";font-size:.85rem;line-height:1;margin-right:.35rem} .pk-feld{flex:1 1 auto;min-width:0;max-width:100%;font-size:.82rem;padding-left:.5rem;padding-right:.5rem} .pk-wahl .pk-knopf{flex:none} .pk-loesung-text{margin:0;font-size:.76rem;color:var(--leise);line-height:1.4} /* "Alles beheben" am Fuss des Streifens. */ .pk-alles{display:flex;flex-direction:column;margin:.2rem 0 0} .pk-alles-knopf{align-self:stretch;justify-content:center;font-weight:700} /* "Alles beheben" arbeitet: Kreisel wie bei der Anmeldung, in Orange (20.09.2026). */ .pk-kreisel{display:inline-block;width:.9rem;height:.9rem;margin:0 .5rem 0 0;border-radius:50%; border:2px solid rgba(255,140,0,.3);border-top-color:var(--akzent);animation:zf-drehen .7s linear infinite;vertical-align:-.1rem} .pk-alles-knopf:disabled{opacity:.55;cursor:not-allowed} .pk-alles-knopf.laeuft{cursor:default} @media (prefers-reduced-motion:reduce){.pk-kreisel{animation:none}} /* Preisschild mit Spanne (20.09.2026, Artikel 30548: "120,85 – 179,90 €" plus "10–35 %" ragte aus der Kachel): die Spanne kleiner, der Text darf umbrechen, das Schild bleibt rechts, nichts laeuft ueber. */ .preis-kachel{min-width:0;overflow:hidden} .preis-schild{flex-wrap:wrap} .preis-vk{white-space:normal;min-width:0;flex:1 1 auto} .preis-vk.preis-spanne{font-size:1.45rem} .preis-vk.preis-spanne .preis-bis{font-size:1.1rem;white-space:nowrap} .preis-prozent{white-space:nowrap;margin-left:auto} /* Die Kostenseite (D209, 20.09.2026). */ .kosten-karten{margin-bottom:1.2rem} .kosten-rahmen label{display:block;font-size:.85rem;color:var(--leise);margin-bottom:.3rem} .kosten-rahmen .ak-zeile{display:flex;align-items:center;gap:.5rem} .kosten-rahmen input[type=text]{width:10rem;text-align:right} .kosten-tabelle input[type=text],.kosten-tabelle select{width:100%;box-sizing:border-box;font:inherit;font-size:.88rem; padding:.3rem .5rem;border:1px solid var(--rand);border-radius:6px;background:var(--bg);color:var(--text)} .kosten-tabelle input.kosten-wert{width:7rem;text-align:right;font-variant-numeric:tabular-nums} .kosten-tabelle td{vertical-align:middle} .kosten-tabelle tr.kosten-aus input,.kosten-tabelle tr.kosten-aus select{opacity:.55} .kosten-knoepfe{white-space:nowrap} .kosten-knoepfe form{margin:0} .kosten-neu td{border-top:2px solid var(--rand)} .preis-leise-link{color:var(--leise);text-decoration:underline dotted;text-underline-offset:3px;font-weight:500} .preis-leise-link:hover{color:var(--akzent)} .kosten-tabelle input.kosten-aus-feld{opacity:.35;cursor:default} /* Loesungen mit Angabe im Assistenten (20.09.2026): Auswahl oder Feld unter der Zeile, in der Breite der Zeile begrenzt. */ .as-eingabe{display:block;margin-top:.35rem;max-width:22rem;font:inherit;font-size:.82rem;padding:.3rem .5rem; border:1px solid var(--rand);border-radius:6px;background:var(--bg);color:var(--text)} .as-eingabe-zahl{width:9rem} .as-grund-inline{display:inline;margin:0 0 0 .3rem} /* Die Endkontrolle in der Aktivierungsstufe des Assistenten (20.09.2026). */ .as-endkontrolle{margin:1.2rem 0 .4rem;padding-top:.9rem;border-top:1px solid var(--rand)} .as-endkontrolle .as-liste{margin-top:.5rem} .as-beheben{flex:none;display:flex;align-items:center;gap:.4rem;margin:0} .as-eingabe-klein{display:inline-block;margin:0;max-width:14rem;font-size:.78rem;padding:.25rem .4rem} /* Alle Filter hinter EINEM Trichter (20.09.2026). Die Abschnitte darin sind die bisherigen Tafeln, nur nicht mehr schwebend: der Kopf wird zur Zeile mit Winkel, die Tafel darunter liegt in der Flaeche. */ .hf-sammel{position:relative;flex:none} .hf-sammel > summary{list-style:none;cursor:pointer} .hf-sammel > summary::-webkit-details-marker{display:none} .hf-sammel-knopf{padding:0 .6rem;gap:.3rem} .hf-sammel-knopf svg{width:1.05rem;height:1.05rem;color:var(--text)} .hf-sammel[open] > .hf-sammel-knopf{border-color:var(--akzent);color:var(--akzent)} .hf-sammel[open] > .hf-sammel-knopf svg{color:var(--akzent)} .hf-sammel-tafel{width:24rem;padding:.35rem .5rem;display:flex;flex-direction:column;gap:.15rem} .hf-sammel .hf-huelle{position:static;flex:none} .hf-sammel .hf-huelle > .hf-auf{display:flex;width:100%;max-width:none;border:0;border-radius:6px; background:none;padding:.5rem .4rem;height:auto;font-weight:600;gap:.5rem} .hf-sammel .hf-huelle > .hf-auf::after{content:"";margin-left:auto;width:.5rem;height:.5rem;flex:none; border-right:1.6px solid var(--leise);border-bottom:1.6px solid var(--leise);transform:rotate(45deg); transition:transform .15s} .hf-sammel .hf-huelle[open] > .hf-auf::after{transform:rotate(-135deg)} .hf-sammel .hf-huelle > .hf-auf:hover{background:var(--bg)} .hf-sammel .hf-huelle .hf-marke{color:var(--text);font-size:.88rem} .hf-sammel .hf-huelle > .hf-tafel{position:static;width:auto;max-width:none;box-shadow:none;border:0; border-radius:0;padding:.2rem .4rem .7rem;background:none} .hf-sammel .hf-huelle + .hf-huelle{border-top:1px solid var(--rand)} /* Stepper des Assistenten: Schrift in den farbigen Stufen DUNKEL statt in der Stufenfarbe, auch der Haken im Punkt (Betreiber, 20.09.2026). var(--text) bleibt im dunklen Modus hell - dort sind die Grundflaechen dunkel; der gefuellte Punkt bekommt die Schrift der dunklen Flaeche. */ .as-s-fertig,.as-s-hier{color:var(--text)} .as-s-fertig .as-punkt,.as-s-hier .as-punkt{color:var(--sekundaer)} .as-sch-fertig .as-schritt-knopf,.as-sch-hier .as-schritt-knopf{color:var(--text)} .as-sch-hier .as-schritt-knopf{color:var(--sekundaer)} /* =================================================================== DER ASSISTENT ALS FLOW (20.09.2026, "das fuehlt sich noch nicht nach Assistent an"). Vier Dinge, alle nur im Blatt: 1. die Stufenleiste als Zeitstrahl - Kreise mit Linien dazwischen, erledigt gruen mit Haken, hier orange mit pulsierendem Ring; 2. ein Schrittkopf im Inhalt: "Schritt n von 4", Name, ein Satz; 3. der Inhalt gleitet bei jedem Schritt herein; 4. die Fussleiste als Handlungszeile: rechts der eine Weg nach vorn. =================================================================== */ .as-stufen{gap:0;border-bottom:1px solid var(--rand);background:var(--flaeche); padding:.9rem .6rem .7rem;overflow:visible} .as-stufe{position:relative;flex-direction:column;gap:.4rem;padding:0 .2rem; background:none!important;color:var(--leise);font-size:.74rem;font-weight:600;white-space:normal;text-align:center} .as-stufe::before,.as-stufe::after{content:"";position:absolute;top:.85rem;height:2px;background:var(--rand);z-index:0} .as-stufe::before{left:0;right:50%} .as-stufe::after{left:50%;right:0} .as-stufe:first-child::before,.as-stufe:last-child::after{display:none} .as-stufe.as-s-fertig::before,.as-stufe.as-s-fertig::after,.as-stufe.as-s-hier::before{background:var(--gut)} .as-stufe .as-punkt{position:relative;z-index:1;width:1.7rem;height:1.7rem;min-width:1.7rem;min-height:1.7rem;flex:0 0 auto;box-sizing:border-box;padding:0;line-height:1;aspect-ratio:1;border-radius:50%;font-size:.78rem; border:2px solid var(--rand-stark);background:var(--flaeche);color:var(--leise); transition:background .2s ease,border-color .2s ease,color .2s ease} .as-s-fertig .as-punkt{background:var(--gut);border-color:var(--gut);color:var(--sekundaer)} .as-s-hier .as-punkt{background:var(--akzent);border-color:var(--akzent);color:var(--sekundaer); box-shadow:0 0 0 0 rgba(255,140,0,.45);animation:as-puls 1.8s ease-out infinite} .as-s-hier{color:var(--text)} .as-s-fertig{color:var(--text)} .as-stufe .as-wort{overflow:visible;line-height:1.2} @keyframes as-puls{0%{box-shadow:0 0 0 0 rgba(255,140,0,.45)}70%{box-shadow:0 0 0 9px rgba(255,140,0,0)}100%{box-shadow:0 0 0 0 rgba(255,140,0,0)}} @media (prefers-reduced-motion:reduce){.as-s-hier .as-punkt{animation:none}} /* Der Schrittkopf. */ .as-schritt-kopf{margin:0 0 1rem;padding:0 0 .9rem;border-bottom:1px solid var(--rand)} .as-schritt-nr-text{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--akzent-text)} .as-schritt-titel{margin:.15rem 0 0;font-size:1.25rem;font-weight:700;line-height:1.2} .as-schritt-satz{margin:.3rem 0 0;font-size:.9rem;color:var(--leise);line-height:1.45} /* Der Inhalt gleitet herein - je Schritt neu, weil die Tafel je Schritt ersetzt wird. Die Kinder nacheinander, damit es ein Fluss ist und kein Sprung. */ @keyframes as-rein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .as-feld > *{animation:as-rein .32s ease-out both} .as-feld > *:nth-child(2){animation-delay:.04s} .as-feld > *:nth-child(3){animation-delay:.08s} .as-feld > *:nth-child(4){animation-delay:.12s} .as-feld > *:nth-child(5){animation-delay:.16s} .as-feld > *:nth-child(n+6){animation-delay:.2s} @media (prefers-reduced-motion:reduce){.as-feld > *{animation:none}} /* Die Fragen der Angaben: nummerierte Abschnitte statt Linien. */ .as-frage{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--leise); border-top:0;padding-top:0;margin:1.3rem 0 .55rem} .as-frage.as-erste{margin-top:0} /* Die Fussleiste als Handlungszeile: hell, mit dem einen Weg nach vorn rechts - gross, mit Pfeil; links leise, was sonst noch geht. */ .as-fussleiste{background:var(--flaeche);padding:.75rem 1.1rem;gap:.8rem} .as-fuss-weiter{padding:.6rem 1.15rem;font-size:.95rem;display:inline-flex;align-items:center;gap:.45rem} .as-fuss-weiter::after{content:"";width:.55rem;height:.55rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(-45deg);transition:transform .15s ease} .as-fuss-weiter:hover:enabled::after{transform:rotate(-45deg) translate(2px,2px)} .as-fuss-weiter:disabled::after{opacity:.5} /* Die Meldung des letzten Handgriffs gleitet ein. */ .as-meldung{animation:as-rein .25s ease-out both} /* Der Erklaersatz unter den KI-Laeufen: mit Luft zur Liste darueber (20.09.2026). */ .as-ki-satz{margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--rand)} /* Die Knoepfe im Kopf des Assistenten wie in der Artikelleiste: eckig mit Radius, grauer Grund (Betreiber, 20.09.2026). */ .as-kopf .as-rund{border-radius:8px;background:var(--bg)} .as-fussleiste .as-rund{border-radius:8px;background:var(--bg)} /* Kein Ladebalken ueber dem Kopf des Assistenten (Betreiber, 20.09.2026): der Inhalt gleitet ohnehin herein, und der Weiter-Knopf ist waehrend des Ladens gesperrt. Das Skript darf ihn weiter schalten - er ist nur nicht mehr zu sehen. */ .as-fenster .as-balken{display:none!important} /* Kopf des Assistenten: alles in einer Mitte (20.09.2026) - keine Eigenraender der Kinder, Knoepfe und Nummer gleich hoch und mittig. */ .as-kopf{padding:.6rem 1.1rem;align-items:center} .as-kopf > *{margin-top:0;margin-bottom:0;align-self:center} .as-kopf .as-rund,.as-kopf .as-kopf-nr{height:2.3rem;line-height:1;box-sizing:border-box} .as-kopf .as-rund{width:2.3rem} .as-titel h2{line-height:1.3} /* Der Artikelname im Kopf des Assistenten: mittig zwischen den Knoepfen, zu lange Namen mit ... gekuerzt (20.09.2026). */ .as-titel{flex:1 1 0;min-width:0;text-align:center;padding:0 .3rem} .as-titel h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block} /* Steckbrief: gleicher Abstand zur Linie darueber (Schrittkopf) und zur Linie darunter (20.09.2026). */ .as-schritt-kopf + .as-vorlauf{margin-top:1rem} .as-vorlauf{padding-bottom:1rem;margin-bottom:1rem} /* Zuruecksetzen-Zeichen: der Kreispfeil laeuft GEGEN den Uhrzeigersinn - zurueck, nicht wiederholen (Betreiber, 20.09.2026). Gespiegelt statt neu gezeichnet, damit beide Stellen (Liste, Assistent) gleich bleiben. */ .zuruecksetzen svg,.as-beenden svg{transform:scaleX(-1)} /* Der Auffrischknopf arbeitet: statt des Pfeils ein drehender Kreisel, nicht ausgegraut (20.09.2026). */ .knopf-frisch.laeuft::before{content:"";width:.85rem;height:.85rem;border-radius:50%; border:2px solid rgba(255,140,0,.3);border-top-color:var(--akzent);animation:zf-drehen .7s linear infinite} .knopf-frisch.laeuft:disabled{opacity:1;cursor:progress;border-color:var(--akzent)} @media (prefers-reduced-motion:reduce){.knopf-frisch.laeuft::before{animation:none}} /* Kein Fokusring um das Fenster: wird es beim Laden der Seite wieder geoeffnet, bekommt das selbst den Fokus (es gibt noch nichts darin) und der Browser malt seinen Ring - "ein weisser Rand" (20.09.2026). Der Fokus wandert mit dem Inhalt ohnehin weiter. */ dialog.as-fenster:focus,dialog.as-fenster:focus-visible{outline:none} /* Die Quellen des Steckbriefs im selben Raster wie die Liste darueber. */ .as-sb-quellen{display:grid;grid-template-columns:7rem 1fr;gap:.35rem .8rem;margin:.6rem 0 0;font-size:.82rem;line-height:1.5} .as-sb-quellen-wort{color:var(--leise);font-weight:600} .as-sb-quellen-liste{min-width:0;overflow-wrap:anywhere} @media (max-width:34rem){.as-sb-quellen{grid-template-columns:1fr}} /* Nachgeholte Tafel derselben Stufe: nichts gleitet, nichts flackert. */ .as-ohne-animation .as-feld > *,.as-ohne-animation .as-meldung{animation:none} /* Die Restzeit unter den KI-Laeufen: mit Luft zur Liste darueber (20.09.2026). */ .as-restzeit{margin-top:1.2rem} /* KI-Zeile in der Warteschlange: leise, Balken leer - erst wenn sie dran ist, wandert er (20.09.2026). */ .as-zeile.as-k-wartet{color:var(--leise)} .as-zeile.as-k-wartet .as-bar-fuell{width:0} /* Ein gedrueckter Knopf im Assistenten arbeitet: Kreisel vor dem Wort, nicht ausgegraut (20.09.2026). Der Weiter-Knopf verliert dabei seinen Pfeil. */ .knopf.laeuft,.knopf-leise.laeuft,.as-rund.laeuft{opacity:1!important;cursor:progress} .knopf.laeuft::before,.knopf-leise.laeuft::before{content:"";display:inline-block;width:.85rem;height:.85rem; margin:0 .45rem -.1rem 0;border-radius:50%;border:2px solid rgba(255,140,0,.3);border-top-color:var(--akzent); animation:zf-drehen .7s linear infinite;vertical-align:middle} .as-fuss-weiter.laeuft::after{display:none} .as-rund.laeuft svg{animation:zf-drehen .8s linear infinite} @media (prefers-reduced-motion:reduce){.knopf.laeuft::before,.knopf-leise.laeuft::before,.as-rund.laeuft svg{animation:none}} /* Der Assistent-Knopf der Artikelliste (20.09.2026): "Schritt n/4" statt Prozent. Bereit fuer dich: orange gefuellt mit Haken im Zeichen. Arbeitet: Kreisel statt Zeichen. */ .a-assistent{min-width:7.6rem} .a-assistent-kreisel{display:none;width:.9rem;height:.9rem;flex:none;border-radius:50%; border:2px solid rgba(255,140,0,.3);border-top-color:currentColor;animation:zf-drehen .7s linear infinite} .a-assistent-laeuft{overflow:visible;font-variant-numeric:tabular-nums} .a-assistent-laeuft .a-assistent-zeichen{display:none} .a-assistent-laeuft .a-assistent-kreisel{display:inline-block} .a-assistent-bereit{background:var(--akzent-bg);border-color:var(--akzent);color:var(--akzent-text); font-variant-numeric:tabular-nums} .a-assistent-bereit:hover{background:var(--akzent);color:#fff} @media (prefers-reduced-motion:reduce){.a-assistent-kreisel{animation:none}} /* Mouseover DUNKELGRAU statt orange (Betreiber, 20.09.2026): der Weiter-Knopf des Assistenten und der Assistent-Knopf der Liste. */ .as-fuss-weiter:hover:enabled{background:var(--sekundaer);color:#fff;border-color:var(--sekundaer)} .a-assistent:hover,.a-assistent-bereit:hover{background:var(--sekundaer);color:#fff;border-color:var(--sekundaer)} .a-assistent:hover .a-assistent-kreisel{border-color:rgba(255,255,255,.3);border-top-color:#fff} /* Die Wege der Artikelzeile (20.09.2026). Am Rechner: unsichtbare Huelle, die Knoepfe stehen wie bisher in der Zeile. */ .a-wege{display:contents} .a-mehr{display:none} @media (max-width:720px){ /* Die Kopfzeile rollt seitlich statt umzubrechen; kein Rollbalken. */ .a-haupt-zeile{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none; -webkit-overflow-scrolling:touch;padding-right:.5rem} .a-haupt-zeile::-webkit-scrollbar{display:none} .a-haupt-zeile > *{flex:none} .a-name{flex:0 0 auto;max-width:58vw} /* Der Punkte-Knopf klebt rechts, ueber dem rollenden Inhalt. */ .a-mehr{display:inline-flex;align-items:center;justify-content:center;position:sticky;right:0; margin-left:auto;width:2.1rem;height:2.1rem;flex:none;border:1px solid var(--rand);border-radius:8px; background:var(--flaeche);color:var(--text);cursor:pointer;padding:0;z-index:2; box-shadow:-8px 0 8px -6px rgba(0,0,0,.18)} .a-mehr svg{width:1rem;height:1rem;fill:currentColor} .a-mehr.offen{border-color:var(--akzent);color:var(--akzent)} /* Die Tafel: erst nach dem Klick, als schwebende Spalte unter dem Knopf (Lage setzt das Skript, weil die Zeile rollt und abschneidet). */ .a-wege{display:none;position:fixed;z-index:60;flex-direction:column;align-items:stretch;gap:.4rem; padding:.5rem;background:var(--flaeche);border:1px solid var(--rand);border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.18);animation:tafel-ein .15s ease-out both} .a-wege.offen{display:flex} .a-wege > *{margin:0;justify-content:flex-start} .a-wege .a-auf{display:inline-flex;align-items:center;gap:.4rem;height:2.1rem;padding:0 .6rem; border:1px solid var(--rand);border-radius:8px;background:var(--bg)} } /* Im Filter-Trichter: der Abschnittskopf "Sichtbarkeit" ohne das Auge - die Augen stehen bei sichtbar / nicht sichtbar (Betreiber, 20.09.2026). */ .hf-sammel .hf-huelle > .hf-auf .sicht-auge{display:none} /* Der Fuss des Filter-Trichters mit dem Anwenden-Knopf (21.09.2026). */ .hf-sammel-fuss{display:flex;justify-content:flex-end;padding:.5rem .4rem .2rem;border-top:1px solid var(--rand);margin-top:.2rem} .hf-anwenden{padding:.4rem .9rem;font-size:.85rem} .ps-im-filter{color:var(--akzent-text);font-weight:700} /* "Alles beheben" traegt seinen eigenen Kreisel (.pk-kreisel) - der allgemeine Knopf-Kreisel (.knopf.laeuft::before) bleibt dort aus, sonst drehen sich zwei (21.09.2026). */ .pk-alles-knopf.laeuft::before{display:none} /* Sammeln (D224): Menue in der Kopfzeile der Artikelseite, Seite /sammelliste/. */ .a-kopfzeile .sammel-menue{order:2;flex:none} .sammel-tafel{min-width:14rem} .sammel-tafel form{margin:0} .sammel-wahl{display:flex;align-items:center;gap:.5rem;width:100%} .sammel-haken{width:1rem;height:1rem;flex:none;border:1.5px solid var(--rand-stark);border-radius:4px;background:var(--flaeche)} .sammel-wahl.an .sammel-haken{background:var(--akzent);border-color:var(--akzent);position:relative} .sammel-wahl.an .sammel-haken::after{content:"";position:absolute;left:.28rem;top:.08rem;width:.3rem;height:.55rem;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)} .sammel-wahl.an{color:var(--akzent-text);font-weight:600} .nav-fuss-link{display:block;margin:.4rem .6rem .2rem;font-size:.8rem;color:var(--leise);text-decoration:underline dotted;text-underline-offset:3px} .nav-fuss-link:hover{color:var(--akzent)} .sammel-karten{margin-bottom:1rem} .sammel-senden label{display:block;font-size:.85rem;color:var(--leise);margin:.5rem 0 .2rem} .sammel-senden textarea,.sammel-senden input[type=text]{display:block;width:100%;box-sizing:border-box;font:inherit;font-size:.9rem;color:var(--text); padding:.4rem .55rem;border:1px solid var(--rand);border-radius:8px;background:var(--bg)} .sammel-knoepfe{display:flex;gap:.5rem;align-items:center;margin-top:.8rem} .sammel-tabelle td{vertical-align:middle} .sammel-bild img{display:block;width:40px;height:40px;object-fit:cover;border-radius:6px;border:1px solid var(--rand)} /* "Sammeln" in der Unterleiste der Artikelseite, neben dem Shop-Link (21.09.2026): ein Knopf im Stil des Nummernschilds, die Tafel klappt rechtsbuendig darunter auf. */ .subnav .sammel-menue{position:relative;display:flex;align-self:stretch;flex:none} .subnav .sammel-menue > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem; height:100%;padding:0 .7rem;font-size:.95rem;font-weight:600;color:var(--leise)} .subnav .sammel-menue > summary::-webkit-details-marker{display:none} .subnav .sammel-menue > summary:hover,.subnav .sammel-menue[open] > summary{border-color:var(--akzent);color:var(--akzent)} .subnav .sammel-menue > summary .gruppen-zahl{margin-left:.1rem} .subnav .sammel-menue > .nav-tafel{left:auto;right:0;top:calc(100% + .35rem)} .subnav .sammel-menue > summary.a-nr{margin:0} /* Die Sammeln-Tafel, aufgeraeumt (21.09.2026): Titelzeile, zwei Zeilen mit Ankreuzfeld - gewaehlt hell orange -, darunter abgesetzt der Weg zur Liste. */ .sammel-tafel{min-width:15.5rem;padding:.4rem} .sammel-tafel .nav-wer{margin:.2rem .7rem .4rem} .sammel-tafel form + form{margin-top:.15rem} .sammel-wahl{justify-content:flex-start;gap:.6rem;padding:.55rem .7rem;font-size:.9rem;border-radius:8px; transition:background .12s ease} .sammel-wahl:hover:enabled{background:var(--kopf)} .sammel-wahl.an{background:var(--akzent-bg);color:var(--akzent-text);font-weight:600} .sammel-wahl.an:hover:enabled{background:var(--akzent-bg)} .sammel-haken{width:1.05rem;height:1.05rem;border:1.5px solid var(--rand-stark);border-radius:5px;background:var(--flaeche); transition:background .12s ease,border-color .12s ease} .sammel-wahl.an .sammel-haken::after{left:.3rem;top:.1rem;width:.3rem;height:.58rem} .sammel-tafel .nav-fuss-link{display:flex;justify-content:space-between;align-items:center;margin:.35rem 0 0; padding:.55rem .7rem;border-top:1px solid var(--rand);border-radius:0 0 8px 8px;font-size:.84rem; color:var(--leise);text-decoration:none;font-weight:500} .sammel-tafel .nav-fuss-link:hover{background:var(--kopf);color:var(--akzent-text)} /* Sammeln: Abschnitt "Neue Farben" mit einer Zeile je Farbe (21.09.2026). */ .sammel-abschnitt{margin:.5rem .7rem .2rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--leise)} .sammel-farbe{padding-top:.42rem;padding-bottom:.42rem;font-weight:500} .sammel-farbe.an{font-weight:600} .sammel-leer{margin:.2rem .7rem .4rem;font-size:.82rem;color:var(--leise)} .sammel-tafel{max-height:min(70vh,28rem);overflow-y:auto} .sammel-wert{color:var(--akzent-text);font-weight:600;margin-left:.3rem} .sammel-absender{margin-top:1rem} .sammel-senden select{display:block;width:100%;box-sizing:border-box;font:inherit;font-size:.9rem;color:var(--text); padding:.4rem .55rem;border:1px solid var(--rand);border-radius:8px;background:var(--bg)} .sammel-absender-grund{margin-top:.3rem;color:var(--warn)} /* Empfaenger der Sammelliste als Kontrollkaestchen (21.09.2026). */ .sammel-empf-kopf{display:flex;justify-content:space-between;align-items:baseline;font-size:.85rem;color:var(--leise);margin:.6rem 0 .3rem} .sammel-empf-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.15rem .8rem; max-height:16rem;overflow-y:auto;padding:.4rem .5rem;border:1px solid var(--rand);border-radius:8px;background:var(--bg)} .sammel-empf{display:flex;align-items:center;gap:.5rem;padding:.25rem .3rem;border-radius:6px;cursor:pointer;font-size:.86rem;min-width:0} .sammel-empf:hover{background:var(--flaeche)} .sammel-empf input{accent-color:var(--akzent);flex:none} .sammel-empf-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sammel-empf-mail{color:var(--leise);font-size:.74rem;margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%} /* ===== Die Sendekarte der Sammelliste, zweite Fassung (21.09.2026) ===== */ .sammel-senden{display:block;margin:0 0 1.4rem;padding:1.1rem 1.25rem 1.2rem} .sammel-senden h3{margin:0 0 .6rem;font-size:1.02rem;font-weight:600;display:flex;align-items:baseline;gap:.5rem} .sammel-spalten{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(16rem,1fr);gap:1.6rem;align-items:start} @media (max-width:820px){.sammel-spalten{grid-template-columns:1fr}} .sammel-empf-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem .8rem;margin-bottom:.5rem} .sammel-empf-kopf h3{margin:0} .sammel-empf-werkzeug{display:flex;align-items:center;gap:.4rem} .sammel-empf-suche{width:11rem;padding:.3rem .55rem;font-size:.85rem} .sammel-empf-liste{list-style:none;margin:0;padding:.25rem;max-height:22rem;overflow-y:auto; border:1px solid var(--rand);border-radius:10px;background:var(--bg); display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.1rem .4rem} .sammel-empf{min-width:0} .sammel-empf[hidden]{display:none} .sammel-empf label{display:flex;align-items:flex-start;gap:.55rem;padding:.4rem .5rem;border-radius:8px;cursor:pointer;min-width:0} .sammel-empf label:hover{background:var(--flaeche)} .sammel-empf input{flex:none;margin:.2rem 0 0;width:1rem;height:1rem;accent-color:var(--akzent)} .sammel-empf-text{display:flex;flex-direction:column;min-width:0;line-height:1.25} .sammel-empf-name{font-size:.88rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sammel-empf-mail{font-size:.74rem;color:var(--leise);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;max-width:none} .sammel-empf:has(input:checked) label{background:var(--akzent-bg)} .sammel-feld{display:block;font-size:.82rem;font-weight:600;color:var(--leise);margin:.9rem 0 0} .sammel-feld .marke-txt{font-weight:400} .sammel-feld input[type=text],.sammel-feld select,.sammel-feld textarea{display:block;width:100%;box-sizing:border-box;margin-top:.3rem; font:inherit;font-size:.9rem;font-weight:400;color:var(--text);padding:.45rem .6rem;border:1px solid var(--rand);border-radius:8px;background:var(--bg)} .sammel-feld textarea{resize:vertical;min-height:2.6rem} .sammel-inhalt{display:flex;align-items:center;gap:.8rem;margin:1rem 0 0;padding:.7rem .9rem;border:1px solid var(--rand);border-radius:10px;background:var(--bg);font-size:.88rem;line-height:1.35} .sammel-inhalt-zahl{font-size:1.8rem;font-weight:800;color:var(--akzent-text);line-height:1;font-variant-numeric:tabular-nums} .sammel-knoepfe{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:1rem} .sammel-absender{margin-top:.8rem;line-height:1.45} /* Auswahlfelder der Sammelliste: Luft fuer den Pfeil am rechten Rand (21.09.2026). */ .sammel-feld select{padding-right:2rem;appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath d=%27m4.5 6.5 3.5 3.5 3.5-3.5%27 fill=%27none%27 stroke=%27%23777%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .7rem center;background-size:1rem} /* Der Vorschlag im Reiter Texte als Editor (21.09.2026) - dieselben Felder wie im Assistenten, mit Fusszeile aus Zaehler und Speichern. */ .textfeld-editor{margin:0;display:flex;flex-direction:column;gap:.4rem} .textfeld-editor .as-t-feld{width:100%;box-sizing:border-box} .textfeld-editor.textwert-neu .as-t-feld,.textfeld-editor.textwert-neu .as-ed-flaeche{border-color:var(--akzent)} .textfeld-editor-fuss{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap;font-size:.8rem;color:var(--leise)} .textfeld-knoepfe > button{margin:0} /* Kein gruener Grund um das Editor-Formular (21.09.2026): "neu" zeigt nur der orange Rand des Feldes. */ .textfeld-editor.textwert-neu,.textfeld-editor.textwert-gleich{background:none;border:0;padding:0} /* Text von Hand bearbeiten, ohne KI-Vorlauf (21.09.2026). */ .textfeld-hand[hidden]{display:none} .textfeld-hand-knoepfe{display:flex;gap:.4rem;flex-wrap:wrap;margin-left:auto} .textfeld-hand-knoepfe > button{margin:0} /* Die Knoepfe im Kopf eines Textfelds: alle gleich hoch wie "vorschlagen" (21.09.2026) - ein Mass, eine Zeile, egal ob KI- oder leiser Knopf. */ .textfeld-knoepfe{align-items:center} .textfeld-knoepfe > button,.textfeld-knoepfe form > button{display:inline-flex;align-items:center; box-sizing:border-box;height:2rem;padding:0 .7rem;line-height:1;border-radius:7px} /* Der reine Zeichen-Auffrischknopf (Dashboard "Pruefstand, 30 Tage", Artikelliste, Unternavigation): statt des Schriftzeichens "↻", das je nach Schrift schief im Kasten sitzt, ein eigenes Pfeilsymbol als Maske in Textfarbe - exakt mittig, ueberall gleich (21.09.2026). Der Kreisel bei .laeuft (oben) nimmt Maske und Grund wieder weg. */ .knopf-frisch.nur-zeichen{display:inline-grid;place-items:center;line-height:1} .knopf-frisch.nur-zeichen::before{content:"";display:block;width:1.05rem;height:1.05rem; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.6-5.9'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.6-5.9'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E") center/contain no-repeat} .a-haupt-zeile .knopf-frisch.nur-zeichen::before{width:1rem;height:1rem} .knopf-frisch.nur-zeichen.laeuft::before{background:none;-webkit-mask:none;mask:none; width:.85rem;height:.85rem;box-sizing:border-box} .karte-kopf > form{align-self:center;margin:0} /* Tag-Chips in der Kopfzeile fuehren zur Gruppenfunktion (22.09.2026). */ .a-chip.a-chip-klick{cursor:pointer} .a-chip.a-chip-klick:hover{border-color:var(--akzent);color:var(--akzent)} /* Markierungen des Artikels (D239, 22.09.2026): zwei Chips, je ein Menue. */ .a-markierungen{display:flex;flex-wrap:wrap;gap:.35rem;margin:.25rem 0 0} .mk-menue{position:relative} .mk-menue > summary{list-style:none;cursor:pointer} .mk-menue > summary::-webkit-details-marker{display:none} .mk-chip{display:inline-flex;align-items:center;gap:.35rem} .mk-chip .mk-nr{display:inline-flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem;border-radius:50%; background:var(--rand);color:var(--text);font-size:.7rem;font-weight:700} .mk-chip.mk-an{border-color:var(--akzent);color:var(--akzent-text)} .mk-chip.mk-an .mk-nr{background:var(--akzent);color:#fff} .mk-menue[open] > summary{border-color:var(--akzent)} .mk-tafel{position:absolute;left:0;top:calc(100% + .3rem);z-index:30;min-width:11rem;max-height:18rem;overflow-y:auto; padding:.35rem;border:1px solid var(--rand);border-radius:10px;background:var(--bg);box-shadow:0 8px 24px rgba(0,0,0,.12); display:flex;flex-direction:column;gap:.1rem} .mk-tafel form{margin:0} .mk-wahl{display:block;width:100%;text-align:left;padding:.35rem .6rem;border:0;border-radius:6px;background:none; color:var(--text);font:inherit;font-size:.85rem;cursor:pointer} .mk-wahl:hover:enabled{background:var(--flaeche);color:var(--akzent)} .mk-wahl.mk-gewaehlt{background:var(--akzent-bg);color:var(--akzent-text);font-weight:600;cursor:default} /* Symbole der Markierungen (D240). */ .mk-symbol{width:1rem;height:1rem;flex:none;vertical-align:-.15em} .mk-chip .mk-symbol{margin-right:.05rem} .mk-wahl{display:flex;align-items:center;gap:.5rem} .mk-wahl-name{flex:1 1 auto} .mk-wahl-nr{font-size:.72rem;color:var(--leise);font-variant-numeric:tabular-nums} .mk-tafel{min-width:15rem;max-height:22rem} /* Markierungen: weisser Grund (22.09.2026, "die Icons lassen sich teilweise nicht gut lesen") - die Tafel und jede Zeile weiss, das Symbol auf einer weissen Scheibe, auch im Chip und in der gewaehlten Zeile. Bewusst nicht themenabhaengig: die Farben der Symbole sind die von plentyONE und brauchen einen hellen Grund. */ /* Nur die Scheibe unter dem Symbol ist fest weiss - Tafel, Zeilen und Chip folgen wieder dem Farbschema ("wenn du die Kreise so hast, dann wuerde auch ein dunkler Hintergrund funktionieren"). */ .mk-symbol{box-sizing:content-box;padding:.15rem;border-radius:50%;background:#fff;border:1px solid #d9dde3} .mk-wahl .mk-symbol{width:1.1rem;height:1.1rem} .mk-chip .mk-symbol{width:.95rem;height:.95rem;padding:.1rem} .mk-symbol.mk-keine{display:inline-block;width:1.1rem;height:1.1rem;background:#fff} /* Markierungen in der Unterleiste (D241, 22.09.2026): dieselbe Form wie der Umfangsknopf (8px Radius, Zeilenhoehe), das Feld haengt links. */ .mk-menue{position:relative;display:flex} .mk-menue > summary{list-style:none} .mk-menue > summary::-webkit-details-marker{display:none} /* Quadratisch: so breit wie hoch, ohne Markierung die Ziffer, mit Markierung nur das Symbol (22.09.2026). */ .mk-knopf{padding:0;aspect-ratio:1;justify-content:center;min-width:2.2rem} .mk-knopf .mk-nr{font-size:.85rem;font-weight:700;color:var(--leise)} .mk-knopf:hover .mk-nr{color:var(--akzent)} .mk-knopf .mk-symbol{width:1.05rem;height:1.05rem;padding:.12rem} .mk-menue .mk-tafel{top:calc(100% + .4rem)} /* Die Ziffern 1 und 2 (ohne Markierung) auf grauem Grund (22.09.2026). */ .mk-knopf .mk-nr{display:inline-flex;align-items:center;justify-content:center;width:1.3rem;height:1.3rem;border-radius:5px; background:var(--rand);color:var(--text);font-size:.8rem;font-weight:700} .mk-knopf:hover .mk-nr{color:var(--akzent)} /* Mit Markierung: der ganze Knopf weiss, das Symbol ohne eigene Scheibe (22.09.2026). Der Akzentrahmen (umfang-eng) bleibt. */ .mk-knopf.umfang-eng{background:#fff} .mk-knopf .mk-symbol{padding:0;border:0;background:none;width:1.15rem;height:1.15rem} /* Markierungen im Filter (D242). */ .hf-gruppe{margin:.5rem 0 .2rem;padding:0 .3rem;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--leise)} .hf-gruppe:first-child{margin-top:0} .hf-name-mk{display:inline-flex;align-items:center;gap:.35rem} .hf-name-mk .mk-symbol{width:.95rem;height:.95rem;padding:.1rem} /* Sondervorgabe im Reiter Fremdlager (D244). */ .vorgabe-karte{margin-bottom:1rem;border-color:var(--warn)} .vorgabe-karte.vorgabe-aus{border-color:var(--rand)} .vorgabe-form{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.7rem 0 0} .vorgabe-form input[type=text]{flex:1 1 16rem;min-width:10rem;font:inherit;font-size:.88rem; padding:.4rem .6rem;border:1px solid var(--rand);border-radius:8px;background:var(--bg);color:var(--text)} /* Auffrischen in der Liste als Warteschlange (22.09.2026): wartend ein ruhender Punkt, arbeitend der Kreisel (.laeuft, weiter oben), fertig ein Haken, schiefgegangen ein Kreuz. */ .a-frisch.a-wartet{border-color:var(--akzent);color:var(--akzent);opacity:.75} .a-frisch.a-wartet::before{content:"";background:currentColor;-webkit-mask:none;mask:none; width:.55rem;height:.55rem;border-radius:50%;animation:zf-warten 1.4s ease-in-out infinite} @keyframes zf-warten{0%,100%{opacity:.35}50%{opacity:1}} .a-frisch.a-fertig{border-color:var(--gut);color:var(--gut)} .a-frisch.a-fertig::before{content:"";width:.85rem;height:.85rem;background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.5 3.5 3.5L13 5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.5 3.5 3.5L13 5'/%3E%3C/svg%3E") center/contain no-repeat} .a-frisch.a-schief{border-color:var(--schlecht);color:var(--schlecht)} .a-frisch.a-schief::before{content:"";width:.8rem;height:.8rem;background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E") center/contain no-repeat} @media (prefers-reduced-motion:reduce){.a-frisch.a-wartet::before{animation:none}} /* Endkontrolle: der Weg in den Reiter als Knopf (22.09.2026). */ .as-beheben-weg{flex:none;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center} /* Reduzierungen (D249, 22.09.2026). */ .aktion-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(24rem,1fr));gap:1rem} .aktion-karte.a-stand-laeuft{border-color:var(--warn)} .aktion-karte.a-stand-beendet{opacity:.75} .aktion-umfang{text-align:right;max-width:60%} .aktion-knoepfe{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.8rem} .aktion-knoepfe form{margin:0} .aktion-neu{display:block;margin-top:.5rem} .aktion-reihe{display:flex;flex-wrap:wrap;gap:.8rem;align-items:flex-end} .aktion-feld{display:flex;flex-direction:column;gap:.25rem;flex:1 1 14rem;font-size:.82rem;font-weight:600;color:var(--leise)} .aktion-feld-kurz{flex:0 1 11rem} .aktion-feld input,.aktion-feld select{font:inherit;font-size:.9rem;font-weight:400;color:var(--text); padding:.45rem .6rem;border:1px solid var(--rand);border-radius:8px;background:var(--bg)} .aktion-feld select[multiple]{padding:.3rem} .aktion-hinweis{margin:1.1rem 0 .4rem;font-size:.85rem;color:var(--leise)} .aktion-fuss{margin-top:1rem;justify-content:space-between} /* ===== Die Bilderstrecke im Assistenten (D254, 23.09.2026) ===== EIN EIGENER KASTEN NEBEN DEM FENSTER, nicht darin (23.09.2026: "das Slideout sollte ein Kasten fuer sich sein, der sich seitlich auftut, aber nicht im anderen Popup integriert ist"). Das Assistentenfenster ist ein mit overflow:hidden - ein Kind darin kann nicht daneben stehen. Die Strecke steht deshalb position:fixed: das loest sie aus dem Fenster heraus, ohne sie aus dessen Markup zu nehmen (die Bilder kommen mit der Tafel). Gerechnet wird mit festen Massen, damit beide Kaesten als Paar in der Mitte stehen: 46rem Fenster + 1rem Luft + 18rem Strecke = 65rem. Das Fenster rueckt um die halbe Paarbreite nach links, die Strecke setzt rechts daneben an. Ist der Bildschirm dafuer zu schmal, legt sie sich wie zuvor ueber die ganze Breite. */ .as-fenster{position:relative;transition:margin-left .18s ease} /* DER OBERSTE LAYER (23.09.2026, "die Sidebar wird nicht mehr angezeigt, das Popup springt nur nach links"): ein , das mit showModal geoeffnet wird, liegt im top layer des Browsers - und ALLES andere auf der Seite liegt darunter, auch ein position:fixed mit z-index 60. Die Strecke war also da, nur hinter dem abgedunkelten Grund. Deshalb bleibt sie ein Kind des Fensters (damit im selben Layer) und steht absolut an seiner rechten Kante - eigener Rahmen, eigener Schatten, eine Handbreit Luft dazwischen. Ein Kasten fuer sich, nur eben im selben Layer wie das Fenster. Dafuer muss das Fenster in DIESEM Zustand ueber seinen Rand hinaus zeichnen duerfen: overflow:visible, aber nur mit offener Strecke. Gerollt wird weiterhin genau eine Stelle - das Feld in der Mitte. */ .as-fenster.as-mit-bildern{margin-left:calc(50vw - 32.5rem);margin-right:auto; overflow:visible} .as-bilder{position:absolute;top:0;bottom:0;left:calc(100% + 1rem);width:18rem; display:flex;flex-direction:column;overflow:hidden; background:var(--flaeche);color:var(--text); border:1px solid var(--rand-stark);border-radius:14px; box-shadow:0 18px 48px rgba(0,0,0,.28)} .as-bilder[hidden]{display:none} .as-bilder-kopf{display:flex;align-items:center;gap:.5rem;padding:.7rem .8rem; border-bottom:1px solid var(--rand);font-size:.9rem;flex:none} .as-bilder-kopf .marke-txt{flex:1 1 auto;font-size:.75rem} .as-bilder-liste{flex:1 1 auto;overflow-y:auto;padding:.7rem;display:grid; grid-template-columns:1fr 1fr;gap:.6rem;align-content:start} .as-bild{margin:0;display:flex;flex-direction:column;gap:.25rem} .as-bild a{display:block;border:1px solid var(--rand);border-radius:8px;overflow:hidden;background:#fff} .as-bild img{display:block;width:100%;aspect-ratio:1;object-fit:contain} .as-bild figcaption{font-size:.7rem;color:var(--leise);line-height:1.2} .as-bild-verwaist a{border-color:var(--schlecht)} .as-bild-verwaist figcaption{color:var(--schlecht)} /* Das erste Bild ueber die ganze Breite und in voller Aufloesung - quadratisch wie die uebrigen (23.09.2026), damit die Strecke ein ruhiges Raster bleibt. */ .as-bilder-liste .as-bild:first-child{grid-column:1 / -1} .as-kopf-bilder{position:relative} .as-bilder-zahl{position:absolute;top:-.25rem;right:-.25rem;min-width:1rem;height:1rem; padding:0 .2rem;border-radius:99px;background:var(--akzent);color:#fff; font-size:.62rem;font-weight:700;line-height:1rem;text-align:center} .as-fenster.as-mit-bildern .as-kopf-bilder{border-color:var(--akzent);color:var(--akzent)} /* Zu schmal fuer beides nebeneinander: die Strecke legt sich davor. */ @media (max-width:1100px){ .as-fenster.as-mit-bildern{margin-left:auto;overflow:hidden} .as-bilder{left:0;right:0;width:auto;border-radius:0;border:0; border-left:1px solid var(--rand);box-shadow:none} } @media (prefers-reduced-motion:reduce){.as-fenster{transition:none}} /* Das erste Bild ueber die ganze Breite, die uebrigen halb daneben (23.09.2026): das erste ist das Titelbild - danach sieht man den Artikel, die anderen sind Ergaenzung. */ /* Das erste Bild groesser und nicht auf Quadrat gezwungen. */ /* Die Farbe unter dem Bild (23.09.2026). */ .as-bild-farbe{color:var(--text);font-size:.75rem;font-weight:600} /* Mit ausgeklappter Strecke zeichnet das Fenster ueber seinen Rand hinaus (overflow:visible) - dann schneidet es seine Ecken nicht mehr ab, und Kopf und Fuss standen eckig im runden Rahmen (23.09.2026). Also rundet und schneidet in diesem Zustand die Saeule darin. */ .as-fenster.as-mit-bildern .as-inhalt{border-radius:13px;overflow:hidden} .as-fenster.as-mit-bildern .as-balken{border-radius:13px 13px 0 0} /* Beide Koepfe gleich hoch (23.09.2026): der Assistentenkopf misst .6rem Polster + 2.3rem Knopf + .6rem + 1px Linie. Die Bilderstrecke bekommt dieselben Masse und denselben Grund - zwei Fenster nebeneinander, eine Kopfhoehe. Auch ihr Schliessknopf ist derselbe: 2.3rem, 8px Radius, heller Grund. */ .as-bilder-kopf{padding:.6rem .8rem;background:var(--kopf);gap:.5rem;align-items:center} .as-bilder-kopf > *{align-self:center} .as-bilder-kopf .as-rund{width:2.3rem;height:2.3rem;border-radius:8px; background:var(--bg);box-sizing:border-box;line-height:1} .as-bilder-kopf b{font-size:.95rem} /* Derselbe Grund wie im Assistentenfenster (23.09.2026): der Rumpf beider Kaesten ist --flaeche, nur die Koepfe sind abgesetzt. Die Liste hatte den Grund der Seite geerbt und stand dadurch dunkler daneben. */ .as-bilder-liste{background:var(--flaeche)} /* Die Karte ohne
    (D255, 23.09.2026): den Kasten und die Kopfzeile trug frueher der Browser - jetzt das Blatt. summary war list-style:none und display:flex; beides steht ohnehin an .a-kopf. */ .a-karte > .a-inhalt[hidden]{display:none} .a-auf{font:inherit;cursor:pointer} /* --------------------------------------------------------------------- DER EXPORTKNOPF neben der Seitenauswahl (D260, 23.09.2026). Dieselbe Fassung wie die Blaetterpfeile daneben - gleicher Rand, gleiche Rundung, gleiche Hoehe, quadratisch. Er steht in derselben Reihe und tut dasselbe: etwas mit der LISTE, nicht mit einem Artikel. Die Tafel haengt an der Huelle (position:relative) und nicht am Fenster: sie gehoert zu diesem Knopf, sie ist kurz, und sie muss beim Rollen nicht nachgefuehrt werden - anders als die Punkte-Tafel auf der Karte, die in einem rollenden Feld sitzt. --------------------------------------------------------------------- */ .a-export{position:relative;display:flex;align-items:stretch;flex:none} .a-export-knopf{display:inline-flex;align-items:center;justify-content:center; width:1.9rem;padding:.3rem 0;color:var(--leise);background:var(--flaeche); border:1px solid var(--rand);border-radius:8px;cursor:pointer; text-decoration:none;transition:color .12s ease,background .12s ease} .a-export-knopf svg{width:1rem;height:1rem;fill:none;stroke:currentColor; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .a-export-knopf:hover{color:var(--akzent);background:var(--kopf)} .a-export-knopf:focus-visible{outline:2px solid var(--akzent); outline-offset:-2px} /* Offen bleibt der Knopf angefasst, damit man sieht, woher die Tafel kommt - sonst schwebt sie ohne Herkunft unter der Reihe. */ .a-export-knopf[aria-expanded=true]{color:var(--akzent);background:var(--kopf)} /* [hidden] MUSS HIER STEHEN. Die Tafel traegt display:flex, und das schlaegt die geteilte [hidden]-Regel: gleiche Spezifitaet, spaetere Zeile. Ohne diese Ausnahme stand die Auswahl dauerhaft offen (Wunsch vom 23.09.2026, direkt nach dem Einbau). Dieselbe Falle wie bei .as-bilder und .a-inhalt weiter oben. */ .a-export-tafel[hidden]{display:none} .a-export-tafel{position:absolute;top:calc(100% + 4px);right:0;z-index:40; min-width:13rem;display:flex;flex-direction:column; background:var(--flaeche);border:1px solid var(--rand);border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.14);overflow:hidden} /* Zwei Zeilen, jede mit Wort und Zahl: links, was sie tut, rechts, wie viel sie bringt. Die Zahl ist leise - sie erklaert, sie wirbt nicht. */ .a-export-tafel a{display:flex;align-items:baseline;justify-content:space-between; gap:1rem;padding:.5rem .7rem;color:var(--text);text-decoration:none; font-size:.82rem;white-space:nowrap} .a-export-tafel a + a{border-top:1px solid var(--rand)} .a-export-tafel a b{color:var(--leise);font-weight:600; font-variant-numeric:tabular-nums} .a-export-tafel a:hover{background:var(--kopf);color:var(--akzent)} .a-export-tafel a:hover b{color:var(--akzent)} .a-export-tafel a:focus-visible{outline:2px solid var(--akzent); outline-offset:-2px} /* DER KNOPF ARBEITET (Wunsch, 23.09.2026: "wenn der ladevorgang etwas braucht, soll der rotierende kreis kommen"). Ein Vollexport sind 21.185 Zeilen und rund 16 s - ohne Zeichen sieht es aus, als waere der Klick ins Leere gegangen. Derselbe Kreisel wie am Auffrischknopf und an den Knoepfen im Assistenten: Akzentring, oben voll, .7s. Das Pfeilzeichen tritt solange zurueck; die Flaeche bleibt gleich gross, damit die Reihe beim Umschalten nicht springt. */ .a-export-knopf.laeuft{color:var(--akzent);background:var(--kopf); cursor:progress} .a-export-knopf.laeuft svg{display:none} .a-export-knopf.laeuft::before{content:"";width:.85rem;height:.85rem; border-radius:50%;border:2px solid rgba(255,140,0,.3); border-top-color:var(--akzent);animation:zf-drehen .7s linear infinite} @media (prefers-reduced-motion:reduce){.a-export-knopf{transition:none} .a-export-knopf.laeuft::before{animation:none}} /* Vier Marktplatz-Karten der Startseite (D269, 24.09.2026): Symbol mit Ring wie in der Artikelleiste (Farbe ueber mp-gut/-warnung/-fehler an der Karte), darunter die grosse Zahl und je Missstand eine Zeile - mit Link, wo es eine Liste gibt. Eine Zeile ohne Befund steht leise da, damit man sieht, dass sie geprueft wurde. */ .mk-kopf{align-items:center} .mk-titel{display:flex;align-items:center;gap:.6rem} .mk-titel .mp-icon{width:2rem;height:2rem} .mp-leer .mp-ring{border-color:var(--rand)} .mk-gross{display:flex;align-items:baseline;gap:.6rem;margin:.8rem 0 .2rem} .mk-gross .marke-txt{font-size:.8rem;line-height:1.25} .mk-neben{font-size:.78rem;margin-bottom:.5rem} .mk-zeilen{display:flex;flex-direction:column;border-top:1px solid var(--rand);margin-top:.5rem} .mk-zeile{display:flex;justify-content:space-between;gap:.75rem;padding:.32rem .1rem; border-bottom:1px solid var(--rand);font-size:.84rem;color:var(--text);text-decoration:none} .mk-zeile b{font-variant-numeric:tabular-nums} a.mk-zeile:hover{background:var(--kopf)} .mk-gut{color:var(--leise)} .mk-gut b{color:var(--gut);font-weight:600} .mk-fehler b{color:var(--schlecht)} .mk-warnung b{color:var(--warn)} .mk-hinweis b{color:var(--akzent)} .mk-stand{font-size:.75rem;margin-top:.45rem} /* Marktplatzkarten neu geordnet (D307): zwei Leitzahlen nebeneinander, darunter nur offene Punkte mit farbigem Punkt statt farbiger Zahl; die Karte waechst nicht mit Nullzeilen. */ .mk-karte{display:flex;flex-direction:column} .mk-leit{display:grid;gap:.4rem;margin:.8rem 0 .5rem} /* D318: drei Leitkacheln (mit Bestand, Auftraege, Retoure). Nebeneinander passen sie erst auf sehr breiten Schirmen; sonst oben zwei, die Retoure darunter ueber die volle Breite (bei 1440 px ueberdeckten die Pillen sonst die Zahlen). */ /* ZWEI NEBEN ZWEI (D321, 25.09.2026): "wir koennten bei den 1.200 px auch 2 neben 2 Kacheln machen" (Betreiber). Die vier Marktplatzkarten stehen bis 1.800 px zu zweit nebeneinander (vorher alle vier ab ~1.250 px, je 296-376 px schmal), erst darueber alle vier in einer Reihe; ganz schmal untereinander. Ob die drei Leitkacheln nebeneinander passen, entscheidet jetzt die BREITE DER KARTE (Container-Abfrage), nicht die des Fensters: ab 380 px Innenbreite drei, sonst zwei oben und eine darunter (D319: bei 336 px wurde Text abgeschnitten). */ .mk-karten{grid-template-columns:repeat(2,minmax(0,1fr))} @media (min-width:1800px){.mk-karten{grid-template-columns:repeat(4,minmax(0,1fr))}} @media (max-width:760px){.mk-karten{grid-template-columns:1fr}} .mk-karte{container-type:inline-size} .mk-leit{grid-template-columns:repeat(2,minmax(0,1fr))} .mk-leit > .kz-zahl:nth-child(3){grid-column:1 / -1} @container (min-width:380px){.mk-leit{grid-template-columns:repeat(3,minmax(0,1fr))}.mk-leit > .kz-zahl:nth-child(3){grid-column:auto}} /* Der Pfeil erbte wie die Pillen die graue Schrift von ".kz-zahl span". */ .kz-zahl .mk-pfeil.p-gut-txt{color:var(--gut)} .kz-zahl .mk-pfeil.p-schlecht-txt{color:var(--schlecht)} /* D320: "die Icons sollten SVG-Icons sein und mittig positioniert" - Pfeil als Linie wie die uebrigen Symbole, senkrecht mittig neben der Zahl. */ .mk-leit .kz-zahl > b{display:inline-flex;align-items:center;gap:.3rem} .mk-pfeil{width:.8em;height:.8em;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .mk-leit > .kz-zahl{padding:.5rem .55rem} /* D374: Kosten und Gewinn als eigene Reihe zu zweit unter den drei Leitzahlen - im Raster der drei stuende sonst eine Luecke neben der fuenften. */ .mk-leit.mk-geld{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0} @container (min-width:380px){.mk-leit.mk-geld{grid-template-columns:repeat(2,minmax(0,1fr))}} /* D309 grauer Kasten; D315: "der graue Balken je Marktplatz kann in zwei Kacheln gepackt werden, innerhalb des Marktplatzes" - jede Leitzahl (mit Bestand, Retoure) ihr eigener grauer Kasten (--kopf, 6 px). */ .mk-leit > .kz-zahl{background:var(--kopf);border-radius:6px;padding:.55rem .7rem; display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:.4rem} /* Pille rechts neben der Zahl (D317), wie in den Kacheln der Startseite. */ .mk-leit > .kz-zahl > *{grid-column:1 / -1} .mk-leit > .kz-zahl > b{grid-column:1;grid-row:1;white-space:nowrap} .mk-leit > .kz-zahl > .kachel-pille{grid-column:2;grid-row:1;align-self:start;margin-top:.3rem;font-size:.72rem;white-space:nowrap} .mk-leit .kz-zahl b{font-size:1.3rem} /* D308: feste Hoehen, damit die Listen aller Karten auf einer Linie beginnen - Unterschrift zwei Zeilen, Nebenzeile eine (auch leer). */ /* D316: je Kachel Zahl, Name, unten der Vergleichswert (von N / Vorjahr) - wie die Kacheln der Startseite; jede Zeile einzeilig, damit alle Karten gleich hoch bleiben. */ .mk-leit .kz-zahl .mk-l,.mk-leit .kz-zahl .mk-u{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3} .mk-leit .kz-zahl .mk-l{font-weight:600;color:var(--text);font-size:.8rem} .mk-leit .kz-zahl .mk-u{margin-top:.35rem} .mk-neben{height:1.3em;line-height:1.3em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.4rem} .mk-name{color:inherit;text-decoration:none}.mk-name:hover{color:var(--akzent)} .mk-punkt{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;margin-right:.5rem;background:var(--rand);vertical-align:.05em} .mk-fehler .mk-punkt{background:var(--schlecht)}.mk-warnung .mk-punkt{background:var(--warn)}.mk-hinweis .mk-punkt{background:var(--akzent)} .mk-zeilen .mk-zeile b{color:inherit !important} .mk-ruhig{color:var(--gut)} .mk-mehr{color:var(--leise);font-size:.82rem} .mk-karte .mk-stand{margin-top:auto;padding-top:.45rem} /* Rentabilitaet des Artikels (D277): dritte Kachel neben Marktplatzleiste und Preiskachel, gleicher Aufbau wie die Preiskachel. Der linke Rand und der Ampelpunkt tragen das Urteil, je Faktor ein kleiner Punkt den Grund. */ .rent-kachel{flex:0 0 16.5rem;background:var(--flaeche);border:1px solid var(--rand);border-left:4px solid var(--rand); border-radius:0 10px 10px 0;padding:.8rem .95rem;display:flex;flex-direction:column;gap:.5rem;min-width:0} .rent-gruen{border-left-color:var(--gut)} .rent-gelb{border-left-color:var(--warn)} .rent-rot{border-left-color:var(--schlecht)} .rent-kopf{display:flex;align-items:center;gap:.65rem} .rent-ampel{width:1.55rem;height:1.55rem;border-radius:50%;background:var(--rand);flex:none} .rent-gruen .rent-ampel{background:var(--gut)} .rent-gelb .rent-ampel{background:var(--warn)} .rent-rot .rent-ampel{background:var(--schlecht)} .rent-titel{font-weight:700;line-height:1.2} .rent-grund{font-size:.78rem;color:var(--leise);line-height:1.3} .rent-ergebnis{font-size:1.3rem;font-weight:800;font-variant-numeric:tabular-nums} .rent-klein{font-size:.75rem;font-weight:600;color:var(--leise)} .rent-punkt{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:var(--rand);margin-right:.35rem;vertical-align:.05em} .rent-f-gruen{background:var(--gut)} .rent-f-gelb{background:var(--warn)} .rent-f-rot{background:var(--schlecht)} @media (max-width:900px){.rent-kachel{flex-basis:auto}} /* Reduzierungsempfehlung (D285): Kacheln der Seite /empfehlungen/ und die Kachel am Artikel (gleicher Bau wie die Rentabilitaet, Rand in Akzent). */ .reduz-karten{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))} a.reduz-karte{color:inherit;text-decoration:none} a.reduz-karte[href]:hover,.reduz-an{border-color:var(--akzent)} .reduz-leise{opacity:.75} .reduz-wert{font-size:1.35rem;font-weight:800;font-variant-numeric:tabular-nums;margin:.2rem 0} /* Tabellenzahlen: zahl-z (rechtsbuendig), NICHT .zahl - das ist die grosse Kennzahl (1,9 rem); bis D298 standen die Tabellen der Empfehlungs- und Bestellseite damit riesig da. */ .reduz-tabelle td.zahl-z,.reduz-tabelle th.zahl-z{white-space:nowrap} .reduz-anlegen{margin-top:1rem} /* Kosten je Marktplatz (D301): "gilt fuer" als aufklappbare Hakenliste in der Zeile. */ .kosten-maerkte summary{cursor:pointer;white-space:nowrap;max-width:14rem;overflow:hidden;text-overflow:ellipsis;font-size:.85rem} .kosten-maerkte[open] .kosten-maerkte-liste{display:flex;flex-direction:column;gap:.2rem;padding:.4rem 0;font-size:.85rem} .kosten-maerkte-liste label{white-space:nowrap} .kosten-preisfeld{display:flex;gap:.4rem;align-items:center} .kosten-preisfeld select{max-width:16rem} /* Bestellempfehlung (D297): je Hersteller eine aufklappbare Karte. */ .bestell-gruppe{margin:0 0 .75rem;padding:.6rem .9rem} .bestell-kopf{cursor:pointer;display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap} .bestell-gruppe table{margin-top:.6rem} .reduz-kachel{border-left-color:var(--akzent)} /* Besucher aus Matomo (D289): am Artikel je Shop eine Spalte, auf der Startseite zwei Listen nebeneinander. */ /* Die Kennzahl-Reihe am Artikel (D290): Reduzierung, Storno/Versand, Besucher in eigener Reihe unter Marktplaetzen/Preis/Rentabilitaet - gleich breit, gleich gebaut (Kopf, Leitzahlen, Zeilen, Fuss), Werte brechen nicht um. Ersetzt die Umbruchregel der mp-zeile aus D288. */ .kz-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:1rem;margin:0 0 1.25rem} .kz-reihe:empty{display:none} .kz-kachel{background:var(--flaeche);border:1px solid var(--rand);border-radius:10px;padding:.85rem 1rem; display:flex;flex-direction:column;gap:.65rem;min-width:0} .kz-akzent{box-shadow:inset 0 3px 0 var(--akzent)} .kz-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem} .kz-titel{font-weight:700;white-space:nowrap} .kz-marke{font-size:.75rem;color:var(--leise);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .kz-leit{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem} .kz-zahl{display:flex;flex-direction:column;min-width:0} .kz-zahl b{font-size:1.4rem;font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap} .kz-zahl span{font-size:.75rem;color:var(--leise)} .kz-zeilen{display:flex;flex-direction:column;gap:.3rem;border-top:1px dashed var(--rand);padding-top:.6rem} .kz-zeile{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;font-size:.82rem} .kz-zeile>span:first-child{color:var(--leise);min-width:0} .kz-zeile>span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right} .kz-fuss{font-size:.78rem;margin-top:auto} /* UEBERBLICK - ENTWURF (D292): Urteil oben, grosse Kacheln fuer Geld, kleine fuer den Zustand, Details im Fenster. Farbe nur bei Abweichung. IM SYSTEM (D293, "mit dem radius und dem border top und farbe weicht von unserem system ab"): Kachel wie .kachel der Startseite (10 px, feiner Rand, Akzent beim Ueberfahren); ein Zustand ist der 3-px-Streifen LINKS, links eckig, rechts gerundet - wie Pruefstand und Preiskachel ("eine gerundete Ecke an einem 3-px-Streifen sah aus wie ein Knick"); die Zahl traegt dann die Zustandsfarbe wie .p-warn-txt. */ .ue-schalter{text-align:right;font-size:.8rem;margin:-.4rem 0 .5rem} .ue{display:flex;flex-direction:column;gap:1rem;margin:0 0 1.5rem} .ue-urteil{display:flex;align-items:center;gap:1rem;background:var(--flaeche);border:1px solid var(--rand); border-left:3px solid var(--rand);border-radius:0 10px 10px 0;padding:.9rem 1.1rem} .ue-urteil.ue-gruen{border-left-color:var(--gut)} .ue-urteil.ue-gelb{border-left-color:var(--warn)} .ue-urteil.ue-rot{border-left-color:var(--schlecht)} .ue-punkt{width:1.3rem;height:1.3rem;border-radius:50%;flex:none;background:var(--rand)} .ue-gruen .ue-punkt{background:var(--gut)}.ue-gelb .ue-punkt{background:var(--warn)}.ue-rot .ue-punkt{background:var(--schlecht)} .ue-urteil-text{flex:1;min-width:0} .ue-urteil-titel{font-size:1.2rem;font-weight:700;line-height:1.25} .ue-urteil-satz{color:var(--leise);font-size:.88rem;margin-top:.15rem} .ue-weiter{font-size:.82rem;margin-top:.45rem} .ue-weiter span{color:var(--leise)} .ue-punkt-klein{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;margin-right:.45rem;background:var(--rand)} .ue-weiter.ue-gelb .ue-punkt-klein{background:var(--warn)}.ue-weiter.ue-rot .ue-punkt-klein{background:var(--schlecht)} .ue-knopf{flex:none;white-space:nowrap} .ue-knopf-form{flex:none;margin:0} .ue-kachel{font:inherit;color:inherit;text-align:left;cursor:pointer;background:var(--flaeche);border:1px solid var(--rand); border-radius:10px;display:flex;flex-direction:column;gap:.15rem;min-width:0;transition:border-color .12s ease} .ue-kachel:hover,.ue-kachel:focus-visible{border-color:var(--akzent)} .ue-kachel.ue-f-gelb,.ue-kachel.ue-f-rot,.ue-kachel.ue-f-gruen{border-left-width:3px;border-radius:0 10px 10px 0} .ue-kachel.ue-f-gruen{border-left-color:var(--gut)} .ue-kachel.ue-f-gelb{border-left-color:var(--warn)} .ue-kachel.ue-f-rot{border-left-color:var(--schlecht)} .ue-gross{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1rem} .ue-gross-kachel{padding:.9rem 1.1rem} .ue-titel{font-size:.9rem;font-weight:600} .ue-zahl-gross{font-size:2.2rem;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums;display:flex; align-items:center;gap:.8rem;flex-wrap:wrap} .ue-plakette{font-size:1rem;font-weight:700;color:var(--akzent);border:2px solid var(--akzent);border-radius:8px;padding:.05rem .45rem} .ue-satz{font-size:.85rem;color:var(--leise)} .ue-klein{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.75rem} .ue-klein-kachel{padding:.8rem 1rem} .ue-zahl{font-size:1.6rem;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap} .ue-wort{font-size:.9rem;font-weight:600} .ue-vergleich{font-size:.8rem;color:var(--leise)} .ue-f-gelb .ue-zahl{color:var(--warn)}.ue-f-rot .ue-zahl{color:var(--schlecht)} /* Je Marktplatz (D299): Abschnittstitel wie die Titel der grossen Kacheln; Kacheln als Verweis. */ .ue-abschnitt{font-size:.9rem;font-weight:600;margin:.4rem 0 -.4rem} a.ue-kachel{text-decoration:none} /* Seit D296 steht die Zeile oben auf der Artikelseite, ueber der Gruppenfunktion. */ .a-maerkte{margin:0 0 1rem} .ue-maerkte .mp-leiste{margin:0;padding:.35rem .6rem;gap:0 .3rem;justify-content:flex-start;min-height:0} .ue-maerkte .mp-knopf{gap:.15rem;min-width:4.8rem;padding:.4rem .4rem .45rem} .ue-maerkte .mp-ring{border-width:2px;padding:2px} .ue-maerkte .mp-icon{width:1.6rem;height:1.6rem;font-size:.7em} .ue-maerkte .mp-icon svg{width:1rem;height:1rem} .ue-maerkte .mp-wort{font-size:.46rem} .ue-maerkte .mp-name{font-size:.7rem} .ue-maerkte .mp-zahlen{font-size:.7rem} /* Das Detailfenster (D293, "das aufklappen sollte vielleicht ein popup sein"): das Rueckfragefenster des Systems (.nachfrage), breiter, mit Kopf und Schliessen. Die Kacheln darin verlieren ihren eigenen Rahmen - Kasten im Kasten; der Zustandsstreifen links bleibt. */ .ue-fenster{max-width:34rem} .ue-fenster-kopf{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 1.25rem .2rem} .ue-fenster-kopf .nachfrage-titel{margin:0} .ue-fenster-zu{font:inherit;font-size:1.4rem;line-height:1;background:none;border:0;color:var(--leise);cursor:pointer;padding:.1rem .3rem} .ue-fenster-zu:hover{color:var(--text)} .ue-fenster .nachfrage-rumpf{padding-top:.6rem} .ue-fenster .preis-kachel,.ue-fenster .rent-kachel,.ue-fenster .kz-kachel{border-top:0;border-right:0;border-bottom:0; border-radius:0;background:none;box-shadow:none;max-width:none} .ue-fenster .kz-kachel:not(.kz-akzent){border-left:0;padding-left:0} .ue-fenster .kz-kopf{display:none} /* Lager je Variante im Fenster (D294): knapp und liegt farbig, der Rest ruhig. */ .ue-lager{width:100%;border-collapse:collapse;font-size:.85rem;font-variant-numeric:tabular-nums;margin:0 0 .6rem} .ue-lager th{font-weight:600;color:var(--leise);text-align:right;padding:0 0 .3rem .6rem;font-size:.78rem} .ue-lager td{text-align:right;padding:.2rem 0 .2rem .6rem;border-top:1px solid var(--rand)} .ue-lager th:first-child,.ue-lager td:first-child{text-align:left;padding-left:0} .ue-lager tr.ue-z-knapp td:last-child,.ue-lager-legende .ue-z-knapp{color:var(--schlecht);font-weight:600} .ue-lager tr.ue-z-liegt td:last-child,.ue-lager-legende .ue-z-liegt{color:var(--warn);font-weight:600} .ue-lager-legende{font-size:.78rem;margin:0 0 1rem} @media (max-width:640px){.ue-urteil{flex-wrap:wrap;align-items:flex-start}.ue-urteil-text{flex:1 1 calc(100% - 2.6rem)} .ue-knopf,.ue-knopf-form{flex:1 1 100%;text-align:center}.ue-knopf-form .ue-knopf{width:100%}.ue-zahl-gross{font-size:1.8rem}.ue-urteil-titel{font-size:1.1rem}} /* In der Rentabilitaet (Reihe darueber) brach der Zusatz in Klammern mitten im Ausdruck um - "(40 Stueck, / 320 EUR)". Breit steht er jetzt als eigene Zeile unter dem Wert; schmal ist Platz genug fuer eine Zeile (D290). */ @media (min-width:901px){.rent-kachel .preis-klein-zeile .preis-db-prozent{display:block;font-weight:500}} .besucher-tafel{width:100%;border-collapse:collapse;font-size:.82rem;font-variant-numeric:tabular-nums} .besucher-tafel th{font-weight:600;color:var(--leise);text-align:right;padding:0 0 .2rem .4rem} .besucher-tafel th:first-child,.besucher-tafel td:first-child{text-align:left;padding-left:0;color:var(--leise)} .besucher-tafel td{text-align:right;padding:.12rem 0 .12rem .4rem} .besucher-schwach{color:var(--schlecht);font-weight:700} /* min(100%,24rem) (D328): 24rem = 384 px war am Handy breiter als die Seite (408 statt 390 px). */ .besucher-karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));gap:1rem} .besucher-hilfe{font-size:.78rem;margin:-.2rem 0 .5rem} .reduz-kachel.reduz-ruhig{border-left-color:var(--rand)} /* Reiter Verkaeufe (D278): ein schmaler Balken vor dem Anteil je Preisstufe - man sieht auf einen Blick, bei welcher Reduzierung der Artikel am meisten geht. */ .rq-balken{display:inline-block;width:3.5rem;height:.45rem;border-radius:3px;margin-right:.45rem;vertical-align:.1em; background:linear-gradient(90deg,var(--akzent) var(--anteil),var(--rand) var(--anteil))} /* Verkaeufe nach Marktplatz: Unterzeilen je Herkunft eingerueckt und leiser. */ .vk-detail td{color:var(--leise);font-size:.84rem} .vk-detail td:first-child{padding-left:1.4rem} /* Retourenquote je Marktplatz in den Karten (D282): eine Zeile zwischen der grossen Zahl und den Missstaenden. */ .mk-rq{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .6rem;font-size:.84rem; margin:.15rem 0 .35rem;padding:.35rem .5rem;background:var(--kopf);border-radius:6px} .mk-rq b{font-size:1rem;font-variant-numeric:tabular-nums} .mk-rq-titel{color:var(--leise);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em} /* Gegenstueck bei der Schwesterfirma (D284): eine leise Zeile unter den Faktoren - wie laeuft derselbe Artikel im anderen Shop. */ .rent-gegen{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .55rem;font-size:.8rem; padding:.35rem .5rem;background:var(--kopf);border-radius:6px} .rent-gegen-titel{color:var(--leise);font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em} /* Kaufland: Knopf "Menge auf plentyONE" (D303) */ .kaufland-menge{margin:0 0 1rem;padding:.8rem 1rem;border-left:3px solid var(--schlecht);border-radius:0 10px 10px 0} .kaufland-menge p{margin:0 0 .6rem} /* Startseite: Kennzahlen nach Zeitraum in zwei Reihen (D311) - kleine Reihentitel. */ .kz-reihentitel{font-size:.9rem;font-weight:600;margin:1.1rem 0 .5rem} .kz-reihentitel:first-of-type{margin-top:.2rem} .kz-reihentitel span{font-weight:400;color:var(--leise)} /* Die Tagesreihe hat sieben Kacheln - schmaler zulassen, damit sie bei ueblicher Breite in EINE Zeile passen (D311). */ .kacheln-reihe{grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr))} .kacheln-reihe .kachel-text{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word} /* Veraenderung als Pille oben rechts (D311): gegen gestern bzw. Vorjahr; gruen besser, rot schlechter, grau neutral oder ohne Richtung. */ /* Zahl und Pille teilen sich die erste Zeile (Zahl links, Pille rechts) - absolut gesetzt ueberdeckte die Pille bei schmalen Kacheln die Zahl. */ .kacheln-reihe .kachel{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr;column-gap:.4rem} /* D312: "die Werte von gestern oder Vorjahr sollten unten positioniert werden" - der Vergleichswert sitzt am Fuss der Kachel, in allen Kacheln einer Reihe auf einer Linie. */ .kacheln-reihe .kachel > .kachel-delta{grid-row:3;align-self:end;margin-top:.5rem} .kacheln-reihe .kachel > *{grid-column:1 / -1} .kacheln-reihe .kachel > .kachel-zahl{grid-column:1;grid-row:1} .kacheln-reihe .kachel > .kachel-pille{grid-column:2;grid-row:1;align-self:start;margin-top:.3rem;font-size:.72rem;white-space:nowrap} .kacheln-reihe .kachel > .kachel-zahl{white-space:nowrap;font-size:1.75rem;min-width:0} .mk-leit > .kz-zahl > .kachel-pille{font-size:.66rem;padding:.05rem .4rem;margin-top:.25rem} /* Die Pille erbte in den Leitkacheln die graue Schrift von ".kz-zahl span" - Schriftfarbe wie oben auf der Startseite (D318). */ .kz-zahl .pille.p-gut{color:var(--gut)} .kz-zahl .pille.p-schlecht{color:var(--schlecht)} .kz-zahl .pille.p-warn{color:var(--warn)} .kz-zahl .pille{font-weight:600} /* D324 (25.09.2026) · Lieferanten. Kopf mit Auswahlbox rechts neben dem Namen, Hinweise als Liste mit dem Zustandsstreifen links (wie Karten), Listen im Reiter Artikel zwei nebeneinander. */ .lf-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem} .lf-kopf h1{margin-bottom:.3rem} .lf-wahl select{min-width:16rem;max-width:100%;padding:.45rem .6rem;border:1px solid var(--rand); border-radius:8px;background:var(--flaeche);color:var(--text);font:inherit;font-size:.9rem} .lf-unter{margin:0 0 .6rem;font-size:.86rem;color:var(--leise);line-height:1.6} .lf-unter b{color:var(--text);font-weight:600} .lf-hinweise{list-style:none;margin:.8rem 0 1rem;padding:0;display:grid;gap:.35rem} .lf-hinweise li{background:var(--flaeche);border:1px solid var(--rand);border-left:3px solid var(--rand); border-radius:0 10px 10px 0;padding:.45rem .8rem;font-size:.88rem} .lf-hinweise a{color:inherit} .lf-hinweise .lf-h-schlecht{border-left-color:var(--schlecht)} .lf-hinweise .lf-h-warn{border-left-color:var(--warn)} .lf-hinweise .lf-h-gut{border-left-color:var(--gut)} .lf-hinweise .lf-h-leise{color:var(--leise)} .lf-titel{margin:1.6rem 0 .4rem;font-size:1.05rem} .lf-diagramm{background:var(--flaeche);border:1px solid var(--rand);border-radius:10px;padding:.8rem 1rem} /* Die Zeile fest auf die Hoehe des Rasters: sonst richtet sie sich nach dem Seitenverhaeltnis des SVG (600:100) und wird bei voller Breite 219 statt 176 px hoch - das Diagramm ragte in die Tabelle darunter (gemessen 25.09.2026, 1.440 px). */ .lf-diagramm .diagramm{height:11rem;grid-template-rows:100%} .lf-punkt{display:inline-block;width:.65rem;height:.65rem;border-radius:2px;vertical-align:baseline;margin:0 .15rem} .lf-listen{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr));margin-top:1rem} .lf-zeile{text-decoration:none;color:inherit;border-radius:4px} .lf-zeile > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lf-zeile > span:last-child{flex:none;white-space:nowrap} .lf-zeile:hover > span:first-child{color:var(--akzent)} .lf-alle td:first-child a{font-weight:600;text-decoration:none} /* Die Koepfe duerfen umbrechen (Retouren-/quote): ungebrochen war die Tabelle 1.448 px breit und rollte bei 1.440 px seitlich. */ .lf-alle th{white-space:normal;vertical-align:bottom} /* D329: mit der Spalte Lieferzeit 1.297 px bei 1.280 - engere Zellen. */ .lf-alle th,.lf-alle td{padding-left:.45rem;padding-right:.45rem} /* D325 (25.09.2026) · Versandeinnahmen. Die Kachel ist ein Knopf, der das Kennzahl-Fenster je Lieferland oeffnet - also Hand und Akzent-Rand wie ein Verweis (D322: Hover nur, wo man klicken kann). Der Knopf bringt eigene Schrift, Ausrichtung und Breite mit; die werden hier auf die der Kachel zurueckgesetzt. */ button.kachel{font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer} button.kachel:hover,button.kachel:focus-visible{border-color:var(--akzent)} /* 44rem schnitt die Spalte Vorjahr ab (gemessen 1.440 px). */ .vk-fenster{max-width:min(54rem,calc(100vw - 2rem));width:auto} .vk-fenster .vk-summe td{font-weight:600;border-top:2px solid var(--rand)} /* D328 (25.09.2026) · Heute zu tun nach Euro. Eine Zeile je Artikel: links was und warum, in der Mitte die Handlung, rechts der Betrag. Der Zustandsstreifen links wie bei Karten und Meldungen (3 px): rot dringlich, sonst nach Art. Summen je Art als Filterknoepfe darueber. */ .htz{margin:.4rem 0 1.4rem} .htz-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:1rem} .htz-kopf .start-h2{margin-bottom:.4rem} .htz-stoerung{display:block;margin:.2rem 0 .6rem;padding:.45rem .8rem;border:1px solid var(--rand); border-left:3px solid var(--schlecht);border-radius:0 10px 10px 0;background:var(--flaeche);color:inherit;font-size:.88rem} .htz-arten{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 .7rem} .htz-art{display:inline-flex;align-items:baseline;gap:.35rem;padding:.35rem .7rem;border:1px solid var(--rand); border-radius:999px;background:var(--flaeche);color:inherit;text-decoration:none;font-size:.84rem} .htz-art b{font-variant-numeric:tabular-nums} .htz-art span{color:var(--leise);font-size:.78rem} .htz-art:hover,.htz-art.an{border-color:var(--akzent)} .htz-liste{list-style:none;margin:0;padding:0;display:grid;gap:.35rem} .htz-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto 8.5rem;gap:.4rem 1rem;align-items:center; background:var(--flaeche);border:1px solid var(--rand);border-left:3px solid var(--rand); border-radius:0 10px 10px 0;padding:.55rem .9rem} .htz-ausverkauft,.htz-nachbestellen{border-left-color:var(--warn)} .htz-verlust{border-left-color:var(--schlecht)} .htz-dringlich{border-left-color:var(--schlecht)} .htz-was{min-width:0;display:grid;gap:.1rem} .htz-titel{font-size:.74rem;color:var(--leise);text-transform:uppercase;letter-spacing:.03em} .htz-titel .pille{text-transform:none;letter-spacing:0} .htz-name{font-weight:600;color:inherit;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .htz-name:hover{color:var(--akzent)} .htz-text{font-size:.82rem;color:var(--leise)} .htz-aktion{font-size:.84rem;white-space:nowrap;max-width:22rem;overflow:hidden;text-overflow:ellipsis} .htz-euro{text-align:right;font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums} .htz-euro span{display:block;font-weight:400;font-size:.7rem;color:var(--leise)} .htz-wie{margin:0 0 .9rem;font-size:.86rem;color:var(--leise)} .htz-wie summary{cursor:pointer} @media (max-width:760px){ /* Handy (gemessen 390 px): Namen duerfen umbrechen, die Euro-Spalte ist schmal und ihre Erklaerung bricht um - vorher war die Seite 18 px zu breit und die Namen nach zwoelf Zeichen abgeschnitten. */ .htz-kopf{flex-wrap:wrap;gap:0 1rem} .htz-zeile{grid-template-columns:minmax(0,1fr) 5.5rem;padding:.55rem .7rem} .htz-name{white-space:normal} .htz-aktion{grid-column:1;grid-row:2;white-space:normal;max-width:none} .htz-euro{grid-column:2;grid-row:1 / span 2;font-size:1rem} .htz-euro span{white-space:normal;line-height:1.25} } /* D331 (26.09.2026) · Versand: zwei Karten nebeneinander, am Handy untereinander. */ /* 40rem (D341): bei 1.280 px untereinander - nebeneinander rollte die Staffel 47 px. */ .vs-raster{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,40rem),1fr));margin-top:1.2rem} .vs-raster .karte p{margin:.5rem 0 0} /* D333 (26.09.2026) · Gutscheine: Zustandsstreifen links an der Zeile wie bei den Karten. */ .gs-tabelle tr.gs-rot td:first-child{box-shadow:inset 3px 0 0 var(--schlecht)} .gs-tabelle tr.gs-gelb td:first-child{box-shadow:inset 3px 0 0 var(--warn)} .gs-tabelle th,.gs-tabelle td{padding-left:.5rem;padding-right:.5rem} .gs-tabelle th{white-space:normal;vertical-align:bottom} /* D337 (26.09.2026) · Retourengründe: Größen einer Zeile nebeneinander, brechen um. */ .rg-groessen{white-space:normal;font-size:.82rem;color:var(--leise)} .rg-groessen span{display:inline-block;margin:0 .7rem .1rem 0;white-space:nowrap} .rg-groessen b{color:var(--text);font-weight:600} /* D341 (26.09.2026) · Kaufquote: Namen und Warengruppen brechen um, sonst schoben sie Preis und Betrag aus dem Bild (Tabelle rollte bei 1.440 px). */ .kq-tabelle td:nth-child(1),.kq-tabelle td:nth-child(2){white-space:normal;min-width:10rem} .kq-tabelle td:nth-child(1){min-width:16rem} .kq-tabelle th{white-space:normal;vertical-align:bottom} /* D341 · Nachtrag: auf Versand, Gutscheine und Retourengruende rollten die Tabellen bei 1.280/1.440 px seitlich (bis 383 px) - Koepfe und erste Spalte duerfen umbrechen. Die fruehere Pruefung "abgeschnitten" sah rollende Tabellen nicht; gemessen wird jetzt scrollWidth je .scroll. */ .vs-raster table th,.gs-tabelle th,.rg-tabelle th{white-space:normal;vertical-align:bottom} .vs-raster table td:first-child,.gs-tabelle td:first-child,.rg-tabelle td:first-child{white-space:normal} .gs-tabelle td:first-child{min-width:13rem} .gs-tabelle td:nth-child(2){white-space:normal;min-width:6.5rem} .rg-tabelle td:first-child{min-width:15rem} .vs-raster table th,.vs-raster table td{padding-left:.4rem;padding-right:.4rem} /* D343 (26.09.2026) · Heute zu tun: erledigt / ignorieren unter dem Betrag, klein und leise - die Zeile bleibt die Hauptsache. (Keine eigene Spaltenregel fuer .htz-zeile hier - sie ueberschrieb die Handy-Regel weiter oben, erste Fassung.) */ .htz-mark{grid-column:1 / -1;display:flex;gap:.35rem;justify-content:flex-end;margin-top:-.15rem} .htz-mark .knopf-leise{padding:.12rem .55rem;font-size:.74rem} /* D344 (26.09.2026) · Saisonvorlauf: je Lieferant aufklappbar, CSV rechts. */ .sz-lieferant{margin:.8rem 0;border:1px solid var(--rand);border-radius:10px;background:var(--flaeche);padding:.2rem .9rem .6rem} .sz-lieferant summary{cursor:pointer;padding:.55rem 0;display:flex;flex-wrap:wrap;gap:.2rem .7rem;align-items:baseline} .sz-lieferant .sz-csv{margin-left:auto} .sz-lieferant .gs-tabelle td:first-child{min-width:18rem} /* D346 (26.09.2026) · Zeitraum im Kopf und nachgeladene Seiten. */ .nav-zeitraum-jetzt{position:relative;cursor:pointer;list-style:none} .nav-zeitraum-jetzt::-webkit-details-marker{display:none} .nav-kalender{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round} /* Punkt am Icon: ein anderer Zeitraum als die Voreinstellung ist gewaehlt. */ .nav-zeitraum-jetzt.zr-anders::after{content:"";position:absolute;top:.1rem;right:.1rem;width:.5rem;height:.5rem; border-radius:50%;background:var(--akzent);border:2px solid var(--kopf)} .zr-tafel{min-width:19rem;max-width:calc(100vw - 1.5rem)} .zr-form{display:grid;gap:.45rem} .zr-knoepfe{display:flex;flex-wrap:wrap;gap:.3rem} .zr-knoepfe button,.zr-frei button{font:inherit;font-size:.82rem;padding:.3rem .6rem;border:1px solid var(--rand);border-radius:999px; background:var(--flaeche);color:inherit;cursor:pointer} .zr-knoepfe button:hover,.zr-frei button:hover,.zr-knoepfe button.an,.zr-frei button.an{border-color:var(--akzent);color:var(--akzent)} .zr-frei{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;font-size:.82rem} .zr-frei input{font:inherit;font-size:.82rem;padding:.25rem .4rem;border:1px solid var(--rand);border-radius:8px;background:var(--flaeche);color:inherit} .zr-hinweis{margin:.2rem 0 0;font-size:.75rem;color:var(--leise)} /* Handy: das Fenster haengt rechtsbuendig am Icon, das Icon sitzt aber nicht am rechten Rand - es ragte links aus dem Bild (gemessen 390 px). Dort ueber die ganze Breite, unter der Kopfleiste. */ @media (max-width:720px){ .nav-zeitraum .zr-tafel{position:fixed;left:.6rem;right:.6rem;top:3.4rem;min-width:0;max-width:none; max-height:calc(100vh - 4rem);overflow:auto} } /* Skelett (D346): graue Flaechen in Form der Seite mit sanftem Schimmer, bis der Inhalt da ist. Der Text darunter ist nur fuer Vorleseprogramme (und wird zur Fehlermeldung, wenn das Laden scheitert). */ .skelett{display:grid;gap:1rem;margin-top:.4rem} .sk-zeile{height:.8rem;border-radius:6px;background:linear-gradient(90deg,var(--rand) 0%,var(--kopf) 40%,var(--rand) 80%); background-size:300% 100%;animation:sk-schimmer 1.4s ease-in-out infinite} .sk-titel{width:14rem;height:1rem} .sk-kacheln{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr))} .sk-kachel{background:var(--flaeche);border:1px solid var(--rand);border-radius:10px;padding:.9rem 1rem;display:grid;gap:.55rem;min-height:6.5rem} .sk-zahl{width:55%;height:1.5rem} .sk-text{width:80%} .sk-klein{width:45%;height:.6rem;margin-top:auto} .sk-tabelle{background:var(--flaeche);border:1px solid var(--rand);border-radius:10px;padding:.4rem 1rem} .sk-reihe{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,1fr));gap:1.2rem;padding:.75rem 0;border-bottom:1px solid var(--rand)} .sk-reihe:last-child{border-bottom:0} .sk-lang{width:70%} .sk-kurz{width:60%;justify-self:end} @keyframes sk-schimmer{0%{background-position:100% 0}100%{background-position:-100% 0}} @media (prefers-reduced-motion:reduce){.sk-zeile{animation:none}} .nachladen-hinweis{padding:1rem 0;color:var(--leise)} .sr-hinweis{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .nachladen.fehler .skelett{display:none} /* D477 Abdruck: die letzte Form der Seite, jeder Text als schimmernder Balken seiner Laenge, Grafiken als Flaeche; nichts darin ist bedienbar. */ .abdruck{pointer-events:none;user-select:none} .abdruck .ab-t{color:transparent;border-radius:4px; background:linear-gradient(90deg,var(--rand) 0%,var(--kopf) 40%,var(--rand) 80%); background-size:300% 100%;animation:sk-schimmer 1.4s ease-in-out infinite; -webkit-box-decoration-break:clone;box-decoration-break:clone} .abdruck .ab-flaeche{max-width:100%;border-radius:8px; background:linear-gradient(90deg,var(--rand) 0%,var(--kopf) 40%,var(--rand) 80%); background-size:300% 100%;animation:sk-schimmer 1.4s ease-in-out infinite} @media (prefers-reduced-motion:reduce){.abdruck .ab-t,.abdruck .ab-flaeche{animation:none}} .nachladen.fehler .abdruck{display:none} .nachladen.fehler .sr-hinweis{position:static;width:auto;height:auto;clip:auto} /* D347 Groessenkurve (/groessen/, Lieferantenseite Reiter Einkauf): je Groesse zwei Saeulen - Verkauf (Akzent) neben Einkauf (grau) - und die Groesse im Kopf eingefaerbt: leer rot, mehr kaufen gruen, weniger kaufen gelb. */ .gk-filter{margin-left:auto} .gk-artikel summary .gk-befund{display:flex;flex-wrap:wrap;gap:.3rem;margin-left:auto} .gk-tabelle th.gk-fehlt{color:var(--schlecht)} .gk-tabelle th.gk-mehr{color:var(--gut)} .gk-tabelle th.gk-weniger{color:var(--warn)} .gk-tabelle td:first-child{min-width:7rem;white-space:nowrap} .gk-tabelle tr.gk-balken td{height:3.2rem;vertical-align:bottom;text-align:center;white-space:nowrap;border-bottom:1px solid var(--rand)} .gk-b{display:inline-block;width:.55rem;min-height:1px;border-radius:2px 2px 0 0;margin:0 1px;vertical-align:bottom} .gk-b-v{background:var(--akzent)} .gk-b-e{background:var(--rand-stark)} .gk-punkt{display:inline-block;width:.6rem;height:.6rem;border-radius:2px;margin-right:.35rem;vertical-align:baseline} .gk-tabelle tr.gk-empf td{border-top:1px solid var(--rand)} .gk-kurve{display:flex;flex-wrap:wrap;gap:.25rem .4rem} .gk-g{white-space:nowrap;font-variant-numeric:tabular-nums;padding:.05rem .4rem;border-radius:6px;background:var(--akzent-bg)} .gk-g-n{font-weight:600} /* D348 Bestellempfehlung: Absatz nach Groessenkurve verteilt (Titel nennt den eigenen) */ .bestell-kurve{color:var(--akzent);font-weight:600;cursor:help} /* D352 Inventur & Schwund: Marken und Tage nebeneinander, schmal untereinander */ .sw-zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.5rem} @media (max-width:900px){.sw-zwei{grid-template-columns:minmax(0,1fr)}} /* D355 Obergrenze per Knopf (Lieferantenseite) */ .gz-kasten{margin:.6rem 0 1rem;padding:.4rem 1rem .9rem;border:1px solid var(--warn);border-radius:10px;background:var(--warn-bg)} .gz-kasten.gz-rot{border-color:var(--schlecht);background:var(--schlecht-bg)} .gz-kasten.gz-ok{border-color:var(--gut);background:var(--gut-bg);padding:.7rem 1rem} .gz-form{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:center;margin-top:.5rem} .gz-form input[type=number]{width:6.5rem;margin-left:.4rem;padding:.35rem .5rem;border:1px solid var(--rand);border-radius:6px;background:var(--bg);color:var(--text)} .gz-zeile .gz-form{margin-top:0} .gz-protokoll{margin-top:.5rem;line-height:1.5} /* D358 Bestellzeiten: Waermekarte Wochentag x Stunde (9 Stufen der Akzentfarbe), Saeulen je Stunde */ .bz-karte{border-collapse:separate;border-spacing:2px;width:100%} .bz-karte th{font-size:.72rem;font-weight:600;color:var(--leise);padding:0 .15rem;text-align:center} .bz-karte tr th:first-child{text-align:left;padding-right:.5rem} .bz-karte td{height:1.6rem;min-width:1.1rem;border-radius:3px;background:color-mix(in srgb, var(--akzent) calc(var(--s, 0) * 12%), var(--flaeche))} .bz-karte td.zahl-z{background:none;font-size:.8rem;padding-left:.5rem;white-space:nowrap} .bz-saeulen{display:flex;align-items:flex-end;gap:3px;height:84px;padding:.4rem 0} .bz-saeule{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%} .bz-saeule span{display:block;width:100%;min-height:1px;background:var(--akzent);border-radius:2px 2px 0 0} .bz-saeule em{font-style:normal;font-size:.65rem;color:var(--leise);margin-top:2px} /* D360 Herkuenfte: Kanal fett mit Linie darueber, Herkuenfte eingerueckt */ .hk-tabelle tr.hk-kanal td{border-top:2px solid var(--rand-stark)} .hk-tabelle tr.hk-herkunft td{font-size:.9rem} .hk-tabelle .hk-einzug{display:inline-block;padding-left:1.1rem} .hk-tabelle td:first-child{white-space:nowrap} .hk-tabelle td.zahl-z{white-space:nowrap} /* D365 Google Ads: KUR je Monat als liegender Balken (Breite = Anteil am hoechsten Monat) */ .ga-verlauf td.ga-balken{width:22%;min-width:6rem} .ga-verlauf td.ga-balken span{display:block;height:.55rem;border-radius:3px;background:var(--akzent)} .ga-schritte li{margin:.35rem 0} /* D392: Bereichszeile in "Maerkte im Vergleich" (Online-Shop, Laden, manuell, extern) */ .hk-tabelle tr.hk-bereich td{background:var(--kopf);border-top:2px solid var(--rand)} .hk-tabelle tr.hk-bereich-leer td{padding:0;height:4px} /* D394: Maerkte im Vergleich - je Bereich eine Karte, untereinander (die Tabellen sind breit) */ .hk-karten{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)} .hk-karte .karte-kopf{margin-bottom:.5rem} .hk-karte .hk-summe{font-size:.95rem} .hk-karte .hk-tabelle tr.hk-kanal:first-of-type td{border-top:none} /* D394: gleiche Spalten in allen Karten, Hinweise (Ads, Gebuehren) brechen in der ersten Spalte um */ .hk-karte .hk-tabelle{table-layout:fixed;width:100%} .hk-karte .hk-tabelle th:first-child,.hk-karte .hk-tabelle td:first-child{width:27%} .hk-karte .hk-tabelle td:first-child{white-space:normal} .hk-karte .hk-tabelle th{white-space:normal;overflow-wrap:anywhere} .hk-karte .hk-tabelle th{white-space:nowrap;overflow-wrap:normal;font-size:.66rem;letter-spacing:.02em} .hk-karte .hk-tabelle th:first-child,.hk-karte .hk-tabelle td:first-child{width:24%} /* D396: Legende unter der Monatsgrafik des Online-Shops */ .hk-legende{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;margin-top:.6rem;font-size:.85rem} .hk-diagramm{margin-bottom:.5rem} /* D398: Veraenderung hinter den Auftraegen in einem Feld fester Breite, Ziffern gleich breit - alles steht untereinander */ .hk-tabelle td.zahl-z{font-variant-numeric:tabular-nums} .hk-tabelle .hk-delta{display:inline-block;width:3.9rem;text-align:right;color:var(--leise);font-size:.85em} .hk-karte .hk-tabelle th:nth-child(2),.hk-karte .hk-tabelle td:nth-child(2){width:12%} .hk-tabelle .hk-delta.p-schlecht-txt{color:var(--schlecht)} .hk-tabelle .hk-delta.p-gut-txt{color:var(--gut)} .hk-karte .hk-tabelle th:nth-child(4),.hk-karte .hk-tabelle td:nth-child(4){width:10%} .hk-karte .hk-tabelle th.zahl-z{padding-left:.6rem} .hk-karte .hk-tabelle th.zahl-z{padding-left:.3rem;letter-spacing:0} .hk-karte .hk-tabelle th:nth-child(7),.hk-karte .hk-tabelle th:nth-child(8){padding-left:.5rem} /* D399: Kundenwert verstaendlicher - Karten je Frage, Balken fuer "kommen wieder" */ .kw-karten{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,34rem),1fr));margin-bottom:1rem} .kw-legende{margin:.3rem 0 1rem} .kw-tabelle td.zahl-z{font-variant-numeric:tabular-nums} .kw-tabelle .kw-wieder{white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums} .kw-tabelle .kw-wieder-kopf{text-align:right} .kw-balken{display:inline-block;width:4.5rem;height:.45rem;border-radius:3px;background:var(--rand);margin-right:.5rem;vertical-align:middle;overflow:hidden} .kw-balken > span{display:block;height:100%;background:var(--akzent)} .kw-karten{grid-template-columns:repeat(auto-fit,minmax(min(100%,46rem),1fr))} .kw-karten .kw-tabelle{table-layout:fixed;width:100%} .kw-karten .kw-tabelle th:first-child,.kw-karten .kw-tabelle td:first-child{width:34%} .kw-karten .kw-tabelle th:nth-child(3),.kw-karten .kw-tabelle td:nth-child(3){width:22%} /* D400: mehr Abstand zwischen Kartenueberschrift und Tabelle (Betreiber: "die ueberschrift je kachel kann mit mehr abstand zur tabelle sein") */ .kw-karten .karte-kopf,.kw-kohorten .karte-kopf{margin-bottom:1rem} .kw-tabelle .kw-pz{display:inline-block;width:3.8rem;text-align:right} /* D402: mehr Platz nach den vier Kennzahlen (Betreiber: "nach den ersten 4 kennzahlen kann mehr platz sein") */ .kw-legende{margin:.9rem 0 2rem} /* D403: Zwischenueberschriften und Trenner im Menue (Maerkte: Online-Shop, Marktplaetze) */ .nav-tafel .nav-gruppe{display:block;padding:.55rem .75rem .15rem;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--leise)} .nav-tafel .nav-trenner{display:block;height:1px;margin:.35rem .5rem;background:var(--rand)} /* D403: Unterpunkte nicht mehr eingerueckt - Trenner und Ueberschrift gliedern genug (Betreiber) */ .nav-tafel .nav-gruppe{padding-left:.6rem} /* D408: sieben Hauptpunkte - zwischen Handy und breitem Bildschirm kompakter, sonst bricht die Kopfleiste bei 1.280 px um (gemessen 28.09.2026) */ @media (min-width:721px) and (max-width:1500px){ header{gap:.6rem} nav a,.nav-knopf{padding-left:.5rem;padding-right:.5rem} .nav-mandant-voll{display:none} .nav-mandant-kurz{display:inline} } @media (min-width:721px) and (max-width:1150px){ nav a,.nav-knopf{padding-left:.35rem;padding-right:.35rem;font-size:.88rem} header .marke{margin-right:.2rem} header .rechts{gap:.4rem} } .ue-f-gruen .ue-zahl{color:var(--gut)} /* D414: Heute zu tun auf der Startseite kompakt - eine Zeile je Punkt, Text im Tooltip */ .htz-kompakt{gap:.25rem} .htz-kompakt .htz-zeile{padding:.4rem .8rem;grid-template-columns:minmax(0,1fr) auto 6.5rem} .htz-kompakt .htz-was{display:flex;align-items:baseline;gap:.6rem;min-width:0} .htz-kompakt .htz-titel{flex:none} .htz-kompakt .htz-text{display:none} .htz-kompakt .htz-euro{font-size:.95rem} .htz-kompakt .htz-euro span{display:none} @media (max-width:720px){.htz-kompakt .htz-was{display:grid}.htz-kompakt .htz-zeile{grid-template-columns:minmax(0,1fr) 5rem}} /* D415: Spruenge zu Ankern (#hintergrund, #ebay ...) landeten unter der festen Kopfleiste (Betreiber: "der Anker zu im Hintergrund rechnet ohne den fixierten Header"). Abstand = Hoehe der Kopfleiste (54 px) + Luft. */ html{scroll-padding-top:4.6rem} /* D417: Zeitraumauswahl neu geordnet - oben der geltende Zeitraum, Raster 2 Spalten, eigener Zeitraum, Vergleich als Umschalter */ .zr-tafel{min-width:21rem;padding-bottom:.8rem} .zr-form{gap:.35rem} .zr-jetzt{display:grid;gap:.1rem;padding:.2rem .6rem 0} .zr-jetzt b{font-size:1rem} .zr-jetzt span{font-size:.75rem;color:var(--leise)} .zr-form .nav-gruppe{padding:.35rem .6rem .1rem} .zr-raster{display:grid;grid-template-columns:1fr 1fr;gap:.3rem;padding:0 .6rem} .zr-raster button,.zr-frei button,.zr-schalter button{font:inherit;font-size:.84rem;padding:.4rem .6rem;border:1px solid var(--rand);border-radius:8px;background:transparent;color:inherit;cursor:pointer;text-align:center} .zr-raster button:hover,.zr-frei button:hover,.zr-schalter button:hover{border-color:var(--akzent)} .zr-raster button.an,.zr-frei button.an,.zr-schalter button.an{border-color:var(--akzent);color:var(--akzent);background:color-mix(in srgb,var(--akzent) 12%,transparent);font-weight:600} .zr-frei{display:grid;grid-template-columns:1fr 1fr;gap:.3rem;padding:0 .6rem;font-size:.75rem;color:var(--leise)} .zr-frei label{display:grid;gap:.15rem} .zr-frei input{font:inherit;font-size:.84rem;padding:.35rem .4rem;border:1px solid var(--rand);border-radius:8px;background:var(--flaeche);color:var(--text);width:100%;box-sizing:border-box} .zr-frei button{grid-column:1 / -1} .zr-schalter{display:grid;grid-template-columns:1fr 1fr;margin:0 .6rem;border:1px solid var(--rand);border-radius:8px;overflow:hidden} .zr-schalter button{border:0;border-radius:0} .zr-schalter button + button{border-left:1px solid var(--rand)} /* D418: nur Warnungen im Hintergrund -> gelb, Stoerungen bleiben rot (Betreiber: "Warnungen sind gelb, nicht rot") */ .htz-stoerung.htz-stoerung-warn{border-left-color:var(--warn)} /* D420: Reduzierungen - Formular in Schritten, Rabatt als Knoepfe, Listen mit Suche */ .ak-kopf{align-items:flex-start;gap:1rem} .ak-kopf h1{margin-bottom:.2rem} .ak-leer{display:grid;gap:.25rem;padding:1rem 1.2rem;border-left:3px solid var(--rand)} .ak-neu{display:grid;gap:0;padding:0;overflow:hidden} .ak-schritt{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:1rem;padding:1.1rem 1.3rem;border-bottom:1px solid var(--rand)} .ak-nr{width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;background:color-mix(in srgb,var(--akzent) 18%,transparent);color:var(--akzent)} .ak-inhalt{display:grid;gap:.6rem;min-width:0} .ak-inhalt h3{margin:.2rem 0 0;font-size:1rem} .ak-feld{display:grid;gap:.3rem;font-size:.8rem;font-weight:600;color:var(--leise);max-width:36rem} .ak-feld input{font:inherit;font-size:.92rem;font-weight:400;color:var(--text);background:var(--flaeche);border:1px solid var(--rand);border-radius:8px;padding:.5rem .6rem} .ak-hilfe{margin:0;font-size:.8rem;color:var(--leise)} .ak-stufen{display:flex;flex-wrap:wrap;gap:.35rem} .ak-stufen label{cursor:pointer} .ak-stufen input{position:absolute;opacity:0;pointer-events:none} .ak-stufen span{display:inline-block;min-width:3.4rem;text-align:center;padding:.4rem .55rem;border:1px solid var(--rand);border-radius:8px;font-weight:600;color:var(--text);font-size:.88rem} .ak-stufen label:hover span{border-color:var(--akzent)} .ak-stufen input:checked + span{border-color:var(--akzent);color:var(--akzent);background:color-mix(in srgb,var(--akzent) 14%,transparent)} .ak-stufen input:focus-visible + span{outline:2px solid var(--akzent);outline-offset:2px} .ak-zwei{display:grid;grid-template-columns:repeat(2,minmax(0,16rem));gap:.8rem} .ak-drei{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:.8rem} .ak-liste{display:grid;gap:.35rem;min-width:0} .ak-liste-kopf{display:flex;justify-content:space-between;font-size:.8rem;font-weight:600;color:var(--leise)} .ak-zahl{color:var(--akzent)} .ak-suche{font:inherit;font-size:.85rem;padding:.4rem .6rem;border:1px solid var(--rand);border-radius:8px;background:var(--flaeche);color:var(--text)} .ak-liste select{font:inherit;font-size:.86rem;padding:.3rem;border:1px solid var(--rand);border-radius:8px;background:var(--flaeche);color:var(--text);width:100%} .ak-liste select option{padding:.15rem .3rem;border-radius:4px} .ak-liste select option:checked{background:color-mix(in srgb,var(--akzent) 30%,transparent)} .ak-aktiv{margin-top:.2rem} .ak-fuss{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:1rem 1.3rem} @media (max-width:720px){.ak-schritt{grid-template-columns:1fr;gap:.5rem;padding:1rem}.ak-zwei{grid-template-columns:1fr}} /* D421: Spalte Gewinn in Maerkte im Vergleich */ .hk-luecke{color:var(--warn);cursor:help} .hk-karte .hk-tabelle th,.hk-karte .hk-tabelle td{font-size:.84rem} .hk-karte .hk-tabelle th:first-child,.hk-karte .hk-tabelle td:first-child{width:22%} .hk-karte .hk-tabelle th:nth-child(2),.hk-karte .hk-tabelle td:nth-child(2){width:11%} /* D424: mit der Gewinnspalte 1.301 px bei 1.280 - noch etwas engere Zellen. */ .lf-alle th,.lf-alle td{padding-left:.32rem;padding-right:.32rem} /* D425: Artikelseite auf dem Handy (28.09.2026, Betreiber: "ja, mach 7"). Bei 390 px war die Seite 742 px breit: die Leiste (Zurueck, Nummer, Umfang, Markierungen) brach nicht um, und die aufklappbaren Felder (Umfang 22-34 rem, Markierungen) trugen auch GESCHLOSSEN zur Breite bei - Chrome legt den Inhalt geschlossener
    weiter aus. */ .umfang:not([open]) > .umfang-feld,details:not([open]) > .nav-tafel{display:none} /* Zurueck- und Markierungsknoepfe bekamen ihre Breite aus aspect-ratio erst NACH dem Strecken auf Zeilenhoehe - die linke Zone rechnete mit ihrer Eigenbreite (Zurueck 18 statt 41 px), und der letzte Knopf lag ueber dem Artikelnamen (1.280 px: Zone 416 px, Knoepfe bis 474 px). Feste Breite = Zeilenhoehe (2,6 rem). */ .subnav-links .mk-knopf,.subnav-links .subnav-zurueck{aspect-ratio:auto;width:2.6rem} @media (max-width:720px){ .subnav{padding:.5rem .8rem} .subnav-zeile:not(.subnav-liste){flex-wrap:wrap;gap:.5rem} .subnav-zeile:not(.subnav-liste) .subnav-links{flex:1 1 100%;flex-wrap:wrap;gap:.45rem} .subnav-zeile:not(.subnav-liste) .subnav-rechts{flex:1 1 auto} .subnav-zeile:not(.subnav-liste) .subnav-mitte{flex:1 1 100%} .subnav-stand{white-space:normal;text-align:center} .subnav-links .mk-knopf,.subnav-links .subnav-zurueck{width:2.3rem} .umfang-feld{position:fixed;left:.6rem;right:.6rem;top:auto;min-width:0;max-width:none; max-height:70vh;overflow-y:auto} .mk-tafel{max-width:calc(100vw - 1.2rem)} } /* D430: Warenbestand je Monatsanfang */ .wb-monate th.wb-gruppe{text-align:center;border-bottom:1px solid var(--rand)} .wb-monate th,.wb-monate td{padding-left:.55rem;padding-right:.55rem} .wb-monate td.wb-trenn{border-left:1px solid var(--rand)} .wb-monate tr.wb-heute td{border-top:2px solid var(--akzent);font-weight:600} .wb-monate td.wb-leer{text-align:center} .wb-fuss{margin:.5rem 0 1.6rem;font-size:.8rem} /* D431: Warenbestand lesbarer - zwei schmale Tabellen nebeneinander */ .wb-grafik{margin:1rem 0} .wb-zwei{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr))} .wb-zwei .karte h3{margin:0 0 .6rem} .wb-tab{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums} .wb-tab th,.wb-tab td{padding:.38rem .5rem;border-bottom:1px solid var(--rand);white-space:nowrap} .wb-tab th{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--leise)} .wb-tab tr:last-child td{border-bottom:0} .wb-tab tr.wb-heute td{border-top:2px solid var(--akzent);border-bottom:2px solid var(--akzent);font-weight:600} .wb-kacheln{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))} .wb-kacheln .kachel{width:auto;min-width:0} .wb-zwei > .karte{min-width:0} @media (max-width:720px){.wb-tab th,.wb-tab td{padding:.34rem .3rem;font-size:.85rem}} /* D434: Diagramme mit fester Hoehe (9rem): ohne feste Zeile wuchs das Feld auf die Eigenhoehe des SVG (150 px) plus Achse und die Datumszeile hing unter der Karte heraus (Warenbestand im Verlauf, 144 statt 158 px). Wie .lf-diagramm. */ .diagramm{grid-template-rows:100%} .wb-verlauf .diagramm{grid-template-columns:4.2rem minmax(0,1fr)} /* 1.193.437 passt nicht in 2,8 rem */ /* D439: Herkunft der Fremdlagerdaten */ .fl-quellen{display:flex;flex-wrap:wrap;gap:.4rem;margin:-.3rem 0 1rem} .fl-quelle{margin:.35rem 0 .2rem;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem} .fl-quelle > div{flex-basis:100%} .karte .fl-unten{margin-top:auto;padding-top:.7rem} /* D440: unten in der Karte */ .karte:has(> .fl-unten){display:flex;flex-direction:column} /* D440: damit margin-top:auto greift */ /* D441: ohne Rahmen und Pillen - nur eine Trennlinie darueber */ .karte .fl-quelle.fl-unten{border:0;border-top:1px solid var(--rand);border-radius:0;background:none;padding:.6rem 0 0;box-shadow:none} /* D446: Lagerwechsel */ .lw-kasten{margin:.5rem 0 .7rem;padding:.7rem .85rem;border:1px solid var(--rand);border-radius:8px;background:var(--bg)} .lw-kasten .zeile{padding:.25rem 0} .lw-kasten form{margin-top:.6rem} .lw-laeuft{border-color:var(--akzent)} .lw-fehler{border-color:var(--schlecht)} /* D449: Newsletter je Monat - sieben Spalten in halber Breite */ .gs-tabelle.nl-verlauf th,.gs-tabelle.nl-verlauf td{padding-left:.3rem;padding-right:.3rem} /* D454: Inventur & Schwund lesbarer */ .sw-begriffe{display:grid;gap:.5rem 1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));margin:0 0 1rem;font-size:.9rem;color:var(--leise)} .sw-begriffe b{margin-right:.35rem;color:var(--text)} .sw-begriffe b.p-schlecht-txt{color:var(--schlecht)} .sw-begriffe b.p-gut-txt{color:var(--gut)} .sw-kacheln{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))} .sw-kacheln .kachel{width:auto;min-width:0} .sw-auffaellig{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.45rem} .sw-auffaellig li{padding:.55rem .8rem;border-left:3px solid var(--rand);background:var(--flaeche);border-radius:6px} .sw-auffaellig li.sw-schlecht{border-left-color:var(--schlecht)} .sw-auffaellig li.sw-warn{border-left-color:var(--warn)} .sw-auffaellig li.sw-gut{border-left-color:var(--gut)} .sw-auffaellig li.sw-info{border-left-color:var(--akzent)} .sw-tab .sw-balken{width:22%;min-width:5rem} .sw-tab .sw-balken span{display:block;height:.45rem;border-radius:3px;background:var(--schlecht);opacity:.75} .sw-regeln{margin:.6rem 0 0;padding-left:1.1rem;display:grid;gap:.35rem} /* D455: Schwund - Balken ohne Radius links, Pfeil an Grossbuchungen, Rechenregeln als Popover */ .sw-auffaellig li{border-radius:0 6px 6px 0} .sw-klapp summary{list-style:none} .sw-klapp summary::-webkit-details-marker{display:none} .sw-klapp summary::after{content:"";margin-left:auto;align-self:center;width:.5rem;height:.5rem;border-right:2px solid var(--leise); border-bottom:2px solid var(--leise);transform:rotate(45deg);transition:transform .15s} .sw-klapp[open] summary::after{transform:rotate(-135deg)} .sw-infoknopf{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;margin-left:.35rem; border:1px solid var(--rand);border-radius:50%;background:none;color:var(--leise);font:600 .75rem/1 inherit;font-style:italic; cursor:pointer;vertical-align:middle} .sw-infoknopf:hover{border-color:var(--akzent);color:var(--akzent)} .sw-popover{max-width:min(34rem,calc(100vw - 2rem));padding:1rem 1.2rem;border:1px solid var(--rand);border-radius:10px; background:var(--flaeche);color:var(--text);box-shadow:0 12px 36px rgba(0,0,0,.35)} .sw-popover::backdrop{background:rgba(0,0,0,.35)} .sw-popover-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem} .sw-popover-kopf button{border:0;background:none;color:var(--leise);font-size:1.3rem;cursor:pointer;line-height:1} .sw-popover .sw-regeln{font-size:.9rem;color:var(--leise)} /* D457: verborgene Zahlen (Zufallsziffern vom Server, hier nur unscharf) und Vorfuehrmodus */ .geheim{filter:blur(5px);user-select:none;-webkit-user-select:none} .nav-vorfuehren{display:block;width:100%;text-align:left;background:none;border:0;padding:.45rem .9rem;color:inherit;font:inherit;cursor:pointer} .nav-vorfuehren:hover{color:var(--akzent)} .nav-vorfuehren.an{color:var(--akzent);font-weight:600} .nav-vorfuehr-hinweis{margin:0 .4rem 0 0;display:flex;align-items:center} .nav-vorfuehr-hinweis button{border:1px solid var(--akzent);background:var(--akzent-bg);color:var(--akzent);border-radius:99px; padding:.2rem .65rem;font:600 .75rem/1.2 inherit;cursor:pointer} html[data-geheim] svg text.torte-mitte{filter:blur(4px)} /* D457/D458: nur Betraege in Ringdiagrammen - nicht Logos (Amazon, OTTO) */ /* D460: Meldungen "Im Hintergrund" oben unter Heute zu tun */ .htz-meldungen{margin:0 0 .6rem} .htz-untertitel{margin:.2rem 0 .45rem;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--leise)} .stoerungen{margin-bottom:1.2rem} /* D463 */ /* D465: Vorfuehrmodus im Profilmenue wie die anderen Eintraege; gleiche Abstaende im Kopf */ .nav-tafel .nav-vorfuehren{padding:.5rem .6rem;border-radius:8px;font-size:.9rem;color:var(--text)} .nav-tafel .nav-vorfuehren:hover{background:var(--kopf);color:var(--text)} .nav-tafel .nav-vorfuehren.an{color:var(--akzent);font-weight:600} .nav-mandant{margin-right:0} /* D466: Profil bearbeiten */ .pf-seite{max-width:40rem;margin:1rem auto} .pf-karte{margin-top:1rem} .pf-karte h3{margin:0 0 .3rem} .pf-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:.8rem 1rem;margin-top:.6rem} .pf-form label{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;color:var(--leise)} .pf-form input{padding:.55rem .7rem;border:1px solid var(--rand);border-radius:6px;background:var(--bg);color:var(--text);font:inherit} .pf-breit{grid-column:1/-1} .pf-fuss{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap} .pf-knopf{padding:.55rem 1.1rem;border:0;border-radius:6px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap} .pf-zeile{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap} .pf-design{margin:0} /* D466: Design-Auswahl auf der Profilseite */ /* D466: Vorfuehrmodus mit Schieberegler rechts (Betreiber: "sollte einen Schieberegler rechts bekommen") */ .nav-tafel .nav-vorfuehren{display:flex;align-items:center;justify-content:space-between;gap:.8rem} .nav-tafel .nav-vorfuehren.an{font-weight:inherit;color:var(--text)} .nav-schalter{position:relative;flex:none;width:2.1rem;height:1.2rem;border-radius:99px;background:var(--rand);transition:background .15s} .nav-schalter::after{content:"";position:absolute;top:.15rem;left:.15rem;width:.9rem;height:.9rem;border-radius:50%;background:#fff;transition:transform .15s} .nav-vorfuehren.an .nav-schalter{background:var(--akzent)} .nav-vorfuehren.an .nav-schalter::after{transform:translateX(.9rem)} /* D468: Anmelden mit Microsoft */ .ms-oder{display:flex;align-items:center;gap:.7rem;margin:1.1rem 0 .9rem;color:var(--leise);font-size:.8rem} .ms-oder::before,.ms-oder::after{content:"";flex:1;height:1px;background:var(--rand)} .ms-knopf{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;padding:.6rem;border:1px solid var(--rand); border-radius:6px;background:var(--bg);color:var(--text);font-weight:600;text-decoration:none} .ms-knopf:hover{border-color:var(--akzent)} .ms-knopf svg{width:1.1rem;height:1.1rem} .ms-anfrage{max-width:52rem;margin-bottom:.8rem;display:grid;gap:.6rem} .ms-anfrage-form{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center} .ms-anfrage-form select{padding:.45rem .6rem;border:1px solid var(--rand);border-radius:6px;background:var(--bg);color:var(--text);font:inherit} .ms-ablehnen{padding:.55rem 1rem;border:1px solid var(--rand);border-radius:6px;background:none;color:var(--leise);font:inherit;cursor:pointer} .ms-ablehnen:hover{border-color:var(--schlecht);color:var(--schlecht)} /* D470: Unterkanaele in "Je Kanal" der Lieferantenseite */ .lf-kanaele tr.lf-unterkanal td{font-size:.85rem;color:var(--leise);padding-top:.25rem;padding-bottom:.25rem} .lf-kanaele tr.lf-unterkanal td:first-child{padding-left:2.2rem} .lf-kanaele tr.lf-unterkanal td.p-schlecht-txt{color:var(--schlecht)} /* --------------------------------------------------------------------- D478 (30.09.2026): die Navigation als Leiste am linken Rand. Betreiber: "ich möchte die desktop menüleiste nach links verschieben. ein menü das sich dann von links ausfahren lässt und dort alle punkte abbildet. wenn es eingefahren ist, sollen nur icons angezeigt werden. die aktuell kategorie soll orange sein". Ab 721 px. Eingefahren (Vorgabe) 3,6 rem breit, nur die Symbole; die Unterpunkte klappen als Tafel rechts daneben auf (Maus darauf oder Klick, control.js). Ausgefahren (html.nav-breit, Knopf oben links, im Browser gemerkt) 15,5 rem, alle Unterpunkte offen darunter. Die Seite rueckt um die Breite der Leiste ein (body padding-left), die Kopfzeile mit Zeitraum, Mandant und Profil bleibt oben. Farben wie die Kopfzeile (Sekundaerfarbe, Schrift hell), der aktive Bereich und der aktive Unterpunkt in Orange. Am Handy bleibt alles beim Burger von D-18.09. --------------------------------------------------------------------- */ .nav-icon,.nav-tafel-titel,.nav-leiste-knopf,.nav-profil-symbol{display:none} @media (min-width:721px){ :root{--leiste:3.6rem;--leiste-breit:15.5rem;--kopf-h:3.4rem} /* Nachtrag D478 (Betreiber: "das menü sollte unter dem header anfangen"): die Kopfzeile laeuft ueber die volle Breite - sie rueckt mit der Seite ein (body padding-left) und holt sich den Platz mit einem negativen Rand zurueck. Die Leiste beginnt unter Kopfzeile und Ladebalken (3 px); dafuer ist die Kopfzeile genau --kopf-h hoch. */ body:has(#hauptnav){padding-left:var(--leiste);transition:padding-left .18s ease} html.nav-breit body:has(#hauptnav){padding-left:var(--leiste-breit)} body:has(#hauptnav) .kopfleiste{margin-left:calc(-1 * var(--leiste));transition:margin-left .18s ease} html.nav-breit body:has(#hauptnav) .kopfleiste{margin-left:calc(-1 * var(--leiste-breit))} header{height:var(--kopf-h);box-sizing:border-box;flex-wrap:nowrap;padding-left:1.2rem} /* Nachtrag (Betreiber: "der ladebalken soll über den ganzen header gehen"): die Leiste beginnt seit eben direkt an der Kopfleiste und lag damit ueber dem linken Stueck des Balkens. Der Balken liegt jetzt darueber (z-index); ohne Ladevorgang ist er durchsichtig, die Leiste scheint durch. */ .kopfleiste > .ladebalken{position:relative;z-index:3} /* Nachtrag D478: kein Burger am Desktop - der Pfeil unten in der Leiste schaltet (Betreiber: "die drei striche ... sollte da weg. dafür kommt unten positioniert ein pfeil"). Eingefahren zeigt er nach rechts (ausfahren), ausgefahren nach links; er klebt unten, auch wenn die ausgefahrene Leiste rollt. */ .nav-burger{display:none} #hauptnav .nav-leiste-knopf{display:flex;align-items:center;justify-content:center;flex:none; position:sticky;bottom:-1rem;margin:auto -.35rem -1rem;width:calc(100% + .7rem);height:2.8rem;padding:0;border:0; border-top:1px solid #4a4a4a;background:var(--sekundaer);color:#9a9a9a;cursor:pointer} #hauptnav .nav-leiste-knopf:hover{color:#fff} #hauptnav .nav-leiste-knopf svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease} html.nav-breit #hauptnav .nav-leiste-knopf svg{transform:rotate(180deg)} /* Nachtrag (Betreiber: "wenn das menü ausgeklappt ist, kann bei dem Pfeil unten einklappen oder ähnliches neben dem pfeil stehen"): ausgefahren steht der Pfeil in der Flucht der Symbole, daneben "Einklappen"; eingefahren nur der Pfeil, mittig. */ #hauptnav .nav-leiste-wort{display:none} html.nav-breit #hauptnav .nav-leiste-knopf{justify-content:flex-start;gap:.8rem; padding-left:calc(.35rem + .62rem + 3px + .05rem);font:inherit;font-size:.9rem} html.nav-breit #hauptnav .nav-leiste-wort{display:inline} /* Nachtrag (Betreiber: "das menü darf gerne direkt am header beginnen"): oben buendig an der Kopfleiste, ohne den 3-px-Streifen des Ladebalkens und ohne Innenabstand - das erste Feld sitzt direkt darunter. */ #hauptnav{position:fixed;left:0;top:var(--kopf-h);bottom:0;z-index:2;width:var(--leiste);box-sizing:border-box; display:flex;flex-direction:column;flex-wrap:nowrap;gap:.15rem; padding:0 .35rem 1rem; background:var(--sekundaer);border-right:1px solid #4a4a4a;transition:width .18s ease} html.nav-breit #hauptnav{width:var(--leiste-breit);overflow-y:auto;overscroll-behavior:contain; /* Nachtrag D478: "der scrollbalken darf gerne minimalisiert werden" - schmal, ohne Rinne, erst beim Darueberfahren deutlicher */ scrollbar-width:thin;scrollbar-color:#4f4f4f transparent} html.nav-breit #hauptnav:hover{scrollbar-color:#6a6a6a transparent} html.nav-breit #hauptnav::-webkit-scrollbar{width:6px} html.nav-breit #hauptnav::-webkit-scrollbar-track{background:transparent} html.nav-breit #hauptnav::-webkit-scrollbar-thumb{background:#4f4f4f;border-radius:3px} /* Nachtrag (Betreiber: "wenn eine kategorie ausgewählt ist, soll der linke balken rechts angezeigt werden. es soll kein rand mehr um den button sein, es soll quasi vollflächig sein"): die Zeile laeuft ueber die ganze Breite der Leiste (negativer Rand gegen deren .35rem Innenabstand), eckig, der Balken rechts an der Leistenkante. Das Symbol bleibt an seiner Stelle: links .35rem + 3 px + .62rem wie vorher. */ #hauptnav > a,#hauptnav .nav-knopf{display:flex;align-items:center;gap:.8rem; width:calc(100% + .7rem);margin:0 -.35rem;box-sizing:border-box; padding:.62rem .62rem .62rem calc(.35rem + 3px + .62rem);border:0;border-right:3px solid transparent;border-radius:0; font-size:.95rem;color:#cfcfcf;white-space:nowrap} #hauptnav > a:hover,#hauptnav .nav-knopf:hover{color:#fff;background:rgba(255,255,255,.06)} #hauptnav > a.aktiv,#hauptnav .nav-knopf.aktiv{color:var(--akzent);border-right-color:var(--akzent); background:rgba(255,255,255,.07)} /* 1,55 statt 1,3 rem (Betreiber: "und icons gerne etwas größer"), Strich etwas feiner, damit sie nicht plump werden */ #hauptnav .nav-icon{display:block;width:1.55rem;height:1.55rem;flex:none;fill:none;stroke:currentColor; stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} #hauptnav .nav-menue{position:relative;width:100%} /* Eingefahren: nur Symbole, Unterpunkte als Tafel daneben */ html:not(.nav-breit) #hauptnav .nav-wort,html:not(.nav-breit) #hauptnav .nav-winkel{display:none} /* Nachtrag (Betreiber: "in der eingeklappten varianten, dürfen die icons mit hintergrund quadratisch sein"): eingefahren ist jede Zeile so hoch wie die Leiste breit (3,6 rem ohne 1 px Rand) - die Flaeche wird ein Quadrat, das Symbol steht mittig (links 3 px gegen den Balken rechts). */ html:not(.nav-breit) #hauptnav > a,html:not(.nav-breit) #hauptnav .nav-knopf{ height:calc(var(--leiste) - 1px);padding:0 0 0 3px;justify-content:center} /* Nachtrag (Betreiber: "das menü kann beim mousehover das submenü mit dem radius rechts anzeigen. links sollte es 0 sein"): die Tafel setzt buendig an der Kante der Leiste an (100 % + Innenabstand .35rem + 1 px Rand) - links eckig, rechts rund. */ html:not(.nav-breit) #hauptnav .nav-tafel{top:0;left:calc(100% + .35rem + 1px);min-width:13rem; max-height:calc(100vh - 1rem);overflow-y:auto;border-radius:0 12px 12px 0; /* Nachtrag: "gerne auch mit dunklen schatten richtung page" - nur nach rechts und unten versetzt, nicht zurueck auf die Leiste */ box-shadow:22px 14px 44px -2px rgba(0,0,0,.8),8px 2px 16px rgba(0,0,0,.55)} /* auf dem dunklen Design sonst kaum sichtbar */ html:not(.nav-breit) #hauptnav .nav-tafel-titel{display:block;padding:.45rem .6rem .4rem; font-weight:700;font-size:.92rem;color:var(--text);border-bottom:1px solid var(--rand);margin-bottom:.3rem} /* Ausgefahren: alle Unterpunkte offen, eingerueckt unter ihrem Bereich */ html.nav-breit #hauptnav .nav-knopf{cursor:default} html.nav-breit #hauptnav .nav-winkel{display:none} html.nav-breit #hauptnav .nav-tafel{position:static;box-shadow:none;border:0;border-radius:0; background:transparent;padding:.1rem 0 .55rem 2.6rem;min-width:0;animation:none} /* 2,6 statt 2,35 rem: Unterpunkte in der Flucht der Bereichsnamen - die Symbole sind groesser */ html.nav-breit #hauptnav .nav-tafel a{padding:.36rem .6rem;font-size:.87rem;color:#bdbdbd;border-radius:6px;white-space:nowrap} html.nav-breit #hauptnav .nav-tafel a:hover{background:rgba(255,255,255,.06);color:#fff} html.nav-breit #hauptnav .nav-tafel a.an{color:var(--akzent);font-weight:600} html.nav-breit #hauptnav .nav-gruppe{color:#8d8d8d;padding:.5rem .6rem .1rem} html.nav-breit #hauptnav .nav-trenner{background:#4a4a4a;margin:.3rem .6rem} } @media (min-width:721px) and (prefers-reduced-motion:reduce){ body:has(#hauptnav),#hauptnav,body:has(#hauptnav) .kopfleiste{transition:none}} /* Nachtrag D478 (Betreiber: "es sollte kein textcourser zu sehen sein"): Kopfzeile und Leiste sind Bedienelemente, kein Lesetext. Ueber Wort, Gruppenueberschrift und Tafeltitel stand der Textcursor (I-Balken), und ein Doppelklick markierte das Wort. Jetzt Pfeil, Verweise und Knoepfe die Hand, nichts markierbar - ausser den Eingabefeldern (Zeitraum). */ .kopfleiste{cursor:default;-webkit-user-select:none;user-select:none} .kopfleiste :is(a,summary,button,label){cursor:pointer} html.nav-breit #hauptnav .nav-knopf{cursor:default} html.nav-breit #hauptnav .nav-knopf[data-nav-ziel]{cursor:pointer} .kopfleiste :is(input,textarea,select){cursor:auto;-webkit-user-select:text;user-select:text} /* --------------------------------------------------------------------- D479 (30.09.2026): der Pruefstand an Artikelliste und Artikelseite nach rechts einklappbar, Vorgabe ausgeklappt, gemerkt im Benutzerkonto. Ausgeklappt sitzt der Pfeil oben rechts im Streifen (zeigt nach rechts: dorthin klappt er). Eingeklappt bleibt ein 2,6 rem schmaler Streifen mit dem Pfeil (nach links) und dem Wort senkrecht; ein Klick irgendwo auf den Streifen klappt wieder aus. Nur zweispaltig (ab 1.101 px) - darunter steht der Pruefstand ohnehin ueber der Liste. --------------------------------------------------------------------- */ .ps-klapp-form,.ps-streifen-titel,.ps-streifen-zahlen{display:none} @media (min-width:1101px){ .a-seite{position:relative} /* Nachtrag (Betreiber: "den button sieht man nicht so gut im ausgeklappen zustand. können wir den im gleichen style machen wie im subheader?"): wie der Auffrischknopf der Unterleiste - gemessen 41 x 41 px, Grund var(--bg) statt der Streifenfarbe, Rahmen var(--rand), 8 px Rundung, 8 px unter der Oberkante, also auf einer Hoehe mit ihm. */ .ps-klapp-form{display:block;position:absolute;top:.5rem;right:.5rem;z-index:2;margin:0} .ps-klapp{display:flex;align-items:center;justify-content:center;width:2.56rem;height:2.56rem;padding:0; border:1px solid var(--rand);border-radius:8px;background:var(--bg);color:var(--leise);cursor:pointer} .ps-klapp:hover{border-color:var(--akzent);color:var(--akzent)} .ps-klapp svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease} .a-spalten{transition:grid-template-columns .18s ease} .a-spalten.ps-zu{grid-template-columns:minmax(0,1fr) 3.1rem} /* 3,1 statt 2,6 rem: vierstellige Zahlen (5616) brauchen Luft */ .a-spalten.ps-zu .a-seite{display:flex;flex-direction:column;align-items:center;gap:.9rem; padding:.55rem 0;overflow:hidden;cursor:pointer} .a-spalten.ps-zu .a-seite > :not(.ps-klapp-form):not(.ps-streifen-titel):not(.ps-streifen-zahlen){display:none} /* Nachtrag: Fehler (rot) und Warnungen (gelb) als Zahl im Streifen, untereinander */ .a-spalten.ps-zu .ps-streifen-zahlen{display:flex;flex-direction:column;align-items:center;gap:.35rem} /* Nachtrag: die Kreise UNTER dem Wort (Betreiber: "und unterhalb von prüfstand") - Pfeil, Wort, Kreise */ .a-spalten.ps-zu .ps-klapp-form{order:0} .a-spalten.ps-zu .ps-streifen-titel{order:1} .a-spalten.ps-zu .ps-streifen-zahlen{order:2} /* Im Stil der uebrigen Pillen (.pille.p-schlecht/.p-warn/.p-gut): dunkler Grund (--*-bg), Schrift in der Stufenfarbe, Rand 45 % davon - Betreiber: "im stil unserer anderen ... heller border dunkler hintergrund helle schrift". Vorher voll eingefaerbt mit weisser bzw. schwarzer Schrift. */ /* Nachtrag: Kreise statt Pillen (Betreiber: "können wir daraus kreise machen, anstelle einer pille?") - wie die Kreise der Artikelseite (.pk-kreis), nur klein: 2,4 rem, 2 px Rand; vierstellige Zahlen (5616) passen bei .66 rem Schrift hinein. */ .ps-sz{display:flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;box-sizing:border-box; padding:0;border-radius:50%;font-size:.66rem;font-weight:700;line-height:1; font-variant-numeric:tabular-nums;letter-spacing:-.01em;border:2px solid transparent} .ps-sz-fehler{background:var(--schlecht-bg);color:var(--schlecht);border-color:color-mix(in srgb, var(--schlecht) 60%, transparent)} .ps-sz-warn{background:var(--warn-bg);color:var(--warn);border-color:color-mix(in srgb, var(--warn) 60%, transparent)} .ps-sz-gut{background:var(--gut-bg);color:var(--gut);border-color:color-mix(in srgb, var(--gut) 60%, transparent)} /* Nachtrag (Betreiber: "auf der artikelübersicht kann der prüfstand mit den fehlern etwas weiter unten anfangen, damit der button oben rechts nicht so gequetscht aussieht"): gemessen (1.440 px) Knopf bis 106 px, Kopf "Fehler" ab 124 px, die rote Linie darueber fast am Knopf. Jetzt 1,1 rem mehr Luft -> Kopf ab 141 px. Nur auf der Liste, die Artikelseite hat unter der Ueberschrift ohnehin die Kreise. */ .a-seite > .karten .pruefstand .ps-spalten{padding-top:1.1rem} /* padding: ein margin fiel mit dem der Kopfzeile zusammen */ .a-spalten.ps-zu .ps-klapp-form{position:static} .a-spalten.ps-zu .ps-klapp{width:2.2rem;height:2.2rem} .a-spalten.ps-zu .a-seite{padding-top:.5rem} .a-spalten.ps-zu .ps-klapp svg{transform:rotate(180deg)} .a-spalten.ps-zu .ps-streifen-titel{display:block;writing-mode:vertical-rl;font-size:.8rem;font-weight:600; letter-spacing:.08em;text-transform:uppercase;color:var(--leise);-webkit-user-select:none;user-select:none} .a-spalten.ps-zu .a-seite:hover .ps-streifen-titel{color:var(--akzent)} } @media (min-width:1101px) and (prefers-reduced-motion:reduce){ .a-spalten,.ps-klapp svg{transition:none}} /* D480 (30.09.2026, Betreiber: "der scrollbalken bei artikel und artikelübersicht in dem mittlerenteil kann auch minimiert werden"): das Rollfeld der Artikelliste und der Artikelseite mit demselben schmalen Balken wie die ausgefahrene Leiste (D478) - ohne Rinne, der Griff dunkel, beim Darueberfahren etwas heller. Farben aus dem Design (var(--rand)/var(--leise)), damit es hell wie dunkel passt. */ .a-rollfeld{scrollbar-width:thin;scrollbar-color:var(--rand) transparent} .a-rollfeld:hover{scrollbar-color:var(--leise) transparent} .a-rollfeld::-webkit-scrollbar{width:6px} .a-rollfeld::-webkit-scrollbar-track{background:transparent} .a-rollfeld::-webkit-scrollbar-thumb{background:var(--rand);border-radius:3px} .a-rollfeld:hover::-webkit-scrollbar-thumb{background:var(--leise)} /* --------------------------------------------------------------------- D481 (30.09.2026): die Artikelübersicht wird nachgeladen. Der Platzhalter und der Abdruck stehen zwischen main und .a-spalten - sie muessen die Hoehe durchreichen (main ist dort eine Flex-Saeule, D-a-spalten), sonst faellt die Liste auf ihre Inhaltshoehe zusammen. --------------------------------------------------------------------- */ .nachladen:has(.a-spalten),.abdruck:has(> .a-spalten){flex:1 1 auto;min-height:0;display:flex;flex-direction:column} .nachladen.fehler [data-skelett]{display:none} /* Nachtrag (Betreiber: "das skelett weicht von der darstellung ab. manche elemente haben radius, die sie eigentlich nicht haben. auch ist das padding oder margin anders"): nachgemessen an der echten Liste, 1.440 px. Vorher eigener Innenabstand zusaetzlich zum Rollfeld (Karten bei x 104 statt 82), Karten gerundet (echt eckig), Streifen 4 statt 6 px, Unterleiste 59 statt 55 px hoch. Balken fuer Text behalten ihre Rundung (Skelett-Stil), Knoepfe die echte (8 px, Auffrischen rund), die Karten keine. */ .sk-a-leiste{display:flex;align-items:center;gap:.5rem;height:38px} .sk-a-titel{width:6rem;height:1.3rem} .sk-a-suche{width:415px;height:38px;border-radius:8px;margin-left:auto} .sk-a-knopf{width:38px;height:38px;border-radius:8px} .sk-a-kopf{display:flex;justify-content:space-between;align-items:center;height:31px;margin:1px 0 16px} .sk-a-zahl{width:101px;height:.95rem} .sk-a-blaettern{display:flex;align-items:center;gap:10px} .sk-a-stand{width:118px;height:.95rem} .sk-a-seiten{width:154px;height:31px;border-radius:8px} .sk-a-liste{display:grid;gap:.4rem} .sk-a-karte{display:flex;align-items:center;height:52px;box-sizing:border-box;padding:0 13px 0 13px; background:var(--flaeche);border:1px solid var(--rand);border-left:6px solid var(--rand);border-radius:0} .sk-a-karte .sk-zeile{flex:none} .sk-a-bild{width:32px;height:32px;border-radius:6px} .sk-a-sicht{width:18px;height:18px;margin-left:11px;border-radius:50%} .sk-a-nr{width:101px;height:34px;margin-left:15px;border-radius:8px} .sk-a-name{width:191px;height:.9rem;margin-left:10px} .sk-a-k1{width:117px;height:34px;margin-left:auto;border-radius:8px} .sk-a-k2{width:93px;height:34px;margin-left:10px;border-radius:8px} .sk-a-k3{width:122px;height:34px;margin-left:10px;border-radius:8px} .sk-a-k4{width:34px;height:34px;margin-left:9px;border-radius:50%} .sk-a-pruef .sk-titel{width:93px;height:21px;margin:0 0 32px} .sk-a-spalte{border-top:3px solid var(--rand);padding-top:8px;margin-bottom:20px} .sk-a-pkopf{display:flex;justify-content:space-between;align-items:center;height:28px;margin-bottom:9px} .sk-a-pwort{width:72px;height:16px} .sk-a-pzahl{width:64px;height:24px} .sk-a-regel{display:flex;justify-content:space-between;align-items:center;height:32px} .sk-a-rtext{width:62%} .sk-a-rz{width:2.2rem} .sk-a-erl{display:flex;align-items:center;height:29px;margin-top:6px} .sk-a-erl .sk-zeile{width:90px;height:.7rem} .sk-a-streifen{display:flex;flex-direction:column;align-items:center;gap:1rem;padding-top:.5rem} .sk-a-pfeil{width:2.2rem;height:2.2rem;border-radius:8px} .sk-a-wort{width:.8rem;height:6rem} .sk-a-kreis{width:2.4rem;height:2.4rem;border-radius:50%} .sk-a-psknopf{position:absolute;top:.5rem;right:.5rem;width:2.56rem;height:2.56rem;border-radius:8px} .a-spalten.sk-artikel.ps-zu .a-seite{padding:0} /* --------------------------------------------------------------------- D478-kopf-felder (30.09.2026). Betreiber: "können wir die ansicht des eingeklappten menüs auch für profil, mandant und kalender machen, nur mit balken nach unten? damit das auswahlfeld jeweils auch bündig aufgeht und einen schatten bekommt?" - ab 721 px: die drei Knoepfe rechts sind Felder ueber die volle Hoehe der Kopfleiste (mindestens quadratisch), ohne Kreis und Rand; Maus darauf heller, offen hell hinterlegt mit orangem Balken UNTEN (die Leiste links hat ihn rechts). Die Tafel setzt buendig an der Unterkante der Kopfleiste an, oben eckig, unten rund, mit dunklem Schatten wie die Tafeln der Leiste. Die grauen Raender von vorhin gelten nur noch am Handy. Die Kopfleiste hat rechts keinen Innenabstand mehr - das Profil sitzt am Rand wie die Leiste links. --------------------------------------------------------------------- */ @media (min-width:721px){ header{padding-right:0} header .rechts{align-self:stretch;gap:0;margin-right:0} header .rechts > .nav-menue{display:flex;align-self:stretch;margin:0} header .rechts > .nav-menue > summary.nav-bild, header .rechts > .nav-menue > summary.nav-mandant-jetzt{ display:flex;align-items:center;justify-content:center;gap:.35rem;box-sizing:border-box; align-self:stretch;height:auto;width:auto;min-width:calc(var(--kopf-h) - 1px);padding:0 .9rem; border:0;border-top:3px solid transparent;border-bottom:3px solid transparent;border-radius:0; background:transparent;color:#cfcfcf;font-size:.85rem;font-weight:700;letter-spacing:.02em} header .rechts > .nav-menue > summary.nav-bild:hover, header .rechts > .nav-menue > summary.nav-mandant-jetzt:hover{ background:rgba(255,255,255,.06);color:#fff;border-top-color:transparent;border-bottom-color:transparent} header .rechts > .nav-menue[open] > summary.nav-bild, header .rechts > .nav-menue[open] > summary.nav-mandant-jetzt{ background:rgba(255,255,255,.07);color:var(--akzent);border-top-color:transparent;border-bottom-color:var(--akzent)} header .rechts .nav-kalender{width:1.3rem;height:1.3rem} /* Profil: Personen-Symbol statt Initialen (Betreiber: "ist hier ein icon die bessere wahl?"), Strich wie die Symbole der Leiste */ header .rechts .nav-profil-kurz{display:none} header .rechts .nav-profil-symbol{display:block;width:1.45rem;height:1.45rem;fill:none;stroke:currentColor; stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} /* Punkt "anderer Zeitraum" jetzt am Symbol, nicht an der Ecke des Felds */ header .rechts .nav-zeitraum-jetzt.zr-anders::after{top:.8rem;right:.75rem;border-color:#2b2b2b} header .rechts > .nav-menue > .nav-tafel{top:calc(100% + 1px);right:0;left:auto;border-radius:0 0 12px 12px; box-shadow:0 22px 44px -2px rgba(0,0,0,.8),0 8px 16px rgba(0,0,0,.55)} } /* --------------------------------------------------------------------- D482 (30.09.2026): ruhigere Kennzahlen auf der Übersicht. Betreiber: "dort werden die kennzahlen ganz schön durcheinander und bunt dargestellt. bekommen wir da eine ruhigere linie rein?" Vorher: Zahlen rot/gelb/weiss, dazu je Kachel eine gerahmte bunte Pille direkt an der Zahl, Beschriftung fett und ein- bis dreizeilig - Zahl, Text und Vergleich lagen in jeder Kachel anders; zweite Reihe in einem anderen Raster. Jetzt (nur .kacheln-ruhig, die zwei Reihen der Übersicht): Beschriftung oben, klein und leise, hoechstens zwei Zeilen (Platz fuer zwei ist immer reserviert); darunter die Zahl in Textfarbe, rechts daneben die Veraenderung - weiter farbig (D314), aber ohne Rahmen; unten der Vergleich. Alle Kacheln gleich hoch, beide Reihen im selben Sieben-Spalten-Raster. Fehler/Warnungen/"fertig, aber nicht online" als Farbpunkt vor der Beschriftung statt roter bzw. gelber Zahl. --------------------------------------------------------------------- */ .kacheln-ruhig{gap:.75rem} @media (min-width:1280px){.kacheln-ruhig{grid-template-columns:repeat(var(--kz-spalten,7),minmax(0,1fr))}} /* Spaltenzahl aus der Ansicht (kz_spalten): H7 hat zwei Besucherkacheln */ .kacheln-ruhig .kachel{grid-template-rows:auto auto 1fr;min-height:8.9rem;padding:.85rem 1rem .8rem;box-sizing:border-box} /* beide Reihen gleich hoch */ .kacheln-ruhig .kachel > .kachel-text{grid-row:1;grid-column:1 / -1;margin:0 0 .45rem; font-size:.8rem;font-weight:500;line-height:1.25;color:var(--leise);min-height:2.5em; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;hyphens:manual;-webkit-hyphens:manual} /* Die Zahl steht allein in ihrer Zeile; die Veraenderung unten rechts neben dem Vergleich - bei 1.280 px stiess sie sonst an die Zahl (2.642 +12 %). */ .kacheln-ruhig .kachel > .kachel-zahl{grid-row:2;grid-column:1 / -1;font-size:1.65rem;font-weight:650;color:var(--text);letter-spacing:-.01em} .kacheln-ruhig .kachel-pille{grid-row:3;grid-column:2;align-self:end;margin:.55rem 0 0;border-color:transparent; font-size:.72rem;font-weight:600;padding:.08rem .45rem} .kacheln-ruhig .kachel > .kachel-delta{grid-row:3;grid-column:1;align-self:end;margin-top:.55rem;font-size:.76rem; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} /* einzeilig - bei 1.280 px brach "gestern 5.579" um */ @media (max-width:1439px){.kacheln-ruhig .kachel{padding-left:.8rem;padding-right:.7rem}.kacheln-ruhig .kachel-pille{font-size:.68rem;padding:.06rem .35rem;}.kacheln-ruhig .kachel > .kachel-delta{font-size:.72rem}} /* Ohne Veraenderung darf der Vergleich die volle Breite nehmen und umbrechen. */ .kacheln-ruhig .kachel:not(:has(> .kachel-pille)) > .kachel-delta{grid-column:1 / -1;white-space:normal} .kacheln-ruhig .kachel.kz-rot > .kachel-text::before, .kacheln-ruhig .kachel.kz-gelb > .kachel-text::before{content:"";display:inline-block;width:.5rem;height:.5rem; border-radius:50%;margin-right:.4rem;vertical-align:.05em;background:var(--schlecht)} .kacheln-ruhig .kachel.kz-gelb > .kachel-text::before{background:var(--warn)} /* Einfarbig mit Pfeil und Prozent (Betreiber: "die pillen sollten einfarbig sein, mit einem pfeil und der prozentzahl ... ohne + oder minus") - loest D314 hier ab; eine Farbe fuer alle, die Richtung sagt der Pfeil. */ .kacheln-ruhig .kz-pfeil{background:var(--bg);color:var(--text);border-color:transparent; /* dunkler: "die pillen dürfen einen dunkleren hintergrund haben" */ display:inline-flex;align-items:center;gap:.15rem;font-variant-numeric:tabular-nums; font-size:.7rem;padding:.06rem .38rem;letter-spacing:-.01em} .kacheln-ruhig .kz-pfeil-zeichen{font-weight:700;font-size:.95em;line-height:1} /* Die Zeile reicht auch bei 1.440 px nicht fuer Vergleich UND Pfeil (gemessen: "gestern 5.579" gekuerzt) - die Pille steht bei allen Breiten unter dem Vergleich, rechts unten; der Vergleich bekommt die ganze Breite. */ /* Zeilen: Beschriftung, Zahl, Vergleich direkt darunter, dann der freie Platz, ganz unten die Pille - so steht der Vergleich auch in Kacheln ohne Veraenderung (verkaeufliche Artikel) auf derselben Hoehe. */ .kacheln-ruhig .kachel{grid-template-rows:auto auto auto 1fr} .kacheln-ruhig .kachel > .kachel-delta{grid-row:3;grid-column:1 / -1;align-self:start;margin-top:.45rem} /* Nachtrag (Betreiber: "kann man die hauptzahl in verbindung mit der veränderungspille besser darstellen?"): die Pille steht direkt rechts neben der Zahl auf deren Grundlinie ("5.616 ↑ 0,7 %"), nicht mehr unten rechts. Reicht die Breite nicht (8 Spalten bei 1.280 px), bricht die Zeile um und die Pille steht unter der Zahl - sie ueberdeckt sie nie. */ /* Einheitlich je Kachelbreite (Container-Abfrage): breit genug -> Pille neben der Zahl, sonst in ALLEN Kacheln darunter. Die Kacheln einer Reihe sind gleich breit, die Reihe sieht also immer gleich aus. Eigener Klassenname: "kz-zeile" gibt es schon (justify-content:space-between) - damit stand die Pille weit weg (vorher gemischt: bei 1.440 px standen 3 daneben, 6 darunter). */ .kacheln-ruhig .kachel{container-type:inline-size} .kacheln-ruhig .kachel > .kz-zahlzeile{grid-row:2;grid-column:1 / -1;display:flex;flex-wrap:nowrap;align-items:baseline; column-gap:.45rem;min-width:0} .kacheln-ruhig .kz-zahlzeile > .kachel-zahl,.kacheln-ruhig .kachel > .kachel-zahl{font-size:1.5rem} .kacheln-ruhig .kz-zahlzeile > .kachel-zahl{font-weight:650;color:var(--text);letter-spacing:-.01em;white-space:nowrap;line-height:1.15} .kacheln-ruhig .kz-zahlzeile > .kz-pfeil{margin:0;align-self:auto;position:relative;top:-.15em;font-size:.66rem;padding:.05rem .35rem;white-space:nowrap} @container (max-width:135px){ /* Innenbreite; gemessen: bei 123 px ragten 5 Zeilen ueber den Rand, ab 146 px passt alles */ .kacheln-ruhig .kz-zahlzeile{flex-direction:column;align-items:flex-start;row-gap:.3rem} .kacheln-ruhig .kz-zahlzeile > .kz-pfeil{top:0;align-self:flex-start} /* direkt unter der Zahl, nicht rechtsbuendig */ } /* D484 (30.09.2026): Seiten je Benutzer waehlen - Einladen und Konten. */ .sw{border:0;padding:0;margin:0 0 1.1rem} .sw > legend{margin-bottom:.4rem} .sw-alle{display:block;margin-bottom:.7rem} .sw-bereiche{display:grid;grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr));gap:.9rem 1.4rem; padding:.8rem .9rem;border:1px solid var(--rand);border-radius:8px;background:var(--bg)} .sw-bereich{display:flex;flex-direction:column;gap:.18rem;min-width:0} .sw-kopf{font-weight:600;margin-bottom:.15rem} .sw-seite{display:flex;align-items:baseline;gap:.35rem;font-size:.88rem;padding-left:1.35rem;min-width:0} /* Haken und Text in einer Zeile - "Reduzierungsempfehlung" rutschte darunter */ .sw-kopf{display:flex;align-items:baseline;gap:.35rem} .sw.sw-voll .sw-bereiche{opacity:.45} .sw label{cursor:pointer} .konten{display:grid;gap:.6rem;max-width:62rem;margin-bottom:1rem} .konto-seiten > summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem} .konto-seiten > summary::-webkit-details-marker{display:none} .konto-umfang{margin-left:auto;font-size:.85rem;color:var(--leise);text-align:right} .konto-seiten[open] > summary{margin-bottom:.9rem} /* D486: Rechte, Zahlen und Sperren eines Kontos neben den Seiten */ .konto-rechte{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;margin:0 0 1rem} .konto-rechte fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:.2rem} .konto-rechte legend{margin-bottom:.3rem} .konto-rechte label{cursor:pointer} /* D489: Stoerungen als gelesen ausblenden */ .stoerung-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:1rem} .stoerung-form{margin:0 0 0 auto;flex:none} .stoerung-gelesen{border:1px solid var(--rand);border-radius:6px;background:var(--bg);color:var(--leise); font:inherit;font-size:.78rem;padding:.12rem .55rem;cursor:pointer;white-space:nowrap} .stoerung-gelesen:hover{border-color:var(--akzent);color:var(--akzent)} .meldung.weg{opacity:0;transform:translateX(12px);transition:opacity .2s ease,transform .2s ease} .stoerung-zurueck{margin:.5rem 0 0;font-size:.82rem} .knopf-link{border:0;background:none;padding:0;font:inherit;color:var(--akzent-text);cursor:pointer;text-decoration:underline} /* D489: die Glocke im Kopf - Feld wie Kalender/Mandant/Profil (D478-kopf-felder), Zahl als Punkt oben rechts am Symbol, Tafel breit genug fuer Meldungen. */ .nav-glocke-knopf{position:relative} .nav-glocke-symbol{width:1.35rem;height:1.35rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .glocke-zahl{position:absolute;top:.55rem;right:.45rem;min-width:1.05rem;height:1.05rem;padding:0 .25rem;box-sizing:border-box; border-radius:99px;background:var(--warn);color:#1a1a1a;font-size:.62rem;font-weight:700;line-height:1.05rem;text-align:center} .glocke-zahl.glocke-rot{background:var(--schlecht);color:#fff} .glocke-tafel{width:30rem;max-width:calc(100vw - 1rem);max-height:70vh;overflow-y:auto;padding:.5rem .7rem .7rem} .glocke-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:.1rem 0 .5rem} .glocke-titel{display:block !important;border:0 !important;margin:0 !important;padding:.2rem 0 !important} .glocke-liste .meldung{display:flex;align-items:flex-start;gap:.6rem} .glocke-liste .meldung-rumpf{flex:1 1 auto;min-width:0;font-size:.86rem;display:flex;flex-direction:column;gap:.15rem} .glocke-liste .meldung-quelle{font-size:.72rem} .glocke-leer{margin:.4rem 0} @media (max-width:720px){.glocke-zahl{top:-.15rem;right:-.15rem}} /* D498 · Texte: feste Plaetze fuer die Knoepfe je Feld - vorschlagen | freigeben, zurücknehmen oder bearbeiten | verwerfen oder leer. Vorher wechselten Zahl und Breite der Knoepfe mit dem Stand, und die Zeile sprang. */ .textfeld-knoepfe{display:grid;grid-template-columns:auto 7.4rem 6.6rem;gap:.4rem;align-items:center} .textfeld-knoepfe > :not(:first-child){width:100%} .textfeld-knoepfe > form:not(:first-child) > button, .textfeld-knoepfe > button:not(:first-child){width:100%;justify-content:center} .tf-platz{display:block} /* Sammelknopf "alle freigeben": gruen wie "freigeben" am Feld */ .knopf.knopf-gut-voll:not(:disabled){border-color:var(--gut);color:var(--gut)} .knopf.knopf-gut-voll:not(:disabled):hover{background:var(--gut-bg)} /* ===== D499 · Reiter Texte als Liste ===== Ein Feld je Zeile statt einer Karte mit zwei Spalten; volle Spaltenbreite (D500: "die begrenzung auf die maximal breite ... sieht auf meinem grossen monitor ein bisschen verloren aus" - vorher hoechstens 62rem); Leiste mit Sprache, Lauf, Fortschritt und Sammelknoepfen klebt unter der Reiterzeile. */ .tx-leiste{position:sticky;top:var(--reiter-h,3.4rem);z-index:8;background:var(--bg); padding:.75rem 0 .6rem} .tx-leiste .auftrag{margin:0} .auftrag-texte .auftrag-titel .sprachen{margin:0 .4rem 0 0} .auftrag-texte .auftrag-titel .sprache{height:1.8rem} .auftrag-texte .auftrag-lage{font-size:.82rem} .auftrag-texte .auftrag-meldung{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.8rem;margin:.4rem 0 0} .tx-fort{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--leise);margin-right:.2rem} .tx-fort-bahn{width:4.5rem;height:5px;border-radius:3px;background:var(--rand);overflow:hidden} .tx-fort-bahn span{display:block;height:100%;background:var(--gut)} .texte.tx-liste{border:1px solid var(--rand);border-radius:12px;overflow:visible;background:var(--flaeche)} .texte.tx-liste{display:block;gap:0} .textfeld.tx-zeile{display:grid;grid-template-columns:10.5rem minmax(0,1fr) auto;gap:.35rem 1rem; padding:.7rem .9rem;background:none;border:0;border-top:1px solid var(--rand);border-radius:0;align-items:start;position:relative} .textfeld.tx-zeile:first-child{border-top:0} .textfeld.tx-zeile.tx-frei{box-shadow:inset 3px 0 0 var(--gut)} .tx-kopf{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;padding-top:.4rem;min-width:0} .tx-name{font-weight:700;line-height:1.25} .tx-marken{display:flex;flex-wrap:wrap;gap:.25rem} .tx-marke{font-size:.72rem;padding:.02rem .45rem;border-radius:99px;border:1px solid var(--rand);color:var(--leise)} .tx-marke.warn{border-color:#b45309;color:#fbbf24} .tx-zahl{font-size:.75rem;opacity:.6} .tx-zahl.zuviel{color:#f87171;opacity:1;font-weight:600} .tx-gesichert{font-size:.72rem;color:var(--gut)} .tx-feld{min-width:0} .tx-feld form{margin:0} .tx-feld textarea.as-t-feld{width:100%;resize:vertical;min-height:2.3rem;field-sizing:content;max-height:28rem} .tx-ist{padding-top:.4rem;color:var(--leise);max-height:6.5rem;overflow:hidden; -webkit-mask-image:linear-gradient(#000 70%,transparent)} .tx-leise{opacity:.7;font-size:.82rem} .tx-hand-knoepfe{display:flex;gap:.4rem;justify-content:flex-end;margin-top:.4rem} .tx-bisher{font-size:.84rem;margin-top:.3rem} .tx-bisher summary{cursor:pointer;color:var(--leise);width:max-content} .tx-diff{margin-top:.35rem;line-height:1.6;padding:.5rem .7rem;border-radius:8px;background:var(--bg)} .tx-diff del{color:#f87171} .tx-diff ins{color:var(--gut);text-decoration:none;background:var(--gut-bg);border-radius:3px;padding:0 .15rem} .tx-aktion{display:flex;align-items:center;gap:.35rem;padding-top:.35rem} .tx-klein{font-size:.8rem;padding:.25rem .65rem} .tx-schalter{background:none;border:0;padding:0;cursor:pointer;display:inline-flex} .tx-schalter.an .as-bahn{background:var(--gut)} .tx-schalter.an .as-knauf{transform:translateX(1.05rem)} .tx-schalter:focus-visible .as-bahn{outline:2px solid var(--akzent);outline-offset:2px} .tx-schalter.laeuft{opacity:.6} .tx-mehr{position:relative} .tx-mehr > summary{list-style:none;cursor:pointer;padding:.05rem .45rem;border-radius:6px;font-size:1.15rem;line-height:1.3; color:var(--leise);border:1px solid transparent} .tx-mehr > summary::-webkit-details-marker{display:none} .tx-mehr > summary:hover,.tx-mehr[open] > summary{border-color:var(--rand);color:var(--text)} .tx-menue{position:absolute;right:0;top:calc(100% + .3rem);z-index:9;width:22rem;max-width:80vw;padding:.4rem; background:var(--flaeche);border:1px solid var(--rand);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.45)} .tx-menue form{margin:0} .tx-menue-knopf{display:block;width:100%;text-align:left;background:none;border:0;color:inherit;padding:.45rem .6rem; border-radius:6px;cursor:pointer;font:inherit} .tx-menue-knopf:hover:not(:disabled){background:var(--bg)} .tx-menue-knopf.schlecht{color:#f87171} .tx-menue-knopf:disabled{opacity:.45;cursor:default} .tx-menue-info{border-top:1px solid var(--rand);margin-top:.3rem;padding:.4rem .6rem 0;font-size:.78rem;color:var(--leise)} .tx-menue-info p{margin:0 0 .4rem} .tx-regel{white-space:pre-wrap;max-height:14rem;overflow:auto} @media (max-width:760px){ /* auf dem Handy nicht kleben - die Leiste naehme ein Drittel des Bildschirms */ .tx-leiste{position:static} .textfeld.tx-zeile{grid-template-columns:minmax(0,1fr) auto} .tx-kopf{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;padding-top:0} } /* D501 · Uebernehmen: Marke nach dem Schreiben, Schalter waehrend des Schreibens */ .tx-marke.gut{border-color:var(--gut);color:var(--gut)} .tx-schalter.laeuft .as-bahn{background:var(--gut);opacity:.55} .tx-schalter.laeuft .as-knauf{transform:translateX(1.05rem)} /* D512 · gesperrte Sammelknoepfe sichtbar blass - auch "alle uebernehmen" (knopf-gut-voll) und die KI-Knoepfe im Texte-Kasten; der laufende behaelt seinen Kreisel in voller Deckkraft (.knopf.laeuft). */ .auftrag-texte .knopf:disabled:not(.laeuft),.auftrag-texte .knopf-ki:disabled:not(.laeuft){opacity:.4;cursor:not-allowed} .knopf.knopf-gut-voll.laeuft{border-color:var(--gut);color:var(--gut)} /* ===== D514 · Pruefstand: der Moment, in dem alles passt ===== Rand fuellt sich im Uhrzeigersinn ab oben, dann der Haken, ein Puls und (im Skript) Konfetti oben am Kreis. Nur beim Wechsel zu gruen. */ .pk-kreis{position:relative} .pk-k-gut.pk-feier{border-color:var(--rand)} .pk-kreis svg.pk-ring{position:absolute;inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px); transform:rotate(-90deg);pointer-events:none;overflow:visible} .pk-ring circle{fill:none;stroke:var(--gut);stroke-width:5;stroke-linecap:round; stroke-dasharray:100;stroke-dashoffset:100;animation:pk-ring-fuellen .9s cubic-bezier(.65,0,.35,1) forwards} @keyframes pk-ring-fuellen{to{stroke-dashoffset:0}} .pk-k-gut.pk-feier svg:not(.pk-ring) path{stroke-dasharray:24;stroke-dashoffset:24; animation:pk-haken .35s ease-out .7s forwards} @keyframes pk-haken{to{stroke-dashoffset:0}} .pk-k-gut.pk-feier-fertig{border-color:var(--gut);animation:pk-puls .7s ease-out} @keyframes pk-puls{0%{box-shadow:0 0 0 0 rgba(74,222,128,.55);transform:scale(1)} 35%{transform:scale(1.07)}100%{box-shadow:0 0 0 18px rgba(74,222,128,0);transform:scale(1)}} .pk-konfetti{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden} .pk-konfetti i{position:absolute;width:7px;height:11px;border-radius:2px;will-change:transform,opacity} @media (prefers-reduced-motion:reduce){ .pk-ring circle,.pk-k-gut.pk-feier svg:not(.pk-ring) path{animation:none;stroke-dashoffset:0} } /* ===== D526 · Scrollbalken ueberall minimal (01.10.2026) ===== Betreiber: "die scrollbars duerfen generell und ueberall immer minimal sein". Vorher nur die Hauptleiste (D-nav-breit) und die Rollspalten der Artikelseite (.a-rollfeld) schmal, sonst die breiten Standardbalken des Browsers - Seite, Tabellen, Textfelder, Fenster. Jetzt fuer alles: 6 px, Spur durchsichtig, Griff in der Farbe der Hauptleiste. Wer den Balken bewusst ausblendet (scrollbar-width:none, z. B. .reiter), behaelt das - die Regeln dort sind spezifischer als "*". */ *{scrollbar-width:thin;scrollbar-color:#4f4f4f transparent} ::-webkit-scrollbar{width:6px;height:6px} ::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent} ::-webkit-scrollbar-thumb{background:#4f4f4f;border-radius:3px} ::-webkit-scrollbar-thumb:hover{background:#6a6a6a} /* D527 · "weiter zum naechsten Artikel" im Texte-Kasten - ganz rechts */ .auftrag-texte .tx-weiter{order:99;margin-left:auto;text-decoration:none} /* D530 · Kosten erklaert (Fenster je Marktplatz) */ button.ue-rent-markt{font:inherit;color:inherit;text-align:inherit;cursor:pointer} .rk-titel{margin:.2rem 0 .45rem;font-weight:700} .rk-titel + .rk-tab{margin-bottom:1.1rem} .rk-tab{width:100%;border-collapse:collapse;font-size:.88rem} .rk-tab td{padding:.28rem .4rem;border-bottom:1px solid var(--rand);vertical-align:top} .rk-tab td.zahl-z{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums} .rk-tab tr.rk-zwischen td{font-weight:600;border-top:1px solid var(--leise)} .rk-tab tr.rk-summe td{font-weight:800;border-top:2px solid var(--leise);border-bottom:0} .rk-fuss{margin:.6rem 0 0} .rk-tab td.marke-txt{white-space:normal;font-size:.8rem} /* D536: Namen duerfen umbrechen, Satz und Betrag nicht */ .rk-tab td:first-child{white-space:normal} .rk-tab td.marke-txt{white-space:nowrap} /* D531: Tabellen im Kostenfenster buendig mit der Ueberschrift - kein Innenabstand aussen */ .rk-tab td:first-child{padding-left:0} .rk-tab td:last-child{padding-right:0} /* D532: leichte Trennlinie zwischen "Gewinn je Stueck" und "Ergebnis der letzten 12 Monate" */ .rk-tab + .rk-titel{border-top:1px solid var(--rand);padding-top:1rem;margin-top:.2rem} /* D537 · Felder ohne Vorschlag: Editor immer offen, Knoepfe erst nach einer Aenderung */ .textfeld-hand .tx-hand-knoepfe{display:none} .textfeld-hand[data-geaendert] .tx-hand-knoepfe{display:flex} /* ===== D538 · Reiter Texte, rechte Spalte aufgeraeumt ===== Betreiber: "da der schieberegler jetzt ja direkt schreibt, muss es kein schieberegler sein. der button vorschlagen kann auch einfach nur das icon sein". Zwei gleich grosse runde Symbolknoepfe: Haken (uebernehmen) und KI-Stern (vorschlagen); daneben das Menue. */ .tx-ikon{width:2.1rem;height:2.1rem;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;gap:0;flex:none} .tx-ikon.knopf-ki::before{font-size:1rem} .tx-uebernehmen{background:none;border:1px solid var(--gut);color:var(--gut);cursor:pointer} .tx-uebernehmen svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} .tx-uebernehmen:hover:enabled{background:var(--gut-bg)} .tx-uebernehmen.an{background:var(--gut);color:#0f2a18} .tx-ikon.laeuft,.tx-ikon:disabled{opacity:.5;cursor:progress} .tx-aktion{gap:.45rem} /* D539 (01.10.2026, Betreiber: "rechts koennen es zwei quadratische button mit radius sein und einem dunkleren hintergrund. gerne an den buttons im subheader orientieren"). Wie Zurueck-Pfeil und "neu holen" der Unterleiste: Grund --bg (dunkler als die Zeile), Rand --rand, Rundung 8px, Rand bei Hover in Akzentfarbe. Das Zeichen behaelt seine Farbe (Haken gruen, Stern orange), damit man die beiden ohne Lesen unterscheidet; uebernommen = Haken gruen gefuellt wie bisher. */ .tx-ikon,.tx-ikon.knopf-ki,.tx-uebernehmen{border-radius:8px;background:var(--bg);border:1px solid var(--rand)} .tx-ikon.knopf-ki{color:var(--akzent)} .tx-ikon.knopf-ki:hover:enabled{background:var(--bg);border-color:var(--akzent)} .tx-uebernehmen:hover:enabled{background:var(--bg);border-color:var(--gut)} .tx-uebernehmen.an,.tx-uebernehmen.an:hover:enabled{background:var(--gut);border-color:var(--gut);color:#0f2a18} /* D540 (01.10.2026, Betreiber: "gerne auch die 3 punkte mit dem gleichen style. die koennen auch uebereinander liegen"). Das Menue "..." als dritter quadratischer Knopf neben Haken und Stern; die Punkte als SVG senkrecht (das Schriftzeichen sass je nach Schrift nicht mittig). Offen = Rand hell. */ .tx-mehr > summary.tx-ikon{padding:0;font-size:0;line-height:0;color:var(--leise); border:1px solid var(--rand);border-radius:8px;background:var(--bg)} .tx-mehr > summary.tx-ikon svg{width:1rem;height:1rem;fill:currentColor} .tx-mehr > summary.tx-ikon:hover,.tx-mehr[open] > summary.tx-ikon{border-color:var(--text);color:var(--text)} /* D541 (01.10.2026, Betreiber: "die textfelder sollten immer die gleiche laenge haben, auch wenn es kein button gibt zum vorschlagen"). Jede Zeile ist ein eigenes Raster mit "auto" rechts - ohne Haken/Stern wurde die Spalte schmaler und das Feld laenger. Jetzt hat die Spalte immer die Breite von zwei Knoepfen (2 x 2,1rem + Abstand .45rem), das Menue steht rechts buendig, der Knopf links davon bleibt an seinem Platz. */ .textfeld.tx-zeile .tx-aktion{min-width:4.65rem;justify-content:flex-end;box-sizing:border-box} /* D542 (01.10.2026, Betreiber: "koennen wir die pillen mit de, fr, en nochmal besser darstellen?"). Statt drei einzelner Pillen, von denen die gewaehlte orange gefuellt war (gleiche Farbe wie die Aktionsknoepfe darunter - sah aus wie ein vierter Knopf), ein Umschalter: eine dunkle Leiste (--bg, Rand, 8px wie die Knoepfe seit D539), die gewaehlte Sprache hell abgesetzt. Unten in jedem Feld ein duenner Balken = Anteil der gepflegten Felder (orange, gruen wenn vollstaendig); die Zahl 6/7 bleibt daneben. Offene Vorschlaege weiter als gelbe Zahl. */ .auftrag-texte .auftrag-titel .sprachen,.sprachen{display:inline-flex;gap:2px;padding:3px; background:var(--bg);border:1px solid var(--rand);border-radius:10px;flex-wrap:nowrap} .auftrag-texte .auftrag-titel .sprache,.sprache{position:relative;height:1.85rem;padding:0 .65rem .1rem; border:0;border-radius:7px;background:none;color:var(--leise);gap:.45rem} .sprache:hover{color:var(--text);background:rgba(255,255,255,.05);border:0} .sprache.aktiv{background:var(--flaeche);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.5),inset 0 0 0 1px var(--rand)} .sprache.aktiv .reiter-zahl{background:var(--flaeche)} .sprache::after{content:"";position:absolute;left:.65rem;right:.65rem;bottom:3px;height:2px;border-radius:2px; background:linear-gradient(to right,var(--akzent) var(--anteil,0%),rgba(255,255,255,.08) var(--anteil,0%))} .sprache.voll::after{background:var(--gut)} .sprache-stand{font-variant-numeric:tabular-nums} .sprachen .sprache.aktiv,.auftrag-texte .auftrag-titel .sprachen .sprache.aktiv{color:var(--text)} .sprachen .sprache.aktiv .sprache-stand{opacity:.75} .sprachen .sprache .reiter-zahl{font-size:.72rem;line-height:1.25;padding:0 .35rem;border-radius:6px} /* D543 (01.10.2026, Betreiber: "schon besser, aber immer noch etwas detailiert. koennen wir es etwas moderner darstellen?"). Schlichter: nur noch das Kuerzel und davor ein Punkt fuer den Stand - gruen = alle Felder gepflegt, orange = teilweise, leerer Ring = noch nichts. Zahl 6/7 und der Balken (D542) entfallen sichtbar; die genauen Zahlen stehen weiter im Hinweis beim Ueberfahren (title). Die gelbe Zahl offener Vorschlaege bleibt, als kleiner runder Zaehler. */ .sprachen .sprache-stand{display:none} .sprachen .sprache::after{content:none} .sprachen .sprache{gap:.4rem;padding:0 .8rem;font-size:.85rem;letter-spacing:.04em} .sprachen .sprache::before{content:"";width:.42rem;height:.42rem;border-radius:50%;flex:none; background:var(--akzent)} .sprachen .sprache.voll::before{background:var(--gut)} .sprachen .sprache[style*="--anteil:0%"]::before{background:none;box-shadow:inset 0 0 0 1.5px var(--leise)} .sprachen .sprache .reiter-zahl{min-width:1.1rem;height:1.1rem;padding:0 .3rem;box-sizing:border-box; border-radius:99px;border:0;background:var(--warn);color:#1a1a1a;font-size:.68rem;font-weight:700; line-height:1.1rem;text-align:center} .sprachen .sprache.aktiv .reiter-zahl{background:var(--warn)} /* D544 (01.10.2026, Betreiber: "die eingerahmte auswahl ist noch merkwuerdig"). Die gewaehlte Sprache ohne Rahmenlinie und Schatten (D542), nur eine hellere Flaeche - wie ein Segment-Umschalter. */ .sprachen .sprache.aktiv{background:rgba(255,255,255,.1);box-shadow:none} .sprachen .sprache:not(.aktiv):hover{background:rgba(255,255,255,.04)} /* D545 (01.10.2026, Betreiber: "koennen wir den radius der auswahl rausnehmen?"). Die Flaeche der gewaehlten Sprache (und beim Ueberfahren) eckig. */ .sprachen .sprache,.auftrag-texte .auftrag-titel .sprachen .sprache{border-radius:0} /* D546 (01.10.2026, Betreiber: "und die linie oben und unten darf etwas zierlicher sein"). Der dunkle Streifen ueber und unter der Auswahl ist der Innenabstand der Leiste - oben/unten 1px statt 3px. */ .sprachen,.auftrag-texte .auftrag-titel .sprachen{padding:1px 3px} /* D549 (01.10.2026, Betreiber: "bei de, fr und en kann der radius auch von der auswahl vollstaendig gefuellt werden, wenn z.b. de oder en ausgewaehlt ist"). Kein Innenabstand mehr, die Leiste schneidet ab (overflow:hidden): die eckige Auswahl (D545) reicht bis an den Rand und nimmt an den Enden die Rundung der Leiste an. Ohne Abstand zwischen den Feldern. */ .sprachen,.auftrag-texte .auftrag-titel .sprachen{padding:0;gap:0;overflow:hidden} /* ===== D558 · Knopfleiste im Reiter Texte stimmig (02.10.2026) ===== Betreiber: "bei den franzoesischen texten haben wir zeitweise 4 button. schau dir mal den abstand zwischen den buttons an und den rotierenden kreis, dass das alles stimmig ist". Gemessen an H7 2056 (FR): - "uebernehmen" und "uebernehmen und freigeben (FR)" stehen im SELBEN Formular: dazwischen 4,8 px (Leerzeichen), sonst 8 px (gap) -> das Formular selbst wird Flex mit demselben Abstand; - Knoepfe mit Zahl 35,8 px hoch, ohne 33,8 px -> eine feste Hoehe fuer alle, die Zahl drueckt nicht mehr; - der Kreisel war auf den gruenen Knoepfen orange und kam VOR das Wort - der Knopf wurde ~60 px breiter, die Zeile sprang. Jetzt nimmt der Kreisel den Platz der Zahl ein, in der Farbe des Knopfes; die Zahl der gruenen Knoepfe ist gruen; - "neu vorschlagen" hatte keinen Kreisel (Stern blieb) - jetzt dreht er an der Stelle des Sterns. */ .auftrag-knoepfe form{display:flex;align-items:center;gap:.5rem} .auftrag-texte .auftrag-knoepfe .knopf,.auftrag-texte .auftrag-knoepfe .knopf-ki{ height:2.15rem;box-sizing:border-box;display:inline-flex;align-items:center;padding-top:0;padding-bottom:0} .auftrag-texte .auftrag-knoepfe .gruppen-zahl{line-height:1.25;padding-top:0;padding-bottom:0} .auftrag-knoepfe .knopf.knopf-gut-voll .gruppen-zahl{background:var(--gut-bg);border-color:var(--gut);color:var(--gut)} /* Kreisel statt Zahl, in Knopffarbe */ .auftrag-texte .auftrag-knoepfe .knopf.laeuft:has(.gruppen-zahl)::before{display:none} .auftrag-texte .auftrag-knoepfe .knopf.laeuft .gruppen-zahl{display:none} .auftrag-texte .auftrag-knoepfe .knopf.laeuft:has(.gruppen-zahl)::after{content:"";display:inline-block;width:.85rem;height:.85rem; margin-left:.6rem;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;opacity:.9; animation:zf-drehen .7s linear infinite} .auftrag-texte .auftrag-knoepfe .knopf.laeuft::before{border-color:currentColor;border-top-color:transparent} /* Stern wird Kreisel */ .auftrag-texte .auftrag-knoepfe .knopf-ki.laeuft{opacity:1!important;cursor:progress} .auftrag-texte .auftrag-knoepfe .knopf-ki.laeuft::before{content:"";width:.62rem;height:.62rem;border-radius:50%; border:2px solid currentColor;border-top-color:transparent;animation:zf-drehen .7s linear infinite} @media (prefers-reduced-motion:reduce){.auftrag-texte .auftrag-knoepfe .knopf.laeuft::after, .auftrag-texte .auftrag-knoepfe .knopf-ki.laeuft::before{animation:none}} /* gesperrt bleibt gruen gruen (nur blass), nicht orange */ .auftrag-texte .knopf.knopf-gut-voll:disabled{border-color:var(--gut);color:var(--gut)} /* D559 (02.10.2026, Betreiber: "der button naechster artikel sollte einen icon haben vielleicht svg?"). Statt des Schriftzeichens ein Pfeil als Linie in Textfarbe, wie die uebrigen Symbole; er rueckt beim Ueberfahren ein Stueck nach rechts. */ .tx-weiter{gap:.45rem} .tx-weiter-pfeil{width:1rem;height:1rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round;transition:transform .15s ease} .tx-weiter:hover .tx-weiter-pfeil{transform:translateX(2px)} @media (prefers-reduced-motion:reduce){.tx-weiter-pfeil{transition:none}} /* D563 · Merchant Center: Hinweis-Pille und die leisere Kachel der lokalen Anzeigen ("nicht prio 1, sollten aber auch nicht abgeschaltet werden"). */ .p-info{background:color-mix(in srgb, var(--info) 14%, transparent);color:var(--info)} .pille.p-info{border-color:color-mix(in srgb, var(--info) 45%, transparent)} .kachel.mc-leise:not(.kachel-an){opacity:.62} .kachel.mc-leise:hover{opacity:1} .mc-zwischen{font-size:1.05rem;margin:1.6rem 0 .7rem} .mc-erklaerung{padding:1rem 1.2rem;margin-bottom:.8rem} .mc-erklaerung p{margin:0 0 .8rem;line-height:1.5} /* D631: Reiter zwischen Seiten (Google Ads: Uebersicht | Ertrag) - aussehen wie .reiter-knopf, aber echte Links, damit das Reiter-Skript sie nicht anfasst. */ .seiten-reiter{margin-bottom:.75rem} .seiten-knopf{flex:none;white-space:nowrap;padding:.6rem .9rem;border-bottom:2px solid transparent; color:var(--leise);font-weight:550;text-decoration:none} .seiten-knopf:hover{color:var(--text)} .seiten-knopf.aktiv{color:var(--akzent);border-bottom-color:var(--akzent)} /* D635: Loesung mit mehreren Zeilen (Grundfarbe je Farbe) - Name links, Auswahl und Knopf rechts */ .pk-zeilen{display:flex;flex-direction:column;gap:.35rem} .pk-zeile{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap} .pk-zeile-name{min-width:12rem;font-weight:550} /* D639 (04.10.2026): eingefahrene Leiste mit dem Namen klein unter dem Symbol. Betreiber: "ich möchte in der desktop ansicht unter die menüpunkte in klein den namen haben, in dem zugeklappten menü". Der längste Name ("Einstellungen", ~70 px bei .6rem) passt nicht in 3,6 rem, deshalb die Leiste 4,75 rem breit; die Zeilen bleiben quadratisch (Höhe = Breite, D478), Symbol und Name stehen untereinander mittig. Ausgefahren unverändert. */ @media (min-width:721px){ :root{--leiste:4.75rem} html:not(.nav-breit) #hauptnav > a,html:not(.nav-breit) #hauptnav .nav-knopf{flex-direction:column;gap:.32rem} html:not(.nav-breit) #hauptnav .nav-wort{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis; font-size:.6rem;line-height:1.1;text-align:center} } /* D640 (04.10.2026): die Tafel der eingefahrenen Leiste ohne linken Rand. Betreiber: "die menüunterpunkte beim mousehover haben links noch einen border. das verdoppelt den border und wirkt kräftiger". Die Tafel setzt bündig an der Leiste an, deren rechter Rand (1 px) ist damit der einzige Strich. */ @media (min-width:721px){ html:not(.nav-breit) #hauptnav .nav-tafel{border-left:0} } /* D641 (04.10.2026): Tafel der eingefahrenen Leiste ohne Einrückung, Hover vollflächig. Betreiber: "in der gleichen ansicht werden die unterkategorien eingerückt dargestellt. das ist nicht nötig. und der mousehover auf eine unterkategorie darf füllend ohne rand und radius sein". Die Tafel ohne seitlichen Innenabstand, Titel, Gruppen und Punkte in einer Flucht (.9rem), der Hover läuft von Kante zu Kante, eckig. */ @media (min-width:721px){ html:not(.nav-breit) #hauptnav .nav-tafel{padding-left:0;padding-right:0} html:not(.nav-breit) #hauptnav .nav-tafel a{padding:.5rem .9rem;border-radius:0} html:not(.nav-breit) #hauptnav .nav-tafel-titel{padding-left:.9rem;padding-right:.9rem} html:not(.nav-breit) #hauptnav .nav-gruppe{padding-left:.9rem;padding-right:.9rem} html:not(.nav-breit) #hauptnav .nav-trenner{margin-left:0;margin-right:0} } /* D642 (04.10.2026): offenes Untermenü hängt sichtbar an seinem Menüpunkt. Betreiber: "wenn das untermenü auf ist, kann man den bezug zum menüpunkt nicht sehen. das würde ich gerne umsetzen und dann im jeweiligen untermenü den namen des menüs entfernen". Der offene Punkt bekommt die Fläche der Tafel, die Tafel rückt 1 px über den Rand der Leiste - Punkt und Tafel sind eine Form. Der orange Balken rechts entfällt solange (er stünde dazwischen); der aktive Bereich bleibt an der orangen Schrift erkennbar. Der Tafeltitel entfällt - der Name steht seit D639 unter dem Symbol. */ @media (min-width:721px){ html:not(.nav-breit) #hauptnav .nav-menue[open] > .nav-knopf{background:var(--flaeche);color:var(--text); border-right-color:transparent} html:not(.nav-breit) #hauptnav .nav-menue[open] > .nav-knopf.aktiv{color:var(--akzent)} html:not(.nav-breit) #hauptnav .nav-tafel{left:calc(100% + .35rem)} html:not(.nav-breit) #hauptnav .nav-tafel-titel{display:none} } /* Shop als Menue in der Unterleiste der Artikelseite (D677, 06.10.2026): Zeichenknopf wie "Sammeln", die Tafel rechtsbuendig darunter; je Shop eine Zeile - oeffnen und kopieren. */ .subnav .shop-menue{position:relative;display:flex;align-self:stretch;flex:none} .subnav .shop-menue > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.25rem; height:100%;margin:0;padding:0 .55rem;color:var(--leise)} .subnav .shop-menue > summary::-webkit-details-marker{display:none} .subnav .shop-menue > summary:hover,.subnav .shop-menue[open] > summary{border-color:var(--akzent);color:var(--akzent)} .shop-zeichen{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round} .subnav .shop-menue > .nav-tafel{left:auto;right:0;top:calc(100% + .35rem)} .shop-tafel{min-width:16rem;padding:.4rem} .shop-tafel .nav-wer{margin:.2rem .7rem .4rem} .shop-zeile{display:flex;align-items:stretch;gap:.25rem} .shop-zeile + .shop-zeile{margin-top:.15rem} /* D1277: Strich zwischen Shops und Marktplaetzen */ .shop-zeile.markt-erste{margin-top:.35rem;padding-top:.35rem;border-top:1px solid var(--rand)} .shop-tafel a.shop-auf{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem;padding:.5rem .7rem; border-radius:8px;text-decoration:none;color:var(--text)} .shop-tafel a.shop-auf:hover{background:var(--kopf);color:var(--akzent-text)} .shop-name{font-size:.9rem;font-weight:600} .shop-host{font-size:.75rem;color:var(--leise);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .shop-kopie{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:.3rem;min-width:2.4rem; padding:0 .55rem;border:0;border-radius:8px;background:transparent;color:var(--leise);cursor:pointer;font:inherit} .shop-kopie:hover{background:var(--kopf);color:var(--akzent)} .shop-kopie [data-kopieren-text]:empty{display:none} .shop-kopie [data-kopieren-text]{font-size:.78rem;font-weight:500} .shop-kopie.kopiert{color:var(--akzent)} /* Zeitraum neben dem Kalendersymbol (D678, 06.10.2026). Betreiber: "beim kalander icon sollte, wenn es der platz erlaubt, auch der aktuelle zeitraum angezeigt werden". Erst ab 1200 px - darunter wird die Kopfleiste mit Hauptmenue, Mandant, Glocke und Profil zu eng; dort bleibt das Symbol allein. Der Punkt "nicht die Voreinstellung" sitzt dann am Symbol statt an der rechten Ecke des (breiteren) Felds. */ .zr-text{display:none} @media (min-width:1200px){ header .rechts .nav-zeitraum-jetzt .zr-text{display:inline;font-weight:600;font-size:.82rem;letter-spacing:0; white-space:nowrap;max-width:14rem;overflow:hidden;text-overflow:ellipsis} /* Betreiber: "der abstand zwischen icon und angabe kann etwas größer sein" - "kann noch deutlich größer werden". Gleiche Spezifitaet wie die Kopfknopf-Regel (summary.nav-bild, gap .35rem) - die schlug die erste Fassung, der Abstand aenderte sich nie. */ header .rechts > .nav-menue > summary.nav-bild.nav-zeitraum-jetzt{gap:.8rem} /* "kann jetzt auch wieder ein bisschen kleiner sein" */ header .rechts .nav-zeitraum-jetzt.zr-anders::after{right:auto;left:calc(.9rem + 1.3rem - .4rem);top:.75rem} } /* Cross-Selling: Artikelsuche (D680, 06.10.2026) - Trefferliste unter dem Suchfeld. */ .cs-suche{position:relative;flex:1 1 100%} /* Das Suchfeld (D680, Betreiber: "kannst du noch das css für die eingabe verbessern?"): type=search fiel durch alle Regeln fuer Text- und Zahlenfelder und stand in der Browser-Voreinstellung da. Jetzt dieselbe Form wie das Nummernfeld daneben - Hoehe 2.1rem, Rahmen, 8px, .9rem, oranger Rahmen bei Fokus -, die Lupe links im Feld, das Loeschkreuz des Browsers bleibt. */ .cs-eingabe{position:relative;display:block} .cs-lupe{position:absolute;left:.6rem;top:50%;width:.95rem;height:.95rem;transform:translateY(-50%); fill:none;stroke:var(--leise);stroke-width:1.6;stroke-linecap:round;pointer-events:none} .cs-suche input[type=search]{width:100%;max-width:34rem;box-sizing:border-box;min-height:2.1rem; padding:.4rem .6rem .4rem 2rem;border:1px solid var(--rand);border-radius:8px;background:var(--bg); color:var(--text);font:inherit;font-size:.9rem;-webkit-appearance:none;appearance:none} .cs-suche input[type=search]::placeholder{color:var(--leise);opacity:.8} .cs-suche input[type=search]:hover{border-color:var(--akzent)} .cs-suche input[type=search]:focus{border-color:var(--akzent);outline:none;box-shadow:0 0 0 3px var(--akzent-bg)} .cs-eingabe:focus-within .cs-lupe{stroke:var(--akzent)} .cs-suche input[type=search]::-webkit-search-cancel-button{cursor:pointer} .cs-treffer{max-width:34rem} .cs-treffer{list-style:none;margin:.3rem 0 0;padding:.3rem;border:1px solid var(--rand);border-radius:10px; background:var(--flaeche);max-height:22rem;overflow-y:auto;box-shadow:0 8px 20px rgba(0,0,0,.12)} .cs-treffer li + li{margin-top:.1rem} .cs-wahl{display:flex;align-items:center;gap:.6rem;width:100%;padding:.35rem .5rem;border:0;border-radius:8px; background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer} .cs-wahl:hover,.cs-wahl:focus-visible{background:var(--kopf)} .cs-wahl img,.cs-ohne-bild{width:36px;height:36px;flex:none;border-radius:6px;object-fit:cover;border:1px solid var(--rand);background:var(--kopf)} .cs-text{display:flex;flex-direction:column;min-width:0} .cs-name{font-size:.88rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cs-zeile{font-size:.76rem;color:var(--leise)} .cs-inaktiv .cs-name{color:var(--leise);font-weight:500} .cs-steht .cs-zeile{color:var(--akzent-text)} .cs-leer{padding:.4rem .5rem;font-size:.82rem;color:var(--leise)} /* Trefferzeile als EIN Ganzes (D680, Betreiber: "die auswahl in dem dropdown sollte nur im ganzen, ohne link und klick anzeige passieren"): Bild und Texte nehmen keine eigenen Klicks an, nichts wird markiert oder gezogen, keine Linkfarbe/Unterstreichung, kein Fokusrahmen nach dem Klick und kein Eindrueck- Effekt - hervorgehoben wird nur beim Ueberfahren bzw. mit der Tastatur. */ .cs-treffer .cs-wahl{-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none; text-decoration:none;color:var(--text);outline:none;box-shadow:none;transform:none} .cs-treffer .cs-wahl *{pointer-events:none;text-decoration:none} .cs-treffer .cs-wahl img{-webkit-user-drag:none;user-drag:none} .cs-treffer .cs-wahl:focus{outline:none;box-shadow:none} .cs-treffer .cs-wahl:focus:not(:focus-visible){background:transparent} .cs-treffer .cs-wahl:hover{background:var(--kopf)} .cs-treffer .cs-wahl:focus-visible{background:var(--kopf)} .cs-treffer .cs-wahl:active{transform:none;background:var(--kopf)} .cs-treffer .cs-wahl .cs-name{color:var(--text)} .cs-treffer .cs-wahl.cs-inaktiv .cs-name{color:var(--leise)} /* Trefferliste schwebt und klappt nach oben, wenn unten der Platz fehlt (D680) - Hoehe setzt control.js (platzieren) nach dem freien Platz im sichtbaren Bereich. */ .cs-suche .cs-treffer{position:absolute;left:0;right:0;top:100%;z-index:30;margin-top:.3rem} .cs-suche .cs-treffer.nach-oben{top:auto;margin-top:0;box-shadow:0 -8px 20px rgba(0,0,0,.12)} /* Kein waagerechtes Rollen (D680, Betreiber: "jetzt ist sie horizontal zu scrollen. das geht gar nicht"): der Textblock durfte nicht schrumpfen (min-width:auto eines Flex-Kinds), lange Namen machten die Zeile breiter als die Liste. Jetzt schrumpft er, Namen enden mit "…", die Liste rollt nur senkrecht und ist nie breiter als das Suchfeld. */ .cs-suche{min-width:0;max-width:34rem} .cs-suche .cs-treffer{left:0;right:0;width:auto;max-width:none;box-sizing:border-box;overflow-x:hidden;overflow-y:auto} .cs-treffer li{min-width:0} .cs-treffer .cs-wahl{box-sizing:border-box;width:100%;min-width:0;overflow:hidden} .cs-treffer .cs-text{flex:1 1 auto;min-width:0;overflow:hidden} .cs-treffer .cs-name,.cs-treffer .cs-zeile{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Cross-Selling in zwei Spalten (D680, Betreiber: "kachel cross selling halbieren und dann rechts daneben die neu auswahl schon offen ergänzen"): links die Verweise, rechts "Artikel verknüpfen" offen und beim Rollen stehend; die Trefferliste wieder im Fluss unter dem Suchfeld (das Schweben/Hochklappen entfaellt). */ .cs-spalten{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.2rem;align-items:start} .cs-links{min-width:0} .cs-spalten > .cs-neu{position:sticky;top:.6rem;margin-top:0} .cs-neu-titel{margin:0 0 .7rem;font-size:.92rem;font-weight:600} .cs-neu .eh-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:.7rem;align-items:end} .cs-neu .eh-form .cs-suche{grid-column:1 / -1;max-width:none} .cs-neu .eh-feld input[type=number],.cs-neu .eig-form select{width:100%;min-width:0} .cs-neu .cs-suche input[type=search]{max-width:none} .cs-suche .cs-treffer,.cs-suche .cs-treffer.nach-oben{position:static;top:auto;bottom:auto;margin-top:.35rem; max-height:24rem;box-shadow:none} @media (max-width:900px){ .cs-spalten{grid-template-columns:minmax(0,1fr)} .cs-spalten > .cs-neu{position:static} } /* Mindesthoehe beider Spalten (D680, Betreiber: "du kannst für beide spalte eine mindest höhe festlegen"): 26rem - die Trefferliste rechts hat damit Platz, ohne dass die Seite waechst; die linke Karte fuellt ihre Spalte. Beide Karten beginnen auf einer Linie (Zaehlzeile und Legende stehen darueber). */ .cs-spalten{align-items:stretch} .cs-links{display:flex;flex-direction:column} .cs-links > .kbaum,.cs-links > .leer{flex:1 1 auto;min-height:26rem;box-sizing:border-box;margin-top:0} .cs-spalten > .cs-neu{min-height:26rem;box-sizing:border-box;align-self:start;display:flex;flex-direction:column} .cs-neu .cs-suche .cs-treffer{max-height:16rem} .cs-links > .k-fuss{margin-top:.8rem} /* Auge in der Cross-Selling-Suche (D680): vor dem Namen, gleiche Zeichen und Farben wie die Liste. */ .cs-treffer .cs-name{display:flex;align-items:center;gap:.35rem} .cs-treffer .cs-name .shop-auge{flex:none;display:inline-flex} .cs-treffer .cs-name .shop-auge svg{width:1rem;height:1rem} .cs-treffer .cs-name-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Reiter Kategorie in zwei Spalten wie Cross-Selling (D689): die Regeln von .cs-spalten gelten mit; hier nur, was die Kategorieauswahl braucht - der Baum zum Anhaken rollt in sich, der Kasten waechst nicht ueber den Bildschirm; die Hinweiszeile ohne Kategorie fuellt die linke Spalte wie die Liste. */ .cs-links > .hinweis{flex:1 1 auto;min-height:26rem;box-sizing:border-box;margin-top:0} .k-neu .k-wahl-huelle{margin:0} .k-neu .k-wahl-feld{margin:0} .k-neu .k-wahl{margin:0} .k-neu .kwahl{max-height:min(60vh,30rem);overflow-y:auto} /* Auswahl im offenen Kasten ohne eigene Karte (D689, Betreiber: "momentan hat die manuelle auswahl noch einen rahmen. können wir das ein bisschen effektiver machen?"): der rechte Kasten rahmt schon - Rahmen, Rundung und Innenabstaende der .k-wahl-Karte fallen dort weg, die Kopfzeile (Suche, Zahl, aufnehmen) und die Liste stehen buendig im Kasten; die Liste nutzt die volle Breite. */ .k-neu .k-wahl{border:0;border-radius:0;background:transparent;margin:0} .k-neu .k-wahl-kopf{padding:0 0 .6rem;border-bottom:1px solid var(--rand);border-radius:0;background:var(--flaeche)} .k-neu .kwahl{padding:.4rem 0 0} .k-neu .k-wahl-leer{padding:.6rem 0} .k-neu .cs-neu-titel{margin-bottom:.6rem} /* Schon zugeordnete Kategorie in der Auswahl (D689): Kaestchen angehakt und gesperrt, Name normal lesbar. */ .kw-schon{cursor:default} /* Gruenes Kaestchen, selbst gezeichnet (Betreiber: "kästchen grün machen" - dann "das grün darf dunkler sein. heller rand, dunkler hintergrund und heller haken. der braune hintergrund kann ganz weg"). Dunkles Gruen (--gut-bg) mit hellgruenem Rand und Haken (--gut); die Zeilenhervorhebung fuer Angehaktes (.kw-zeile:has(input:checked), --akzent-bg = braun im dunklen Design) gilt fuer schon Zugeordnete nicht. Ein gesperrtes Kaestchen faerbt der Browser sonst grau, accent-color hilft da nicht. */ .kw-schon input{-webkit-appearance:none;appearance:none;margin:0;flex:none;width:1.05rem;height:1.05rem;border-radius:4px; background:var(--gut-bg);border:1.5px solid var(--gut);position:relative;cursor:default;opacity:1;box-sizing:border-box} .kw-schon input::after{content:"";position:absolute;left:.3rem;top:.1rem;width:.24rem;height:.5rem; border-right:2px solid var(--gut);border-bottom:2px solid var(--gut);transform:rotate(45deg)} .kw-zeile:has(.kw-schon input:checked){background:transparent} /* spezifischer als .kw-zeile:has(input:checked) - die erste Fassung (:has(.kw-schon)) verlor */ /* Reiter Eigenschaften wie Kategorie (D690): Gruppen als fette Zeilen, Wertfeld unter der angehakten Eigenschaft eingerueckt, so breit wie die Spalte. */ .ewahl .ew-gruppenname{font-weight:600} .ewahl .ew-wert{padding:.2rem 0 .45rem 2.9rem} .ewahl .ew-wert select,.ewahl .ew-wert input{width:100%;max-width:24rem;box-sizing:border-box;min-height:2rem; padding:.3rem .5rem;border:1px solid var(--rand);border-radius:8px;background:var(--bg);color:var(--text);font:inherit;font-size:.88rem} .ewahl .ew-wert select:focus,.ewahl .ew-wert input:focus{outline:none;border-color:var(--akzent)} /* "aufnehmen" so hoch wie das Suchfeld daneben (D689/D690, Betreiber: "der button aufnehmen kann die gleiche hoehe haben wie die texteingabe daneben"): beide strecken sich auf die Zeilenhoehe der Kopfzeile. */ .k-wahl-kopf{align-items:stretch} .k-wahl-kopf .k-wahl-suche{box-sizing:border-box;min-height:2.2rem} .k-wahl-kopf button[type=submit]{box-sizing:border-box;min-height:2.2rem;display:inline-flex;align-items:center; padding-top:0;padding-bottom:0} .k-wahl-kopf .k-wahl-fuer{align-self:center} /* Eigenschaften weniger eingerueckt (D690, Betreiber: "bei den eigenschaften muss das einruecken nicht so weit sein"): kein leerer Aufklapp-Platzhalter vor der Eigenschaft (sie hat keine Unterebene), die Unterliste nur so weit eingerueckt, dass das Kaestchen unter dem Gruppennamen beginnt; das Wertfeld steht buendig unter dem Namen. */ .ewahl ul{margin-left:.9rem;padding-left:1.2rem} /* Kaestchen beginnt mit dem Gruppennamen: Pfeil 1.8rem + Abstand .3rem = 2.1rem; Linie unter der Pfeilmitte */ .ewahl ul span.kw-pfeil{display:none} .ewahl ul .kw-zeile{padding-left:0} .ewahl .ew-wert{padding:.15rem 0 .45rem 1.5rem} /* buendig unter dem Namen: Kaestchen 1.05rem + Abstand .45rem */ /* Wertfeld der Eigenschaftsauswahl schoener (D690, Betreiber: "die auswahl fuer den wert muss in dem css noch ein bisschen schoener sein"): wie Suchfeld und Nummernfeld - 2.2rem hoch, 8px, Hintergrund wie die Seite, Rahmen in Akzentfarbe beim Ueberfahren, heller Ring beim Fokus; die Auswahl mit eigenem, schlankem Winkel (am Wrapper gezeichnet, folgt der Textfarbe - auch im dunklen Design) statt des Browserpfeils. */ .ewahl .ew-wert{position:relative;max-width:25.5rem;box-sizing:border-box} .ewahl .ew-wert select,.ewahl .ew-wert input{display:block;width:100%;max-width:none;min-height:2.2rem;box-sizing:border-box; padding:.4rem .7rem;border:1px solid var(--rand);border-radius:8px;background:var(--bg);color:var(--text); font:inherit;font-size:.88rem;line-height:1.3;transition:border-color .12s ease,box-shadow .12s ease} .ewahl .ew-wert select{-webkit-appearance:none;appearance:none;padding-right:2.2rem;cursor:pointer} /* mittig zum FELD, nicht zum Wrapper (oben .15rem, unten .45rem Abstand): Feldmitte .15 + 2.2/2 = 1.25rem; der gedrehte Winkel liegt optisch in seiner unteren Haelfte - darum .21rem (halbe Kante) plus .1rem hoeher. */ .ewahl .ew-wert:has(select)::after{content:"";position:absolute;right:.85rem;top:.94rem;width:.42rem;height:.42rem; margin-top:0;border-right:1.6px solid var(--leise);border-bottom:1.6px solid var(--leise);transform:rotate(45deg); pointer-events:none} .ewahl .ew-wert select:hover,.ewahl .ew-wert input:hover{border-color:var(--akzent)} .ewahl .ew-wert select:focus,.ewahl .ew-wert input:focus{outline:none;border-color:var(--akzent);box-shadow:0 0 0 3px var(--akzent-bg)} .ewahl .ew-wert:has(select:focus)::after{border-color:var(--akzent)} .ewahl .ew-wert input::placeholder{color:var(--leise);opacity:.8} .ewahl .ew-wert select option{background:var(--flaeche);color:var(--text)} /* "aufnehmen" orange, sobald etwas angehakt ist (D689/D690, Betreiber: "bei dem button aufnehmen kann der button orange werden, also der rahmen und die schrift, wenn es was zu uebernehmen gibt. die zahl darf auch eingerahmt sein") - gesperrt bleibt er grau; die Plakette eingerahmt wie an "nach plentyONE schreiben". */ .k-wahl-kopf button[type=submit]:enabled{border-color:var(--akzent);color:var(--akzent)} .k-wahl-kopf button[type=submit]:enabled:hover{background:var(--akzent-bg)} .k-wahl-kopf button[type=submit] .gruppen-zahl{border:1px solid var(--akzent);background:var(--akzent-bg);color:var(--akzent)} /* Lange Eigenschaftswerte vorne kuerzen (D690, Betreiber: "Sportartikel > Outdoor-Aktivitaeten > ... > Sattelauflagen ganz schoen lang ... mit ... beginnen, solange wie es in die zeile passt, dass ich das ende sehe, denn das ist ja meist das entscheidende"): Schreibrichtung rechts-nach-links am Rahmen legt den Ueberlauf nach LINKS, das Auslassungszeichen steht vorn; innen haelt Text und ">" in der richtigen Reihenfolge. Hoechstens 22rem, damit der Wert in seiner Zeile bleibt (die Zeilen der Liste brechen sonst um). */ .eig-wert-ende{display:inline-block;max-width:22rem;min-width:0;vertical-align:bottom; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl;text-align:left} .eig-wert-ende bdi{direction:ltr;unicode-bidi:isolate} .k-soll .eig-wert-ende{max-width:18rem} /* Cross-Selling: mehrere Artikel auf einmal (D692) - Kaestchen in der Trefferzeile, Liste "Ausgewaehlt" mit x, unten Gruppe und "aufnehmen" (orange mit eingerahmter Zahl, sobald etwas ausgewaehlt ist). */ .cs-mehr{display:flex;flex-direction:column;gap:.6rem} .cs-mehr .cs-suche{max-width:none} .cs-treffer label.cs-wahl{cursor:pointer} .cs-treffer .cs-wahl input[type=checkbox]{pointer-events:auto;flex:none;width:1.05rem;height:1.05rem;margin:0;accent-color:var(--akzent)} .cs-treffer .cs-wahl:has(input:checked:not(:disabled)){background:var(--akzent-bg)} .cs-treffer .cs-steht input[type=checkbox]{-webkit-appearance:none;appearance:none;border-radius:4px;box-sizing:border-box; background:var(--gut-bg);border:1.5px solid var(--gut);position:relative} .cs-treffer .cs-steht input[type=checkbox]::after{content:"";position:absolute;left:.3rem;top:.1rem;width:.24rem;height:.5rem; border-right:2px solid var(--gut);border-bottom:2px solid var(--gut);transform:rotate(45deg)} .cs-treffer .cs-steht{cursor:default} .cs-gewaehlt{border-top:1px solid var(--rand);padding-top:.5rem} .cs-gewaehlt-titel{margin:0 0 .35rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--leise)} .cs-gewaehlt-liste{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem} .cs-gewaehlt-liste li{display:inline-flex;align-items:center;gap:.3rem;max-width:100%;padding:.2rem .2rem .2rem .6rem; border:1px solid var(--akzent);border-radius:999px;background:var(--akzent-bg);font-size:.82rem} .cs-gewaehlt-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:20rem} .cs-gewaehlt-weg{flex:none;width:1.4rem;height:1.4rem;border:0;border-radius:50%;background:transparent;color:var(--akzent); font:inherit;font-size:1rem;line-height:1;cursor:pointer} .cs-gewaehlt-weg:hover{background:var(--flaeche)} .cs-fuss{display:flex;align-items:stretch;gap:.6rem;border-top:1px solid var(--rand);padding-top:.6rem} .cs-gruppe{display:inline-flex;align-items:center;gap:.45rem;font-size:.85rem;color:var(--leise)} .cs-gruppe select{min-height:2.2rem;padding:.3rem .6rem;border:1px solid var(--rand);border-radius:8px;background:var(--bg); color:var(--text);font:inherit;font-size:.88rem} .cs-fuss .cs-aufnehmen{margin-left:auto;min-height:2.2rem;display:inline-flex;align-items:center;padding-top:0;padding-bottom:0} .cs-fuss .cs-aufnehmen:enabled{border-color:var(--akzent);color:var(--akzent)} .cs-fuss .cs-aufnehmen:enabled:hover{background:var(--akzent-bg)} .cs-fuss .cs-aufnehmen .gruppen-zahl{border:1px solid var(--akzent);background:var(--akzent-bg);color:var(--akzent)} /* Zwei Gruppenknoepfe nebeneinander (D692), gleich breit, rechtsbuendig im Fuss. */ .cs-fuss{justify-content:flex-end} .cs-fuss .cs-aufnehmen{margin-left:0;flex:0 1 auto} /* Zustaendigkeit im Pruefstand (D693): wartende Befunde (System/Marktplatz) grau mit Uhr, nicht rot; nach 48 h als Fehler mit "haengt seit". */ .pk-a-wartet{color:var(--leise)} .pruef-wartet{display:inline-flex;align-items:center;gap:.3rem;margin-left:.4rem;padding:.05rem .45rem;border-radius:999px; border:1px solid var(--rand);background:var(--bg);color:var(--leise);font-size:.74rem;white-space:nowrap} .pruef-wartet::before{content:"";width:.6rem;height:.6rem;border:1.5px solid currentColor;border-radius:50%; background:linear-gradient(currentColor,currentColor) 50% 30%/1.5px 35% no-repeat} .pruef-hoch{border-color:var(--schlecht);color:var(--schlecht)} .pk-l-wartet .pruefzeile .pruef-text{color:var(--leise)} /* Plakette "wartet" in eigener Zeile unter dem Regeltext, darf umbrechen (Betreiber: "geht ueber die seite hinaus", H7 30642 im schmalen Pruefstand). */ .pruef-warte-zeile{margin:0} .pruef-warte-zeile .pruef-wartet{margin-left:0;white-space:normal;max-width:100%;box-sizing:border-box;line-height:1.35} .pruef-warte-zeile .pruef-wartet::before{flex:none} /* Mehr Luft in der Plakette "wartet" (Betreiber: "das icon und wartet auf kann den hintergrund mit etwas mehr padding vertragen"). */ .pruef-warte-zeile .pruef-wartet{gap:.4rem;padding:.25rem .65rem .25rem .5rem;font-size:.76rem} /* LAGER 3D IM POPUP (D839) - Knopf im Subheader wie die Zeichenknoepfe daneben, Fenster fast bildschirmfuellend */ .lager3d-knopf{cursor:pointer;margin-right:0} /* .a-nr bringt 8px rechts mit - neben dem Shop-Knopf waren es 16 statt 8 */ .lager3d-knopf svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round} dialog.lager3d-fenster{width:min(1500px,94vw);height:min(940px,90vh);max-width:none;max-height:none;padding:0; border:1px solid var(--rand);border-radius:12px;background:var(--bg);color:var(--text);overflow:hidden} dialog.lager3d-fenster:not([open]){display:none} dialog.lager3d-fenster iframe{display:block;width:100%;height:100%;border:0} dialog.lager3d-fenster::backdrop{background:rgba(10,12,16,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)} .lager3d-zu{position:absolute;right:.55rem;top:.4rem;z-index:2;width:2rem;height:2rem;border:0;border-radius:50%; background:var(--flaeche);color:var(--leise);font-size:1.3rem;line-height:1;cursor:pointer} .lager3d-zu:hover{color:var(--text)} @media (max-width:760px){dialog.lager3d-fenster{width:100vw;height:100dvh;border-radius:0}} /* D881 (12.10.2026), Betreiber: "die anzahl der weiteren adressen kann eingerahmt direkt hinter weitere adressen" - der Zaehler im Kopf des Aufklappfelds im Kundenkonto mit Rahmen (seit D882 eigene Klasse kk-akk). */ .kk-akk-kopf .gruppen-zahl{border:1px solid var(--rand);font-weight:600} .kk-akk[open] > .kk-akk-kopf .gruppen-zahl{border-color:var(--akzent)} /* D882 (12.10.2026), Betreiber: "weitere adresse in dem kontakt konto 307 ist das tab immer offen, auch wenn ich neu lade". Ursache: gf-akk ist das Akkordeon der Gruppenfunktionen - control.js merkt sich dessen offenes Fach im Browser (localStorage "gf-fach", Nummer des Fachs) und oeffnet es auf JEDER Seite mit .gf-akk wieder. Das Kundenkonto hat deshalb ein eigenes Aufklappfeld im selben Aussehen, ohne Gedaechtnis: beim Laden immer zu. */ .kk-akk{border:1px solid var(--rand);border-radius:8px;background:var(--flaeche)} .kk-akk[open]{border-color:var(--akzent)} .kk-akk-kopf{list-style:none;cursor:pointer;display:flex;align-items:center; justify-content:space-between;padding:.65rem .85rem;font-weight:600;font-size:.88rem} .kk-akk-kopf::-webkit-details-marker{display:none} .kk-akk-kopf:hover{color:var(--akzent)} .kk-akk[open] > .kk-akk-kopf{color:var(--akzent-text);border-bottom:1px solid var(--rand)} .kk-akk[open] > .kk-akk-kopf .nav-winkel{transform:rotate(180deg)} /* D883 (12.10.2026): Tabellenzeile als Link (tr[data-href], control.js) - Zeiger und Hervorhebung wie bei einem Link, sichtbarer Fokus fuer die Tastatur. */ tr[data-href]{cursor:pointer} tr[data-href]:hover > td{background:var(--akzent-bg)} tr[data-href]:focus-visible{outline:2px solid var(--akzent);outline-offset:-2px} /* D891 (12.10.2026): Kacheln der Auftragsuebersicht sind Links auf einen Reiter (#posten …) - ohne Unterstrich. */ a.ue-kachel,a.ue-kachel:hover{text-decoration:none;color:inherit} /* D892 (12.10.2026): Auftragsansicht ohne Reiter - "alle notwendigen daten schnell sehen, nicht viel klicken oder scrollen, aber ueberschaubar" (Betreiber). Kachelzeile, kompakte Posten, Kartenraster. */ .auf-zahlen{grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.6rem;margin-bottom:1rem} .auf-zahlen .ue-kachel{cursor:default;padding:.65rem .85rem} .auf-zahlen .ue-zahl{font-size:1.35rem} .auf-zahlen .ue-zahl small{font-size:.75rem;font-weight:600;color:var(--leise)} .auf-zahlen .ue-wort{font-size:.78rem;color:var(--leise);text-transform:uppercase;letter-spacing:.04em} .auf-status{font-size:1.05rem;font-weight:700;line-height:1.2} .auf-posten table td,.auf-posten table th{padding-top:.35rem;padding-bottom:.35rem} .auf-bild{width:2.4rem} .auf-bild img{width:2rem;height:2rem;object-fit:contain;border-radius:5px;background:#fff;display:block} .auf-neben td{color:var(--leise)} .auf-summe td{font-weight:600;border-top:1px solid var(--rand)} .auf-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:.75rem;margin-top:1rem} .auf-raster .karte{padding:.8rem 1rem} .auf-raster .karte h3{font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;color:var(--leise);margin-bottom:.35rem} .auf-raster .zeile{font-size:.86rem;padding:.22rem 0} .auf-raster a.zeile{color:inherit;text-decoration:none} .auf-raster a.zeile:hover{color:var(--akzent)} .auf-notiz{font-size:.86rem;padding:.3rem 0;border-bottom:1px solid var(--rand);white-space:pre-wrap} .auf-notiz:last-child{border-bottom:0} /* D892 Nachtrag: am Notebook (1440 px) passte die Posten-Spalte nicht, Werte in den Karten brachen um. */ .auf-posten td:nth-child(2){white-space:normal;min-width:14rem} .auf-posten td:nth-child(2) .marke-txt{font-size:.8rem} .auf-raster{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))} .auf-raster .zeile > span:last-child{white-space:nowrap;text-align:right} .auf-raster .auf-sendung > span:last-child{white-space:normal;word-break:break-all;font-size:.8rem} .auf-raster .zeile > span:first-child{min-width:0} /* D892 Nachtrag 2: drei Karten im Raster (vier waren am Notebook zu eng), Zusammenhang und Verlauf rechts. */ .auf-raster{grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr))} .auf-raster .auf-breit{grid-column:1/-1} .a-seite .auf-seite .zeile{font-size:.86rem} .a-seite .auf-seite a.zeile{color:inherit;text-decoration:none} .a-seite .auf-seite a.zeile:hover{color:var(--akzent)} .a-seite .auf-seite .zeile > span:last-child{white-space:nowrap} /* D892 Nachtrag 3: Notizen unter dem Raster (in voller Breite im Raster erzwangen sie leere Spalten), Datum und Text in einer Zeile. */ .auf-notizen{margin-top:.75rem;padding:.8rem 1rem} .auf-notizen h3{font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;color:var(--leise);margin-bottom:.35rem} .auf-notiz{display:grid;grid-template-columns:8.5rem 1fr;gap:.75rem;align-items:baseline} /* D894 (12.10.2026): Notizen als Karte neben Zahlung und Versand, ueber den Posten. */ .auf-raster{margin:0 0 1rem} .auf-notiz2{padding:.3rem 0;border-bottom:1px solid var(--rand);font-size:.86rem} .auf-notiz2:last-child{border-bottom:0} .auf-notiz-text{white-space:pre-wrap;max-height:9rem;overflow:auto} /* D894: Leiste "Vorgang" - Hauptauftrag und Folgeauftraege als Karten, Ampel links, der geoeffnete hervorgehoben. */ .auf-vorgang{display:flex;flex-wrap:wrap;align-items:stretch;gap:.5rem;margin-bottom:1rem} .auf-vorgang-titel{align-self:center;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--leise);margin-right:.25rem} .auf-vk{display:flex;flex-direction:column;gap:.1rem;min-width:12rem;padding:.45rem .7rem;border:1px solid var(--rand);border-left:3px solid var(--rand);border-radius:0 8px 8px 0;background:var(--flaeche);color:inherit;text-decoration:none;font-size:.82rem} .auf-vk:hover{border-color:var(--akzent)} .auf-vk-gruen{border-left-color:var(--gut)}.auf-vk-gelb{border-left-color:var(--warn)}.auf-vk-rot{border-left-color:var(--schlecht)}.auf-vk-grau{border-left-color:var(--leise)} .auf-vk-aktuell{border-color:var(--akzent);box-shadow:0 0 0 1px var(--akzent) inset;background:var(--akzent-bg)} .auf-vk-kopf{font-size:.9rem} .auf-vk-pfeil{color:var(--leise);margin-right:.3rem} .auf-vk-hier{font-size:.7rem;font-weight:700;color:var(--akzent);border:1px solid var(--akzent);border-radius:6px;padding:0 .3rem;margin-left:.2rem} .auf-vk-zeile{color:var(--text)} .auf-vk-zu{color:var(--leise);font-size:.75rem} /* D896 (13.10.2026): Auftraege im Kundenkonto nach Vorgaengen - Trennung zwischen Vorgaengen, Hauptauftrag betont, Folgebelege eingerueckt. */ .kk-vorgaenge tbody.kk-vorgang{border-top:2px solid var(--rand)} .kk-vorgaenge tbody.kk-vorgang + tbody.kk-vorgang{border-top-width:6px;border-top-color:var(--bg)} .kk-vorgaenge tr.kk-haupt td{background:var(--flaeche);font-weight:600} .kk-vorgaenge tr.kk-haupt td.marke-txt,.kk-vorgaenge tr.kk-haupt .marke-txt{font-weight:400} .kk-vorgaenge tr.kk-folge td{font-size:.86rem;padding-top:.3rem;padding-bottom:.3rem} .kk-pfeil{color:var(--leise);margin-right:.35rem} .kk-punkt{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;margin-right:.45rem;background:var(--leise);vertical-align:middle} .kk-a-gruen .kk-punkt{background:var(--gut)}.kk-a-gelb .kk-punkt{background:var(--warn)}.kk-a-rot .kk-punkt{background:var(--schlecht)} .kk-vorgaenge td:nth-child(2){white-space:normal;min-width:15rem} .kk-vorgaenge td:nth-child(4){white-space:normal} /* D898: Nummer jetzt Spalte 2 (eingerueckt, nicht umbrechen), Art Spalte 3 (darf umbrechen). */ .kk-vorgaenge td:nth-child(2){white-space:nowrap;min-width:0} .kk-vorgaenge td:nth-child(3){white-space:normal;min-width:12rem} /* D898: Spalte Herkunft (4) darf umbrechen; Status (5) ebenfalls. */ .kk-vorgaenge td:nth-child(4),.kk-vorgaenge td:nth-child(5){white-space:normal} .kk-vorgaenge td:nth-child(3){min-width:10rem} /* D898 Nachtrag: Art und Herkunft einzeilig, nur der Status bricht um; engere Zellen. */ .kk-vorgaenge td,.kk-vorgaenge th{padding-left:.55rem;padding-right:.55rem} .kk-vorgaenge td:nth-child(3),.kk-vorgaenge td:nth-child(4){white-space:nowrap;min-width:0} .kk-vorgaenge td:nth-child(5){white-space:normal} /* D898: in der Hauptzeile nur Nummer und Art fett - fetter Status brach um. */ .kk-vorgaenge tr.kk-haupt td{font-weight:400} .kk-vorgaenge tr.kk-haupt td:nth-child(3){font-weight:600} /* D899: Spalte Zahlung im Kundenkonto - Bezahlstatus aus plentyONE, farbig. */ .kk-vorgaenge td.kk-zahlung{white-space:nowrap;font-weight:600} .kk-z-gruen{color:var(--gut)}.kk-z-gelb{color:var(--warn)}.kk-z-rot{color:var(--schlecht)}.kk-z-leise{color:var(--leise);font-weight:400 !important} /* D899: Fortschrittsbalken unter dem Status (Prozessbar), Farbe nach Ampel. */ .kk-balken{display:block;height:4px;margin-top:.3rem;border-radius:2px;background:var(--linie,#e5e7eb);overflow:hidden;max-width:12rem} .kk-balken i{display:block;height:100%;background:var(--leise)} .kk-a-gruen .kk-balken i{background:var(--gut)}.kk-a-gelb .kk-balken i{background:var(--warn)}.kk-a-rot .kk-balken i{background:var(--schlecht)} /* D899: Status einzeilig mit Auslassung (voller Text im title), Balken darunter. */ .kk-st{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:14rem} .kk-balken{max-width:14rem} .kk-st,.kk-balken{max-width:9.5rem} /* D899: bei Platzmangel darf der Verweis „zu …“ in der Art-Spalte umbrechen. */ .kk-vorgaenge td:nth-child(3) .marke-txt{white-space:normal} /* D900 (13.10.2026), Betreiber: "die status spalte darf gerne breiter sein. das ist in der regel das was zählt. am status hängt die weitere vorgehendsweise". Status voll ausgeschrieben (keine Auslassung mehr), mindestens 16rem breit, Punkt per Flex neben dem Text; dafür darf die Herkunft umbrechen. */ .kk-vorgaenge .kk-st{display:flex;align-items:baseline;white-space:normal;overflow:visible;max-width:none;min-width:16rem} .kk-vorgaenge .kk-st .kk-punkt{flex:none;transform:translateY(-.05rem)} .kk-vorgaenge .kk-balken{max-width:none} .kk-vorgaenge td:nth-child(4){white-space:normal} /* D901: die Kennzahlen des Kundenkontos füllen die Reihe (auto-fit statt auto-fill) – vorher blieb rechts Platz frei, und das Datum der letzten Bestellung lief über den Kachelrand. */ .kk-kennzahlen{grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr))} /* D905: Pfeil je Auftragszeile und aufgeklappte Posten im Kundenkonto. */ .kk-vorgaenge th.kk-auf-sp,.kk-vorgaenge td.kk-auf-sp{width:1.6rem;padding-left:.35rem;padding-right:0} .kk-auf{border:0;background:none;color:var(--leise);font-size:1.25rem;line-height:1;width:1.4rem;height:1.4rem;border-radius:.3rem;cursor:pointer;transition:transform .15s} .kk-auf:hover{color:var(--text,#fff);background:rgba(255,255,255,.07)} .kk-auf[aria-expanded="true"]{transform:rotate(90deg);color:var(--akzent,#f39200)} .kk-vorgaenge tr.kk-posten > td{padding-top:0;padding-bottom:.6rem;border-top:0} .kk-vorgaenge tr.kk-posten table{width:100%;font-size:.86rem;border-collapse:collapse} .kk-vorgaenge tr.kk-posten table td{padding:.25rem .5rem;border-top:1px solid rgba(255,255,255,.05);white-space:normal} .kk-vorgaenge tr.kk-posten .kk-p-menge{width:3.5rem;white-space:nowrap} /* D905: mit der Pfeilspalte rücken alle Spalten um eins – die Umbruchregeln (D898–D901) für die neue Zählung. 1 Pfeil · 2 Datum · 3 Nummer · 4 Art · 5 Herkunft · 6 Status · 7 Zahlung · 8 Summe. */ .kk-vorgaenge > tbody > tr > td:nth-child(2),.kk-vorgaenge > tbody > tr > td:nth-child(3){white-space:nowrap;min-width:0} .kk-vorgaenge > tbody > tr > td:nth-child(4){white-space:nowrap;min-width:0} .kk-vorgaenge > tbody > tr > td:nth-child(4) .marke-txt{white-space:normal} .kk-vorgaenge > tbody > tr > td:nth-child(5),.kk-vorgaenge > tbody > tr > td:nth-child(6){white-space:normal;min-width:0} .kk-vorgaenge > tbody > tr > td:nth-child(3) .marke-txt{white-space:nowrap} /* D905: fett in der Hauptzeile jetzt Spalte 4 (Art); Status etwas schmaler, damit die Summe mit der Pfeilspalte sichtbar bleibt; Artikelnamen in den Posten ruhig (Farbe des Texts, Unterstrich erst beim Zeigen). */ .kk-vorgaenge tr.kk-haupt > td:nth-child(3){font-weight:400} .kk-vorgaenge tr.kk-haupt > td:nth-child(4){font-weight:600} .kk-vorgaenge .kk-st{min-width:14.5rem} .kk-vorgaenge tr.kk-posten a{color:inherit;text-decoration:none} .kk-vorgaenge tr.kk-posten a:hover{text-decoration:underline;color:var(--akzent,#f39200)} .kk-vorgaenge tr.kk-posten table td{background:none} /* D906 (13.10.2026), Betreiber: "der pfeil sollte nach unten zeigen und dann wieder nach oben. gerne auch als button wie wir ihn kennen darstellen" – knopf-leise, quadratisch, mit dem Winkel der Akkordeons; offen um 180° gedreht. */ .kk-vorgaenge .kk-auf{width:1.7rem;height:1.7rem;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:inherit;transform:none;background:none;color:var(--leise)} .kk-vorgaenge .kk-auf:hover{color:var(--akzent);border-color:var(--akzent);background:none} .kk-vorgaenge .kk-auf .nav-winkel{transition:transform .15s} .kk-vorgaenge .kk-auf[aria-expanded="true"]{transform:none;color:var(--akzent);border-color:var(--akzent)} .kk-vorgaenge .kk-auf[aria-expanded="true"] .nav-winkel{transform:rotate(180deg)} .kk-vorgaenge th.kk-auf-sp,.kk-vorgaenge td.kk-auf-sp{width:2.2rem} .kk-vorgaenge tr.kk-posten td.auf-bild{width:2.4rem;padding-right:0} /* D906: der Knopf behält Rahmen und Grund von knopf-leise (die D905-Regel .kk-auf setzte border:0). */ .kk-vorgaenge .kk-auf,.kk-vorgaenge .kk-auf:hover,.kk-vorgaenge .kk-auf[aria-expanded="true"]{border-width:1px;border-style:solid;border-radius:7px;background:var(--bg)} .kk-vorgaenge .kk-auf{border-color:var(--rand)} .kk-vorgaenge .kk-st{min-width:14.2rem} /* D906: Artikelnummer der Posten als eigene Spalte (Betreiber: "die artikelnummer sollte in eine seperate spalte"). */ .kk-vorgaenge tr.kk-posten td.kk-p-nr{white-space:nowrap} /* D906: Platz für das €-Zeichen in der Summenspalte. */ .kk-vorgaenge .kk-st{min-width:13.7rem} .kk-vorgaenge td.zahl-z{white-space:nowrap} .kk-vorgaenge tr.kk-posten table td.zahl-z{white-space:nowrap} /* D907: unter der letzten Postenzeile kein Zusatzabstand mehr (D905 setzte padding-bottom .6rem an die äußere Zelle) – Betreiber: "die unterste zeile hat mehr space als die anderen zeilen". */ .kk-vorgaenge tr.kk-posten > td{padding-bottom:0} /* D909: DSGVO-Knöpfe in der Unterleiste des Kundenkontos (Stil der Kennungsschilder a-nr, Höhe der Leiste). */ .subnav-rechts .kk-dsgvo{display:inline-flex;align-items:center;margin:0;padding:0 .75rem;font-size:.85rem;text-decoration:none;white-space:nowrap} a.kk-dsgvo:hover,.kk-dsgvo-gefahr:hover{border-color:var(--akzent);color:var(--akzent)} .subnav-rechts .kk-dsgvo-gefahr:hover{border-color:var(--schlecht);color:var(--schlecht)} .kk-dsgvo-aus{opacity:.45;cursor:not-allowed} .kk-dsgvo-erledigt{border-color:var(--warn);color:var(--warn)} /* D909: Betreiber "die zwei button gerne als icon darstellen" – quadratisch wie die Symbolknöpfe (2.2rem), Strichzeichnung wie nav-winkel; der Name steht im Tooltip. */ .subnav-rechts .kk-dsgvo{width:2.2rem;min-width:2.2rem;padding:0;justify-content:center} .kk-dsgvo-zeichen{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round} /* D911: Seitenleiste des Kundenkontos – Kopf mit Initialen und großem Namen, E-Mail und Telefon als Kopierknöpfe. */ .kk-kopf{display:flex;align-items:center;gap:.8rem;margin-bottom:.9rem} .kk-avatar{flex:none;width:3rem;height:3rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--akzent);color:#fff;font-weight:700;font-size:1.1rem;letter-spacing:.03em} .kk-kopf-text{min-width:0} .kk-name{font-size:1.4rem;font-weight:700;line-height:1.2;overflow-wrap:anywhere} .kk-unter{color:var(--leise);font-size:.85rem;margin-top:.15rem} .kk-kanaele{display:flex;flex-direction:column;gap:.4rem} .kk-kanal{display:flex;align-items:center;gap:.55rem;min-width:0} .kk-kanal-zeichen{flex:none;width:1.9rem;height:1.9rem;border-radius:7px;display:flex;align-items:center;justify-content:center;background:var(--bg);border:1px solid var(--rand);color:var(--leise)} .kk-kanal-zeichen svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round} .kk-kanal-leer{color:var(--leise);font-size:.9rem} .kk-kopie{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.35rem .6rem;border:1px solid var(--rand);border-radius:7px;background:var(--bg);color:var(--text,inherit);font:inherit;font-size:.92rem;cursor:pointer;text-align:left} .kk-kopie > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .kk-kopie .a-nr-kopie{flex:none;width:.95rem;height:.95rem;fill:none;stroke:currentColor;stroke-width:1.4;color:var(--leise)} .kk-kopie:hover{border-color:var(--akzent)}.kk-kopie:hover .a-nr-kopie{color:var(--akzent)} .kk-kopie.kopiert{border-color:var(--gut);color:var(--gut);background:var(--gut-bg)} /* D912 (13.10.2026), Betreiber: "auf der rechten seite ein bisschen mehr abstand nach oben. das sieht sehr gedrungen aus. die zwei button wegen der dsgvo sollten quadratisch sein". Die Leiste streckt ihre Kinder auf volle Höhe (align-items: stretch) – die Symbolknöpfe jetzt fest 2.2rem × 2.2rem, mittig. */ .subnav-rechts .kk-dsgvo{height:2.2rem;align-self:center} .subnav-rechts form:has(.kk-dsgvo){align-items:center} .kk-person{margin-top:.6rem;padding-top:1.1rem} .kk-person .kk-kopf{margin-bottom:1.1rem} .kk-kanaele{gap:.55rem} /* D912: stärker als .a-seite .karte{padding:0} (Zeile ~1071) – sonst kam der Abstand nicht an. */ .a-seite .karte.kk-person{margin-top:1.1rem;padding-top:.4rem} /* D914: Kundenranking unten in der Seitenleiste – Stufe als Kachel, Punkte je RFM-Größe, Säulen Rohertrag je Quartal. */ .kk-rang-kopf{display:flex;align-items:center;gap:.8rem;margin:.4rem 0 .9rem} .kk-stufe{flex:none;width:3rem;height:3rem;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:800;color:#fff} .kk-stufe-A{background:var(--gut)}.kk-stufe-B{background:#5aa469}.kk-stufe-C{background:var(--akzent)}.kk-stufe-D{background:var(--warn);color:#1d2330}.kk-stufe-E{background:var(--leise)} .kk-rang-platz{font-size:1.15rem;font-weight:700} .kk-rfm{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.9rem} .kk-rfm-zeile{display:grid;grid-template-columns:5.6rem auto 1fr;align-items:center;gap:.6rem;font-size:.9rem} .kk-rfm-zeile > .marke-txt{text-align:right;white-space:nowrap} .kk-punkte{display:inline-flex;gap:3px}.kk-punkte i{width:.9rem;height:.45rem;border-radius:2px;background:var(--rand)}.kk-punkte i.an{background:var(--akzent)} .kk-diagramm{display:flex;align-items:flex-end;gap:4px;height:6.5rem;padding:.3rem 0 0;border-bottom:1px solid var(--rand)} .kk-saeule{flex:1 1 0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;position:relative} .kk-saeule i{display:block;background:var(--akzent);border-radius:3px 3px 0 0;min-height:0;opacity:.85} .kk-saeule i.neg{background:var(--schlecht)} .kk-saeule:hover i{opacity:1} .kk-saeule span{position:absolute;bottom:-1.25rem;left:0;right:0;text-align:center;font-size:.62rem;color:var(--leise);white-space:nowrap} .kk-rang-fuss{margin-top:1.6rem;font-size:.78rem} /* D915: Stufe des Kundenrankings in der Kontenliste – kleine Kachel in den Farben der Seitenleiste. */ .kk-stufe-klein{display:inline-flex;align-items:center;justify-content:center;width:1.45rem;height:1.45rem;border-radius:5px;font-size:.8rem;font-weight:800;color:#fff} .kk-stufe-klein.kk-stufe-D{color:#1d2330} /* D916 (13.10.2026), Betreiber: "das kundenranking kann sich unten positionieren im konto" – die Seitenleiste des Kundenkontos als Spalte über die volle Höhe, die Rankingkarte rutscht an den unteren Rand (bei wenig Platz steht sie einfach darunter und die Leiste rollt wie bisher). */ .a-seite-inhalt:has(> .kk-rang){display:flex;flex-direction:column;min-height:100%} .a-seite .karte.kk-rang{margin-top:auto;padding-top:1.2rem;border-top:1px solid var(--rand)} .a-seite-inhalt:has(> .kk-rang) > p.marke-txt{margin-bottom:1.4rem} /* D918 (13.10.2026), Betreiber: "auf der kontenseite kann der zurückbutton quadratisch sein" – wie die DSGVO-Knöpfe rechts fest 2.2rem × 2.2rem, mittig (vorher 42 × 41 px, auf volle Leistenhöhe gestreckt). */ .subnav-zurueck[data-konto-zurueck]{width:2.2rem;min-width:2.2rem;height:2.2rem;align-self:center;padding:0} /* D919 (13.10.2026), Betreiber: "ich sehe, es liegt am titel: 416882 in der h7" – das Nummernschild neben dem Zurück-Knopf war 41 px hoch, der Knopf seit D918 35 px. Im Kundenkonto jetzt beide 2.2rem, mittig. */ .subnav-links:has([data-konto-zurueck]) .a-nr-gruppe{align-self:center} .subnav-links:has([data-konto-zurueck]) .a-nr-gruppe .a-nr{height:2.2rem;display:inline-flex;align-items:center;gap:.35rem;box-sizing:border-box} /* D920 (13.10.2026), Betreiber: "die button könnten eigentlich ein bisschen größer, die brauchen nicht so viel space um den button" – Zurück, Nummernschild und DSGVO-Knöpfe im Kundenkonto 2.6rem statt 2.2rem (Leiste 58 px). */ .subnav-zurueck[data-konto-zurueck]{width:2.6rem;min-width:2.6rem;height:2.6rem} .subnav-links:has([data-konto-zurueck]) .a-nr-gruppe .a-nr{height:2.6rem} .subnav-rechts .kk-dsgvo{width:2.6rem;min-width:2.6rem;height:2.6rem} .kk-dsgvo-zeichen{width:1.2rem;height:1.2rem} .subnav-zurueck[data-konto-zurueck] svg{width:1.15rem;height:1.15rem} /* D922: Kontenliste ohne Querrollen – Name, E-Mail, Ort und Spaltenköpfe dürfen umbrechen, die E-Mail höchstens 15rem breit (lange Adressen brechen an beliebiger Stelle). Spalten: 1 Konto · 2 Kontakt-ID · 3 Aufträge · 4 Rang · 5 Name · 6 E-Mail · 7 Ort · 8 Herkunft · 9 letzte Bestellung · 10 Kunde seit. */ .kk-konten th{white-space:normal} .kk-konten td:nth-child(5),.kk-konten td:nth-child(7){white-space:normal;min-width:7rem} .kk-konten td:nth-child(6){white-space:normal;overflow-wrap:anywhere;max-width:15rem} .kk-konten th{white-space:nowrap}.kk-konten th:nth-child(9),.kk-konten th:nth-child(10){white-space:normal} .kk-konten td:nth-child(5){min-width:9rem} /* D923 (13.10.2026), Betreiber: "aufträge und rang können zentriert dargestellt werden" – Spalten 3 und 4, Kopf und Zellen. */ .kk-konten th:nth-child(3),.kk-konten th:nth-child(4),.kk-konten td:nth-child(3),.kk-konten td:nth-child(4){text-align:center} /* D924 (13.10.2026), Betreiber: "konto und kontakt id können eine feste breite wie der maximale wert hat sein" – beide höchstens 6 Stellen (HS und H7 gemessen). Feste Breite, gleich breite Ziffern; die Spalten springen beim Blättern nicht. Pillen (Shop, gesperrt) rutschen unter die Nummer. */ .kk-konten th:nth-child(1),.kk-konten td:nth-child(1){width:5.2rem;min-width:5.2rem;max-width:5.2rem;white-space:normal} .kk-konten th:nth-child(2),.kk-konten td:nth-child(2){width:6.4rem;min-width:6.4rem;max-width:6.4rem} .kk-konten td:nth-child(1),.kk-konten td:nth-child(2){font-variant-numeric:tabular-nums} /* D924: Kontakt-ID breiter (Kopf passte nicht), dazu feste Breiten für Aufträge und Rang (Betreiber: "rang und aufträge auch") – je so breit wie ihr Kopf, der breiter ist als die Werte (höchstens 4 Ziffern bzw. eine Stufenkachel). */ .kk-konten th:nth-child(2),.kk-konten td:nth-child(2){width:7.2rem;min-width:7.2rem;max-width:7.2rem} .kk-konten th:nth-child(3),.kk-konten td:nth-child(3){width:6.6rem;min-width:6.6rem;max-width:6.6rem;font-variant-numeric:tabular-nums} .kk-konten th:nth-child(4),.kk-konten td:nth-child(4){width:4.4rem;min-width:4.4rem;max-width:4.4rem} /* D928: lange Herkunftsnamen ohne Leerzeichen ("GoogleProducts") brechen in der Vorgangsliste um, statt die Summe aus dem Bild zu drücken. Spalte 5 = Herkunft (D905-Zählung). */ .kk-vorgaenge > tbody > tr > td:nth-child(5){max-width:7.5rem;overflow-wrap:anywhere} /* Waschanleitungen je Produkttyp (D977, 14.10.2026): je Typ eine Karte mit eigenem Formular, untereinander, damit der Text breit genug zum Schreiben ist. scroll-margin, weil der Anker nach dem Speichern sonst unter der festen Kopfleiste landet; die zuletzt gespeicherte Karte bekommt die Akzentkante. */ .wa-erklaerung p{margin:.25rem 0} .wa-liste{display:grid;gap:.8rem;max-width:56rem} .wa-karte{scroll-margin-top:5rem} .wa-karte.wa-zuletzt{border-left-color:var(--akzent)} .wa-karte textarea{display:block;width:100%;box-sizing:border-box;margin-top:.6rem;font:inherit;font-size:.9rem; color:var(--text);padding:.45rem .6rem;border:1px solid var(--rand);border-radius:8px;background:var(--bg); resize:vertical;field-sizing:content;min-height:5.5rem;max-height:30rem} .wa-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-top:.6rem} .wa-fuss .marke-txt{flex:1 1 14rem;font-size:.85rem} .wa-haken{display:flex;align-items:center;gap:.35rem;cursor:pointer} /* Geschenkaktionen (D1062) */ .gk-karte{display:block;color:inherit;text-decoration:none} .gk-karte p{margin:.3rem 0 0} .gk-zustand{font-size:.8rem;font-weight:600;padding:.1rem .6rem;border-radius:999px;background:var(--flaeche,#f2f2f2)} .gk-läuft .gk-zustand{background:#e3f4e8;color:#14532d} .gk-geplant .gk-zustand{background:#fff3d6;color:#7a4600} .gk-beendet,.gk-angehalten{opacity:.65} .gk-form{display:grid;gap:.8rem;max-width:40rem} .gk-form label{display:grid;gap:.25rem;font-weight:600} .gk-form input:not([type=checkbox]){font:inherit;padding:.45rem .6rem} .gk-paar{display:grid;grid-template-columns:1fr 1fr;gap:.8rem} .gk-artikel{display:flex;justify-content:space-between;align-items:center;gap:1rem} .gk-suche{display:flex;gap:.5rem;max-width:40rem;margin:.4rem 0 .8rem} .gk-suche input{flex:1;font:inherit;padding:.45rem .6rem} /* Inhaltsseiten des eigenen Shops (D1122) */ .ih-text { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.5; width: 100%; } .ih-hilfe pre { white-space: pre-wrap; font-size: 12px; background: #f5f5f7; padding: 10px 12px; border-radius: 8px; } /* Checkliste der Inhaltsseiten (D1162): ein großes Kästchen je Zeile, Titel als Link in den Shop. */ .pl-stand{margin:.4rem 0 1.2rem;font-size:1rem} .pl-zahl{font-size:.85rem;font-weight:500;color:var(--text-2,#666);margin-left:.4rem} .pl-liste{list-style:none;margin:0 0 2rem;padding:0;max-width:56rem;border-top:1px solid var(--linie,#e3e3e8)} .pl-zeile{display:flex;align-items:flex-start;gap:.8rem;padding:.7rem 0;border-bottom:1px solid var(--linie,#e3e3e8)} .pl-form{margin:0;flex:none} .pl-kasten{width:28px;height:28px;border-radius:7px;border:2px solid #8e8e93;background:#fff;cursor:pointer;padding:0;display:grid;place-items:center} .pl-kasten[aria-checked="true"]{background:#1d7a33;border-color:#1d7a33} .pl-kasten[aria-checked="true"]::after{content:"";width:12px;height:7px;border:solid #fff;border-width:0 0 2.5px 2.5px;transform:translateY(-2px) rotate(-45deg)} .pl-text{display:grid;gap:.15rem;min-width:0} .pl-titel{font-weight:600;text-decoration:none} .pl-titel:hover{text-decoration:underline} .pl-an .pl-titel{color:var(--text-2,#666)} .pl-info{font-size:.82rem;color:var(--text-2,#666);overflow-wrap:anywhere} .pl-entwurf{color:#9a5a00} .pl-neu{color:#bb1e10} /* D1452: Checkliste Shop-Start – Erklärung je Punkt, Punkte, die Control selbst prüft (kein Knopf) */ .pl-erklaerung{font-size:.88rem;line-height:1.45} .pl-auto{flex:none;cursor:default;border-style:dashed} .pl-auto[aria-checked="true"]{border-style:solid} .pl-autotext{color:#1d5fa8;font-weight:600} /* D1307: Versand heute und Pickliste */ .vh-kacheln{margin:.5rem 0 1rem} .vh-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:0 0 1.2rem} .vh-knoepfe form{margin:0} .vh-meldung{display:inline-block;margin:0 0 .8rem} .vh-scan{margin:0 0 1rem} .vh-scan input{width:min(100%,26rem);font-size:1rem;padding:.55rem .7rem} .pl-abschnitt td{background:var(--kopf);font-weight:700;padding-top:.6rem} .pl-bild{width:44px;height:44px;object-fit:contain;border-radius:6px} /* D1312: Versandprozesse - das Band "muss heute raus" bis "heute ausgebucht", zwei grosse Knoepfe */ .vp-band{display:grid;grid-template-columns:1.4fr repeat(5,1fr);gap:.5rem;margin:.6rem 0 .4rem} .vp-band>div{background:var(--flaeche);border:1px solid var(--rand);border-radius:12px;padding:.7rem .8rem;display:flex;flex-direction:column} .vp-band b{font-size:1.8rem;line-height:1.1;font-variant-numeric:tabular-nums} .vp-band span{font-size:.85rem;color:var(--leise)} .vp-gross{background:var(--akzent-bg)!important;border-color:var(--akzent)!important} .vp-gross span{color:var(--akzent-text)!important} .vp-gross b{font-size:2.4rem} .vp-geschafft{background:var(--gut-bg)!important} .vp-geschafft b{color:var(--gut)} .vp-balken{height:8px;border-radius:99px;background:var(--rand);overflow:hidden;margin:0 0 .6rem} .vp-balken span{display:block;height:100%;background:var(--gut);border-radius:99px} .vp-klaer{margin:.2rem 0 .8rem} .vp-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:.6rem 0 1.1rem;max-width:44rem} .vp-knoepfe form{margin:0;display:contents} .vp-knopf{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;min-height:4.2rem;padding:.7rem 1rem;border-radius:12px; border:0;font-size:1.15rem;font-weight:700;color:#fff;cursor:pointer;text-align:left} .vp-knopf small{font-size:.8rem;font-weight:500;opacity:.9} .vp-pick{background:#c0392b} .vp-versand{background:#1f2933} .vp-knopf:disabled{opacity:.45;cursor:not-allowed} .vp-listen td{vertical-align:middle} @media (max-width:900px){.vp-band{grid-template-columns:repeat(3,1fr)}.vp-gross{grid-column:1/-1}} /* D1312: am Handy kein PDF, am Rechner kein Scanner (Betreiber) */ @media (hover:none) and (pointer:coarse){.nur-desktop{display:none!important}} @media (hover:hover),(pointer:fine){.nur-mobil{display:none!important}} .vp-pdf{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap} .vp-pdf svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round} /* D1313: 3D-Lager aus dem Scanner - ganzseitig, ohne Suche und "Ganze Seite oeffnen", oben "Zurueck zum Picken" */ .l3-scanner .l3-ganz,.l3-scanner .l3-suche{display:none!important} .l3-zurueck{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.6rem;padding:.55rem .8rem;background:#1f2933;color:#fff} .l3-zurueck a{color:#fff;font-weight:700;text-decoration:none;font-size:1rem;padding:.25rem .5rem;border:1px solid rgba(255,255,255,.4);border-radius:8px} .l3-zurueck span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600} .vp-bericht{white-space:pre-wrap;word-break:break-word;background:var(--flaeche);border:1px solid var(--rand);border-radius:10px;padding:.7rem .8rem;font-size:.8rem;max-width:60rem} /* D1317: Packtisch (Versandprozess) */ .pt-scan{margin:.2rem 0 .6rem} .pt-scan input{width:min(100%,36rem);font-size:1.25rem;padding:.65rem .8rem;border:2px solid var(--akzent);border-radius:10px;background:var(--bg);color:var(--text)} .pt-meldung{min-height:1.6rem;margin:0 0 .6rem;font-weight:700} .pt-meldung:empty{min-height:0;margin:0} .pt-gut{color:var(--gut)} .pt-fehler{color:var(--schlecht);font-weight:700} .pt-listen{display:grid;gap:.5rem;max-width:44rem} .pt-liste{display:flex;flex-direction:column;gap:.15rem;padding:.8rem 1rem;border:1px solid var(--rand);border-radius:12px;background:var(--flaeche);color:var(--text);text-decoration:none} .pt-liste:hover{border-color:var(--akzent)} .pt-spalten{display:grid;grid-template-columns:16rem minmax(0,1fr);gap:1rem;align-items:start} .pt-auftraege{display:flex;flex-direction:column;gap:.35rem} .pt-zeile{display:grid;grid-template-columns:1fr auto auto;gap:.5rem;align-items:center;text-align:left;padding:.55rem .7rem;border:1px solid var(--rand);border-radius:10px;background:var(--flaeche);color:var(--text);cursor:pointer;font:inherit} .pt-zeile.pt-an{border-color:var(--akzent);box-shadow:0 0 0 1px var(--akzent)} .pt-zeile.pt-versandt{opacity:.6} .pt-stand{font-size:.8rem;color:var(--leise)} .pt-komplett .pt-stand{color:var(--warn)} .pt-versandt .pt-stand{color:var(--gut)} .pt-auftrag{border:1px solid var(--rand);border-radius:12px;background:var(--flaeche);padding:1rem} .pt-kopf{display:flex;align-items:baseline;gap:1rem} .pt-kopf h2{margin:0;font-size:1.4rem} .pt-pos tr.pt-ok td:first-child{color:var(--gut);font-weight:800} .pt-pos tr.pt-fehlt{background:var(--warn-bg)} .pt-fehlt-text{color:var(--warn);font-weight:700} .pt-schritt{margin-top:.8rem;padding:.8rem;border-radius:10px;background:var(--bg);display:flex;flex-direction:column;gap:.6rem} .pt-fertig{border:1px solid var(--gut)} .pt-gewicht{display:flex;align-items:center;gap:.6rem} .pt-gewicht input{font-size:1.3rem;width:8rem;padding:.5rem .6rem;border:2px solid var(--akzent);border-radius:8px;background:var(--flaeche);color:var(--text)} .vp-knopf{text-decoration:none} /* D1319: 3D-Lager aus dem Scanner - Bedienhilfe und Legende weg (am Handy unnoetig), das Lager fuellt den Bildschirm */ .l3-scanner .l3-seite,.l3-scanner .l3-infoknopf{display:none!important} .l3-scanner .l3-spalten{display:block} .l3-scanner #l3-buehne{height:calc(100dvh - 12rem)!important;min-height:20rem} .l3-scanner main{padding:.5rem} /* D1319: Versandprozesse - je Zeile ein Knopf, groesser fuers Lager */ .vp-listen td{font-size:1rem;padding-top:.65rem;padding-bottom:.65rem} .vp-listen .vp-name{font-weight:700;font-size:1.05rem} .vp-zeilenknopf{display:inline-flex;align-items:center;gap:.4rem;min-width:7.5rem;justify-content:center;padding:.5rem .9rem;border-radius:10px; font-weight:700;text-decoration:none;font-size:.95rem} .vp-zeilenknopf svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round} .vp-zk-versand{background:#c0392b;color:#fff} .vp-zk-pdf{border:1px solid var(--rand-stark);color:var(--text)} /* D1319: Packtisch - groesser, Bild am Artikel, Auswahl mit Knopf */ .pt-liste{flex-direction:row;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.1rem} .pt-liste-text{display:flex;flex-direction:column;gap:.2rem;min-width:0} .pt-liste-text b{font-size:1.15rem} .pt-liste .vp-zeilenknopf{flex:none} .pt-spalten{grid-template-columns:18rem minmax(0,1fr)} .pt-zeile{font-size:1.05rem;padding:.7rem .8rem} .pt-kopf h2{font-size:1.6rem} .pt-kopf span{font-size:1rem;color:var(--leise)} .pt-pos td{font-size:1rem;vertical-align:middle} .pt-pos td:first-child{width:2rem;text-align:center;font-size:1.2rem} .pt-pos .pt-bild{width:56px;height:56px;object-fit:contain;border-radius:8px;background:var(--bg)} .pt-pos .pt-ean{font-variant-numeric:tabular-nums;font-size:1.05rem;letter-spacing:.02em} .pt-pos .pt-zahl{font-size:1.3rem;white-space:nowrap} .pt-meldung{font-size:1.1rem} .pt-scan input{font-size:1.35rem;padding:.75rem .9rem} .pt-gewicht label{font-size:1.1rem;font-weight:700} .pt-gewicht input{font-size:1.6rem;width:9rem} .pt-gewicht .knopf{font-size:1.1rem;padding:.65rem 1.2rem} .pt-schritt{font-size:1.05rem} .pt-auftrag>.leer{border:0;background:none;margin:0;padding:1.5rem .5rem} .pt-pos td:first-child,.pt-pos td:nth-child(2),.pt-pos th:first-child,.pt-pos th:nth-child(2){width:1%;white-space:nowrap} .pt-pos{table-layout:auto!important;width:100%} .pt-pos td:first-child,.pt-pos th:first-child{width:2.2rem!important} .pt-pos td:nth-child(2),.pt-pos th:nth-child(2){width:64px!important} /* gs-tabelle gibt Spalte 1/2 min-width 13rem/6.5rem (Namensspalten) - am Packtisch sind es Haken und Bild */ .pt-pos td:first-child,.pt-pos td:nth-child(2){min-width:0!important} /* D1319: Scanfeld am Packtisch mittig auf der Seite, Text mittig (Betreiber) */ .pt-scan{display:flex;justify-content:center} .pt-scan input{text-align:center;width:min(100%,40rem)} .pt-meldung{text-align:center} /* D1319: Scanfeld am Packtisch ebenso - ein Rand: dunkel, mit Fokus rot */ .pt-scan input{border:3px solid var(--rand-stark);outline:none;box-shadow:none} /* D1378: Kamera-Scan am Packtisch (Handy) - Knopf neben dem Feld, wie der Tastatur-Knopf der Lager-Seiten */ .pt-scan{gap:.5rem;align-items:center} /* quadratisch wie der Tastatur-Knopf der Lager-Seiten (Betreiber, 22.10.2026) */ .pt-kamera{display:flex;align-items:center;justify-content:center;flex:none;width:52px;height:52px;padding:0;border:1px solid var(--rand-stark);border-radius:10px;background:var(--bg);color:var(--text)} .pt-kamera svg{stroke:currentColor} .pt-scan input:focus,.pt-scan input:focus-visible{border-color:#c0392b;outline:none;box-shadow:none} /* D1319: 3D-Lager aus dem Scanner - Kopfzeile wie am Scanner: hoeher, Zurueck eingerahmt und gut zu treffen */ .l3-zurueck{min-height:66px;padding:.55rem .8rem;gap:.8rem} .l3-zurueck a{display:flex;align-items:center;gap:.35rem;min-height:48px;padding:0 1rem;border:2px solid rgba(255,255,255,.55);border-radius:12px;font-size:1.05rem} .l3-zurueck a:active{background:rgba(255,255,255,.15)} .l3-scanner #l3-buehne{height:calc(100dvh - 13rem)!important} /* D1319: "Zurück zum Picken" schöner - Pfeil gezeichnet, kurzes Wort, heller Knopf; rechts der Stellplatz mit rotem Ort */ .l3-zurueck{justify-content:space-between} .l3-zurueck a{gap:.2rem;padding:0 1.1rem 0 .55rem;background:#fff;color:#1f2933;border-color:#fff;font-size:1.1rem;letter-spacing:.01em} .l3-zurueck a:active{background:#e4e7eb} .l3-zurueck a svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} .l3-zurueck .l3-ziel{flex:0 1 auto;display:flex;align-items:center;gap:.4rem;font-size:1.15rem} .l3-zurueck .l3-ziel b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .l3-zurueck .l3-ziel svg{flex:none;width:24px;height:24px;fill:none;stroke:#e5483a;stroke-width:2.2} /* D1319: Drucken der Pickliste aus den Versandprozessen - Druckersymbol neben PDF, Zustand am Knopf */ .vp-listen td.aktion{white-space:nowrap} .vp-zk-drucken{min-width:0;width:2.6rem;padding:.5rem 0;margin-left:.4rem;border:1px solid var(--rand-stark);background:none;color:var(--text);cursor:pointer;vertical-align:middle} .vp-zk-drucken svg{width:18px;height:18px} .vp-zk-drucken:disabled{opacity:.5;cursor:wait} .vp-zk-drucken.ist-gut{border-color:#1e8e3e;color:#1e8e3e} .vp-zk-drucken.ist-schlecht{border-color:#c0392b;color:#c0392b} .vp-druckmeldung{display:block;font-size:.8rem;margin-top:.25rem;white-space:normal;text-align:right} .vp-listen .vp-zeilenknopf{min-height:2.5rem;box-sizing:border-box} /* D1320: Packtisch-Start - Vorschau-Picklisten unter den Versandstatus */ .pt-vorschau-titel{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-leise,#9aa5b1);margin:1.6rem 0 .6rem} /* D1322: Packtisch - Hinweis am angefangenen Mehrteiler */ .pt-sperre{margin:.8rem 0 0;padding:.6rem .8rem;border-radius:8px;background:rgba(192,57,43,.12);color:#e5483a;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:.8rem} /* D1324: Druckerseite neu gestaltet - Verbindung als Karte, je Beleg eine Karte mit Symbol und Zustand */ .dr-seite{max-width:68rem} .dr-verbindung{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:.6rem 2rem;align-items:start; background:var(--flaeche);border:1px solid var(--rand);border-radius:14px;padding:1.2rem 1.4rem;margin-bottom:1.6rem} .dr-verbindung h2{font-size:1.05rem;margin:0 0 .35rem} .dr-verbindung p{margin:0;color:var(--leise);font-size:.9rem;line-height:1.45} .dr-pruefung{width:100%;border-collapse:collapse;font-size:.88rem} .dr-pruefung td{padding:.3rem .5rem .3rem 0;border-bottom:1px solid var(--rand);vertical-align:top} .dr-pruefung tr:last-child td{border-bottom:0} .dr-pruefung .knopf{font-size:1rem;padding:.6rem 1.2rem} .dr-token{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;padding-top:.9rem;border-top:1px solid var(--rand)} .dr-token label{font-weight:700;font-size:.9rem} .dr-token input{flex:1;min-width:16rem;padding:.5rem .7rem;border-radius:8px} .dr-titel{font-size:.8rem;text-transform:uppercase;letter-spacing:.09em;color:var(--leise);margin:0 0 .7rem} .dr-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-bottom:1.6rem} .dr-karte{background:var(--flaeche);border:1px solid var(--rand);border-radius:14px;padding:1.1rem 1.2rem 1rem;display:flex;flex-direction:column;gap:.55rem} .dr-kopf{display:flex;align-items:flex-start;gap:.85rem} .dr-kopf h3{margin:0;font-size:1.05rem} .dr-kopf p{margin:.15rem 0 0;color:var(--leise);font-size:.85rem} .dr-kopf > div{flex:1;min-width:0} .dr-symbol{position:relative;flex:none;width:44px;height:44px;border-radius:12px;background:var(--akzent-bg);color:var(--akzent);display:flex;align-items:center;justify-content:center} .dr-symbol svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round} .dr-land{position:absolute;right:-7px;bottom:-6px;font-size:.66rem;line-height:1;padding:.2rem .32rem;border-radius:5px;background:var(--akzent);color:#1b1b1b;font-weight:800;letter-spacing:.03em;box-shadow:0 0 0 2px var(--flaeche)} .dr-zustand{flex:none;font-size:.75rem;font-weight:700;padding:.2rem .55rem;border-radius:999px} .dr-zustand.dr-an{background:var(--gut-bg);color:var(--gut)} .dr-zustand.dr-aus{background:var(--warn-bg);color:var(--warn)} .dr-label{font-size:.78rem;font-weight:700;color:var(--leise);margin-top:.3rem} .dr-wahl{width:100%;padding:.55rem .6rem;border-radius:8px;font-size:.95rem} .dr-aktion{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap} .dr-meldung{font-size:.82rem;color:var(--leise);min-width:0;overflow-wrap:anywhere} .dr-planb{font-size:.82rem;color:var(--leise);border-top:1px dashed var(--rand);padding-top:.5rem;margin-top:.15rem} .dr-planb summary{cursor:pointer} .dr-planb-zeile{display:flex;gap:.5rem;margin-top:.5rem} .dr-planb-zeile input{width:11rem;padding:.4rem .6rem;border-radius:8px} .dr-bericht{background:var(--flaeche);border:1px solid var(--rand);border-radius:14px;padding:.9rem 1.2rem} .dr-bericht summary{cursor:pointer;font-weight:700} .dr-bericht[open] summary{margin-bottom:.6rem} @media (max-width:900px){.dr-verbindung,.dr-raster{grid-template-columns:minmax(0,1fr)}} .dr-wahl,.dr-token input,.dr-planb-zeile input{background:var(--bg);color:var(--text);border:1px solid var(--rand-stark);outline:none} .dr-wahl:focus,.dr-token input:focus,.dr-planb-zeile input:focus{border-color:var(--akzent)} /* D1325: PDF und Drucker in der Picklistenzeile gleich hoch und auf einer Linie (Betreiber: "das drucker icon ist nicht auf der gleichen höhe wie der pdf button") */ .vp-listen td.aktion .vp-zeilenknopf{height:2.5rem;min-height:0;padding-top:0;padding-bottom:0;vertical-align:middle;box-sizing:border-box;line-height:1;font-family:inherit} /* D1326: Packtisch - Schrittanzeige Gescannt > Lieferschein > Gewicht > Paketschein, Balken, Abschluss rechtsbuendig */ .pt-fluss{margin:1rem 0 .4rem;padding:1rem 1.1rem 1.1rem;border:1px solid var(--rand);border-radius:14px;background:var(--bg)} .pt-balken{height:6px;border-radius:99px;background:var(--rand);overflow:hidden;margin-bottom:1rem} .pt-balken span{display:block;height:100%;border-radius:99px;background:var(--gut);transition:width .5s ease} .pt-balken-laeuft span{background:repeating-linear-gradient(45deg,var(--akzent) 0 10px,color-mix(in srgb,var(--akzent) 65%,#fff) 10px 20px); background-size:28px 28px;animation:pt-streifen .8s linear infinite} .pt-balken-fehler span{background:var(--schlecht)} @keyframes pt-streifen{to{background-position:28px 0}} .pt-schritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem} .pt-s{display:flex;align-items:center;gap:.65rem;min-width:0} .pt-s-icon{position:relative;flex:none;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:var(--flaeche);border:2px solid var(--rand);color:var(--leise);transition:all .3s} .pt-s-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round} .pt-s-icon em{position:absolute;inset:-6px;border-radius:50%;border:3px solid transparent;pointer-events:none} .pt-s-text{display:flex;flex-direction:column;min-width:0} .pt-s-text b{font-size:.95rem} .pt-s-text small{font-size:.78rem;color:var(--leise);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* fertig: gruen mit Haken-Marke */ .pt-s-ok .pt-s-icon{background:var(--gut-bg);border-color:var(--gut);color:var(--gut)} .pt-s-frisch .pt-s-icon{animation:pt-ploepp .35s ease} /* D1328: nur beim Wechsel zu fertig */ .pt-s-ok .pt-s-icon::after{content:"✓";position:absolute;right:-5px;bottom:-5px;width:18px;height:18px;border-radius:50%; background:var(--gut);color:#10231a;font-size:.7rem;font-weight:900;display:flex;align-items:center;justify-content:center} .pt-s-ok .pt-s-text small{color:var(--gut)} /* laeuft: Akzent, drehender Ring, Symbol pulsiert */ .pt-s-laeuft .pt-s-icon{border-color:var(--akzent);color:var(--akzent);background:var(--akzent-bg)} .pt-s-laeuft .pt-s-icon em{border-top-color:var(--akzent);border-right-color:var(--akzent);animation:pt-drehen .9s linear infinite} .pt-s-laeuft .pt-s-icon svg{animation:pt-pulsen 1.2s ease-in-out infinite} .pt-s-laeuft .pt-s-text small{color:var(--akzent)} /* jetzt: wartet auf die Eingabe */ .pt-s-jetzt .pt-s-icon{border-color:var(--akzent);color:var(--akzent);box-shadow:0 0 0 0 color-mix(in srgb,var(--akzent) 50%,transparent);animation:pt-ruf 1.6s ease-out infinite} .pt-s-jetzt .pt-s-text small{color:var(--text)} .pt-s-fehler .pt-s-icon{border-color:var(--schlecht);color:var(--schlecht);background:var(--schlecht-bg)} .pt-s-fehler .pt-s-text small{color:var(--schlecht);white-space:normal} .pt-s-aus{opacity:.45} @keyframes pt-drehen{to{transform:rotate(360deg)}} @keyframes pt-pulsen{50%{transform:scale(.82)}} @keyframes pt-ploepp{0%{transform:scale(.7)}70%{transform:scale(1.12)}100%{transform:scale(1)}} @keyframes pt-ruf{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--akzent) 55%,transparent)}100%{box-shadow:0 0 0 12px transparent}} @media (prefers-reduced-motion:reduce){.pt-s-icon,.pt-s-icon em,.pt-s-icon svg,.pt-balken span{animation:none!important}} /* Abschluss: rechtsbuendig, "Weiter" gross */ .pt-abschluss{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:.8rem;margin-top:1rem} .pt-abschluss .pt-nachdruck{margin-right:auto} .pt-abschluss.pt-fertig{justify-content:flex-end} .pt-gewicht{display:flex;align-items:center;gap:.7rem;margin:0} .pt-gewicht label{font-weight:700} .pt-kg{position:relative;display:inline-flex} .pt-kg input{width:8.5rem;height:3.2rem;padding:0 2.4rem 0 .9rem;font-size:1.5rem;font-weight:700;text-align:right;border-radius:10px; background:var(--bg);color:var(--text);border:2px solid var(--rand-stark);outline:none} .pt-kg input:focus{border-color:var(--akzent)} .pt-kg i{position:absolute;right:.8rem;top:50%;transform:translateY(-50%);font-style:normal;color:var(--leise);font-weight:700} .pt-weiter{display:inline-flex;align-items:center;gap:.5rem;height:3.2rem;padding:0 1.5rem;border:0;border-radius:10px;cursor:pointer; background:#c0392b;color:#fff;font-size:1.15rem;font-weight:800;font-family:inherit} .pt-weiter svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s} .pt-weiter:hover svg{transform:translateX(3px)} .pt-weiter:disabled{opacity:.55;cursor:wait} @media (max-width:1100px){.pt-schritte{grid-template-columns:repeat(2,minmax(0,1fr))}} .pt-s-laeuft .pt-s-text small{white-space:normal;line-height:1.25} /* D1328: Nachdrucken als kleiner Knopf im Schritt Lieferschein */ .pt-s-nach{display:inline-flex;align-items:center;gap:.3rem;align-self:flex-start;margin-top:.3rem;padding:.2rem .55rem;border-radius:99px; border:1px solid var(--rand-stark);background:none;color:var(--text);font:inherit;font-size:.75rem;font-weight:600;cursor:pointer} .pt-s-nach svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .pt-s-nach:hover{border-color:var(--akzent);color:var(--akzent)} .pt-s-nach[hidden]{display:none} .pt-s{align-items:flex-start}.pt-s-icon{margin-top:.1rem} /* D1329: Abschluss nach dem Versand - gruen, Sendungsnummer, Hauptknopf "Aus der Liste nehmen", Storno klein */ .pt-erledigt{display:flex;align-items:center;gap:1rem;margin-top:1rem;padding:1rem 1.2rem;border-radius:14px; background:var(--gut-bg);border:1px solid color-mix(in srgb,var(--gut) 45%,transparent)} .pt-erledigt-haken{flex:none;width:48px;height:48px;border-radius:50%;background:var(--gut);color:#10231a;display:flex;align-items:center;justify-content:center} .pt-erledigt-haken svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round} .pt-erledigt-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem} .pt-erledigt-text b{font-size:1.2rem;color:var(--gut)} .pt-erledigt-text code{font-size:1rem;font-weight:700;letter-spacing:.02em;background:none;padding:0;color:var(--text)} .pt-erledigt-text small{color:var(--leise);font-size:.82rem} .pt-erledigt-knoepfe{display:flex;flex-direction:column;align-items:flex-end;gap:.45rem} .pt-raus{display:inline-flex;align-items:center;gap:.45rem;height:2.8rem;padding:0 1.2rem;border-radius:10px;border:0;cursor:pointer; background:var(--gut);color:#10231a;font:inherit;font-weight:800;font-size:1rem} .pt-raus svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .pt-storno{border:0;background:none;color:var(--schlecht);font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;padding:.1rem .2rem;text-decoration:underline;text-underline-offset:3px} .pt-storno:hover{color:#ff8a80} /* D1332: Rueckfrage vor dem Versand einer nicht freigegebenen Pickliste */ .pt-frage{display:flex;gap:1.2rem;align-items:flex-start;max-width:46rem;margin:1.5rem auto;padding:1.5rem 1.6rem;border-radius:16px; background:var(--flaeche);border:1px solid color-mix(in srgb,var(--warn) 50%,transparent)} .pt-frage-zeichen{flex:none;width:52px;height:52px;border-radius:50%;background:var(--warn-bg);color:var(--warn);display:flex;align-items:center;justify-content:center} .pt-frage-zeichen svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round} .pt-frage-text h2{margin:0 0 .6rem;font-size:1.2rem} .pt-frage-text p{margin:0 0 .7rem;line-height:1.5} .pt-frage-frage{font-weight:700;font-size:1.05rem} .pt-frage-knoepfe{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:1rem 0} .pt-frage-knoepfe form{margin:0} .pt-nichtfrei{display:inline-flex;align-items:center;gap:.7rem} .pt-zk-frage{border:1px solid var(--warn);color:var(--warn)} .pt-frage-knoepfe .knopf-leise{text-decoration:none;height:3.2rem;display:inline-flex;align-items:center;padding:0 1.2rem;border-radius:10px;font-size:1rem} /* D1334: Manuelle Pickliste - Knopf in den Versandprozessen und Auswahl des Status */ .vp-knoepfe{grid-template-columns:1fr 1fr 1fr;max-width:66rem} .vp-manuell{background:var(--flaeche);border:1px solid var(--rand-stark);color:var(--text)} .mp-hinweis{max-width:52rem;color:var(--leise);line-height:1.5;margin:.2rem 0 1.2rem} .mp-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.7rem;max-width:72rem} .mp-form{margin:0;display:contents} .mp-status{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;padding:.9rem 1rem;border-radius:12px;text-align:left; background:var(--flaeche);border:1px solid var(--rand);color:var(--text);font:inherit;cursor:pointer;transition:border-color .15s,transform .15s} button.mp-status:hover{border-color:var(--akzent);transform:translateY(-1px)} .mp-status b{font-size:1rem} .mp-status span{font-size:.85rem;color:var(--leise)} .mp-belegt{opacity:.5;cursor:default} .mp-belegt small{font-size:.78rem;color:var(--warn)} /* D1335: Versand-Start in drei Spalten (Versand, Externe Marktplaetze, Express). Eigene Namen pt-drei* (D1337): pt-spalten ist das Layout des Packtischs - die erste Fassung hatte es ueberschrieben */ .pt-drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;align-items:start} .pt-drei-spalte h2{display:flex;align-items:center;gap:.5rem;margin:0 0 .7rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--leise)} .pt-drei-spalte h2 span{font-size:.75rem;padding:.1rem .5rem;border-radius:99px;background:var(--flaeche);border:1px solid var(--rand);color:var(--text);letter-spacing:0} .pt-drei-spalte .pt-karte{margin-bottom:.6rem} .pt-drei-spalte .pt-karte .pt-nichtfrei{flex-direction:column;align-items:flex-end;gap:.35rem} .pt-drei-leer{padding:1.2rem;border:1px dashed var(--rand);border-radius:12px;color:var(--leise);text-align:center;font-size:.9rem} @media (max-width:1100px){.pt-drei{grid-template-columns:minmax(0,1fr)}} /* D1337: GO! - kein Storno im Packtisch */ .pt-storno-nein{font-size:.78rem;color:var(--leise)} /* D1345: Gewicht in Gramm (breiteres Feld), "Auftrag zuruecksetzen" links im Abschluss */ .pt-kg input{width:9.5rem} .pt-zurueck-knopf{display:inline-flex;align-items:center;gap:.45rem;margin-right:auto;height:2.6rem;padding:0 1rem;border-radius:10px; border:1px solid var(--rand-stark);background:none;color:var(--text);font:inherit;font-weight:600;cursor:pointer} .pt-zurueck-knopf svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .pt-zurueck-knopf:hover{border-color:var(--akzent);color:var(--akzent)} /* D1346: Artikel ohne Barcode - was man stattdessen eingibt */ .pt-ohne{font-size:.8rem;color:var(--warn);line-height:1.35} .pt-ohne b{color:var(--text)} /* D1347: Artikel ohne Barcode mit einem Klick abhaken */ .pt-abhaken{display:inline-flex;align-items:center;gap:.4rem;height:2.4rem;padding:0 .9rem;border-radius:10px;border:0;cursor:pointer; background:var(--gut);color:#10231a;font:inherit;font-weight:800;font-size:.95rem;white-space:nowrap} .pt-abhaken svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round} .pt-abhaken small{font-weight:600} .pt-abhaken:disabled{opacity:.5;cursor:wait} /* D1351: vierte Spalte Drittland */ .pt-drei{grid-template-columns:repeat(4,minmax(0,1fr))} @media (max-width:1100px){.pt-drei{grid-template-columns:minmax(0,1fr)}} /* D1353: fuenfte Spalte Versand mit HS */ .pt-drei{grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem} @media (max-width:1300px){.pt-drei{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:900px){.pt-drei{grid-template-columns:minmax(0,1fr)}} /* D1357: Versandprozesse = eine Seite - Scanfeld als Knopf-Kachel, Abschnittstitel */ .vp-scan{background:var(--flaeche);border:1px solid var(--rand-stark);color:var(--text);cursor:text} .vp-scan label{font-weight:800;font-size:1.05rem;display:flex;flex-direction:column;gap:.1rem} .vp-scan input{margin-top:.35rem;width:100%;padding:.45rem .6rem;border-radius:8px;border:2px solid var(--rand-stark);background:var(--bg);color:var(--text);font:inherit;font-size:1rem} .vp-scan input:focus{border-color:#c0392b;outline:none} .vp-titel{font-size:.8rem;text-transform:uppercase;letter-spacing:.09em;color:var(--leise);margin:1.4rem 0 .7rem} /* D1357: Scanfeld als eigene Kachel (die Knopfleiste loest Formulare sonst auf), Karten in den Spalten senkrecht */ .vp-knoepfe form.vp-scan{display:flex;flex-direction:column;justify-content:center} .pt-drei-spalte .pt-karte{flex-direction:column;align-items:stretch;gap:.6rem;padding:.8rem .9rem} .pt-drei-spalte .pt-karte .vp-zeilenknopf{width:100%;min-width:0} .pt-drei-spalte .pt-karte .pt-nichtfrei{flex-direction:column;align-items:stretch} .pt-drei-spalte .pt-liste-text b{font-size:1rem} /* D1358: je Spalte "Pickliste erstellen" */ .pt-spalte-pick{margin:0 0 .7rem} .pt-spalte-pick button{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;padding:.6rem .8rem;border-radius:10px;border:0; background:#c0392b;color:#fff;font:inherit;font-weight:800;font-size:.95rem;cursor:pointer;text-align:left} .pt-spalte-pick button small{font-weight:500;font-size:.75rem;opacity:.9} .pt-spalte-pick button:disabled{background:var(--flaeche);color:var(--leise);border:1px dashed var(--rand);cursor:default} /* D1359: Spalten gleich breit (auch wenn welche ausgeblendet sind), Titel einzeilig - alles beginnt auf einer Hoehe */ .pt-drei{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1rem} @media (max-width:900px){.pt-drei{grid-template-columns:minmax(0,1fr)}} .pt-drei-spalte h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.6rem;margin-bottom:.6rem} .pt-drei-spalte h2 span{flex:none} /* D1360: je Status "Pickliste" neben "Versand"; oben nur noch zwei Kacheln */ .pt-karte-knoepfe{display:grid;grid-template-columns:1fr 1.4fr;gap:.5rem} .pt-karte-knoepfe form{margin:0;display:contents} .pt-karte-knoepfe .vp-zeilenknopf{width:100%;min-width:0;height:2.5rem;padding:0 .6rem;box-sizing:border-box} .pt-zk-pick{border:1px solid var(--rand-stark);background:none;color:var(--text);font:inherit;font-weight:700;cursor:pointer} .pt-zk-pick:hover{border-color:var(--akzent);color:var(--akzent)} .pt-karte-hinweis{align-self:flex-start} .vp-knoepfe{grid-template-columns:1fr 1fr;max-width:44rem} /* D1361: Versand-Spalten liebevoller - breiter, je Versandart Karte mit Farbe und Symbol, Status-Karten mit grosser Zahl */ .pt-drei{grid-template-columns:repeat(auto-fill,minmax(22rem,1fr));gap:1.1rem} .pt-drei-spalte{--art:#c0392b;background:var(--flaeche);border:1px solid var(--rand);border-top:4px solid var(--art);border-radius:16px;padding:1rem 1rem 1.1rem;display:flex;flex-direction:column;gap:.75rem} .pt-art-markt{--art:#3b82f6}.pt-art-express{--art:#f59e0b}.pt-art-drittland{--art:#8b5cf6}.pt-art-hs{--art:#22c55e} .pt-sp-kopf{display:flex;align-items:center;gap:.75rem} .pt-sp-symbol{flex:none;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center; background:color-mix(in srgb,var(--art) 18%,transparent);color:var(--art)} .pt-sp-symbol svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round} .pt-sp-titel{min-width:0} .pt-sp-titel h2{margin:0;font-size:1.1rem;text-transform:none;letter-spacing:0;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:0} .pt-sp-titel small{color:var(--leise);font-size:.82rem} .pt-drei-spalte .pt-spalte-pick{margin:0} .pt-drei-spalte .pt-spalte-pick button{background:var(--art);color:#fff;flex-direction:row;align-items:center;justify-content:space-between;gap:.8rem;padding:.65rem .9rem} .pt-art-express .pt-spalte-pick button{color:#1b1b1b} .pt-drei-spalte .pt-spalte-pick button small{text-align:right} .pt-drei-spalte .pt-spalte-pick button:disabled{background:none;color:var(--leise);border:1px dashed var(--rand)} .pt-st{background:var(--bg);border:1px solid var(--rand);border-left:3px solid var(--art);border-radius:12px;padding:.8rem .9rem;display:flex;flex-direction:column;gap:.65rem} .pt-st-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem} .pt-st-name{display:flex;flex-direction:column;gap:.15rem;min-width:0} .pt-st-name b{font-size:1.05rem;line-height:1.25} .pt-st-name small{color:var(--leise);font-size:.8rem} .pt-st-zahl{flex:none;display:flex;flex-direction:column;align-items:flex-end;line-height:1} .pt-st-zahl b{font-size:1.9rem;font-weight:800;color:var(--art)} .pt-st-zahl small{font-size:.72rem;color:var(--leise);margin-top:.15rem} .pt-st .pt-karte-knoepfe{grid-template-columns:1fr 1.5fr} /* D1362: keine farbigen Raender mehr an Spalten und Status-Karten (Betreiber) */ .pt-drei-spalte{border-top:1px solid var(--rand)} .pt-st{border-left:1px solid var(--rand)} /* D1362: Fortschritt des Tages in Abschnitten */ .vp-fortschritt{display:flex;align-items:center;gap:1.2rem;margin:.2rem 0 .8rem;padding:.8rem 1rem;background:var(--flaeche);border:1px solid var(--rand);border-radius:12px} .vp-fs-zahl{flex:none;display:flex;flex-direction:column;line-height:1.1;min-width:9rem} .vp-fs-zahl b{font-size:1.6rem;font-weight:800;color:var(--gut)} .vp-fs-zahl span{font-size:.8rem;color:var(--leise)} .vp-fs-rechts{flex:1;min-width:0;display:flex;flex-direction:column;gap:.5rem} .vp-fs-balken{display:flex;height:14px;border-radius:99px;overflow:hidden;background:var(--rand);gap:2px} .vp-fs-balken span{display:block;height:100%;min-width:4px;transition:width .4s} .vp-fs-legende{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-size:.8rem;color:var(--leise)} .vp-fs-legende span{display:inline-flex;align-items:center;gap:.4rem} .vp-fs-legende i{width:10px;height:10px;border-radius:3px;display:inline-block} .vp-fs-ausgebucht{background:#22c55e}.vp-fs-versandt{background:#86efac}.vp-fs-gepickt{background:#3b82f6} .vp-fs-auf_liste{background:#f59e0b}.vp-fs-ohne_liste{background:#6b7280} /* D1363: keine Symbole, eine Farbe fuer alle Versandarten (Betreiber); mehr Luft zwischen Kennzahlen und Fortschritt */ .pt-drei-spalte,.pt-art-markt,.pt-art-express,.pt-art-drittland,.pt-art-hs{--art:#c0392b} .pt-art-express .pt-spalte-pick button{color:#fff} .pt-st-zahl b{color:var(--text)} .vp-fortschritt{margin-top:1.1rem;margin-bottom:1.1rem} /* D1373, Betreiber 22.10.2026: "die artikelpostionen im versand ... duerfen gerne noch etwas groesser sein, damit man sie auch mit abstand vom bildschirm erkennt, weil man ja vor dem wagen steht. also das bild ein bisschen groesser und die schrift deutlich groesser" - Bild 56 -> 96 px, Schrift etwa doppelt so gross; gilt nur fuer .pt-pos am Packtisch. */ .pt-pos td{font-size:1.75rem;line-height:1.25;padding-top:.7rem;padding-bottom:.7rem} .pt-pos th{font-size:1rem} .pt-pos td b{font-size:2rem} .pt-pos td .marke-txt{font-size:1.45rem} .pt-pos td:first-child{font-size:2.3rem} .pt-pos .pt-bild{width:96px;height:96px;border-radius:10px} .pt-pos td:nth-child(2),.pt-pos th:nth-child(2){width:104px!important} .pt-pos .pt-ean{font-size:1.6rem} .pt-pos .pt-zahl{font-size:2rem} .pt-pos .pt-zahl b{font-size:2.6rem} .pt-pos .pt-ohne{font-size:1.05rem} .pt-pos .pt-abhaken{height:3.4rem;font-size:1.35rem;padding:0 1.2rem} .pt-pos .pt-abhaken svg{width:22px;height:22px} /* D1373: so gross muss der Name umbrechen duerfen, sonst laeuft die Tabelle neben der Auftragsliste ueber den Rand */ .pt-pos td:nth-child(3){white-space:normal;overflow-wrap:anywhere} .pt-pos .pt-ean,.pt-pos .pt-zahl{white-space:nowrap} /* D1380: Druckbruecke - Schild unten links auf den Versand-Seiten des Packtisch-Rechners, Schalter auf der Druckerseite */ .db-schild{position:fixed;left:1rem;bottom:1rem;z-index:40;display:flex;align-items:center;gap:.5rem;padding:.45rem .8rem;border-radius:10px; background:var(--bg);border:1px solid var(--rand-stark);box-shadow:0 2px 8px rgba(0,0,0,.15);font-size:.85rem;color:var(--text)} .db-schild .db-punkt{width:10px;height:10px;border-radius:50%;background:#1e8e3e;flex:none} .db-schild.db-fehler .db-punkt{background:#c0392b} .db-schild .knopf-leise{padding:.2rem .6rem;font-size:.8rem} .dr-bruecke label{display:flex;align-items:center;gap:.5rem;cursor:pointer} /* Betreiber 22.10.2026: "Am Rechner kann die Meldung mit der Bruecke in den Header rechts" - im Subheader, ohne Schatten */ .subnav-rechts .db-schild.db-im-kopf{position:static;align-self:center;margin-right:.6rem;box-shadow:none;padding:.3rem .65rem;font-size:.8rem;white-space:nowrap;max-width:28rem;overflow:hidden;text-overflow:ellipsis} .subnav-rechts .db-schild.db-im-kopf span{overflow:hidden;text-overflow:ellipsis} .dr-bruecke input{width:1.1rem;height:1.1rem} /* D1403: Wareneingang als dritte Kachel neben "Pickliste scannen" */ .vp-knoepfe.vp-drei{grid-template-columns:1fr 1fr 1fr;max-width:66rem} .vp-we{background:#1e7b45;color:#fff} .vp-we:hover{background:#22914f} /* D1404: Symbole an den Hauptkacheln der Versandprozesse */ .vp-knopf.vp-mit-ik{flex-direction:row;align-items:center;gap:.85rem} .vp-scan label.vp-mit-ik{flex-direction:row;align-items:center;gap:.85rem} .vp-ik{flex:none;width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.16)} .vp-scan .vp-ik{background:var(--bg)} .vp-ik svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .vp-tx{display:flex;flex-direction:column;gap:.15rem;min-width:0} .vp-tx small{font-size:.8rem;font-weight:500;opacity:.9} /* D1406: "Versand starten" - Symbol mittig links, Feld buendig mit dem Text */ .vp-knoepfe form.vp-scan.vp-scan-zeile{flex-direction:row;align-items:center;gap:.85rem} .vp-scan-spalte{flex:1;min-width:0;display:flex;flex-direction:column} .vp-scan-spalte label{cursor:text} /* D1409: Druckknopf neben PDF in den Status-Karten; schon gedruckt = gruen eingerahmt */ .pt-pdfdruck{display:inline-flex;align-items:center} .vp-zk-drucken.ist-gedruckt{border:2px solid var(--gut);color:var(--gut)} /* D1410: Ueberschrift der Versandprozesse etwas groesser (nur diese Seite, die Standzeile bleibt) */ .subnav-kennung.vh-titel{font-size:1.45rem;line-height:1.2} /* D1411: Ueberschrift links in der Kopfzeile, senkrecht mittig */ .subnav-links .vh-titel{align-self:center} .vh-kopf .subnav-zeile{min-height:2.9rem} /* D1411: ohne Standzeile die vorige Hoehe halten (Knoepfe rechts) */ /* D1414: Meldung des Druckknopfs in den Status-Karten als Schild UNTER den Knoepfen - vorher stand sie als Text in der Knopfzeile und schob PDF/Drucker/Versand auseinander (Betreiber: "wenn ich auf den drucker klicke, kommt eine meldung, die das bild zerstoert") */ .pt-pdfdruck{position:relative} .pt-pdfdruck .vp-druckmeldung{position:absolute;left:0;top:calc(100% + .35rem);z-index:5;width:max-content;max-width:16rem; padding:.3rem .55rem;border-radius:8px;background:var(--ueber);border:1px solid var(--rand-stark);font-size:.8rem;line-height:1.3; box-shadow:0 4px 14px rgba(0,0,0,.35);white-space:normal} .pt-pdfdruck .vp-druckmeldung:empty{display:none} /* D1417: Pickwagen an der Status-Karte */ .pt-wagen{display:inline-block;margin-top:.3rem;padding:.1rem .5rem;border-radius:6px;background:var(--akzent-bg);color:var(--akzent-text); font-size:.8rem;font-weight:800} /* D1467: E-Mail-Vorlagen */ .mv-liste{display:grid;gap:.8rem;max-width:56rem;margin-bottom:2rem} .mv-karte{padding:1rem 1.1rem;border-radius:12px;background:var(--karte,#fff);box-shadow:inset 0 0 0 1px var(--linie,#e3e3e8)} .mv-kopf{display:flex;align-items:center;justify-content:space-between;gap:.8rem} .mv-kopf h3{margin:0;font-size:1.05rem} .mv-status{flex:none;font-size:.78rem;font-weight:600;padding:.15rem .6rem;border-radius:999px} .mv-aktiv{background:#e3f4e8;color:#14532d}.mv-intern{background:#e8eefb;color:#1d3f8a}.mv-aus{background:#fff2d9;color:#7a4a00} .mv-anlass{margin:.35rem 0 0;font-size:.9rem;color:var(--text-2,#666)} .mv-info{margin:.35rem 0 0;display:flex;flex-wrap:wrap;gap:.2rem 1.2rem;font-size:.85rem;color:var(--text-2,#666)} .mv-fassungen{list-style:none;margin:.7rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem} .mv-fassungen li{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .5rem .3rem .75rem;border-radius:999px;background:var(--kopf,#f2f2f5)} .mv-fassungen a{font-weight:600;text-decoration:none} .mv-fassungen a.mv-text{font-weight:400;font-size:.8rem;color:var(--text-2,#666);text-decoration:underline} .mv-karte{color:#1d1d1f}.mv-kopf h3{color:#1d1d1f}.mv-anlass,.mv-info{color:#5f5f66} .mv-fassungen li{background:#f2f2f5}.mv-fassungen a{color:#b81c15}.mv-fassungen a.mv-text{color:#5f5f66}