/* ═══════════════════════════════════════════════════════════
SUTTRU – Pastell & Glas
Datei: css/pastell.css
WARUM ES DIESE DATEI GIBT:
Die Farben liegen an 1635 Stellen in 27 Dateien, verteilt auf 16 eigene
:root-Bloecke. Die alle einzeln umzuschreiben waere ein Eingriff, den
niemand mehr vollstaendig pruefen kann - und die App ist gerade erst von
Apple freigegeben. Stattdessen wird hier zentral ueberschrieben, was die
Seiten ohnehin ueber Variablen beziehen (3001 Stellen).
ZURUECKNEHMEN: Diese Datei aus dem der Seiten entfernen. Es bleibt
nichts zurueck - keine Seite wurde in ihren eigenen Farben veraendert.
:root:root statt :root ist Absicht: Damit gewinnt diese Datei gegen die
Farbbloecke der Seiten, egal in welcher Reihenfolge sie geladen wird.
───────────────────────────────────────────────────────────
HELL/DUNKEL - DER FALLSTRICK
Die App hat eine EIGENE Umschaltung: js/theme.js setzt am die
Klassen .theme-light oder .theme-dark, je nachdem was im Profil unter
"Darstellung" gewaehlt ist. Nur bei "Automatisch" entscheidet das System.
Diese Datei kannte anfangs nur @media (prefers-color-scheme). Wer im
Profil "Immer hell" waehlte, bekam deshalb eine helle Seite mit einem
DUNKLEN Blatt darauf - und dunkle Schrift darin, also unlesbar. Jede
Farbentscheidung hier muss beide Wege abdecken:
Basis -> dunkel
.theme-light -> hell, egal was das System sagt
System hell, kein .theme-dark -> hell
═══════════════════════════════════════════════════════════ */
/* ── Dunkel: die Grundeinstellung ───────────────────────────── */
:root:root {
/* Die Fotos der Laeden und der Ganesha-Kopf leben vom dunklen Grund.
Pastell wirkt hier als LICHT darauf - so wie die Karten in der Wallet. */
/* Der Grund war #0d1117 - praktisch Schwarz mit einem Hauch Blau.
Fast-Schwarz wirkt hart und laesst Pastell darauf grell erscheinen.
Ein angehobener, leicht violetter Indigo-Ton gibt den weichen Farben
Raum und wirkt zugleich moderner: Flaechen darauf schweben, statt in
ein Loch geschnitten zu sein. */
--bg: #16171d;
--surface: rgba(255,255,255,.052);
--surface2: rgba(255,255,255,.095);
--card-bg: rgba(255,255,255,.042);
/* --card wurde uebersehen. css/deinmarket.css benutzt DIESEN Namen fuer
seine Karten, nicht --card-bg. Folge am 5. September: Steht das System
auf dunkel, waehrend im Profil "Immer hell" gewaehlt ist, setzt die
Seite --card ueber ihre eigene Dunkel-Regel auf Schwarz, waehrend ich
Grund und Schrift auf hell umstelle - dunkle Karte, dunkle Schrift,
unlesbar. Jede Variable, die eine Seite fuer Flaechen verwendet, muss
hier mit. */
--card: #1c1f2b;
--accent: #ffc38f;
--border: rgba(255,255,255,.10);
/* Reines Weiss als Schrift blendet auf dunklem Grund. Ein Hauch Blau
nimmt die Haerte, ohne Kontrast zu kosten. */
--txt: #eceff6;
--muted: #969fb4;
/* Marke: weicher als das harte #e63946, aber bewusst KEIN Pastellton.
Ein blassrosa Knopf sieht ausgeschaltet aus, und "Stempel geben" oder
"Anmelden" muessen als Handlung erkennbar bleiben. */
/* Die Marke bleibt rot - sie steckt im Logo, im App-Symbol und in den
Store-Bildern; ein anderer Farbton waere kein frischer Ton mehr,
sondern eine andere Marke. Sie wird aber korallener und heller: weg
vom blutigen Rot, hin zu einem Ton, der neben Pastell bestehen kann,
ohne zu schreien. */
/* Kreidiger statt leuchtend: weniger Saettigung, etwas mehr Grau darin.
Ein mattes Rot bleibt als Handlung erkennbar, ohne zu strahlen. */
--brand: #f96f7d;
--brand-dark: #e05868;
--brand-soft: rgba(249,111,125,.16);
/* Pastellakzente fuer Symbole und Plaketten - dort, wo Farbe
unterscheidet statt zur Handlung aufzufordern. */
/* Kuehlere, klarere Pastelltoene. Die alten waren warm und leicht
staubig - hier gehen sie Richtung Flieder, Minze und Himmel. Das ist
der eigentliche Unterschied zwischen "gedeckt" und "frisch". */
/* Alle Toene mit etwas Grau unterlegt - das nimmt ihnen das Leuchten
und gibt ihnen die kreidige Ruhe von mattem Papier. */
/* Kraeftiger als die kreidige Fassung davor: Pastell heisst hell und
weich, nicht blass. Die vorige Stufe hatte so viel Grau darin, dass
die Farben nur noch angedeutet waren und die App leblos wirkte. */
--p-rose: #ffabb5; --p-blau: #a8c4f5;
--p-gruen: #8fdcb8; --p-orange: #ffc38f;
--p-lila: #c4b2f5; --p-teal: #8fd9d6;
--p-pink: #ffb0d4; --p-sand: #c3cddb;
--green: #55cf9c;
--blue: #7aa8f0;
/* Deckend fuer Text-Dialoge, durchscheinend fuer Blaetter - siehe unten. */
--sheet-bg: rgba(28,31,43,.90);
--blatt-bg: rgba(28,31,43,.52);
/* Glanz und Schatten stehen als Variablen da, damit die Regeln weiter
unten nur EINMAL geschrieben werden muessen. Hell und dunkel tauschen
bloss die Werte - vorher war derselbe Selektorblock dreifach da. */
/* MATT: kein Glanz mehr.
Der helle Schimmer an der Oberkante liess die Flaechen wie poliertes
Glas wirken. Matt heisst genau das Gegenteil - die Flaeche wirft kein
Licht zurueck, sie nimmt es auf. Der Wert bleibt als Variable stehen,
damit sich der Glanz mit einer Zeile zurueckholen laesst. */
--glanz: none;
--karten-schatten: 0 1px 2px rgba(0,0,0,.16), 0 4px 14px rgba(0,0,0,.14);
--shadow-sm: 0 1px 3px rgba(0,0,0,.28), 0 6px 18px rgba(0,0,0,.22);
--shadow: 0 2px 6px rgba(0,0,0,.3), 0 12px 30px rgba(0,0,0,.28);
--shadow-md: 0 2px 6px rgba(0,0,0,.3), 0 12px 30px rgba(0,0,0,.28);
--shadow-card: 0 2px 6px rgba(0,0,0,.3), 0 14px 34px rgba(0,0,0,.32);
}
/* ── Hell ────────────────────────────────────────────────────
Zwei Selektoren, gleiche Werte: einmal ueber die Systemeinstellung,
einmal ueber die ausdrueckliche Wahl im Profil.
Der Grund traegt einen spuerbaren Blauton, die Karten sind fast weiss.
Vorher lagen Karten mit 78% Weiss auf #f2f4f8 - rund 3% Unterschied,
damit loesten sie sich im Hintergrund auf. */
@media (prefers-color-scheme: light) {
:root:root:not(.theme-dark) {
/* Heller Modus: ein Hauch Flieder im Grund statt neutralem Grau.
Reines Grau wirkt technisch; ein minimaler Farbstich laesst die
weissen Karten waermer und die Pastellakzente stimmiger wirken. */
--bg: #edeef1;
--surface: rgba(255,255,255,.95);
--surface2: rgba(255,255,255,1);
--card-bg: rgba(255,255,255,.95);
--card: #ffffff;
--accent: #e09a55;
--border: rgba(24,28,48,.10);
--txt: #1a1e2e;
--muted: #616a83;
--sheet-bg: rgba(255,255,255,.97);
--blatt-bg: rgba(255,255,255,.72);
/* Auf einer fast weissen Karte fuegt ein weisser Schimmer nichts hinzu,
sondern nimmt nur Kontrast weg. Stattdessen ein Hauch Schatten von
oben: Tiefe statt Blendung. */
--glanz: none;
--karten-schatten: 0 1px 2px rgba(20,30,48,.04), 0 5px 14px rgba(20,30,48,.05);
--shadow-sm: 0 1px 3px rgba(20,30,48,.06), 0 6px 18px rgba(20,30,48,.07);
--shadow: 0 2px 6px rgba(20,30,48,.07), 0 12px 30px rgba(20,30,48,.09);
--shadow-md: 0 2px 6px rgba(20,30,48,.07), 0 12px 30px rgba(20,30,48,.09);
--shadow-card: 0 2px 6px rgba(20,30,48,.07), 0 14px 34px rgba(20,30,48,.10);
}
}
:root:root.theme-light {
--bg: #edeef1;
--surface: rgba(255,255,255,.95);
--surface2: rgba(255,255,255,1);
--card-bg: rgba(255,255,255,.95);
--card: #ffffff;
--accent: #e09a55;
--border: rgba(24,28,48,.10);
--txt: #1a1e2e;
--muted: #616a83;
--sheet-bg: rgba(255,255,255,.97);
--blatt-bg: rgba(255,255,255,.72);
--glanz: none;
--karten-schatten: 0 1px 2px rgba(20,30,48,.04), 0 5px 14px rgba(20,30,48,.05);
--shadow-sm: 0 1px 3px rgba(20,30,48,.06), 0 6px 18px rgba(20,30,48,.07);
--shadow: 0 2px 6px rgba(20,30,48,.07), 0 12px 30px rgba(20,30,48,.09);
--shadow-md: 0 2px 6px rgba(20,30,48,.07), 0 12px 30px rgba(20,30,48,.09);
--shadow-card: 0 2px 6px rgba(20,30,48,.07), 0 14px 34px rgba(20,30,48,.10);
}
/* ═══════════════════════════════════════════════════════════
GRUND MIT FARBE - die Voraussetzung fuer Glas
═══════════════════════════════════════════════════════════
Bis hierher war die Unschaerfe auf den Karten wirkungslos, und zwar aus
einem einfachen Grund: backdrop-filter verwischt, was DAHINTER liegt.
Dahinter lag eine einzige glatte Farbe. Eine glatte Farbe verwischt zu
derselben glatten Farbe - man sah nichts, egal wie stark der Wert war.
Deshalb liegt jetzt hinter allem ein ruhiger Farbverlauf aus drei
weichen Flecken in den Marken- und Pastelltoenen. Er ist zu schwach,
um selbst aufzufallen, aber er gibt dem Glas etwas zu brechen: Karten
nehmen je nach Position einen anderen Schimmer an, und beim Scrollen
wandert dieser Schimmer.
fixed, damit der Grund beim Scrollen steht und der Inhalt darueber
hinweggleitet - genau das macht den Glaseindruck.
pointer-events:none, damit nichts davon Beruehrungen abfaengt. */
body::before {
content: "";
position: fixed;
inset: -20%;
z-index: -1;
pointer-events: none;
background:
radial-gradient(42% 38% at 18% 12%, color-mix(in srgb, var(--p-lila) 34%, transparent), transparent 70%),
radial-gradient(46% 40% at 86% 26%, color-mix(in srgb, var(--brand) 27%, transparent), transparent 70%),
radial-gradient(52% 44% at 50% 96%, color-mix(in srgb, var(--p-blau) 32%, transparent), transparent 72%);
filter: blur(20px);
}
/* ═══════════════════════════════════════════════════════════
GLAS AUF ALLEN FLAECHEN
═══════════════════════════════════════════════════════════
Glas besteht aus drei Teilen, nicht aus einem:
1. durchscheinende Flaeche - sonst gibt es nichts zu durchschauen
2. Unschaerfe - das eigentliche Milchglas
3. heller Rand oben - die Lichtkante einer echten Scheibe
Teil 3 hat bisher gefehlt. Ohne ihn sieht eine unscharfe Flaeche nur
verwaschen aus; erst die Kante macht daraus Glas mit Dicke.
Die Kante ist ein inset-Schatten, kein Rahmen: Sie sitzt nur oben, wie
Licht, das von oben auf eine Scheibe faellt. Ein umlaufender Rahmen
wuerde wieder wie ein Formularfeld wirken. */
.card, .tile, .menu-item, .stat-chip, .info-box,
.market-card, .store-card, .news-card, .recipe-card, .stat-card,
/* .search-box ist am 5. September hier RAUSGEFALLEN und war dann doch
wieder drin - deshalb der eckige Kasten um Feld und Lupe in der Kasse.
Sie ist keine Flaeche, sondern eine REIHE aus zwei Dingen: dem Feld und
dem Knopf. Beide bringen ihre eigene Form mit. Legt man einen Grund
darunter, sieht man eine dritte Form, die keinem der beiden gehoert -
und weil die Regel keine Rundung setzt, mit scharfen Ecken. */
.glass, .stat-box, .card-box {
background: var(--card-bg) !important;
backdrop-filter: blur(26px) saturate(195%);
-webkit-backdrop-filter: blur(26px) saturate(195%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
var(--karten-schatten);
}
/* Im hellen Modus muss die Lichtkante staerker sein: Auf hellem Grund
verschwindet ein weisser Schimmer sonst vollstaendig. Dafuer kommt
unten eine feine dunkle Kante dazu - Glas auf hellem Grund zeigt seine
Dicke ueber den Schatten, nicht ueber das Licht. */
:root:root.theme-light .card, :root:root.theme-light .tile,
:root:root.theme-light .menu-item, :root:root.theme-light .market-card,
:root:root.theme-light .store-card, :root:root.theme-light .news-card,
:root:root.theme-light .recipe-card, :root:root.theme-light .glass {
box-shadow:
inset 0 1px 0 rgba(255,255,255,.75),
inset 0 -1px 0 rgba(24,28,48,.05),
var(--karten-schatten);
}
/* Kopfzeilen: Der Inhalt soll sichtbar darunter durchlaufen, statt an
einer deckenden Leiste abgeschnitten zu werden. Das ist der Ort, an dem
Glas am meisten bringt - hier bewegt sich staendig etwas dahinter. */
/* .page-header stand hier bis zum 5. September mit drin - und das war
falsch. Im Admin heisst so NICHT die Kopfleiste, sondern die blosse
Zeile "Dashboard ... Willkommen zurueck". Sie bekam dadurch einen
Glasgrund und eine Linie darunter und sah aus wie ein eingerahmter
Kasten, obwohl sie nur eine Ueberschrift ist.
Glas gehoert auf Leisten, die stehen bleiben, waehrend Inhalt darunter
wegscrollt - nicht auf eine Zeile, die mitscrollt. */
header, .header, .topbar, .app-header {
background: color-mix(in srgb, var(--bg) 48%, transparent) !important;
backdrop-filter: blur(30px) saturate(200%);
-webkit-backdrop-filter: blur(30px) saturate(200%);
border-bottom: 1px solid var(--border);
}
/* ── Eingabefelder ───────────────────────────────────────────
HIER IST MIR AM 5. SEPTEMBER DERSELBE FEHLER ZWEIMAL PASSIERT.
Auf der Anmeldeseite steckt das Feld NICHT allein da, sondern in einem
Rahmen mit Symbol davor:
Der Rahmen bringt Grund, Linie und Rundung mit; das darin steht
ausdruecklich auf background:none. Als ich allen Feldern per !important
einen Grund gab, gewann meine Regel - und im dunklen Rahmen sass
ploetzlich ein hellgrauer Kasten. Es sah aus wie ein Feld im Feld.
Richtig ist: Das Glas gehoert auf den RAHMEN, nicht auf das Feld darin.
Deshalb zwei getrennte Regeln - und die zweite raeumt hinter der ersten
auf, weil CSS kein "waehle nur, was KEINEN solchen Vorfahren hat" kennt. */
/* NUR .input-wrap und .input-with-icon sind echte Feld-Rahmen.
.search-bar (Startseite) und .search-box (Kasse) sahen danach aus, sind
es aber nicht: Darin steckt das Feld ZUSAMMEN MIT einem Knopf -
Standort auf der Startseite, Lupe in der Kasse. Ihnen einen Grund zu
geben hiess, eine graue Flaeche unter die ganze Reihe zu legen, die
hinter dem Knopf weiterlief. Genau der graue Kasten in der Kasse.
Sie sind deshalb wieder draussen und behalten ihre eigene Gestaltung. */
input:not([type=checkbox]):not([type=radio]):not([type=range]),
textarea, select,
.input-wrap, .input-with-icon,
.chip, .filter-chip {
background: color-mix(in srgb, var(--surface2) 88%, transparent) !important;
backdrop-filter: blur(18px) saturate(175%);
-webkit-backdrop-filter: blur(18px) saturate(175%);
}
/* Ausnahme, absichtlich: Der Handlungsknopf bleibt deckend.
Ein durchscheinendes "Anmelden" oder "Stempel geben" nimmt der Farbe
die Kraft und laesst den Knopf ausgeschaltet aussehen. Glas ist fuer
Flaechen, auf denen etwas liegt - nicht fuer die Handlung selbst. */
.btn-primary, .primary-btn, button.primary, .cta, .btn.brand {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: var(--brand) !important;
}
/* ── Glas ────────────────────────────────────────────────────
Echtes Glas braucht etwas dahinter: backdrop-filter verwischt nur, was
durchscheint. Deshalb sind die Flaechen oben durchsichtig gesetzt - erst
dadurch wirkt die Unschaerfe. Auf einer glatten Flaeche bleibt davon
wenig sichtbar; zur Geltung kommt es ueber Bildern und dort, wo Inhalt
hinter der unteren Leiste durchlaeuft.
-webkit-backdrop-filter ist fuer Safari noetig; ohne das Praefix
passiert auf dem iPhone gar nichts. */
.card, .tile, .menu-item, .stat-chip, .info-box, .modal-sheet, .modal-box,
.market-card, .store-card, .news-card, .recipe-card, .stat-card, .glass {
position: relative;
/* KEIN Rahmen. Er stand hier bis zum 5. September auf jeder Karte -
zusammen mit Schatten und Verlauf waren das drei Mittel fuer dieselbe
Aufgabe: die Flaeche vom Grund abzusetzen. Der Schatten allein reicht.
Unschaerfe und Schatten sind am 5. September nach oben in den Block
"GLAS AUF ALLEN FLAECHEN" gewandert. Sie standen hier ein zweites Mal,
und weil dieser Block WEITER UNTEN steht, gewann bei gleicher
Spezifitaet er - der box-shadow von hier hat die Lichtkante der
oberen Regel stillschweigend wieder geloescht. Genau deshalb steht
jede Eigenschaft jetzt nur noch an einer Stelle. */
}
/* Rahmen bleibt nur dort, wo eine Flaeche UEBER dem Inhalt schwebt und
sich sonst nicht abgrenzen laesst. */
.modal-sheet, .modal-box { border: 1px solid var(--border); }
/* Der Glanz sitzt in einem eigenen ::before, damit er den Inhalt nicht
ueberdeckt - pointer-events:none haelt ihn aus jeder Beruehrung heraus. */
.card::before, .tile::before, .menu-item::before, .stat-chip::before,
.info-box::before, .market-card::before, .store-card::before,
.news-card::before, .recipe-card::before, .stat-card::before,
.glass::before {
content: '';
position: absolute; inset: 0;
border-radius: inherit;
background: var(--glanz);
pointer-events: none;
z-index: 0;
}
/* Untere Leiste: schwebt ueber dem Inhalt, dort wirkt die Unschaerfe am
staerksten - der Inhalt scrollt sichtbar dahinter durch. */
/* ── Untere Navigation als schwebende Pille ──────────────────
Eine Leiste, die ueber die ganze Breite am Rand klebt, ist die
Standardloesung - erkennbar, aber unauffaellig bis altbacken. Eine
abgesetzte Pille mit unscharfem Grund ist das, was aktuelle Apps
machen: Sie schwebt ueber dem Inhalt, der Inhalt laeuft sichtbar
darunter durch, und der Bildschirm wirkt dadurch groesser.
Die Unschaerfe braucht durchscheinenden Grund - sonst gibt es nichts
zu verwischen. Deshalb color-mix statt einer festen Farbe. */
.bottom-nav {
position: fixed !important;
left: 18px; right: 18px;
bottom: calc(8px + var(--safe-b, 0px)) !important;
width: auto !important;
max-width: 420px;
margin: 0 auto !important;
/* War 68px. Zu hoch: Die Leiste nahm einen Streifen ein, der auf
kleinen Geraeten spuerbar Inhalt kostet, und wirkte dadurch
wichtiger als das, was darueber steht. 58px reichen fuer Symbol und
Wort und bleiben ueber Apples Mindestmass von 44 Punkt fuer die
Trefferflaeche. */
height: 54px !important;
padding: 0 5px !important;
/* Voll gerundet: die HALBE Hoehe. 19px waren ein gerundetes Rechteck -
man sah noch, dass es ein Kasten ist. Bei 27px auf 54px Hoehe treffen
sich die Rundungen in der Mitte, und die Form hat keine Seiten mehr,
nur noch eine Kontur. Das ist es, was die Leiste bei Instagram
schweben laesst statt zu stehen.
Wichtig ist der Gleichlauf mit der Fuellung darin: Die sitzt 5px vom
Rand entfernt, ist also 44px hoch und braucht 22px - genau 27 minus 5.
Stimmt dieser Abstand nicht, laeuft die innere Rundung sichtbar an
der aeusseren vorbei, und niemand kann sagen warum es unruhig
aussieht. */
border-radius: 27px !important;
/* KEIN Rahmen. Er lief als heller Streifen rings um die Leiste - auch
ueber dem Eintrag, der gerade gefuellt ist. Dort sah man dann zwei
Kanten uebereinander: die Oberkante der Fuellung und darueber die
Linie der Leiste. Die Leiste soll aber EINE Flaeche sein, in der die
Fuellung sitzt, kein gerahmter Kasten mit etwas darin.
Was sie vom Grund abhebt, sind Unschaerfe und Schatten - beides
wirkt, ohne eine Linie zu ziehen. */
border: none !important;
/* 62 % waren zu dicht: Man sah, DASS etwas unscharf ist, aber nicht
WAS. Bei 44 % erkennt man die Formen darunter - eine Ladenkarte, ein
Bild - und genau das macht den Unterschied zwischen "matte Scheibe"
und "Glas". Weniger geht nicht: Darunter faengt die Beschriftung an,
mit dem Inhalt zu ringen. */
background: color-mix(in srgb, var(--bg) 44%, transparent) !important;
backdrop-filter: blur(30px) saturate(200%);
-webkit-backdrop-filter: blur(30px) saturate(200%);
box-shadow: 0 6px 24px rgba(0,0,0,.28), 0 1px 3px rgba(0,0,0,.18);
display: flex !important;
align-items: center;
justify-content: space-around;
z-index: 900;
/* Der Hof der Fuellung ragte an den Enden aus der Leiste heraus - beim
ersten und letzten Eintrag sah man einen hellen Fleck ausserhalb der
runden Ecke. overflow:hidden schneidet ihn an der Leistenkante ab.
Damit wirkt die Woelbung INNEN, so wie Fluessigkeit in einem Gefaess -
und nicht wie etwas, das danebengeraten ist. */
overflow: hidden;
}
/* Jeder Eintrag ist ein eigenes kleines Feld - dadurch laesst sich der
aktive fuellen, statt ihn nur einzufaerben. */
.bottom-nav .nav-btn {
/* position:relative ist die Voraussetzung fuer den Kreis weiter unten.
Ohne das richtet sich das ::before am naechsten positionierten
Vorfahren aus - das ist die Leiste selbst (position:fixed) - und der
Kreis landete mittig in der ganzen Leiste statt auf dem Eintrag. */
position: relative;
flex: 1 1 0;
height: 46px;
border-radius: 14px;
display: flex; flex-direction: column;
align-items: center;
/* flex-start statt center: Das Symbol bekommt damit eine feste Hoehe
ganz oben, und der Kreis darunter laesst sich exakt darauf legen.
Bei "center" verschiebt sich beides, sobald die Beschriftung
unterschiedlich lang umbricht - dann sass der Kreis mal auf dem
Symbol, mal auf dem Wort. */
justify-content: center;
padding-top: 0;
gap: 2px;
background: transparent; border: none;
color: var(--muted);
transition: background-color .18s ease, color .18s ease, transform .18s cubic-bezier(.22,1,.36,1);
}
/* ── Die Symbole der Leiste sind gezeichnet, nicht geladen ───
Vorher waren es -Elemente. Das sind Webkomponenten: Der
Browser laedt eine Bibliothek, die dann fuer jedes Symbol eine Datei
nachholt und ein eigenes Element aufbaut. Bei JEDEM Seitenaufbau von
vorn.
Sichtbar wurde das als Flackern: Die Leiste erschien einen Moment ohne
Symbole, dann sprangen sie hinein - und weil sie dabei Platz einnahmen,
verschob sich auch die Beschriftung. Genau das Ruckeln beim
Seitenwechsel. Am Laden lag es nicht; das dauert nur rund 120 ms.
Jetzt stehen die vier Symbole als SVG direkt im HTML. Sie sind da,
sobald die Seite da ist - nichts wird geholt, nichts baut sich auf.
Gefuellt gegen umrandet macht die Fuellung: dieselbe Linie, nur mit
Flaeche darin. Ein zweiter Satz Symbole waere doppelte Arbeit fuer
einen Unterschied, den man auch so sieht. */
.bottom-nav .nav-btn .nav-ik {
width: 24px; height: 26px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linejoin: round;
transition: fill .2s ease, stroke-width .2s ease;
}
.bottom-nav .nav-btn.active .nav-ik {
fill: color-mix(in srgb, currentColor 26%, transparent);
stroke-width: 1.9;
}
.bottom-nav .nav-btn span {
font-size: .6rem; font-weight: 600; letter-spacing: .01em;
line-height: 1;
}
/* Der aktive Eintrag: gefuellter Kreis um das Symbol, leicht angehoben.
Vorher war es eine gefuellte Flaeche hinter dem ganzen Eintrag. Das
war schon besser als nur ein Farbwechsel, aber der Kreis ist noch
deutlicher - er hebt EIN Symbol heraus statt ein Feld einzufaerben,
und das erkennt man aus dem Augenwinkel ohne hinzusehen.
Der Kreis sitzt in einem ::before hinter dem Symbol, damit dafuer kein
zusaetzliches Element ins HTML muss. Er wird um 3 Punkt angehoben; mehr
waere Spielerei und wuerde die Zeile unruhig machen. */
.bottom-nav .nav-btn.active { background: transparent; color: var(--brand); }
/* Die Fuellung ist ein EIGENES Element (.nav-blase), kein ::before.
Ein ::before gehoert dem Knopf und koennte nicht von einem Knopf zum
naechsten wandern. Ein einzelnes Element in der Leiste dagegen laesst
sich verschieben - und genau das ergibt die Bewegung.
── OHNE MESSUNG ──────────────────────────────────────────
Bis zum 5. September rechnete js/nav.js die Position aus
offsetLeft und offsetWidth aus. Das war die Ursache fuer das
Springen: Die Symbole sind Web-Elemente (ion-icon) und werden
NACHGELADEN. Misst man vorher, sind die Knoepfe noch schmaler als
spaeter - die Fuellung landete daneben und sprang beim Nachladen an
die richtige Stelle.
Jetzt wird gar nicht mehr gemessen. Alle vier Eintraege sind gleich
breit (flex: 1 1 0), also ist ein Viertel der Leiste ein Feld. Die
Breite steht in CSS, und translateX(100%) heisst "um die eigene
Breite weiter" - also genau ein Feld. js/nav.js setzt nur noch eine
Zahl: das wievielte Feld.
Damit kann nichts mehr springen, weil es nichts mehr gibt, das sich
nachtraeglich aendern koennte. */
.bottom-nav .nav-blase {
position: absolute;
top: 5px; bottom: 5px;
left: 5px;
width: calc((100% - 10px) / var(--nav-felder, 4));
transform: translateX(calc(var(--nav-feld, 0) * 100%));
/* 27px aussen minus 5px Abstand = 22px. Nur bei genau diesem Wert laufen
innere und aeussere Rundung parallel; jede andere Zahl erzeugt einen
Spalt, der an den Ecken breiter wird als an den Seiten. */
border-radius: 22px;
/* Farbig - so bleibt es. Instagrams neutrale Flaeche war leiser, aber
bei vier Eintraegen mit Beschriftung geht sie unter; die Marke traegt
hier die Orientierung. Von Instagram uebernommen ist die GROESSE:
schmalere Leiste, engere Felder. */
background: linear-gradient(
180deg,
color-mix(in srgb, #fff 15%, var(--brand)) 0%,
var(--brand) 55%,
color-mix(in srgb, #000 10%, var(--brand)) 100%
);
box-shadow: 0 2px 10px color-mix(in srgb, var(--brand) 34%, transparent);
pointer-events: none;
opacity: 0;
z-index: 0;
transition: transform .3s cubic-bezier(.32, 1.24, .5, 1),
opacity .18s ease;
}
/* Die farbige Flaeche im Tropfen ist ENTFALLEN.
Sie war ein zweites Mittel neben der Flaeche selbst - zwei Markierungen
fuer einen Zustand. Instagram kommt mit einer aus. */
.bottom-nav .nav-blase.da { opacity: 1; }
.bottom-nav .nav-blase.sofort { transition: none !important; }
/* Symbol und Beschriftung liegen auf der farbigen Flaeche - also weiss. */
.bottom-nav .nav-btn.active .nav-ik,
.bottom-nav .nav-btn.active span {
position: relative; z-index: 1;
color: #fff !important;
}
.bottom-nav .nav-btn.active span { font-weight: 700; }
.bottom-nav .nav-btn.active:active::before { transform: scale(.9); }
.bottom-nav .nav-btn:active { transform: scale(.94); }
/* Der Inhalt muss ueber der schwebenden Pille enden, sonst verschwindet
die letzte Zeile darunter. */
/* Nur auf den fuenf Seiten mit Leiste - sonst hingen auf den anderen 21
Seiten leerer Raum unter dem Inhalt. Die Klasse setzt js/nav.js;
:has() waere kuerzer, gibt es aber erst ab iOS 15.4.
ZUR ZAHL: Ich hatte hier zuerst 88px stehen - genau den Wert, den
home.html selbst schon benutzte (--nav-h 72px + 16px). Damit hat sich
nichts geaendert, und der Laeden-Streifen klebte weiter an der Leiste.
Der Wert stammte aus der Zeit, als die Leiste UNTEN ANLAG. Sie schwebt
jetzt: 62px hoch, 10px ueber dem Rand. Wer denselben Abstand wie vorher
sehen will, braucht mehr, nicht gleich viel.
62 Leiste + 10 Abstand nach unten + 34 Luft darueber = 106 */
body.hat-leiste { padding-bottom: calc(90px + var(--safe-b, 0px)) !important; }
/* Der Laeden-Streifen ist das letzte Element der Startseite und stiess
direkt an die Leiste. Der Name und die Zeile "Lebensmittel - Geoeffnet"
standen dadurch unmittelbar an der Leiste. */
.laeden, #laedenBereich { margin-bottom: 20px; }
/* Der Abstand sitzt am STREIFEN SELBST, nicht nur an body.
Grund: body.hat-leiste haengt daran, dass js/nav.js gelaufen ist. Faellt
das Skript aus - langsame Verbindung, Fehler weiter oben auf der Seite -
klebt der Ladenname wieder an der Leiste. Ein Abstand direkt am letzten
Element haelt auch dann.
Die Polsterung an body bleibt bestehen; die beiden addieren sich, und
das ist hier gewollt - der Streifen ist das letzte Element der Seite und
darf reichlich Luft haben. */
.laeden-reihe { padding-bottom: 40px !important; }
/* KEIN Glas auf den Ladenkarten.
.laden-karte stand am 5. September in der Glas-Liste weiter oben, und
das war falsch: Die Karte ist im Entwurf absichtlich background:none -
sie besteht nur aus Bild und Text auf dem Seitengrund. Meine Regel gab
ihr eine Flaeche mit Schatten, und die lief als sichtbarer Kasten unter
dem Bild weiter bis unter die Leiste. Glas gehoert auf Flaechen, die
ohnehin eine sind - nicht auf freistehende Bild-Text-Paare. */
:root:root .laden-karte {
background: none !important;
box-shadow: none !important;
border: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.card, .tile, .menu-item, .stat-chip, .info-box { color: var(--txt); }
/* ── Text-Dialoge: deckend ───────────────────────────────────
Hier steht Schrift direkt auf der Flaeche. Durchscheinend hiesse zwei
Ebenen uebereinander lesen - genau das ist beim Dialog "Darstellung"
passiert. */
.swal2-popup, .swal2-modal {
background: var(--sheet-bg) !important;
color: var(--txt) !important;
backdrop-filter: blur(28px) saturate(185%);
-webkit-backdrop-filter: blur(28px) saturate(185%);
border: 1px solid var(--border);
}
.swal2-title, .swal2-html-container, .swal2-content { color: var(--txt) !important; }
.swal2-input, .swal2-textarea, .swal2-select {
background: var(--surface2) !important;
color: var(--txt) !important;
border: 1px solid var(--border) !important;
}
.swal2-styled.swal2-confirm { background: var(--brand) !important; color: #fff !important; }
.swal2-styled.swal2-cancel { background: var(--surface2) !important; color: var(--txt) !important; }
/* ── Blaetter von unten: echtes Glas ─────────────────────────
Darin stehen Bilder und Kacheln mit eigenem Grund, keine nackte Schrift.
Hier darf der Inhalt dahinter durchscheinen - das laesst die Flaeche
lebendig statt mattgrau wirken. Die kraeftige Unschaerfe haelt es ruhig. */
.modal-content, .modal-sheet, .modal-box {
background: var(--blatt-bg) !important;
color: var(--txt) !important;
backdrop-filter: blur(38px) saturate(205%);
-webkit-backdrop-filter: blur(38px) saturate(205%);
border: 1px solid var(--border);
}
/* Blaetter, die von unten kommen, muessen unten ANLIEGEN.
Mit einem Rahmen rundherum sah das Kategorie-Blatt aus, als schwebte es
ueber dem Bildschirmrand - obwohl es dort angeheftet war. Eine Linie und
eine Rundung am unteren Rand genuegen fuer diesen Eindruck.
Nicht fuer .modal-box: das sind mittig stehende Dialoge, die ihren
Rahmen rundherum behalten sollen. */
.modal-content, .modal-sheet {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
/* Kopfzeile in Blaettern: kein zweiter Grund.
.modal-header lag mit background:var(--surface) als heller Film AUF dem
Glas - das ergab den grauen Balken hinter "Kategorie waehlen". Zwei
Flaechen uebereinander nehmen dem Glas genau die Wirkung, fuer die es da
ist. Deckend darf die Kopfzeile nicht sein: zwei durchscheinende
Flaechen addieren sich, und der Balken waere wieder da. */
.modal-header, .modal-head {
background: transparent !important;
border-bottom: 1px solid var(--border);
}
.modal-title, .modal-header h1, .modal-header h2, .modal-header h3 {
color: var(--txt) !important;
}
/* Kein blauer Rahmen um geoeffnete Blaetter.
openModal() setzt den Fokus auf .modal-content (tabindex="-1"), damit
Tastatur und Vorlesefunktion im Fenster landen. WKWebView zeichnet darum
aber seinen Standardrahmen - der lag quer ueber Blatt und Kopfzeile.
Der Fokus bleibt, nur der Rahmen verschwindet: Das Blatt ist durch seine
Groesse und die Verdunkelung dahinter ohnehin unuebersehbar. */
.modal-content:focus, .modal-content:focus-visible,
.modal-sheet:focus, .modal-box:focus { outline: none; }
/* ═══════════════════════════════════════════════════════════
SCHRIFT UND KNOEPFE NACH APPLE-ART
═══════════════════════════════════════════════════════════ */
/* ── Systemschrift statt Inter ───────────────────────────────
Das ist der wirksamste einzelne Griff. 15 Seiten luden bisher Inter
von Google. Inter ist eine gute Schrift und SF Pro sehr aehnlich - aber:
1. Auf dem iPhone rendert -apple-system als SF Pro, also GENAU die
Schrift jeder nativen App. Nichts laesst eine Web-App schneller
"fremd" wirken als eine Schrift, die fast wie die Systemschrift
aussieht, aber eben nur fast.
2. Sie ist schon da. Kein Download, kein Aufblitzen unformatierten
Textes beim Laden, ein Aufruf weniger an einen fremden Server.
3. SF Pro wechselt ab 20px automatisch auf den Display-Schnitt mit
engeren Abstaenden - genau das, was Apple "optical sizing" nennt.
── RUND STATT ECKIG (5. September) ───────────────────────
ui-rounded ist keine Schriftdatei, sondern eine Gattung: Der Browser
sucht die runde Systemschrift des Geraets. Auf dem iPhone ist das
SF Pro Rounded - dieselbe Schrift wie in der Fitness-App, in Karten
und auf den Knoepfen der Apple Watch. Sie liegt bereits auf dem Geraet.
Das ist der wichtige Teil: Nichts wird nachgeladen. Eine runde Schrift
von einem fremden Server zu holen haette drei Nachteile - Wartezeit,
ein Aufblitzen unformatierten Textes beim Laden, und eine Abhaengigkeit
von einem Dienst, der auch mal nicht antwortet.
Die Reihenfolge dahinter ist der Rueckfall: 'Nunito' und
'Varela Round' fuer den Fall, dass jemand sie installiert hat, dann
die normale Systemschrift. Ein Geraet ohne runde Schrift bekommt also
die eckige - das ist besser als eine, die nur fast passt. */
:root:root {
--f: ui-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont,
'Nunito', 'Varela Round', 'Segoe UI Variable', 'Segoe UI',
system-ui, sans-serif;
}
body, button, input, select, textarea, .btn,
h1, h2, h3, h4, h5, h6 {
font-family: ui-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont,
'Nunito', 'Varela Round', 'Segoe UI Variable', 'Segoe UI',
system-ui, sans-serif;
}
/* Runde Schriften wirken schnell kindlich, wenn sie zu leicht gesetzt
sind - die weichen Formen brauchen etwas mehr Gewicht, um sachlich zu
bleiben. Ein Hauch mehr Laufweite haelt sie dabei luftig. */
body { letter-spacing: .004em; }
/* ── Grosse Schrift enger setzen ─────────────────────────────
SF Pro Display zieht bei grossen Graden die Abstaende zusammen. Ohne
das wirken Ueberschriften auseinandergefallen; mit ihm "sitzen" sie.
Kleine Schrift bleibt unangetastet - dort schadet Enge der Lesbarkeit. */
h1, h2, .page-header h1, .modal-title, .pass-name, .card-name {
/* War -0.021em fuer SF Pro Display. Runde Schnitte vertragen weniger
Enge: Ihre Buchstaben sind an den Seiten gewoelbt, sie beruehren
sich frueher. -0.012em setzt sie zusammen, ohne sie zu draengen. */
letter-spacing: -0.012em;
}
h3, .stat-val, .pass-pts-val { letter-spacing: -0.012em; }
/* Grossbuchstaben-Beschriftungen brauchen das Gegenteil: mehr Luft. */
.stat-label, .section-label, .pass-code-label, .pass-pts-label {
letter-spacing: .06em;
}
/* ── Knoepfe ─────────────────────────────────────────────────
Apples Regel ist Verhalten, nicht Zierde. Drei Dinge machen den
Unterschied zwischen "Web-Knopf" und "iOS-Knopf": */
/* 1. Rueckmeldung beim Druecken. Ein iOS-Knopf reagiert waehrend der
Beruehrung, nicht erst danach. Das ist kein Effekt, sondern die
Bestaetigung, dass das Geraet zugehoert hat. */
button, .btn, [role="button"], .menu-item, .tile, .nav-btn {
transition: transform .12s cubic-bezier(.2,0,0,1), opacity .12s linear,
background-color .15s linear;
}
button:active, .btn:active, [role="button"]:active,
.menu-item:active, .tile:active {
transform: scale(.97);
opacity: .88;
}
/* 2. Genug Flaeche zum Treffen. Apples eigene Vorgabe sind 44 Punkte -
darunter trifft ein Daumen unzuverlaessig. Gilt bewusst nur fuer
die grossen Handlungsknoepfe: Auf kleine Symbolknoepfe angewandt
wuerde es Kopfzeilen auseinanderziehen. */
.btn, .btn-primary, .btn-red, .btn-blue, .btn-confirm, .btn-block,
.wallet-btn, .plan-btn, .logout-btn, .empty-wallet-btn, .qr-scan-btn {
min-height: 44px;
font-weight: 600;
letter-spacing: -0.006em;
}
/* 3. Zweitrangige Knoepfe FUELLEN statt UMRANDEN.
Apple loest die Rangfolge ueber Flaeche und Farbstaerke, nicht ueber
Linien - ein umrandeter Knopf wirkt neben einem gefuellten schnell
wie ausgeschaltet. Deckt sich mit "No harsh borders" aus der
apple-ui-designer-Vorlage. */
.btn-muted, .btn-cancel, .swal2-styled.swal2-cancel {
background: var(--surface2) !important;
color: var(--txt) !important;
border: none !important;
}
/* Deaktivierte Knoepfe: blasser, aber nicht unsichtbar. */
button:disabled, .btn:disabled {
opacity: .38;
transform: none;
}
/* Wer weniger Bewegung eingestellt hat, bekommt die Farbrueckmeldung
ohne das Zusammenziehen. */
@media (prefers-reduced-motion: reduce) {
button:active, .btn:active, [role="button"]:active,
.menu-item:active, .tile:active { transform: none; }
}
/* ═══════════════════════════════════════════════════════════
FORMEN – Rundungen, Eingabefelder, Listen
═══════════════════════════════════════════════════════════ */
/* ── Rundungen ───────────────────────────────────────────────
Apple rundet grosszuegiger als das Web ueblicherweise und haelt die
Radien untereinander im Verhaeltnis: grosse Flaechen runder, kleine
Elemente flacher. Ein einheitlicher 12px-Radius auf allem laesst eine
Oberflaeche technisch wirken. */
:root:root {
--radius-sm: 12px; /* Knoepfe, Felder */
--radius-md: 16px; /* Kacheln, Listenzeilen */
--radius: 18px; /* Karten */
--radius-lg: 22px; /* Blaetter, grosse Flaechen */
}
/* ── Eingabefelder ───────────────────────────────────────────
Auf iOS ist ein Feld eine gefuellte Flaeche, kein umrandeter Kasten.
Wichtig: font-size mindestens 16px. Darunter zoomt Safari beim
Antippen automatisch hinein - ein Verhalten, das sich nicht abstellen
laesst und wie ein Fehler aussieht. */
/* BEWUSST NUR Schriftgroesse - kein Hintergrund, kein Rahmen, kein
Innenabstand.
Der erste Versuch schrieb hier auch das Aussehen vor. Auf der
Anmeldeseite sitzt das aber INNERHALB eines Kastens, der das
Symbol traegt und den sichtbaren Rahmen bildet - es entstand ein
Kasten im Kasten. Dieselbe Bauweise nutzen mehrere Seiten.
Die Seiten gestalten ihre Felder selbst und gut. Was ihnen fehlte, war
nur eines - und genau das steht hier:
font-size 16px ist auf iOS kein Geschmack, sondern Technik. Darunter
zoomt Safari beim Antippen automatisch in die Seite hinein. Das laesst
sich nicht abschalten und sieht aus wie ein Fehler. */
/* !important ist hier noetig, nicht bequem: Die Suchzeile im
Maerkte-Blatt wird ueber
:is(#marketsModal, #categoryResultsModal) .standortsuche .search-bar input
gestylt - ein Selektor MIT ID. Der schlaegt jede Regel aus Klassen,
egal wie viele man aneinanderreiht. Nur !important kommt dagegen an.
Folge ohne das: .9rem, also 14,4px - und Safari zoomte beim Antippen
in die Seite hinein. */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="number"],
input:not([type]), textarea, select {
font-size: 16px !important;
}
input::placeholder, textarea::placeholder { color: var(--muted); }
/* ── Listen ──────────────────────────────────────────────────
Apple setzt Trennlinien EINGERUECKT - sie beginnen dort, wo der Text
beginnt, nicht am Rand der Karte. Das fuehrt das Auge an der
Textkante entlang statt die Zeile in einen Kasten zu sperren.
Und: Trennlinie ODER Abstand, nie beides (aus der
apple-ui-designer-Vorlage). */
.menu-item + .menu-item,
.list-item + .list-item { border-top: 1px solid var(--border); }
.menu-item, .list-item { border-bottom: none; }
.menu-item:first-child, .list-item:first-child { border-top: none; }
/* Die letzte Zeile einer Gruppe traegt nie eine Linie. */
.menu-card > .menu-item:last-child { border-bottom: none; }
/* ── Umschalter ──────────────────────────────────────────────
iOS-Schalter sind gruen, wenn an - und tragen keinen Rahmen. */
.menu-toggle { border: none; background: var(--surface2); }
.menu-toggle.on { background: var(--green); }
/* ── Abstandsrhythmus ────────────────────────────────────────
Gruppenueberschriften stehen bei Apple weit vom Vorherigen und nah an
dem, was sie beschriften. Das macht Gruppen ohne jede Linie sichtbar. */
.section-title, .section-label {
margin-top: 26px;
margin-bottom: 7px;
text-transform: uppercase;
font-size: .7rem;
font-weight: 600;
}
.section-title:first-child, .section-label:first-child { margin-top: 0; }
/* ── Symbolfarben ins Pastell ────────────────────────────────
Das war der letzte kraeftige Farbtraeger. Die Kachelsymbole standen
auf festen Werten - #3b82f6 Blau, #f97316 Orange, dazu das Marken-Rot -
also genau die satten Toene, die neben weichen Flaechen grell wirken.
Ein Symbol muss unterscheiden, nicht rufen; die Aufmerksamkeit gehoert
den Handlungsknoepfen.
Die Werte kommen aus derselben Pastellreihe wie die Wallet-Karten,
damit die App EINE Farbsprache spricht statt zweier. */
.tile-icon.red, .menu-icon.red ion-icon,
.info-icon-wrap ion-icon { color: var(--p-rose) !important; }
.tile-icon.blue, .menu-icon.blue ion-icon { color: var(--p-blau) !important; }
.tile-icon.orange, .menu-icon.orange ion-icon { color: var(--p-orange) !important; }
.tile-icon.green, .menu-icon.green ion-icon { color: var(--p-gruen) !important; }
.tile-icon.purple, .menu-icon.purple ion-icon { color: var(--p-lila) !important; }
.tile-icon.gray, .menu-icon.gray ion-icon { color: var(--p-sand) !important; }
/* Die getoenten Quadrate hinter den Symbolen: sehr zurueckhaltend, damit
sie das Symbol trennen statt es zu umrahmen. */
.menu-icon.red { background: rgba(255,171,181,.20) !important; }
.menu-icon.blue { background: rgba(168,196,245,.20) !important; }
.menu-icon.orange { background: rgba(255,195,143,.20) !important; }
.menu-icon.green { background: rgba(143,220,184,.20) !important; }
.menu-icon.purple { background: rgba(196,178,245,.20) !important; }
.menu-icon.gray { background: rgba(211,218,230,.10) !important; }
.info-icon-wrap { background: rgba(255,171,181,.20) !important; }
/* Im hellen Modus sind blasse Symbole auf Weiss zu schwach - dort
braucht dieselbe Farbe mehr Tiefe, sonst verschwindet sie. */
@media (prefers-color-scheme: light) {
:root:not(.theme-dark) .tile-icon.red ion-icon,
:root:not(.theme-dark) .tile-icon.red { color: #e2707c !important; }
:root:not(.theme-dark) .tile-icon.blue { color: #6b8fd6 !important; }
:root:not(.theme-dark) .tile-icon.orange { color: #d8945f !important; }
}
:root.theme-light .tile-icon.red { color: #e2707c !important; }
:root.theme-light .tile-icon.blue { color: #6b8fd6 !important; }
:root.theme-light .tile-icon.orange { color: #d8945f !important; }
/* ═══════════════════════════════════════════════════════════
KNOEPFE UND KACHELN – aufgeraeumt
═══════════════════════════════════════════════════════════ */
/* ── Kein farbiges Leuchten unter Knoepfen ───────────────────
Auf fuenf Seiten lag ein roter Schein unter den Hauptknoepfen
(box-shadow mit rgba(230,57,70,.3)). Das war um 2020 herum ueblich und
ist heute das sicherste Zeichen dafuer, dass eine Oberflaeche aus dem
Web kommt: Ein iOS-Knopf leuchtet nicht, er liegt einfach da.
Ein farbiger Schein macht ausserdem genau das kaputt, was wir gerade
eingestellt haben - matte Flaechen. */
.btn, .btn-primary, .btn-red, .btn-confirm, .btn-block, .wallet-btn,
.plan-btn, .empty-wallet-btn, .qr-scan-btn, .btn-stamp, .login-btn,
button[type="submit"] {
box-shadow: none !important;
}
/* ── Kacheln ─────────────────────────────────────────────────
Vorher lag ein Farbverlauf ueber der ganzen Kachel. Auf dunklem Grund
wurde daraus Matsch: Das Rose wirkte braeunlich, das Orange ebenso -
ein durchscheinender Farbton verliert auf Dunkel seine Klarheit.
Jetzt traegt die Farbe das SYMBOLFELD, deckend und in voller Staerke,
waehrend die Kachel selbst fast neutral bleibt. Dasselbe Prinzip wie
bei App-Symbolen auf dem Startbildschirm: ein klares Farbquadrat auf
ruhigem Grund. Das liest sich auf einen Blick und wirkt frisch, weil
die Farbe nicht verwaessert ist. */
.tile { background: var(--surface) !important; border: none !important; }
.tile-icon {
width: 52px; height: 52px;
border-radius: 15px;
display: flex; align-items: center; justify-content: center;
font-size: 1.6rem;
}
/* Deckende Felder, dunkles Symbol darauf - der Kontrast ist damit hoch,
ohne dass die Flaeche leuchtet. */
/* Die drei Regeln standen bis zum 5. September gegen
html.theme-dark .tile-icon.red { background: rgba(230,57,70,.18) }
aus css/theme.css - und verloren, weil dort ein Element MIT
Klassenangabe steht (0,3,1 gegen 0,3,0). Die Regeln in theme.css sind
inzwischen entfernt; die Angabe fuer beide Themenklassen bleibt hier
trotzdem stehen, damit es nicht wieder von der Reihenfolge abhaengt. */
.tile.maerkte_angebote .tile-icon,
:root.theme-dark .tile.maerkte_angebote .tile-icon,
:root.theme-light .tile.maerkte_angebote .tile-icon { background: var(--p-rose) !important; }
.tile.kategorien .tile-icon,
:root.theme-dark .tile.kategorien .tile-icon,
:root.theme-light .tile.kategorien .tile-icon { background: var(--p-blau) !important; }
.tile.rezepte_ernaehrung .tile-icon,
:root.theme-dark .tile.rezepte_ernaehrung .tile-icon,
:root.theme-light .tile.rezepte_ernaehrung .tile-icon { background: var(--p-orange) !important; }
.tile .tile-icon ion-icon { color: #1d2333 !important; }
/* Die Plakette "7 Neue Prospekte" sass halb AUF der ersten Kachel und
schnitt sie oben an. Sie gehoert ueber den Block, nicht darauf. */
.grid-3 { margin-top: 4px; }
/* ── Anfassen ────────────────────────────────────────────────
Beim Loslassen faellt die Kachel zurueck, statt zu springen: dieselbe
Kurve wie bei den Blaettern. */
.tile:active { transform: scale(.965); }
.tile { transition: transform .18s cubic-bezier(.22,1,.36,1), background-color .15s linear; }
/* ── Bilder randlos ──────────────────────────────────────────
Bildflaechen brauchen keine Linie um sich herum: Ein Foto grenzt sich
durch sich selbst ab. Ein Rahmen darum wirkt wie ein aufgeklebtes
Passepartout - und bei abgerundeten Ecken sieht man ihn als hellen
Saum, der nicht zum Bild gehoert.
Wichtig ist dabei object-fit: cover. Fuellt das Bild seinen Platz nicht
vollstaendig aus, scheint der Hintergrund an den Kanten durch - und
genau das sieht aus wie ein Rand, obwohl keiner gezeichnet ist. */
.category-label,
.laden-bild,
.pass-logo,
.card-logo,
.laden-karte img,
.hero,
.hero-img {
border: none !important;
outline: none !important;
}
.category-label img,
.laden-bild img,
.card-logo img,
.pass-logo img,
.hero-img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
/* Die ausgewaehlte Kategorie wurde durch einen 2px-Rahmen markiert.
Statt einer Linie AUF dem Bild jetzt ein Ring AUSSERHALB - er beruehrt
das Foto nicht und schneidet nichts ab. */
.category-checkbox:checked + .category-label {
border: none !important;
box-shadow: 0 0 0 2.5px var(--brand);
}
/* ── Prospekt-Plakette ───────────────────────────────────────
Sie sass mit top:-10px und left:50% mittig ueber der ersten Kachel und
war mit dem Text "7 Neue Prospekte" BREITER als die Kachel - sie schnitt
sie oben an und ragte links darueber hinaus.
Jetzt eine kompakte Zahl oben rechts, wie eine Benachrichtigung. Die
Zahl allein genuegt: Sie sitzt auf der Laden-Kachel, mehr Erklaerung
braucht es nicht. Der Text wird per CSS ausgeblendet, das Markup bleibt
unveraendert - so liest eine Vorlesefunktion weiterhin "7 Neue
Prospekte" vor.
Die Regeln stehen im JavaScript direkt am Element, deshalb !important. */
#prospektDot {
top: -7px !important;
left: auto !important;
right: -6px !important;
transform: none !important;
min-width: 24px; height: 24px;
padding: 0 7px !important;
border-radius: 999px !important;
font-size: .78rem !important;
line-height: 24px !important;
justify-content: center !important;
gap: 0 !important;
white-space: nowrap;
overflow: hidden;
/* Der Text wird verborgen, indem die Kapsel nur so breit wie die Zahl
ist - font-size:0 auf dem Rest, die Zahl steht in einem eigenen span. */
font-size: 0 !important;
box-shadow: 0 2px 6px rgba(0,0,0,.28) !important;
animation: none !important; /* das Pulsieren wirkt unruhig */
}
#prospektDot > span {
font-size: .8rem !important;
font-weight: 700 !important;
line-height: 24px;
}
/* ── Hero in langsamer Bewegung ──────────────────────────────
Ein stehendes Foto wirkt wie ein Plakat, ein leicht wanderndes wie ein
Fenster. Der Effekt heisst Ken Burns und lebt davon, NICHT aufzufallen:
40 Sekunden fuer einen Durchlauf, gut 6 % Groessenaenderung. Wer
hinsieht, merkt es kaum - wer weggeschaut hat, sieht beim Zurueckkommen
ein anderes Bild.
Schneller waere ein Fehler. Sichtbare Bewegung im Hintergrund zieht das
Auge staendig vom Inhalt weg und wirkt wie ein Bildschirmschoner.
translate3d statt translate: Das schiebt die Berechnung auf die
Grafikeinheit, sonst rechnet das Handy 40 Sekunden lang mit dem
Hauptprozessor an einem Hintergrundbild.
Die Regel steht mit !important, weil home.html dem Bild eine eigene
transform-Angabe fuers Einblenden mitgibt - beide auf derselben
Eigenschaft koennen nicht nebeneinander bestehen. */
/* Erst standen hier 40 Sekunden und 6 % - so wenig, dass die Bewegung
nicht auffiel. Jetzt 22 Sekunden und gut 12 %: sichtbar, wenn man
hinsieht, aber immer noch ruhig genug, um nicht abzulenken. */
@keyframes suttruHeroWandern {
0% { transform: scale(1.06) translate3d(0, 0, 0); }
50% { transform: scale(1.18) translate3d(-3.4%, -2.2%, 0); }
100% { transform: scale(1.06) translate3d(0, 0, 0); }
}
.hero-img {
animation: suttruHeroWandern 22s ease-in-out infinite !important;
transition: none !important;
will-change: transform;
}
/* Wer "Bewegung reduzieren" eingestellt hat, bekommt ein stehendes Bild.
Das ist keine Feinheit: Fuer manche Menschen loest andauernde Bewegung
am Bildschirmrand Uebelkeit aus. */
@media (prefers-reduced-motion: reduce) {
.hero-img {
animation: none !important;
transform: scale(1.02) !important;
}
}
/* ── Bewegtes Hero ───────────────────────────────────────────
Der Film liegt genau ueber dem Foto und wird eingeblendet, sobald er
laeuft. Bis dahin - und wenn er gar nicht darf, etwa bei "Bewegung
reduzieren", im Datensparmodus oder im Stromsparmodus des iPhones -
sieht man das Foto. Es ist damit kein Notbehelf, sondern der
Normalfall; der Film ist die Zugabe.
Kein eigener Ken-Burns-Effekt auf dem Video: Das Motiv bewegt sich
bereits von selbst. Beides zusammen waere unruhig. */
.hero-film {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity .6s ease;
pointer-events: none;
z-index: 1;
}
.hero-film.laeuft { opacity: 1; }
/* WICHTIG - hier ist mir am 5. September das Logo verschwunden:
Der Film liegt auf z-index 1. Alles andere im Hero - das Suttru-Logo,
der Begruessungssatz, die Abdunklung - steht auf position:absolute
OHNE z-index, also auf 0. Sobald der Film zu laufen begann, schob er
sich darueber und das Logo war weg.
Das Bild darunter braucht keinen Wert: Es ist kein positioniertes
Element und liegt ohnehin zuunterst. */
.hero-overlay { z-index: 2; }
.hero-badge, .hero-tagline { z-index: 3; }
@media (prefers-reduced-motion: reduce) {
.hero-film { display: none !important; }
}
/* Dritter Zustand neben Geoeffnet und Geschlossen: Fuer die meisten Laeden
sind gar keine Oeffnungszeiten hinterlegt. Gedaempft, weil es eine
fehlende Angabe ist und keine Meldung ueber den Laden. */
.laden-unbekannt { color: var(--muted); }
/* ── Schliessen-Knoepfe ──────────────────────────────────────
Sie waren schlecht zu sehen, und zwar aus drei Gruenden gleichzeitig:
1. FARBE. In css/home.css stand color: rgb(104, 2, 2) - ein fast
schwarzes Rot. Auf hellem Grund gerade noch zu ahnen, auf dunklem
Grund praktisch unsichtbar. In home.html war es var(--muted) auf
var(--bg): zwei Toene, die sich kaum unterscheiden.
2. KEINE FLAECHE. Ein blosses Kreuz ohne Grund liest sich als
Verzierung, nicht als Knopf.
3. GROESSE. 30x30 Punkt. Apple nennt 44 als Mindestmass fuer alles,
was mit dem Finger getroffen werden soll - darunter tippt man
daneben, besonders am oberen Bildschirmrand.
Jetzt: sichtbarer Kreis mit eigenem Grund, kraeftige Schrift, 36 Punkt
sichtbar und 44 Punkt Trefferflaeche. Die Trefferflaeche waechst ueber
ein ::after nach aussen, damit der Kreis dabei nicht groesser wird -
ein 44er Kreis wuerde neben dem Titel klobig wirken. */
.modal-close, .close-btn, .btn-close, .sheet-close {
position: relative;
width: 36px !important; height: 36px !important;
min-width: 36px; min-height: 36px;
border-radius: 50% !important;
border: none !important;
background: var(--surface2) !important;
color: var(--txt) !important;
font-size: 1.25rem !important;
line-height: 1 !important;
padding: 0 !important;
display: flex !important;
align-items: center; justify-content: center;
box-shadow: inset 0 0 0 1px var(--border);
transition: background .15s ease, color .15s ease, transform .12s ease;
}
/* Unsichtbare Vergroesserung der Trefferflaeche auf 44 Punkt. */
.modal-close::after, .close-btn::after, .btn-close::after, .sheet-close::after {
content: "";
position: absolute;
top: 50%; left: 50%;
width: 44px; height: 44px;
transform: translate(-50%, -50%);
}
.modal-close:hover, .close-btn:hover, .btn-close:hover, .sheet-close:hover {
background: var(--brand-soft) !important;
color: var(--brand) !important;
}
.modal-close:active, .close-btn:active, .btn-close:active, .sheet-close:active {
transform: scale(.92);
}
/* ── Signal fuer neue Kundenhinweise ─────────────────────────
Der Knopf sah bisher immer gleich aus, ob eine neue Meldung vorlag oder
nicht. Jetzt: rote Zahl am Symbol und ein warmer Schein um den Knopf.
Das Pulsieren laeuft DREIMAL und haelt dann an. Dauerhaftes Blinken
waere Druck statt Hinweis - und am Bildschirmrand fuer manche Menschen
schlicht unertraeglich. Wer "Bewegung reduzieren" eingestellt hat,
bekommt gar keins; die rote Zahl allein sagt dasselbe. */
.hinweis-punkt {
position: absolute;
top: -5px; right: -5px;
min-width: 19px; height: 19px;
padding: 0 5px;
border-radius: 999px;
background: var(--brand);
color: #fff;
font-size: .68rem; font-weight: 700;
line-height: 19px; text-align: center;
box-shadow: 0 0 0 2px var(--bg), 0 2px 6px rgba(0,0,0,.3);
}
/* Die Huelle braucht position:relative, damit die Zahl an ihrer Ecke
haengt und nicht am Seitenanfang. */
.info-icon-wrap { position: relative; }
.info-banner.hat-neue .info-icon-wrap {
background: var(--brand) !important;
color: #fff !important;
animation: hinweisPuls 1.5s ease-out 3;
}
@keyframes hinweisPuls {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent); }
70% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--brand) 0%, transparent); }
100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
.info-banner.hat-neue .info-icon-wrap { animation: none; }
}
/* ── Meldung entfernen ───────────────────────────────────────
Der Knopf steht bewusst gedaempft in der Ecke der Karte: Er soll
erreichbar sein, aber nicht mit dem Lesen konkurrieren. */
.hinweis-weg {
background: none; border: none;
color: var(--muted);
font-size: .78rem;
padding: 6px 10px;
border-radius: 8px;
cursor: pointer;
display: inline-flex; align-items: center; gap: 5px;
transition: background .15s ease, color .15s ease;
}
.hinweis-weg:hover { background: var(--surface2); color: var(--txt); }
.hinweis-leiste {
display: flex; justify-content: flex-end;
margin-top: 6px;
}
/* ═══════════════════════════════════════════════════════════
ADMIN-BEREICH
═══════════════════════════════════════════════════════════
Die Flaechen dort lasen sich als flache graue Platten mit gezogener
Kante - ein Verwaltungswerkzeug von 2015, waehrend die App danebenn aus
Glas ist. Ursache: Sie liegen alle auf var(--surface) und grenzen sich
ueber einen 1px-Rahmen ab. Rahmen sind das lauteste Mittel, eine
Flaeche abzusetzen, und wenn ALLES einen hat, entsteht ein Raster aus
Linien statt einer Ordnung aus Ebenen.
Statt dessen dasselbe Material wie in der App: durchscheinender Grund,
Unschaerfe, eine Lichtkante oben und Schatten. Die Kante ersetzt den
Rahmen - sie sagt "hier hoert die Flaeche auf", ohne eine Linie zu
ziehen.
Die Auswahl ist bewusst eng gehalten: Nur Flaechen, die INHALT tragen.
Die Seitenleiste und feste Kopfzeilen bleiben aussen vor - dort waere
Durchsichtigkeit stoerend, weil darunter der Inhalt wegscrollt. */
.admin-body .stat-card,
.admin-body .table-wrap,
.admin-body .quick-item,
body.admin .stat-card,
body.admin .table-wrap,
.stat-card, .table-wrap {
background: color-mix(in srgb, var(--surface2) 92%, transparent) !important;
backdrop-filter: blur(24px) saturate(185%);
-webkit-backdrop-filter: blur(24px) saturate(185%);
border: none !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.14),
0 1px 2px rgba(0,0,0,.18),
0 8px 24px rgba(0,0,0,.16) !important;
}
/* Die Zahlen im Dashboard duerfen kraeftiger sein - sie sind der Grund,
warum man auf die Seite schaut. */
.stat-card .stat-val { letter-spacing: -.02em; }
/* Die Tabelle innen behaelt ihre Trennlinien: Dort ordnen Linien Zeilen,
und dafuer sind sie das richtige Mittel. Nur die AUSSENkante faellt weg. */
.table-wrap table { background: none; }
/* Die Zeilen im Schnellzugriff hatten alle einen eigenen Rahmen und
dadurch je eine Kante mehr als noetig. */
.quick-item, .quick-link {
border: none !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
/* ── Weicher Seitenwechsel: HERAUSGENOMMEN ──────────────────
Hier stand:
@view-transition { navigation: auto; }
Damit sollte Safari zwischen zwei Seiten ueberblenden statt zu
schneiden. Der Verdacht: Genau das hat den Seitenwechsel BLOCKIERT -
der Klick kam an, die Fuellung wanderte, aber die Seite blieb stehen.
Wird gerade geprueft. Kommt zurueck, wenn es nicht die Ursache war. */
/* ── Sprachauswahl ───────────────────────────────────────────
Sie hatte feste Farben: background:#1a1a2e und color:#fff, direkt in
login.html, home.html und signup.html. Feste Farben kennen keinen
hellen Modus - deshalb stand auf einer weissen Seite ein
dunkelblauer Kasten.
Der gewaehlte Eintrag war ausserdem tuerkis (rgba(17,103,127,.4) auf
#5bc8d8). Das ist die Farbe irgendeiner Vorlage, nicht die von Suttru. */
:root:root .suttru-lang-dropdown {
background: var(--sheet-bg) !important;
border: 1px solid var(--border) !important;
backdrop-filter: blur(32px) saturate(200%);
-webkit-backdrop-filter: blur(32px) saturate(200%);
box-shadow: 0 12px 40px rgba(0,0,0,.28) !important;
}
:root:root .suttru-lang-option { color: var(--txt) !important; }
:root:root .suttru-lang-option:hover { background: var(--surface2) !important; }
:root:root .suttru-lang-option.active {
background: var(--brand-soft) !important;
color: var(--brand) !important;
}
:root:root .suttru-lang-btn {
background: color-mix(in srgb, var(--bg) 55%, transparent) !important;
color: var(--txt) !important;
border: 1px solid var(--border) !important;
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
}
/* ── Knoepfe mit Verlauf ─────────────────────────────────────
Eine flache Farbflaeche wirkt gedruckt. Ein leichter Verlauf von hell
oben nach dunkel unten laesst den Knopf gewoelbt wirken, so als faenge
er Licht - das ist der Unterschied zwischen "Farbe" und "Objekt".
Bewusst FLACH gehalten: 12 % Aufhellung oben, 10 % Abdunkelung unten.
Ein kraeftiger Verlauf sieht nach Web 2.0 aus. Beim Druecken kehrt er
sich um, dann wirkt der Knopf eingedrueckt statt nur dunkler. */
.btn-primary, .primary-btn, button.primary, .cta, .btn.brand,
.login-btn, .map-btn, .swal2-styled.swal2-confirm, .onboard-next,
.hinweis-cta {
background-image: linear-gradient(
180deg,
color-mix(in srgb, #fff 14%, var(--brand)) 0%,
var(--brand) 52%,
color-mix(in srgb, #000 11%, var(--brand)) 100%
) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.28),
0 1px 2px rgba(0,0,0,.16),
0 6px 18px color-mix(in srgb, var(--brand) 28%, transparent);
border: none !important;
}
.btn-primary:active, .primary-btn:active, button.primary:active,
.cta:active, .btn.brand:active, .login-btn:active, .map-btn:active,
.swal2-styled.swal2-confirm:active, .onboard-next:active {
background-image: linear-gradient(
180deg,
color-mix(in srgb, #000 8%, var(--brand)) 0%,
var(--brand) 100%
) !important;
box-shadow: inset 0 2px 5px rgba(0,0,0,.22);
}
/* ── Eingabefelder: sichtbar als Feld, nicht als graue Platte ─
Sie lagen auf einem Ton, der dem Grund darunter zu aehnlich war. Ein
Feld muss zwei Dinge zeigen: WO man schreibt und DASS man schreiben
kann. Beides entstand vorher nur aus einem Grauton, der sich kaum
abhob - im Admin-Dialog und in der Kasse las sich das als tote Flaeche.
Drei Aenderungen:
1. Der Grund wird HELLER als die Karte, auf der das Feld liegt - nicht
dunkler. Ein vertieftes Feld ist die Konvention aus Zeiten grauer
Programmoberflaechen; heute liegt das Feld obenauf.
2. Eine feine Umrandung sagt, wo es aufhoert.
3. Beim Hineintippen ein Ring in der Markenfarbe - das ist der einzige
Moment, in dem das Feld laut sein darf. */
:root:root input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]),
:root:root textarea,
:root:root select,
:root:root .input-wrap, :root:root .input-with-icon {
background: color-mix(in srgb, #fff 9%, var(--surface2)) !important;
border: 1px solid var(--border) !important;
border-radius: 12px;
color: var(--txt) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
/* Im hellen Modus muss das Feld dunkler werden statt heller: Auf einer
weissen Karte kann nichts mehr aufhellen. Ein Hauch Grau genuegt. */
:root:root.theme-light input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]),
:root:root.theme-light textarea,
:root:root.theme-light select,
:root:root.theme-light .input-wrap,
:root:root.theme-light .input-with-icon {
background: rgba(24,28,48,.045) !important;
box-shadow: inset 0 1px 2px rgba(24,28,48,.05);
}
@media (prefers-color-scheme: light) {
:root:root:not(.theme-dark) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]),
:root:root:not(.theme-dark) textarea,
:root:root:not(.theme-dark) select,
:root:root:not(.theme-dark) .input-wrap,
:root:root:not(.theme-dark) .input-with-icon {
background: rgba(24,28,48,.045) !important;
box-shadow: inset 0 1px 2px rgba(24,28,48,.05);
}
}
:root:root input:focus, :root:root textarea:focus, :root:root select:focus,
:root:root .input-wrap:focus-within, :root:root .input-with-icon:focus-within {
border-color: var(--brand) !important;
box-shadow: 0 0 0 3px var(--brand-soft) !important;
outline: none !important;
}
/* Die Kasse hat ein einzelnes grosses Feld fuer den Kundencode. Es ist
der Kern der Seite und darf deutlicher sein als ein Feld im Formular. */
:root:root .search-box input {
background: color-mix(in srgb, #fff 12%, var(--surface2)) !important;
border: 1.5px solid var(--border) !important;
}
/* ── Kopf der Blaetter ───────────────────────────────────────
Er brauchte zwei volle Zeilen fuer eine einzige Aufgabe: eine Zeile nur
fuer den Ziehgriff, darunter eine zweite mit Titel und X. Dazwischen
stand viel Leerraum, und das X sass als grosser heller Kreis weit unten
rechts - optisch schwerer als der Titel daneben.
Drei Aenderungen:
1. Der Griff rueckt dicht an die Oberkante und der Abstand darunter
faellt weg. Der Kopf wird dadurch rund 20 Punkt flacher - Platz, der
dem Inhalt zugutekommt.
2. Das X wird kleiner und leiser. Es ist der Ausgang, nicht das Ziel;
zum Schliessen gibt es ausserdem den Griff und den Tipp daneben.
Ein Knopf, der lauter ist als die Ueberschrift, dreht die Rangfolge
der Seite um.
3. Die Linie unter dem Kopf faellt weg. Der Kopf klebt beim Scrollen
ohnehin oben und setzt sich durch seinen Grund ab - die Linie war
ein zweites Mittel fuer dieselbe Aufgabe. */
:root:root .modal-griff {
padding: 8px 0 0 !important;
min-height: 0 !important;
}
:root:root .modal-header {
padding: 6px 14px 12px !important;
border-bottom: none !important;
align-items: center;
}
:root:root .modal-title {
font-size: 1.05rem !important;
font-weight: 600 !important;
letter-spacing: -.01em;
}
/* Das X in den Blaettern: kleiner und gedaempft. Die allgemeine Regel
fuer .modal-close weiter oben macht es 36 Punkt gross und hell - das
ist fuer einen Dialog richtig, in dem es der einzige Ausweg ist. Im
Blatt gibt es drei Auswege, also darf es zuruecktreten. */
:root:root .modal-content .modal-close,
:root:root .modal-sheet .modal-close {
width: 30px !important; height: 30px !important;
font-size: 1.05rem !important;
/* NICHT --surface2: Das ist im hellen Modus selbst weiss (es ist fuer
Karten auf grauem Grund gedacht). Auf einem weissen Blatt ergab das
einen weissen Kreis auf weissem Grund - sichtbar nur durch den
Schatten.
var(--txt) mit 9 % ist in BEIDEN Modi richtig: im hellen ein Hauch
Dunkel, im dunklen ein Hauch Hell. Ein Ton, der immer der Gegenpol
zum Grund ist. */
background: color-mix(in srgb, var(--txt) 9%, transparent) !important;
color: var(--muted) !important;
box-shadow: none !important;
}
:root:root .modal-content .modal-close:active {
background: var(--surface2) !important;
color: var(--txt) !important;
}
/* ═══════════════════════════════════════════════════════════
ZULETZT: Felder in einem Rahmen bleiben durchsichtig
═══════════════════════════════════════════════════════════
Diese Regel stand vorher weiter oben und wog 0,8,1. Der Hell-Modus-
Block weiter unten wiegt EBENFALLS 0,8,1
:root:root:not(.theme-dark) input:not()x5
- und bei gleicher Spezifitaet gewinnt die spaetere Regel. Also war der
graue Kasten im Anmeldefeld wieder da, obwohl die Aufraeum-Regel
fachlich richtig war.
Zwei Konsequenzen daraus:
1. Sie steht jetzt ganz am ENDE der Datei. Was aufraeumt, muss nach
dem stehen, was es aufraeumt.
2. :root:root:root hebt sie auf 0,9,1 - damit gewinnt sie auch dann
noch, wenn spaeter jemand etwas dahinter schreibt.
Zur Sache: Auf der Anmeldeseite steckt das Feld in einem Rahmen mit
Symbol davor. Der Rahmen bringt Flaeche, Linie und Rundung mit. Gibt
man dem Feld darin ebenfalls eine Flaeche, sieht man einen Kasten im
Kasten. */
/* .search-bar gehoert hierher: Sie ist im Maerkte-Blatt rund gezeichnet,
hat Rahmen und Grund und traegt das Lupensymbol - also derselbe Bau wie
.input-wrap, nur mit einem Standort-Knopf am Ende. Ihr input steht
ausdruecklich auf background:none. Ohne diese Zeile sass wieder ein
grauer Kasten im runden Feld.
NICHT dabei: .search-box aus der Kasse. Dort steht der Knopf NEBEN dem
Feld, nicht darin - das Feld braucht dort seinen eigenen Grund. */
:root:root:root .search-bar input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]),
:root:root:root .standortsuche .search-bar input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]),
:root:root:root .input-wrap input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]),
:root:root:root .input-with-icon input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]),
:root:root:root .input-wrap textarea,
:root:root:root .input-with-icon textarea,
:root:root:root .input-wrap select {
background: none !important;
background-color: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
border: none !important;
border-radius: 0 !important;
}
/* Wer "Bewegung reduzieren" gewaehlt hat, sieht den Kreis am Ziel, aber
ohne die Fahrt dorthin. */
@media (prefers-reduced-motion: reduce) {
.bottom-nav .nav-blase { transition: opacity .2s ease !important; }
}
/* ── Felder in einer Zeile duerfen schrumpfen ────────────────
Die Eingabezeile der Einkaufsliste lief rechts aus dem Bild, der
"+"-Knopf war halb abgeschnitten. Ursache war meine eigene Regel
font-size:16px gegen das Zoomen auf iOS: Mit der groesseren Schrift
wurde "Produkt hinzufuegen..." breiter.
Ein Element in einer flex-Zeile hat von Haus aus min-width:auto - es
weigert sich, schmaler zu werden als sein Inhalt. Also wuchs die Zeile
ueber den Bildschirm hinaus, statt das Feld zu kuerzen.
min-width:0 erlaubt das Schrumpfen. Das ist der Standardgriff bei
flex-Zeilen und faellt nur auf, wenn er fehlt. */
.add-bar > *, .search-bar > *, .search-box > *,
.input-wrap > input, .input-with-icon > input,
.form-row > * {
min-width: 0;
}
/* ── Felder nehmen keine Farbe vom Grund an ──────────────────
Die Felder waren durchscheinend und liessen den farbigen Grund
durch - in der Einkaufsliste schimmerte das Rosa des Hintergrunds
durch "Menge" und das Feld sah schmutzig aus.
Glas ist fuer Flaechen richtig, auf denen etwas LIEGT. Ein Feld ist
das Gegenteil: Dort schreibt man hinein, und der Text muss auf einem
ruhigen, gleichmaessigen Grund stehen. Ein wanderndes Farbschimmern
unter der eigenen Schrift ist genau das, was Lesen erschwert.
Deshalb hier deckende Toene. */
:root:root input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]),
:root:root textarea,
:root:root select,
:root:root .input-wrap, :root:root .input-with-icon {
background: #242833 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
:root:root.theme-light input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]),
:root:root.theme-light textarea,
:root:root.theme-light select,
:root:root.theme-light .input-wrap,
:root:root.theme-light .input-with-icon {
background: #f1f3f6 !important;
}
@media (prefers-color-scheme: light) {
:root:root:not(.theme-dark) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]),
:root:root:not(.theme-dark) textarea,
:root:root:not(.theme-dark) select,
:root:root:not(.theme-dark) .input-wrap,
:root:root:not(.theme-dark) .input-with-icon {
background: #f1f3f6 !important;
}
}
/* ── Erscheinungsbild: Schieberegler ─────────────────────────
Die drei Werte liegen auf einer Achse - hell, automatisch, dunkel.
Ein Schieber zeigt diese Ordnung; drei gleich aussehende Knoepfe
verschweigen sie.
Die Schiene ist eine getoente Flaeche ohne Rahmen. Der Unterschied
ist wichtig: Ein Rahmen ist eine gezogene Linie und wirkt wie ein
Kasten. Eine leicht getoente Flaeche wirkt wie EIN Bedienelement, in
dem sich etwas verschiebt.
Der Ton kommt aus var(--txt) - im hellen Modus ein Hauch Dunkel, im
dunklen ein Hauch Hell. Ein fester Grauwert waere in einem der beiden
Modi falsch. */
.mode-schieber {
position: relative;
display: flex;
height: 46px;
margin: 10px 16px 4px;
border-radius: 23px;
background: color-mix(in srgb, var(--txt) 8%, transparent) !important;
border: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Der Daumen. Ort und Breite rechnet das CSS aus einer einzigen Zahl,
die js/mehr setzt - kein Messen, also nichts, was nachtraeglich
springen koennte. */
.mode-schieber .ms-daumen {
position: absolute;
top: 4px; bottom: 4px; left: 4px;
width: calc((100% - 8px) / 3);
transform: translateX(calc(var(--ms-i, 1) * 100%));
border-radius: 19px;
background: var(--sheet-bg);
box-shadow: 0 1px 3px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.08);
transition: transform .32s cubic-bezier(.32, 1.24, .5, 1);
z-index: 0;
}
.mode-schieber.sofort .ms-daumen { transition: none !important; }
.mode-schieber button {
position: relative;
z-index: 1;
flex: 1 1 0;
border: none;
background: none;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--muted);
transition: color .2s ease;
-webkit-tap-highlight-color: transparent;
}
.mode-schieber button.active { color: var(--txt); }
.mode-schieber .ms-ik {
width: 21px; height: 21px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
}
/* Der Name des gewaehlten Zustands steht darunter. Symbole allein sind
schnell erkannt, aber nicht immer eindeutig - der Halbkreis fuer
"automatisch" ist ohne Wort kaum zu erraten. */
.mode-name {
text-align: center;
font-size: .78rem;
font-weight: 600;
color: var(--muted);
margin: 0 16px 14px;
}
@media (prefers-reduced-motion: reduce) {
.mode-schieber .ms-daumen { transition: none !important; }
}