/* =============================================================================
* Neurohub Family Brand Tokens
* Canonical source — copy to each site's /assets/brand-tokens.css
* Last updated: 2026-05-14
*
* Architecture:
* - Shared shell (typography, surfaces, borders, shadows, components)
* - Per-site --accent + tinted background, set in each site's own styles.css
* - Peach (#FFB56B) is the universal secondary across all four sites
*
* Load order: brand-tokens.css FIRST, then site's styles.css
* Existing CSS variables in each site's styles.css remain authoritative
* for --accent and --bg — this file only fills the gaps for the shared shell
* and adds component classes (.brand-*).
* ===========================================================================*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
:root {
/* ---- Shared family palette (identical across all four sites) ---- */
/* Refreshed 2026-05-14 (round 2): much lighter ink palette to remove the
"everything looks black/dark grey" feel. Body copy reads as warm taupe,
headings get just enough contrast to lead the eye. */
--ink: #6B5E4D; /* warm taupe — heading / body text */
--ink-2: #9C8F7C; /* light taupe — secondary labels */
--muted-fam: #C9BFB0; /* very light taupe — captions, dividers */
--card-fam: #FFFFFF;
--border-fam: #EAE2D2;
--border-soft-fam: #F2EBDC;
--accent-secondary: #FFB56B;
--accent-secondary-soft: #FFF3E8;
/* ---- Typography ---- */
--font-fam: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
/* ---- Radii ---- */
--r-sm: 10px;
--r-md: 12px;
--r-lg: 16px;
--r-xl: 22px;
--r-pill: 999px;
/* ---- Shadows ---- */
--sh-soft: 0 1px 2px rgba(47, 42, 37, .04), 0 8px 24px rgba(47, 42, 37, .06);
--sh-lg: 0 4px 10px rgba(47, 42, 37, .06), 0 24px 60px rgba(47, 42, 37, .10);
/* ---- Breakpoint constants (read by JS if needed) ---- */
--bp-sm: 480px;
--bp-md: 768px;
--bp-lg: 1024px;
--bp-xl: 1280px;
/* ---- Per-site fallbacks (overridden in each site's styles.css) ---- */
--accent-deep: color-mix(in oklab, var(--accent, #D01C1F) 78%, #000 22%);
--accent-soft: color-mix(in oklab, var(--accent, #D01C1F) 12%, #fff 88%);
--accent-contrast: #FFFFFF;
}
/* =============================================================================
* Refined family shell (opt-in via body.brand-refined)
* ===========================================================================*/
body.brand-refined {
font-family: var(--font-fam);
color: var(--ink);
background: var(--bg, #FBF8F2);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Brand-refined softens default text everywhere */
body.brand-refined,
body.brand-refined p,
body.brand-refined span,
body.brand-refined li,
body.brand-refined label { color: var(--ink); }
body.brand-refined h1,
body.brand-refined h2,
body.brand-refined h3,
body.brand-refined h4 { color: var(--ink); font-weight: 600; }
body.brand-refined .brand-app-frame {
min-height: 100dvh;
display: flex;
flex-direction: column;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* =============================================================================
* Viewport-Scaling: content centers vertically on tall screens, padding grows
* proportionally. Prevents the "content stuck at top on big monitors" effect.
*
* Chain: body → .main-content → .home-page must ALL flex-fill the viewport
* so .home-page's justify-content: center actually has space to work with.
* ===========================================================================*/
/* 1. Body fills viewport — only for logged-in app pages.
Login pages (.login-public) flow naturally so short viewports don't
force scroll. */
body.brand-refined.app-root {
min-height: 100dvh !important;
display: flex !important;
flex-direction: column !important;
}
/* Login pages: Flex-column Body damit Panel flex-grows und Footer am Ende sitzt */
body.brand-refined.login-public {
min-height: 100dvh;
display: flex;
flex-direction: column;
overflow-x: hidden;
}
/* 2. Main-content (the inner wrapper in kognitives/sakkade) flex-fills.
:not(.public-active) — auf der Stones-Loginseite trägt #game-container
die Klasse .main-content und ist via inline display:none versteckt;
ohne die Einschränkung würde display:flex !important es sichtbar machen
und eine zweite leere Viewport-Höhe unter der Loginseite erzeugen. */
body.brand-refined:not(.public-active) .main-content {
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
min-height: 0;
}
/* 3. Home-page section flex-fills AND centers content vertically.
Auf Mobile (max-width: 600px) wird flex-start verwendet, damit der Inhalt
ohne Scrollen oben sichtbar startet. Sonst immer zentriert. */
body.brand-refined .home-page:not(.is-hidden) {
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column;
justify-content: center !important;
align-items: center;
padding-block: clamp(20px, 4vh, 80px) !important;
gap: clamp(18px, 3vh, 40px);
width: 100%;
}
/* Stones #page gleich zentrieren */
body.brand-refined #page:not(.game-active) {
justify-content: center !important;
}
/* Auf Mobile: flex-start so dass alles ohne Scroll oben startet */
@media (max-width: 600px) {
body.brand-refined .home-page,
body.brand-refined #page:not(.game-active) {
justify-content: flex-start !important;
}
}
/* =============================================================================
* Big-screen tile scaling: tiles grow with viewport but cap at a comfortable
* size. Grid centers as a unit. Typography scales too.
* ===========================================================================*/
/* Medium-large desktops: tiles + headers scale up moderately */
@media (min-width: 1200px) {
body.brand-refined .home-page {
gap: clamp(28px, 4vh, 56px);
}
body.brand-refined .home-header .home-title,
body.brand-refined .home-title {
font-size: clamp(32px, 3.4vw, 52px) !important;
}
/* 3-col tile grid: each cell 200-320px, centered as a group */
body.brand-refined .home-grid {
grid-template-columns: repeat(3, minmax(0, 320px)) !important;
gap: clamp(16px, 1.6vw, 24px) !important;
justify-content: center !important;
max-width: none !important;
margin-inline: auto !important;
width: auto !important;
}
body.brand-refined .home-tile {
min-height: clamp(180px, 17vw, 260px);
padding: clamp(24px, 2.2vw, 36px);
}
body.brand-refined .home-tile .home-icon {
width: clamp(64px, 5vw, 88px);
height: clamp(64px, 5vw, 88px);
padding: clamp(14px, 1.2vw, 20px);
}
body.brand-refined .home-tile--compact .home-icon {
width: clamp(28px, 2vw, 36px);
height: clamp(28px, 2vw, 36px);
padding: clamp(5px, 0.4vw, 7px);
}
body.brand-refined .home-tile .home-label {
font-size: clamp(15px, 1.05vw, 18px);
}
body.brand-refined .home-tile--compact .home-label {
font-size: clamp(13px, 0.9vw, 15px);
}
/* Pill-row stays narrower so it stays nicely below the grid */
body.brand-refined .home-toggle-row {
gap: clamp(10px, 1vw, 16px) !important;
max-width: min(1100px, 90%);
}
/* Header area also grows */
body.brand-refined .home-header {
padding: 8px clamp(8px, 1vw, 16px);
}
}
/* =============================================================================
* SHORT VIEWPORT compaction (max-height: 880px) — typical laptops at
* 1180×820, 1280×720, 1366×768 etc. Compresses padding, font-sizes, gaps
* so the login + Neurohub-Sidebar fits without scrolling.
* ===========================================================================*/
@media (max-height: 880px) {
body.brand-refined.login-public {
font-size: 14px;
}
/* Login page wrapper — tighter top/bottom padding */
body.brand-refined.login-public .home-page,
body.brand-refined.login-public main.page,
body.brand-refined.login-public .login-shell,
body.brand-refined.login-public .public-login-page {
padding-block: clamp(12px, 2vh, 24px) !important;
gap: clamp(10px, 2vh, 20px) !important;
}
/* Headings compact */
body.brand-refined.login-public h1,
body.brand-refined.login-public h2,
body.brand-refined.login-public .public-login-page h1,
body.brand-refined.login-public .title {
font-size: clamp(20px, 3vw, 28px) !important;
margin-bottom: clamp(8px, 1vh, 14px) !important;
line-height: 1.15;
}
/* Form rows compact */
body.brand-refined.login-public form,
body.brand-refined.login-public .login-form {
gap: clamp(8px, 1.5vh, 14px);
}
body.brand-refined.login-public input,
body.brand-refined.login-public select,
body.brand-refined.login-public .brand-input {
padding: clamp(8px, 1.2vh, 11px) 12px !important;
min-height: 40px !important;
}
body.brand-refined.login-public label,
body.brand-refined.login-public .brand-field {
margin-bottom: 4px !important;
}
/* Buttons compact */
body.brand-refined.login-public .brand-btn-primary,
body.brand-refined.login-public .brand-btn-secondary,
body.brand-refined.login-public button[type="submit"] {
padding: 10px 18px !important;
min-height: 40px !important;
}
body.brand-refined.login-public .brand-oauth-btn {
min-height: 38px !important;
padding: 8px 12px !important;
}
/* Public platform grid — tighter cards */
body.brand-refined.login-public .public-platform-grid {
gap: 10px;
}
body.brand-refined.login-public .public-platform-card {
padding: 12px 14px !important;
}
/* Divider tighter */
body.brand-refined.login-public .divider {
margin: clamp(10px, 1.5vh, 16px) 0 !important;
}
/* Neurohub-Link in sidebar always reachable */
body.brand-refined.login-public .sidebar,
body.brand-refined.login-public aside.sidebar {
padding: 16px 16px 16px !important;
}
body.brand-refined.login-public .neurohub-link,
body.brand-refined.login-public .sidebar__footer {
padding-top: 8px !important;
}
/* Stones login (.login-panel) */
body.brand-refined.login-public .login-panel {
padding: clamp(16px, 2.5vh, 28px) clamp(16px, 3vw, 32px) !important;
}
body.brand-refined.login-public .menu-content {
padding-top: clamp(8px, 1.5vh, 16px) !important;
}
}
/* Very short viewports (<720px tall) — even tighter */
@media (max-height: 720px) {
body.brand-refined.login-public {
font-size: 13.5px;
}
body.brand-refined.login-public .pane-footer,
body.brand-refined.login-public .sidebar__hint {
display: none;
}
}
/* =============================================================================
* Login Mockup-Style für KT / ST / SO Live-Sites
* Full-viewport split: helle Sidebar links + Form-Pane rechts.
* Kein outer Card-Frame mehr — die Sidebar selbst ist der "Card".
* ===========================================================================*/
/* Outer-Wrapper resetten — keine Höhen/Padding-Constraints */
body.brand-refined.login-public .login-shell {
display: block !important;
max-width: none !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: var(--bg) !important;
}
/* Brand-Logo (z. B. Stones wall.png) ohne Extra-Rahmen darstellen —
die Logo-Grafik bringt ihren eigenen Rahmen mit.
flex: 0 0 auto — verhindert, dass ein geerbtes flex-basis (z. B. 52px)
die Logo-Breite verzerrt; width/height (aus der 900px-Regel) gewinnt. */
body.brand-refined.login-public .menu-logo {
border: none !important;
background: transparent !important;
padding: 0 !important;
box-shadow: none !important;
display: block !important;
object-fit: contain !important;
border-radius: 8px !important;
flex: 0 0 auto !important;
}
/* Stones-spezifisches Outer: #page mit auth-active */
body.brand-refined.login-public #page.auth-active {
padding: 0 !important;
min-height: 100dvh !important;
display: block !important;
align-items: stretch !important;
justify-content: flex-start !important;
}
/* Login-Panel: KEIN Card-Frame, sondern echtes Split-Layout —
füllt das ganze Viewport, kein 1400px-Constraint mehr */
body.brand-refined.login-public .login-panel {
display: flex !important;
flex-direction: column !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
min-height: auto !important; /* Body Flex-Chain handhabt Höhe */
flex: 1 1 auto; /* Panel flex-grows um Footer Platz zu lassen */
overflow: visible !important;
}
/* Login-Shell auch volle Breite, flex-grows im Flex-Body */
body.brand-refined.login-public .login-shell {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
background: var(--bg) !important;
min-height: auto !important;
flex: 1 1 auto; /* Shell flex-grows um Footer Platz zu lassen */
align-items: stretch !important;
justify-content: stretch !important;
}
/* Stones: Sobald das Spiel läuft (body.game-active), die komplette
Login-Hülle (#page-Wrapper inkl. #public-shell) ausblenden. Ohne diese
Regel überschreiben die display:flex !important-Regeln von #page und
.login-shell das vom Spielstart gesetzte display:none — die Loginseite
bliebe als leerer 100dvh-Block über dem Spiel stehen.
game-active ist Stones-spezifisch; KT/ST besitzen die Klasse nicht. */
body.brand-refined.game-active #page,
body.brand-refined.game-active #public-shell,
body.brand-refined.game-active .login-shell {
display: none !important;
}
/* Ab 900px: Sidebar + Form als 2-Spalten-Grid */
@media (min-width: 900px) {
body.brand-refined.login-public .login-panel {
display: grid !important;
grid-template-columns: 320px 1fr !important;
grid-template-rows: 1fr !important; /* Eine Zeile, füllt die Panel-Höhe */
align-items: stretch !important;
height: 100dvh !important; /* Fixe Viewport-Höhe — Sidebar wächst nicht mit langem Inhalt */
min-height: 100dvh !important;
max-height: 100dvh !important;
flex: none !important;
overflow: hidden !important;
}
body.brand-refined.login-public .login-menu {
background: var(--card-fam) !important;
border-right: 1px solid var(--border-fam) !important;
padding: clamp(28px, 4vh, 48px) clamp(22px, 2.4vw, 32px) !important;
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
height: 100% !important; /* Grid-Cell füllen = volle Viewport-Höhe */
overflow-y: auto !important; /* Sidebar scrollt selbst, falls Inhalt sehr hoch */
box-sizing: border-box;
}
body.brand-refined.login-public .login-brand {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 28px;
}
body.brand-refined.login-public .menu-logo {
width: 36px; height: 36px; object-fit: contain;
}
body.brand-refined.login-public .menu-title {
font-size: 14.5px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.1px;
color: var(--ink);
}
body.brand-refined.login-public .menu-buttons {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
justify-content: flex-start !important;
align-items: stretch !important;
flex: 1 1 auto;
height: auto !important;
width: 100% !important;
position: static !important;
transform: none !important;
}
body.brand-refined.login-public .menu-toggle {
display: none !important;
}
/* Neurohub-Link an den unteren Sidebar-Rand drücken */
body.brand-refined.login-public .neurohub-site-link {
margin-top: auto !important;
}
body.brand-refined.login-public .menu-btn {
background: transparent !important;
border: none !important;
text-align: left !important;
padding: 11px 14px !important;
border-radius: 10px !important;
font-size: 13.5px !important;
font-weight: 500 !important;
color: var(--ink-2) !important;
letter-spacing: 0.02em !important;
text-transform: none !important;
width: 100%;
cursor: pointer;
}
body.brand-refined.login-public .menu-btn:hover {
background: var(--bg);
color: var(--ink);
}
body.brand-refined.login-public .menu-btn.is-active {
background: var(--accent-soft) !important;
color: var(--accent-deep) !important;
font-weight: 700 !important;
}
/* Neurohub-Familien-Button — prominenter CTA am unteren Sidebar-Rand */
body.brand-refined.login-public .neurohub-site-link {
margin-top: auto;
display: flex !important;
align-items: center;
gap: 12px;
padding: 14px 16px !important;
border: 1px solid color-mix(in oklab, #589F7E 42%, var(--border-fam)) !important;
border-radius: 14px !important;
background: linear-gradient(135deg, #EAF6F0 0%, #DCEEE5 100%) !important;
color: #2E6B51 !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 0.01em;
text-decoration: none;
box-shadow: 0 6px 16px color-mix(in oklab, #589F7E 20%, transparent) !important;
transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
body.brand-refined.login-public .neurohub-site-link:hover {
transform: translateY(-2px);
border-color: #589F7E !important;
box-shadow: 0 10px 24px color-mix(in oklab, #589F7E 32%, transparent) !important;
}
body.brand-refined.login-public .neurohub-site-link::after {
content: "\2192";
margin-left: auto;
font-size: 17px;
font-weight: 700;
color: #3F8068;
}
body.brand-refined.login-public .neurohub-site-link__logo {
width: 34px !important; height: 34px !important;
background: #ffffff !important;
border-radius: 9px !important;
padding: 3px !important;
object-fit: contain;
box-shadow: 0 2px 6px color-mix(in oklab, #589F7E 24%, transparent) !important;
flex: 0 0 auto;
}
body.brand-refined.login-public .menu-content {
padding: clamp(28px, 4vh, 64px) clamp(28px, 4vw, 88px) !important;
background: var(--bg) !important;
overflow-y: auto !important; /* Form-Pane scrollt intern bei langem Inhalt */
display: flex !important;
flex-direction: column !important;
justify-content: safe center !important; /* zentriert, kippt auf flex-start wenn Inhalt überläuft (kein Clipping) */
align-items: center !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
height: 100% !important; /* Grid-Cell füllen */
box-sizing: border-box;
}
/* .menu-section ist die Tab-Section. Login-Section: schmal (440px),
andere Sections (Mehr Erfahren, Spiele testen, Über mich): voll Breite */
body.brand-refined.login-public .menu-section {
width: 100% !important;
margin-inline: auto !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
body.brand-refined.login-public #section-login.is-active,
body.brand-refined.login-public #section-account.is-active {
max-width: 440px !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: center !important;
padding: 0 !important;
}
body.brand-refined.login-public .menu-section.is-active:not(#section-login):not(#section-account) {
max-width: none !important;
width: 100% !important;
padding: clamp(8px, 1.5vh, 16px) 0 !important;
margin-inline: 0 !important;
}
/* Inhalt der "Mehr Erfahren / Spiele testen / Über mich" Sections —
keine eigenen Card-Frames mehr, volle Breite nutzen */
body.brand-refined.login-public .public-explain,
body.brand-refined.login-public .menu-section .info-panel,
body.brand-refined.login-public .menu-section .aboutme-panel,
body.brand-refined.login-public .menu-section .testen-panel {
background: transparent !important;
border: none !important;
box-shadow: none !important;
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow-x: visible !important;
}
/* Info-Card: nicht die ganze Pane mit weisser Card überdecken, aber den
Inhalt schön lesbar in voller Breite */
body.brand-refined.login-public .menu-section .info-card,
body.brand-refined.login-public .menu-section .info-card--stacked {
background: transparent !important;
border: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
padding: 0 !important;
border-radius: 0 !important;
overflow: visible !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
max-height: none !important;
}
/* Page-Container innerhalb der Info-Card */
body.brand-refined.login-public .menu-section .page-container {
padding: 0 !important;
width: 100% !important;
max-width: none !important;
overflow: visible !important;
max-height: none !important;
height: auto !important;
}
/* Login-Form: KEINE inner Card mehr — transparent, kein Shadow */
body.brand-refined.login-public .login-form {
background: transparent !important;
box-shadow: none !important;
border: none !important;
padding: 0 !important;
max-width: 100% !important;
width: 100% !important;
border-radius: 0 !important;
}
body.brand-refined.login-public .login-form:focus-within {
box-shadow: none !important;
}
/* Login-Area soll KEINE extra weisse Card sein — direkt in der Pane sitzen */
body.brand-refined.login-public .login-area {
max-width: 420px;
margin-inline: auto;
background: transparent !important;
box-shadow: none !important;
border: none !important;
padding: 0 !important;
}
/* Kicker "Willkommen zurück" via CSS ::before vor dem Login-Title */
body.brand-refined.login-public .login-page-title::before {
content: "Willkommen zurück";
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent-deep, var(--accent));
margin-bottom: 10px;
}
body.brand-refined.login-public .login-page-title {
font-size: clamp(26px, 3vw, 34px);
font-weight: 600;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0 0 18px;
}
/* Subtitle nach dem Login-Title */
body.brand-refined.login-public .login-page-title::after {
/* Pro-Site-Untertitel via --nh-login-subtitle (in der jeweiligen styles.css :root). */
content: var(--nh-login-subtitle, "Trainieren Sie Aufmerksamkeit, Gedächtnis und Exekutivfunktionen.");
display: block;
font-size: 14.5px;
font-weight: 400;
line-height: 1.55;
color: var(--muted-fam);
margin-top: 8px;
text-transform: none;
letter-spacing: normal;
}
/* Login-Form Inputs auf brand-input-Look */
body.brand-refined.login-public .login-form input,
body.brand-refined.login-public input[type="text"],
body.brand-refined.login-public input[type="email"],
body.brand-refined.login-public input[type="password"] {
background: var(--card-fam) !important;
border: 1px solid var(--border-fam) !important;
border-radius: var(--r-md) !important;
padding: 12px 14px !important;
font-size: 14.5px !important;
color: var(--ink) !important;
min-height: 44px !important;
}
body.brand-refined.login-public .login-form input:focus {
border-color: var(--accent) !important;
box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent) !important;
outline: none !important;
}
body.brand-refined.login-public .login-form label {
font-size: 12.5px !important;
font-weight: 700 !important;
color: var(--ink-2) !important;
letter-spacing: 0.02em !important;
margin-bottom: 6px !important;
display: block;
}
body.brand-refined.login-public .login-divider {
display: flex; align-items: center; gap: 14px;
margin: 24px 0 14px;
color: var(--muted-fam); font-size: 12px;
}
body.brand-refined.login-public .login-divider::before,
body.brand-refined.login-public .login-divider::after {
content: ""; flex: 1; height: 1px; background: var(--border-fam);
}
body.brand-refined.login-public .login-btn--primary {
background: linear-gradient(135deg, var(--accent), var(--accent-deep)) !important;
color: #ffffff !important;
border: none !important;
box-shadow: 0 6px 14px color-mix(in oklab, var(--accent) 30%, transparent) !important;
}
body.brand-refined.login-public .login-btn--lightblue {
background: var(--card-fam) !important;
color: var(--ink) !important;
border: 1px solid var(--border-fam) !important;
}
body.brand-refined.login-public .login-btn {
border-radius: var(--r-md) !important;
padding: 12px 18px !important;
font-weight: 600 !important;
min-height: 44px !important;
}
/* Public-Platform-Grid + Explain auf der Loginseite ausblenden (passt nicht in
Mockup-Sidebar-Layout) */
body.brand-refined.login-public .public-platform-grid,
body.brand-refined.login-public .public-explain,
body.brand-refined.login-public .public-info-panel {
display: none !important;
}
/* Below 900px (Mobile/Tablet portrait) — Sidebar oben kompakt, Form unten */
}
@media (max-width: 899px) {
body.brand-refined.login-public .login-menu {
background: var(--card-fam) !important;
border-bottom: 1px solid var(--border-fam) !important;
padding: 18px 20px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
flex-wrap: wrap;
}
body.brand-refined.login-public .login-brand { margin-bottom: 0 !important; flex-shrink: 0; }
body.brand-refined.login-public .menu-buttons {
display: flex !important;
flex-direction: row !important;
gap: 4px !important;
flex-wrap: wrap;
}
body.brand-refined.login-public .neurohub-site-link {
margin-top: 0 !important;
padding-top: 0 !important;
border-top: none !important;
}
body.brand-refined.login-public .menu-content {
padding: 28px 22px !important;
background: var(--bg) !important;
min-height: auto;
}
}
@media (min-width: 900px) {
/* OAuth-Buttons als Text-Pills statt Icon-Quadrate (matches Mockup) */
body.brand-refined.login-public .login-actions--oauth {
display: flex !important;
gap: 12px !important;
flex-wrap: nowrap;
}
body.brand-refined.login-public .login-btn--oauth {
flex: 1 1 0;
min-width: 0;
white-space: nowrap !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
padding: 11px 16px !important;
min-height: 44px !important;
background: var(--card-fam) !important;
border: 1px solid var(--border-fam) !important;
border-radius: var(--r-md) !important;
font-family: var(--font-fam) !important;
font-size: 13.5px !important;
font-weight: 600 !important;
color: var(--ink-2) !important;
text-decoration: none !important;
width: auto !important;
height: auto !important;
}
body.brand-refined.login-public .login-btn--oauth:hover {
border-color: color-mix(in oklab, var(--accent) 30%, var(--border-fam)) !important;
background: var(--bg) !important;
}
body.brand-refined.login-public .login-btn--oauth .oauth-icon {
width: 18px;
height: 18px;
display: grid;
place-items: center;
flex-shrink: 0;
}
body.brand-refined.login-public .login-btn--oauth .oauth-icon svg {
width: 100%;
height: 100%;
}
/* Text via ::after — verwendet das aria-label-Attribut bzw. statischen Text */
body.brand-refined.login-public .login-btn--google::after {
content: "Mit Google";
}
body.brand-refined.login-public .login-btn--apple::after {
content: "Mit Apple";
}
}
/* Login-Legal-Footer (Lang-Switcher) sitzt jetzt INSIDE der Sidebar (login-menu)
am unteren Rand. Form-Pane geht voll durch bis Bottom. */
body.brand-refined.login-public .login-legal-footer {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
flex-wrap: wrap;
padding: 14px 12px 0 !important;
margin-top: 12px !important;
border-top: 1px solid var(--border-soft-fam) !important;
background: transparent !important;
font-size: 12px;
color: var(--ink-2);
flex: 0 0 auto;
min-height: 0;
}
body.brand-refined.login-public .login-legal-footer .login-legal-link {
background: transparent !important;
border: none !important;
color: var(--ink-2) !important;
font-size: 12.5px !important;
cursor: pointer;
padding: 4px 8px !important;
border-radius: 6px;
text-decoration: none;
}
body.brand-refined.login-public .login-legal-footer .login-legal-link:hover {
color: var(--accent-deep) !important;
background: var(--accent-soft) !important;
}
body.brand-refined.login-public .login-legal-footer .login-legal-separator {
color: var(--muted-fam);
user-select: none;
}
body.brand-refined.login-public .login-legal-footer .language-switcher {
display: inline-flex;
gap: 4px;
}
/* =============================================================================
* Stones-Login (SO): same sidebar-layout approach
* Stones nutzt #page > #public-shell > .login-panel mit menu-content innerhalb
* ===========================================================================*/
@media (min-width: 900px) {
body.brand-refined.login-public .login-shell {
max-width: none !important;
/* Flex-Chain (column) muss erhalten bleiben, damit .login-panel
vertikal volle Body-Höhe füllt und die Sidebar bis zum Boden reicht. */
}
}
/* =============================================================================
* Live Neurohub Home — Welcome-Hero + verbesserte product-overview-cards
* Wird auf das therapist-overview-Panel angewendet ohne Markup-Änderung
* ===========================================================================*/
body.brand-refined .panel.workspace-panel[data-tab-panel="therapist-overview"] {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
body.brand-refined .panel.workspace-panel[data-tab-panel="therapist-overview"] .panel-header {
padding: 0 4px 12px !important;
}
body.brand-refined .panel.workspace-panel[data-tab-panel="therapist-overview"] .panel-header h2 {
font-size: clamp(22px, 3vw, 30px);
font-weight: 600;
letter-spacing: -0.02em;
margin: 0;
color: var(--ink);
}
body.brand-refined .panel.workspace-panel[data-tab-panel="therapist-overview"] .panel-note {
font-size: 14px;
color: var(--muted-fam);
margin: 4px 0 0;
line-height: 1.5;
}
/* Product-overview-grid wird zur Card-Grid mit modernerem Look */
body.brand-refined .product-stats-grid.product-overview-grid {
display: grid !important;
gap: clamp(14px, 2vw, 22px) !important;
grid-template-columns: 1fr !important;
margin-top: 4px;
}
@media (min-width: 768px) {
body.brand-refined .product-stats-grid.product-overview-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (min-width: 1100px) {
body.brand-refined .product-stats-grid.product-overview-grid {
grid-template-columns: repeat(3, 1fr) !important;
}
}
body.brand-refined .product-overview-card {
background: var(--card-fam) !important;
border: 1px solid var(--border-fam) !important;
border-radius: var(--r-lg) !important;
padding: clamp(20px, 2.6vw, 28px) !important;
box-shadow: var(--sh-soft) !important;
position: relative;
overflow: hidden;
transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
display: flex !important;
flex-direction: column !important;
}
body.brand-refined .product-overview-card:hover {
transform: translateY(-3px);
box-shadow: var(--sh-lg) !important;
}
body.brand-refined .product-overview-card::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: var(--p-color, var(--accent));
}
body.brand-refined .product-overview-card--sakkade { --p-color: #173C56; --p-soft: #E6EEF6; }
body.brand-refined .product-overview-card--kognitives { --p-color: #D01C1F; --p-soft: #FCEDED; }
body.brand-refined .product-overview-card--stones { --p-color: #4B5563; --p-soft: #ECEEF1; }
body.brand-refined .product-overview-head {
display: flex !important;
align-items: center !important;
gap: 14px !important;
margin-bottom: 16px !important;
}
body.brand-refined .product-overview-logo {
width: 56px !important; height: 56px !important;
border-radius: 14px !important;
background: var(--p-soft, var(--accent-soft)) !important;
display: grid !important;
place-items: center !important;
overflow: hidden !important;
flex-shrink: 0;
}
body.brand-refined .product-overview-logo img {
width: 70% !important; height: 70% !important; object-fit: contain;
}
body.brand-refined .product-overview-title h3 {
margin: 0 !important;
font-size: 17px !important;
font-weight: 600 !important;
color: var(--ink) !important;
letter-spacing: -0.01em;
}
body.brand-refined .product-badge {
display: inline-block !important;
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: var(--p-color, var(--accent)) !important;
background: var(--p-soft, var(--accent-soft)) !important;
padding: 3px 10px !important;
border-radius: 999px !important;
margin-bottom: 6px;
}
body.brand-refined .product-overview-status {
display: flex !important;
justify-content: space-between !important;
align-items: baseline !important;
padding: 12px 14px !important;
background: var(--bg) !important;
border: 1px solid var(--border-fam) !important;
border-radius: var(--r-md) !important;
margin-bottom: 14px !important;
font-size: 12.5px !important;
}
body.brand-refined .product-overview-status span { color: var(--muted-fam); }
body.brand-refined .product-overview-status strong { color: var(--accent-deep); font-weight: 600; }
body.brand-refined .product-overview-status.is-muted strong { color: var(--muted-fam); }
body.brand-refined .metric-list {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
margin: 0 0 14px !important;
padding: 0 !important;
list-style: none;
}
body.brand-refined .metric-list > div {
background: var(--bg) !important;
border: 1px solid var(--border-fam) !important;
border-radius: var(--r-md) !important;
padding: 12px 14px !important;
}
body.brand-refined .metric-list dt {
font-size: 10.5px !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: var(--muted-fam) !important;
margin: 0 0 3px !important;
}
body.brand-refined .metric-list dd {
margin: 0 !important;
font-size: 14px !important;
font-weight: 600 !important;
color: var(--ink) !important;
}
body.brand-refined .metric-list dd small {
display: block;
font-size: 11px;
color: var(--muted-fam);
font-weight: 500;
margin-top: 2px;
}
body.brand-refined .metric-list .metric-highlight {
grid-column: span 2 !important;
background: var(--p-soft, var(--accent-soft)) !important;
border-color: color-mix(in oklab, var(--p-color, var(--accent)) 22%, transparent) !important;
}
body.brand-refined .metric-list .metric-highlight dt { color: var(--p-color, var(--accent)) !important; }
body.brand-refined .metric-list .metric-highlight dd { font-size: 24px !important; }
body.brand-refined .product-overview-email {
margin: 0 0 12px !important;
padding: 10px 14px !important;
background: var(--bg) !important;
border-radius: var(--r-md) !important;
font-size: 12px !important;
color: var(--ink-2) !important;
display: flex !important;
justify-content: space-between !important;
align-items: baseline !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
body.brand-refined .product-overview-email span { color: var(--muted-fam) !important; font-weight: 600 !important; }
body.brand-refined .product-overview-email strong { color: var(--ink) !important; font-weight: 600 !important; word-break: break-all; }
body.brand-refined .access-note {
margin: 12px 0 0 !important;
padding: 10px 12px !important;
background: #FFF3E8 !important;
border-left: 3px solid #FFB56B !important;
border-radius: 4px 8px 8px 4px !important;
font-size: 12px !important;
color: var(--ink-2) !important;
line-height: 1.5;
}
body.brand-refined .product-action-link {
display: inline-flex !important;
align-items: center;
gap: 6px;
padding: 10px 14px !important;
background: var(--p-color, var(--accent)) !important;
color: #fff !important;
border-radius: 999px !important;
font-size: 12.5px !important;
font-weight: 600 !important;
text-decoration: none !important;
margin-top: 6px;
}
body.brand-refined .empty-product-note {
padding: 14px !important;
background: var(--bg) !important;
border: 1px dashed var(--border-fam) !important;
border-radius: var(--r-md) !important;
color: var(--muted-fam) !important;
font-size: 13px !important;
text-align: center;
margin: 0 0 12px !important;
}
/* =============================================================================
* Welcome-Hero (Neurohub Therapist-Overview)
* ===========================================================================*/
body.brand-refined .welcome-hero {
display: grid;
grid-template-columns: 1fr;
gap: clamp(16px, 2vh, 24px);
padding: clamp(20px, 3vh, 32px) clamp(22px, 3vw, 36px);
margin-bottom: clamp(18px, 2.5vh, 28px);
background:
radial-gradient(140% 100% at 100% 0%, color-mix(in oklab, var(--accent, #589F7E) 14%, transparent) 0%, transparent 60%),
linear-gradient(135deg, var(--card-fam) 0%, color-mix(in oklab, var(--accent-soft, #E7F3EE) 60%, var(--card-fam) 40%) 100%);
border: 1px solid var(--border-fam);
border-radius: var(--r-xl);
box-shadow: var(--sh-soft);
position: relative;
overflow: hidden;
}
@media (min-width: 768px) {
body.brand-refined .welcome-hero {
grid-template-columns: 1.4fr 1fr;
align-items: center;
gap: 28px;
}
}
body.brand-refined .welcome-hero__icon {
position: absolute; top: -30px; right: -30px;
width: 180px; height: 180px;
border-radius: 50%;
background: radial-gradient(circle, color-mix(in oklab, var(--accent, #589F7E) 18%, transparent) 0%, transparent 70%);
pointer-events: none;
}
body.brand-refined .welcome-hero__intro { position: relative; z-index: 1; }
body.brand-refined .welcome-hero__kicker {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--accent-deep, #3F8068);
}
body.brand-refined .welcome-hero__kicker::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: #2E9C5C; box-shadow: 0 0 0 3px rgba(46,156,92,.22);
}
body.brand-refined .welcome-hero__title {
font-size: clamp(24px, 3vw, 34px);
font-weight: 600;
letter-spacing: -0.02em;
margin: 8px 0 4px;
color: var(--ink);
}
body.brand-refined .welcome-hero__sub {
margin: 0;
font-size: 14px;
color: var(--ink-2);
line-height: 1.55;
}
body.brand-refined .welcome-hero__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
position: relative; z-index: 1;
}
body.brand-refined .welcome-hero .stat-mini {
background: var(--card-fam);
border: 1px solid var(--border-fam);
border-radius: var(--r-md);
padding: 12px 14px;
}
body.brand-refined .welcome-hero .stat-mini__label {
display: block;
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--muted-fam);
}
body.brand-refined .welcome-hero .stat-mini__value {
display: block; margin-top: 4px;
font-size: 22px; font-weight: 600; color: var(--ink);
letter-spacing: -0.01em;
}
body.brand-refined .welcome-hero .stat-mini__delta {
display: block; margin-top: 2px;
font-size: 11px; font-weight: 600;
color: var(--accent-deep, #3F8068);
}
/* =============================================================================
* Quick-Links-Panel (Neurohub Therapist-Overview)
* ===========================================================================*/
body.brand-refined .quick-links-panel {
margin-top: clamp(20px, 3vh, 28px);
padding: clamp(18px, 2.5vh, 26px) clamp(20px, 3vw, 28px);
background: var(--card-fam);
border: 1px solid var(--border-fam);
border-radius: var(--r-xl);
box-shadow: var(--sh-soft);
}
body.brand-refined .quick-links-panel__head { margin-bottom: 14px; }
body.brand-refined .quick-links-panel__head h3 {
margin: 0;
font-size: 18px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--ink);
}
body.brand-refined .quick-links-grid {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
@media (min-width: 640px) {
body.brand-refined .quick-links-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
body.brand-refined .quick-links-grid { grid-template-columns: repeat(4, 1fr); }
}
body.brand-refined .quick-link {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
background: var(--bg);
border: 1px solid var(--border-fam);
border-radius: var(--r-md);
text-decoration: none;
color: var(--ink-2);
font-size: 13.5px;
font-weight: 600;
transition: background .15s ease, border-color .15s ease, color .15s ease;
}
body.brand-refined .quick-link:hover {
background: var(--accent-soft, #E7F3EE);
border-color: color-mix(in oklab, var(--accent, #589F7E) 22%, var(--border-fam));
color: var(--accent-deep, #3F8068);
}
body.brand-refined .quick-link__icon {
width: 32px; height: 32px; border-radius: 8px;
background: var(--accent-soft, #E7F3EE);
color: var(--accent-deep, #3F8068);
display: grid; place-items: center;
flex-shrink: 0;
}
body.brand-refined .quick-link__icon svg { width: 16px; height: 16px; }
body.brand-refined .quick-link__text { flex: 1; min-width: 0; }
body.brand-refined .quick-link__arrow { color: var(--muted-fam); font-size: 16px; }
/* Ultra-wide / 4K: keep tile cells from getting absurd, more side breathing */
@media (min-width: 1800px) {
body.brand-refined .home-grid {
grid-template-columns: repeat(3, minmax(0, 360px)) !important;
gap: 28px !important;
}
body.brand-refined .home-tile {
min-height: clamp(220px, 14vw, 300px);
padding: clamp(28px, 2vw, 44px);
}
body.brand-refined .home-tile .home-icon {
width: clamp(72px, 4.4vw, 96px);
height: clamp(72px, 4.4vw, 96px);
}
body.brand-refined .home-header .home-title,
body.brand-refined .home-title {
font-size: clamp(36px, 2.8vw, 60px) !important;
}
}
/* Stones uses #page as the wrapper instead of .main-content */
body.brand-refined #page {
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column;
justify-content: center;
min-height: 100dvh;
padding-block: clamp(28px, 6vh, 96px);
gap: clamp(20px, 3vh, 40px);
}
/* But during gameplay (#page is the game canvas wrapper) — no centering */
body.brand-refined.game-active #page,
body.brand-refined #page.game-active {
justify-content: flex-start;
min-height: 100dvh;
padding-block: 0;
}
/* Mockup-page wrapper (.page used in single-section mockups) */
body.brand-refined main.page,
body.brand-refined .brand-page-frame {
min-height: 100dvh;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Override for dashboard-style pages (multi-panel) — content naturally fills
space, so top-anchor is fine, but add comfortable top breathing room */
body.brand-refined .page--dashboard,
body.brand-refined .neurohub-dashboard {
justify-content: flex-start;
padding-block: clamp(24px, 4vh, 64px) !important;
}
/* Pages WITH a brand-page-header (Back-Button + Title) — top-anchored
so the header stays at the top of the viewport. Uses CSS :has() (95%+ support). */
body.brand-refined main.page:has(.brand-page-header) {
justify-content: flex-start !important;
padding-block: clamp(20px, 3vh, 48px) clamp(40px, 5vh, 72px) !important;
gap: clamp(18px, 2.4vh, 32px);
}
/* The page-header itself should sit at very top — no excess top margin */
body.brand-refined .brand-page-header {
margin-top: 0;
}
/* (Old @media 1600px block consolidated into 1200px + 1800px blocks below) */
/* ---- Kicker label ---- */
.brand-kicker {
display: inline-block;
font-family: var(--font-fam);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent, #D01C1F);
}
.brand-page-title {
font-family: var(--font-fam);
font-size: clamp(22px, 4.4vw, 36px);
font-weight: 600;
letter-spacing: -0.02em;
margin: 6px 0 0 0;
color: var(--ink);
}
.brand-page-subtitle {
font-family: var(--font-fam);
font-size: 13px;
color: var(--muted-fam);
margin-top: 4px;
}
/* ---- Tile grid (Home + Trainings) — horizontally centered with max-width ---- */
.brand-tile-grid {
display: grid;
gap: 14px;
grid-template-columns: repeat(2, 1fr);
width: 100%;
max-width: 1100px;
margin-inline: auto;
}
@media (min-width: 768px) {
.brand-tile-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (min-width: 1024px) {
.brand-tile-grid { gap: 18px; }
}
.brand-tile-grid--dense {
grid-template-columns: repeat(2, 1fr);
max-width: 1200px;
margin-inline: auto;
}
@media (min-width: 480px) { .brand-tile-grid--dense { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .brand-tile-grid--dense { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px){ .brand-tile-grid--dense { grid-template-columns: repeat(6, 1fr); } }
/* ---- Tile (base hairline card) ---- */
.brand-tile {
position: relative;
background: var(--card-fam);
color: var(--ink-2);
border: 1px solid var(--border-fam);
border-radius: var(--r-xl);
padding: 22px 16px 18px;
min-height: 130px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 12px;
cursor: pointer;
font-family: var(--font-fam);
text-decoration: none;
box-shadow: var(--sh-soft);
transition: transform .18s cubic-bezier(.2,.7,.3,1.2), box-shadow .18s ease, border-color .18s ease;
-webkit-tap-highlight-color: transparent;
}
.brand-tile:hover,
.brand-tile:focus-visible {
transform: translateY(-2px);
box-shadow: var(--sh-lg);
border-color: color-mix(in oklab, var(--accent, #D01C1F) 24%, var(--border-fam) 76%);
outline: none;
}
@media (min-width: 768px) { .brand-tile { min-height: 148px; padding: 24px 18px 20px; } }
@media (min-width: 1024px){ .brand-tile { min-height: 168px; padding: 26px 22px 22px; } }
.brand-tile__label {
font-size: 15px;
font-weight: 600;
letter-spacing: -0.01em;
margin: 0;
text-align: center;
color: var(--ink-2);
}
.brand-tile--primary .brand-tile__label { color: #fff; font-weight: 600; }
@media (min-width: 768px) { .brand-tile__label { font-size: 16px; } }
.brand-tile__sub {
font-size: 11.5px;
color: var(--muted-fam);
margin-top: -4px;
}
/* ---- Primary tile (gradient, site accent) ---- */
.brand-tile--primary {
background:
radial-gradient(120% 90% at 0% 0%, color-mix(in oklab, #fff 14%, transparent) 0%, transparent 55%),
linear-gradient(135deg, var(--accent, #D01C1F) 0%, var(--accent-deep) 100%);
color: var(--accent-contrast);
border-color: transparent;
box-shadow:
0 10px 28px color-mix(in oklab, var(--accent, #D01C1F) 35%, transparent),
var(--sh-soft);
}
.brand-tile--primary:hover,
.brand-tile--primary:focus-visible {
border-color: transparent;
box-shadow:
0 14px 36px color-mix(in oklab, var(--accent, #D01C1F) 45%, transparent),
var(--sh-lg);
}
.brand-tile--primary .brand-tile__sub {
color: rgba(255, 255, 255, 0.72);
}
/* ---- Icon well (peach-soft container for the tile icon) ---- */
.brand-icon-well {
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--accent-secondary-soft);
color: var(--accent, #D01C1F);
display: grid;
place-items: center;
flex-shrink: 0;
}
.brand-icon-well > img,
.brand-icon-well > svg {
width: 60%;
height: 60%;
object-fit: contain;
}
.brand-icon-well > svg [fill="currentColor"],
.brand-icon-well > svg [stroke="currentColor"] {
color: inherit;
}
@media (min-width: 768px) { .brand-icon-well { width: 56px; height: 56px; border-radius: 14px; } }
@media (min-width: 1024px){ .brand-icon-well { width: 64px; height: 64px; border-radius: 16px; } }
.brand-tile--primary .brand-icon-well {
background: rgba(255, 255, 255, 0.16);
color: #ffffff;
backdrop-filter: blur(6px);
}
/* ---- Badge (tile corner pill) ---- */
.brand-badge {
position: absolute;
top: 12px;
right: 12px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-secondary);
background: rgba(255, 181, 107, 0.14);
padding: 4px 8px;
border-radius: var(--r-pill);
}
/* ---- Pill button row (compact actions) ---- */
.brand-pill-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 22px;
}
.brand-pill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 16px 10px 10px;
background: var(--card-fam);
border: 1px solid var(--border-fam);
color: var(--ink-2);
border-radius: var(--r-pill);
font-family: var(--font-fam);
font-size: 13px;
font-weight: 600;
cursor: pointer;
min-height: 48px;
box-shadow: var(--sh-soft);
text-decoration: none;
transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
-webkit-tap-highlight-color: transparent;
}
.brand-pill:hover { transform: translateY(-1px); }
.brand-pill:focus-visible { outline: 3px solid color-mix(in oklab, var(--accent, #D01C1F) 35%, transparent); outline-offset: 2px; }
.brand-pill__icon {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--accent-secondary-soft);
color: var(--accent, #D01C1F);
display: grid;
place-items: center;
flex-shrink: 0;
}
.brand-pill__icon > img,
.brand-pill__icon > svg {
width: 65%;
height: 65%;
object-fit: contain;
}
.brand-pill__sub {
font-size: 11px;
color: var(--muted-fam);
font-weight: 500;
margin-left: 2px;
}
.brand-pill--danger {
background: color-mix(in oklab, #D01C1F 8%, #fff 92%);
border-color: color-mix(in oklab, #D01C1F 22%, #fff 78%);
color: #A91518;
}
.brand-pill--danger .brand-pill__icon {
background: #ffffff;
color: #A91518;
}
/* ---- Page header (Back, centered title, right slot) ---- */
.brand-page-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 22px;
flex-wrap: wrap;
}
.brand-page-header__center {
flex: 1;
text-align: center;
}
.brand-page-header__back {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px 10px 12px;
background: var(--card-fam);
border: 1px solid var(--border-fam);
border-radius: var(--r-pill);
font-family: var(--font-fam);
font-size: 13.5px;
font-weight: 600;
color: var(--ink-2);
cursor: pointer;
box-shadow: var(--sh-soft);
min-height: 44px;
text-decoration: none;
}
.brand-page-header__back svg,
.brand-page-header__back img { width: 14px; height: 14px; color: var(--accent, #D01C1F); }
@media (max-width: 767px) {
.brand-page-header { gap: 10px; }
.brand-page-header .brand-page-title { font-size: 22px; }
}
/* ---- Bottom Nav (Mobile only, glassmorphic) ---- */
.brand-bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 50;
display: none;
align-items: stretch;
justify-content: space-around;
gap: 4px;
padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
background: color-mix(in oklab, var(--bg, #FBF8F2) 78%, transparent);
backdrop-filter: saturate(160%) blur(20px);
-webkit-backdrop-filter: saturate(160%) blur(20px);
border-top: 1px solid var(--border-fam);
box-shadow: 0 -8px 28px rgba(47, 42, 37, .06);
}
@media (max-width: 767px) {
.brand-bottom-nav { display: flex; }
body.brand-refined.has-bottom-nav main { padding-bottom: 84px; }
}
.brand-bottom-nav__item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
background: transparent;
border: none;
padding: 6px 4px;
color: var(--ink-2);
font-family: var(--font-fam);
font-size: 10px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
min-height: 48px;
border-radius: 10px;
-webkit-tap-highlight-color: transparent;
}
.brand-bottom-nav__item[aria-current="page"],
.brand-bottom-nav__item.is-active {
color: var(--accent, #D01C1F);
background: var(--accent-soft);
}
.brand-bottom-nav__item .brand-bottom-nav__icon {
width: 24px;
height: 24px;
display: grid;
place-items: center;
color: var(--muted-fam);
}
.brand-bottom-nav__item[aria-current="page"] .brand-bottom-nav__icon,
.brand-bottom-nav__item.is-active .brand-bottom-nav__icon {
color: var(--accent, #D01C1F);
}
.brand-bottom-nav__item .brand-bottom-nav__icon img,
.brand-bottom-nav__item .brand-bottom-nav__icon svg {
width: 100%;
height: 100%;
}
/* ---- FAB (Floating Action Button, mobile primary action) ---- */
.brand-fab {
position: fixed;
bottom: calc(88px + env(safe-area-inset-bottom, 0px));
right: 16px;
z-index: 51;
width: 56px;
height: 56px;
border-radius: 50%;
border: none;
display: none;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--accent, #D01C1F), var(--accent-deep));
color: var(--accent-contrast);
box-shadow: 0 10px 28px color-mix(in oklab, var(--accent, #D01C1F) 40%, transparent);
cursor: pointer;
font-size: 24px;
}
@media (max-width: 767px) {
body.brand-refined.has-fab .brand-fab { display: flex; }
}
/* ---- App-level header (Logo + Kicker + Date) ---- */
.brand-app-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 28px;
flex-wrap: wrap;
}
.brand-app-header__logo {
width: 42px;
height: 42px;
border-radius: 12px;
background: var(--accent, #D01C1F);
display: grid;
place-items: center;
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.08);
flex-shrink: 0;
}
.brand-app-header__logo svg { fill: var(--accent-secondary); }
/* ---- Footer (quiet single line) ---- */
.brand-app-footer {
margin-top: auto;
padding-top: 24px;
display: flex;
justify-content: space-between;
font-size: 11.5px;
color: var(--muted-fam);
font-family: var(--font-fam);
}
@media (max-width: 767px) {
body.brand-refined.has-bottom-nav .brand-app-footer { display: none; }
}
/* ---- OAuth Pill (Login screen) ---- */
.brand-oauth-row {
display: flex;
gap: 12px;
margin-top: 12px;
}
.brand-oauth-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 11px 12px;
min-height: 48px;
background: var(--card-fam);
border: 1px solid var(--border-fam);
border-radius: var(--r-md);
font-family: var(--font-fam);
font-size: 13px;
font-weight: 600;
color: var(--ink-2);
cursor: pointer;
text-decoration: none;
}
/* ---- Primary button (Refined) ---- */
.brand-btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 22px;
min-height: 48px;
background: linear-gradient(135deg, var(--accent, #D01C1F), var(--accent-deep));
color: var(--accent-contrast);
border: none;
border-radius: var(--r-md);
font-family: var(--font-fam);
font-size: 14px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 1px 0 rgba(0,0,0,0.08), 0 6px 16px color-mix(in oklab, var(--accent, #D01C1F) 30%, transparent);
text-decoration: none;
transition: transform .12s ease, box-shadow .18s ease;
}
.brand-btn-primary:hover { transform: translateY(-1px); }
.brand-btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 22px;
min-height: 48px;
background: var(--card-fam);
color: var(--ink);
border: 1px solid var(--border-fam);
border-radius: var(--r-md);
font-family: var(--font-fam);
font-size: 14px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
}
/* ---- Subtle noise texture for richer surfaces ---- */
body.brand-refined.has-noise::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: .015;
background-image:
url("data:image/svg+xml;utf8,");
}
/* ---- Form field (Refined) ---- */
.brand-field {
display: block;
font-size: 12.5px;
font-weight: 700;
color: var(--ink-2);
margin-bottom: 8px;
letter-spacing: 0.02em;
font-family: var(--font-fam);
}
.brand-input {
width: 100%;
box-sizing: border-box;
padding: 13px 14px;
min-height: 48px;
background: var(--card-fam);
border: 1px solid var(--border-fam);
border-radius: var(--r-md);
font-size: 14.5px;
font-family: var(--font-fam);
color: var(--ink);
outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
.brand-input:focus {
border-color: var(--accent, #D01C1F);
box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent, #D01C1F) 18%, transparent);
}
/* =============================================================================
* Dark mode — ONLY when explicitly enabled by the user (manual toggle).
* We do NOT auto-respect prefers-color-scheme: dark anymore, because the
* existing sites have their own manual dark-mode (body.theme-dark) and the
* Refined family system is light-first.
* ===========================================================================*/
body.brand-refined[data-theme="dark"],
body.brand-refined.theme-dark {
--ink: #F1ECE3;
--ink-2: #C8C0B0;
--muted-fam: #948774;
--card-fam: #2A2622;
--border-fam: #3A332B;
--border-soft-fam: #322C25;
--accent-secondary-soft: rgba(255, 181, 107, 0.10);
}
/* =============================================================================
* Compatibility overlay — kognitives-training.ch & sister sites
* Targets existing .home-*, .training-* classes so the refresh works WITHOUT
* rewriting main_content.php structurally.
* ===========================================================================*/
/* Home header: left-aligned + kicker */
body.brand-refined .home-header {
flex-direction: row !important;
justify-content: space-between !important;
align-items: flex-start;
text-align: left;
width: min(1100px, 100%);
margin-inline: auto;
padding: 4px 6px;
flex-wrap: wrap;
gap: 16px;
}
body.brand-refined .home-header .home-title {
font-size: clamp(22px, 4.4vw, 36px);
letter-spacing: -0.02em;
font-weight: 600;
order: 1;
margin: 0;
text-align: left;
color: var(--ink);
}
body.brand-refined .home-header .logo {
order: 3;
width: 42px;
height: auto;
}
body.brand-refined .home-header__intro {
order: 1;
flex: 1;
min-width: 0;
}
body.brand-refined .home-header__intro .home-title { font-size: clamp(22px, 4.4vw, 38px); }
body.brand-refined .home-header__intro .home-greeting {
font-size: 13px;
color: var(--muted-fam);
margin-top: 6px;
}
body.brand-refined .home-header .brand-kicker { display: inline-block; }
/* Home tiles — icon-well treatment */
body.brand-refined .home-tile {
background: var(--card-fam);
border-color: var(--border-fam);
border-radius: 22px;
box-shadow: var(--sh-soft);
min-height: 168px;
padding: 26px 22px 22px;
gap: 14px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
transition: transform .18s cubic-bezier(.2,.7,.3,1.2), box-shadow .18s ease, border-color .18s ease;
}
body.brand-refined .home-tile:hover {
transform: translateY(-2px);
box-shadow: var(--sh-lg);
border-color: color-mix(in oklab, var(--accent) 22%, var(--border-fam) 78%);
}
body.brand-refined .home-tile .home-icon {
width: 64px;
height: 64px;
padding: 14px;
box-sizing: border-box;
border-radius: 16px;
background: var(--accent-secondary-soft);
}
body.brand-refined .home-tile .home-label {
font-size: 16px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--ink-2);
}
/* Primary tile becomes filled gradient */
body.brand-refined .home-tile--primary {
background:
radial-gradient(120% 90% at 0% 0%, color-mix(in oklab, #fff 14%, transparent) 0%, transparent 55%),
linear-gradient(135deg, var(--accent) 0%, var(--accent-deep, #A91518) 100%) !important;
color: #fff !important;
border-color: transparent !important;
box-shadow:
0 10px 28px color-mix(in oklab, var(--accent) 35%, transparent),
var(--sh-soft) !important;
}
body.brand-refined .home-tile--primary .home-label,
body.brand-refined .home-tile--primary .home-sub {
color: #fff !important;
}
body.brand-refined .home-tile--primary .home-icon {
background: rgba(255, 255, 255, 0.14);
backdrop-filter: blur(6px);
}
body.brand-refined .home-tile--primary:hover {
filter: none;
transform: translateY(-2px);
box-shadow: 0 14px 36px color-mix(in oklab, var(--accent) 45%, transparent), var(--sh-lg) !important;
}
/* Pill row tiles (--compact) — horizontally centered */
body.brand-refined .home-toggle-row {
gap: 10px;
justify-content: center;
max-width: 1100px;
margin-inline: auto;
width: 100%;
}
/* Home page main grid — center on screen with comfortable max-width */
body.brand-refined .home-grid {
margin-inline: auto;
}
/* Training- + Screening-Pages skalieren mit voller Bildschirmbreite —
keine künstliche max-width-Begrenzung. Die Live-Site nutzt schon
--training-column-width: clamp(170px, 17vw, 260px) für die Tile-Grösse,
das skaliert sauber von Mobile bis Ultrawide. */
body.brand-refined .training-page,
body.brand-refined .screening-page,
body.brand-refined .training-body,
body.brand-refined .training-layout,
body.brand-refined .training-deck {
width: 100%;
max-width: none;
margin-inline: 0;
}
/* Auf sehr breiten Bildschirmen darf der Container etwas mehr Padding bekommen,
aber der Inhalt füllt die Breite. */
@media (min-width: 1600px) {
body.brand-refined .training-page,
body.brand-refined .screening-page {
padding-inline: clamp(24px, 4vw, 80px);
}
}
body.brand-refined .page-header {
width: 100%;
}
body.brand-refined .home-tile--compact {
min-height: 48px;
padding: 10px 16px 10px 10px;
border-radius: 999px;
background: var(--card-fam);
border: 1px solid var(--border-fam);
box-shadow: var(--sh-soft);
color: var(--ink-2);
font-weight: 600;
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 10px;
}
body.brand-refined .home-tile--compact:hover {
transform: translateY(-1px);
}
body.brand-refined .home-tile--compact .home-icon {
width: 28px;
height: 28px;
padding: 5px;
border-radius: 50%;
background: var(--accent-secondary-soft);
}
body.brand-refined .home-tile--compact .home-label {
font-size: 13px;
font-weight: 500;
color: var(--ink-2);
}
body.brand-refined .home-tile--danger {
background: color-mix(in oklab, var(--accent) 8%, #fff 92%) !important;
border-color: color-mix(in oklab, var(--accent) 22%, #fff 78%) !important;
color: var(--accent-deep, #A91518) !important;
}
body.brand-refined .home-tile--danger .home-label { color: var(--accent-deep, #A91518) !important; }
body.brand-refined .home-tile--danger .home-icon { background: #fff; }
/* Profile status sub label */
body.brand-refined .home-page .profile-status-text {
font-size: 11px;
color: var(--muted-fam);
font-weight: 500;
}
/* Footer — quiet line, sitzt direkt nach Inhalt (KEIN margin-top: auto sonst
bricht die vertikale Zentrierung der .home-page) */
body.brand-refined .home-footer {
margin-top: 0;
padding-top: 16px;
display: flex;
justify-content: space-between;
gap: 16px;
width: min(1100px, 100%);
margin-inline: auto;
flex-wrap: wrap;
}
body.brand-refined .home-footer .author-text {
font-size: 11.5px;
color: var(--muted-fam);
margin: 0;
}
/* Generic page-header (training, screening, settings) refresh */
body.brand-refined .page-header {
align-items: center;
}
body.brand-refined .page-back {
background: var(--card-fam);
border: 1px solid var(--border-fam);
border-radius: 999px;
box-shadow: var(--sh-soft);
padding: 9px 16px 9px 12px;
color: var(--ink-2);
}
body.brand-refined .page-title {
font-weight: 700;
letter-spacing: -0.01em;
color: var(--ink);
}
/* Bottom-nav padding adjustment — nur auf Mobile, wo Bottom-Nav sichtbar ist */
@media (max-width: 767px) {
body.brand-refined.has-bottom-nav .home-page,
body.brand-refined.has-bottom-nav .training-page,
body.brand-refined.has-bottom-nav .screening-page {
padding-bottom: max(84px, calc(72px + env(safe-area-inset-bottom)));
}
}
/* On wider screens, hide bottom-nav (already in main rule). On mobile, hide the
home-toggle-row's logout pill if user prefers compactness — but keep it
visible by default. */
@media (max-width: 480px) {
body.brand-refined .home-header { padding: 0 10px; }
body.brand-refined .home-header .home-title { font-size: 26px; }
}
/* =============================================================================
* Final lightening pass — soften the global text color used by the existing
* styles.css. The site originally sets --text: #2F2A25 which renders as
* near-black on warm cream. Brand-refined remaps it to warm taupe.
* ===========================================================================*/
body.brand-refined {
--text: var(--ink); /* warm taupe instead of near-black */
--text-muted: var(--muted-fam); /* light taupe */
}
/* Most existing labels, prices, etc. inherit body color — covered above.
The strong/bold elements specifically often look heavier; soften weight. */
body.brand-refined h1,
body.brand-refined h2,
body.brand-refined .title,
body.brand-refined .home-title,
body.brand-refined .page-title { font-weight: 600; }
body.brand-refined strong,
body.brand-refined b { font-weight: 600; color: var(--ink); }
/* PNG icons that ship dark/navy — recolor to peach-soft accent via filter.
Targets the back-arrow (navy in the asset library) plus any other dark
line-art PNGs in pill / back buttons. The filter chain converts black/navy
to the warm accent red used elsewhere. */
body.brand-refined .btn--back .btn-icon,
body.brand-refined .page-back .btn-icon,
body.brand-refined img[src*="left-arrow"],
body.brand-refined img[src*="right-arrow"] {
filter: brightness(0) saturate(100%)
invert(20%) sepia(89%) saturate(4869%) hue-rotate(355deg)
brightness(94%) contrast(102%);
opacity: .9;
}
/* Bottom-nav inactive icons readable taupe (not too pale), active stays accent */
body.brand-refined .brand-bottom-nav__item { color: var(--ink-2); font-weight: 500; }
body.brand-refined .brand-bottom-nav__item .brand-bottom-nav__icon { color: var(--ink-2); opacity: 1; }
body.brand-refined .brand-bottom-nav__item[aria-current="page"],
body.brand-refined .brand-bottom-nav__item.is-active { color: var(--accent, #D01C1F); font-weight: 600; }
body.brand-refined .brand-bottom-nav__item[aria-current="page"] .brand-bottom-nav__icon,
body.brand-refined .brand-bottom-nav__item.is-active .brand-bottom-nav__icon { color: var(--accent, #D01C1F); opacity: 1; }
/* The home-page title gets a softer feel but stays readable as a heading */
body.brand-refined .home-header .home-title,
body.brand-refined .page-title,
body.brand-refined .brand-page-title { color: #5A4C3C; font-weight: 600; }
/* Existing settings/profile/data interface titles, subtitles, descriptors */
body.brand-refined .section-title,
body.brand-refined .settings-section-title,
body.brand-refined .training-section-title,
body.brand-refined .screening-section-title { color: var(--ink); font-weight: 600; }
/* Borders lighter so the page feels airier */
body.brand-refined { --border: #EDE5D4; --border-strong: #DCD0B8; }
body.brand-refined hr { border-color: var(--border); opacity: .8; }
/* Buttons in the existing system (Zurück, Save, etc.) that inherited dark text */
body.brand-refined .btn,
body.brand-refined .page-back {
color: var(--ink);
}
body.brand-refined .btn--ghost {
color: var(--ink-2);
}
/* Akzent-gefüllte Buttons brauchen immer weisse Schrift für Kontrast.
Hinweis: .mode-btn.blue/.charcoal werden nur als STANDALONE Pills gestyled
(mit :not(.training-mode-btn)), weil .training-mode-btn diese Klasse auch
trägt aber ein anderes Farbsystem hat (hell-blau-Tint mit dunkler Schrift). */
body.brand-refined .btn--primary,
body.brand-refined #programStepStartBtn,
body.brand-refined #screeningStartBtn,
body.brand-refined #screeningSaveBtn,
body.brand-refined .mode-btn.blue:not(.training-mode-btn),
body.brand-refined .mode-btn.charcoal:not(.training-mode-btn),
body.brand-refined .mode-lesen-highlight,
body.brand-refined button[type="submit"]:not(.btn-secondary):not(.btn--ghost):not(.btn--icon):not(.button-secondary) {
color: #ffffff !important;
}
body.brand-refined .btn--primary *,
body.brand-refined #programStepStartBtn *,
body.brand-refined .mode-btn.blue:not(.training-mode-btn) *,
body.brand-refined .mode-btn.charcoal:not(.training-mode-btn) * {
color: inherit;
}
/* Hover/active müssen weiss-Text behalten */
body.brand-refined .btn--primary:hover,
body.brand-refined .btn--primary:active,
body.brand-refined .btn--primary:focus,
body.brand-refined #programStepStartBtn:hover,
body.brand-refined .mode-btn.blue:not(.training-mode-btn):hover,
body.brand-refined .mode-btn.charcoal:not(.training-mode-btn):hover {
color: #ffffff !important;
}
/* Generic small "muted" support */
body.brand-refined .text-muted,
body.brand-refined small,
body.brand-refined .home-sub { color: var(--muted-fam); }
/* N5 (2026-05-23): Mobile menu-burger bar contrast.
`body.brand-refined span { color: var(--ink) }` (Z. 74-78) überschreibt die
Farbe der `