/* ================================================================== Reeky-Week · reeky.css Lieferung 257 · reeky-L82.css · ERSETZT reeky-L81.css ------------------------------------------------------------------ L82 · WIE L81, PLUS: rk-kopfklapp - Filter und Schreibwege liegen hinter einer Klappe, damit die Liste frueher beginnt. Der Kopf traegt jetzt eine Zeile: die Suche. Alles Uebrige ist einen Tipp entfernt. SETZT Rezepte-L257 VORAUS. Lieferung 256 · reeky-L81.css · ERSETZTE reeky-L80.css ------------------------------------------------------------------ L81 · WIE L80, PLUS: rk-klappliste - EINE Karte fuer alle Klappen, getrennt durch eine Linie. Bis L80 stand jede Klappe in einer eigenen rk-karte: 12 px Polsterung plus 10 px Abstand, dreizehnmal. Ueber 280 px, die nichts sagen, und dreizehn graue Bloecke, die alle gleich laut sind. Eine Liste ist eine Sache und gehoert in einen Traeger. DAZU: die Filterchips schmaler und weiss. Sechs pastellblaue Bloecke leuchteten gleich stark, obwohl fuenf davon aus waren - eine Farbe, die nichts unterscheidet, ist Laerm. Gefuellt ist jetzt nur, was an ist. SETZT Rezepte-L256 und Vorrat-L256 VORAUS. Lieferung 255 · reeky-L80.css · ERSETZTE reeky-L79.css ------------------------------------------------------------------ L80 · WIE L79, ABER die Klappenzeile ist eine Spur kleiner. .95rem war die Groesse einer Ueberschrift; bei dreizehn Zeilen untereinander wurde die Seite dadurch wuchtig. .88rem ist dieselbe Groesse wie die Gerichte in "Diese Woche" - zwei Listen, die dasselbe tun, sollen auch gleich klingen. Lieferung 254 · reeky-L79.css · ERSETZTE reeky-L78.css ------------------------------------------------------------------ L79 · WIE L78, ABER der Regalname ist eine Spur leichter. 700 war dieselbe Staerke wie die Postennamen darunter - bei zehn Regalen untereinander wurde die Seite dadurch schwer. 600 hebt den Namen noch ab, ohne zu druecken. SETZT Vorrat-L254 VORAUS. Lieferung 253 · reeky-L78.css · ERSETZTE reeky-L77.css ------------------------------------------------------------------ L78 · WIE L77, ABER unter dem Namen rk-regalklapp. L77 nannte die Vorratsklappe rk-regal - den Namen gibt es seit v13 schon, als Kategorieueberschrift der Einkaufsliste: gross, blau, unterstrichen. text-transform und text-decoration vererben sich, also stand der ganze Klappeninhalt in Grossbuchstaben und unterstrichen da. Die alte Regel bleibt unangetastet - die Einkaufsliste braucht sie an vier Stellen. Die neue setzt beides ausdruecklich zurueck, damit ein dritter Namensvetter nicht dasselbe anrichtet. SETZT Vorrat-L253 VORAUS. Lieferung 252 · reeky-L77.css · ERSETZTE reeky-L76.css ------------------------------------------------------------------ L77 · WIE L76, PLUS: die Regale im Vorrat sind Klappen im Aussehen der Tage im Plan. Dieselbe Zeile, dieselbe Plakette, dasselbe Zuklappen. Zwei Listen, die dasselbe tun, sollen auch gleich aussehen - sonst muss man an jeder neu lernen, wo man tippt. SETZT Vorrat-L252 VORAUS. Lieferung 250 · reeky-L76.css · ERSETZTE reeky-L75.css ------------------------------------------------------------------ L76 · WIE L75, PLUS: die zugeklappte Tageszeile im Plan traegt die Gerichte, und der Heute-Punkt steht VOR der Zahl. Der Kopf der Klappe ist jetzt zweizeilig: oben Datum und Zahl, darunter die Titel. Aufgeklappt faellt die Titelzeile weg - dort stehen die Gerichte ohnehin ausfuehrlich darunter, und zweimal dasselbe ist einmal zu viel. SETZT Plan-L250 VORAUS. Lieferung 249 · reeky-L75.css · ERSETZTE reeky-L74.css ------------------------------------------------------------------ L75 · WIE L74, PLUS: ein blauer Punkt am heutigen Tag im Plan. Die Umrandung hat der heutige Tag schon. Sie ist aber ein duenner Strich um eine Karte, die zwischen sechs gleich aussehenden steht - zugeklappt geht sie unter, und "heute" steht nur klein im Datum. Der Punkt sitzt neben der Zahl, also dort, wo das Auge beim Ueberfliegen der Zeilen ohnehin entlanggeht. NUR STIL, KEIN MARKUP. Die Klasse rk-karte--heute steht seit L179 im HTML; hier kommt nur eine Regel dazu. Lieferung 248 · reeky-L74.css · ERSETZTE reeky-L73.css ------------------------------------------------------------------ L74 · WIE L73, PLUS: der Gerichtstitel in "Diese Woche" und im Plan fuehrt zum Rezept. Der Verweis traegt die Farbe des Textes, nicht die des Akzents: in einer Liste, in der JEDE Zeile ein Verweis ist, waere eine Reihe blauer Titel Laerm. Angetippt faerbt er sich, und die Zeile ist ohnehin ganz anfassbar - das ist die Auskunft. SETZT Uebersicht-L248 und Plan-L248 VORAUS. Lieferung 247 · reeky-L73.css · ERSETZTE reeky-L72.css ------------------------------------------------------------------ L73 · WIE L72, PLUS: die Gerichte in "Diese Woche" stehen normal statt fett und eine Spur kleiner. Die Regel setzte kein font-weight und erbte damit, was das umgebende Element vorgab. Wo nichts steht, entscheidet der Zufall der Verschachtelung - also steht es jetzt da. Lieferung 246 · reeky-L72.css · ERSETZTE reeky-L71.css ------------------------------------------------------------------ L72 · WIE L71, PLUS: "Diese Woche" auf der Startseite ist eine Tabelle. Drei Spalten - Datum, Mahlzeit, Gericht - ueber die ganze Liste gleich breit. SETZT Uebersicht-L246 VORAUS. Lieferung 245 · reeky-L71.css · ERSETZTE reeky-L70.css ------------------------------------------------------------------ L71 · WIE L70, PLUS: die Reiterregeln gelten auch fuer . Ansicht-L245 gibt den Reiter der EIGENEN Seite als aus statt als - ein Verweis dorthin, wo man schon steht, haelt nur den Fokus fest, und solange er das tut, zeigt Chrome unten links seine Adresse an. Ohne diese Ergaenzung waere der aktive Reiter unbeschriftet und unformatiert: jede Regel hier zielte auf "a". Es ist derselbe Satz Regeln, nur um den zweiten Waehler erweitert - nichts an Groesse, Farbe oder Abstand geaendert. SETZT Ansicht-L245 VORAUS. Lieferung 244 · reeky-L70.css · ERSETZTE reeky-L69.css ------------------------------------------------------------------ L70 · WIE L69, PLUS: Luft unter der Kachelreihe. Seit die Kacheln oben stehen (Uebersicht-L243), stiess der Warnkasten unmittelbar an sie - drei Kaesten und ein vierter direkt darunter, ohne dass etwas sagt, wo der Stand aufhoert und die Meldung anfaengt. Der Abstand ist die Trennung; eine Linie waere eine Behauptung mehr auf einer Seite, die schon genug Kanten hat. SETZT Uebersicht-L243 VORAUS. Lieferung 237 · reeky-L69.css · ERSETZTE reeky-L68.css ------------------------------------------------------------------ L69 · WIE L68, PLUS: die Mahlzeitwahl je Tag in der Erzeugungsmaske. Drei kleine Haken unter Wunsch und Personen, nebeneinander statt untereinander - sonst waeren es bei sieben Tagen einundzwanzig Zeilen und man scrollte zweimal, um an "Plan erstellen" zu kommen. NICHT IM PAAR. rk-paar--tag gibt seinem letzten Kind 5,2rem - die Spalte fuer die Personenzahl. Die Haken stehen deshalb darunter als eigener Block. SETZT Plan-L237 VORAUS. Lieferung 224 · reeky-L68.css · ERSETZTE reeky-L65.css ------------------------------------------------------------------ L68 · WIE L65, PLUS: der Laufbalken der Rezeptstufe pendelt wie der der Titelstufe - in DERSELBEN Farbe. L67 hatte das Pendel halbdurchsichtig weiss gemacht, damit es den Fortschritt nicht verdeckt. Auf der ohnehin fast weissen Spur war davon kaum etwas zu sehen - genau bei 0 %, wo es am noetigsten ist. Das Pendel traegt jetzt --pastell und ist damit zeichengleich zu dem der Titelstufe. VERDECKEN IST HIER KEIN PROBLEM: Pendel und Fuellung haben dieselbe Farbe. Laeuft das Pendel ueber den fertigen Teil, verschmelzen beide; laeuft es auf der leeren Spur, steht es kraeftig da. Der Fortschritt bleibt als Sockel liegen. L67 · WIE L65, PLUS: der Laufbalken der Rezeptstufe pendelt wie der der Titelstufe. Bisher stand er bei 0 % still und war null Pixel breit - der erste Blick auf die Wartemaske zeigte einen leeren Kasten, obwohl der Leseaufruf schon lief. DIESELBE BEWEGUNG, NICHT EINE ZWEITE. L66 hatte hier ein laufendes Streifenmuster - technisch richtig, aber eine zweite Bewegungssprache neben dem Pendel. Zwei Sprachen fuer dieselbe Aussage ("es arbeitet") sind eine zu viel. Jetzt pendelt beides. DER FORTSCHRITT BLEIBT TROTZDEM. Beim Pendel der Titelstufe ERSETZT die Bewegung den Balken, weil dort niemand weiss, wie viele Rezepte kommen. In der Rezeptstufe ist die Zaehlung bekannt und wird gebraucht: der gefuellte Teil bleibt liegen und zeigt sie, das Pendel laeuft als eigenes Stueck DARUEBER. Bei 0 % ist nur das Pendel zu sehen - ein Stummel waere ein Fortschritt, den es nicht gibt. KEIN JAVASCRIPT, KEIN NEUES MARKUP. Das Pendel ist ::after auf der Spur; die Spur bekommt dafuer position:relative. prefers-reduced-motion schaltet die Bewegung ab - fuer beide Balken, auch fuer das Pendel, das bis L65 keine Ruecksicht nahm. SETZT Import-L222 VORAUS (Klasse .rk-lauf--arbeitet). L65 · WIE L64, PLUS: Plantage als Klappe mit Zahl, ruhigere Knopfreihe am Gericht. SETZT Plan-L181 VORAUS. L64 · WIE L63, PLUS: die Zutatenzeile passt in die Karte statt rechts herauszuragen. L65 · WIE L64, PLUS: Plantage als Klappe mit Zahl, ruhigere Knopfreihe am Gericht. SETZT Plan-L181 VORAUS. L64 · WIE L63, PLUS: das Zutatfeld laeuft nicht mehr aus der Karte heraus. L63 · WIE L62, PLUS: lange Woerter in den Zahlkacheln brechen um statt abgeschnitten zu werden ("Anspruchsvoll"). L62 · WIE L61, PLUS: die Zutatenzeile bekommt das Feldbild der uebrigen Maske statt Systemkaesten. L61 · WIE L60, PLUS: Sprungziele rutschen nicht mehr unter den klebenden Kopf. SETZT Plan-L167 VORAUS (Marke #topf). L60 · WIE L59, PLUS: der Hauptknopf in der Ablagezone traegt wieder Markenfarbe, der Dateiname darunter ist kleiner. L59 · WIE L58, PLUS: Rezeptmaske zweispaltig bei Jahreszeit und "Passt bei", Speichern und Loeschen als Paar. SETZT Rezepte-L145 VORAUS. L58 · WIE L57, PLUS: "+7 T." bricht nicht mehr um, und die Bildkachel haengt oben statt mittig. L57 · WIE L56, PLUS: Hinweistexte auf 10px, Haken gruen und Kreuz rot bei gleicher Groesse. SETZT Vorrat-L141 VORAUS. L56 · WIE L55, PLUS: "Mehr Filter" reiht sich in die Chipzeile ein und nimmt nur im offenen Zustand eine eigene Zeile. SETZT Rezepte-L137 VORAUS. L55 · WIE L54, PLUS: Luft zwischen Kopfleiste und Inhalt. L54 · WIE L53, PLUS: der Ausklapper-Chip steht mittig statt links. SETZT nichts voraus - reine Stilregel. L53 · WIE L52, PLUS: die Passkey-Huelle in einer Knopfreihe wird per display:contents aus der Anordnung genommen, damit Anmelden und Passkey nebeneinander stehen. SETZT Anmeldung-L129 VORAUS. L52 · WIE L51, PLUS: die Fussleiste traegt sieben Wege auch auf schmalen Geraeten, ohne dass Beschriftungen ineinanderlaufen. Schrift 9px, engere Laufweite, kleineres Polster; ab 390px wieder 10px. SETZT Ansicht-L127 VORAUS ("Einkauf"). L51 · WIE L49, PLUS: unten klebt NUR die Fussleiste mit den sieben Wegen. Die Copyright-Zeile ist unter den Seiten weg und steht ab Melden-L125 auf /melden. Siehe Block L51 am Dateiende. SETZT Ansicht-L124 VORAUS. (L50 war ein Zwischenschritt mit zwei Baendern uebereinander und ist zurueckgenommen.) L49 · WIE L48, PLUS zwei Plakettenfarben fuer die Vorratszeile (.rk-plakette--rot, .rk-plakette--orange - gebraucht von Vorrat-L118). Sonst ist die Datei zeichengleich mit L48; wer L48 schon eingespielt hat, tauscht nur diese eine Datei. L48 · DAS AUSSEHEN, NACHGEZOGEN. NUR STIL, KEIN MARKUP. Am ausgelieferten HTML ist kein Zeichen geaendert; wer diese Datei zurueckspielt, hat wieder L47 und sonst nichts. DER ANLASS ist ein Befund, kein Geschmack. Am 21.08. wurden alle 22 Wege durchlaufen und jede Klasse im erzeugten HTML gegen das Stylesheet gehalten. Ergebnis: FUENFZEHN Klassen stehen im Markup und hatten in L47 keine Regel. Rezepte.php steht auf Lieferung 103, das Stylesheet auf L47 - die Seite gibt seit L103 Plaketten aus, das Stylesheet kannte sie nicht, und sie liefen als nackter Fliesstext mit. Genau davor warnt der Kommentar zu Lieferung 6e. NEUN AENDERUNGEN AM BESTAND, jede mit Einzeltrefferwaechter gesetzt, dazu zwei Bloecke am Dateiende (spaeter gewinnt - die Bauart, mit der schon L47 den leisen Klapp geheilt hat). 1 Die Hauptnavigation wird zur FUSSLEISTE. Sie traegt seit Ansicht-L98 die Klasse rk-fussleiste; nur sie klebt unten. Die Filterleisten bleiben Chips. 2 Die Fusszeile klebt NICHT mehr - zwei feste Baender uebereinander waeren eines zu viel. 3 Wortmarke im Kopf 34 auf 26 px; die Startmarke bleibt 48. 4 Kopfzeichen mit Flaeche beim Zeigen und sichtbarem Zustand. 5 Karten enger: 16 auf 14 px. 6 Meldungen mit Farbkante links - die Flaeche allein ist auf dem Handy bei Sonne nicht zu unterscheiden. 7 ZUGABEN: rk-kal-geplant (Bild 10) und rk-nebenwege (Bild 5). 8 DIE OBERFLAECHE: heller Seitengrund, weisse Karten, klebender Kopf, dichtere Zeilen. 9 DIE FEHLENDEN FUENFZEHN: alles, was die Seiten ausgeben und L47 nicht kannte - Plaketten voran. GESCHICHTE: Lieferung 61 · reeky-L38.css · ERSETZT reeky-L37.css L38 (D7, GOTT 18.08.): Laufbalken .rk-lauf fuer die Import- Wartemaske. Fester Balken mit Breite aus PHP (der Wert ist Zaehlung, kein Stil); .rk-lauf--sucht pendelt fuer die Titelstufe, deren Umfang vorab unbekannt ist. Lieferung 60 · reeky-L37.css · ERSETZT reeky-L36.css L37 (D5, GOTT 18.08.): Kopf-Zeichenreihe fuenfspaltig (Kalender nach den Einkaufstagen, Ansicht-L58); .rk-pastell faerbt das Kalenderzeichen mit --pastell. Kontrast 1,81:1 - ausdrueckliche Wahl GOTT, Lage wie E67; --zeichen bleibt fuer die uebrigen. GESCHICHTE: Lieferung 56 · reeky-L32.css · ERSETZT reeky-L31.css L32: DESIGN v13 (Vorlage reeky_test_design_v13.html, GOTT 16.08.). Zehn Änderungen, maschinell abgeleitet, Einzeltrefferwächter: 1 color-scheme "light only" - Licht-Zwang, hart. 2 Neue Marken --pastell-hell, --gut-hell, --weg-hell. 3 EIN Formvokabular: .rk-knopf als Pastell-Chip (999px, 13px, Gewicht 400). --haupt trägt KEINE eigene Auszeichnung mehr (v13, GOTT: "EIN Schriftbild"). Entscheidung 96: Umlaute in Kommentaren richtig; Bezeichner (rk-*, --*) bleiben ASCII - tragende Namen im Markup. 4 --gut/--weg als grüner/roter Chip mit heller Fläche, Gewicht 400 statt 700. 5 Reiter = kleine Chips (13px, Pastellkleid), aktiv gefuellt. 6 .rk-regal (Kategorie) 14px fett BLAU mit Unterstrich. 7 Hinweise .hilfe und .rk-leise auf 7pt (v13 Fussnote). L36 Ausklapper .rk-klapp (Feinschliff e, Kassenbon-Textweg): summary als Chip im Knopfbild, Inhalt eingerueckt. L35 Dateiwaehler ohne JavaScript (Feinschliff d/f): der Waehlknopf traegt ueber ::file-selector-button das Chipbild aus .rk-knopf, den gewaehlten Dateinamen zeigt der Browser nativ daneben - keine Zeile Skript, kein Markup-Umbau in Sichern, Import oder Kassenbon. 8 Auswahlmenüs im Chip-Kleid mit gezeichnetem Pfeil (Daten-URI, kein Systempfeil, kein JS). 9 Fußzeilen im Pastell-Ton (Entscheidung 67 sinngemäß: gewählter Ton ist bindend, Kontrast gemessen und bewusst). 10 .rk-erledigt: Strich + leise Farbe statt Ausblenden; die Klasse sitzt im Markup auf dem TEXT (gemessen, Einkaufsliste Zeile 803ff), Zeichen bleiben unberuehrt. STUFE 2 (nach GOTT-Einwand 17.08.): v13 VOLLSTÄNDIG - 11 Eingabefelder als Pille (999px), Fokusring pastell. 12 Karten flach (ohne Schatten), Maß 16px, Polster 16px. 13 Kacheln: Zahl 28px/800, Beschriftung 11px/.12em. 14 Zeilen-Namen (Vorrat, /) blau und kräftig. 15 MHD 14px/600, Zustandsfarben bleiben. 16 Tages-Chips im Chip-Kleid, gewählt pastell-gefüllt. 17 Merkmal-Chips klein im Pastell-Kleid. 18 Untertitel (KW-Zeile) 14px leise. GRENZE der CSS-Schicht: Logo-Bindestrich diagonal und Reiter-Symbole leben im SVG/PHP-Markup (Ansicht.php) - eigener Folgeblock, hier vorbereitet. Vorherige Fassung: L31 (SiteLock-Siegel, Passkey-Zeilen). L31-Ursprung: SiteLock-Siegel klein rechts in der Fusszeile (rk-siegel), Entscheidung 91. Dazu die Passkey-Verwaltung (rk-pkzeile, rk-pkname, rk-pkdatum) fuer Lieferung 55. Sonst unveraendert. Vorherige Fassung: Lieferung 30 · ERSETZT reeky-L29.css ZIEL /home/www/reeky/assets/reeky.css Alte Fassung im selben Schritt entfernen. ------------------------------------------------------------------ BLOCK N · Aussehen, abschliessend. NEUN Aenderungen, sonst nichts. Maschinell abgeleitet aus L29, Einzeltrefferwaechter vor jeder Ersetzung. VORLAGE: die Bildschirmfotos der alten Anwendung unter reeky-week.streamlit.app, von GOTT am 15.08. vorgelegt mit dem Satz "so sollte es sein". Jede der neun Aenderungen ist von dort abgelesen, keine erfunden. N.3 Kopfzeichen auf #7A9CF5. ENTSCHEIDUNG 67: GOTT hat diesen Wert ausdruecklich gewaehlt und die Messung zur Kenntnis genommen - 2,66:1 gegen Weiss, die Schwelle fuer Zeichen ohne Text liegt bei 3,0:1. Bewusst so geliefert. #6E8FBF aus L29 war eine stille Korrektur und wird zurueckgenommen. N.4 Hauptknopf gefuellt #7A9CF5 mit weisser Schrift, ebenfalls Entscheidung 67 (2,66:1, Text braucht 4,5:1). Neue Marken --fuell und --fuell-tief. --akzent bleibt unangetastet und traegt weiter Reiter, Fokus und Verweise. N.5 Knopfecken 12 auf 9 px - dieselbe Ecke wie .rk-zeichen und .rk-tag. Nebenknoepfe bleiben weiss mit Rahmen, genau wie "Speichern" und "Notes / TXT / PDF / DOCX" in der Vorlage. N.6 Reiter als Pille. Ecke 10 px auf 999 px, Schrift von --grau auf --tinte. Aktiver Reiter nicht mehr dunkelblau mit weisser Schrift, sondern hellblau gefuellt mit blauer Schrift und blauem Rand - so steht "Vorrat", "Import" und "Essensplan" in der Vorlage. N.7 Eingabefelder grau gefuellt und randlos. Der Rahmen bleibt als "1px solid transparent" stehen, damit der Fokusrahmen keinen Sprung im Umbruch verursacht. N.8 Meldungen linksbuendig statt mittig, randlos, mehr Polster. KEHRT FASSUNG 23 UM - dort wurde ausdruecklich auf mittig gestellt. Die Vorlage zeigt linksbuendig ("Vorrat ist leer.", "Noch kein Plan erzeugt."), deshalb zurueck. N.1 Kopfzeichen. Die vier Zeichen im Verwaltungskopf standen auf --pastell #A7C0FF: Kontrast 1,81:1 gegen Weiss. Ein Zeichen ohne Text braucht 3,0:1. Neu --zeichen #6E8FBF, gleicher Farbwinkel 216 Grad, Kontrast 3,31:1. EIGENE MARKE, NICHT --pastell umgebogen: --pastell traegt noch den gewaehlten Einkaufstag, die Unterkante der Zutatenliste und den Merkgrund. Wer die Marke umdeutet, faerbt drei fremde Stellen mit. N.2 Schaltflaechen weicher, Rahmen bleibt. Rundung 10 auf 12 px, Polster .36/.85 auf .42/.95 rem, und beim Zeigen springt der Rahmen nicht mehr auf Tinte, sondern auf --grau. Der harte Sprung war das Kantige, nicht der Rahmen. --haupt --leise --gut --weg [disabled] .rk-knopfreihe BLEIBEN UNANGETASTET. ================================================================== */ /* ================================================================== Reeky-Week · reeky.css Zielpfad: /reeky-strato/assets/reeky.css (Kleinschreibung!) Lieferung 21 · reeky-L21.css · ERSETZT reeky-L19.css Neu in 21: NUR die Regel .rk-oeffnen-zeile (eine Zeile Anhang). Lieferung 19 · reeky-L19.css · ERSETZT reeky-L9e.css Ziel auf dem Server: /home/www/reeky/assets/reeky.css NUR ANGEHAENGT: der Block REZEPTANSICHT am Ende. Am Bestand wurde keine einzige Zeile geaendert oder entfernt - maschinell nachgewiesen (diff meldet 0 entfernte Zeilen). Lieferung 4a · aus DESIGN der Fassung 40 hergeleitet Lieferung 9e · reeky-L9e.css · ERSETZT reeky-L6e.css GENAU EINE REGEL geaendert: ".rk-feld .hilfe" heisst jetzt ".hilfe" und traegt font-weight:400. Grund und Zaehlung stehen an Ort und Stelle weiter unten. Sonst ist die Datei zeichengleich mit 6e. Lieferung 6e · was als style am Element stand, steht jetzt hier. Neu: Ablaufmarke, erledigte Zeile, Knopfformular, Rohtext, schmale Felder, Karte des heutigen Tages. Am Bestand wurde NICHTS geaendert - nur zwei Farbwerte und ein Abschnitt kamen hinzu. ------------------------------------------------------------------ Was sich gegenueber Fassung 40 geaendert hat und warum: 1. Alle Streamlit-Wahlausdruecke sind fort. Die alten Regeln sprachen Merkmale und Schluessel an, die Streamlit selbst in die Seite schrieb - fuer Pillen, Kacheln und Knoepfe. Dieses Geruest gibt es nicht mehr, die Seiten werden selbst gebaut. Jede Regel spricht jetzt eine eigene Klasse an. Das Pruefskript sucht genau nach solchen Ueberbleibseln; darum stehen sie hier auch nicht mehr als Beispiel im Kommentar. 2. Die Regeln gegen "Manage app", stStatusWidget und viewerBadge sind ersatzlos entfallen. Diese Knoepfe gehoerten der Streamlit Community Cloud. Es gibt sie hier nicht. 3. Die Farbregel bleibt unangetastet: Akzent #1D4ED8, Pastellblau #A7C0FF fuer die vier Kopfzeichen und das Monogramm, Gruen #16A34A fuer erledigt, Rot #DC2626 fuer weg. 4. In der Fusszeilen-Regel steht KEIN env() und KEIN calc(). Der Grund steht in Fassung 34: kennt ein Browser env() im calc() nicht, faellt die GANZE Erklaerung weg, der Innenabstand wird 0 und die Zeile rutscht aus dem Bild. Feste Pixel, sonst nichts. ================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* ---------- Grundlage ------------------------------------------- */ :root{ --tinte:#0B1220; --grau:#667085; --leise:#98A2B3; --linie:#E7EAEE; --flaeche:#F7F8FA; --akzent:#1D4ED8; --akzent-tief:#1740B0; --pastell:#A7C0FF; --pastell-hell:#EDF2FF; --zeichen:#7A9CF5; /* Fuellung der Hauptschaltflaeche. EIGENE MARKE, nicht --akzent umgebogen: --akzent traegt den aktiven Reiter, den Fokusrahmen, das Oeffnen-Zeichen und den Rand der heutigen Karte. Wer die Marke umdeutet, faerbt vier fremde Stellen mit. --fuell-tief ist derselbe Farbwinkel 223 Grad, Helligkeit acht Punkte tiefer - gerechnet, nicht geschaetzt. */ --fuell:#7A9CF5; --fuell-tief:#5480F2; --gut:#16A34A; --gut-hell:#EAF7EF; --weg:#DC2626; --weg-hell:#FDECEC; /* Ablaufmarke im Vorrat. Nur diese zwei sind neu - "kein MHD" nimmt --leise, "noch lange" nimmt --grau. Beide stehen schon oben; sie hier zu wiederholen hiesse, eine Farbe an zwei Orten zu pflegen. */ --ablauf-weg:#C4320A; --ablauf-bald:#B54708; color-scheme:light only; } *,*::before,*::after{ box-sizing:border-box; } html,body{ margin:0; padding:0; background:#FFFFFF; color:var(--tinte); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:16px; -webkit-text-size-adjust:100%; } /* Die Huelle ersetzt Streamlits .block-container. Der Boden von 5.4rem haelt die letzte Zeile frei von der festen Fusszeile. */ /* L48.1: der Boden haelt jetzt die FUSSLEISTE frei, nicht mehr die Fusszeile - die steht seit L48.2 im Fluss. */ .rk-huelle{ max-width:760px; margin:0 auto; padding:.9rem .9rem calc(84px + env(safe-area-inset-bottom)); } /* Die Willkommensseite traegt keine Fusszeile (Fassung 37), also braucht sie auch keinen Boden. */ .rk-huelle.rk-ohnefuss{ padding-bottom:1.2rem; } h1,h2,h3{ letter-spacing:-.025em; color:var(--tinte); font-weight:650; margin:1.1rem 0 .5rem; } h1{ font-size:1.32rem; } h2{ font-size:1.16rem; } h3{ font-size:1.06rem; } p{ margin:.5rem 0; line-height:1.55; } a{ color:var(--akzent); } hr{ margin:.9rem 0; border:none; border-top:1px solid var(--linie); } small,.rk-leise{ color:var(--leise); font-size:7pt; } /* ================================================================== L46 · ENTWURF v14 · KOMPAKT (GOTT-Segen 20.08., 10 Bilder) Ein Grad dichter. Neue Bausteine: rk-suchzeile (Feld+Knopf in einer Zeile), rk-chipzeile, rk-halb (Knopfreihe halb-halb), rk-halbklapp (zwei Ausklapper nebeneinander), rk-klapp--leise (Textweg als leiser Verweis), rk-nurlaut (nur fuer Vorleser). L47 (GOTT-Ruege 20.08., "nicht wie vorgezeigt"): ZWEI WURZELN BENANNT UND GEHEILT. (a) rk-klapp--leise stand VOR den rk-klapp- Grundregeln - gleiche Wertigkeit, spaeter gewinnt, der Chip blieb. Die Heilung steht jetzt am DATEIENDE mit hoeherer Wertigkeit. (b) der Ablauf-Chip trug rk-knopf--leise und wirkte als nackter Text - in einer rk-chipzeile traegt jetzt JEDER Knopf das kleine Chip-Kleid. Dazu: rk-mehrfilter und die Rezept-Bildkachel (rk-rezkachel). Dazu: Startmarken-Unterzeile in EINER Zeile (Bild 9) und der Abendpunkt im Kalender in Markenblau statt Tinte (Bild 10). ================================================================== */ /* L45 (GOTT 20.08., Bindestrich-Bilder): die STARTMARKE ist HTML wie der Kopf - .rk-wortbox traegt jetzt die Wortmarke aus Ansicht::wortmarke() gross, der Strich kommt aus DERSELBEN .strich-Geometrie (L42). Die Zeile ESSEN · PLANEN · EINKAUFEN steht als .rk-wm-unter darunter (Farbe wie im alten SVG). Die alte .rk-wort-SVG-Regel bleibt stehen, tut aber nichts mehr. */ /* ---------- Kopf ------------------------------------------------- */ /* Fassung 24: Wortmarke mittig, Kalenderwoche darunter. Fassung 29: die Kopfzeichen stehen UEBER der Trennlinie, darum traegt der Kopf selbst keine Linie - sie kommt danach. */ .rk-kopf{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:2px 2px 6px; margin-bottom:2px; } /* v13: Wortmarke als Text - Reeky schwarz, Week blau, dazwischen der diagonale Strich, halb schwarz / halb blau (Verlauf 135 Grad). Die alte SVG-Regel ist entfernt; die Marke kommt aus Ansicht::wortmarke(). */ /* L48.3: 34 auf 26 px. Auf jeder Innenseite stand sie so gross wie auf der Startseite und nahm ein Viertel des Bildes. */ .rk-kopf .t{ font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--tinte); display:inline-block; text-decoration:none; margin:0 auto; } .rk-kopf .t .schwarz{ color:var(--tinte); } .rk-kopf .t .blau{ color:var(--akzent); } /* L42 (v13-Feinschliff, GOTT 19.08.): der Strich wirkte auf den Innenseiten als langer Balken - jetzt kuerzer und schlanker, ein Bindestrich statt eines Balkens. Diagonale Teilung bleibt. */ .rk-kopf .t .strich{ display:inline-block; width:.40em; height:.11em; margin:0 .07em; vertical-align:.24em; border-radius:2px; background:linear-gradient(135deg, var(--tinte) 0 50%, var(--akzent) 50% 100%); } .rk-kopf .u{ font-size:14px; color:var(--leise); font-weight:400; text-align:center; } .rk-kopflinie{ border-bottom:1px solid var(--linie); margin:2px 0 12px; padding:0; } /* ---------- Kopfzeichen (Einkaufstage · Konto · Melden · Abmelden) --- */ /* Fassung 31: alle vier gleich gross (20 px), alle in Pastellblau #A7C0FF, alle als SVG. Neu ab PHP: das SVG steht INNEN im Verweis, nicht als prozentkodierte Hintergrundadresse. Damit faellt die Falle aus Fassung 25 (mehrzeilige data:-Adresse) endgueltig weg und die Farbe kommt aus dem CSS statt aus der Adresse. */ .rk-zeichenreihe{ display:grid; grid-template-columns:repeat(5,1fr); gap:.55rem; align-items:center; } .rk-zeichen{ display:flex; align-items:center; justify-content:center; height:34px; border:none; background:transparent; padding:0; border-radius:9px; cursor:pointer; text-decoration:none; } .rk-zeichen svg{ width:20px; height:20px; display:block; fill:none; stroke:var(--zeichen); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* L48.4: Flaeche statt Verblassen, dazu ein sichtbarer Zustand. */ .rk-zeichen:hover{ background:var(--pastell-hell); } .rk-zeichen[aria-current="page"]{ background:var(--pastell-hell); } .rk-zeichen[aria-current="page"] svg{ stroke:var(--akzent); } .rk-zeichen.rk-pastell svg{ stroke:var(--pastell); } /* ---------- Laufbalken Import (Lieferung 61, D7) ------------------ */ .rk-lauf{ height:14px; border-radius:999px; background:var(--pastell-hell); overflow:hidden; margin:.7rem 0 .35rem; /* L67: Bezug fuer das Pendel der Rezeptstufe (::after). Ohne Bezug wandert es an der Karte entlang statt in der Spur. */ position:relative; } .rk-lauf > div{ height:100%; background:var(--pastell); border-radius:999px; } .rk-lauf--sucht > div{ width:38%; animation:rk-lauf-pendel 1.2s ease-in-out infinite alternate; } @keyframes rk-lauf-pendel{ from{ margin-left:0; } to{ margin-left:62%; } } /* L68 · Die Rezeptstufe: Fuellung zaehlt, Pendel arbeitet. Die Fuellung ist die Zaehlung aus PHP und bleibt liegen. Das Pendel ist ein EIGENES Stueck darueber - gleiche Bewegung, gleiche Dauer, gleiche Kurve und gleiche FARBE wie bei --sucht. Zeichengleich, damit die Wartemaske eine Sprache spricht. Dass es den fertigen Teil ueberdeckt, faellt nicht auf: beide tragen --pastell. Auf der leeren Spur steht es kraeftig da - und genau dort, bei 0 %, wird es gebraucht. */ .rk-lauf--arbeitet::after{ content:""; position:absolute; top:0; bottom:0; left:0; width:38%; border-radius:999px; background:var(--pastell); animation:rk-lauf-pendel 1.2s ease-in-out infinite alternate; } /* Die Breite kommt weiter aus PHP; hier steht nur, dass sie sanft nachzieht statt bei jedem Schritt zu springen. */ .rk-lauf--arbeitet > div{ transition:width .45s ease; } /* Wer Bewegung abgeschaltet hat, bekommt sie nicht. Das Pendel faellt dann ganz weg - ein halbdurchsichtiges Stueck, das irgendwo stehen bleibt, waere eine Marke ohne Bedeutung. */ @media (prefers-reduced-motion:reduce){ .rk-lauf--sucht > div{ animation:none; } .rk-lauf--arbeitet::after{ display:none; } .rk-lauf--arbeitet > div{ transition:none; } } /* ---------- Tagereihe (Lieferung 27, Block O) --------------------- */ /* Sieben Tage in EINER Zeile. Der Kasten selbst wird versteckt, das Schild daneben ist die Schaltflaeche - deshalb steht das Schild im HTML direkt HINTER seinem Kasten, sonst greift + nicht. Versteckt heisst NICHT display:none: ein so verstecktes Feld ist fuer die Tastatur und fuer Vorleser nicht mehr da. */ .rk-tagreihe{ display:flex; align-items:center; gap:.3rem; flex-wrap:nowrap; margin:.5rem 0 .8rem; } .rk-tagbox{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; } /* v13: auch Tageswahl im Chip-Kleid. */ .rk-tag{ flex:1 1 0; min-width:0; text-align:center; padding:5px 2px; font-size:13px; font-weight:400; line-height:1.2; border:1px solid var(--pastell); border-radius:999px; background:var(--pastell-hell); color:var(--akzent); cursor:pointer; user-select:none; } .rk-tagbox:checked + .rk-tag{ background:var(--pastell); border-color:var(--pastell); color:var(--akzent-tief); font-weight:400; } .rk-tagbox:focus-visible + .rk-tag{ outline:2px solid var(--akzent); outline-offset:2px; } .rk-tag:hover{ background:#DFE8FF; } .rk-taghaken{ flex:0 0 auto; padding:.34rem .5rem; font-size:1rem; line-height:1.2; } /* ---------- Schaltflaechen --------------------------------------- */ /* v13: EIN Formvokabular. Chip = Knopf = Reiter. 999px, 13px, Gewicht 400 - überall dasselbe Kleid, nur die Füllung trägt Bedeutung (grün = tun, rot = weg). */ .rk-knopf{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:32px; padding:5px 12px; font-size:13px; font-weight:400; font-family:inherit; line-height:1.4; border-radius:999px; border:1px solid var(--pastell); color:var(--akzent); background:var(--pastell-hell); text-decoration:none; cursor:pointer; transition:border-color .12s, background .12s, color .12s; } .rk-knopf:hover{ background:#DFE8FF; } /* v13: --breit entmachtet - EIN Formvokabular, kompakte Reihen. Die Klasse bleibt im Markup stehen und ist bewusst wirkungslos. */ /* v13 (GOTT): EIN Schriftbild - --haupt trägt KEINE eigene Auszeichnung mehr. Die Klasse bleibt im Markup stehen und ist hier bewusst wirkungslos. --fuell/--fuell-tief bleiben als Marken erhalten (PDF-Bericht und Fokusring nutzen den Winkel). */ /* rahmenlos - Stift, Haken, Kreuz, Punkt */ .rk-knopf--leise{ border:none; background:transparent; box-shadow:none; padding:.1rem .3rem; font-size:1rem; color:var(--grau); } .rk-knopf--leise:hover{ color:var(--akzent); } .rk-knopf--gut{ color:var(--gut); border-color:#BFE5CC; background:var(--gut-hell); } .rk-knopf--gut:hover{ background:#DDF2E4; } .rk-knopf--weg{ color:var(--weg); border-color:#F3C2C2; background:var(--weg-hell); } .rk-knopf--weg:hover{ background:#FBDDDD; } .rk-knopf[disabled]{ opacity:.45; cursor:not-allowed; } /* v13 (GOTT, 17.08.): Knöpfe kompakt NEBENEINANDER, zentriert, bei Platznot Umbruch in die nächste Reihe - NIE gestapelt. Kein Knopf wird mehr künstlich breitgezogen. */ .rk-knopfreihe{ display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap; margin:10px 0; } .rk-knopfreihe>*{ flex:0 1 auto; min-width:0; } /* ---------- Eingaben --------------------------------------------- */ .rk-feld{ margin:0 0 .7rem; } .rk-feld label{ display:block; font-size:.78rem; font-weight:600; color:var(--grau); margin:0 0 .25rem; } .rk-feld input[type="text"], .rk-feld input[type="email"], .rk-feld input[type="password"], .rk-feld input[type="date"], .rk-feld input[type="number"], .rk-feld input[type="search"], .rk-feld input[type="tel"], .rk-feld select, .rk-feld textarea{ /* v13: Suchen/Eingeben als Pille - Maß 999px, Fläche zart, Fokus mit Pastellring statt hartem Blau. */ width:100%; min-height:36px; font-size:15px; font-family:inherit; color:var(--tinte); background:var(--flaeche); border:1px solid var(--linie); border-radius:999px; padding:7px 14px; } .rk-feld textarea{ min-height:110px; line-height:1.5; resize:vertical; border-radius:14px; /* mehrzeilig: Pille wäre unlesbar */ } .rk-feld input:focus, .rk-feld select:focus, .rk-feld textarea:focus{ outline:none; border-color:var(--pastell); background:#fff; box-shadow:0 0 0 3px var(--pastell-hell); } /* Hinweiszeile unter einem Feld - UND freistehend. BIS L9e STAND HIER ".rk-feld .hilfe". Damit galt die Regel NUR innerhalb eines Feldes. Zehn freistehende
in Rezepte.php, Einkaufsliste.php, Kassenbon.php, Import.php und dem Lesebaustein von Ocr.php erbten stattdessen die Grundschrift mit 16px - sie sahen gross und fett aus, obwohl sie leise sein sollten. Am 14.08. von GOTT gemeldet, danach mit grep ueber alle Seiten gezaehlt. Der Auswahlpfad ist deshalb entschachtelt. Es gibt im ganzen Stylesheet keine zweite .hilfe-Regel, also kollidiert nichts; die Wirkung innerhalb von .rk-feld bleibt unveraendert. font-weight steht ausdruecklich da, damit die Zeile auch in einem fetten Umfeld - legend, label, th - leise bleibt und nicht erbt. .74rem sind bei 16px Grundschrift rund 11,8px. */ /* v13: Fußnoten-Maß 7pt (GOTT). */ .hilfe{ font-size:7pt; font-weight:400; color:var(--leise); margin-top:.2rem; } /* Passwortfelder. Die Huelle liefert PHP mit (Ansicht::feld), NICHT das Skript - ein nachtraeglich umgehaengtes Feld zerstoert Chromes Ausfuellen. Die Knoepfe darin baut reeky.js: was ohne JavaScript nichts tut, darf ohne JavaScript auch nicht dastehen. */ .rk-pwbox{ position:relative; } .rk-pwbox input{ padding-right:2.6rem !important; } /* Drei Knoepfe: Wuerfel, Kopieren, Auge - nur am oberen Feld. */ .rk-pwbox--drei input{ padding-right:6.7rem !important; } .rk-auge, .rk-kopieren, .rk-wuerfeln{ position:absolute; top:50%; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; width:2rem; height:2rem; padding:0; margin:0; border:none; background:transparent; cursor:pointer; color:var(--leise); } .rk-auge{ right:.35rem; } .rk-kopieren{ right:2.4rem; } .rk-wuerfeln{ right:4.45rem; } .rk-auge svg, .rk-kopieren svg, .rk-wuerfeln svg{ width:19px; height:19px; display:block; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } .rk-auge:hover, .rk-auge:focus, .rk-kopieren:hover, .rk-kopieren:focus, .rk-wuerfeln:hover, .rk-wuerfeln:focus{ color:var(--akzent); } /* Der Wuerfel ist der wichtigste der drei - er darf auffallen. */ .rk-wuerfeln{ color:var(--akzent); } /* Zwei Felder nebeneinander - bleibt auch auf dem Handy nebeneinander, sonst wird die Maske unnoetig lang. */ .rk-paar{ display:flex; gap:.55rem; } .rk-paar>*{ flex:1 1 0; min-width:0; } .rk-paar--schmal>*:first-child{ flex:1 1 0; } .rk-paar--schmal>*:last-child{ flex:2 1 0; } /* Tageszeile im Planer (L28): Wunsch breit, Personen schmal. --schmal kann das nicht - dort ist das ZWEITE Feld das breite. */ .rk-paar--tag{ align-items:flex-end; margin-bottom:.5rem; } .rk-paar--tag>*:first-child{ flex:3 1 0; } .rk-paar--tag>*:last-child{ flex:0 0 5.2rem; } /* Auf sehr schmalen Geraeten lieber untereinander als gequetscht. */ @media (max-width:340px){ .rk-paar--tag{ flex-wrap:wrap; } .rk-paar--tag>*:last-child{ flex:1 1 100%; } } /* L69 · Die Mahlzeitwahl je Tag (Erzeugungsmaske). Eine Zeile, drei Haken, umbrechend - auf schmalen Geraeten rutscht der dritte nach unten statt gequetscht zu werden. Das negative obere Mass holt die Zeile an das Tagespaar heran, zu dem sie gehoert; ohne das schwebte sie zwischen zwei Tagen und man raet, welchem sie zusteht. */ .rk-mahlwahl{ display:flex; flex-wrap:wrap; gap:.15rem .9rem; margin:-.25rem 0 .9rem; } .rk-mahlhaken{ display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; color:var(--tinte); cursor:pointer; padding:.15rem 0; } .rk-mahlhaken input[type="checkbox"]{ width:16px; height:16px; margin:0; accent-color:var(--akzent); flex:0 0 auto; } .rk-haken{ display:flex; align-items:flex-start; gap:.5rem; font-size:.84rem; line-height:1.45; color:var(--tinte); margin:.6rem 0 .8rem; } .rk-haken input[type="checkbox"]{ width:18px; height:18px; margin:1px 0 0; accent-color:var(--akzent); flex:0 0 auto; } fieldset{ border:none; margin:0; padding:0; } legend{ font-size:.86rem; font-weight:700; color:var(--tinte); padding:0; margin:.9rem 0 .4rem; } /* ---------- Karten, Kacheln, Kennzahlen -------------------------- */ /* v13: Karten flach - Linie trägt, kein Schatten. */ /* L48.5: ein Grad dichter (v14-Leitsatz). */ .rk-karte{ border:1px solid var(--linie); border-radius:16px; padding:14px; background:#fff; margin-bottom:10px; } .rk-kachel{ border:1px solid var(--linie); border-radius:16px; padding:12px; background:var(--flaeche); } /* Klickbare Kacheln der Startseite - die Kachel IST der Knopf. */ .rk-kachelreihe{ display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; /* L70: Luft nach unten. Die Kacheln sind der Stand, alles darunter ist was anliegt - ohne Abstand liest sich beides als ein Block. */ margin-bottom:1.1rem; } .rk-kachelknopf{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:var(--flaeche); border:1px solid var(--linie); border-radius:14px; min-height:88px; width:100%; padding:12px 6px; text-decoration:none; cursor:pointer; font-family:inherit; } .rk-kachelknopf .k{ font-size:11px; color:var(--leise); text-transform:uppercase; letter-spacing:.12em; font-weight:600; line-height:1.6; } .rk-kachelknopf .w{ display:block; font-size:28px; color:var(--tinte); font-weight:800; letter-spacing:-.02em; text-transform:none; line-height:1.2; } .rk-kachelknopf:hover{ border-color:var(--tinte); } .rk-zahl{ background:var(--flaeche); border-radius:16px; padding:12px 14px; border:1px solid var(--linie); } .rk-zahl .k{ font-size:11px; color:var(--leise); text-transform:uppercase; letter-spacing:.12em; font-weight:600; } .rk-zahl .w{ font-size:28px; font-weight:800; color:var(--tinte); letter-spacing:-.02em; } /* ---------- Chips ------------------------------------------------ */ /* v13: EIN Chip-Kleid auch für Merkmale - klein und pastell. */ .rk-chip{ display:inline-block; background:var(--pastell-hell); color:var(--akzent); border:1px solid var(--pastell); border-radius:999px; padding:2px 10px; font-size:11px; margin:3px 4px 0 0; font-weight:500; } /* ---------- Auswahl-Chips (Lieferung 56) ------------------------- Mehrfachauswahl aus Formular::hakenGruppe als Chip-Reihe. Reines CSS ueber Haken + Beschriftung (Entscheidung: kein JavaScript fuer Kernfunktionen). Das Kreuzchen bleibt im Baum und bedienbar - es ist nur 1 Pixel klein, damit Tastatur und Vorleser es behalten; sichtbar ist die Beschriftung als Chip. Ein Haken faerbt den Chip pastell, der Fokus zeichnet den bekannten Rahmen. */ .rk-wahlchips .rk-haken{ display:inline-block; margin:0 6px 6px 0; } .rk-wahlchips .rk-haken input[type="checkbox"]{ position:absolute; width:1px; height:1px; margin:0; opacity:0; } .rk-wahlchips .rk-haken label{ display:inline-block; margin:0; padding:5px 12px; min-height:32px; line-height:22px; background:var(--flaeche); color:var(--grau); border:1px solid var(--linie); border-radius:999px; font-size:13px; font-weight:400; cursor:pointer; -webkit-user-select:none; user-select:none; } .rk-wahlchips .rk-haken input:checked + label{ background:var(--pastell); color:var(--tinte); border-color:var(--zeichen); } .rk-wahlchips .rk-haken input:focus-visible + label{ outline:2px solid var(--akzent); outline-offset:1px; } /* ---------- Listen ----------------------------------------------- */ /* v13: Kategorie größer, BLAU, unterstrichen (Vorrat & Einkaufsliste - "Kategorien größer + blau"). */ .rk-regal{ font-size:14px; text-transform:uppercase; letter-spacing:.14em; color:var(--akzent); font-weight:800; margin:20px 0 4px; text-align:center; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1.5px; } .rk-zeile{ padding:7px 0; border-bottom:1px solid var(--linie); font-size:.92rem; color:var(--tinte); } .rk-zeile--reihe{ display:flex; align-items:center; gap:.55rem; } .rk-zeile--reihe>*{ min-width:0; overflow-wrap:anywhere; } .rk-zeile--reihe .wachs{ flex:1 1 auto; } /* v13: Namen in Listenzeilen blau und kräftig (Vorrat gibt den Namen als bzw. aus - gemessen, Vorrat Z.403ff). */ .rk-zeile--reihe .wachs b{ color:var(--akzent); font-weight:700; font-size:14px; } .rk-zeile--reihe .wachs a{ color:var(--akzent); text-decoration:none; } /* Ohne overflow-wrap schiebt sich ein langer Wert ueber den Text daneben, statt umzubrechen - am Geraet gesehen, nicht vermutet. */ /* ---------- Ablaufmarke, erledigte Zeile, Kleinkram --------------- */ /* Lieferung 6e. Alles hier stand vorher als style am Element. Eine Klasse zu benutzen, die dieses Stylesheet nicht kennt, ist der unangenehmste Fehler von allen: die Seite sieht kaputt aus, ohne dass irgendetwas wirft. Deshalb kommt das Stylesheet VOR den Seiten, die es benutzen - nicht danach. */ /* Die Restzeit unter dem Namen eines Vorratspostens. FUENF Zustaende, VIER Farben: "laeuft heute ab" und "noch n Tage" sehen heute gleich aus. Sie bleiben trotzdem getrennte Klassen - es sind zwei verschiedene Auskuenfte, und wenn eine davon eines Tages anders aussehen soll, ist das dann eine Zeile hier statt eines Umbaus in der Seite. */ /* v13: MHD deutlicher - Zustandsfarben darunter bleiben. */ .rk-mhd{ font-size:14px; font-weight:600; white-space:nowrap; } .rk-mhd--weg{ color:var(--ablauf-weg); } .rk-mhd--heute{ color:var(--ablauf-bald); } .rk-mhd--bald{ color:var(--ablauf-bald); } .rk-mhd--ohne{ color:var(--leise); } .rk-mhd--gut{ color:var(--grau); } /* Abgehakt auf der Einkaufsliste. Durchgestrichen UND blasser: die Farbe allein traegt die Auskunft nicht, wenn jemand sie nicht unterscheiden kann. */ /* v13/v9: Strich + leise Farbe. Klasse sitzt auf dem TEXT (Einkaufsliste postenzeile, gemessen) - Zeichen daneben bleiben kräftig. Strich UND Farbe: die Farbe allein trägt die Auskunft nicht, wenn jemand sie nicht unterscheiden kann. */ .rk-erledigt{ color:var(--leise); text-decoration:line-through; } /* Ein Formular, das nur einen Knopf traegt. Es steht in einer Zeile neben anderem und darf deshalb keinen eigenen Aussenabstand haben. Fuenf Seiten bauen so ein Formular; bis hierher stand margin:0 fuenfmal am Element. */ .rk-knopfform{ margin:0; } /* Erkannter Bontext zur Kontrolle. pre bricht von sich aus nicht um - ohne pre-wrap schiebt eine lange Zeile die halbe Seite nach rechts. */ .rk-rohtext{ white-space:pre-wrap; font-size:.78rem; } /* Menge und Einheit stehen in der Zutatenzeile nebeneinander. Feste Breiten, damit die Spalten ueber alle Zeilen fluchten - ohne sie wandert jedes Auswahlfeld auf die Breite seines laengsten Eintrags. */ .rk-feld--menge{ width:5.2rem; } .rk-feld--einheit{ width:5.6rem; } /* Der heutige Tag im Wochenplan. */ .rk-karte--heute{ border-color:var(--akzent); } /* ---------- Meldungen -------------------------------------------- */ /* Fassung 23: mittig statt linksbuendig. */ /* L48.6: Kante links in der Zustandsfarbe. Die Flaeche allein ist auf dem Handy bei Sonne kaum zu unterscheiden - die Kante schon. Farbe traegt die Auskunft damit nicht allein. */ .rk-warn{ background:#FFF6F3; border:1px solid transparent; border-left:3px solid #C4320A; border-radius:12px; padding:12px 14px; font-size:.92rem; color:#8A2B12; margin-bottom:10px; text-align:left; } .rk-hinweis{ border-radius:12px; padding:12px 14px; font-size:.92rem; margin-bottom:10px; text-align:left; border:1px solid transparent; border-left:3px solid var(--grau); background:var(--flaeche); color:var(--grau); } .rk-hinweis--gut{ background:#F1FBF4; color:#166534; border-left-color:var(--gut); } .rk-hinweis--fehler{ background:#FEF3F2; color:#B42318; border-left-color:var(--weg); } .rk-hinweis--info{ background:#EFF4FF; color:#1D4ED8; border-left-color:var(--akzent); } /* ---------- Reiter (frueher Pillen) ------------------------------ */ /* v13: Reiterleiste zentriert wie die Chip-Leiste der Vorlage. */ .rk-reiter{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:14px 0 .9rem; } .rk-reiter a, .rk-reiter span{ display:inline-flex; align-items:center; gap:4px; min-height:28px; font-size:13px; font-weight:400; padding:3px 10px; border-radius:999px; border:1px solid var(--pastell); background:var(--pastell-hell); color:var(--akzent); text-decoration:none; } .rk-reiter a:hover{ background:#DFE8FF; } .rk-reiter a svg, .rk-reiter span svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* Der aktive Reiter ist hell gefuellt, nicht dunkel. Blaue Schrift auf #EFF4FF sind 6,25:1 - der dunkle Reiter aus L29 haette hier als einziges Element der Seite eine gesaettigte Flaeche. */ .rk-reiter a.aktiv, .rk-reiter span.aktiv{ background:var(--pastell); color:var(--akzent-tief); border-color:var(--pastell); font-weight:400; } /* ---------- Wochenplan ------------------------------------------- */ /* ================================================================== L72 · "DIESE WOCHE" - drei Spalten, feste Breiten. GRID, NICHT FLEX: nur ein Raster haelt die Spalten ueber ALLE Zeilen hinweg gleich breit. Bei flex richtet sich jede Zeile fuer sich aus - dann stuende "Apfelknaust" weiter links als "Gari Shoga", weil die Mahlzeit daneben kuerzer ist. DER ABSTAND KOMMT AUS row-gap, nicht aus padding an den Feldern. Ein Innenabstand haengt an der Hoehe der einzelnen Zelle; der Zwischenraum des Rasters gilt fuer die ganze Zeile. ================================================================== */ .rk-woche{ display:grid; grid-template-columns:3.4rem 4.1rem 1fr; align-items:baseline; column-gap:10px; row-gap:9px; } /* Der Tag steht oben in seinem Block und reicht ueber so viele Zeilen, wie er Gerichte hat - die Zahl setzt PHP als Stil, weil sie aus der Zaehlung kommt. */ .rk-wtag{ grid-column:1; align-self:start; color:var(--leise); font-size:.76rem; line-height:1.4; } .rk-wtag b{ display:block; color:var(--tinte); font-size:.82rem; font-weight:700; letter-spacing:.04em; } .rk-wmz{ grid-column:2; color:var(--leise); font-size:.74rem; letter-spacing:.02em; } .rk-wtitel{ grid-column:3; font-size:.88rem; line-height:1.4; /* AUSDRUECKLICH NORMAL. Ohne Angabe erbt die Zelle die Staerke des umgebenden Elements - auf der Startseite fiel sie damit fett aus, in der Vorschau nicht. Was sich vererbt, ist keine Entscheidung. */ font-weight:400; color:var(--tinte); min-width:0; overflow-wrap:break-word; } /* DIE LINIE IST EIN EIGENES FELD ueber alle drei Spalten. Als Rand an den Zellen lag sie auf drei Hoehen: das Datum ist zwei Zeilen kurz, ein umgebrochener Titel vier Zeilen lang. Drei Raender ergaben drei Striche statt einer Linie. */ .rk-wlinie{ grid-column:1 / -1; height:0; border-bottom:1px solid var(--linie); margin:1px 0; } /* Heute: Strich in Spalte 1, Wochentag in Markenfarbe. Der negative Aussenabstand holt den Strich an den Kartenrand, ohne die Spaltenbreite zu aendern. */ .rk-wtag--heute{ box-shadow:inset 3px 0 0 var(--akzent); padding-left:9px; margin-left:-9px; } .rk-wtag--heute b{ color:var(--akzent); } /* L74 · Der Titel als Verweis. Farbe wie Text, kein Unterstrich - in einer Liste aus lauter Verweisen waere beides Laerm. Der Druckpunkt ist die ganze Zeilenhoehe, damit man nicht zielen muss. */ .rk-wlink{ color:inherit; text-decoration:none; display:inline-block; } .rk-wlink:active{ color:var(--akzent); } .rk-wtitel--fertig{ color:var(--leise); text-decoration:line-through; text-decoration-color:var(--linie); } .rk-wtitel--fertig .rk-wlink{ color:inherit; } /* L74 · Die Chips im Plan stehen jetzt neben dem Verweis statt darin - sonst fuehrte ein Tippen auf "gekocht" zum Rezept. */ .rk-planchips{ flex:1 1 100%; margin-top:2px; } .rk-whaken{ color:#1a7a3c; text-decoration:none; display:inline-block; } .rk-wkreuz{ color:var(--leise); text-decoration:none; display:inline-block; } /* rk-plantag bleibt: die Planseite nutzt es weiter. */ .rk-plantag{ font-size:.95rem; line-height:1.35; color:var(--tinte); margin:0; padding:0; } .rk-plantag .d{ color:var(--leise); font-size:.78rem; } .rk-plantrenner{ border-bottom:1px solid var(--linie); margin:0 0 10px; padding:0; } /* ---------- Fusszeile -------------------------------------------- */ /* Fassung 37: EINE mittige Zeile. Der Name steht schon in der Wortmarke ueber jeder Seite. Fassung 34: klebt unten, Boden von 34 festen Pixeln. KEIN env(), KEIN calc() - siehe Kopf dieser Datei. */ /* L48.2: NICHT mehr festgeklebt - unten steht jetzt die Fussleiste. Damit entfaellt auch der Grund fuer den 34-Pixel-Boden aus Fassung 34: die Zeile kann nicht mehr aus dem Bild rutschen, weil sie mitlaeuft. KEIN env(), KEIN calc() - das bleibt wahr. */ .rk-fuss{ background:transparent; border-top:1px solid var(--linie); color:var(--pastell); font-size:9px; line-height:1.5; letter-spacing:.02em; text-align:center; padding:14px 12px 6px; white-space:nowrap; margin-top:22px; } /* ---------- Willkommen, Anmelden, Sperrseite --------------------- */ .rk-start{ text-align:center; padding:30px 0 2px; } .rk-marke{ width:112px; height:112px; display:inline-block; } .rk-kranz{ transform-origin:256px 256px; } .rk-gruss{ font-size:1.18rem; font-weight:700; letter-spacing:-.03em; line-height:1.24; color:var(--tinte); margin-top:22px; } .rk-gruss .a{ color:var(--akzent); } .rk-wortbox{ margin:14px auto 0; max-width:290px; } .rk-wortbox .rk-wm{ font-size:48px; font-weight:800; letter-spacing:-.02em; white-space:nowrap; } .rk-wortbox .rk-wm .schwarz{ color:var(--tinte); } .rk-wortbox .rk-wm .blau{ color:var(--akzent); } .rk-wortbox .rk-wm .strich{ display:inline-block; width:.40em; height:.11em; margin:0 .07em; vertical-align:.24em; border-radius:2px; background:linear-gradient(135deg, var(--tinte) 0 50%, var(--akzent) 50% 100%); } .rk-wm-unter{ margin-top:4px; font-size:11px; font-weight:400; letter-spacing:.22em; text-indent:.22em; color:var(--leise); white-space:nowrap; } /* L46: EINE Zeile (Bild 9) */ .rk-wort{ width:100%; height:auto; display:block; } .rk-satz{ margin:28px auto 18px; max-width:340px; font-size:.92rem; line-height:1.6; color:#475467; } .rk-authkopf{ font-size:1.3rem; font-weight:700; letter-spacing:-.02em; color:var(--tinte); margin:6px 0 14px; } .rk-sperrknopf{ display:block; margin:22px auto 0; max-width:420px; background:#1D4ED8; color:#FFFFFF; text-decoration:none; padding:13px 18px; border-radius:10px; font-weight:600; font-size:1.02rem; } .rk-sperrnote{ margin-top:26px; color:#98A2B3; font-size:.72rem; } .rk-zurueck{ display:inline-block; font-size:.82rem; color:var(--grau); text-decoration:none; margin:.2rem 0 .6rem; } .rk-zurueck:hover{ color:var(--akzent); } /* ---------- Bewegung --------------------------------------------- */ @keyframes rk-auf{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} } @keyframes rk-logo{ from{opacity:0; transform:scale(.86);} to{opacity:1; transform:none;} } @keyframes rk-kreisel{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} } .rk-marke{ animation:rk-logo .9s cubic-bezier(.2,.7,.3,1) .1s both; } .rk-kranz{ animation:rk-kreisel 2.4s cubic-bezier(.12,.72,.22,1) .1s both; } .rk-gruss{ animation:rk-auf .9s cubic-bezier(.2,.7,.3,1) .95s both; } .rk-wortbox{ animation:rk-auf .9s cubic-bezier(.2,.7,.3,1) 1.25s both; } .rk-satz{ animation:rk-auf .9s cubic-bezier(.2,.7,.3,1) 1.55s both; } @media (prefers-reduced-motion:reduce){ .rk-marke,.rk-kranz,.rk-gruss,.rk-wortbox,.rk-satz{ animation:none; opacity:1; transform:none; } } /* ================================================================== REZEPTANSICHT · Lieferung 19 · BLOCK C ------------------------------------------------------------------ Alles Aussehen dieser Seite steht HIER, nicht im PHP - stehende Entscheidung. Es wird keine bestehende Regel geaendert, nur angehaengt. Alle Farben kommen aus den Marken-Variablen oben; es wird kein neuer Farbwert eingefuehrt. ================================================================== */ /* ---------- Kopfzeile: Dauer, Portionen, Aufwand ------------------ */ .rk-ansicht-kacheln{ display:flex; gap:8px; flex-wrap:wrap; margin:2px 0 10px; } .rk-ansicht-kacheln>*{ flex:1 1 0; min-width:88px; } .rk-ansicht-marken{ margin:0 0 14px; } /* ---------- Bilder ------------------------------------------------ Eins gross, zwei klein daneben - bei drei Bildern. Bei einem fuellt es die Breite. Kein fester Rahmen: eine leere Flaeche sieht auf dem Handy aus wie ein Ladefehler. */ .rk-ansicht-bilder{ display:grid; gap:6px; margin:0 0 18px; grid-template-columns:repeat(2,1fr); } .rk-ansicht-bilder>.rk-bild:first-child:nth-last-child(1){ grid-column:1 / -1; } .rk-ansicht-bilder>.rk-bild:first-child:nth-last-child(3){ grid-row:span 2; } .rk-bild{ display:block; border-radius:12px; overflow:hidden; background:var(--flaeche); line-height:0; } .rk-bild img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4 / 3; display:block; } .rk-ansicht-bilder>.rk-bild:first-child:nth-last-child(3) img{ aspect-ratio:1 / 1; } /* ---------- Abschnittsueberschriften ------------------------------ Keine Weblink-Optik. Ueberschriften sind Ueberschriften. */ .rk-ansicht-titel{ font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--grau); font-weight:700; margin:20px 0 8px; padding-bottom:6px; border-bottom:2px solid var(--pastell); } /* ---------- Zutaten ----------------------------------------------- Mengen stehen in einer eigenen Spalte links und sind auf gleicher Breite - so liest man die Spalte beim Einkaufen von oben nach unten durch, ohne zu suchen. */ .rk-zutatenliste{ list-style:none; margin:0 0 4px; padding:0; } .rk-zutatenliste li{ display:flex; gap:10px; align-items:baseline; padding:9px 2px; border-bottom:1px solid var(--linie); } .rk-zutatenliste li:last-child{ border-bottom:0; } .rk-zutatenliste .menge{ flex:0 0 5.6rem; text-align:right; font-variant-numeric:tabular-nums; font-weight:600; color:var(--tinte); } .rk-zutatenliste .name{ flex:1 1 auto; color:var(--tinte); } /* ---------- Weg zum Gericht --------------------------------------- */ .rk-schritte{ list-style:none; counter-reset:schritt; margin:0; padding:0; } .rk-schritte li{ counter-increment:schritt; position:relative; padding:0 0 14px 2.1rem; line-height:1.5; } .rk-schritte li::before{ content:counter(schritt); position:absolute; left:0; top:.05rem; width:1.5rem; height:1.5rem; border-radius:50%; background:var(--pastell); color:var(--tinte); font-size:.76rem; font-weight:700; display:flex; align-items:center; justify-content:center; } .rk-quelle{ font-size:.80rem; color:var(--leise); margin:6px 0 0; overflow-wrap:anywhere; } /* ---------- Fusszeile (L30) -------------------------------------- In der Vorlage steht die Zeile mittig, klein und in Akzentblau: "(c) Rene Weiss 2026 V1.0.1". Ansicht::fuss() hat heute 0 von 0 Argumenten und wird nicht gerufen - die Regel steht hier bereit, damit das Stylesheet nicht zweimal angefasst werden muss. */ /* v13: kleiner + Pastell-Ton. Gewählter Ton ist bindend (Sinn von Entscheidung 67): 1,55:1 gegen Weiß, gemessen und bewusst - eine Zierzeile, keine Auskunft. */ .rk-fuss{ text-align:center; font-size:12px; color:var(--pastell); padding:16px 0 24px; margin-top:18px; border-top:1px solid var(--linie); } /* ---------- Oeffnen-Zeichen in der Rezeptliste -------------------- Wird von Rezepte.php gebraucht, sobald der Weg dorthin gebaut ist. Die Regel steht schon hier, damit das Stylesheet nicht zweimal angefasst werden muss. */ .rk-oeffnen{ display:inline-flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; border-radius:10px; color:var(--akzent); text-decoration:none; flex:0 0 auto; } .rk-oeffnen:hover{ background:var(--flaeche); } /* Die ganze Rezeptzeile als Weg zur Ansicht (L21): sieht aus wie vorher - Titel dunkel, kein Linkblau, kein Unterstrich. Dass sie fuehrt, zeigt das Antippen, nicht die Farbe. */ .rk-oeffnen-zeile{ text-decoration:none; color:inherit; display:block; } /* ---------- Nur fuer das Pruefskript ----------------------------- */ .rk-probe{ border:1px dashed var(--linie); border-radius:12px; padding:10px 12px; margin:14px 0; } .rk-probe>.titel{ font-size:.70rem; text-transform:uppercase; letter-spacing:.08em; color:var(--leise); font-weight:700; margin-bottom:8px; } .rk-pruefkopf{ display:flex; align-items:flex-start; gap:.5rem; font-size:.92rem; } .rk-pruefkopf .mal{ font-weight:700; flex:0 0 auto; } .rk-pruefwert{ margin:2px 0 0 1.4rem; font-size:.76rem; color:var(--leise); overflow-wrap:anywhere; } /* ---------- SiteLock-Siegel in der Fusszeile (L31, E91) ---------- */ .rk-siegel{ position:absolute; right:12px; top:5px; line-height:0; } .rk-siegel img{ height:20px; width:auto; display:block; border-radius:3px; } /* ---------- Passkey-Verwaltung (L55) ----------------------------- */ .rk-pkzeile{ display:flex; align-items:center; gap:.6rem; padding:8px 0; border-bottom:1px solid var(--linie); flex-wrap:wrap; } .rk-pkname{ font-weight:700; } .rk-pkdatum{ font-size:.78rem; color:var(--leise); flex:1 1 auto; } /* ================================================================== v13 · CHIP-AUSWAHL: Auswahlmenüs im Chip-Kleid mit gezeichnetem Pfeil (Daten-URI-SVG, runde Kappen - kein Systempfeil, kein JS). Steht NACH der Feldregel und gewinnt deshalb die Kaskade; die Feldregel selbst bleibt für Eingaben unangetastet. ================================================================== */ .rk-feld select{ appearance:none; -webkit-appearance:none; min-height:34px; border-radius:999px; cursor:pointer; border:1px solid var(--pastell); background-color:var(--pastell-hell); color:var(--akzent); font-size:13px; font-weight:400; padding:6px 38px 6px 14px; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1.8 1.6C3.4 3.4 5 5.2 7 6.9 9 5.1 10.7 3.3 12.2 1.7' fill='none' stroke='%231D4ED8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; background-size:11px 7px; } .rk-feld select:focus{ outline:none; border-color:var(--fuell); box-shadow:0 0 0 3px var(--pastell-hell); } /* ---------- Dateiwaehler (L35, Feinschliff d/f) ------------------ */ /* Der Knopf ist das Chip aus .rk-knopf, Wort fuer Wort dieselben Werte. Der Rest des Feldes (nativer Dateiname bzw. "Keine ausgewaehlt") laeuft leise mit - 13px wie alle Knopfschrift. */ input[type=file]{ font-family:inherit; font-size:13px; color:var(--leise); max-width:100%; } input[type=file]::file-selector-button{ display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:5px 12px; font-size:13px; font-weight:400; font-family:inherit; line-height:1.4; border-radius:999px; border:1px solid var(--fuell); color:var(--akzent); background:var(--pastell-hell); margin-right:10px; cursor:pointer; } input[type=file]::file-selector-button:hover{ background:var(--pastell); } /* ---------- Ausklapper (L36, Feinschliff e) ---------------------- */ /* summary traegt das Chipbild aus .rk-knopf; das Dreieck des Browsers faellt weg, auf/zu zeigt der Chip selbst. */ details.rk-klapp{ margin:10px 0; } details.rk-klapp>summary{ display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:5px 12px; font-size:13px; font-weight:400; line-height:1.4; border-radius:999px; border:1px solid var(--fuell); color:var(--akzent); background:var(--pastell-hell); cursor:pointer; list-style:none; user-select:none; } details.rk-klapp>summary::-webkit-details-marker{ display:none; } details.rk-klapp[open]>summary{ background:var(--pastell); } details.rk-klapp[open]{ padding-bottom:4px; } /* ================================================================== L39 · KALENDERSCHICHT (Lieferung 65, D12) ------------------------------------------------------------------ Monatskalender unter /kalender. Mo-So-Raster aus CSS-Grid, jede Tageszelle ist ein Verweis auf den Plan der zugehoerigen Woche. Punkte statt Titel (Wahl GOTT): frueh gruen (--gut), mittag blau (--akzent), abend dunkel (--tinte). Fremdmonatstage gedaempft, der heutige Tag traegt einen Akzentring. ================================================================== */ .rk-kalnav{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:10px 0 14px; } .rk-kalgitter{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin:0 0 16px; } .rk-kalkopf{ text-align:center; font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--leise); padding:2px 0 6px; text-transform:uppercase; } .rk-kaltag{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:3px; min-height:52px; padding:6px 2px 5px; border:1px solid var(--linie); border-radius:12px; background:#FFFFFF; text-decoration:none; color:var(--tinte); } .rk-kaltag:hover{ background:var(--pastell-hell); } .rk-kalzahl{ font-size:14px; line-height:1.2; } .rk-kal-fremd{ color:var(--leise); background:var(--flaeche); } .rk-kal-fremd:hover{ background:var(--pastell-hell); } .rk-kal-heute{ border-color:var(--akzent); box-shadow:inset 0 0 0 1px var(--akzent); } .rk-kal-heute .rk-kalzahl{ font-weight:600; color:var(--akzent); } .rk-kalpunkte{ display:flex; gap:3px; align-items:center; justify-content:center; } .rk-kalpunkt{ width:6px; height:6px; border-radius:50%; display:inline-block; } .rk-kalpunkt-frueh { background:var(--gut); } .rk-kalpunkt-mittag{ background:var(--akzent); } .rk-kalpunkt-abend { background:var(--akzent-tief); } /* L46 (Bild 10): kein schwarzer Punkt mehr - abends tiefes Markenblau, frueh gruen, mittags Akzent. */ /* ================================================================== L40 · DATENSCHUTZSEITE + FUSSVERWEIS (Lieferung 65b, E91) ================================================================== */ /* ---------- L46/47 · v14-Bausteine ------------------------------- */ .rk-nurlaut{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } .rk-suchzeile{ display:flex; gap:6px; align-items:center; margin:0 0 .5rem; } .rk-suchzeile input[type="search"]{ flex:1; min-width:0; border:1px solid var(--linie); border-radius:999px; background:#F7F9FC; padding:9px 14px; font-size:14px; color:var(--tinte); } .rk-suchzeile .rk-knopf{ flex:none; } .rk-chipzeile{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 .6rem; } /* L47 (Bild 2, Ablauf-Filter als nackter Text): in der Chipzeile traegt jeder Knopf - auch ein leiser - das kleine Chip-Kleid. */ .rk-chipzeile .rk-knopf, .rk-chipzeile .rk-knopf--leise{ /* L81: WEISS STATT PASTELL. Sechs gefuellte Chips nebeneinander leuchteten gleich stark, obwohl fuenf davon aus waren - eine Farbe, die nichts unterscheidet, ist Laerm. Gefuellt ist jetzt nur, was an ist (rk-knopf--an weiter unten). */ border:1px solid var(--linie); border-radius:999px; background:#FFFFFF; color:var(--akzent); font-size:12px; font-weight:400; padding:3px 10px; box-shadow:none; text-decoration:none; } /* L81: Der ANGESCHALTETE Chip ist gefuellt - und nur er. Damit sagt die Farbe wieder etwas: sie steht fuer "das gilt gerade", nicht fuer "das ist ein Chip". */ .rk-chipzeile .rk-knopf--an, .rk-chipzeile .rk-knopf--leise.rk-knopf--an{ background:var(--akzent); border-color:var(--akzent); color:#FFFFFF; font-weight:600; } .rk-knopfreihe.rk-halb{ display:flex; gap:6px; } .rk-knopfreihe.rk-halb .rk-knopf{ flex:1; } .rk-halbklapp{ display:flex; gap:6px; align-items:flex-start; flex-wrap:wrap; margin:0 0 .6rem; } .rk-halbklapp > details{ flex:1 1 46%; min-width:46%; margin:0; } .rk-halbklapp > details[open]{ flex-basis:100%; } .rk-klapp--leise > summary{ background:none; border:0; color:var(--akzent); font-size:13px; text-align:center; text-decoration:underline; text-underline-offset:3px; padding:4px 0; } .rk-fussweg{ color:inherit; text-decoration:underline; } .rk-dsu{ font-size:15px; font-weight:600; color:var(--tinte); margin:18px 0 4px; } .rk-dsa{ font-size:14px; line-height:1.55; color:var(--tinte); margin:0 0 6px; } /* ================================================================== L43/L44 · GERICHTE-WAHL (Lieferung 78/79, E113) L44: kompakter nach GOTT-Augenschein - kleinere Schrift, engere Polster, kleineres Kaestchen. Bauart unveraendert. ------------------------------------------------------------------ Chips des Aufklappers "Diesmal einkaufen fuer": weisse Zeile mit kleinem Kaestchen links, das beim Anhaken GRUEN wird und einen weissen Haken zeigt. Das echte Kontrollfeld liegt unsichtbar daneben (Bauart wie rk-tagbox). ================================================================== */ .rk-wahlbox{ position:absolute; opacity:0; width:1px; height:1px; } .rk-wahl{ display:flex; align-items:center; gap:8px; width:100%; padding:6px 10px; margin:2px 0; border:1.5px solid var(--fuell); border-radius:10px; background:#FFFFFF; color:var(--tinte); font-size:13.5px; line-height:1.3; cursor:pointer; user-select:none; } .rk-wahl::before{ content:''; flex:0 0 15px; width:15px; height:15px; border:1.5px solid var(--fuell); border-radius:5px; background:#FFFFFF; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; line-height:1; color:#FFFFFF; } .rk-wahlbox:checked + .rk-wahl{ border-color:var(--gut); background:var(--gut-hell); } .rk-wahlbox:checked + .rk-wahl::before{ content:'\2713'; background:var(--gut); border-color:var(--gut); } .rk-wahlbox:focus-visible + .rk-wahl{ outline:2px solid var(--akzent); outline-offset:2px; } /* ================================================================== L41 · ABLAGEFELD (Lieferung 73, V13-Mockup GOTT 19.08.) ------------------------------------------------------------------ Die gestrichelte Zone von /kassenbon ("Bon hierher") und /import ("Rezept hierher"): Titel, Hinweiszeile, Waehlknoepfe als Chips, Dateinamen-Zeile. Das echte Dateifeld liegt versteckt daneben - rk-versteckt statt display:none, damit Tastatur und Vorleser es weiter erreichen. ================================================================== */ .rk-ablage{ border:2px dashed var(--fuell); border-radius:18px; background:var(--pastell-hell); padding:26px 16px 18px; margin:10px 0 4px; text-align:center; } .rk-ablage-titel{ font-size:19px; font-weight:700; color:var(--tinte); margin:0 0 6px; } .rk-ablage-hinweis{ font-size:13px; line-height:1.5; color:var(--leise); margin:0 0 14px; } .rk-ablage .rk-knopfreihe{ margin:0 0 4px; } .rk-ablage .rk-knopf{ background:#FFFFFF; } .rk-ablage .rk-knopf:hover{ background:var(--pastell); } .rk-ablage-datei{ font-size:13px; color:var(--leise); margin:8px 0 0; overflow-wrap:anywhere; } .rk-versteckt{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; border:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* ================================================================== L47 · HEILUNG + REZEPTLISTE (ans Ende gestellt: spaeter gewinnt) ================================================================== */ /* (a) Der leise Klapp: die Grundregel details.rk-klapp>summary stand SPAETER in der Datei und gewann - deshalb blieb der Chip stehen (GOTT-Bild 1). Jetzt steht die leise Fassung dahinter und traegt dieselbe Wertigkeitstiefe plus eine Stufe. */ details.rk-klapp.rk-klapp--leise>summary{ background:none; border:0; border-radius:0; padding:4px 0; color:var(--akzent); font-size:13px; font-weight:400; text-align:center; text-decoration:underline; text-underline-offset:3px; box-shadow:none; } details.rk-klapp.rk-klapp--leise[open]>summary{ background:none; } /* Mehr Filter: der Klapp traegt den Chip-Kopf der Grundregel, innen liegen die Reiterleisten wie gehabt. */ details.rk-mehrfilter>summary{ margin:0 auto; } details.rk-mehrfilter{ text-align:center; } /* Rezept-Bildkachel (Bild 2): Foto oder Anfangsbuchstabe. */ .rk-rezzeile{ display:flex; align-items:center; gap:10px; } .rk-rezmitte{ flex:1; min-width:0; } .rk-rezkachel{ width:46px; height:46px; border-radius:12px; flex:none; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:800; color:var(--akzent-tief); background:linear-gradient(135deg,var(--pastell-hell), var(--pastell)); } .rk-rezkachel img{ width:100%; height:100%; object-fit:cover; display:block; } /* ================================================================== L48.1 · DIE FUSSLEISTE ------------------------------------------------------------------ Dasselbe Markup wie bisher -