/*
* NORTHSIDE Player Portal — iOS-Designsystem.
*
* Übernommen aus dem abgestimmten Entwurf und hier zur wartbaren Datei
* auseinandergenommen. Bewusst KEIN Framework und kein Build-Schritt — wie im
* übrigen Frontend dieses Projekts.
*
* Der Leitgedanke: Das hier soll sich wie eine App anfühlen, nicht wie eine
* Website. Daraus folgt alles Weitere — Bedienung unten in der Daumenzone,
* Listen im Einstellungen-Stil, Blätter statt Seitenwechsel, und Farben aus
* der iOS-Systempalette statt eigener Erfindungen.
*
* WICHTIG für alles, was hier ergänzt wird:
* * Kein Tippziel unter 44 px.
* * Sichere Bereiche beachten (env(safe-area-inset-*)), sonst liegt das
* unterste Element auf dem iPhone unter dem Home-Indikator.
* * Hell- UND Dunkelmodus bedienen; iOS kann beides, also können wir es auch.
*/
/* ── Poppins ────────────────────────────────────────────────
Die Hausschrift der Bank — und NUR der Bank. Das übrige Portal bleibt bei
der Systemschrift, weil es iOS nachbaut und iOS seine eigene Schrift
mitbringt; die Bank bildet dagegen eine fremde App nach, und deren
Schrift ist ein so großer Teil ihres Aussehens wie ihre Farbe.
Mitgeliefert statt von Google geladen. Drei Gründe, in dieser Reihenfolge:
das Portal soll als installierte App auch ohne Netz vollständig sein; ein
Aufruf zu fonts.gstatic.com verrät jedem Spieler-Browser die Adresse
dieser Seite; und der Server läuft auf http, ein Fremdaufruf nach https
ist eine Fehlerquelle mehr. Poppins steht unter der SIL Open Font
License 1.1 — Weitergabe mitsamt Programm ist ausdrücklich erlaubt.
Vier Schnitte, je zweimal (latin und latin-ext). Mehr nicht: Kursiv
benutzt die Vorlage nirgends, und jeder weitere Schnitt wäre Ladezeit für
nichts. Wo ein Zeichen fehlt — kyrillische Spielernamen etwa —, springt
die Systemschrift ein; das ist der Zweck der Kette hinter var(--font-bank).
`font-display: swap`: Lieber sofort in der Systemschrift lesen und dann
umspringen, als 100 ms auf eine leere Fläche schauen. */
@font-face {
font-family: "Poppins NS"; font-style: normal; font-weight: 400; font-display: swap;
src: url(fonts/poppins-400-latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Poppins NS"; font-style: normal; font-weight: 400; font-display: swap;
src: url(fonts/poppins-400-latin-ext.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Poppins NS"; font-style: normal; font-weight: 500; font-display: swap;
src: url(fonts/poppins-500-latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Poppins NS"; font-style: normal; font-weight: 500; font-display: swap;
src: url(fonts/poppins-500-latin-ext.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Poppins NS"; font-style: normal; font-weight: 600; font-display: swap;
src: url(fonts/poppins-600-latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Poppins NS"; font-style: normal; font-weight: 600; font-display: swap;
src: url(fonts/poppins-600-latin-ext.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Poppins NS"; font-style: normal; font-weight: 700; font-display: swap;
src: url(fonts/poppins-700-latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Poppins NS"; font-style: normal; font-weight: 700; font-display: swap;
src: url(fonts/poppins-700-latin-ext.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
/* iOS-Systemfarben — die Werte hier sind die des HELLMODUS.
Apple fuehrt vier davon im Dunkelmodus heller; die Abweichung steht
im Dunkel-Block weiter unten (Figma: accent/blue, green, red, orange).
Gelb, Lila, Pink, Tuerkis und Indigo kennt die Vorlage nicht — die
bleiben ungeteilt. */
--blue: #007AFF; --green: #34C759; --red: #FF3B30;
--orange: #FF9500; --yellow: #FFCC00; --purple: #AF52DE;
--pink: #FF2D55; --teal: #30B0C7; --indigo: #5856D6;
/* Systemgrau — die deckende Fläche (z. B. Symbolkacheln). Nicht mit
--label-2 verwechseln: das ist durchscheinende Schrift. */
--grau: #8E8E93;
/* Radien */
--r-card: 22px; --r-box: 12px; --r-ctl: 8px; --r-pill: 999px;
/* Abstände (8-pt-Raster) */
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;
--gutter: 16px;
/* Gerätestreifen. 54 px Statusleiste und 34 px Home-Anzeige sind die Maße
des Apple-Kits (iPhone 15 Pro / Pro Max). */
--statusbar-h: 54px;
--homebar-h: 34px;
--font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
"Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
/* Die Bank traegt Poppins, der Rest des Portals nicht — siehe den
Schriftblock oben. Die Kette dahinter ist dieselbe wie in --font:
Faellt ein Zeichen aus Poppins heraus, springt die Systemschrift ein
statt einer beliebigen Ersatzschrift des Browsers. */
--font-bank: "Poppins NS", -apple-system, BlinkMacSystemFont, "SF Pro Text",
"Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
}
[data-theme="light"] {
--bg: #F2F2F7;
--bg-elev: #FFFFFF;
/* Zweite Ebene: eine Flaeche AUF einer erhoehten Flaeche (Bildfelder,
eingebettete Kaesten). bg/elevated-2 im Modus „Light". */
--bg-elev-2: #F2F2F7;
/* fill/control im Modus „Light": #78788033. Stand vorher auf
118,118,128 bei .12 — Spur und Chips waren dadurch zu blass. */
--fill: rgba(120,120,128,.20);
--fill-2: rgba(118,118,128,.16);
/* Ausgewähltes Segment: im Hellmodus weiß (Kit-Wert). */
--seg-pille: #FFFFFF;
--label: #000000;
--label-2: rgba(60,60,67,.60);
--label-3: rgba(60,60,67,.30);
--separator: rgba(60,60,67,.29);
/* Glaskanten, beide aus der Vorlage (Modus „Light"): glass/stroke
#FFFFFF80, glass/highlight #FFFFFF99. Auch im Hellmodus ist die Kante
WEISS, nur kraeftiger als im Dunkeln — eine dunkle Aussenkante, wie
hier bis zum 30.08.2026 stand, war meine Annahme, nicht die Vorlage. */
--glass-stroke: rgba(255,255,255,.50);
--glass-highlight: rgba(255,255,255,.60);
/* glass/regular im Modus „Light": #FFFFFFB8. Vorher ein eigener
Grauton bei hoeherer Deckkraft. */
--bar: rgba(255,255,255,.72);
--sheet: #FFFFFF;
--shadow: 0 1px 2px rgba(0,0,0,.06);
--scrim: rgba(0,0,0,.4);
}
[data-theme="dark"] {
/* Die vier Systemfarben, die Apple im Dunkelmodus heller fuehrt
(Figma: accent/blue #0A84FF, green #30D158, red #FF453A,
orange #FF9F0A). Bis 30.08.2026 galten hier die Hellmodus-Werte —
auf schwarzem Grund wirkten sie eine Spur zu satt und zu dunkel.
Das faellt ueberall auf: Schaltflaechen, Links, Schalter und die
Kachelverlaeufe des Home-Bildschirms. */
--blue: #0A84FF; --green: #30D158; --red: #FF453A; --orange: #FF9F0A;
--bg: #000000;
--bg-elev: #1C1C1E;
--bg-elev-2: #2C2C2E;
/* fill/control: rgba(120,120,128,.36). Vorher 118,118,128 bei .24 —
die Spur des Segmented Control und die Chips waren dadurch zu blass. */
--fill: rgba(120,120,128,.36);
--fill-2: rgba(118,118,128,.32);
/* Im Dunkelmodus ist die Pille grau, nicht weiß — sonst blendet sie. */
--seg-pille: #636366;
--label: #FFFFFF;
--label-2: rgba(235,235,245,.60);
--label-3: rgba(235,235,245,.30);
--separator: rgba(84,84,88,.65);
/* glass/stroke #FFFFFF1F und glass/highlight #FFFFFF33 aus der Vorlage.
Sie hatten bis 30.08.2026 keinen Nutzer — nicht weil sie ueberfluessig
waeren, sondern weil das Portal noch kein Liquid Glass machte. */
--glass-stroke: rgba(255,255,255,.12);
--glass-highlight: rgba(255,255,255,.20);
/* glass/regular aus der Vorlage: #1C1C1EB8. Vorher rgba(22,22,22,.80) —
etwas dunkler und etwas deckender als vorgesehen. */
--bar: rgba(28,28,30,.72);
--sheet: #1C1C1E;
--shadow: none;
--scrim: rgba(0,0,0,.55);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
margin: 0; padding: 0; height: 100%;
/* Beide Achsen, nicht nur die senkrechte: Gemessen stand hier
`auto none` — waagerecht war das Gummiband also offen, und eine
Wischgeste über den Rand hinaus zog die ganze Seite mit. In einer App
gibt es das nicht. */
overscroll-behavior: none;
}
body {
font-family: var(--font);
background: var(--bg);
color: var(--label);
font-size: 17px;
line-height: 1.29;
letter-spacing: -.022em;
-webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--blue); text-decoration: none; }
img { display: block; max-width: 100%; }
/* ── Rahmen ────────────────────────────────────────────────
Fest positioniert mit eigenem Scrollbereich: Das ist der Preis für das
App-Gefühl (die Adressleiste klappt dafür nicht mehr weg) und die
Voraussetzung dafür, dass die Navigationsleiste oben stehen bleibt und der
Bildschirmwechsel zwei Ebenen übereinander legen kann. */
.app {
position: fixed; inset: 0;
display: flex; flex-direction: column;
max-width: 520px; margin: 0 auto;
background: var(--bg);
overflow: hidden;
}
/* ── Navigationsleiste ──────────────────────────────────────
Scroll-Edge: Die Leiste ist im Grundzustand DURCHSICHTIG und wird erst zu
Glas, sobald Inhalt darunter durchläuft. Bis iOS 18 war sie dauerhaft Glas;
seit iOS 26 ist der Large-Title-Bereich oben offen, und das Material
erscheint erst beim Scrollen.
Geschaltet wird das von scroll-edge.js über die Klasse `is-scrolled`, ab
8 px Scrollweg. Das ist eine ANDERE Schwelle als `collapsed` (28 px, siehe
unten beim großen Titel) und macht ausschließlich das Material — den Titel
fasst sie nicht an. Zwei Schwellen sind Absicht: Das Glas soll früh
kommen, damit Inhalt nie unter einer offenen Leiste durchläuft; der Titel
soll spät weichen, damit er nicht bei jeder Fingerbewegung springt. */
.navbar {
position: sticky; top: 0; z-index: 50;
padding-top: env(safe-area-inset-top);
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-bottom: .5px solid transparent;
transition:
background .2s ease,
border-color .2s ease,
-webkit-backdrop-filter .2s ease,
backdrop-filter .2s ease;
}
.navbar.is-scrolled {
background: var(--bar);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
/* Glaskante statt grauer Trennlinie, dazu das Licht auf der Innenseite
der freien Unterkante. Zusammen ergibt das die Doppellinie, an der man
Liquid Glass erkennt: aussen dunkler Saum, innen heller Grat. */
border-bottom-color: var(--glass-stroke);
box-shadow: inset 0 -.5px 0 0 var(--glass-highlight);
}
.navbar.collapsed { border-bottom-color: var(--glass-stroke); }
.navbar-row { height: 44px; display: flex; align-items: center; padding: 0 var(--gutter); gap: var(--s3); }
.navbar-title {
flex: 1; text-align: center;
font-size: 17px; font-weight: 600; letter-spacing: -.43px;
opacity: 0; transform: translateY(6px);
transition: opacity .18s ease, transform .18s ease;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.navbar.collapsed .navbar-title { opacity: 1; transform: none; }
.navbar-action {
min-width: 44px; min-height: 44px;
display: flex; align-items: center; justify-content: center;
color: var(--blue); font-size: 17px; letter-spacing: -.43px;
}
/* Zurueck nach Apples Original: ein runder Knopf 44x44 mit NUR dem
Chevron. Die Beschriftung „Zurück" faellt weg — in iOS 26 traegt der
Knopf keine mehr.
Sie wird nicht geloescht, sondern nur unsichtbar gemacht: Ein
Vorlesewerkzeug braucht sie weiterhin, und ein Knopf, der nur aus einem
Zeichen besteht, waere sonst unbeschriftet. */
.navbar-action.left {
flex: none; width: 44px; min-width: 44px; height: 44px;
justify-content: center;
border-radius: 50%;
background: var(--fill);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
box-shadow: inset 0 0 0 .5px var(--glass-stroke),
inset 0 1px 0 -.5px var(--glass-highlight);
}
.navbar-action.left span {
position: absolute; width: 1px; height: 1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.navbar-action.right { justify-content: flex-end; }
.navbar-action.hidden { visibility: hidden; }
/* Der große Titel weicht beim Scrollen dem kleinen in der Leiste — in iOS
wandert er mit dem Inhalt nach oben weg, sobald der kleine erscheint.
Hier hängt er in der festen Leiste und kann nicht mitwandern, also klappt
er stattdessen zu. Ohne das stünden beide Titel gleichzeitig da, und
„Einstellungen" läse sich zweimal untereinander.
Zusammengeklappt wird über die Höhe, nicht über display:none — sonst
spränge die Leiste, statt sich zu bewegen.
Geschaltet von `collapsed`, das app.js ab 28 px Scrollweg setzt. */
.large-title {
padding: 0 var(--gutter) var(--s2);
overflow: hidden; max-height: 96px; opacity: 1;
transition: max-height .24s ease, opacity .16s ease, padding-bottom .24s ease;
}
.navbar.collapsed .large-title { max-height: 0; opacity: 0; padding-bottom: 0; }
/* Die Schrift SCHRUMPFT beim Zuklappen auf das Maß des kleinen Titels.
Ohne das fuhr der große Titel in voller Größe (34 px) nach oben aus dem
Bild, während in der Zeile darüber der kleine (17 px) einblendete — zwei
Größen ohne Übergang dazwischen. Weil beide Bewegungen gleich lang dauern
(.24s), treffen sich die zwei Titel jetzt in Größe und Gewicht; das ist der
Morph, den iOS zeigt.
Der Selektor MUSS auf das `h1` zielen: Auf `.large-title` selbst sitzt
keine Schriftgröße, eine Regel dort bliebe wirkungslos. */
.large-title h1 {
margin: 0; font-size: 34px; font-weight: 700; letter-spacing: .37px; line-height: 41px;
transition: font-size .24s ease, line-height .24s ease, letter-spacing .24s ease;
}
/* Ab 17 Zeichen eine Nummer kleiner (app.js setzt die Klasse): So bleibt auch
ein langer Spielname einzeilig, statt den Bildschirm nach unten zu drücken. */
.large-title.lang h1 { font-size: 27px; letter-spacing: 0; line-height: 33px; }
/* Um eine Klasse spezifischer als `.large-title.lang h1` — deshalb morphen
auch lange Titel auf dasselbe Ziel. Das Gewicht läuft bewusst nicht mit:
Außerhalb variabler Schriften springt es ohnehin, und während des
Ausblendens sieht das niemand. */
.navbar.collapsed .large-title h1 {
font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -.43px;
}
/* Das `h1` muss hier mitstehen, nicht nur der Kasten: Seit dem Morph hängt
die Titel-Bewegung an der Überschrift, und der Kasten allein zu bremsen
ließe die Schrift weiterlaufen. */
@media (prefers-reduced-motion: reduce) {
.navbar,
.large-title,
.large-title h1 { transition: none; }
}
.large-title .sub {
display: block; font-size: 13px; font-weight: 400; letter-spacing: -.08px;
color: var(--label-2); margin-top: 2px;
}
/* ── Bühne und Scrollbereich ──────────────────────────────────
Die Bühne hält beim Bildschirmwechsel zwei Scrollbereiche übereinander:
den abtretenden (eine reglose Kopie) und den ankommenden. Sie schneidet ab,
damit der hereinfahrende Bildschirm nicht neben dem Rahmen sichtbar wird. */
.buehne { position: relative; flex: 1; overflow: hidden; }
.scroll {
position: absolute; inset: 0;
overflow-y: auto; -webkit-overflow-scrolling: touch;
/* Der sichere Bereich unten gehört jetzt der Tab-Leiste — hier bleibt nur
der Abstand, den der Inhalt zum unteren Rand braucht. */
padding-bottom: 24px;
background: var(--bg);
/* Kein Scrollbalken: Auf einem Telefon gibt es keinen, und auf dem Rechner
verrät ein Balken am Rand sofort, dass hier eine Webseite läuft. */
scrollbar-width: none;
-ms-overflow-style: none;
/* Das Gummiband endet hier, statt sich auf die Seite dahinter
fortzupflanzen — sonst wackelt beim Überziehen der ganze Rahmen. */
overscroll-behavior-y: contain;
}
.scroll::-webkit-scrollbar { display: none; }
/* Vollflächige Ansichten (die Karte): Der Inhalt füllt die Bühne randlos und
bringt sein eigenes Scrollen mit — hier wird nicht gescrollt. */
.scroll.voll { padding: 0; overflow: hidden; }
/* ── Bildschirmwechsel: schieben statt umschalten ─────────────
Das ist der Unterschied zwischen einer Website und einer App. In iOS
schiebt sich der neue Bildschirm von rechts herein, während der alte ein
Stück nach links mitgeht (Parallaxe: er bewegt sich langsamer, etwa ein
Drittel der Strecke). Zurück läuft dasselbe rückwärts.
Zeitkurve und Dauer wie beim Blatt von unten — es ist dieselbe Bewegung. */
.scroll.abtretend { pointer-events: none; }
@keyframes bs-rein-vor { from { transform: translateX(100%); } to { transform: none; } }
@keyframes bs-raus-vor { from { transform: none; } to { transform: translateX(-28%); } }
@keyframes bs-rein-zurueck { from { transform: translateX(-28%); } to { transform: none; } }
/* `--wisch` ist der Punkt, an dem der Finger den Bildschirm losgelassen hat.
Ohne das würde er nach dem Wischen erst auf 0 zurückspringen und dann
hinausfahren. Ohne Wischen steht der Wert auf 0 und nichts ändert sich. */
@keyframes bs-raus-zurueck { from { transform: translateX(var(--wisch, 0px)); } to { transform: translateX(100%); } }
.wechsel-vor .scroll:not(.abtretend) { animation: bs-rein-vor .35s cubic-bezier(.32,.72,0,1) both; z-index: 2; }
.wechsel-vor .scroll.abtretend { animation: bs-raus-vor .35s cubic-bezier(.32,.72,0,1) both; z-index: 1; }
.wechsel-zurueck .scroll:not(.abtretend) { animation: bs-rein-zurueck .35s cubic-bezier(.32,.72,0,1) both; z-index: 1; }
.wechsel-zurueck .scroll.abtretend { animation: bs-raus-zurueck .35s cubic-bezier(.32,.72,0,1) both; z-index: 2; }
/* Der abtretende Bildschirm bekommt beim Vorwärtsgehen einen Schatten an der
Kante — in iOS liegt der neue Bildschirm sichtbar über dem alten. */
.wechsel-vor .scroll:not(.abtretend),
.wechsel-zurueck .scroll.abtretend { box-shadow: -3px 0 12px rgba(0,0,0,.28); }
/* Wischen mit dem Finger: Solange gezogen wird, folgt der Bildschirm ohne
Zeitkurve — sonst hinkt er hinterher. */
.buehne.zieht .scroll { animation: none; transition: none; }
/* Wer Bewegung reduziert haben möchte, bekommt den Wechsel ohne Schieben.
Die Bildschirme wechseln dann so, wie sie es vorher taten. */
@media (prefers-reduced-motion: reduce) {
.wechsel-vor .scroll, .wechsel-zurueck .scroll { animation: none; box-shadow: none; }
}
/* ── Gruppierte Listen (Einstellungen-Stil) ─────────────────
16px statt der 12px aus `--r-box`: iOS 26 hat die Inset-Grouped-Container
spürbar runder gemacht. Der Wert steht ABSICHTLICH hier und nicht im Token
— `--r-box` hängt an sieben kleineren Flächen (.stat, .cs-tabelle,
Karten-Popup, Diplomatie-Hinweise); auf denen sähen 16px aufgeblasen aus.
Wer den Radius irgendwann überall anhebt, ändert das Token und löscht
diese Zeile.
Das Token hieß bis zum 30.08.2026 `--r-group` — ein Name, der nach dem
Bauteil hier klang, es aber seit dem Radiuswechsel gerade NICHT mehr
bediente. */
.group {
background: var(--bg-elev);
/* Feine Kante auch auf undurchsichtigen Flaechen: In iOS 26 ist jede
erhoehte Flaeche gegen ihren Grund abgesetzt, nicht nur das Glas. */
box-shadow: inset 0 0 0 .5px var(--glass-stroke);
border-radius: 16px;
margin: 0 var(--gutter) var(--s5);
overflow: hidden;
}
/* 39 hoch nach Apples „Section Title" (vorher 45): 14 oben + 17 Schrift
+ 8 unten. Das waagerechte Innenmass von 16 stimmte bereits. */
.group-header {
padding: 14px var(--gutter) var(--s2);
font-size: 13px; letter-spacing: -.08px;
color: var(--label-2); text-transform: uppercase;
}
.group-footer {
margin: -12px var(--gutter) var(--s5);
padding: var(--s2) 4px 0;
font-size: 13px; color: var(--label-2); line-height: 1.35;
}
/* Masse aus Apples Kit (iOS 27, „Row"): einzeilig 52 hoch, zweizeilig 68,
waagerechtes Innenmass 16. Apple setzt die Hoehe fest; im Web waechst
eine Zeile mit ihrem Inhalt, deshalb Mindesthoehe plus Innenmass:
einzeilig ergibt das 52, zweizeilig 67 — ein Pixel unter Apple, dafuer
ohne feste Hoehe, die langen Text abschneiden wuerde.
Bis 30.08.2026 standen hier 44 und 11 — beides aus der Zeit vor dem
Kit-Abgleich. */
.row {
display: flex; align-items: center; gap: var(--s3);
min-height: 52px; padding: 13px var(--s4);
position: relative; width: 100%; text-align: left;
}
.row + .row::before {
content: ""; position: absolute; top: 0; left: var(--s4); right: 0;
height: .5px; background: var(--separator);
}
/* Der Einzug ist EINHEITLICH 16px und fluchtet damit mit dem Zeilentext.
Bis 30.08.2026 rückte `.row.inset + .row.inset::before` ihn auf 56px ein —
der Abstand, der zu einem 29px-Symbol plus 12px Lücke passt. Die Klasse
stand aber an 35 von 46 Stellen an Zeilen OHNE Symbol: alle
Einstellungen-Gruppen, die Bank, die Diplomatie. Dort schwebte die Linie
40px rechts vom Text, und weil `.inset` sonst keine Regel trug, fiel es
niemandem als Ursache auf. Regel und Klasse sind beide entfernt.
Wer die Linie für Zeilen MIT Symbol wieder am Text ausrichten will,
braucht eine Kennzeichnung, die wirklich nur an solchen Zeilen steht — die
alte war es nachweislich nicht. Über den Inhalt geht es auch: Die
führenden Elemente sind uneinheitlich (`.row-icon`, `.avatar`, `.rank`,
blankes ``), ein `:has()` müsste sie alle aufzählen und bei jedem
neuen mitwachsen. */
button.row:active, a.row:active { background: var(--fill); }
/* Listenzeilen sind keine Links, auch wenn sie technisch welche sind: In iOS
zeigt der Pfeil rechts an, dass es weitergeht — blauer Text tut es nicht. */
a.row, a.card { color: inherit; text-decoration: none; }
.row-icon {
width: 29px; height: 29px; flex: none; border-radius: 7px;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 15px;
}
.row-body { flex: 1; min-width: 0; }
.row-title { font-size: 17px; letter-spacing: -.43px; }
.row-sub { font-size: 13px; color: var(--label-2); margin-top: 2px; letter-spacing: -.08px; }
.row-value { font-size: 17px; color: var(--label-2); letter-spacing: -.43px; flex: none; }
.chev { width: 7px; height: 12px; flex: none; color: var(--label-3); }
/* ── Karten ───────────────────────────────────────────────── */
.card {
background: var(--bg-elev); border-radius: var(--r-card);
padding: var(--s4); margin: 0 var(--gutter) var(--s4);
box-shadow: var(--shadow);
}
.card-dunkel { color: #fff; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; padding: var(--s5) var(--gutter) var(--s3); }
.section-head h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.26px; }
/* ── Segmentierter Umschalter ─────────────────────────────── */
/* Maße aus dem Apple-Kit (Controls/Segmented Controls/Light/3 Buttons,
Knoten 0:6510): Gesamthöhe 32 px, Spur rgba(118,118,128,.12) mit Radius
8,91 px, Pille 2 px eingerückt mit Radius 6,93 px, Beschriftung 13 px bei
18 px Zeilenhöhe — unausgewählt Regular, ausgewählt Semibold.
32 px ist niedriger als die 44-px-Regel dieses Stylesheets. Das ist hier
richtig so: Genau so hoch ist das Bauteil auf einem iPhone auch, und die
Trefferfläche wächst über den Außenabstand, nicht über die Bauhöhe. */
.segmented {
display: flex; height: 32px; align-items: stretch;
background: var(--fill); border-radius: var(--r-pill); padding: 2px;
/* 4px zwischen den Segmenten — sie ersetzen die frueheren Trennstriche. */
gap: 4px;
margin: 0 var(--gutter) var(--s4);
}
.segmented button {
flex: 1; position: relative; border-radius: var(--r-pill);
font-size: 13px; font-weight: 400; line-height: 18px;
letter-spacing: -.08px; color: var(--label);
transition: background .2s ease;
}
.segmented button[aria-selected="true"] {
background: var(--seg-pille); font-weight: 600;
border: .5px solid rgba(0,0,0,.04);
box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04);
}
/* Die Trennstriche zwischen unausgewaehlten Segmenten sind entfallen: In
iOS 27 trennt eine 4px-Luecke die Segmente, kein Strich mehr. Sie standen
hier seit dem iOS-18-Kit. */
/* ── Schalter ─────────────────────────────────────────────── */
/* 64x28 mit einem KAPSELFOERMIGEN Knauf 38x24 — nicht mehr 51x31 mit
rundem Knauf. Der Schalter ist damit breiter und flacher als die
klassische Form, und der Knauf laenglich statt kreisrund. Masse aus
Apples „Toggle - Switch" (iOS 27); die alten stammten aus dem
iOS-18-Kit. Weg des Knaufs: 64 − 2 − 2 − 38 = 22px. */
.switch {
width: 64px; height: 28px; border-radius: var(--r-pill);
background: var(--fill-2); position: relative; flex: none;
transition: background .25s cubic-bezier(.4,0,.2,1);
}
.switch::after {
content: ""; position: absolute; top: 2px; left: 2px;
width: 38px; height: 24px; border-radius: var(--r-pill); background: #fff;
box-shadow: 0 3px 8px rgba(0,0,0,.15);
transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.switch[aria-checked="true"] { background: var(--green); }
.switch[aria-checked="true"]::after { transform: translateX(22px); }
/* ── Schaltflächen ────────────────────────────────────────── */
/* Kapsel statt gerundetem Rechteck: Apples „Button - Liquid Glass" hat
Radius 1000 in allen drei Groessen. Die Hoehe von 50 entspricht Apples
„Large" und stimmte bereits; das waagerechte Innenmass von 20 kommt neu
dazu — ohne stand der Text bei Knoepfen, die nicht ueber die volle
Breite gehen, an der Kante. */
.btn {
display: flex; align-items: center; justify-content: center; gap: 6px;
min-height: 50px; padding: 0 20px; border-radius: var(--r-pill);
font-size: 17px; font-weight: 600; letter-spacing: -.43px;
transition: opacity .15s ease;
}
.btn:active { opacity: .6; }
.btn:disabled { opacity: .4; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-tinted { background: color-mix(in srgb, var(--blue) 15%, transparent); color: var(--blue); }
.btn-danger { background: color-mix(in srgb, var(--red) 15%, transparent); color: var(--red); }
.btn-gray { background: var(--fill); color: var(--label); }
.btn-block { margin: 0 var(--gutter) var(--s4); width: calc(100% - var(--gutter) * 2); }
/* ── Marken / Punkte ──────────────────────────────────────── */
.pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 9px; border-radius: var(--r-pill);
font-size: 12px; font-weight: 600; letter-spacing: -.08px;
background: var(--fill); color: var(--label-2);
}
.pill.green { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); }
.pill.red { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }
.pill.blue { background: color-mix(in srgb, var(--blue) 18%, transparent); color: var(--blue); }
.pill.orange { background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange); }
.avatar {
width: 40px; height: 40px; border-radius: 50%; flex: none;
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: 600; color: #fff; letter-spacing: -.2px;
background: var(--indigo); overflow: hidden;
}
.avatar.lg { width: 88px; height: 88px; font-size: 34px; }
.avatar.sm { width: 28px; height: 28px; font-size: 12px; }
/* ── Statistik-Kacheln ────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin: 0 var(--gutter) var(--s4); }
/* 22px wie `.konto` daneben, nicht 12 aus `--r-box`: Auf dem Profil stehen
beide Kartenreihen direkt uebereinander (Bargeld/Bank, darunter
Kills/Tode/K-D) — mit verschiedenen Ecken sah das nach Versehen aus.
Apples `radius/card` ist 22 und gilt fuer „Karten, Widgets"; diese
Kacheln sind genau das. Gefunden beim Gesamtblick, nicht beim Messen der
Einzelteile. */
.stat { background: var(--bg-elev); border-radius: 22px; padding: var(--s3) var(--s2); text-align: center; }
.stat .v { font-size: 22px; font-weight: 700; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.stat .k { font-size: 11px; color: var(--label-2); margin-top: 3px; letter-spacing: -.08px; }
/* ── Zwei Geldtöpfe ───────────────────────────────────────────
Bargeld und Bank stehen IMMER nebeneinander. Einen davon allein zu zeigen
ist die häufigste Quelle für „warum reicht mein Geld nicht?". */
.konten { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin: 0 var(--gutter) var(--s4); }
/* Die Kennzahl-Karte (Bargeld/Bank in Löwenplay und in der Geldbörse).
Maße nach dem Entwurf: 22px Radius, 12px oben / 14px unten / 16px seitlich,
4px zwischen Beschriftung und Wert, Beschriftung auf Footnote (13px).
Die Akzentfarben stehen zwei Zeilen tiefer und waren schon richtig. */
.konto { background: var(--bg-elev); border-radius: 22px; padding: 12px 16px 14px; }
.konto .k { font-size: 13px; color: var(--label-2); }
.konto .v { font-size: 22px; line-height: 28px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 4px; }
.konto.bar .v { color: var(--green); }
.konto.bank .v { color: var(--blue); }
/* ── Amazon (Shop) ──────────────────────────────────────────
Aufbau der Amazon-App: Suchleiste, „Liefern an"-Zeile, Kategorienstreifen,
Produktraster. Der Akzent ist das Amazon-Orange — es gilt nur in dieser
App, wie das Grün nur in den Kleinanzeigen gilt.
Listenzeile, Preisformatierung, Lupenknopf und Trefferzeile stammen aus
der Vorlage „Amazon UI Design (Community)" - Komponenten `Product`,
`searchbar` und `result & sort`. Das Deal-Band behielt dabei Amazons
echtes #CC0C39 statt des #B12704 der Vorlage. Bewertungssterne zeigt die
Vorlage auch - die fehlen hier, weil der Shop keine Bewertungen kennt.
Der KOPFBEREICH der Vorlage ist dagegen ueberholt: Sie zeigt die Website
von 2021 mit dunkelblauer Leiste und gelbem Lupenknopf rechts. Die App
von heute hat einen farbigen Kopf und die Lupe links - siehe
„Amazons Kleid" weiter unten. */
/* Amazons Preisrot. Hell ist Amazons eigener Wert; dunkel eine Aufhellung
desselben Farbtons - #B12704 steht auf dunklem Grund bei rund 2:1 und
wäre dort unlesbar. Amazons Palette ist für weißen Grund gebaut. */
:root { --az-rot: #B12704; }
[data-theme="dark"] { --az-rot: #FF6E6B; }
/* Amazons Akzentorange. Hell #C45500 (Amazons eigener Wert für Text auf
Weiß, so auch in der Vorlage), dunkel das Markenorange #FF9900 - auf
hellem Grund käme #FF9900 nur auf 2,2:1. */
:root { --az-orange: #C45500; }
[data-theme="dark"] { --az-orange: #FF9900; }
/* Suchleiste mit dem gelben Lupenknopf rechts — Amazons auffälligstes
Erkennungszeichen. Der Block misst 45px breit wie in der Vorlage; die
Höhe wächst von 36 auf Amazons 40. Der Radius bleibt bei 10: die Vorlage
zeigt mit 4 die Website, Amazons App rundet stärker. */
.az-suchknopf {
display: flex; align-items: center; gap: var(--s2);
width: calc(100% - var(--gutter) * 2); margin: 0 var(--gutter) var(--s2);
min-height: 40px; padding: 0 0 0 12px; border-radius: 10px; overflow: hidden;
background: var(--fill); color: var(--label-2);
font-size: 17px; letter-spacing: -.43px; text-align: left;
}
.az-suchknopf:active { opacity: .6; }
.az-kats {
display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none;
padding: 0 var(--gutter) var(--s4);
}
.az-kats::-webkit-scrollbar { display: none; }
.az-kat {
flex: none; min-height: 34px; padding: 0 14px; line-height: 34px;
border-radius: var(--r-pill); background: var(--fill); color: var(--label);
font-size: 14px; white-space: nowrap; text-decoration: none;
}
.az-raster {
display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3);
padding: 0 var(--gutter) var(--s4);
}
@media (min-width: 620px) { .az-raster { grid-template-columns: repeat(3, 1fr); } }
.az-kachel {
display: flex; flex-direction: column; text-decoration: none; color: inherit;
background: var(--bg-elev); border-radius: var(--r-card); overflow: hidden;
box-shadow: var(--shadow);
}
.az-kachel:active { opacity: .7; }
.az-bild {
position: relative; aspect-ratio: 1 / 1; background: var(--fill);
display: flex; align-items: center; justify-content: center; font-size: 40px;
}
/* `contain`, nicht `cover`: Artikelbilder sind freigestellte Gegenstände —
ein Beschnitt würde ihnen die Hälfte abschneiden. */
.az-bild img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.az-band {
position: absolute; left: 0; top: 8px; padding: 3px 8px;
background: #CC0C39; color: #fff; font-size: 11px; font-weight: 700;
border-radius: 0 var(--r-pill) var(--r-pill) 0;
}
.az-band.fest { position: static; border-radius: var(--r-pill); }
.az-info { padding: var(--s3); display: flex; flex-direction: column; gap: 3px; }
.az-name {
font-size: 14px; line-height: 1.3;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Preiszeile nach der Vorlage: Preis in Amazons Rot und mittlerer Stärke
(nicht fett), alter Preis klein und durchgestrichen, dahinter die
Ersparnis in Zahl und Prozent. Die Ersparnis steht in der normalen
Textfarbe — sie ist die Rechnung, nicht der Reiz. */
.az-preisreihe { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.az-preis { font-size: 17px; font-weight: 500; letter-spacing: -.4px; color: var(--az-rot); }
.az-alt { font-size: 13px; color: var(--label-2); text-decoration: line-through; }
.az-spare { font-size: 14px; color: var(--label); }
.az-preisreihe.gross .az-preis { font-size: 26px; letter-spacing: -.6px; }
/* Bleibt im iOS-Rot: eine gesperrte Rolle ist ein Zustand des Kontos, keine
Handelsangabe — anders als die Knappheitszeile in der Listenzeile. */
.az-sperre { font-size: 12px; color: var(--red); }
/* Listenzeile der Suchergebnisse — Amazons Trefferdarstellung aus `Product`:
Bild links auf einem Viertel der Breite, rechts eine senkrechte Reihe mit
8px Abstand. Auf dem Start-Bildschirm bleibt das Kachelraster: Amazon zeigt
beim Stöbern Kacheln und erst bei Treffern Zeilen. */
.az-liste { padding: 0 var(--gutter) var(--s4); }
.az-zeile {
display: flex; gap: var(--s3); align-items: flex-start;
padding: var(--s4) 0; text-decoration: none; color: inherit;
}
.az-zeile + .az-zeile { border-top: .5px solid var(--separator); }
.az-zeile:active { opacity: .7; }
.az-zbild {
flex: none; width: 104px; height: 104px; border-radius: var(--r-box);
background: var(--fill); overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.az-zbild img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.az-ztext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.az-ztitel {
font-size: 17px; line-height: 1.3;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Das Band soll so breit sein wie sein Text, nicht so breit wie die Spalte. */
.az-ztext .az-band { align-self: flex-start; }
.az-zeile .az-preis { font-size: 21px; }
/* Amazons „Only 2 left in stock" — dieselbe Farbe wie der Preis. */
.az-knapp { font-size: 13px; color: var(--az-rot); }
/* Der Shop benutzt die Filterchips der Kleinanzeigen mit, und die tragen seit
dem Marktplatz das Markt-Grün. In Amazons App wäre Grün falsch. Orange mit
dunkler Schrift ist dieselbe Paarung wie beim Kaufknopf und die einzige,
die in beiden Themen trägt: Weiß auf #FF9900 käme nur auf 2,1:1. */
[data-bildschirm="shop-suchen"] .mk-chip.an { background: #FF9900; color: #0F1111; }
/* Trefferzeile nach `result & sort`. Amazons Sortierknopf fehlt bewusst: die
Shop-API kennt keine Sortierung, und ein Knopf ohne Wirkung ist schlimmer
als keiner. */
.az-treffer { padding: 0 var(--gutter) var(--s3); font-size: 14px; color: var(--label-2); }
.az-treffer b { color: var(--az-orange); font-weight: 700; }
/* ── Amazons Kleid ──────────────────────────────────────────
Nach der ECHTEN App (Bildschirmfoto des Betreibers, 31.08.2026) — NICHT
nach der Figma-Vorlage. Die ist von 2021 und zeigt die Website mit
dunkelblauem Kopf; die App von heute sieht anders aus:
grüner Kopf statt dunkelblau
weiße Pillen-Suchleiste, Lupe LINKS, keine gelbe Taste
Lieferort als Chip in der Chipreihe, nicht als eigene Zeile
rote Rabattbänder unten links auf der Kachel
weiße, flache Tab-Leiste
KEIN DUNKELMODUS
Wo Vorlage und echte App auseinandergehen, gilt ab hier die App. */
/* Die App ist IMMER hell. Amazons App kennt keinen Dunkelmodus, und ein
halb umgefärbtes Amazon wäre schlimmer als gar keins. Die Werte sind die
des Hellmodus-Blocks ganz oben, eins zu eins übernommen.
`:root[data-app=…]` und nicht bloß `[data-app=…]`: Beide Attribute sitzen
am SELBEN Element, und `[data-theme="dark"]` ist gleich stark. Ohne das
`:root` entschiede allein die Reihenfolge im Blatt — ein Stolperdraht für
den Nächsten, der etwas verschiebt. */
:root[data-app="amazon"] {
color-scheme: light;
--bg: #FFFFFF;
--bg-elev: #FFFFFF;
--bg-elev-2: #F2F2F7;
--fill: rgba(120,120,128,.20);
--fill-2: rgba(118,118,128,.16);
--seg-pille: #FFFFFF;
--label: #0F1111;
--label-2: #565959;
--label-3: rgba(60,60,67,.42);
--separator: rgba(60,60,67,.20);
--glass-stroke: rgba(255,255,255,.50);
--glass-highlight: rgba(255,255,255,.60);
--bar: rgba(255,255,255,.92);
--sheet: #FFFFFF;
--shadow: 0 1px 2px rgba(0,0,0,.06);
--scrim: rgba(0,0,0,.4);
/* Amazons eigene Töne bleiben auf den Hellmodus-Zahlen — der Grund ist
in dieser App immer weiß. */
--az-rot: #B12704;
--az-orange: #C45500;
/* Der Farbton des Kopfes. Drei Stufen: oben heller, Mitte, unten satter.
Sie leiten sich alle aus `--az-ton` ab, den app.js beim Wischen durch
das Angebotskarussell umsetzt (azKarussellFarbe) — „der farbige
Hintergrund wechselt beim Swipen der Angebote".
Gemischt wird in oklch und nicht in srgb: Ein Mischen mit Schwarz in
srgb frisst die Sättigung, und aus dem Rosa der vierten Karte würde
ein Braun. */
--az-gruen-0: color-mix(in oklch, var(--az-ton) 88%, #fff);
--az-gruen: var(--az-ton);
--az-gruen-2: color-mix(in oklch, var(--az-ton) 86%, #000);
}
/* Anfangston, bis das Karussell den ersten gemeldet hat — das Grün, mit dem
die App startet. Steht am Wurzelelement, weil die Navigationsleiste
außerhalb des Scrollbereichs liegt und dieselbe Farbe tragen muss. */
:root { --az-ton: #4BE578; }
/* Der Grundton, mit dem die App startet und zu dem alle Bildschirme außer
der Startseite zurückkehren. */
:root { --az-basis: #4BE578; }
/* Dem Karussell folgt NUR die Startseite. Sonst trüge die Produktseite Rosa,
bloß weil jemand zuletzt an einer rosa Angebotskarte stand — Zufall statt
Gestaltung.
ACHTUNG, das geht NICHT über die Variable: `azKarussellFarbe` setzt
`--az-ton` als INLINE-Stil am Wurzelelement, und ein Inline-Stil schlägt
jede Blattregel, egal wie spezifisch sie ist. Ein
`[data-app]:not([data-bildschirm="shop"]) { --az-ton: … }` wäre wirkungslos
gewesen — genau so ist es mir zuerst passiert. Überschrieben wird deshalb
die REGEL, nicht die Variable. */
[data-app="amazon"]:not([data-bildschirm="shop"]) .navbar,
[data-app="amazon"]:not([data-bildschirm="shop"]) .navbar.is-scrolled {
background: linear-gradient(180deg,
color-mix(in oklch, var(--az-basis) 88%, #fff) 0%,
var(--az-basis) 55%,
color-mix(in oklch, var(--az-basis) 86%, #000) 100%);
}
/* Kopf: grün und deckend, kein Glas, keine Unschärfe. Die Glasregeln weiter
oben müssen mit überschrieben werden — auch `is-scrolled` und die Kanten,
sonst käme die Glaskante beim Scrollen zurück. */
[data-app="amazon"] .navbar,
[data-app="amazon"] .navbar.is-scrolled {
/* Der helle Ton stand hier als fester Wert (#5BEA85) und ist jetzt eine
Variable — sonst bliebe die Leiste beim Farbwechsel oben grün und
spränge unten um. */
background: linear-gradient(180deg, var(--az-gruen-0) 0%, var(--az-gruen) 55%, var(--az-gruen-2) 100%);
-webkit-backdrop-filter: none; backdrop-filter: none;
border-bottom-color: transparent; box-shadow: none;
transition: background .45s ease;
}
/* Auf dem Grün steht die Schrift dunkel, nicht weiß — so wie in der App. */
[data-app="amazon"] .navbar,
[data-app="amazon"] .navbar .large-title h1,
[data-app="amazon"] .navbar .navbar-title { color: #0F1111; }
[data-app="amazon"] .navbar .large-title .sub { color: rgba(15,17,17,.62); }
[data-app="amazon"] .navbar-action.left {
background: rgba(255,255,255,.55); color: #0F1111; box-shadow: none;
}
/* Das Wortzeichen: klein geschrieben und eng, darunter der orange Bogen.
Die Schrift bleibt die des Systems — Amazon Ember ist laut dem Style
Guide der Vorlage nicht lizenzierbar und wird deshalb nicht eingebettet.
ABWEICHUNG VON DER ECHTEN APP, mit Absicht: Dort steht auf der Startseite
GAR KEIN Titel, nur Suchleiste und Chips. Das kann sich eine echte App
leisten — im Portal ist Amazon eine App unter vielen, zwischen denen man
hin und her springt, und ein Bildschirm ohne Namen wäre dort eine
Zumutung. Wer das anders sieht, löscht diese beiden Regeln.
Der Anker ist `[data-bildschirm="shop"]` und NICHT `[data-app]`: Das
Wortzeichen ist eine Marke, kein Schriftschnitt. Hing es an der App,
wurde aus „Suchen" ein „suchen" mit Bogen. */
[data-bildschirm="shop"] .large-title h1 {
text-transform: lowercase; font-weight: 800; letter-spacing: -1.4px;
}
[data-bildschirm="shop"] .large-title h1::after {
content: ""; display: block; width: 112px; height: 17px; margin-top: -3px;
background: no-repeat center/contain
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20'%3E%3Cpath d='M4 4c16 11 38 15 57 15 17 0 36-4 51-13' fill='none' stroke='%23FF9900' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M104 14 120 1 116 18z' fill='%23FF9900'/%3E%3C/svg%3E");
}
/* Zusammengeschoben trägt die Leiste den Titel klein und mittig — ein Bogen
unter einem 17-px-Wort wäre breiter als das Wort. */
[data-bildschirm="shop"] .navbar.collapsed .large-title h1::after { display: none; }
/* Suchleiste und Chips sitzen im grünen Kopf und nicht im Inhalt. Der Block
führt das Grün der Navigationsleiste randlos weiter. */
.az-kopfblock {
background: linear-gradient(180deg, var(--az-gruen-2) 0%, var(--az-gruen-2) 100%);
padding: var(--s2) 0 var(--s3); margin-bottom: var(--s4);
}
/* Angebotskarussell. Jede Karte trägt ihre eigene Farbe und gibt sie beim
Wischen an den Kopf weiter (azKarussellFarbe in app.js). 84 % Breite,
damit die nächste Karte angeschnitten sichtbar bleibt — erst das lädt zum
Wischen ein. */
.az-karussell {
display: flex; gap: var(--s3); overflow-x: auto; scrollbar-width: none;
padding: var(--s4) var(--gutter) var(--s2);
scroll-snap-type: x mandatory;
}
.az-karussell::-webkit-scrollbar { display: none; }
.az-angebot {
flex: none; width: 84%; scroll-snap-align: start;
background: var(--az-karte); border-radius: 20px; padding: var(--s4);
}
/* Fett und schwarz — die Überschriften sind das Lauteste auf dem Bildschirm.
Die Kartentöne sind deshalb hell genug für schwarze Schrift gewählt. */
.az-angebot-titel {
font-size: 27px; line-height: 1.12; font-weight: 800; letter-spacing: -.6px;
color: #0F1111; margin-bottom: var(--s3);
}
.az-angebot-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
.az-akachel {
position: relative; display: flex; align-items: center; justify-content: center;
aspect-ratio: 1 / 1; background: #fff; border-radius: 10px; overflow: hidden;
text-decoration: none;
}
/* Unten Platz lassen: Dort liegt das Band. */
.az-akachel img { width: 100%; height: 100%; object-fit: contain; padding: 10px 10px 30px; }
.az-akachel-ersatz { color: #565959; }
.az-akachel:active { opacity: .75; }
/* Ohne Rabatt trägt das Band den Preis statt des Prozentsatzes — dann ist es
keine Werbung mehr und darf nicht rot sein. */
[data-app="amazon"] .az-band.preis { background: #0F1111; }
/* Überschrift über dem Artikelraster. Amazon setzt diese Zeilen groß und
schwer, nicht als kleine Rubrik. */
.az-modul-titel {
font-size: 22px; font-weight: 800; letter-spacing: -.5px; color: var(--label);
padding: var(--s5) var(--gutter) var(--s3);
}
/* Suchfeld: weiße Pille mit der Lupe LINKS. Die gelbe Taste der Vorlage gibt
es in der App nicht — dort stehen rechts Kamera und Mikrofon, und die
bilde ich nicht nach: Knöpfe für Funktionen, die es nicht gibt, sind
schlimmer als keine Knöpfe. */
[data-app="amazon"] .az-suchknopf {
background: #fff; color: #565959; border-radius: var(--r-pill);
min-height: 48px; padding: 0 18px; gap: var(--s3);
box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
[data-app="amazon"] .az-suchknopf .az-lupensymbol { color: #0F1111; flex: none; }
/* Chipreihe im Grün: helle, halbdurchsichtige Pillen. Der Lieferort ist der
erste Chip — in der App steht dort die Postleitzahl. */
[data-app="amazon"] .az-kats { padding: var(--s3) var(--gutter) 0; }
[data-app="amazon"] .az-kat {
background: rgba(255,255,255,.60); color: #0F1111; box-shadow: none;
border-radius: var(--r-pill); min-height: 38px; line-height: 38px;
padding: 0 16px; font-size: 15px;
}
[data-app="amazon"] .az-kat.az-ort { display: flex; align-items: center; gap: 6px; line-height: 1; }
/* Ohne Lieferort geht keine Bestellung — dann ist der Chip kein Filter mehr,
sondern eine Aufforderung, und sieht auch so aus. */
[data-app="amazon"] .az-kat.az-ort.fehlt { background: #fff; font-weight: 700; }
/* Produktbilder stehen bei Amazon immer auf Weiß — freigestellte Ware auf
weißem Grund ist die Bildsprache des Hauses. */
[data-app="amazon"] .az-bild,
[data-app="amazon"] .az-zbild,
[data-app="amazon"] .az-gbild { background: #fff; }
/* Kacheln: weiß, mit 12px gerundet und einer Haarlinie statt der iOS-Karte
mit 22px und Schatten. */
[data-app="amazon"] .az-kachel {
border-radius: 12px; box-shadow: inset 0 0 0 1px var(--separator);
}
[data-app="amazon"] .az-zbild { border-radius: 12px; }
/* Das Rabattband sitzt UNTEN LINKS im Bild und ist ein abgerundetes Rechteck
— in der Vorlage klebte es oben links am Rand. */
[data-app="amazon"] .az-band {
left: 8px; top: auto; bottom: 8px;
border-radius: 6px; padding: 4px 9px; font-size: 12px;
}
[data-app="amazon"] .az-band.fest { border-radius: 6px; }
/* Tab-Leiste: weiß und flach wie in der App, aber in der Pillenform des
Portals — die ist die Klammer, die alle Apps zusammenhält. Form vom
Portal, Farbe von Amazon. Auf weißem Grund braucht die weiße Leiste eine
Kante, sonst verschwindet sie. */
[data-app="amazon"] .az-tabs {
background: #fff;
-webkit-backdrop-filter: none; backdrop-filter: none;
box-shadow: inset 0 0 0 1px var(--separator), 0 6px 20px rgba(0,0,0,.16);
}
[data-app="amazon"] .az-tab { color: #565959; }
[data-app="amazon"] .az-tab.an { color: #0F1111; }
[data-app="amazon"] .az-tab.an:not(.mitte) { background: rgba(0,0,0,.06); }
/* Produktseite */
.az-gbild {
height: 220px; margin: 0 var(--gutter) var(--s3);
background: var(--bg-elev); border-radius: var(--r-card);
display: flex; align-items: center; justify-content: center; font-size: 64px;
}
.az-gbild img { max-width: 100%; max-height: 100%; object-fit: contain; }
.az-kopf { padding: 0 var(--gutter) var(--s4); }
.az-gtitel { font-size: 22px; font-weight: 700; letter-spacing: -.4px; line-height: 1.25; }
.az-text {
padding: 0 var(--gutter) var(--s5);
font-size: 15px; line-height: 1.45; color: var(--label-2); white-space: pre-wrap;
}
/* Der Kaufknopf in Amazons Gelb — die eine Handlung, für die man die App
öffnet, und dort seit jeher die auffälligste Fläche des Bildschirms. */
.az-kaufen { background: #FFD814; color: #0F1111; }
.az-kaufen:active { background: #F7CA00; }
.az-gesperrt {
margin: 0 var(--gutter) var(--s4); padding: var(--s3) var(--s4);
border-radius: var(--r-box); text-align: center;
background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red);
font-size: 15px; line-height: 1.4;
}
/* Mietartikel: „je Neustart" statt eines durchgestrichenen Preises, und das
Band sagt „Miete" statt eines Rabatts. */
.az-jeneustart { font-size: 12px; color: var(--label-2); }
.az-band.miete { background: #8E5AF2; }
/* ── Meine Mieten ───────────────────────────────────────────
Der Restzähler ist die Zahl, um die es geht — er steht groß und mit Balken,
nicht als Nebensatz. */
.mt-miete {
background: var(--bg-elev); border-radius: var(--r-card);
margin: 0 var(--gutter) var(--s3); padding: var(--s4);
}
.mt-miete.vorbei { opacity: .55; }
.mt-miete-name { font-size: 17px; font-weight: 600; letter-spacing: -.43px; }
.mt-miete-rest {
font-size: 28px; font-weight: 700; letter-spacing: -.5px; line-height: 1;
font-variant-numeric: tabular-nums;
}
.mt-miete .bar-fort i { background: var(--green); }
.mt-miete.vorbei .bar-fort i { background: var(--label-3); }
/* Tab-Leiste der App: Aufbau siehe „Tab-Leiste der Apps" weiter unten,
app-eigen ist hier nur das Amazon-Orange. */
/* Das Orange kommt jetzt aus `--az-orange` und wird damit im Hellen zu
#C45500 — #FF9900 kam auf der hellen Glasleiste nur auf 2,2:1. */
.az-tab.an { color: var(--az-orange); }
/* ── Bestellungen (Sendungen) ───────────────────────────────
Aufbau einer Sendungsverfolgung: oben die Zahl der laufenden Sendungen,
darunter die Sendungen nach Zustand gruppiert, im Detail der Verlauf als
Stationenkette. Der Akzent ist das Paketbraun — es gilt nur hier und hebt
den Verlauf von den blauen Bedienelementen des Shops ab. */
:root { --sendung: #AC8E68; }
.hm-kopf { text-align: center; padding: var(--s2) var(--gutter) var(--s5); }
.hm-kopf-v { font-size: 40px; font-weight: 700; letter-spacing: -.8px; line-height: 1.1; }
.hm-kopf-k { font-size: 13px; color: var(--label-2); margin-top: 2px; }
/* Das Artikelbild in der Zeile. `contain`, wie bei Amazon: freigestellte
Gegenstände vertragen keinen Beschnitt. */
.hm-bild {
width: 40px; height: 40px; flex: none; border-radius: 8px;
background: var(--fill); overflow: hidden;
display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.hm-bild img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.hm-bild.sm { width: 32px; height: 32px; font-size: 16px; }
/* Kanzel der einzelnen Sendung */
.hm-kanzel { text-align: center; padding: var(--s2) var(--gutter) var(--s5); }
.hm-k-sym { font-size: 40px; line-height: 1; }
.hm-k-titel {
font-size: 22px; font-weight: 700; letter-spacing: -.45px; line-height: 1.25;
margin-top: var(--s2);
}
.hm-k-marken { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: var(--s3); }
/* Der Verlauf: Stationen an einer senkrechten Linie. Erledigte Stationen
tragen einen gefüllten Punkt, die offene einen hohlen — dieselbe Sprache
wie bei einem Paketdienst. */
.hm-verlauf { margin: 0 var(--gutter) var(--s5); }
.hm-station { position: relative; display: flex; gap: var(--s3); padding-bottom: var(--s4); }
/* Die Linie hängt an der Station, nicht am Behälter: So endet sie von selbst
an der letzten und muss nirgends nachgerechnet werden. */
.hm-station::before {
content: ""; position: absolute; left: 6px; top: 16px; bottom: 0;
width: 2px; background: var(--fill-2);
}
.hm-station.letzte::before { display: none; }
.hm-station.letzte { padding-bottom: 0; }
.hm-punkt {
position: relative; z-index: 1; flex: none;
width: 14px; height: 14px; margin-top: 3px; border-radius: 50%;
background: var(--bg); border: 2px solid var(--fill-2);
}
.hm-station.an .hm-punkt { background: var(--sendung); border-color: var(--sendung); }
.hm-st-titel { font-size: 17px; font-weight: 600; letter-spacing: -.43px; }
.hm-station:not(.an) .hm-st-titel { color: var(--label-2); }
.hm-st-zeit { font-size: 13px; color: var(--sendung); font-variant-numeric: tabular-nums; margin-top: 1px; }
.hm-st-text { font-size: 13px; color: var(--label-2); line-height: 1.35; margin-top: 3px; }
/* Die Karte zeigt hier nur — gewählt wird der Ort im Shop. Deshalb flacher als
die Auswahlkarte. Doppelte Klasse mit Absicht: `.karte` steht weiter unten
im Stylesheet und würde die Höhe sonst zurücksetzen. */
.karte.hm-karte { height: 200px; margin: 0 var(--gutter) var(--s2); }
/* ── Tipico: ClutchCalls Kleid ──────────────────────────────
Nach der Figma-Vorlage „ClutchCall – Sports Betting App UI Kit (Dark
Theme)" (lQTevjrY3eiejh1hMxfw3F, 25 Bildschirme, abgenommen am
31.08.2026). Die Datei führt KEINE Variablen — die Werte hier sind
deshalb an ihren Bildschirmen gemessen, nicht geschätzt:
Grund #18181B der Bildschirm
Fläche #292828 jede Karte, die Tab-Leiste, das Blatt
Fläche 2 #2D2D2D Pillen und Felder AUF einer Karte
Feldrand #656464 die Linie um ein Eingabefeld
Akzent #5FAE53 Quote, Fortschritt, jeder Knopf, der aktive Tab
Schrift #F9FAFB Titel
Schrift 2 #A4A4A4 Beschriftungen
Schrift 3 #898989 Nebensachen
Spur #D9D9D9 die helle Bahn hinter dem Fortschritt
Ebenso gemessen: Seitenrand 20, Kartenradius 20, Fortschrittsbalken 8
hoch, Tab-Leiste 80 hoch bei 10 Seitenrand, Hauptknopf 40 hoch als
volle Pille.
DIE APP IST IMMER DUNKEL, auch wenn das Portal hell steht. Die Vorlage
kennt keinen Hellmodus; eine halb aufgehellte Wett-App sähe schlechter
aus als gar keine. Dieselbe Entscheidung wie bei Amazon und der Bank,
nur andersherum.
ABWEICHUNGEN VON DER VORLAGE, alle mit Absicht:
* DER AKZENT IST GRÜN, NICHT TIPICO-ROT. Die Vorlage baut ihre ganze
Ordnung auf einer Farbe: Grün heißt „hier wird gehandelt" und „das
ist deine Seite". Das Markenrot an dieselbe Stelle zu setzen hieße,
die Vorlage bloß umzufärben — genau das, was bei Amazon und der
Bank aufgegeben wurde. Wer es anders will, ändert EINE Zeile:
`--tp-akzent`. Das Rot bleibt, wo die Marke sitzt: auf dem
App-Symbol des Home-Bildschirms.
* QUOTEN KENNT DIE VORLAGE NICHT. ClutchCall verfolgt fremde Wetten,
es nimmt keine an. Übernommen ist die Vergleichszeile der
Team-Statistik: zwei Pillen links und rechts, ein grüner Punkt an
der Seite, die heraussticht. Bei uns ist das die Seite, auf der man
selbst steht.
* KEIN DATUMSSTREIFEN. Die Vorlage wählt oben einen Spieltag; unsere
Wetten laufen Stunden, nicht Tage. An seiner Stelle steht die
Filterleiste nach Wettart — dieselbe Form, andere Frage.
* KEINE WAPPEN. Statt Vereinslogos trägt jede Seite das Symbol ihrer
Wettart in einer runden Scheibe.
* „Current/Target" heißt „Stand/Ziel", und die große Zahl in der
Kartenmitte ist nicht die Anstoßzeit, sondern die RESTZEIT: Sie
entscheidet, wie lange überhaupt noch gesetzt werden kann. */
:root[data-app="tipico"] {
color-scheme: dark;
--tp-akzent: #5FAE53;
/* Der Knopf unter dem Finger. Die Vorlage zeigt keinen gedrückten
Zustand — heller statt dunkler, weil auf #18181B ein abdunkelnder
Knopf im Grund verschwände. */
--tp-akzent-hell: #74C067;
--tp-spur: #D9D9D9;
--tp-feldrand: #656464;
--bg: #18181B;
--bg-elev: #292828;
--bg-elev-2: #2D2D2D;
--fill: #2D2D2D;
--fill-2: #313134;
--seg-pille: #3A3A3C;
--label: #F9FAFB;
--label-2: #A4A4A4;
--label-3: #898989;
--separator: rgba(255, 255, 255, .09);
/* Die Vorlage hat keine Glaskanten und keine Schatten: Flächen trennen
sich allein durch ihre Helligkeit. Beides deshalb abgeschaltet statt
nachgefärbt — ein Milchglaskopf über #18181B wäre wieder iOS. */
--glass-stroke: transparent;
--glass-highlight: transparent;
--bar: #292828;
--sheet: #292828;
--shadow: none;
--scrim: rgba(0, 0, 0, .6);
/* Die Systemfarben auf die eine Farbe der Vorlage gezogen. Das ist der
Hebel, mit dem alles Geerbte mitspricht: Jede Pille, jeder Haken und
jeder getönte Knopf des Portals wird hier grün, ohne dass ich sie
einzeln aufzählen muss.
--red bleibt eigenständig — eine verlorene Wette muss sich von einer
gewonnenen unterscheiden, und dafür hat die Vorlage keine Farbe. Der
Ton ist gegenüber iOS abgesenkt, sonst schriee er auf dem ruhigen
Grund der App. */
--green: #5FAE53; --blue: #5FAE53; --teal: #5FAE53; --indigo: #5FAE53;
--red: #E5484D; --pink: #E5484D;
--grau: #3A3A3C;
/* Radien der Vorlage: Karten 20, Felder und Pillen voll gerundet.
Zwischen beiden liegt nichts — die 12 und 22 aus iOS gibt es hier
nicht, und genau daran erkennt man die App wieder. */
--r-card: 20px; --r-box: 14px; --r-ctl: 14px;
--gutter: 20px;
}
/* ── Rahmen ─────────────────────────────────────────────────
Kopf und Statusleiste sind deckend im Grundton: Die Vorlage kennt kein
Milchglas, ihre Bildschirme sind eine durchgehende Fläche. Auch
`is-scrolled` muss mit — sonst käme die Glaskante beim Scrollen
zurück. */
[data-app="tipico"] .navbar,
[data-app="tipico"] .navbar.is-scrolled {
background: var(--bg);
-webkit-backdrop-filter: none; backdrop-filter: none;
border-bottom-color: transparent; box-shadow: none;
}
[data-app="tipico"] .statusbar { background: var(--bg); color: var(--label); }
/* Die Wortmarke. In der Vorlage steht CLUTCHCALL auf jedem Bildschirm
oben in der Mitte: fett, gesperrt, in Versalien. Hier trägt der große
Titel diese Form — auf dem ersten Bildschirm ist das die Marke, auf den
anderen der Name des Bereichs. */
[data-app="tipico"] .large-title { text-align: center; }
[data-app="tipico"] .large-title h1 {
font-size: 26px; font-weight: 800; line-height: 32px;
letter-spacing: .6px; text-transform: uppercase;
}
[data-app="tipico"] .large-title.lang h1 { font-size: 22px; line-height: 28px; }
[data-app="tipico"] .navbar .navbar-title {
font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
}
[data-app="tipico"] .large-title .sub { color: var(--label-2); }
/* Zurück-Knopf als leerer Kreis mit dünnem Rand — so steht er in der
Vorlage über jedem Detailbildschirm. Die graue Glasscheibe des Portals
fällt dafür weg; der Pfeil darin ist weiß, nicht in der Akzentfarbe.
(Die Beschriftung im span bleibt unangetastet — sie ist für
Vorlesewerkzeuge da und schon von der Grundregel versteckt.) */
[data-app="tipico"] .navbar-action.left {
background: transparent; border: 1px solid var(--tp-feldrand);
-webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
[data-app="tipico"] .navbar-action { color: var(--label); }
/* Tab-Leiste: dieselbe schwebende Kapsel wie überall, aber in der Farbe
der Vorlage und OHNE Pille hinter dem aktiven Tab. ClutchCall färbt
dort nur Symbol und Wort grün; eine Pille zusätzlich wäre eine
Auszeichnung zu viel. */
[data-app="tipico"] .tp-tabs {
background: var(--bar); box-shadow: none;
-webkit-backdrop-filter: none; backdrop-filter: none;
margin-left: 10px; margin-right: 10px;
width: calc(100% - 20px);
}
.tp-tab.an { color: var(--tp-akzent); }
[data-app="tipico"] .tp-tab.an { background: transparent; }
/* ── Filterleiste ───────────────────────────────────────────
Die Sportartenzeile der Vorlage, auf unsere Wettarten gestellt: eine
Karte, darin Pillen. Die aktive trägt einen grünen Rand statt einer
Füllung — gefüllt wäre sie ein Knopf, und gedrückt ist sie schon. */
.tp-filter {
display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none;
margin: 0 var(--gutter) var(--s4); padding: 10px;
border-radius: var(--r-card); background: var(--bg-elev);
}
.tp-filter::-webkit-scrollbar { display: none; }
.tp-chip {
flex: none; display: inline-flex; align-items: center; gap: 6px;
min-height: 42px; padding: 0 16px; border-radius: var(--r-pill);
border: 1px solid transparent; background: var(--fill);
color: var(--label-2); font-size: 14px; font-weight: 500;
text-decoration: none; white-space: nowrap;
}
.tp-chip.an {
background: transparent; border-color: var(--tp-akzent); color: var(--label);
}
.tp-chip .ic { color: var(--label-3); }
.tp-chip.an .ic { color: var(--tp-akzent); }
.tp-chip-zahl { color: var(--label-3); font-variant-numeric: tabular-nums; }
/* ── Guthaben ───────────────────────────────────────────────
In der Vorlage gibt es keine — sie verwaltet kein Geld. Die Zeile
bleibt trotzdem, weil ohne sie niemand weiß, ob der nächste Einsatz
überhaupt gedeckt ist; sie trägt nur das Kleid der Vorlage und führt
in die Bank-App, wo das Geld wirklich liegt. */
.tp-guthaben {
display: flex; align-items: center; gap: var(--s2);
margin: 0 var(--gutter) var(--s4); padding: 14px 16px;
border-radius: var(--r-card); background: var(--bg-elev);
color: var(--label); text-decoration: none;
}
.tp-g-k { font-size: 13px; color: var(--label-2); }
.tp-g-v {
font-size: 22px; font-weight: 700; letter-spacing: -.2px; margin-left: auto;
color: var(--tp-akzent); font-variant-numeric: tabular-nums;
}
.tp-g-bank { font-size: 12px; color: var(--label-3); }
.tp-guthaben .chev { color: var(--label-3); }
/* ── Die Wettkarte ──────────────────────────────────────────
Der Spielpaarung der Vorlage nachgebaut: Liga oben in der Mitte, links
und rechts die Parteien, dazwischen die große Zahl. Bei uns steht dort
die Restzeit — die einzige Zahl, die sich von selbst bewegt und über
die es hier zu entscheiden gibt. */
.tp-spiel {
background: var(--bg-elev); border-radius: var(--r-card);
margin: 0 var(--gutter) var(--s3); padding: var(--s4);
}
.tp-oben { display: block; text-decoration: none; color: inherit; }
.tp-oben:active { opacity: .7; }
/* Kopfzeile: Wettart mittig, Zustandsmarke rechts. Der Chevron sitzt
hinter der Marke — er gehört zum Link, nicht zur Art. */
.tp-kopf { display: flex; align-items: center; gap: var(--s2); min-height: 22px; }
.tp-art {
display: inline-flex; align-items: center; gap: 6px;
margin: 0 auto; padding-left: 34px;
font-size: 13px; font-weight: 600; color: var(--label);
letter-spacing: .2px;
}
.tp-kopf-rechts { display: flex; align-items: center; gap: 6px; }
.tp-kopf-rechts .chev { color: var(--label-3); }
/* Die Paarung. Drei Spalten, die äußeren gleich breit — sonst rückt die
große Zahl aus der Mitte, sobald ein Seitenname länger ist. */
.tp-duell {
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
gap: var(--s2); margin-top: var(--s4);
}
.tp-seite { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.tp-seite-sym {
width: 46px; height: 46px; border-radius: 50%; flex: none;
display: flex; align-items: center; justify-content: center;
background: var(--fill); color: var(--label-2);
}
.tp-seite-name {
font-size: 12px; color: var(--label-2); text-align: center; line-height: 1.25;
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tp-seite.meine .tp-seite-sym { background: rgba(95, 174, 83, .18); color: var(--tp-akzent); }
.tp-seite.meine .tp-seite-name { color: var(--tp-akzent); }
.tp-mitte { text-align: center; }
.tp-mitte-zeit {
font-size: 28px; font-weight: 700; letter-spacing: -.4px; line-height: 1.1;
font-variant-numeric: tabular-nums;
}
/* Die große Zahl bleibt WEISS, auch wenn sie als Uhr läuft — in der
Vorlage ist der Spielstand weiß und grün nur das, was man antippen
kann. Ohne diese Zeile färbte `.tp-uhr` sie mit ein, und die Karte
hätte drei grüne Stellen übereinander. */
.tp-mitte-zeit.tp-uhr { color: var(--label); }
.tp-mitte-zeit.aus, .tp-mitte-zeit.tp-uhr.aus { color: var(--label-3); }
/* Das Monogramm der Duell-Seiten — zwei Buchstaben statt eines Wappens. */
.tp-seite-mono { font-size: 17px; font-weight: 700; letter-spacing: -.2px; color: var(--label); }
/* Die unterlegene Seite einer entschiedenen Wette tritt zurück, damit der
Pokal daneben etwas heißt. */
.tp-seite.blass { opacity: .45; }
.tp-mitte-k { margin-top: 3px; font-size: 12px; color: var(--label-3); }
/* Titel und Zahlen unter der Paarung. In der Vorlage steht dort der
Spielort; hier die Frage, um die es geht, und was im Topf liegt. */
.tp-titel {
display: block; margin-top: var(--s4); text-align: center;
font-size: 16px; font-weight: 600; line-height: 1.3;
}
.tp-zahlen {
display: flex; align-items: center; justify-content: center; gap: 6px;
margin-top: 6px; font-size: 13px; color: var(--label-2);
}
.tp-zahlen b { color: var(--label); font-variant-numeric: tabular-nums; }
/* Grün steht am Topf und nirgends sonst in dieser Zeile: Er ist das, was
zu holen ist — der Einsatz ist nur der Preis dafür. */
.tp-zahlen b.topf { color: var(--tp-akzent); }
/* Die laufende Uhr in Listenzeilen. Ziffern gleicher Breite, sonst
zappelt die Zeile im Sekundentakt. */
.tp-uhr { font-weight: 600; color: var(--tp-akzent); font-variant-numeric: tabular-nums; }
.tp-uhr.aus { color: var(--label-3); }
/* „LIVE" wie in einer Wett-App: kleiner Punkt, der langsam pulst. */
.tp-live {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px; border-radius: var(--r-pill);
background: rgba(95, 174, 83, .16);
color: var(--tp-akzent); font-size: 11px; font-weight: 700; letter-spacing: .4px;
}
.tp-live::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--tp-akzent); animation: tp-puls 2s ease-in-out infinite;
}
@keyframes tp-puls { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .tp-live::before { animation: none; } }
/* ── Fortschritt ────────────────────────────────────────────
Eins zu eins die Verlaufskarte der Vorlage („Current : 149 / Target :
200"): Beschriftungen links und rechts, darunter ein 8 px hoher Balken
auf HELLER Spur. Die helle Spur ist kein Versehen — sie ist die einzige
helle Fläche der ganzen App und zieht den Blick genau dahin, wo sich
etwas bewegt. */
.tp-fortschritt { margin-top: var(--s4); }
.tp-fort-kopf {
display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
margin-bottom: 8px; font-size: 13px; color: var(--label);
}
.tp-fort-kopf b { font-weight: 600; font-variant-numeric: tabular-nums; }
.tp-balken { height: 8px; border-radius: var(--r-pill); background: var(--tp-spur); overflow: hidden; }
.tp-balken span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--tp-akzent); }
/* ── Die Verlaufskarte ──────────────────────────────────────
„Active Bets" der Vorlage: Sorte und Zustand oben, darunter worum es
geht, darunter der Fortschritt. Sie steht unter „Meine Wetten" und
unter „Ergebnisse" — beides sind Listen von Wetten, an denen nichts
mehr zu bedienen ist, und deshalb ist die ganze Karte EIN Link.
Anders als die Wettkarte vorn ist sie linksbündig: Dort steht eine
Paarung, die Mitte braucht; hier stehen Sätze, und die liest man von
links. */
.tp-lauf { display: block; text-decoration: none; color: inherit; }
.tp-lauf:active { opacity: .7; }
.tp-lauf-titel {
display: block; margin-top: var(--s3);
font-size: 15px; font-weight: 600; line-height: 1.35;
}
.tp-lauf-seite { display: block; margin-top: 3px; font-size: 13px; color: var(--label-2); }
/* Eigener Name statt des naheliegenden `.mitte`: Das ist im Portal
längst die Vollbild-Zentrierung der Anmeldeseite — mit ihr wurde aus
der Titelzeile ein 84 px hoher Kasten. */
.tp-lauf-titel.tp-zentriert, .tp-lauf-seite.tp-zentriert { text-align: center; }
.tp-lauf-fuss {
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--s3); flex-wrap: wrap; margin-top: var(--s4);
font-size: 13px; color: var(--label-2);
}
.tp-lauf-zeile { display: inline-flex; align-items: baseline; gap: 6px; }
.tp-lauf-zeile b { font-weight: 600; color: var(--label); font-variant-numeric: tabular-nums; }
.tp-plus { color: var(--tp-akzent); }
/* Die Bilanz über „Meine Wetten": drei Zahlen nebeneinander in einer
Karte — die Form, in der die Vorlage einen Spielstand nach Vierteln
zeigt. */
.tp-bilanz {
display: flex; margin: 0 var(--gutter) var(--s4); padding: var(--s4) var(--s3);
border-radius: var(--r-card); background: var(--bg-elev);
}
.tp-bilanz-sp { flex: 1 1 0; min-width: 0; text-align: center; }
.tp-bilanz-sp + .tp-bilanz-sp { border-left: 1px solid var(--separator); }
.tp-bilanz-v {
font-size: 17px; font-weight: 700; letter-spacing: -.2px;
font-variant-numeric: tabular-nums;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tp-bilanz-k { margin-top: 3px; font-size: 12px; color: var(--label-2); }
/* Der Satz unter dem Wettart-Feld erklärt die gewählte Art. Er gehört
ins Feldgefüge und nicht in eine Fußnote am Formularende — dort läse
ihn niemand, der gerade wählt. */
.tp-hinweis { margin: 8px 4px 0; font-size: 12px; color: var(--label-3); line-height: 1.4; }
/* ── Quotenknöpfe ───────────────────────────────────────────
Das Bedienelement der App, gebaut aus der Vergleichszeile der Vorlage:
zwei Pillen nebeneinander, die eigene Seite mit grünem Rand und grünem
Punkt. Sie öffnen den Wettschein — gesetzt wird erst dort. */
.tp-quoten { display: flex; gap: var(--s2); margin-top: var(--s4); }
.tp-quote {
flex: 1 1 0; min-width: 0; position: relative;
display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
min-height: 52px; padding: 8px 16px;
border: 1px solid transparent; border-radius: var(--r-pill);
background: var(--fill); color: var(--label); text-align: left;
}
.tp-quote:not(.zu):not(.meine):active { background: var(--fill-2); }
.tp-quote.meine { background: transparent; border-color: var(--tp-akzent); }
.tp-quote.zu { opacity: .5; }
.tp-q-text { min-width: 0; }
.tp-q-seite {
display: block; font-size: 13px; font-weight: 500; line-height: 1.2;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tp-q-zahl { display: block; margin-top: 2px; font-size: 11px; color: var(--label-3); }
.tp-q-wert {
flex: none; font-size: 18px; font-weight: 700; letter-spacing: -.2px;
font-variant-numeric: tabular-nums;
}
.tp-quote.meine .tp-q-wert { color: var(--tp-akzent); }
/* Der grüne Punkt der Vorlage: dort am besseren Wert, hier an der Seite,
auf der man steht. Er steht direkt VOR dem Wert, wie in der
Vergleichszeile der Team-Statistik. */
.tp-q-punkt {
flex: none; width: 8px; height: 8px; margin-left: auto;
border-radius: 50%; background: var(--tp-akzent);
}
.tp-grund { margin-top: var(--s3); font-size: 12px; color: var(--label-3); text-align: center; }
/* ── Die einzelne Wette ─────────────────────────────────────
Der Kopf des Detailbildschirms, nach der Spielansicht der Vorlage: eine
Karte, in der die Paarung groß steht, darunter der Topf mit Symbol —
an der Stelle, an der die Vorlage den Spielort nennt. */
.tp-kanzel {
margin: 0 var(--gutter) var(--s4); padding: var(--s4);
border-radius: var(--r-card); background: var(--bg-elev);
}
.tp-kanzel-titel { font-size: 17px; font-weight: 600; text-align: center; line-height: 1.3; }
.tp-kanzel-marken {
display: flex; align-items: center; justify-content: center; gap: 6px;
flex-wrap: wrap; margin-top: var(--s3);
}
.tp-kanzel-topf {
display: flex; align-items: center; justify-content: center; gap: 6px;
margin-top: var(--s4); font-size: 15px; font-weight: 600; color: var(--tp-akzent);
}
.tp-kanzel-topf .num { font-variant-numeric: tabular-nums; }
/* ── Wettschein ─────────────────────────────────────────────
Das Blatt zwischen Quotenknopf und Abbuchung. */
.tp-schein-zeile {
display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
padding: 9px 0; font-size: 14px; color: var(--label-2);
}
.tp-schein-zeile b { font-size: 16px; color: var(--label); text-align: right; }
.tp-schein-zeile.gross {
border-top: 1px solid var(--separator); margin-top: 4px; padding-top: 12px;
}
.tp-schein-zeile.gross b { font-size: 22px; font-weight: 700; color: var(--tp-akzent); }
/* ── Formular ───────────────────────────────────────────────
„Add Bet" der Vorlage: eine Karte, darin Beschriftung über Feld, jedes
Feld eine voll gerundete Pille mit dünnem Rand. Die Beschriftung endet
auf einem Doppelpunkt — auch das steht so in der Vorlage. */
.tp-form { margin: 0 var(--gutter) var(--s4); padding: var(--s4); border-radius: var(--r-card); background: var(--bg-elev); }
.tp-label { display: block; margin: var(--s4) 0 8px; font-size: 14px; font-weight: 500; color: var(--label); }
.tp-form > .tp-label:first-child { margin-top: 0; }
.tp-feld {
display: flex; align-items: center; gap: var(--s2);
width: 100%; min-height: 48px; padding: 0 18px;
border: 1px solid var(--tp-feldrand); border-radius: var(--r-pill);
background: var(--bg); color: var(--label); font: inherit; font-size: 15px;
-webkit-appearance: none; appearance: none;
}
.tp-feld::placeholder { color: var(--label-3); }
.tp-feld:focus { outline: none; border-color: var(--tp-akzent); }
/* Auswahlfeld: dieselbe Pille, rechts der Chevron der Vorlage. Als Knopf
gebaut, weil dahinter eine Liste im Blatt aufgeht — ein