/* ============================================================ ux2026.css — "Calm Interface" Design-Schub (2026) ------------------------------------------------------------ Additive Verfeinerung über die bestehenden App-Styles: · fortgeschrittener Glassmorphismus (Sättigung + feine Ränder) · funktionale Tiefe (subtile Neumorphismus-Schatten) · edles Dark-Mode-Feintuning, ruhige Typo-Rhythmik · flüssige Micro-Interactions & sanftes Einblenden Niedrige Spezifität via :where() — überschreibt App-Absichten nicht hart, hebt nur das Gesamtniveau. Einbinden im jeder Seite: ============================================================ */ /* ============================================================ HELL-MODUS (Light Theme) — aktiv über html[data-theme="light"] ============================================================ */ html[data-theme="light"]{ --bg:#eef2f1; --bg2:#e4eae8; --card:rgba(255,255,255,.72); --card2:rgba(255,255,255,.96); --panel:rgba(255,255,255,.72); --panel2:rgba(255,255,255,.92); --line:rgba(20,45,40,.14); --txt:#14201d; --muted:#5b6b64; --acc:#0e9488; --acc2:#c2760a; --gold:#c2760a; --ok:#15a34a; --bad:#e11d48; color-scheme:light; } html[data-theme="light"] body{ color:var(--txt); } html[data-theme="light"] :where(h1,h2){ -webkit-text-fill-color:currentColor !important; color:var(--txt); } html[data-theme="light"] :where(.card,.panel,.tile,.scard,.mod,.ex,.lib-folder,.modal .box,.gate .box,.tutor-panel,.lpx-panel,.lib-menu,.msheet .sh,.accrow){ background:var(--card2); } html[data-theme="light"] :where(input,textarea,select,.btn.sec,.pill,.tag,.chip,.seg button,.filter button,.qopt,.srs-g,.ob,.tabbar,.lp-home,.lp-userbadge,.lp-theme-float,.back,.datenav button,.datenav input,.lim,.ed-in,.in,.gsearch,.tutor-input textarea,.tutor-tabs button,.lib-newf){ background:rgba(20,45,40,.05); color:var(--txt); } html[data-theme="light"] :where(.muted,.sub,small,.tutor-foot,.hint,.lp-ub-txt span,.scard .lab,.scard .sub){ color:var(--muted); } html[data-theme="light"] :where(.tutor-b,.tutor-m.assistant .tutor-b,.lp-ub-txt b,.srs-g-l){ color:var(--txt); } html[data-theme="light"] :where(.tutor-m.user .tutor-b,.srs-b-go,.learn-btn,.addbtn,.btn.prim,.save,.go){ color:#04211d; } html[data-theme="light"] :where(.lp-home,.lp-userbadge,.lp-theme-float){ color:var(--txt); } html[data-theme="light"] .lp-topscrim{ background:linear-gradient(180deg,var(--bg) 62%,rgba(238,242,241,0)); } html[data-theme="light"] .aurora{ opacity:.5; } html[data-theme="light"] .grain{ opacity:.02; } /* --- Light-Mode Feinschliff: mehr Kontrast & Definition --- */ html[data-theme="light"]{ --muted:#4a5852; --line:rgba(20,45,40,.18); } html[data-theme="light"] :where(.card,.panel,.tile,.scard,.mod,.ex,.lib-folder,.modal .box,.tutor-panel,.msheet .sh){ box-shadow:0 6px 18px -12px rgba(0,0,0,.28); } /* Dunkle Hardcode-Chips im Hellmodus hell machen (sonst dunkel auf hell) */ html[data-theme="light"] :where(.lp-home,.lp-userbadge,.lp-theme-float,.mod .ic){ background:rgba(255,255,255,.9) !important; color:var(--txt) !important; border-color:var(--line) !important; } html[data-theme="light"] .tutor-panel{ background:rgba(255,255,255,.97) !important; } html[data-theme="light"] :where(.tutor-title,.tutor-x,.tutor-key,.lp-ub-txt b,.mod h3,.mod .pc){ color:var(--txt) !important; } html[data-theme="light"] :where(.gitem p,.tutor-count,.srs-chip){ color:var(--muted); } /* Eingaben klar lesbar */ html[data-theme="light"] :where(input,textarea,select){ color:var(--txt) !important; } html[data-theme="light"] ::placeholder{ color:#8a988f; } /* Weiss-auf-weiss-Killer: alle hartkodierten hellen Schriften der Widgets */ html[data-theme="light"] :where(.srs-b-txt,.srs-g,.srs-g-l,.srs-count,.tutor-title,.tutor-look-h,.tutor-look-h b, .tutor-lookbar input,.tutor-input textarea,.tutor-b,.lib-menu button,.msheet button.slot,.ed-in,.ed-lbl, .task .title,.slot .time,.col-head h2,.brand h1,.hint,.switch,.gate label,.gate input,.modal .accrow b, .pv-stat b,.file b,.drop b,.u .who b,.mc,.datenav input,.lim){ color:var(--txt) !important; } html[data-theme="light"] :where(.srs-g-s,.srs-chip,.tutor-look-b,.tutor-foot,.tutor-tabs button,.file span, .drop small,.u .who span,.u .col,.gate p,.modal .accrow span,.gate .switch,.stat){ color:var(--muted) !important; } /* Weisse/halbtransparente Flächen bekommen im Hellmodus sichtbare Ränder */ html[data-theme="light"] :where(.tag,.chip,.pill,.tbtn,.qopt,.srs-g,.gitem,.tutor-look-item,.file,.task){ border-color:rgba(20,45,40,.22) !important; } /* Gradient-Buttons behalten dunkle Schrift (lesbar) */ html[data-theme="light"] :where(.go,.btn.prim,.learn-btn,.addbtn,.save,.srs-b-go,.tutor-send,.masterrow button:hover){ color:#04211d !important; } /* Dunkle fixe Elemente (Tab-Leiste) hell */ html[data-theme="light"] .tabbar{ background:var(--card2) !important; } html[data-theme="light"] .tabbar button{ color:var(--muted); } html[data-theme="light"] .tabbar button.on{ color:var(--acc); } /* ---- Sanftes Seiten-Einblenden ---- WICHTIG: kein transform auf , sonst bricht es position:fixed (Timer-Button & Tab-Leiste wuerden mitscrollen). Nur Opacity. */ @keyframes ux-enter { from { opacity: 0; } to { opacity: 1; } } body { animation: ux-enter .5s ease both; } /* Fixierte Bedien-Elemente in den Lern-Modulen bleiben IMMER sichtbar, unabhaengig vom Scrollen (Absicherung gegen Transform-Containing-Blocks). */ :where(.tabbar) { position: fixed !important; bottom: 0 !important; left: 0; right: 0; z-index: 40; } :where(.lpx-fab) { position: fixed !important; z-index: 60; } :where(.lpx-panel) { position: fixed !important; z-index: 61; } /* ---- Ruhigere globale Rhythmik ---- */ html { scroll-behavior: smooth; } ::selection { background: rgba(45, 212, 191, .28); color: #f4fffb; } /* ---- Feiner Custom-Scrollbar (dezent, dark) ---- */ * { scrollbar-width: thin; scrollbar-color: rgba(120, 150, 135, .35) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(45, 212, 191, .35), rgba(120, 150, 135, .3)); border-radius: 20px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: rgba(45, 212, 191, .55); background-clip: content-box; } /* ---- Glassmorphismus + funktionale Tiefe auf Flächen ---- */ :where(.card, .panel, .tile, .modal .box, .gate .box) { -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .72), 0 1px 0 rgba(255, 255, 255, .05) inset, 0 -18px 40px -34px rgba(0, 0, 0, .5) inset; transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, border-color .3s ease; } /* Ruhiger Hover-Lift für interaktive Karten (nur wo klickbar) */ :where(a.card, button.card, .tbtn, .pill):hover { box-shadow: 0 22px 46px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(45, 212, 191, .18) inset; } /* ---- Buttons: satisfying, aber ruhig ---- */ :where(.btn, .tbtn, .go, button.act) { transition: transform .14s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, filter .2s ease, background .25s ease; } :where(.btn):hover { transform: translateY(-2px); filter: saturate(112%); } :where(.btn):active, :where(.tbtn):active { transform: scale(.97); } /* Sanfter Fokus-Ring – barrierefrei & elegant */ :where(a, button, input, textarea, select):focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(45, 212, 191, .28), 0 0 0 1px rgba(45, 212, 191, .5); border-radius: 10px; } /* ---- Flip-Karte: weichere, tiefere 3D-Wirkung ---- */ :where(.flip-in) { transition: transform .62s cubic-bezier(.6, .04, .2, 1) !important; } :where(.flip .face) { box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .06) inset !important; } /* ---- Fortschrittsbalken: sanft schimmernd ---- */ :where(.bar > i, .xpbar > i, .tprog .bar > i) { transition: width 1.05s cubic-bezier(.2, .8, .2, 1) !important; } /* ---- Ruhemodus für Menschen mit Bewegungsempfindlichkeit ---- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ============================================================ Mobile & iPad Optimierung ============================================================ */ /* Nichts läuft aus dem Bildschirm; weiche Touch-Scrolls */ html, body { max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; } :where(canvas, img, svg, video) { max-width: 100%; height: auto; } :where(button, a, [role="button"]) { touch-action: manipulation; } :where(.tile, .mod, .task, .lib-tile) { -webkit-user-select: none; user-select: none; } @media (max-width: 820px) { /* Fingerfreundliche Tap-Flächen */ :where(button, .btn, .tbtn, .pill, .ob, .qopt, .seg button, .tabbar button, .lib-newf, .datenav button):not(.lib-swatch) { min-height: 44px; } :where(.lib-more, .tile-more, .tutor-fab, .lpx-fab) { min-width: 42px; min-height: 42px; } /* iOS zoomt Eingabefelder unter 16px beim Fokus – das verhindern wir */ :where(input, textarea, select) { font-size: 16px; } /* Menüs/Panels nie breiter als der Screen */ :where(.lib-menu, .tutor-panel, .modal .box, .gate .box) { max-width: calc(100vw - 20px); } } @media (max-width: 520px) { :where(.wrap, .shell, .app, .board) { padding-left: 14px; padding-right: 14px; } /* Ordner-Kacheln je Zeile größer, damit man gut trifft */ :where(#grid.grid, .lib-drop.grid) { grid-template-columns: 1fr 1fr; } } /* Safe-Area (iPhone-Notch): unten/oben Platz lassen, wo fixiert */ @supports (padding: max(0px)) { :where(.tabbar) { padding-bottom: max(6px, env(safe-area-inset-bottom)); } /* Tutor- und Timer-Buttons/Panels IMMER über der Tab-Leiste halten (inkl. iPhone-Home-Indikator), damit sie die Menüpunkte nicht überdecken */ .tutor-fab, .lpx-fab { bottom: calc(82px + env(safe-area-inset-bottom)) !important; } .tutor-panel { bottom: calc(82px + env(safe-area-inset-bottom)) !important; } .lpx-panel { bottom: calc(146px + env(safe-area-inset-bottom)) !important; } } /* ============================================================ SPEKTAKULÄRER HINTERGRUND (animiert, GPU-freundlich) Zwei Zusatz-Ebenen auf den bestehenden .bgfx/.aurora-Flächen: 1) langsam rotierender Farb-Nebel (conic gradient) 2) driftendes Sternenfeld ============================================================ */ :where(.bgfx, .aurora) { overflow: hidden; } :where(.bgfx, .aurora)::before { content: ""; position: absolute; inset: -60%; background: conic-gradient(from 0deg at 50% 50%, rgba(45,212,191,.16), rgba(139,92,246,.13), rgba(245,165,36,.10), rgba(45,212,191,.05), rgba(79,143,247,.12), rgba(45,212,191,.16)); filter: blur(90px); animation: lpNebel 48s linear infinite; will-change: transform; } :where(.bgfx, .aurora)::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.55), transparent 100%), radial-gradient(1px 1px at 28% 66%, rgba(255,255,255,.4), transparent 100%), radial-gradient(2px 2px at 44% 12%, rgba(45,212,191,.6), transparent 100%), radial-gradient(1px 1px at 58% 44%, rgba(255,255,255,.35), transparent 100%), radial-gradient(1.5px 1.5px at 70% 78%, rgba(245,165,36,.5), transparent 100%), radial-gradient(1px 1px at 84% 30%, rgba(255,255,255,.45), transparent 100%), radial-gradient(2px 2px at 92% 60%, rgba(139,92,246,.5), transparent 100%), radial-gradient(1px 1px at 6% 84%, rgba(255,255,255,.35), transparent 100%); background-size: 100% 100%; animation: lpStars 90s ease-in-out infinite alternate; opacity: .8; } @keyframes lpNebel { to { transform: rotate(360deg); } } @keyframes lpStars { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-2%,1.5%,0) scale(1.04); } 100% { transform: translate3d(1.5%,-2%,0) scale(1); } } html[data-theme="light"] :where(.bgfx,.aurora)::before { opacity: .45; } html[data-theme="light"] :where(.bgfx,.aurora)::after { opacity: .25; } /* ============================================================ MOBILE-PERFORMANCE: auf Touch-Geräten alles Teure abschalten (Blur & Dauer-Animationen sind die Haupt-Lag-Quellen) ============================================================ */ @media (pointer: coarse) { :where(.card,.panel,.tile,.mod,.ex,.scard,.lib-folder,.modal .box,.gate .box, .tutor-panel,.lpx-panel,.lib-menu,.msheet .sh,.nav,.tabbar,.lp-home,.lp-userbadge, .lp-theme-float,.pill,.greet,.srs-banner,.mycard,.row,.ob-help,.back) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } :where(.bgfx,.aurora)::before { animation: none; filter: blur(60px); } :where(.bgfx,.aurora)::after { animation: none; } .blob, .aurora::before, .aurora::after { animation: none !important; } .grain { display: none !important; } :where(.tile,.mod,.card,.row) { box-shadow: none !important; } .tile, .mod { content-visibility: auto; contain-intrinsic-size: 220px; } } @media (prefers-reduced-motion: reduce) { :where(.bgfx,.aurora)::before, :where(.bgfx,.aurora)::after { animation: none !important; } } /* ============================================================ Mobile-Optimierung (global) — 2026-07 ============================================================ */ @media (max-width: 640px) { /* Eingaben: 16px verhindert Auto-Zoom auf iOS */ input, select, textarea { font-size: 16px !important; } /* Tap-Ziele mindestens 42px hoch */ button, .pill, .back, .chip, .save, .add, .goaledit { min-height: 42px; } .pill, .back { padding-top: 10px !important; padding-bottom: 10px !important; } /* Safe-Area (Notch / Home-Indikator) */ body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } .wrap { padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important; } /* Tabellen & breite Inhalte scrollbar statt abgeschnitten */ table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Karten kompakter */ .card { padding: 14px !important; } .hero h1 { font-size: 26px !important; } /* Kopfzeilen umbrechen statt überlaufen */ .topbar, .top { flex-wrap: wrap; row-gap: 8px; } /* Modale nicht höher als der Bildschirm */ .modal .box, .ob-box { max-height: 86vh; overflow-y: auto; } /* Grids einspaltig, wo sie zu eng würden */ .frow { flex-wrap: wrap; } } @media (max-width: 400px) { .hero h1 { font-size: 23px !important; } .chips { gap: 5px !important; } } /* Feinere Scrollbars + Momentum überall */ * { -webkit-overflow-scrolling: touch; } @media (hover: none) { /* Auf Touch-Geräten Hover-Transformationen deaktivieren (verhindert "kleben") */ .app:hover, .tile:hover, .fcard:hover { transform: none; } }