/* ============================================================
THE M CLUB — Theme-Overlay für info.the-m.io
Version 1.0 · 22.08.2026
ADDITIV. Diese Datei ersetzt nichts, sie überschreibt nur.
Einbinden NACH dem bestehenden Stylesheet:
Rückgängig machen = diese eine Zeile entfernen. An Chat-,
Login-, Push- oder Call-Logik wird nichts angefasst.
Zusätzlich in index.html zu tauschen (Google-Fonts-Zeile):
und das Theme-Meta:
============================================================ */
:root{
/* ---- Grundflächen: warm gebiaste Neutrale statt reinem Grau ---- */
--bg: #050404; /* war #000000 */
--bg2: #0A0808; /* war #0a0a0a */
--bg3: #100D0D; /* war #111111 */
--card: #0E0C0C; /* war #0d0d0d */
--card2: #171313; /* war #181818 */
--border: #1B1717; /* war #1e1e1e */
--border2: #2E2726; /* war #2a2a2a */
--border3: #3A3230; /* war #333 */
/* ---- Text: dreistufig, Kontrast bleibt AA-tauglich ---- */
--text: #D9DDE2; /* war #ffffff — Platin, aus dem Logo-Chrom */
--text2: #ADA6A4; /* war #e0e0e0 */
--text3: #8B8280; /* war #b0b0b0 — 5,4:1 auf --bg, AA ✓ */
/* ---- Markenrot, bewusst geteilt ------------------------------
--red ist eine FLÄCHE (Linien, Balken, Badges, Füllungen)
--red3 ist die TEXTFARBE
#BB271A auf Schwarz schafft nur 3,4:1 und fällt damit bei
kleinem Text durch WCAG AA. #FF453A schafft 6,2:1.
Genau deshalb sind es zwei Werte und nicht einer. ---- */
--red: #BB271A; /* war #cc0000 */
--red2: #D62E1F; /* war #e00000 */
--red3: #FF453A; /* war #ff1a1a */
--red-dim: rgba(187,39,26,0.12);
/* ---- Sekundärakzente ---- */
--gold: #C9A227;
--gold-dim: rgba(201,162,39,0.12);
--pink: #C0708C;
--silver: #D9DDE2;
--green: #2E7A50;
--green-dim: rgba(100,168,112,0.15);
--green-text: #64A870;
/* ---- Typografie ----------------------------------------------
Jost steht in der Futura-Linie — dieselbe Schrift wie auf
www.the-m.io. Sie trägt das weite Tracking der Wortmarke
deutlich besser als Raleway/Montserrat. ---- */
--font-display: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
--font-body: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
--font-prose: 'Newsreader', 'Iowan Old Style', Georgia, serif;
--font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
/* ---- Radien: 0 --------------------------------------------------
Die Bildmarke besteht aus scharfen Dreiecken, die Webseite
hat durchgehend rechte Winkel. Das ist der sichtbarste Teil
des Reskins.
Zu hart? Dann hier 3px eintragen — sonst nichts ändern. ---- */
--r: 0px;
--r2: 0px;
--radius: 0px;
}
/* ============================================================
Gezielte Feinheiten — alles darüber hinaus erbt automatisch
============================================================ */
/* Grundschrift eine Spur luftiger; Jost läuft enger als Montserrat */
html, body{ letter-spacing:.015em; }
/* Kopfzeile: hauchdünne rote Kante wie die Navigation der Webseite */
.topbar{ position:relative; background:rgba(5,4,4,.82); backdrop-filter:blur(14px) saturate(120%); -webkit-backdrop-filter:blur(14px) saturate(120%); }
.topbar::after{
content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
background:linear-gradient(90deg, var(--red) 0%, rgba(187,39,26,0) 62%);
pointer-events:none;
}
.topbar h1{ letter-spacing:.28em; font-weight:300; }
/* Nachrichtentext im Serif der Webseite — dort ist Newsreader die
Stimme für alles Geschriebene. Chat-Nachrichten sind genau das.
Nicht gewollt? Diesen Block löschen, sonst nichts. */
.bubble .body-text{
font-family:var(--font-prose);
font-size:14.5px;
line-height:1.62;
color:var(--text2);
}
/* Absenderzeile und Zeitstempel als Mono-Mikrolabels */
.bubble .sender{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.22em; color:var(--red3); }
.bubble .meta{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; }
/* Karten bekommen den Lichtsaum der Webseiten-Kacheln */
.auth-card, .sheet{ position:relative; }
.auth-card::after{
content:''; position:absolute; top:0; left:0; right:0; height:1px;
background:linear-gradient(90deg,transparent,rgba(217,221,226,.22),transparent);
pointer-events:none;
}
/* Buttons: Füllung fährt von unten hoch statt einfach umzufärben */
.btn-primary{ position:relative; overflow:hidden; letter-spacing:.18em; text-transform:uppercase; font-weight:400; }
.btn-primary::before{
content:''; position:absolute; inset:0; background:var(--red2);
transform:scaleY(0); transform-origin:50% 100%; z-index:0;
transition:transform .5s cubic-bezier(0.16,1,0.30,1);
}
.btn-primary:hover::before{ transform:scaleY(1); }
.btn-primary > *{ position:relative; z-index:1; }
.btn-secondary{ letter-spacing:.16em; text-transform:uppercase; font-weight:400; }
/* Zahlen überall tabellarisch — Listen und Zähler springen sonst */
.msg-badge, .tab-badge, .ticks, .bubble .meta{ font-variant-numeric:tabular-nums; }
/* Tastaturfokus sichtbar machen (fehlte bisher) */
:focus-visible{ outline:1px solid var(--red3); outline-offset:3px; }
/* Ruhebedürfnis respektieren */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:.001ms !important; animation-iteration-count:1 !important;
transition-duration:.001ms !important;
}
}
/* ============================================================
Hartcodierte Radien nachziehen
Zehn Stellen im Stylesheet setzen Radien direkt statt über die
Tokens. Drei davon sind Flächen und werden scharf; die anderen
bleiben rund, weil rund dort Funktion ist und keine Deko:
.call-btn runde Anruf-Tasten (Konvention)
.slider Schalter
.msg-badge u.a. Zähler-Pillen
============================================================ */
.btn-secondary{ border-radius:0; }
.chats-toolbar button{ border-radius:0; }
.thread-input-row input{ border-radius:0; }
/* Eingabefelder: Fokus in der Textfarbe, nicht in der Flächenfarbe */
input:focus, select:focus, textarea:focus{ border-color:var(--red3); }