/* Anmeldeseite — eigenes Stilblatt, absichtlich getrennt von stil.css * ============================================================================ * * WARUM NICHT stil.css: Das grosse Stilblatt ist gut 340 kB und beschreibt * jede Ansicht der App. Ein Fremder, der nur die Anmeldung sieht, laedt davon * nichts und erfaehrt daraus nichts. Diese Datei traegt genau eine Karte. * * DIE EINE REGEL, die das Bild traegt: hoechstens EINE akzentgefuellte * Flaeche pro Bildschirm - hier der Absendeknopf. Alles andere trennt sich * ueber Helligkeit, nicht ueber Farbe. Sobald der Akzent auch die aktive * Pille fuellt, weiss das Auge nicht mehr, wohin es soll. * * KEIN backdrop-filter, KEIN blur: Der Nebel wird EINMAL als Verlauf * gezeichnet. Eine Unschaerfefilterflaeche kostet auf dem Telefon bei jedem * Tastendruck eine Neuberechnung - auf der Seite mit dem meisten Tippen. */ :root { --grund: #0A0B0A; --flaeche: #141613; --flaeche-hoch: #1D201C; --rand: #1E211D; --rand-hell: #2F332D; --text: #F2F5EC; --leise: #A5AE9F; --still: #7C8577; --akzent: #C9F73C; --tinte: #0A1003; --schlecht: #FF6B6B; --r-gross: 22px; --r-mittel: 16px; --r-klein: 10px; --r-pille: 999px; --kurz: 120ms; --mittel: 260ms; --kurve: cubic-bezier(.05, .7, .1, 1); } * { box-sizing: border-box; margin: 0; padding: 0; } [hidden] { display: none !important; } html { height: 100%; -webkit-text-size-adjust: 100%; } body { height: 100%; font: 450 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--text); background: var(--grund); -webkit-font-smoothing: antialiased; overflow: hidden; /* gescrollt wird in .buehne, nicht im Dokument */ } /* ------------------------------------------------------------------ Nebel */ /* Eine eigene feste Ebene statt eines Hintergrunds auf : der Koerper * ist hier nur so hoch wie sein Inhalt, Prozentangaben in einem Verlauf * haetten also keinen verlaesslichen Bezug. Fest und ganz hinten kostet es * eine Ebene und wird genau einmal gemalt. */ .nebel { position: fixed; inset: 0; z-index: -1; pointer-events: none; /* Nur der Akzent und Schwarz. Hier stand ein zweiter Farbton (#5FD9A0), * der im Farbsatz dieser Seite gar nicht vorkommt - im Nebel unten rechts * gab er dem Bild einen zweiten, gruenlichen Schwerpunkt. */ background: radial-gradient(72% 46% at 50% -6%, rgba(201, 247, 60, .11), transparent 68%), radial-gradient(52% 38% at 88% 96%, rgba(201, 247, 60, .05), transparent 70%), radial-gradient(46% 34% at 6% 82%, rgba(201, 247, 60, .04), transparent 72%); } /* ------------------------------------------------------------------ Buehne */ /* Drei Zeilen, JEDES Kind bekommt seine Zeile ausdruecklich zugewiesen. * Ein Element ohne Zuweisung landet lautlos in einer neuen vierten Zeile und * schiebt die Karte aus der Mitte - der Fehler ist am Bild kaum zu sehen. * Zeile 1 bleibt leer, damit die Karte unabhaengig von der Hoehe der * Fusszeile genau mittig steht. */ .buehne { position: fixed; left: 0; right: 0; top: 0; height: 100dvh; /* JS ersetzt das durch visualViewport.height */ overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; padding: calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom)); } /* ------------------------------------------------------------------ Karte */ .karte { grid-row: 2; width: 100%; max-width: 400px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-gross); padding: 24px; box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .9); } .marke { display: flex; align-items: center; gap: 12px; } .zeichen { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-klein); background: var(--flaeche-hoch); border: 1px solid var(--rand-hell); color: var(--akzent); font-size: 13px; font-weight: 800; letter-spacing: .04em; } .wortmarke { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--still); } h1 { margin-top: 16px; font-size: 32px; font-weight: 800; line-height: 1.12; letter-spacing: -.01em; } .unter { margin-top: 8px; color: var(--leise); } /* ------------------------------------------------------------------ Pillen */ .pillen { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--grund); border: 1px solid var(--rand); border-radius: var(--r-pille); } /* 12px, nicht 10px: 10 steht nicht in der Abstandsreihe, und erst 12 bringt * die Pille auf 44px Hoehe - darunter ist sie mit dem Daumen ein Gluecksspiel. */ .pille { padding: 12px 8px; border: 1px solid transparent; border-radius: var(--r-pille); background: none; color: var(--still); font: inherit; font-size: 13px; font-weight: 550; cursor: pointer; transition: background var(--kurz) var(--kurve), color var(--kurz) var(--kurve), border-color var(--kurz) var(--kurve); } /* Die aktive Pille traegt den Akzent als SCHRIFT, nicht als Flaeche. Gefuellt * sein darf auf dieser Seite nur der Absendeknopf. */ .pille.an { background: var(--flaeche-hoch); border-color: var(--rand-hell); color: var(--akzent); } /* ------------------------------------------------------------------ Felder */ form { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; } label { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--still); } /* "freiwillig" hinter der Beschriftung. Keine eigene Farbe - die Reihe * traegt hier ohnehin schon die leiseste Stufe, also trennt nur die * Schriftstaerke. Ein zweiter Farbton waere eine Behauptung von Bedeutung. */ .beiwort { font-weight: 450; opacity: .8; } .eingabe { position: relative; } input { width: 100%; height: 48px; padding: 0 16px; border: 1px solid var(--rand); border-radius: var(--r-mittel); background: var(--grund); color: var(--text); font-family: inherit; font-weight: 450; /* 16px IST DIE UNTERGRENZE. Alles darunter loest auf iOS beim Antippen ein * automatisches Hineinzoomen aus; die Seite bleibt danach vergroessert und * der Knopf liegt ausserhalb des Bildes. */ font-size: 16px; transition: border-color var(--kurz) var(--kurve), background var(--kurz) var(--kurve); } input::placeholder { color: var(--still); } input:focus { background: var(--flaeche-hoch); border-color: var(--rand-hell); } /* Der Ring wird ausdruecklich gesetzt und nie entfernt: ohne ihn ist die * Seite mit der Tastatur nicht bedienbar. */ input:focus-visible, button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; } /* Chrome faerbt automatisch ausgefuellte Felder hellblau. Der Trick mit dem * Innenschatten ist die einzige Moeglichkeit, das ohne !important-Kette zu * ueberschreiben - die Fuellfarbe selbst ist nicht ansprechbar. */ input:-webkit-autofill { -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 40px var(--flaeche-hoch) inset; caret-color: var(--text); } #passwort, #wieder { padding-right: 48px; } .auge { position: absolute; /* 44 px, nicht 40. Die Optik bleibt klein - das Zeichen darin misst 16 px - aber die Flaeche, die den Finger annimmt, ist die vorgeschriebene. Gemessen mit messung/layoutpruefer.py, der genau das meldet. */ top: 2px; right: 2px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--r-klein); background: none; color: var(--still); cursor: pointer; transition: color var(--kurz) var(--kurve); } .auge[aria-pressed="true"] { color: var(--leise); } .auge .strich { opacity: 0; transition: opacity var(--kurz) var(--kurve); } .auge[aria-pressed="true"] .strich { opacity: 1; } .hinweis { margin-top: 8px; font-size: 13px; font-weight: 550; color: var(--leise); } /* ------------------------------------------------------------------ Meldung */ /* Steht UEBER dem Knopf: dort schaut der Blick nach dem Absenden ohnehin hin, * und der Daumen verdeckt sie nicht. */ .fehler { padding: 12px 16px; border: 1px solid rgba(255, 107, 107, .32); border-radius: var(--r-klein); background: rgba(255, 107, 107, .09); color: var(--schlecht); font-size: 13px; font-weight: 550; /* Servertexte koennen einen ungetrennten Brocken enthalten - einen * eingetippten Code etwa. Ohne das schoebe der die Karte auseinander. */ overflow-wrap: anywhere; } /* Der Bereich bleibt dauerhaft im Baum (siehe anmelden.html) und verschwindet * nur optisch, solange nichts drinsteht. Sonst muesste role="alert" jedes Mal * neu eingehaengt werden, und genau dann liest es nicht jeder Vorleser vor. */ .fehler:empty { display: none; } /* ------------------------------------------------------------------ Ohne JS */ /* Sichtbar NUR ueber die Regel im