/* ═══════════════════════════════════════════════════════════ style.css — KüchenApp ═══════════════════════════════════════════════════════════ */ :root { --gruen-dunkel : #1a2e1a; --gruen-mittel : #2d4a2d; --gruen-hell : #4a7c4a; --gruen-accent : #6db86d; /* Gruen als SCHRIFTFARBE. Bewusst getrennt von --gruen-dunkel, obwohl es hier derselbe Ton ist: --gruen-dunkel dient auch als Hintergrund (Kopfbereich, Knoepfe). Im Dunkelmodus muss die Schrift hell werden, die Flaechen aber dunkel bleiben. Mit einer Variablen fuer beides ginge das nicht, und einzelne body.dark-Regeln waeren 50 Stueck gewesen. */ --gruen-schrift : #1a2e1a; /* Gegenstueck: Schrift auf gruenen Flaechen (Knoepfe, Kopfbereich, Bon-Scanner). Sie muss in BEIDEN Modi hell bleiben, weil die Flaeche darunter immer gruen ist. Vorher stand dort var(--creme). Das kippt im Dunkelmodus auf #1a1a1a, und damit war zum Beispiel der Schriftzug "Pott&Pann" im Kopfbereich unsichtbar: dunkles Gruen auf dunklem Gruen. */ --auf-gruen : #f5f0e8; /* Rot als SCHRIFTFARBE. Dieselbe Trennung wie bei --gruen-schrift: --rot-warn dient auch als Flaeche und als Rahmen, und auf dunklem Grund kommt es als Schrift nur auf 2.64 statt der geforderten 4.5. */ --rot-schrift : #c0392b; --creme : #f5f0e8; --creme-dunkel : #ede5d5; --weiss : #ffffff; --text-dunkel : #1a2e1a; --text-mittel : #4a5c4a; --text-hell : #8a9e8a; --rot-warn : #c0392b; --orange-warn : #e67e22; --schatten : rgba(26, 46, 26, 0.12); --font-titel : 'Playfair Display', Georgia, serif; --font-text : 'DM Sans', sans-serif; --radius : 16px; --radius-klein : 8px; --padding : 20px; /* Wie viel oben freibleiben muss, damit nichts unter der Statusleiste des Geraets liegt. In der App misst MainActivity.java den Wert und setzt --android-top. Im Browser und auf iOS gibt es diese Variable nicht, dort greift env() als Rueckfall, und fehlt beides, bleiben es 0 Pixel. Jeder Bereich, der am oberen Bildschirmrand klebt, muss das einrechnen: der Kopfbereich, der Bon-Scanner, der Haushalts-Drawer. Seit targetSdk 36 (2026-09-28) zeichnet die App wirklich randlos, ohne das Polster liegt die Uhrzeit mitten im Inhalt. */ --oben-frei : var(--android-top, env(safe-area-inset-top, 0px)); /* Dasselbe fuer unten, also fuer Androids Navigationsleiste. Gilt fuer alles, was am unteren Bildschirmrand klebt: die Hauptnavigation, der Haushalts-Drawer, Vollbild-Bereiche. --android-nav kommt ebenfalls aus MainActivity.java, --viewport-versatz gleicht aus, dass die Seite ihre Hoehe anders rechnet als die WebView tatsaechlich misst. */ --unten-frei : calc(var(--android-nav, env(safe-area-inset-bottom, 0px)) + var(--viewport-versatz, 0px)); /* Hoehe der Bildschirmtastatur. Setzt app.js, siehe _tastaturAnwenden(). 0px solange nichts getippt wird. ⚠️ Bewusst NICHT in --unten-frei eingerechnet. Daran haengt auch die untere Hauptnavigation, und die soll bei offener Tastatur liegen bleiben statt nach oben zu springen. Gebraucht wird der Wert nur dort, wo etwas sonst UNTER der Tastatur verschwindet: in den Modalen. */ --tastatur-hoehe: 0px; /* Was einem Modal unten weggenommen werden muss. Nicht Leiste UND Tastatur addieren: die Tastatur liegt ueber der Systemleiste, nicht darunter. Addiert waere das Modal unnoetig flach. Zwei Zeilen als Rueckfall. Kann der Browser kein max() — sehr alte WebView —, verwirft er die zweite und nimmt die erste. Dann ist das Modal bei offener Tastatur ein paar Pixel zu hoch, statt dass die ganze Regel ungueltig wird und es GAR keine Begrenzung mehr gibt. */ --unten-modal : var(--unten-frei); --unten-modal : max(var(--unten-frei), var(--tastatur-hoehe)); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Sicherheitsnetz gegen waagerechtes Verschieben. Ein einziges zu breites Element macht die ganze Seite seitlich wischbar — in einer App fuehlt sich das kaputt an. "clip" statt "hidden", weil hidden einen Scroll-Container erzeugt und damit position: sticky im Header brechen kann. Das ersetzt keine Ursachensuche: zu breite Elemente gehoeren trotzdem gefixt (siehe .btn-haushalt). Es verhindert nur, dass ein uebersehener Fall gleich die Bedienung ruiniert. */ html { scroll-behavior: smooth; overflow-x: clip; } body { overflow-x: clip; } /* GUMMIBAND-EFFEKT ABSCHALTEN Zieht man am Seitenende weiter, dehnt Android die Seite wie Gummi: der Kopfbereich wird groesser, die untere Navigation gestaucht. In einem Browser gehoert das so, in einer App fuehlt es sich wackelig an, weil Kopf und Navigation eigentlich feststehen sollen. "none" statt "contain": contain haelt die Dehnung nur innerhalb des Bereichs, verhindert sie aber nicht. Unterbindet zugleich das Nachladen-durch-Ziehen, das wir nirgends nutzen. Reicht allein nicht: die WebView zeichnet den Effekt teilweise selbst, unabhaengig vom CSS. Deshalb setzt MainActivity.java zusaetzlich OVER_SCROLL_NEVER. */ html, body { overscroll-behavior: none; } /* KNOEPFE ERBEN DIE SCHRIFTFARBE