/* ===================================================================== Real4Reg – Lernumgebung · Design-System (Neugestaltung nach Handoff) Barrierefrei EN 301 549 / WCAG 2.1 AA · technologieneutral, portierbar Themes über data-uv-theme / data-uv-contrast / data-uv-spacing an ===================================================================== */ /* ============ Tokens · Basis (hell) ================================= */ :root { /* Flächen */ --bg:#f5f6f9; /* Body / Sidebar */ --content-bg:#ffffff; /* Contentspalte, Header, Footer */ --surface:#ffffff; /* Karten */ --surface-2:#f0f2f6; /* Sekundärbuttons, Panelflächen */ --surface-3:#e9e9e9; /* Text */ --ink:#17192b; --ink-muted:#4d5561; --ink-onbrand:#242b61; /* Text auf Verlaufsflächen */ /* Linien */ --line:#e2e4ea; /* Trennlinien innerhalb von Karten */ --line-strong:#767d8a; /* Feld- und Buttonrahmen (4,1:1) */ --card-border:#8d94a3; /* Kartenkanten (3,04:1) */ /* Marke */ --navy:#242b61; --navy-hover:#1a2049; --on-navy:#ffffff; --sky:#53c2eb; --sky-soft:#e7f6fd; --sky-ink:#12556f; --teal:#3fb5af; --green:#58b791; --green-soft:#e9f5ef; --green-ink:#1e6d50; --neutral-soft:#eef0f4; --neutral-ink:#4d5561; --link:#1b6fa8; /* Fokus */ --focus:#242b61; --focus-halo:#ffffff; /* Erhebung */ --shadow:0 1px 2px rgba(36,43,97,.05), 0 3px 10px rgba(36,43,97,.06); --shadow-lg:0 18px 44px rgba(23,25,43,.20); /* Verlauf */ --hero:linear-gradient(105deg,#3fb5af 0%,#53c2eb 58%,#8ad6f4 100%); --hero-fallback:#53c2eb; /* Sidebar */ --sidebar-bg:#f5f6f9; --sidebar-ink:#17192b; --sidebar-ink-muted:#4d5561; --sidebar-hairline:#d5d9e2; --sidebar-active-bg:#ffffff; --sidebar-accent:#242b61; --sidebar-active-shadow:0 1px 2px rgba(36,43,97,.05), 0 4px 14px rgba(36,43,97,.08); /* Player-Bühne */ --stage-bg:#242b61; --stage-ink:#ffffff; --stage-ink-muted:rgba(255,255,255,.85); --stage-hairline:rgba(255,255,255,.28); --stage-panel:rgba(255,255,255,.12); --stage-accent:#53c2eb; /* Textabstände (Bedienhilfe „Mehr Abstand") */ --lh:1.62; --ls:normal; --ws:normal; --stack:1em; --ff:"Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; } /* ============ Tokens · Dark Mode ==================================== */ :root[data-uv-theme="dark"] { --bg:#101227; --content-bg:#141733; --surface:#1a1d38; --surface-2:#232746; --surface-3:#2c3153; --ink:#f3f5fc; --ink-muted:#c3c8de; --ink-onbrand:#eaf8ff; --line:#343a62; --line-strong:#98a0c6; --card-border:#6b73a0; --navy:#53c2eb; --navy-hover:#7fd2f2; --on-navy:#101227; --sky-soft:#1d3550; --sky-ink:#9fdcf5; --green-soft:#173d31; --green-ink:#89d7b6; --neutral-soft:#252a4b; --neutral-ink:#c3c8de; --link:#8ad6f4; --focus:#8ad6f4; --focus-halo:#101227; --shadow:0 1px 2px rgba(0,0,0,.4), 0 3px 12px rgba(0,0,0,.3); --shadow-lg:0 18px 44px rgba(0,0,0,.55); --hero:linear-gradient(105deg,#123f4d 0%,#17506b 58%,#1d6a8c 100%); --hero-fallback:#17506b; --sidebar-bg:#101227; --sidebar-ink:#f3f5fc; --sidebar-ink-muted:#c9cee3; --sidebar-hairline:#343a62; --sidebar-active-bg:#1e2242; --sidebar-accent:#53c2eb; --sidebar-active-shadow:0 2px 12px rgba(0,0,0,.45); --stage-bg:#0c0e20; --stage-ink:#f3f5fc; --stage-ink-muted:#c9cee3; --stage-hairline:rgba(255,255,255,.22); --stage-panel:rgba(255,255,255,.09); color-scheme:dark; } /* ============ Tokens · Hoher Kontrast =============================== */ :root[data-uv-contrast="high"] { --bg:#ffffff; --content-bg:#ffffff; --surface:#ffffff; --surface-2:#ffffff; --surface-3:#ffffff; --ink:#000000; --ink-muted:#000000; --ink-onbrand:#000000; --line:#000000; --line-strong:#000000; --card-border:#000000; --navy:#101334; --navy-hover:#000000; --on-navy:#ffffff; --sky-soft:#ffffff; --sky-ink:#00304a; --green-soft:#ffffff; --green-ink:#0a4d33; --neutral-soft:#ffffff; --neutral-ink:#000000; --link:#0b3d91; --focus:#000000; --shadow:none; --shadow-lg:0 0 0 2px #000; --hero:#ffffff; --hero-fallback:#ffffff; --sidebar-bg:#ffffff; --sidebar-ink:#000000; --sidebar-ink-muted:#000000; --sidebar-hairline:#000000; --sidebar-active-bg:#e9e9e9; --sidebar-accent:#101334; --sidebar-active-shadow:none; --stage-bg:#ffffff; --stage-ink:#000000; --stage-ink-muted:#000000; --stage-hairline:#000000; --stage-panel:#ffffff; --stage-accent:#101334; } /* ============ Tokens · Dunkel + Hoher Kontrast ===================== */ :root[data-uv-theme="dark"][data-uv-contrast="high"] { --bg:#000000; --content-bg:#000000; --surface:#000000; --surface-2:#000000; --surface-3:#000000; --ink:#ffffff; --ink-muted:#ffffff; --ink-onbrand:#ffffff; --line:#ffffff; --line-strong:#ffffff; --card-border:#ffffff; --navy:#ffffff; --navy-hover:#e6e6e6; --on-navy:#000000; --sky-soft:#000000; --sky-ink:#8ad6f4; --green-soft:#000000; --green-ink:#7fe3b8; --neutral-soft:#000000; --neutral-ink:#ffffff; --link:#8ad6f4; --focus:#ffffff; --hero:#000000; --hero-fallback:#000000; --sidebar-bg:#000000; --sidebar-ink:#ffffff; --sidebar-ink-muted:#ffffff; --sidebar-hairline:#ffffff; --sidebar-active-bg:#333333; --sidebar-accent:#ffffff; --sidebar-active-shadow:none; --stage-bg:#000000; --stage-ink:#ffffff; --stage-ink-muted:#ffffff; --stage-hairline:#ffffff; --stage-panel:#333333; --stage-accent:#ffffff; } /* ============ Tokens · Erhöhter Abstand ============================ */ :root[data-uv-spacing="loose"] { --lh:1.95; --ls:.02em; --ws:.10em; --stack:1.6em; } /* ============ Reset / Grundlagen =================================== */ *,*::before,*::after { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; } body { margin:0; font-family:var(--ff); font-size:1rem; line-height:var(--lh); letter-spacing:var(--ls); word-spacing:var(--ws); color:var(--ink); background:var(--bg); } p + p { margin-top:var(--stack); } h1,h2,h3,h4,p,ul,ol,dl,dd,figure { margin:0; } ul,ol { list-style:none; padding:0; } img,svg { display:block; } [hidden] { display:none !important; } a { color:var(--link); } a:hover { text-decoration:underline; } button,input,select,textarea { color:inherit; font-family:inherit; } i.icon { font-size:1.125rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; } :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-radius:8px; box-shadow:0 0 0 6px var(--focus-halo); } #main:focus, #main:focus-visible, .auth__main:focus, .auth__main:focus-visible, .stage__inner:focus, .stage__inner:focus-visible { outline:none; box-shadow:none; } .uv-sr { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .uv-skip { position:absolute; left:16px; top:-70px; z-index:9000; background:var(--navy); color:var(--on-navy); padding:12px 20px; border-radius:8px; font-weight:700; text-decoration:none; transition:top .15s ease; } .uv-skip:focus { top:16px; } @media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } } /* ---------- Kleine Abstands-/Layout-Hilfen (statt Inline-Styles) ---- */ .m-0 { margin:0; } .mt-8 { margin-top:8px; } .mt-14 { margin-top:14px; } .mt-16 { margin-top:16px; } .mt-20 { margin-top:20px; } .mt-24 { margin-top:24px; } .mb-14 { margin-bottom:14px; } .name-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px; } .auth-actions { display:flex; align-items:center; gap:12px; margin-top:28px; } .auth-alt { margin-top:36px; padding-top:24px; border-top:1px solid var(--line); color:var(--ink-muted); } @media (max-width:560px) { .name-grid { grid-template-columns:1fr; } } /* ============ Logo-Umschaltung hell/dunkel ========================= */ [data-uv="logo-dark"] { display:none; } :root[data-uv-theme="dark"] [data-uv="logo-light"] { display:none; } :root[data-uv-theme="dark"] [data-uv="logo-dark"] { display:block; } /* ===================================================================== App-Shell ===================================================================== */ .app { display:grid; grid-template-columns:272px minmax(0,1fr); grid-template-rows:auto 1fr auto; grid-template-areas:"sidebar header" "sidebar main" "sidebar footer"; min-height:100vh; } /* ---------- Sidebar ------------------------------------------------- */ .sidebar { grid-area:sidebar; background:var(--sidebar-bg); border-right:1px solid var(--sidebar-hairline); padding:0 20px 32px; position:sticky; top:0; height:100vh; display:flex; flex-direction:column; } .sidebar__brand { height:84px; padding:0 8px; display:flex; align-items:center; } .sidebar__brand img { width:132px; height:auto; } .sidebar__nav { flex:1; min-height:0; display:flex; flex-direction:column; padding-top:44px; overflow-y:auto; } .sidebar__list { display:grid; gap:8px; } .sidebar__foot-item { margin-top:auto; padding-top:22px; border-top:1px solid var(--sidebar-hairline); } .nav__item { display:flex; align-items:center; gap:16px; padding:15px 18px; min-height:52px; border-radius:14px; color:var(--sidebar-ink); text-decoration:none; font-weight:500; border:1px solid transparent; } .nav__item:hover { background:var(--sidebar-active-bg); text-decoration:none; } .nav__item .icon { color:var(--sidebar-ink-muted); flex:none; } .nav__item[aria-current="page"] { font-weight:700; background:var(--sidebar-active-bg); border:1px solid var(--sidebar-hairline); box-shadow:var(--sidebar-active-shadow); } .nav__item[aria-current="page"] .icon { color:var(--sidebar-accent); } /* ---------- Header -------------------------------------------------- */ .header { grid-area:header; height:84px; box-sizing:border-box; padding:14px 40px; background:var(--content-bg); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:300; display:flex; align-items:center; gap:16px; } .header.is-scrolled { box-shadow:var(--shadow); } .header--static { position:static; } .brand-link { display:flex; align-items:center; } .brand-link img { width:120px; height:auto; } .header__spacer { flex:1; } .burger { display:none; width:44px; height:44px; border-radius:10px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); place-items:center; cursor:pointer; } /* ---------- Main / Footer ------------------------------------------ */ .main { grid-area:main; padding:44px 40px 80px; } .page { max-width:1180px; margin:0 auto; } .page--has-breadcrumb { padding-top:16px; } /* textbündig zum Nav-Label */ .footer { grid-area:footer; padding:22px 40px; background:var(--content-bg); border-top:1px solid var(--line); font-size:.875rem; color:var(--ink-muted); display:flex; align-items:center; gap:16px; flex-wrap:wrap; } .footer nav { margin-left:auto; } .footer ul { display:flex; gap:20px; flex-wrap:wrap; } .footer a { color:var(--link); } /* ===================================================================== Kopfzeilen-Steuerungen ===================================================================== */ /* Sprachumschalter (Segment) */ .lang-group { display:flex; gap:4px; padding:4px; border:1px solid var(--line-strong); border-radius:12px; } .lang-btn { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:6px 12px; border-radius:8px; font-size:.875rem; font-weight:700; border:0; cursor:pointer; background:transparent; color:var(--ink); } .lang-btn[aria-pressed="true"] { background:var(--navy); color:var(--on-navy); } .lang-flag { width:24px; height:16px; border-radius:2px; border:1px solid rgba(0,0,0,.28); flex:none; } /* Barrierefreiheits-Panel */ .a11y { position:relative; } .a11y__btn { display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:8px 16px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line-strong); color:var(--ink); font:inherit; font-weight:600; cursor:pointer; } .a11y__btn .icon { color:var(--navy); } .a11y__btn .caret { font-size:.7rem; color:var(--ink-muted); transition:transform .18s ease; } .a11y__btn[aria-expanded="true"] .caret { transform:rotate(180deg); } .a11y__panel { position:absolute; right:0; top:calc(100% + 12px); width:310px; border-radius:14px; border:1px solid var(--card-border); background:var(--surface); box-shadow:var(--shadow-lg); padding:10px; z-index:500; } .a11y__label { padding:8px 10px 10px; font-size:.8125rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted); } .a11y__row { width:100%; min-height:48px; padding:10px 12px; border-radius:10px; display:flex; align-items:center; gap:12px; text-align:left; cursor:pointer; background:transparent; border:0; color:var(--ink); font:inherit; } .a11y__row:hover { background:var(--surface-2); } .a11y__row[aria-pressed="true"] { background:var(--sky-soft); } .a11y__row .icon { color:var(--navy); flex:none; } .a11y__row .txt { flex:1; } .a11y__pill { font-size:.75rem; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--surface-2); color:var(--ink-muted); } .a11y__row[aria-pressed="true"] .a11y__pill { background:var(--navy); color:var(--on-navy); } /* Benutzer-Chip + Menü */ .user { position:relative; } .user__chip { display:flex; align-items:center; gap:10px; min-height:44px; background:transparent; border:1px solid transparent; border-radius:12px; padding:4px 12px 4px 4px; font:inherit; color:var(--ink); cursor:pointer; } .user__chip:hover { background:var(--surface-2); } .avatar { width:38px; height:38px; border-radius:12px; background:var(--sky-soft); color:var(--sky-ink); display:grid; place-items:center; font-weight:800; font-size:.85rem; flex:none; } .user__name { font-weight:600; font-size:.9375rem; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .user__caret { font-size:.72rem; color:var(--ink-muted); transition:transform .18s ease; } .user__chip[aria-expanded="true"] .user__caret { transform:rotate(180deg); } .user__menu { position:absolute; right:0; top:calc(100% + 10px); min-width:262px; background:var(--surface); border:1px solid var(--card-border); border-radius:14px; box-shadow:var(--shadow-lg); padding:8px; z-index:500; } .user__head { padding:12px 12px 10px; border-bottom:1px solid var(--line); margin-bottom:6px; } .user__head .who { font-weight:700; } .user__head .role { font-size:.8125rem; color:var(--ink-muted); } .user__menu a { display:flex; align-items:center; gap:12px; padding:12px; border-radius:10px; color:var(--ink); text-decoration:none; min-height:44px; } .user__menu a:hover { background:var(--surface-2); text-decoration:none; } .user__menu a .icon { color:var(--navy); } /* ===================================================================== Bausteine ===================================================================== */ /* Breadcrumb */ .breadcrumb { font-size:.875rem; margin-bottom:14px; } .breadcrumb ol { display:flex; flex-wrap:wrap; gap:8px; align-items:center; color:var(--ink-muted); } .breadcrumb a { color:var(--link); } .breadcrumb [aria-current="page"] { color:var(--ink); font-weight:600; } .breadcrumb .sep { color:var(--ink-muted); } /* Seiten-Kopf */ .page__title { font-size:1.875rem; font-weight:800; letter-spacing:-.01em; } .page__intro { font-size:1.0625rem; color:var(--ink-muted); max-width:70ch; margin-top:12px; } /* Karte */ .card { border-radius:18px; border:1px solid var(--card-border); box-shadow:var(--shadow); background:var(--surface); overflow:hidden; } .card__head { padding:26px 32px; border-bottom:1px solid var(--line); font-size:1.25rem; font-weight:700; } .card__body { padding:32px; } .card__foot { padding:22px 32px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:12px; } /* Buttons */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; font:inherit; cursor:pointer; text-decoration:none; } .btn:hover { text-decoration:none; } .btn--primary { padding:14px 26px; min-height:52px; border-radius:10px; font-size:1rem; font-weight:700; border:1px solid transparent; background:var(--navy); color:var(--on-navy); } .btn--primary:hover { background:var(--navy-hover); } .btn--secondary { padding:12px 20px; min-height:48px; border-radius:10px; font-weight:700; background:var(--surface-2); color:var(--ink); border:1px solid var(--line-strong); } .btn--secondary .icon { color:var(--navy); } .btn--secondary:hover { background:var(--surface-3); } .btn--text { background:transparent; border:0; color:var(--link); text-decoration:underline; min-height:44px; padding:0 4px; font-weight:600; } .icon-btn { width:44px; height:44px; border-radius:10px; border:1px solid var(--line-strong); background:var(--surface); display:grid; place-items:center; cursor:pointer; color:var(--ink); } .icon-btn:hover { background:var(--surface-2); } .btn[disabled] { opacity:.55; cursor:not-allowed; } /* Formularelemente */ .field { display:grid; } .field + .field { margin-top:20px; } .field label { display:block; font-weight:600; margin-bottom:8px; } .field .req { color:var(--link); } .input { width:100%; padding:14px 16px; min-height:52px; border:1px solid var(--line-strong); border-radius:10px; background:var(--surface); color:var(--ink); font:inherit; } .input:hover { border-color:var(--ink-muted); } .input[aria-invalid="true"] { border-color:#b3261e; } :root[data-uv-theme="dark"] .input[aria-invalid="true"] { border-color:#ffa39e; } .hint { font-size:.875rem; color:var(--ink-muted); margin-top:8px; } .error { font-size:.875rem; color:#b3261e; font-weight:600; margin-top:8px; display:none; } :root[data-uv-theme="dark"] .error { color:#ffa39e; } .field.has-error .error { display:block; } .input-wrap { position:relative; } .input-wrap--icon .input { padding-left:46px; } .field__icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ink-muted); pointer-events:none; } .input-wrap--toggle .input { padding-right:56px; } .pw-toggle { position:absolute; right:6px; top:50%; transform:translateY(-50%); } /* Chips / Status */ .chip { display:inline-flex; align-items:center; gap:8px; font-size:.875rem; font-weight:700; padding:5px 12px; border-radius:999px; } .chip .icon { font-size:.8125rem; } .chip--green { background:var(--green-soft); color:var(--green-ink); } .chip--sky { background:var(--sky-soft); color:var(--sky-ink); } .chip--neutral { background:var(--neutral-soft); color:var(--neutral-ink); } .chip--amber { background:#fdf3e3; color:#8a5300; } :root[data-uv-theme="dark"] .chip--amber { background:#3a2e14; color:#f0c987; } :root[data-uv-contrast="high"] .chip--amber { background:#ffffff; color:#5a3600; } :root[data-uv-theme="dark"][data-uv-contrast="high"] .chip--amber { background:#000000; color:#ffd27f; } /* Hinweisbox */ .note { display:flex; gap:12px; align-items:flex-start; padding:16px 18px; border-radius:12px; font-weight:500; } .note .icon { flex:none; margin-top:2px; } .note--green { background:var(--green-soft); color:var(--green-ink); border:1px solid var(--green); } .note--neutral { background:var(--neutral-soft); color:var(--neutral-ink); border:1px solid var(--line-strong); } .note--sky { background:var(--sky-soft); color:var(--sky-ink); border:1px solid var(--sky); } /* ===================================================================== Startseite ===================================================================== */ .hero { border-radius:20px; padding:52px 56px; border:1px solid var(--line); background:var(--hero); background-color:var(--hero-fallback); color:var(--ink-onbrand); overflow:hidden; position:relative; } .hero__eyebrow { font-size:.875rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; } .hero__title { font-size:2.25rem; font-weight:800; letter-spacing:-.015em; margin-top:10px; max-width:18ch; } .hero__intro { font-size:1.0625rem; margin-top:14px; max-width:62ch; } .deco { position:absolute; display:grid; } .deco span { border-radius:4px; } /* Deko-Cluster Startseite-Hero (3×) */ .deco--hero { right:36px; top:36px; grid-template-columns:repeat(3,26px); grid-auto-rows:26px; gap:8px; opacity:.55; } .deco--hero span:nth-child(1){ background:rgba(255,255,255,.5); } .deco--hero span:nth-child(3){ background:rgba(255,255,255,.4); } .deco--hero span:nth-child(5){ background:rgba(255,255,255,.45); } .deco--hero span:nth-child(6){ background:rgba(36,43,97,.16); } /* Deko-Cluster Auth-Markenseite (4×) */ .deco--auth { right:-38px; top:44px; grid-template-columns:repeat(4,34px); grid-auto-rows:34px; gap:10px; opacity:.55; } .deco--auth span:nth-child(1){ background:rgba(255,255,255,.55); } .deco--auth span:nth-child(3){ background:rgba(255,255,255,.30); } .deco--auth span:nth-child(4){ background:rgba(255,255,255,.45); } .deco--auth span:nth-child(6){ background:rgba(255,255,255,.25); } .deco--auth span:nth-child(7){ background:rgba(255,255,255,.40); } .deco--auth span:nth-child(9){ background:rgba(36,43,97,.20); } .deco--auth span:nth-child(12){ background:rgba(36,43,97,.14); } .kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; margin-top:32px; } .kpi { padding:30px 32px; border-radius:18px; border:1px solid var(--card-border); box-shadow:var(--shadow); background:var(--surface); display:flex; flex-direction:column; gap:8px; } .kpi__value { font-size:2.5rem; font-weight:800; line-height:1; } .kpi__value--green { color:var(--green-ink); } .kpi__value--ink { color:var(--ink); } .kpi__value--sky { color:var(--sky-ink); } .kpi__label { color:var(--ink-muted); } .kpi__link { display:inline-flex; align-items:center; gap:10px; min-height:44px; font-weight:700; font-size:.9375rem; color:var(--link); text-decoration:none; margin-top:2px; } .kpi__link:hover { text-decoration:underline; } /* Zeile „nächster Schritt" / Schulungszeile */ .row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:26px; align-items:center; } .badge { width:56px; height:56px; border-radius:16px; display:grid; place-items:center; font-size:1.25rem; font-weight:800; flex:none; } .badge--sky { background:var(--sky-soft); color:var(--sky-ink); } .badge--green { background:var(--green-soft); color:var(--green-ink); } .badge--neutral { background:var(--neutral-soft); color:var(--neutral-ink); } .row__title { font-size:1.0625rem; font-weight:700; line-height:1.4; } .chip-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } /* Disclosure „bereits absolviert" */ .disclosure__trigger { width:100%; text-align:left; background:transparent; border:0; font:inherit; cursor:pointer; padding:26px 32px; min-height:68px; display:flex; align-items:center; gap:14px; } .disclosure__title { font-size:1.25rem; font-weight:700; } .disclosure__count { margin-left:auto; font-size:.875rem; font-weight:600; color:var(--ink-muted); } .chevron { color:var(--ink-muted); transition:transform .18s ease; } [aria-expanded="true"] > .chevron, [aria-expanded="true"] .chevron { transform:rotate(180deg); } .disclosure__panel { padding:0 32px 10px; border-top:1px solid var(--line); } .mini-row { display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); } .mini-row:last-child { border-bottom:0; } .mini-row__title { font-weight:700; flex:1; min-width:240px; } /* ===================================================================== Schulungsliste (Screen 4) + Zertifikate-Zeilen ===================================================================== */ .tlist { display:grid; gap:18px; margin-top:40px; } .tlist__item { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:26px; align-items:center; padding:30px 32px; border-radius:18px; border:1px solid var(--card-border); box-shadow:var(--shadow); background:var(--surface); } /* ===================================================================== Absolvierte Schulungen (Akkordeon) ===================================================================== */ .acc { display:grid; gap:16px; margin-top:40px; } .acc__item { border-radius:18px; border:1px solid var(--card-border); box-shadow:var(--shadow); background:var(--surface); overflow:hidden; } .acc__trigger { width:100%; text-align:left; background:transparent; border:0; font:inherit; cursor:pointer; padding:26px 32px; min-height:68px; display:grid; grid-template-columns:minmax(0,1.6fr) auto 24px; gap:22px; align-items:center; } .acc__title { font-size:1rem; font-weight:700; line-height:1.4; } .acc__trigger .chevron { justify-self:center; } .acc__panel { padding:10px 32px 32px; border-top:1px solid var(--line); } .section-label { text-transform:uppercase; letter-spacing:.07em; font-size:.8125rem; font-weight:700; color:var(--ink-muted); margin:20px 0 10px; } .section-label + .section-label, .acc__panel .section-label:nth-of-type(2) { margin-top:26px; } .dl { display:grid; grid-template-columns:220px minmax(0,1fr); gap:8px 20px; } .dl dt { color:var(--ink-muted); } .dl dd { font-weight:600; margin:0; } .table-scroll { overflow-x:auto; } .htable { width:100%; border-collapse:collapse; } .htable th { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); font-size:.8125rem; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.05em; } .htable td { padding:12px; border-bottom:1px solid var(--line); } .htable th:last-child, .htable td:last-child { text-align:right; } .row-actions { display:inline-flex; gap:8px; } /* ===================================================================== Lernpfad (Screen 9) ===================================================================== */ .path { margin-top:40px; } .path__item { position:relative; display:grid; grid-template-columns:56px minmax(0,1fr); gap:24px; padding-bottom:28px; } .path__line { position:absolute; left:27px; top:56px; bottom:0; width:2px; background:var(--line); } .path__line--done { background:var(--green); } .path__marker { width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-size:1.125rem; font-weight:800; border:2px solid var(--line-strong); z-index:1; background:var(--surface); color:var(--ink-muted); } .path__marker--done { background:var(--green-soft); color:var(--green-ink); border-color:var(--green); } .path__marker--next { background:var(--navy); color:var(--on-navy); border-color:var(--navy); } .path__card { border-radius:18px; border:1px solid var(--card-border); box-shadow:var(--shadow); background:var(--surface); padding:24px 28px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:22px; align-items:center; } .path__step { font-size:.8125rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); } .path__title { font-size:1.0625rem; font-weight:700; margin-top:4px; } /* ===================================================================== Zertifikate (Screen 10) ===================================================================== */ .cert-summary { margin-top:16px; } .cert-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr)); gap:20px; margin-top:24px; } .cert-card { border-radius:18px; border:1px solid var(--card-border); box-shadow:var(--shadow); background:var(--surface); overflow:hidden; display:flex; flex-direction:column; } .cert-card__band { height:8px; background:var(--hero); background-color:var(--hero-fallback); } .cert-card__body { padding:28px 30px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px; align-items:start; } .cert-seal { width:56px; height:56px; border-radius:50%; background:var(--sky-soft); color:var(--sky-ink); border:1px solid var(--sky); display:grid; place-items:center; font-size:1.375rem; } .cert-card__title { font-size:1.0625rem; font-weight:700; line-height:1.4; } .cert-card__foot { margin-top:auto; padding:18px 30px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:12px; } /* ===================================================================== Profil (Screen 6) ===================================================================== */ .grid-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr)); gap:24px; margin-top:32px; align-items:start; } /* ===================================================================== Hilfe & Kontakt (Screen 11) + Barrierefreiheitserklärung (8) ===================================================================== */ .prose { max-width:74ch; } .prose h2 { font-size:1.375rem; font-weight:700; margin-top:36px; } .prose h3 { font-size:1.0625rem; font-weight:700; } .prose p { margin-top:12px; } .prose ul { list-style:disc; padding-left:24px; display:grid; gap:8px; margin-top:12px; } .addr { font-style:normal; border-radius:16px; border:1px solid var(--card-border); padding:22px 26px; box-shadow:var(--shadow); background:var(--surface); line-height:1.9; } /* FAQ (kleinere Akkordeons) */ .faq { display:grid; gap:16px; margin-top:24px; max-width:78ch; } .faq .acc__trigger { grid-template-columns:minmax(0,1fr) 24px; padding:22px 26px; min-height:64px; } .faq .acc__title { font-size:1.0625rem; } .faq .acc__panel { padding:20px 26px 26px; } /* ===================================================================== Auth (Login / Registrierung) ===================================================================== */ .auth { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); min-height:100vh; } .auth__aside { background:var(--hero); background-color:var(--hero-fallback); border-right:1px solid var(--line); color:var(--ink-onbrand); padding:200px 56px 48px; display:flex; flex-direction:column; gap:32px; overflow:hidden; position:sticky; top:0; align-self:start; height:100vh; } .auth__aside img.auth__logo { width:184px; height:auto; align-self:flex-start; } .auth__claim { font-size:1.75rem; font-weight:700; line-height:1.25; max-width:46ch; } .auth__sub { font-size:1.0625rem; margin-top:16px; max-width:72ch; } .auth__visual { max-width:420px; aspect-ratio:4/3; border-radius:16px; box-shadow:var(--shadow-lg); margin-top:auto; object-fit:cover; width:100%; } .auth__partner { font-size:.875rem; font-weight:600; } .auth__col { background:var(--content-bg); display:flex; flex-direction:column; } .auth__topbar { height:84px; box-sizing:border-box; padding:20px 40px; flex:none; display:flex; align-items:center; gap:12px; } .auth__topbar .header__spacer { flex:1; } .auth__main { flex:1; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:116px 40px 24px; } .auth-form { width:min(440px,100%); } .auth-form h1 { font-size:1.75rem; font-weight:700; letter-spacing:-.01em; } .auth-form .sub { margin-top:10px; color:var(--ink-muted); } .auth__footer { padding:20px 40px 28px; border-top:1px solid var(--line); } .auth__footer-inner { width:min(440px,100%); margin:0 auto; display:flex; flex-direction:column; gap:10px; font-size:.875rem; color:var(--ink-muted); } .auth__footer-inner nav ul { display:flex; gap:16px; flex-wrap:wrap; } /* Rollen-Radiogruppe (Registrierung) */ .roles { border:0; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; } .roles legend { font-weight:600; margin-bottom:8px; } .role-opt { display:flex; align-items:center; gap:10px; min-height:48px; padding:10px 14px; border-radius:10px; font-weight:600; font-size:.9375rem; border:1px solid var(--line-strong); background:var(--surface); cursor:pointer; } .role-opt input { width:20px; height:20px; accent-color:var(--navy); } .role-opt:has(input:checked) { border-color:var(--navy); background:var(--sky-soft); } /* ===================================================================== Player (Screen 7) ===================================================================== */ .stage { min-height:100vh; display:flex; flex-direction:column; background:var(--stage-bg); } .stage__bar { padding:18px 32px; background:var(--stage-panel); border-bottom:1px solid var(--stage-hairline); display:flex; gap:16px; align-items:center; } .stage__mark { font-size:1.1rem; font-weight:800; letter-spacing:-.01em; color:var(--stage-ink); } .stage__course { color:var(--stage-ink-muted); } .stage__sep { width:1px; height:24px; background:var(--stage-hairline); } .stage__close { width:44px; height:44px; border-radius:10px; border:1px solid var(--stage-hairline); margin-left:auto; background:transparent; color:var(--stage-ink); display:grid; place-items:center; cursor:pointer; } .stage__body { flex:1; display:grid; place-items:center; text-align:center; padding:80px 28px; } .stage__inner { max-width:56ch; } .stage__badge { width:112px; height:112px; border-radius:28px; font-size:2.4rem; background:var(--stage-panel); border:1px solid var(--stage-hairline); color:var(--stage-accent); display:grid; place-items:center; margin:0 auto 32px; } .stage__title { font-size:1.875rem; font-weight:800; line-height:1.25; color:var(--stage-ink); } .stage__hint { color:var(--stage-ink-muted); margin-top:18px; } .stage__foot { background:var(--surface); padding:18px 28px; display:flex; justify-content:flex-end; gap:12px; } /* ===================================================================== Toasts / Dialog ===================================================================== */ .toasts { position:fixed; right:20px; bottom:20px; z-index:950; display:grid; gap:10px; } .toast { role:status; background:var(--navy); color:var(--on-navy); padding:14px 18px; border-radius:12px; box-shadow:var(--shadow-lg); max-width:min(380px, calc(100vw - 40px)); font-weight:600; display:flex; align-items:center; gap:10px; } .modal-backdrop { position:fixed; inset:0; background:rgba(16,18,39,.6); display:grid; place-items:center; padding:24px; z-index:900; } .modal-backdrop[hidden] { display:none; } .modal { width:min(520px,100%); border-radius:18px; box-shadow:var(--shadow-lg); background:var(--surface); overflow:hidden; } .modal__head { background:var(--navy); color:var(--on-navy); padding:20px 24px; display:flex; align-items:center; gap:12px; } .modal__title { font-size:1.125rem; font-weight:700; } .modal__close { margin-left:auto; width:44px; height:44px; border-radius:10px; border:1px solid rgba(255,255,255,.3); background:transparent; color:var(--on-navy); display:grid; place-items:center; cursor:pointer; } .modal__body { padding:26px; } .modal__foot { padding:18px 24px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:12px; } /* ===================================================================== Lesehilfe (Fokusleiste) ===================================================================== */ .ruler { position:fixed; left:0; right:0; background:rgba(9,11,26,.62); z-index:8000; pointer-events:none; } /* ===================================================================== Off-Canvas Scrim (mobil) ===================================================================== */ .scrim { position:fixed; inset:0; background:rgba(16,18,39,.5); z-index:650; } .scrim[hidden] { display:none; } /* ===================================================================== Reflow / Responsive ===================================================================== */ @media (max-width:1100px) { .kpis { grid-template-columns:1fr 1fr; } } @media (max-width:1000px) { .a11y__btn .txt { display:none; } .a11y__btn { padding:8px 12px; } } @media (max-width:880px) { .app { grid-template-columns:1fr; grid-template-areas:"header" "main" "footer"; } .sidebar { position:fixed; top:0; left:0; width:272px; height:100vh; z-index:700; transform:translateX(-100%); transition:transform .2s ease; box-shadow:var(--shadow-lg); } .sidebar.is-open { transform:translateX(0); } .burger { display:grid; } .header { padding:12px 18px; } .main { padding:28px 18px 48px; } .footer { padding:18px; } .kpis { grid-template-columns:1fr; } .auth { grid-template-columns:1fr; } .auth__aside { padding:28px 22px; position:static; height:auto; } .auth__visual, .deco { display:none; } .auth__main { padding:40px 22px 24px; } .tlist__item { grid-template-columns:auto minmax(0,1fr); } .tlist__item .btn--primary { grid-column:1 / -1; justify-content:center; } .acc__trigger { grid-template-columns:minmax(0,1fr) 24px; } .acc__trigger .chip { grid-column:1; } } @media (max-width:780px) { .user__name { display:none; } } @media (max-width:560px) { .main { padding:20px 14px 40px; } .hero { padding:26px 20px; } .hero__title { font-size:1.625rem; } .dl { grid-template-columns:1fr; gap:0; } .dl dt { margin-top:10px; } .tlist__item { grid-template-columns:1fr; } .a11y__panel { position:fixed; left:12px; right:12px; top:78px; width:auto; } .lang-flag { display:none; } .toasts { left:12px; right:12px; bottom:12px; } .cert-card__foot, .card__foot { flex-direction:column; } .cert-card__foot .btn, .card__foot .btn { width:100%; } } /* Language select in the auth/app topbar (not part of the original click dummy). */ .lang-select { font: inherit; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); }