/* ================================================================ ELAN-REF Portal — design system bundle PRD-0 §4.16 + Claude Design prototype port ================================================================ */ /* ----------------------------------------------------------------- Fonts — BaWueSans, served as WOFF2 (~40% smaller than the source OTFs they were converted from via fontTools). URLs are RELATIVE (../fonts/), not root-absolute (/fonts/): this CSS loads from {PathBase}/css/portal.css, so a relative ref resolves to {PathBase}/fonts/ and survives the IIS sub-app prefix (/version/{slug}). A leading-slash URL would 404 under the sub-app. ----------------------------------------------------------------- */ @font-face { font-family: 'BaWueSans'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/BaWueSans-Regular.woff2') format('woff2'); } @font-face { font-family: 'BaWueSans'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/BaWueSans-SemiBold.woff2') format('woff2'); } @font-face { font-family: 'BaWueSans'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/BaWueSans-Bold.woff2') format('woff2'); } /* ----------------------------------------------------------------- Tokens — tenant-variable custom properties (--brand-primary, --brand-accent, etc.) are set inline on at render time (see _Layout.cshtml). Fixed tokens live here. Token-rename note: the prototype uses --accent for the tenant primary color (yellow). We map that to our existing --brand-primary so tenant values flow unchanged. ----------------------------------------------------------------- */ :root { /* Ink / surface scale — ported from prototype */ --ink: #0A0A0A; --ink-2: #2A2A2A; --ink-3: #5C5C5C; --ink-4: #8C8C8C; --rule: #E5E5E2; --rule-2: #D6D6D2; --surface: #FFFFFF; --surface-2: #F5F5F2; --surface-3: #EDEDEA; --surface-card: #F4F3F1; /* cream login card */ --surface-card-border: #E4E2DE; --focus: #0A0A0A; --success: #0A7A3E; --danger: #C8382D; --info: #1a5490; /* Backwards-compat aliases for legacy classes still used on deferred pages (Certificate, Feedback, Klausurensammlung, etc.) */ --text: var(--ink); --muted: var(--ink-3); --bg: var(--surface); --surface-muted: var(--surface-2); --border: var(--rule); --footer-bg: var(--ink); --footer-text: #ffffff; /* Radii */ --radius-sm: 4px; --radius: 8px; --radius-lg: 14px; /* Header height */ --nav-h: 150px; /* Type scale */ --text-base: 15px; --text-body-lh: 1.6; --title-lg: 44px; --title-md: 28px; --title-sm: 20px; /* Spacing scale (legacy, kept for deferred pages) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* Page rhythm */ --page-pad-y: 48px; --section-gap: 40px; --card-pad: 24px; /* Container */ --container-max: 1200px; --container-pad: 32px; } /* ----------------------------------------------------------------- Reset & base ----------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; background: var(--surface); } body { font-family: 'BaWueSans', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: var(--text-base); line-height: var(--text-body-lh); color: var(--ink); background: var(--surface); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; } main { flex: 1 0 auto; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, select, textarea { font-family: inherit; font-size: inherit; } h1, h2, h3, h4, h5, h6 { font-family: 'BaWueSans', sans-serif; font-weight: 600; letter-spacing: -0.015em; margin: 0; line-height: 1.1; } :focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; } .skip-link { position: absolute; top: -100px; left: 0; background: var(--ink); color: #fff; padding: var(--space-3) var(--space-4); text-decoration: none; z-index: 100; } .skip-link:focus { top: 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ----------------------------------------------------------------- Container ----------------------------------------------------------------- */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); width: 100%; } /* ----------------------------------------------------------------- Header — sticky 150px band, brand-logo left, primary-nav + Menü button right. ----------------------------------------------------------------- */ .site-header { border-bottom: 1px solid var(--rule); background: #fff; position: sticky; top: 0; z-index: 50; } .site-header-inner { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: flex; align-items: center; text-decoration: none; color: var(--ink); flex-shrink: 1; min-width: 0; } .brand-logo { height: var(--nav-h); width: auto; display: block; max-width: 100%; object-fit: contain; object-position: left center; /* Visual breathing room between logo and band edge */ padding: 8px 0; } .primary-nav { display: flex; align-items: center; gap: 4px; align-self: flex-end; margin-bottom: 15px; flex-shrink: 0; } .nav-item { height: 30px; padding: 0 16px; border-radius: 4px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; display: inline-flex; align-items: center; gap: 6px; } .nav-item:hover { background: var(--surface-2); color: var(--ink); } .nav-item.is-active, .nav-item.active { background: var(--ink); color: #fff; } .nav-item.is-active:hover, .nav-item.active:hover { background: var(--ink); color: #fff; } .nav-item .ext { font-size: 11px; opacity: .7; } .menu-btn { height: 30px; padding: 0 14px 0 12px; display: inline-flex; align-items: center; gap: 10px; border-radius: 4px; background: var(--ink); color: #fff; font-weight: 500; font-size: 13px; transition: background .15s; cursor: pointer; border: none; } .menu-btn:hover { background: #222; } .menu-btn .bars { display: inline-flex; flex-direction: column; gap: 3px; } .menu-btn .bars span { width: 16px; height: 2px; background: var(--brand-primary, #FFFC00); border-radius: 1px; display: block; } /* ----------------------------------------------------------------- Hero / Carousel — current portal markup (kept). The yellow band is var(--brand-primary), arrows anchor to .hero (offset parent), dots sit below the slide content. ----------------------------------------------------------------- */ .hero { background: var(--brand-primary, #FFFC00); color: var(--brand-primary-contrast, var(--ink)); overflow: hidden; position: relative; } /* Clips off-screen slides at the container's content edges so they don't bleed into the full-width yellow band on either side. */ .carousel-viewport { overflow: hidden; } .carousel-track { display: flex; transition: transform 0.4s ease; } .carousel-slide { flex: 0 0 100%; display: flex; align-items: stretch; gap: 0; min-height: 380px; } .carousel-image { flex: 0 0 50%; max-width: 50%; overflow: hidden; } .carousel-image img { width: 100%; height: 100%; object-fit: cover; } .carousel-content { flex: 1; padding: var(--space-7) var(--space-7); display: flex; flex-direction: column; justify-content: center; gap: 16px; } .carousel-content h1 { font-size: var(--title-lg); font-weight: 600; letter-spacing: -0.02em; margin: 0; } .carousel-content p { font-size: 16px; max-width: 44ch; color: var(--ink-2); margin: 0; } /* Arrows + dots live in the .carousel-controls bar BELOW the yellow band (not absolutely positioned over it). Layout: prev arrow on the left, dots centred, next arrow on the right. */ .carousel-controls .container { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; gap: 16px; } .carousel-arrow { background: #fff; border: 1px solid var(--rule); width: 44px; height: 44px; border-radius: 999px; cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.06); color: var(--ink); transition: transform .15s, border-color .15s; padding: 0; flex-shrink: 0; } .carousel-arrow:hover { transform: scale(1.06); border-color: var(--ink-3); } .carousel-arrow img, .carousel-arrow svg { width: 18px; height: 18px; } .carousel-dots { display: flex; justify-content: center; gap: 8px; padding: 0; flex: 1; } .carousel-dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(10,10,10,.25); border: none; padding: 0; cursor: pointer; transition: background .2s, width .2s; } .carousel-dot[aria-current="true"] { background: var(--ink); width: 24px; } /* ----------------------------------------------------------------- Page body / breadcrumb / page-grid ----------------------------------------------------------------- */ .page { flex: 1; padding: var(--page-pad-y) 0 72px; } .breadcrumb { font-size: 13px; color: var(--ink-3); padding: 16px 0; border-bottom: 1px solid var(--rule); } .breadcrumb a { color: var(--ink-3); text-decoration: none; border-bottom: 1px solid transparent; } .breadcrumb a:hover { color: var(--ink); border-color: var(--ink-3); } .breadcrumb .sep { margin: 0 8px; color: var(--ink-4); } .breadcrumb .current { color: var(--ink); font-weight: 500; } .page-grid { display: grid; grid-template-columns: 1fr 340px; gap: 56px; align-items: start; } .page-grid--full { grid-template-columns: 1fr; } .page-title { font-size: var(--title-lg); margin-bottom: 8px; } .page-lede { font-size: 17px; color: var(--ink-3); max-width: 60ch; margin-bottom: 36px; } .section-title { font-size: var(--title-md); margin-bottom: 20px; } /* Prose */ .prose p { margin: 0 0 18px; max-width: 65ch; } .prose p.lead, .prose .lead { font-size: 17px; color: var(--ink-2); } .prose strong { font-weight: 600; color: var(--ink); } .prose a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; } /* ----------------------------------------------------------------- Sidebar — flex column wrapper. Sticks under the header. ----------------------------------------------------------------- */ .sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: calc(var(--nav-h) + 24px); } .sidebar h3 { font-size: 15px; font-weight: 600; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); letter-spacing: -0.005em; } /* ----------------------------------------------------------------- Cards ----------------------------------------------------------------- */ .card { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--card-pad); margin-bottom: var(--space-4); } .card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .card-title { font-family: 'BaWueSans', sans-serif; font-size: 17px; font-weight: 600; letter-spacing: -0.005em; } .sidebar .card { margin-bottom: 0; } /* Login card — cream surface (PRD-3 detail spec, retained) */ .login-card { background: var(--surface-card); border: none; } .login-card h3 { border-bottom: none; padding-bottom: 0; margin-bottom: 18px; font-size: 15px; font-weight: 700; } .login-card .field { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 12px; margin-bottom: 10px; } .login-card .field label { margin-bottom: 0; font-size: 13px; font-weight: 400; color: var(--ink); text-transform: none; letter-spacing: 0; } .login-card .field input { background: #fff; border: 1px solid transparent; height: 32px; width: 100%; padding: 0 10px; border-radius: 2px; } .login-card .field input:focus { border-color: var(--ink); box-shadow: none; outline: none; } .login-card .btn-row { justify-content: flex-end; margin-top: 4px; margin-bottom: 14px; } .login-card .login-submit { font-weight: 700; font-size: 13px; } .login-card .links-list { border-top: 1px solid var(--surface-card-border); padding-top: 14px; margin-top: 0; } .login-card .links-list a { font-weight: 700; font-size: 13px; } /* Sidebar banner (auth feedback) */ .sidebar-banner { padding: var(--space-3); margin-bottom: var(--space-4); background: #fff; border-left: 3px solid var(--brand-primary, #FFFC00); font-size: 14px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } /* ----------------------------------------------------------------- Form fields (general, full-width) ----------------------------------------------------------------- */ .field { margin-bottom: 14px; } .field label { display: block; font-size: 12px; font-weight: 500; color: var(--ink-3); margin-bottom: 6px; letter-spacing: 0.02em; text-transform: uppercase; } .field input, .field select, .field textarea { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--rule-2); border-radius: 4px; background: #fff; color: var(--ink); transition: border-color .15s, box-shadow .15s; } .field textarea { height: auto; padding: 10px 12px; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary, #FFFC00) 40%, transparent); } /* ----------------------------------------------------------------- Buttons .btn = base (used by both legacy and new variants). When no variant class is present, .btn falls back to legacy navy fill so deferred pages keep working. New design pages combine `.btn .btn-primary` / `.btn-accent` / `.btn-ghost` per prototype. ----------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 4px; font-weight: 500; font-size: 14px; transition: background .15s, transform .05s, opacity .15s; white-space: nowrap; text-decoration: none; cursor: pointer; border: 1px solid transparent; /* Legacy fallback colors when no variant is applied */ background: var(--brand-accent, #0A0A0A); color: var(--brand-accent-contrast, #ffffff); } .btn:active { transform: translateY(1px); } .btn:hover { opacity: 0.92; } .btn[aria-disabled="true"], .btn:disabled { opacity: 0.55; cursor: not-allowed; } .btn-primary { background: var(--ink); color: var(--brand-primary, #FFFC00); } .btn-primary:hover { background: #222; opacity: 1; } .btn-accent { background: var(--brand-primary, #FFFC00); color: var(--ink); font-weight: 600; } .btn-accent:hover { background: #F5F200; opacity: 1; } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule-2); } .btn-ghost:hover { background: var(--surface-2); opacity: 1; } /* Text-only link button */ .btn-link { padding: 0; height: auto; color: var(--ink); font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: none; border: none; } .btn-link:hover { color: var(--ink-2); opacity: 1; } .btn-link .arrow { transition: transform .15s; display: inline-flex; } .btn-link:hover .arrow { transform: translateX(2px); } /* Modifiers retained for legacy compat */ .btn--block { display: flex; width: 100%; justify-content: center; } .btn--secondary { background: transparent; color: var(--brand-accent, #0A0A0A); border-color: var(--brand-accent, #0A0A0A); } .btn-row { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 8px; } /* ----------------------------------------------------------------- Links list ----------------------------------------------------------------- */ .links-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); } .links-list a { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: none; color: var(--ink); } .links-list a:hover { color: var(--ink-2); } .links-list a .arrow { color: var(--ink-3); display: inline-flex; } /* Legacy login-form link list (kept for ResetPassword/ForgotPassword sidebar that still uses the older .sidebar-links class) */ .sidebar-links { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--surface-card-border); padding-top: 14px; } .sidebar-links a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; font-size: 13px; font-weight: 700; } .sidebar-links a::before { content: "→"; display: inline-block; margin-right: .5em; text-decoration: none; } /* Logged-in navigation menu in sidebar */ .sidebar-link-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; } .sidebar-link-list li { padding: 0; border-bottom: 1px solid var(--rule); } .sidebar-link-list li:last-child { border-bottom: none; } .sidebar-link-list a, .sidebar-link-list button { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 0; color: var(--ink); text-decoration: none; background: none; border: none; font: inherit; font-weight: 500; text-align: left; cursor: pointer; width: 100%; } .sidebar-link-list a:hover, .sidebar-link-list button:hover { color: var(--ink-2); } .sidebar-link-list .arrow { color: var(--ink-4); } .sidebar-link-list form { margin: 0; padding: 0; display: contents; } .sidebar-greeting { font-size: 14px; color: var(--ink-3); margin-bottom: var(--space-4); } /* ----------------------------------------------------------------- Item list (downloads, klausuren, online tests) ----------------------------------------------------------------- */ .item-list { display: flex; flex-direction: column; gap: 12px; list-style: none; padding: 0; margin: 0; } .item-card { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; transition: border-color .15s; } .item-card:hover { border-color: var(--ink-3); } .item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; } .item-title { font-family: 'BaWueSans', sans-serif; font-weight: 600; font-size: 17px; letter-spacing: -0.005em; } .item-meta { font-size: 13px; color: var(--ink-3); display: flex; gap: 16px; flex-wrap: wrap; align-items: center; } .item-meta strong { color: var(--ink); font-weight: 500; } .item-action { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; color: var(--ink); padding: 8px 14px; background: var(--brand-primary, #FFFC00); border-radius: 3px; transition: background .15s; border: none; cursor: pointer; } .item-action:hover { background: #F5F200; } .item-action.subtle { background: transparent; padding: 8px 0; } .item-body { font-size: 14px; color: var(--ink-2); max-width: 70ch; } .item-body ul { padding-left: 20px; margin: 8px 0; } .item-body ul li { margin-bottom: 4px; } /* ----------------------------------------------------------------- Tags (mono-style chips) and legacy state badges ----------------------------------------------------------------- */ .tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; background: var(--surface-2); color: var(--ink-2); font-family: 'BaWueSans', sans-serif; } .tag.success { background: color-mix(in srgb, var(--success) 15%, #fff); color: var(--success); } .tag.danger { background: color-mix(in srgb, var(--danger) 15%, #fff); color: var(--danger); } .tag.accent { background: var(--brand-primary, #FFFC00); color: var(--ink); } /* Legacy state badges — kept for deferred pages */ .badge { display: inline-block; padding: 2px var(--space-3); font-size: 0.75rem; font-weight: 600; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.02em; } .badge--active { background: #e0f2e0; color: #1f5a1f; } .badge--upcoming { background: #e3eaf5; color: #1a3f7a; } .badge--expired { background: #eee; color: #555; } .badge--passed { background: #2d7a2d; color: #fff; } .badge--failed { background: #f6d7d5; color: #7a1f1f; } /* ----------------------------------------------------------------- Progress bar (module cards) ----------------------------------------------------------------- */ .progress { height: 6px; background: var(--surface-3); border-radius: 999px; overflow: hidden; margin-top: 4px; position: relative; } .progress-bar { position: absolute; inset: 0 auto 0 0; background: var(--ink); border-radius: 999px; } .progress[data-complete="true"] .progress-bar { background: var(--success); } /* ----------------------------------------------------------------- Filter bar ----------------------------------------------------------------- */ .filter-bar { display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; padding: 16px 20px; background: var(--surface-2); border-radius: var(--radius); align-items: end; margin-bottom: 20px; } .filter-bar label { font-size: 13px; color: var(--ink-3); display: block; margin-bottom: 4px; text-transform: none; letter-spacing: 0; font-weight: 400; } .filter-bar select, .filter-bar input { width: 100%; height: 38px; padding: 0 12px; background: #fff; border: 1px solid var(--rule-2); border-radius: 4px; color: var(--ink); } .filter-bar .btn, .filter-bar .btn-primary, .filter-bar .btn-accent, .filter-bar .btn-ghost { height: 38px; } /* ----------------------------------------------------------------- User strip (avatar + name pill) ----------------------------------------------------------------- */ .user-strip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--surface-2); border-radius: 999px; font-size: 13px; margin-bottom: 24px; } .user-strip .avatar { width: 24px; height: 24px; border-radius: 999px; background: var(--ink); color: var(--brand-primary, #FFFC00); display: grid; place-items: center; font-weight: 600; font-size: 11px; } /* ----------------------------------------------------------------- Module cards (Programme catalog) ----------------------------------------------------------------- */ .module-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; list-style: none; padding: 0; margin: 0; } .module-card { position: relative; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); padding: 28px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 18px; transition: border-color .15s, transform .15s; overflow: hidden; } .module-card:hover { border-color: var(--ink); transform: translateY(-2px); } .module-card:focus-visible { outline-offset: 4px; } .module-card .ix { font-family: 'BaWueSans', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--ink-4); text-transform: uppercase; } .module-card .name { font-family: 'BaWueSans', sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; } .module-card .progress-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--ink-3); margin-bottom: 4px; } .module-card .progress-row strong { color: var(--ink); font-size: 16px; font-weight: 600; } .module-card .dates { font-size: 12px; color: var(--ink-4); font-family: 'BaWueSans', sans-serif; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding-top: 12px; border-top: 1px solid var(--rule); } .module-card .start-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; } .module-card .start-cta .circ { width: 28px; height: 28px; border-radius: 999px; background: var(--brand-primary, #FFFC00); display: grid; place-items: center; transition: transform .15s; color: var(--ink); } .module-card:hover .start-cta .circ { transform: translateX(4px); } .module-card .module-actions { display: flex; gap: 8px; flex-wrap: wrap; } .module-card .module-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } /* ----------------------------------------------------------------- Test results — big percentage + score bar ----------------------------------------------------------------- */ .result-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; } .result-big { font-family: 'BaWueSans', sans-serif; font-size: 32px; font-weight: 600; letter-spacing: -0.02em; } .result-big .pct { font-size: 16px; color: var(--ink-3); font-weight: 500; margin-left: 4px; } .score-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--surface-3); margin-top: 14px; } .score-bar .fill { background: var(--ink); height: 100%; } /* ----------------------------------------------------------------- Empty state ----------------------------------------------------------------- */ .empty { border: 1px dashed var(--rule-2); border-radius: var(--radius); padding: 64px 32px; text-align: center; color: var(--ink-3); } .empty .icon { width: 44px; height: 44px; border-radius: 999px; background: var(--surface-2); display: grid; place-items: center; margin: 0 auto 16px; color: var(--ink-3); } .empty h3 { color: var(--ink); margin-bottom: 6px; font-size: 18px; } .empty p { margin: 0; } /* ----------------------------------------------------------------- FAQ (deferred page styling, ported now since it's cheap) ----------------------------------------------------------------- */ .faq-list { border-top: 1px solid var(--rule); } .faq-item { border-bottom: 1px solid var(--rule); } .faq-q { width: 100%; text-align: left; padding: 20px 4px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: 'BaWueSans', sans-serif; font-size: 17px; font-weight: 500; letter-spacing: -0.005em; color: var(--ink); background: none; border: none; cursor: pointer; } .faq-q:hover { color: var(--ink-2); } .faq-q .plus { width: 28px; height: 28px; border-radius: 999px; background: var(--surface-2); display: grid; place-items: center; flex-shrink: 0; transition: background .15s, transform .2s; } .faq-item.open .faq-q .plus, .faq-item[open] .faq-q .plus { background: var(--brand-primary, #FFFC00); transform: rotate(45deg); } /* Native
/: hide the default disclosure marker */ .faq-q { list-style: none; } .faq-q::-webkit-details-marker { display: none; } /* Height (rather than max-height) so faq.js can animate to a measured value. When JS is disabled, the [open]-state rule below snaps the panel to auto. */ .faq-a { height: 0; overflow: hidden; transition: height .3s ease-out; } .faq-item.open .faq-a, .faq-item[open] .faq-a { height: auto; } .faq-a-inner { padding: 0 4px 24px; color: var(--ink-2); max-width: 65ch; } .faq-a-inner a { color: var(--ink); } /* ----------------------------------------------------------------- Contact card (Hilfe page) ----------------------------------------------------------------- */ .contact-card { background: var(--surface-2); border-radius: var(--radius); padding: 24px; margin-bottom: 14px; } .contact-card h4 { font-size: 14px; font-weight: 600; margin: 0 0 8px; } .contact-card a { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; } .contact-card .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; } /* ----------------------------------------------------------------- Menu drawer (right-slide panel + backdrop) ----------------------------------------------------------------- */ .menu-backdrop { position: fixed; inset: 0; background: rgba(10,10,10,.35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 90; opacity: 0; pointer-events: none; transition: opacity .25s; } .menu-backdrop.open { opacity: 1; pointer-events: auto; } .menu-drawer { position: fixed; top: 0; right: 0; width: 420px; max-width: 90vw; height: 100vh; background: #fff; z-index: 100; transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.9,.2,1); display: flex; flex-direction: column; box-shadow: -12px 0 40px rgba(0,0,0,.12); } .menu-drawer.open { transform: translateX(0); } .menu-drawer-head { padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--rule); } .menu-drawer-head strong { font-family: 'BaWueSans', sans-serif; font-size: 16px; font-weight: 600; } .menu-drawer-body { flex: 1; overflow-y: auto; padding: 8px 0; } .menu-drawer-user { padding: 16px 24px 18px; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .menu-drawer-user .user-strip { margin-bottom: 0; max-width: 100%; } .drawer-logout { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid var(--rule); border-radius: 999px; padding: 6px 14px 6px 12px; font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer; transition: background .15s, border-color .15s; font-family: inherit; } .drawer-logout:hover { background: var(--surface-2); border-color: var(--ink-4); } .drawer-logout svg { width: 14px; height: 14px; transform: rotate(180deg); } .drawer-logout-form { margin: 0; padding: 0; } .menu-drawer .group { padding: 16px 24px 8px; font-family: 'BaWueSans', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); } .menu-drawer a { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; transition: background .15s; } .menu-drawer a:hover { background: var(--surface-2); } .menu-drawer a.active { background: var(--brand-primary, #FFFC00); } .menu-drawer a .arrow { color: var(--ink-4); display: inline-flex; } /* Header top-nav links collapsed into the drawer at ≤960px. Hidden on desktop (where they live in the header band) and revealed by the responsive override below. */ .menu-drawer .menu-drawer-toplinks { display: none; } .menu-drawer .ext-label { display: inline-flex; align-items: center; gap: 8px; } .menu-close { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 4px; color: var(--ink); background: none; border: none; cursor: pointer; } .menu-close:hover { background: var(--surface-2); } /* ----------------------------------------------------------------- Footer — dark band ----------------------------------------------------------------- */ .site-footer { background: var(--ink); color: #fff; padding: 24px 0; margin-top: auto; } .site-footer-inner { display: flex; align-items: center; justify-content: space-between; font-size: 13px; gap: 16px; flex-wrap: wrap; } .site-footer a { color: rgba(255,255,255,.85); text-decoration: none; } .site-footer a:hover { color: var(--brand-primary, #FFFC00); } .site-footer .copy { color: rgba(255,255,255,.55); } /* ----------------------------------------------------------------- Utility classes ----------------------------------------------------------------- */ .stack { display: flex; flex-direction: column; gap: 12px; } .hstack { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .spacer { flex: 1; } .muted { color: var(--ink-3); } .mono { font-family: 'BaWueSans', sans-serif; font-weight: 600; letter-spacing: 0.06em; } .upper { text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; font-weight: 600; } .divider { height: 1px; background: var(--rule); margin: 24px 0; } /* ----------------------------------------------------------------- Online-tests ----------------------------------------------------------------- */ .online-tests-info-actions { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; } .online-tests-filter { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto; gap: 16px; align-items: end; margin: 0 0 24px; padding: 16px; background: var(--surface-2, #f6f7f9); border: 1px solid var(--rule); border-radius: 8px; } .online-tests-filter__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .online-tests-filter__field label { font-size: 13px; color: var(--ink-3); font-weight: 500; } .online-tests-filter__field select, .online-tests-filter__field input { width: 100%; border: 1px solid var(--rule); border-radius: 6px; padding: 8px 10px; font: inherit; background: #fff; } .online-tests-filter__actions { display: flex; gap: 8px; } @media (max-width: 720px) { .online-tests-filter { grid-template-columns: 1fr; } .online-tests-filter__actions { width: 100%; } .online-tests-filter__actions .btn { flex: 1; justify-content: center; } } .online-test-card { list-style: none; } .online-test-card > article { border: 1px solid var(--rule); border-radius: 8px; padding: 20px 24px; background: var(--surface, #fff); } .online-test-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; } .online-test-card__title { margin: 0 0 6px; font-size: 17px; font-weight: 600; } .online-test-card__meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); } .online-test-card__module { color: var(--ink-3); } .online-test-card__upcoming { color: var(--ink-3); font-size: 13px; font-style: italic; } .online-test-card__description { margin: 0 0 12px; color: var(--ink-2); font-size: 14px; } .online-test-card__stats { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; font-size: 13px; color: var(--ink-3); } .online-test-card__stats dt { font-weight: 500; } .online-test-card__stats dd { margin: 0; color: var(--ink-2); } .online-test-card__score { font-size: 28px; font-weight: 600; line-height: 1; flex-shrink: 0; } .online-test-card__score--success { color: var(--success, #1f8a4c); } .online-test-card__score--muted { color: var(--ink-3); } .online-test-card__score .pct { font-size: 16px; font-weight: 500; margin-left: 2px; } .online-test-card__bar { height: 6px; background: var(--surface-2, #eef0f3); border-radius: 999px; overflow: hidden; margin-top: 12px; } .online-test-card__bar-fill { height: 100%; transition: width .3s ease; } .online-test-card__note { margin: 12px 0 0; font-size: 13px; } .online-test-card__note.muted { color: var(--ink-3); } .online-test-card__history { margin-top: 12px; border-top: 1px solid var(--rule); padding-top: 12px; } .online-test-card__history summary { cursor: pointer; font-size: 13px; color: var(--ink-3); font-weight: 500; } .online-test-card__history table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; } .online-test-card__history thead tr { text-align: left; border-bottom: 1px solid var(--rule); } .online-test-card__history th, .online-test-card__history td { padding: 6px 8px; } .online-test-card__history tbody tr { border-bottom: 1px solid var(--rule); } /* Tag chips for state badges. */ .tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; background: var(--surface-2, #eef0f3); color: var(--ink-2); } .tag--accent { background: var(--brand-accent, #0a0a0a); color: var(--brand-accent-contrast, #fff); } .tag--success { background: rgba(31,138,76,0.15); color: #1f6f3a; } .tag--danger { background: rgba(192,57,43,0.12); color: #8b1f15; } .tag--muted { background: var(--surface-2, #eef0f3); color: var(--ink-3); } /* ----------------------------------------------------------------- Feedback survey ----------------------------------------------------------------- */ .feedback-form { margin: 0 0 32px; } .feedback-question { border: 1px solid var(--rule); border-radius: 8px; padding: 20px 24px; margin: 0 0 16px; background: var(--surface, #fff); } .feedback-question.has-error { border-color: #c0392b; background: #fff7f5; } .feedback-question legend { padding: 0 4px; font-weight: 600; line-height: 1.4; display: flex; gap: 8px; } .feedback-question__index { color: var(--ink-3); } .feedback-question__text strong { font-weight: 700; } .feedback-question__inputs { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .feedback-option { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; } .feedback-option input[type="radio"] { margin: 0; } .feedback-question__inputs textarea { width: 100%; border: 1px solid var(--rule); border-radius: 6px; padding: 10px; font: inherit; resize: vertical; } .feedback-question__error { color: #c0392b; font-size: 14px; margin: 8px 0 0; } .form-summary-error { background: #fff3f1; border: 1px solid #c0392b; color: #8b1f15; border-radius: 6px; padding: 12px 16px; margin: 0 0 20px; } .feedback-form__actions { margin-top: 24px; } /* ----------------------------------------------------------------- Responsive ----------------------------------------------------------------- */ /* Tablet landscape & down (≤ 1100px) */ @media (max-width: 1100px) { :root { --container-pad: 24px; } .page-grid { gap: 40px; } } /* Tablet portrait & down (≤ 960px) */ @media (max-width: 960px) { :root { --nav-h: 120px; --title-lg: 34px; --title-md: 24px; --page-pad-y: 36px; } .page-grid { grid-template-columns: 1fr; gap: 32px; } .sidebar { position: static; top: auto; } /* Mobile / tablet: when LOGGED IN, prose first, sidebar below — natural DOM order, no `order` overrides. When LOGGED OUT (.home-page-grid--anon), the sidebar (login form + Anwalt) goes ABOVE the prose so visitors hit the login utility immediately. */ .home-page-grid--anon .home-prose { order: 2; } .home-page-grid--anon .home-sidebar { order: 1; } .home-page-grid .home-sidebar .sidebar { gap: 16px; } .module-grid { grid-template-columns: 1fr; } .filter-bar { grid-template-columns: 1fr; gap: 12px; } .filter-bar > .btn, .filter-bar > .btn-primary, .filter-bar > .btn-accent, .filter-bar > .btn-ghost { width: fit-content; } .contact-card .contact-grid { grid-template-columns: 1fr; gap: 16px; } /* Top-nav (Allgemeines / Hilfe / Rechtsreferendariat) collapses out of the header band and reappears inside the menu drawer above the feature groups. */ .primary-nav .nav-item { display: none; } .menu-drawer .menu-drawer-toplinks { display: block; border-bottom: 1px solid var(--rule); padding-bottom: 8px; margin-bottom: 8px; } .carousel-slide { flex-direction: column; align-items: stretch; text-align: left; gap: 0; } .carousel-image, .carousel-content { flex: 0 0 auto; max-width: 100%; } .carousel-image { min-height: 240px; } .carousel-content { padding: 32px var(--space-6); } .carousel-arrow { width: 36px; height: 36px; } } /* Phone (≤ 640px) */ @media (max-width: 640px) { :root { --nav-h: 88px; --title-lg: 28px; --title-md: 20px; --card-pad: 18px; --container-pad: 16px; } .menu-btn { height: 40px; padding: 0 12px 0 10px; font-size: 13px; } .page { padding: 28px 0 56px; } .breadcrumb { font-size: 12px; padding: 12px 0; } .user-strip { font-size: 12px; padding: 6px 12px; } .item-head { flex-direction: column; align-items: flex-start; gap: 12px; } .item-action { align-self: flex-start; } .result-row { grid-template-columns: 1fr; gap: 12px; } .result-row > div:last-child { text-align: left; } .site-footer-inner { flex-direction: column; gap: 8px; align-items: flex-start; } .site-footer-inner .copy { font-size: 11px; } .btn-row { justify-content: stretch; } .btn-row .btn, .btn-row .btn-primary, .btn-row .btn-accent, .btn-row .btn-ghost { flex: 1; justify-content: center; } .faq-q { font-size: 15px; padding: 16px 2px; gap: 12px; } .carousel-image { min-height: 200px; } .carousel-controls .container { gap: 8px; padding-top: 12px; padding-bottom: 12px; } .menu-drawer { width: 100vw; max-width: 100vw; } } /* Small phone (≤ 380px) */ @media (max-width: 380px) { .menu-btn span:not(.bars) { display: none; } .menu-btn { padding: 0 10px; } } @media (prefers-reduced-motion: reduce) { .carousel-track { transition: none; } .menu-drawer, .menu-backdrop { transition: none; } }